:root{--bg:#f3f4f8;--surface:#fff;--ink:#15171f;--muted:#5d6274;--line:#d9dce6;--accent:#4f46ff;--accent-ink:#fff;--pink:#ff3d8b;--lemon:#ffd400;--dots:rgba(21,23,31,.1);
--shadow:0 1px 2px rgba(21,23,31,.08),0 10px 28px -10px rgba(40,44,90,.28);--pad:clamp(16px,3vw,40px);--gap:clamp(14px,1.7vw,24px);--maxw:calc(3*600px + 48px);--radius:18px;
--f-display:'Archivo Black',system-ui,sans-serif;--f-body:'Archivo',system-ui,sans-serif;color-scheme:light}
html[data-theme=dark]{--bg:#0d0f17;--surface:#171a26;--ink:#eceef6;--muted:#9aa0b6;--line:#2a2e42;--accent:#8b8dff;--accent-ink:#0d0f17;--pink:#ff5fa2;--dots:rgba(236,238,246,.09);--shadow:0 1px 2px rgba(0,0,0,.5),0 12px 30px -10px rgba(0,0,0,.8);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-gutter:stable;scroll-behavior:smooth}
body{margin:0;font:17px/1.6 var(--f-body);color:var(--ink);background:var(--bg) radial-gradient(var(--dots) 1.1px,transparent 1.2px) 0 0/14px 14px;transition:background-color .25s,color .25s}
html,body{overflow-x:clip;max-width:100%}
a{color:inherit}:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{width:min(100% - 2*var(--pad),var(--maxw));margin-inline:auto}
::selection{background:var(--pink);color:#fff}

/* aurora + scroll bar + cursor ring */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:50;background:linear-gradient(90deg,var(--accent),var(--pink),var(--lemon));transform-origin:0 50%;transform:scaleX(0)}

/* header */
.site-header{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 92%,transparent)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:88px}
.logo{position:relative;font:800 3rem var(--f-display);letter-spacing:-.03em;text-decoration:none;white-space:nowrap}
.logo span{font-weight:500;color:var(--muted);font-size:.65em;letter-spacing:0}
.logo::before,.logo::after{content:attr(data-text);position:absolute;left:0;top:0;opacity:0;pointer-events:none;clip-path:inset(0)}
.logo::before{color:var(--pink)}.logo::after{color:var(--accent)}
.logo:hover::before{opacity:.9;animation:gl 0.45s steps(2) infinite}
.logo:hover::after{opacity:.9;animation:gl 0.45s steps(2) infinite reverse}
@keyframes gl{0%{transform:translate(-3px,1px);clip-path:inset(10% 0 55% 0)}50%{transform:translate(3px,-1px);clip-path:inset(55% 0 8% 0)}100%{transform:translate(-2px,0);clip-path:inset(30% 0 35% 0)}}
.socials{display:flex;align-items:center;gap:2px}
.socials a,.theme-toggle{display:grid;place-items:center;width:52px;height:52px;color:var(--muted);border-radius:15px;transition:color .15s,background-color .15s,translate .2s}
.socials a:hover,.theme-toggle:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.socials svg,.theme-toggle svg{width:35px;height:35px}
.theme-toggle{border:0;background:none;cursor:pointer;margin-left:8px;padding:0}
.theme-toggle svg{transition:rotate .5s cubic-bezier(.3,1.6,.5,1)}.theme-toggle:hover svg{rotate:90deg}
.i-moon{display:none}html[data-theme=dark] .i-sun{display:none}html[data-theme=dark] .i-moon{display:block}
@media(max-width:720px){.bar{flex-direction:column;gap:4px;padding-block:12px 8px}.socials{flex-wrap:wrap;justify-content:center}}

/* hero */
.hero{padding-block:clamp(28px,4vw,48px) clamp(28px,4vw,48px)}
.hero h1{font:800 clamp(2.4rem,6vw,5.2rem)/1.02 var(--f-display);letter-spacing:-.045em;margin:0;max-width:14em;text-wrap:balance}
.hero-side p{margin:0 0 22px;max-width:56ch;color:var(--muted);font-size:clamp(1rem,1.3vw,1.2rem)}
@media(min-width:721px){.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,72px);align-items:center}}
.hero h1,.hero-side{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}.hero-side{animation-delay:.15s}
@keyframes rise{from{opacity:0;translate:0 28px}}

