/* Reset de base */
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: one site, seven pages routed on the hash. A BA's working file (tickets, sequences) meets a video editor's timeline (playheads, waveforms). Indigo = analysis & code, amber = creation & Chill & Work. */
:root{
  --bg:#F2F3F8; --surface:#FFFFFF; --sunk:#E8EAF2; --fg:#12162A; --muted:#596079; --line:#D6D9E5;
  --accent:#3346D3; --accent-soft:#E2E6FC; --warm:#D9822B; --warm-soft:#FBEBD9; --ok:#1E8E5A;
  --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:12px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0C0F1D; --surface:#151A2D; --sunk:#10142A; --fg:#E8EAF4; --muted:#9BA2BC; --line:#272E48;
  --accent:#8C9EFF; --accent-soft:#1D2550; --warm:#F2A653; --warm-soft:#3A2814; --ok:#4CC98C; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0C0F1D; --surface:#151A2D; --sunk:#10142A; --fg:#E8EAF4; --muted:#9BA2BC; --line:#272E48;
  --accent:#8C9EFF; --accent-soft:#1D2550; --warm:#F2A653; --warm-soft:#3A2814; --ok:#4CC98C; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.6;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:10;background:var(--bg)}
.wrap{max-width:1100px;margin:0 auto}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;letter-spacing:-.015em}
p{margin:0}
.label{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}