/* marquee */
.marquee{overflow:hidden;border-block:2px solid var(--ink);background:var(--lemon);color:#15171f;rotate:-1deg;margin:8px -2vw 44px;width:104vw;font:800 1.15rem/1 var(--f-display);box-shadow:0 8px 0 -4px var(--pink)}
.marquee>div{display:flex;width:max-content;animation:mq 38s linear infinite;will-change:translate}.marquee.off>div{animation-play-state:paused}
.marquee:hover>div{animation-play-state:paused}
.mi{display:inline-block;padding:14px 22px;white-space:nowrap;background:none;border:0;color:inherit;font:inherit;text-decoration:none;cursor:pointer;transition:color .15s,background-color .15s}.mi::after{content:"✦";margin-left:44px;color:var(--pink);display:inline-block;transition:rotate .4s}.mi:hover{background:var(--ink);color:var(--lemon)}.mi:hover::after{rotate:180deg}
@keyframes mq{to{translate:-50% 0}}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chips button{font:500 .95rem var(--f-body);padding:6px 16px;border-radius:99px;border:2px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;transition:all .2s cubic-bezier(.3,1.6,.5,1)}
.chips button:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px) rotate(-2deg)}
.chips button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg);transform:scale(1.06)}

/* grid + cards */
.grid{--cols:3;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);padding-bottom:24px}
.grid>.card{flex:0 0 calc((100% - (var(--cols) - 1)*var(--gap))/var(--cols));min-width:0}
@media(max-width:1239px){.grid{--cols:2}}@media(max-width:759px){.grid{--cols:1;max-width:680px;margin-inline:auto}}
.card{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;position:relative;display:block;width:100%;padding:0;border:0;aspect-ratio:16/9;border-radius:var(--radius);background:linear-gradient(135deg,hsl(var(--h) 75% 52%),hsl(calc(var(--h) + 70) 70% 28%));box-shadow:var(--shadow);cursor:pointer;text-align:left;color:#fff;font:inherit;text-decoration:none;
transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .2s ease-out,box-shadow .3s}
.card:not(.in){opacity:0}.card.in{animation:cardin .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--d,0ms)}@keyframes cardin{from{opacity:0;translate:0 40px}}.card[hidden]{display:none}
.card .clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.card .ph{position:absolute;inset:0;display:grid;place-items:center;font:800 clamp(4rem,10vw,8rem)/1 var(--f-display);color:rgba(255,255,255,.22)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.card .clip::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,9,16,.85),rgba(8,9,16,.3) 32%,transparent 58%)}
.card .glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.2),transparent 45%)}
.cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(12px,1.6vw,20px);transition:translate .35s cubic-bezier(.3,1.4,.5,1)}
.cap b{display:block;font:700 clamp(1.05rem,1.7vw,1.5rem)/1.15 var(--f-display);letter-spacing:-.02em;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.cap small{display:block;font-size:.85rem;opacity:.85;margin-top:2px}
.ext{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(8,9,16,.7);color:#fff;transition:rotate .4s cubic-bezier(.3,1.6,.5,1),background-color .2s}
.ext svg{width:16px;height:16px}
.badge{position:absolute;top:12px;left:12px;z-index:3;padding:2px 10px;border-radius:99px;background:var(--lemon);color:#15171f;font:700 .72rem var(--f-body)}
@media(hover:hover){.card:hover{box-shadow:0 30px 50px -18px color-mix(in srgb,var(--accent) 60%,transparent);z-index:2}.card:hover img{transform:scale(1.09)}.card:hover .glare,.card:hover::before{opacity:1}.card:hover .cap{translate:0 -4px}.card:hover .ext{rotate:45deg;background:var(--pink)}}

/* popup */
dialog{width:min(900px,calc(100% - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:22px;background:var(--surface);color:var(--ink);box-shadow:0 0 0 3px var(--ink),8px 10px 0 3px var(--accent),0 40px 90px -20px rgba(0,0,0,.6);overflow:hidden}
dialog[open]{display:flex;flex-direction:column;animation:pop .4s cubic-bezier(.3,1.5,.5,1)}
dialog[open]::backdrop{animation:fade .28s ease}dialog::backdrop{background:rgba(8,9,18,.78)}
@keyframes pop{from{opacity:0;transform:translateY(30px) scale(.9) rotate(-1.5deg)}}@keyframes fade{from{opacity:0}}
.popup-media{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;flex:0 1 auto;min-height:0;background:#0b0c14}
.popup-media::before{content:"";position:absolute;inset:-10%;background:var(--shot) center/cover no-repeat;filter:blur(22px) brightness(.45) saturate(1.2)}
.popup-shot{position:relative;display:block;width:auto;height:auto;max-width:100%;max-height:100%;min-height:0;box-shadow:0 0 0 1px rgba(255,255,255,.28),0 0 44px 4px rgba(255,255,255,.2),0 12px 40px rgba(0,0,0,.5)}
.popup-body{flex:0 0 auto;padding:clamp(14px,3.2dvh,36px) clamp(18px,3.5vw,36px) clamp(16px,3.6dvh,36px)}
.popup-body h2{margin:10px 0 12px;font:800 clamp(1.4rem,min(3.6vw,5dvh),2.5rem)/1.05 var(--f-display);letter-spacing:-.035em}
.popup-body p{margin:0 0 clamp(14px,3dvh,26px);max-width:68ch;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{padding:3px 12px;border-radius:99px;font-size:.85rem;font-weight:500;color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent)}
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:14px;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);translate:-120% 0}
.btn:hover{transform:translateY(-2px) scale(1.04)}.btn:hover::after{translate:120% 0;transition:translate .7s}
.btn svg{width:20px;height:20px}.btn:hover svg{animation:bob .6s ease infinite alternate}@keyframes bob{to{translate:0 3px}}.btn[hidden]{display:none}
.popup-close{position:absolute;top:12px;right:12px;z-index:2;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;background:rgba(8,9,16,.7);color:#fff;transition:rotate .3s,background-color .15s}
.popup-close:hover{background:var(--pink);rotate:90deg}.popup-close svg{width:20px;height:20px}
body.locked{overflow:hidden}

.site-footer{text-align:center;padding-block:64px 48px;color:var(--muted);font-size:.9rem}.site-footer small{display:block;margin-top:6px;opacity:.55}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.card:not(.in){opacity:1}html{scroll-behavior:auto}}

.rot{display:inline-grid;vertical-align:baseline;margin-top:.3em}
.rot>*{grid-area:1/1}
.rs{visibility:hidden;padding:0.2em .18em;pointer-events:none}
.rot-v{justify-self:start;align-self:start;color:#fff;background:linear-gradient(100deg,var(--accent),var(--pink));padding:0.2em .18em;border-radius:.16em;rotate:-1.6deg;box-shadow:.06em .07em 0 var(--lemon);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.rot-v::after{content:"";display:inline-block;width:.08em;height:.8em;margin-left:.06em;background:#fff;vertical-align:-.04em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* popup: everything centered */
.popup-body{text-align:center}
.popup-body h2{margin:0 0 12px}
.tags{justify-content:center;margin-bottom:clamp(10px,2dvh,16px)}
.popup-body p{margin-inline:auto}
.rot-v .c{position:relative}.rot-v .c.s{color:transparent}.rot-v .c.s::after{content:attr(data-g);position:absolute;left:0;right:0;text-align:center;color:#fff}

.hero h1{-webkit-user-select:none;user-select:none;cursor:default}
.hero-side p{margin:0}
@media(max-width:720px){.hero{display:grid;gap:28px}}
@media(max-width:720px){
  .hero{text-align:center}
  .hero h1,.hero-side p{max-width:none;margin-inline:0}
  .rot-v{justify-self:center}
}

/* headline: always 3 lines, size scales with its own column so the first two lines never wrap */
.hero h1{container-type:inline-size;max-width:none}
.hero h1 .t{display:block;font-size:min(10.5cqi,5.2rem);white-space:nowrap}
.hero h1 .rot{white-space:nowrap;font-size:.8em;}

/* light aurora: plain gradients, no blur filters, no animation */
.aurora i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;opacity:.28;background:radial-gradient(circle,var(--c) 0,transparent 62%)}
html[data-theme=dark] .aurora i{opacity:.2}
.aurora i:nth-child(1){--c:var(--accent);left:-18vmax;top:-20vmax}
.aurora i:nth-child(2){--c:var(--pink);right:-22vmax;top:14vh}
.aurora i:nth-child(3){--c:var(--lemon);left:24vw;bottom:-32vmax}
.card::before{content:"";position:absolute;inset:-3px;border-radius:calc(var(--radius) + 3px);z-index:-1;opacity:0;transition:opacity .3s;background:linear-gradient(135deg,var(--accent),var(--pink),var(--lemon))}