/* ---------- icons ---------- */
.ic{width:24px;height:24px;flex:none;display:inline-block;vertical-align:middle;overflow:visible}
.ic *{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.ic .fill{fill:currentColor;stroke:none}
.ic-box{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none;transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .2s}
.ic-box.warm{background:var(--warm-soft);color:var(--warm)}
.ic-box .ic{width:26px;height:26px}
.hov:hover .ic-box,.hov:focus-visible .ic-box{transform:rotate(-6deg) scale(1.08)}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{50%{transform:translateY(-3px)}}
@keyframes lift{0%{transform:none}40%{transform:translate(2px,-4px)}100%{transform:none}}
@keyframes bar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.35)}}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
@keyframes dash{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
@keyframes slide{0%{transform:translateX(-5px)}100%{transform:translateX(6px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes rise{0%,100%{transform:none}50%{transform:translateY(-2px) scaleY(1.15)}}

.ic .a-dash{stroke-dasharray:60}
:is(.hov:hover,.hov:focus-visible,.play) .ic .a-spin{animation:spin 1.6s linear infinite}
:is(.hov:hover,.hov:focus-visible,.play) .ic .a-bob{animation:bob .8s ease-in-out infinite}
:is(.hov:hover,.hov:focus-visible,.play) .ic .a-lift{animation:lift 1s ease-in-out infinite}
:is(.hov:hover,.hov:focus-visible,.play) .ic .a-bar{animation:bar .7s ease-in-out infinite}
:is(.hov:hover,.hov:focus-visible,.play) .ic .a-bar:nth-child(2){animation-delay:.12s}
:is(.hov:hover,.hov:focus-visible,.play) .ic .a-bar:nth-child(3){animation-delay:.24s}
:is(.hov:hover,.hov:focus-visible,.play) .ic .a-bar:nth-child(4){animation-delay:.36s}
:is(.hov:hover,.hov:focus-visible,.play) .ic .a-bar:nth-child(5){animation-delay:.48s}
:is(.hov:hover,.hov:focus-visible,.play) .ic .a-ring{animation:ring .9s ease-in-out infinite;transform-origin:50% 0}
:is(.hov:hover,.hov:focus-visible,.play) .ic .a-dash{animation:dash 1.1s ease-out both}
:is(.hov:hover,.hov:focus-visible,.play) .ic .a-slide{animation:slide .9s ease-in-out infinite alternate}
:is(.hov:hover,.hov:focus-visible,.play) .ic .a-blink{animation:blink .9s ease-in-out infinite}
:is(.hov:hover,.hov:focus-visible,.play) .ic .a-blink:nth-child(2){animation-delay:.15s}
:is(.hov:hover,.hov:focus-visible,.play) .ic .a-blink:nth-child(3){animation-delay:.3s}
:is(.hov:hover,.hov:focus-visible,.play) .ic .a-pop{animation:pop .8s ease-in-out infinite}
:is(.hov:hover,.hov:focus-visible,.play) .ic .a-rise{animation:rise .9s ease-in-out infinite}
.live .ic .a-spin{animation:spin 6s linear infinite}
.live .ic .a-bar{animation:bar 1s ease-in-out infinite}
.live .ic .a-bar:nth-child(2){animation-delay:.15s}.live .ic .a-bar:nth-child(3){animation-delay:.3s}.live .ic .a-bar:nth-child(4){animation-delay:.45s}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;font:500 15px var(--f-body);padding:12px 18px;border-radius:10px;text-decoration:none;cursor:pointer;
  border:1px solid var(--fg);background:var(--fg);color:var(--bg);transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .2s,background .2s,color .2s;will-change:transform}
.btn .ic{width:18px;height:18px;transition:transform .25s}
.btn:hover{box-shadow:0 8px 22px -10px var(--accent)}
.btn:hover .ic.arrow{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--fg)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.warm{background:var(--warm);border-color:var(--warm);color:#1d1205}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.25;transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- nav ---------- */
nav.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);margin-inline:calc(-1 * max(16px, env(safe-area-inset-left, 0px)))}
nav.top .wrap{display:flex;align-items:center;gap:20px;padding-block:12px;padding-inline:max(16px, env(safe-area-inset-left, 0px))}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:18px;text-decoration:none;color:var(--fg);flex:none}
.brand .mono{width:34px;height:34px;border-radius:9px;background:var(--fg);color:var(--bg);display:grid;place-items:center;font-size:14px;letter-spacing:.02em;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .mono{transform:rotate(-12deg)}
.navlinks{position:relative;display:flex;gap:4px;list-style:none;margin:0 0 0 auto;padding:0;overflow-x:auto;scrollbar-width:none;min-width:0}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{display:flex;align-items:center;gap:7px;white-space:nowrap;color:var(--muted);text-decoration:none;font-size:14px;font-weight:500;padding:8px 12px;border-radius:8px;transition:color .2s,background .2s}
.navlinks a .ic{width:17px;height:17px}
.navlinks a:hover{color:var(--fg);background:var(--sunk)}
.navlinks a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}

/* ---------- pages ---------- */
.page{padding-block:48px 72px}
.page.enter{animation:pageIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pageIn{from{opacity:.0;transform:translateY(14px)}to{opacity:1;transform:none}}
.page-head{display:grid;gap:12px;margin-bottom:40px;max-width:760px}
.page-head h1{font-size:clamp(36px,6vw,64px);font-weight:800;line-height:1}
.page-head p{color:var(--muted);font-size:18px;max-width:62ch}
.block{margin-top:56px}
.block > h2{font-size:clamp(24px,3.4vw,32px);font-weight:700;margin-bottom:8px}
.block > .sub{color:var(--muted);max-width:64ch;margin-bottom:24px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;min-width:0}
a.card{text-decoration:none;color:inherit;display:block;transition:transform .3s cubic-bezier(.3,1.4,.5,1),border-color .2s,box-shadow .3s}
a.card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 18px 40px -24px var(--accent)}

/* ---------- home ---------- */
.hero{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:center;padding-top:24px}
.hero > *{min-width:0}
.status{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:13px;background:var(--surface);border:1px solid var(--line);padding:6px 12px 6px 10px;border-radius:999px;margin-bottom:26px}
.status .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:beacon 2s infinite}
@keyframes beacon{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.me{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.me .status{margin-bottom:0}
.portrait{margin:0;width:112px;height:124px;border-radius:22px;overflow:hidden;flex:none;background:var(--sunk);box-shadow:0 0 0 4px var(--surface),0 0 0 5px var(--line),0 18px 36px -18px var(--accent);transform:rotate(-3deg);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.portrait:hover{transform:rotate(0) scale(1.04)}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.hero h1{font-size:clamp(52px,9vw,104px);font-weight:800;line-height:.92;letter-spacing:-.035em}
.hero h1 .l2{display:block;color:var(--accent)}
.roles{margin-top:22px;font-family:var(--f-display);font-size:clamp(20px,2.8vw,28px);font-weight:500;display:flex;gap:.35em;flex-wrap:wrap;align-items:baseline}
.rot{position:relative;display:inline-block;height:1.25em;overflow:hidden;vertical-align:bottom;color:var(--warm);font-weight:700}
.rot span{display:block;line-height:1.25em;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.hero .lead{color:var(--muted);font-size:18px;max-width:54ch;margin:18px 0 30px}
.facets{display:grid;gap:12px}
.facets a.card.facet{display:flex;gap:16px;align-items:center;padding:16px 18px}
.facet h3{font-size:18px;font-weight:700}
.facet p{font-size:14px;color:var(--muted);line-height:1.45}
.facet .go{margin-left:auto;color:var(--muted);transition:transform .25s,color .2s}
.facet:hover .go{transform:translateX(4px);color:var(--accent)}
.facet > div{min-width:0}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-top:56px;overflow:hidden}
.stat{padding:22px;border-right:1px solid var(--line);min-width:0}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(30px,4vw,42px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:14px;color:var(--muted)}

.method{display:grid;grid-template-columns:repeat(5,1fr);counter-reset:s;list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.method li{padding:20px 18px;border-right:1px solid var(--line);counter-increment:s;min-width:0;display:grid;gap:10px;align-content:start;transition:background .2s}
.method li:hover{background:var(--sunk)}
.method li:last-child{border-right:0}
.method .n{display:flex;justify-content:space-between;align-items:center;color:var(--accent)}
.method .n::before{content:counter(s,decimal-leading-zero);font-family:var(--f-mono);font-size:12px}
.method h3{font-size:17px}
.method p{font-size:14px;color:var(--muted);line-height:1.5}

/* ---------- projects ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.chip{display:inline-flex;align-items:center;gap:7px;font:500 14px var(--f-body);padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;transition:all .2s}
.chip .ic{width:16px;height:16px}
.chip:hover{color:var(--fg);border-color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip .count{font-family:var(--f-mono);font-size:12px;opacity:.7}
.tickets{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ticket{display:grid;gap:12px;align-content:start;transition:transform .3s cubic-bezier(.3,1.4,.5,1),border-color .2s,box-shadow .3s,opacity .3s}
.ticket:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 18px 40px -26px var(--accent)}
.ticket.feature{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:20px}
.ticket.feature > div{display:grid;gap:12px;min-width:0}
.ticket .top{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.tid{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.type{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:4px;border:1px solid currentColor}
.type.pro{color:var(--accent)} .type.aca{color:var(--muted)} .type.crea{color:var(--warm)} .type.web{color:var(--ok)}
.ticket h3{font-size:21px;line-height:1.2}
.ticket .desc{color:var(--muted);font-size:15px}
.ticket dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px;margin:0}
.ticket dt{font-family:var(--f-mono);font-size:12px;color:var(--muted);padding-top:2px}
.ticket dd{margin:0}
.tags{display:flex;flex-wrap:wrap;gap:6px;padding-top:12px;border-top:1px dashed var(--line)}
.tags span{font-family:var(--f-mono);font-size:12px;background:var(--sunk);color:var(--fg);padding:2px 8px;border-radius:4px}
.ticket .more{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:14px;text-decoration:none}
.ticket .more .ic{width:16px;height:16px;transition:transform .2s}
.ticket .more:hover .ic{transform:translateX(4px)}

/* ---------- Chill & Work ---------- */
.cw-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.cw-hero > *{min-width:0}
.photo{border-radius:var(--r);overflow:hidden;position:relative;background:var(--sunk);max-width:100%}
.photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.photo:hover img{transform:scale(1.05)}
.photo figcaption{position:absolute;left:12px;bottom:12px;font-family:var(--f-mono);font-size:12px;background:rgba(10,12,24,.72);color:#fff;padding:4px 10px;border-radius:6px}
.cw-hero .photo{aspect-ratio:16/10}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12px;padding:5px 10px;border-radius:999px;background:var(--warm-soft);color:var(--warm)}
.cw-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 24px;margin:22px 0 26px}
.cw-meta div{display:grid;gap:2px;min-width:0}
.cw-meta strong{font-weight:500}

.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.three .card{display:grid;gap:12px;align-content:start}
.three h3{font-size:19px}
.three ul{margin:0;padding-left:18px;color:var(--muted);font-size:15px}
.three li{margin-bottom:3px}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.feat{background:var(--surface);padding:22px;display:grid;gap:10px;align-content:start;min-width:0;transition:background .2s}
.feat:hover{background:var(--sunk)}
.feat h3{font-size:17px}
.feat p{font-size:14px;color:var(--muted);line-height:1.5}

.pipe{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding-top:6px}
.pipe .track{position:absolute;left:10%;right:10%;top:30px;height:2px;background:var(--line);overflow:visible}
.pipe .track::after{content:"";position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--warm);box-shadow:0 0 0 4px var(--warm-soft);animation:travel 5s cubic-bezier(.6,0,.4,1) infinite}
@keyframes travel{0%{left:0}100%{left:calc(100% - 10px)}}
.stage{position:relative;display:grid;justify-items:center;text-align:center;gap:8px;min-width:0}
.stage .node{width:50px;height:50px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);color:var(--accent);display:grid;place-items:center;z-index:1;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.stage:hover .node{transform:scale(1.12)}
.stage.prod .node{border-color:var(--ok);color:var(--ok)}
.stage b{font-family:var(--f-mono);font-size:13px;font-weight:500}
.stage span{font-size:13px;color:var(--muted);line-height:1.4}

.ci{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;margin:0;padding:0}
.ci li{display:flex;gap:12px;align-items:center;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:10px;min-width:0}
.ci li > div{min-width:0}
.ci .chk{width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);display:grid;place-items:center;flex:none}
.ci .chk .ic{width:15px;height:15px}
.ci b{font-family:var(--f-mono);font-size:12px;color:var(--muted);font-weight:400;display:block}
.ci span{font-size:14px}

.stack{display:flex;flex-wrap:wrap;gap:8px}
.stack span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:14px;transition:transform .2s,border-color .2s}
.stack span:hover{transform:translateY(-2px);border-color:var(--accent)}
.stack .ic{width:18px;height:18px;color:var(--accent)}

.gallery{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px}
.gallery .photo{aspect-ratio:16/10}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.split .card{display:grid;gap:12px;align-content:start}
.split h3{font-size:19px}
.split ul{margin:0;padding-left:18px;font-size:15px;color:var(--muted)}

/* ---------- creation ---------- */
.player{position:relative;display:block;aspect-ratio:16/9;max-width:100%;border-radius:var(--r);overflow:hidden;text-decoration:none;color:#fff;
  background:radial-gradient(circle at 72% 58%, #2a7bd6 0 17%, #1556a8 22%, transparent 23%), radial-gradient(circle at 70% 56%, rgba(120,190,255,.35) 0 26%, transparent 27%), radial-gradient(ellipse at 20% 10%, #1b2453, #05070f 70%)}
.player .stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 33% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 48% 18%,#fff,transparent),radial-gradient(1px 1px at 88% 12%,#fff,transparent),radial-gradient(1px 1px at 92% 84%,#fff,transparent),radial-gradient(1.5px 1.5px at 8% 86%,#fff,transparent),radial-gradient(1px 1px at 58% 90%,#fff,transparent);animation:twinkle 4s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.5}to{opacity:1}}
.player .heat{position:absolute;left:58%;top:36%;width:28%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%, rgba(255,140,40,.55), transparent 60%);mix-blend-mode:screen;animation:heat 3s ease-in-out infinite alternate}
@keyframes heat{from{opacity:.3;transform:scale(.9)}to{opacity:.9;transform:scale(1.08)}}
.player .ov{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(14px,3vw,24px);background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 40%,rgba(0,0,0,.55))}
.player .ttl{font-family:var(--f-display);font-weight:800;font-size:clamp(20px,3.6vw,36px);line-height:1.05;max-width:16ch}
.player .ttl small{display:block;font-family:var(--f-mono);font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin-bottom:8px}
.player .playbtn{align-self:center;justify-self:start;width:68px;height:68px;border-radius:50%;background:#fff;color:#0a0d1c;display:grid;place-items:center;box-shadow:0 0 0 0 rgba(255,255,255,.5);animation:pulse 2s infinite;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.player:hover .playbtn{transform:scale(1.12)}
.player .playbtn .ic{width:28px;height:28px;margin-left:4px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}100%{box-shadow:0 0 0 22px rgba(255,255,255,0)}}
.player .bar{display:grid;gap:8px}
.player .tl{height:4px;border-radius:2px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.player .tl i{position:absolute;inset:0 auto 0 0;width:38%;background:#ff4d4d;animation:scrub 9s linear infinite}
@keyframes scrub{from{width:0}to{width:100%}}
.player .meta{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:12px;opacity:.9;gap:12px;flex-wrap:wrap}

.crea-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:start}
.crea-grid > *{min-width:0}
.tools{display:grid;gap:10px}
.tool{display:flex;gap:14px;align-items:center;padding:14px 16px}
.tool h3{font-size:16px}
.tool p{font-size:14px;color:var(--muted);line-height:1.45}
.tool > div{min-width:0}

.timeline-ed{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:18px 18px 18px 18px;overflow:hidden}
.timeline-ed .tracks{display:grid;gap:8px;position:relative}
.trk{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center}
.trk b{font-family:var(--f-mono);font-size:11px;color:var(--muted);font-weight:400}
.clips{display:flex;gap:4px;height:30px;min-width:0}
.clips i{display:block;border-radius:5px;height:100%}
.v i{background:color-mix(in srgb,var(--accent) 70%,transparent)}
.v i:nth-child(2n){background:color-mix(in srgb,var(--accent) 45%,transparent)}
.a i{background:color-mix(in srgb,var(--ok) 55%,transparent);background-image:repeating-linear-gradient(90deg,transparent 0 3px,color-mix(in srgb,var(--ok) 80%,transparent) 3px 4px)}
.t i{background:color-mix(in srgb,var(--warm) 60%,transparent)}
.playhead{position:absolute;top:-6px;bottom:-6px;left:54px;width:2px;background:var(--warm);animation:ph 7s linear infinite}
.playhead::before{content:"";position:absolute;top:-2px;left:-5px;width:12px;height:10px;background:var(--warm);clip-path:polygon(0 0,100% 0,50% 100%)}
@keyframes ph{from{left:54px}to{left:calc(100% - 2px)}}

.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.jobs .card{display:grid;gap:12px;align-content:start}
.jobs h3{font-size:19px}
.jobs p{color:var(--muted);font-size:15px}

/* ---------- parcours ---------- */
.tl2{position:relative;display:grid;gap:0;padding-left:34px}
.tl2::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--accent),var(--warm))}
.tl2 article{position:relative;display:grid;grid-template-columns:170px 1fr;gap:24px;padding:18px 0 26px}
.tl2 article > *{min-width:0}
.tl2 .pin{position:absolute;left:-34px;top:20px;width:24px;height:24px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);display:grid;place-items:center;color:var(--accent);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.tl2 .pin .ic{width:13px;height:13px}
.tl2 article:hover .pin{transform:scale(1.25)}
.tl2 article.w .pin{border-color:var(--warm);color:var(--warm)}
.when{font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.tl2 h3{font-size:21px}
.org{color:var(--accent);font-weight:500}
.tl2 article.w .org{color:var(--warm)}
.tl2 ul{margin:8px 0 0;padding-left:18px}
.tl2 li{margin-bottom:3px}
.edu{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.edu .card{display:flex;gap:16px;align-items:flex-start}
.edu h3{font-size:19px;margin:4px 0}
.langs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.langs span{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:14px}

/* ---------- competences ---------- */
.skill-groups{display:grid;gap:36px}
.sg-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sg-head h2{font-size:24px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.tile{display:flex;gap:12px;align-items:center;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;transition:transform .25s cubic-bezier(.3,1.4,.5,1),border-color .2s;min-width:0}
.tile:hover{transform:translateY(-3px);border-color:var(--accent)}
.tile .ic{width:24px;height:24px;color:var(--accent)}
.tile.w .ic{color:var(--warm)}
.tile.w:hover{border-color:var(--warm)}
.tile b{font-weight:500;font-size:15px;display:block;line-height:1.25}
.tile small{color:var(--muted);font-size:12px}
.tile > div{min-width:0}

/* ---------- contact ---------- */
.contact-box{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
.contact-box > *{min-width:0}
.channels{display:grid;gap:4px;padding:10px 22px}
.chan{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.chan > div{flex:1;min-width:0;display:grid}
.chan:nth-last-child(2){border-bottom:0}
.mail{font-family:var(--f-mono);font-size:clamp(15px,2.2vw,18px);user-select:all;overflow-wrap:anywhere}
.chan .btn{padding:9px 14px;font-size:14px}
#copy-msg{font-family:var(--f-mono);font-size:13px;color:var(--ok);min-height:1.3em;padding-bottom:8px}
.avail{display:grid;gap:12px}
.avail .row{display:flex;gap:14px;align-items:center}

footer{border-top:1px solid var(--line);padding-block:24px;color:var(--muted);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero,.cw-hero,.crea-grid,.contact-box{grid-template-columns:1fr;gap:32px}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .method{grid-template-columns:1fr}
  .method li{border-right:0;border-bottom:1px solid var(--line)}
  .method li:last-child{border-bottom:0}
  .three,.features,.jobs{grid-template-columns:1fr 1fr}
  .ci{grid-template-columns:1fr 1fr}
  .tickets{grid-template-columns:1fr}
  .tl2 article{grid-template-columns:1fr;gap:4px}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery .photo:first-child{grid-column:1/-1}
  .pipe{grid-template-columns:1fr;gap:18px;padding-left:0}
  .pipe .track{left:24px;right:auto;top:10px;bottom:10px;width:2px;height:auto}
  .pipe .track::after{left:-4px;animation-name:travelY}
  .stage{grid-template-columns:50px 1fr;justify-items:start;text-align:left;column-gap:14px;row-gap:0}
  .stage .node{grid-row:span 2}
  @keyframes travelY{0%{top:0}100%{top:calc(100% - 10px)}}
}
@media (max-width:640px){
  .three,.features,.jobs,.ci,.split,.edu{grid-template-columns:1fr}
  .ticket.feature{grid-template-columns:1fr}
  .cw-meta{grid-template-columns:1fr 1fr}
  .navlinks a span{display:none}
  .navlinks a{padding:9px}
  .navlinks a[aria-current="page"] span{display:inline}
  .brand .name{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}