/* ═══════════════════════════════════════
   NELLY PORTFOLIO v4 — Premium Dark
   ═══════════════════════════════════════ */

:root{
  --ff-d:'Plus Jakarta Sans',sans-serif;
  --ff-b:'Inter',sans-serif;
  --ff-m:'JetBrains Mono',monospace;
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.25,1,.5,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-full:9999px;
}

[data-theme="dark"]{
  --bg0:#120810;--bg1:#1a0e18;--bg2:#241520;--bg3:#2e1c2a;
  --bgCard:rgba(255,180,210,.03);--bgCardH:rgba(255,180,210,.07);
  --bgGlass:rgba(18,8,16,.88);--bgIn:rgba(255,180,210,.04);
  --t1:#f8e8f0;--t2:#b08898;--t3:#705060;
  --bdr:rgba(255,180,210,.08);--bdrH:rgba(255,180,210,.16);
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 20%,rgba(232,67,147,.06),transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 60%,rgba(253,121,168,.04),transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 90%,rgba(190,50,120,.05),transparent 50%);
}
[data-theme="light"]{
  --bg0:#fdf0f4;--bg1:#f5e0ea;--bg2:#edd4de;--bg3:#e2c4d2;
  --bgCard:rgba(255,255,255,.7);--bgCardH:rgba(255,255,255,.95);
  --bgGlass:rgba(253,240,244,.9);--bgIn:rgba(180,60,100,.04);
  --t1:#2a0e1a;--t2:#7a4060;--t3:#a06878;
  --bdr:rgba(180,60,100,.1);--bdrH:rgba(180,60,100,.2);
  background-image:
    radial-gradient(ellipse 80% 50% at 15% 15%,rgba(232,67,147,.06),transparent 50%),
    radial-gradient(ellipse 60% 40% at 85% 70%,rgba(253,121,168,.05),transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 85%,rgba(190,50,120,.04),transparent 50%);
}

[data-accent="violet"]{--ac:#7c5cfc;--acg:#a78bfa;--acr:124,92,252}
[data-accent="rose"]{--ac:#f43f5e;--acg:#fb7185;--acr:244,63,94}
[data-accent="emerald"]{--ac:#10b981;--acg:#34d399;--acr:16,185,129}
[data-accent="amber"]{--ac:#f59e0b;--acg:#fbbf24;--acr:245,158,11}
[data-accent="cyan"]{--ac:#06b6d4;--acg:#22d3ee;--acr:6,182,212}
[data-accent="pink"]{--ac:#e84393;--acg:#fd79a8;--acr:232,67,147}

[data-font="jakarta"]{--ff-d:'Plus Jakarta Sans',sans-serif}
[data-font="inter"]{--ff-d:'Inter',sans-serif}
[data-font="mono"]{--ff-d:'JetBrains Mono',monospace}
[data-font="outfit"]{--ff-d:'Outfit',sans-serif}
[data-font="sora"]{--ff-d:'Sora',sans-serif}
[data-font="space"]{--ff-d:'Space Grotesk',sans-serif}
[data-font="urbanist"]{--ff-d:'Urbanist',sans-serif}
[data-font="manrope"]{--ff-d:'Manrope',sans-serif}
[data-font="lexend"]{--ff-d:'Lexend',sans-serif}
[data-font="figtree"]{--ff-d:'Figtree',sans-serif}

/* ═══ RESET ═══ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-font-smoothing:antialiased;scrollbar-width:thin;scrollbar-color:var(--ac) var(--bg2)}
body{font-family:var(--ff-b);background:var(--bg0);color:var(--t1);line-height:1.7;overflow-x:hidden;transition:background .6s var(--ease-expo),color .6s var(--ease-expo)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::selection{background:#e84393;color:#fff}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:#e84393;border-radius:var(--r-full)}

.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ═══ NOISE ═══ */
.noise{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:128px}

/* ═══ PRELOADER ═══ */
#preloader{position:fixed;inset:0;z-index:10000;background:var(--bg0);display:flex;align-items:center;justify-content:center;transition:opacity .7s,visibility .7s}
#preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.pl-inner{text-align:center}
.pl-name{display:flex;gap:4px;justify-content:center;margin-bottom:28px}
.pl-char{font-family:var(--ff-d);font-size:clamp(2.5rem,6vw,4rem);font-weight:800;background:linear-gradient(135deg,var(--ac),var(--acg));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:0;transform:translateY(20px);animation:plIn .5s var(--ease-spring) forwards}
.pl-char[data-i="0"],.pl-char[style*="--i:0"]{animation-delay:.15s}
.pl-char[data-i="1"],.pl-char[style*="--i:1"]{animation-delay:.22s}
.pl-char[data-i="2"],.pl-char[style*="--i:2"]{animation-delay:.29s}
.pl-char[data-i="3"],.pl-char[style*="--i:3"]{animation-delay:.36s}
.pl-char[data-i="4"],.pl-char[style*="--i:4"]{animation-delay:.43s}
@keyframes plIn{to{opacity:1;transform:none}}
.pl-bar{width:180px;height:2px;background:var(--bg3);border-radius:var(--r-full);overflow:hidden;margin:0 auto 14px}
.pl-fill{height:100%;background:linear-gradient(90deg,var(--ac),var(--acg));width:0%;border-radius:var(--r-full);transition:width .15s linear}
.pl-num{font-family:var(--ff-m);font-size:.8rem;color:var(--t3)}
.pl-pct{color:var(--ac);font-weight:600}

/* ═══ CURSOR ═══ */
#cursor{position:fixed;z-index:10001;pointer-events:none;mix-blend-mode:difference}
.c-dot{width:8px;height:8px;background:#fff;border-radius:50%;position:fixed;top:-4px;left:-4px;transition:transform .12s var(--ease-out),opacity .3s;box-shadow:0 0 12px rgba(232,67,147,.5)}
.c-ring{width:36px;height:36px;border:1.5px solid rgba(255,255,255,.35);border-radius:50%;position:fixed;top:-18px;left:-18px;transition:width .35s var(--ease-expo),height .35s var(--ease-expo),top .35s var(--ease-expo),left .35s var(--ease-expo),border-color .3s,background .3s}
#cursor.is-link .c-ring{width:56px;height:56px;top:-28px;left:-28px;border-color:var(--ac);background:rgba(232,67,147,.05)}
#cursor.is-link .c-dot{transform:scale(0)}
#cursor.is-down .c-ring{transform:scale(.85)}
#cursor.is-out{opacity:0}
/* Sparkle trail */
.sparkle{position:fixed;pointer-events:none;z-index:10000;width:var(--sz,8px);height:var(--sz,8px);will-change:left,top,opacity,transform}
.sparkle::before,.sparkle::after{content:'';position:absolute;background:var(--ac);border-radius:2px}
.sparkle::before{width:100%;height:2px;top:50%;left:0;transform:translateY(-50%)}
.sparkle::after{width:2px;height:100%;left:50%;top:0;transform:translateX(-50%)}
.sparkle.flower{background:radial-gradient(circle,var(--acg) 30%,transparent 70%);border-radius:50%;--sz:6px}
.sparkle.flower::before,.sparkle.flower::after{display:none}
@media(hover:none){#cursor,.sparkle{display:none!important}}

/* ═══ SCROLL PROGRESS ═══ */
#scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:1000}
.sp-fill{height:100%;background:linear-gradient(90deg,var(--ac),var(--acg));width:0%;transition:width 40ms linear;box-shadow:0 0 10px rgba(var(--acr),.3)}

/* ═══ NAV ═══ */
#navbar{position:fixed;top:0;left:0;right:0;z-index:900;padding:0 24px;transition:all .45s var(--ease-expo)}
#navbar.scrolled{background:var(--bgGlass);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border-bottom:1px solid var(--bdr)}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-logo{font-family:var(--ff-d);font-size:1.6rem;font-weight:800;color:var(--t1);transition:color .2s}
.nav-logo:hover{color:var(--ac)}
.nav-links{display:flex;gap:2px}
.n-link{display:flex;align-items:center;gap:6px;padding:8px 16px;font-size:.8rem;font-weight:500;color:var(--t2);border-radius:var(--r-full);transition:all .25s var(--ease-out)}
.n-link:hover,.n-link.active{color:var(--t1);background:var(--bgCardH)}
.n-link.active{color:var(--ac)}
.nl-n{font-family:var(--ff-m);font-size:.58rem;color:var(--ac);opacity:.5}
.nav-right{display:flex;align-items:center;gap:6px}
.nav-pill{display:flex;align-items:center;gap:5px;padding:6px 12px;border:1px solid var(--bdr);border-radius:var(--r-sm);color:var(--t3);font-size:.63rem;font-family:var(--ff-m);transition:all .25s var(--ease-out)}
.nav-pill:hover{border-color:var(--ac);color:var(--ac)}
.nav-icon{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;color:var(--t3);transition:all .25s var(--ease-out)}
.nav-icon:hover,.nav-icon.active{border-color:var(--ac);color:var(--ac);background:rgba(var(--acr),.08)}
.i-moon{display:none}
[data-theme="light"] .i-sun{display:none}
[data-theme="light"] .i-moon{display:block}
.menu-btn{display:none;width:36px;height:36px;border-radius:var(--r-sm);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-btn span{width:20px;height:2px;background:var(--t1);border-radius:2px;transition:all .35s var(--ease-expo)}
.menu-btn.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.on span:nth-child(2){opacity:0;transform:scaleX(0)}
.menu-btn.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:768px){.nav-links,.nav-pill{display:none}.menu-btn{display:flex}}

/* ═══ MOBILE NAV ═══ */
.mob-nav{position:fixed;inset:0;z-index:800;background:var(--bg0);opacity:0;visibility:hidden;transition:all .45s var(--ease-expo);display:flex;align-items:center}
.mob-nav.on{opacity:1;visibility:visible}
.mob-nav-inner{width:100%;padding:80px 40px 40px;display:flex;flex-direction:column;gap:4px}
.mob-link{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--bdr);font-family:var(--ff-d);font-size:clamp(1.8rem,5vw,2.8rem);font-weight:700;color:var(--t1);opacity:0;transform:translateX(-30px);transition:all .45s var(--ease-expo)}
.mob-nav.on .mob-link{opacity:1;transform:none}
.mob-nav.on .mob-link:nth-child(1){transition-delay:.08s}
.mob-nav.on .mob-link:nth-child(2){transition-delay:.12s}
.mob-nav.on .mob-link:nth-child(3){transition-delay:.16s}
.mob-nav.on .mob-link:nth-child(4){transition-delay:.2s}
.mob-nav.on .mob-link:nth-child(5){transition-delay:.24s}
.mob-link:hover{color:var(--ac);padding-left:24px}
.ml-i{font-family:var(--ff-m);font-size:.7rem;color:var(--ac);opacity:.4}
.ml-arr{margin-left:auto;opacity:0;transform:translateX(-10px);transition:all .3s var(--ease-out)}
.mob-link:hover .ml-arr{opacity:1;transform:none}

/* ═══ COMMAND PALETTE ═══ */
.cmd-palette{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-start;justify-content:center;padding-top:18vh;opacity:0;visibility:hidden;transition:all .25s}
.cmd-palette.on{opacity:1;visibility:visible}
.cmd-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(8px)}
.cmd-modal{position:relative;width:480px;max-width:92vw;background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r-lg);box-shadow:0 24px 80px rgba(0,0,0,.5);overflow:hidden;animation:cmdIn .3s var(--ease-expo)}
@keyframes cmdIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.cmd-search{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--bdr);color:var(--t3)}
.cmd-search input{flex:1;background:none;border:none;outline:none;font-size:.92rem;color:var(--t1);font-family:var(--ff-b)}
.cmd-search input::placeholder{color:var(--t3)}
.cmd-search kbd{font-family:var(--ff-m);font-size:.58rem;padding:3px 8px;background:var(--bg3);border-radius:4px;color:var(--t3);border:1px solid var(--bdr)}
.cmd-list{max-height:300px;overflow-y:auto;padding:8px}
.cmd-group{margin-bottom:4px}
.cmd-label{font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--t3);padding:8px 12px 4px;display:block}
.cmd-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;color:var(--t1);font-size:.85rem;border-radius:var(--r-sm);text-align:left;transition:background .15s}
.cmd-item:hover{background:rgba(var(--acr),.08);color:var(--ac)}
.ci{width:24px;text-align:center;opacity:.5;font-size:.8rem}

/* ═══ EDITOR BAR ═══ */
.editor-bar{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:899;background:var(--bgGlass);backdrop-filter:blur(24px) saturate(1.5);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:10px 18px;display:flex;align-items:center;gap:14px;box-shadow:0 8px 40px rgba(0,0,0,.2);opacity:0;visibility:hidden;transition:all .35s var(--ease-spring)}
.editor-bar.on{opacity:1;visibility:visible}
.eb-sec{display:flex;align-items:center;gap:8px}
.eb-lbl{font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--t3);white-space:nowrap}
.eb-div{width:1px;height:24px;background:var(--bdr)}
.eb-swatches{display:flex;gap:5px}
.ebs{width:20px;height:20px;border-radius:50%;border:2px solid transparent;background:var(--c);transition:all .2s var(--ease-out)}
.ebs:hover{transform:scale(1.25)}
.ebs.active{border-color:var(--t1);box-shadow:0 0 0 3px var(--bg0)}
.eb-fonts{display:flex;gap:3px}
.ebf{padding:4px 10px;border:1px solid var(--bdr);border-radius:var(--r-sm);color:var(--t2);font-size:.72rem;font-weight:500;transition:all .2s}
.ebf:hover,.ebf.active{border-color:var(--ac);color:var(--ac);background:rgba(var(--acr),.06)}
.eb-actions{display:flex;gap:4px;margin-left:4px;padding-left:12px;border-left:1px solid var(--bdr)}
.eb-btn{padding:5px 10px;border:1px solid var(--bdr);border-radius:var(--r-sm);color:var(--t2);font-size:.68rem;font-weight:500;transition:all .2s}
.eb-btn:hover{border-color:var(--ac);color:var(--ac)}
.eb-save{border-color:rgba(var(--acr),.3);color:var(--ac);background:rgba(var(--acr),.06)}
.eb-danger:hover{border-color:#ef4444;color:#ef4444;background:rgba(239,68,68,.06)}
@media(max-width:768px){.editor-bar{width:calc(100vw - 32px);flex-wrap:wrap;justify-content:center;top:76px}}

[data-edit-mode="true"] [data-editable]{outline:2px dashed var(--ac);outline-offset:4px;border-radius:4px;cursor:text;transition:outline-color .2s,box-shadow .2s,background .2s}
[data-edit-mode="true"] [data-editable]:hover{outline-style:solid;box-shadow:0 0 0 4px rgba(var(--acr),.1)}
[data-edit-mode="true"] [data-editable]:focus{outline:2px solid var(--ac);box-shadow:0 0 0 4px rgba(var(--acr),.18);background:rgba(var(--acr),.04);outline-offset:2px}

/* ═══ REVEAL ═══ */
.r-up{opacity:0;transform:translateY(50px);transition:opacity .9s var(--ease-expo),transform .9s var(--ease-expo)}
.r-up.rev{opacity:1;transform:none}
[data-d="100"]{transition-delay:100ms}[data-d="200"]{transition-delay:200ms}[data-d="250"]{transition-delay:250ms}[data-d="300"]{transition-delay:300ms}[data-d="350"]{transition-delay:350ms}[data-d="400"]{transition-delay:400ms}[data-d="450"]{transition-delay:450ms}[data-d="500"]{transition-delay:500ms}[data-d="550"]{transition-delay:550ms}[data-d="600"]{transition-delay:600ms}

/* ═══ GLOBAL NETWORK CANVAS ═══ */
#network-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}

/* ═══ HERO ═══ */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;padding:120px 24px 0}
.hero-bg{position:absolute;inset:0;z-index:1}
.hero-gradient{position:absolute;inset:0;background:
  radial-gradient(ellipse 60% 50% at 20% 30%,rgba(232,67,147,.12),transparent 60%),
  radial-gradient(ellipse 40% 50% at 80% 70%,rgba(253,121,168,.08),transparent 60%),
  radial-gradient(ellipse 50% 40% at 50% 50%,rgba(190,50,120,.06),transparent 60%)}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--bdr) 1px,transparent 1px),linear-gradient(90deg,var(--bdr) 1px,transparent 1px);background-size:80px 80px;opacity:.2;mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,black 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,black 20%,transparent 70%)}
.hero-content{position:relative;z-index:3;max-width:1000px;margin:0 auto;width:100%;display:flex;flex-direction:column;min-height:calc(100vh - 160px);justify-content:center}

/* ═══ TELECOM FLOATING ═══ */
.telecom-float{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.tf-item{position:absolute;left:var(--x);top:var(--y);opacity:0;animation:tfFloat var(--d) ease-in-out var(--dl) infinite alternate}
@keyframes tfFloat{0%{transform:translate(0,0) rotate(0deg);opacity:.12}50%{opacity:.2}100%{transform:translate(15px,-20px) rotate(5deg);opacity:.12}}
.tf-item svg{width:clamp(30px,4vw,50px);height:clamp(30px,4vw,50px);color:var(--ac)}
.tf-binary-text{font-family:var(--ff-m);font-size:.55rem;color:var(--ac);opacity:.15;letter-spacing:2px;white-space:nowrap;display:block}
.tf-binary-2 .tf-binary-text{animation:binaryScroll 8s linear infinite}
@keyframes binaryScroll{0%{transform:translateX(0)}100%{transform:translateX(-20px)}}

/* ═══ SIGNAL WAVES ═══ */
.signal-waves{position:absolute;bottom:15%;left:50%;transform:translateX(-50%);z-index:2;pointer-events:none}
.sw-ring{position:absolute;border:1px solid var(--ac);border-radius:50%;width:40px;height:40px;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;animation:swPulse 3s ease-out infinite;animation-delay:calc(var(--si) * 1s)}
@keyframes swPulse{0%{width:40px;height:40px;opacity:.25}100%{width:160px;height:160px;opacity:0}}

/* ═══ WAVEFORM ═══ */
.waveform{position:absolute;bottom:60px;left:0;right:0;height:60px;z-index:2;pointer-events:none;display:flex;align-items:end;justify-content:center;gap:2px;opacity:.1}
.waveform .wf-bar{width:3px;background:var(--ac);border-radius:2px 2px 0 0;animation:wfAnim 1.2s ease-in-out infinite alternate;animation-delay:var(--wd)}
@keyframes wfAnim{0%{height:var(--wh1)}100%{height:var(--wh2)}}

.hero-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 20px;background:rgba(var(--acr),.06);border:1px solid rgba(var(--acr),.12);border-radius:var(--r-full);font-size:.78rem;font-weight:500;color:var(--ac)}
.hb-dot{width:7px;height:7px;background:#22c55e;border-radius:50%;animation:hbPulse 2s infinite}
@keyframes hbPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}
.hero-loc{font-size:.78rem;color:var(--t3)}

.hero-title{margin-bottom:28px}
.ht-line{overflow:hidden}
.ht-label{display:block;font-size:1.05rem;font-weight:400;color:var(--t2);margin-bottom:8px}

/* Electric / Neon text */
.ht-name{display:block;font-family:var(--ff-d);font-size:clamp(4.5rem,12vw,10rem);font-weight:800;line-height:.92;letter-spacing:-3px;position:relative;user-select:none}
.et-outline{display:block;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.25);transition:opacity 1.5s}
.et-fill{position:absolute;top:0;left:0;color:#fff;background:linear-gradient(135deg,#fff 0%,var(--acg) 50%,var(--ac) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:0;transition:opacity 1.8s .3s;clip-path:inset(0 100% 0 0);animation:textReveal 1.5s var(--ease-expo) .8s forwards}
@keyframes textReveal{to{clip-path:inset(0 0 0 0)}}
.ht-name::after{content:attr(data-editable);position:absolute;top:0;left:0;font-family:var(--ff-d);font-size:clamp(4.5rem,12vw,10rem);font-weight:800;line-height:.92;letter-spacing:-3px;color:var(--ac);opacity:0;filter:blur(40px);animation:electricPulse 4s ease-in-out 2s infinite}
@keyframes electricPulse{0%,100%{opacity:0}50%{opacity:.2}}

/* Text Style Variants */
.ht-name.ts-solid .et-outline{display:none}
.ht-name.ts-solid .et-fill{position:static;color:var(--ac);background:none;-webkit-text-fill-color:var(--ac);opacity:1;clip-path:none;animation:none}
.ht-name.ts-outline .et-outline{opacity:1}
.ht-name.ts-outline .et-fill{display:none}
.ht-name.ts-outline .et-outline{color:transparent;-webkit-text-stroke:2px var(--ac)}
.ht-name.ts-gradient .et-outline{display:none}
.ht-name.ts-gradient .et-fill{position:static;opacity:1;clip-path:none;animation:none;background:linear-gradient(135deg,var(--ac),var(--acg),var(--ac));background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradShift 4s ease infinite}
.ht-name.ts-neon .et-outline{display:none}
.ht-name.ts-neon .et-fill{position:static;opacity:1;clip-path:none;animation:none;color:var(--ac);-webkit-text-fill-color:var(--ac);text-shadow:0 0 10px var(--ac),0 0 30px var(--ac),0 0 60px rgba(var(--acr),.3)}

.ht-role{display:block;font-family:var(--ff-d);font-size:clamp(1rem,2.5vw,1.35rem);font-weight:500;color:var(--t2)}

.hero-mid{display:flex;align-items:end;justify-content:space-between;gap:48px;margin-bottom:auto}
.hero-desc{max-width:480px;font-size:.98rem;color:var(--t2);line-height:1.85}
.hero-ctas{display:flex;gap:12px;flex-shrink:0}

/* Glitch Button */
.glitch-btn{position:relative;display:inline-flex;align-items:center;padding:14px 32px;border:1px solid rgba(255,255,255,.5);color:#fff;font-size:.85rem;font-weight:600;letter-spacing:.08em;transition:border-color .25s,background .25s,box-shadow .25s}
.glitch-btn::before,.glitch-btn::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;letter-spacing:.08em}
.glitch-btn::before{color:var(--ac)}
.glitch-btn::after{color:var(--acg)}
.glitch-btn:hover::before,.glitch-btn:focus-visible::before,.glitch-btn:active::before{opacity:1;animation:.25s steps(2,end) infinite gA}
.glitch-btn:hover::after,.glitch-btn:focus-visible::after,.glitch-btn:active::after{opacity:1;animation:.25s steps(2,end) .12s infinite gB}
.glitch-btn:hover,.glitch-btn:focus-visible,.glitch-btn:active{animation:.25s steps(2,end) infinite gBase;border-color:var(--ac);background:rgba(var(--acr),.06);box-shadow:0 0 24px rgba(var(--acr),.15)}
@keyframes gBase{0%{transform:skew(0)}33%{transform:skew(-3deg) scaleX(1.01)}66%{transform:skew(2deg) scaleX(.99)}to{transform:skew(0)}}
@keyframes gA{0%{clip-path:inset(0 0 72%);transform:translate(-2px) skew(-5deg)}50%{clip-path:inset(42% 0 22%);transform:translate(2px) skew(3deg)}to{clip-path:inset(66% 0 0);transform:translate(-1px) skew(-2deg)}}
@keyframes gB{0%{clip-path:inset(62% 0 0);transform:translate(2px) skew(4deg)}50%{clip-path:inset(18% 0 52%);transform:translate(-2px) skew(-3deg)}to{clip-path:inset(0 0 76%);transform:translate(1px) skew(2deg)}}
.cta-text{position:relative;z-index:1}
.cta-glitch{display:none}

.btn-ghost{display:inline-flex;align-items:center;padding:14px 32px;border:1px solid var(--bdrH);border-radius:0;color:var(--t1);font-size:.85rem;font-weight:600;letter-spacing:.08em;transition:all .3s var(--ease-out)}
.btn-ghost:hover{border-color:var(--ac);color:var(--ac)}

.btn-submit{width:100%;justify-content:center;margin-top:8px;padding:16px 32px;border-radius:0}

/* Hero Stats */
.hero-stats{display:flex;align-items:center;gap:40px;padding:28px 0;border-top:1px solid var(--bdr);margin-top:auto}
.hs-item{display:flex;align-items:baseline;gap:4px}
.hs-num{font-family:var(--ff-d);font-size:2.8rem;font-weight:800;color:var(--t1)}
.hs-plus{font-family:var(--ff-d);font-size:1.8rem;font-weight:700;color:var(--ac)}
.hs-label{font-size:.78rem;color:var(--t3);margin-left:8px}
.hs-sep{width:1px;height:40px;background:var(--bdr)}

/* Scroll Hint */
.scroll-hint{position:absolute;bottom:28px;right:32px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--t3);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-family:var(--ff-m);opacity:0;transform:translateY(8px);transition:all .4s var(--ease-out)}
.scroll-hint.vis{opacity:1;transform:none}
.sh-line{width:1px;height:22px;background:var(--ac);border-radius:2px;animation:shPulse 1.4s ease-in-out infinite}
@keyframes shPulse{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:.8;transform:translateY(7px)}}

@media(max-width:768px){.hero-mid{flex-direction:column;gap:24px}.hero-stats{flex-wrap:wrap;gap:20px;justify-content:center}.hs-sep{display:none}.hs-label{display:block;margin:0;width:100%}}

/* ═══ MARQUEE ═══ */
.marquee-band{padding:20px 0;border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);overflow:hidden;position:relative;z-index:1}
.marquee-track{overflow:hidden}
.marquee-inner{display:flex;gap:48px;white-space:nowrap;animation:marqueeScroll 30s linear infinite;width:max-content}
.marquee-inner span{font-family:var(--ff-d);font-size:clamp(1rem,2vw,1.5rem);font-weight:700;color:var(--t3);opacity:.35;transition:all .3s}
.marquee-inner span:hover{opacity:1;color:var(--ac)}
.md{font-size:.35rem!important;opacity:.12!important;color:var(--ac)!important}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ═══ SECTIONS ═══ */
.section{padding:120px 24px;position:relative;z-index:1;overflow:hidden}
.section::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20h20v0h20M20 40h40M20 60h15v20h25M60 20v60M80 20h20v20h-20M80 60h20M100 20v40M120 20h30v30h-30M120 80h30M160 20v40M160 70h30M20 100h40M70 100v30h20M110 100h40M160 100v20h30M20 140h30M60 140v40M100 140h20v30M140 140h50M20 180h40M80 170h30v30M130 180h60' fill='none' stroke='currentColor' stroke-width='.5'/%3E%3Ccircle cx='20' cy='20' r='2' fill='currentColor' opacity='.3'/%3E%3Ccircle cx='60' cy='20' r='2' fill='currentColor' opacity='.3'/%3E%3Ccircle cx='60' cy='60' r='2' fill='currentColor' opacity='.3'/%3E%3Ccircle cx='100' cy='20' r='2' fill='currentColor' opacity='.3'/%3E%3Ccircle cx='100' cy='60' r='2' fill='currentColor' opacity='.3'/%3E%3Ccircle cx='160' cy='20' r='2' fill='currentColor' opacity='.3'/%3E%3Ccircle cx='160' cy='80' r='2' fill='currentColor' opacity='.3'/%3E%3Ccircle cx='70' cy='100' r='2' fill='currentColor' opacity='.3'/%3E%3Ccircle cx='110' cy='100' r='2' fill='currentColor' opacity='.3'/%3E%3Ccircle cx='160' cy='100' r='2' fill='currentColor' opacity='.3'/%3E%3Ccircle cx='60' cy='140' r='2' fill='currentColor' opacity='.3'/%3E%3Ccircle cx='100' cy='140' r='2' fill='currentColor' opacity='.3'/%3E%3C/svg%3E");background-size:200px 200px}
.sec-dark{background:var(--bg1)}
.sec-dark::after,.section::after{content:'';position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0}
.sec-dark::after{width:500px;height:500px;background:rgba(232,67,147,.06);top:-200px;right:-150px;animation:secOrb 15s ease-in-out infinite alternate}
.section::after{width:400px;height:400px;background:rgba(253,121,168,.05);bottom:-150px;left:-100px;animation:secOrb 18s ease-in-out infinite alternate-reverse}
@keyframes secOrb{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.1)}100%{transform:translate(-20px,20px) scale(.95)}}
.sec-head{text-align:center;margin-bottom:72px;position:relative}

/* Floating petals */
.section:nth-child(odd)::before{content:'';position:absolute;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(232,67,147,.08),transparent 70%);top:10%;right:5%;animation:petalFloat 12s ease-in-out infinite alternate;pointer-events:none;z-index:0}
.section:nth-child(even)::before{content:'';position:absolute;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(253,121,168,.06),transparent 70%);bottom:15%;left:8%;animation:petalFloat 15s ease-in-out infinite alternate-reverse;pointer-events:none;z-index:0}
@keyframes petalFloat{0%{transform:translate(0,0) scale(1);opacity:.6}50%{transform:translate(-20px,-30px) scale(1.2);opacity:1}100%{transform:translate(10px,15px) scale(.9);opacity:.5}}
.sh-tag{display:inline-block;font-family:var(--ff-m);font-size:.7rem;font-weight:500;color:var(--ac);letter-spacing:2px;margin-bottom:14px}
.sh-title{font-family:var(--ff-d);font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;line-height:1.1;letter-spacing:-1px}
.tg{background:linear-gradient(135deg,var(--ac),var(--acg));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ═══ ABOUT ═══ */
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.about-left{position:sticky;top:120px}
.about-avatar-wrap{position:relative;width:88px;height:88px;margin-bottom:20px}
.about-avatar-ring{position:absolute;inset:-5px;border:2px solid var(--ac);border-radius:50%;opacity:.25;animation:avRing 3s ease infinite}
@keyframes avRing{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.6;transform:scale(1.05)}}
.about-avatar{width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--acg));display:flex;align-items:center;justify-content:center;font-family:var(--ff-d);font-size:2.2rem;font-weight:800;color:#fff}
.about-name{font-family:var(--ff-d);font-size:1.5rem;font-weight:700;margin-bottom:4px}
.about-role{color:var(--ac);font-size:.85rem;font-weight:500;margin-bottom:16px}
.about-bio{color:var(--t2);font-size:.95rem;line-height:1.85}

.about-right{display:flex;flex-direction:column;gap:32px}
.about-quote{display:flex;flex-direction:column;gap:10px}
.aq-icon{color:var(--ac);opacity:.2}
.about-quote p{font-family:var(--ff-d);font-size:1.05rem;font-weight:500;line-height:1.7;color:var(--t2);font-style:italic}
.about-info-grid{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr)}
.ai-row{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--bdr)}
.ai-row:last-child{border-bottom:none}
.ai-k{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--t3)}
.ai-v{font-weight:500;font-size:.9rem}
.ai-active{color:#22c55e;display:flex;align-items:center;gap:6px}
.ai-active::before{content:'';width:7px;height:7px;background:#22c55e;border-radius:50%;animation:hbPulse 2s infinite}
.about-stack h4{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--t3);margin-bottom:12px}
.stack-tags{display:flex;flex-wrap:wrap;gap:6px}
.stack-tags span{padding:6px 14px;background:rgba(var(--acr),.06);border:1px solid rgba(var(--acr),.1);border-radius:var(--r-full);font-size:.75rem;font-weight:500;color:var(--ac);transition:all .25s var(--ease-out)}
.stack-tags span:hover{background:var(--ac);color:#fff;border-color:var(--ac);transform:translateY(-2px)}
@media(max-width:768px){.about-layout{grid-template-columns:1fr;gap:40px}.about-left{position:static}}

/* ═══ SKILLS ═══ */
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.skill-block{background:var(--bgCard);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:28px;transition:all .4s var(--ease-expo);position:relative;overflow:hidden}
.skill-block::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--ac),var(--acg));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-expo)}
.skill-block:hover{border-color:var(--bdrH);transform:translateY(-4px)}
.skill-block:hover::before{transform:scaleX(1)}
.sb-icon{width:48px;height:48px;border-radius:var(--r-md);background:rgba(var(--acr),.06);color:var(--ac);display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:all .3s}
.skill-block:hover .sb-icon{background:var(--ac);color:#fff;transform:scale(1.08)}
.skill-block h3{font-family:var(--ff-d);font-size:1.05rem;font-weight:700;margin-bottom:8px}
.skill-block p{font-size:.82rem;color:var(--t2);line-height:1.6;margin-bottom:16px}
.sb-bar{height:4px;background:var(--bg3);border-radius:var(--r-full);overflow:hidden}
.sb-fill{height:100%;background:linear-gradient(90deg,var(--ac),var(--acg));border-radius:var(--r-full);width:0%;transition:width 1.8s var(--ease-expo)}
@media(max-width:900px){.skills-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.skills-grid{grid-template-columns:1fr}}

/* ═══ WORK ═══ */
.work-filters{display:flex;justify-content:center;gap:8px;margin-bottom:48px}
.wf{padding:10px 24px;border:1px solid var(--bdr);border-radius:var(--r-full);color:var(--t2);font-size:.82rem;font-weight:500;transition:all .25s var(--ease-out)}
.wf:hover,.wf.active{background:var(--ac);color:#fff;border-color:var(--ac)}

.work-list{display:flex;flex-direction:column;gap:2px}
.w-card{display:grid;grid-template-columns:60px 1fr auto 50px;gap:24px;align-items:center;padding:28px 32px;background:var(--bgCard);border:1px solid var(--bdr);transition:all .4s var(--ease-expo);cursor:pointer}
.w-card.hidden{display:none}
.w-card:hover{border-color:var(--bdrH);background:var(--bgCardH);transform:translateX(8px)}
.wc-num{font-family:var(--ff-m);font-size:.75rem;color:var(--t3)}
.wc-content{min-width:0}
.wc-cat{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--ac);margin-bottom:4px;display:block}
.wc-content h3{font-family:var(--ff-d);font-size:1.1rem;font-weight:700;margin-bottom:4px}
.wc-content p{font-size:.82rem;color:var(--t2);line-height:1.6;margin-bottom:10px}
.wc-tags{display:flex;gap:5px;flex-wrap:wrap}
.wc-tags span{padding:3px 10px;background:rgba(var(--acr),.06);border-radius:var(--r-full);font-size:.65rem;font-weight:500;color:var(--ac)}
.wc-media{width:80px;height:80px;border-radius:var(--r-md);overflow:hidden;flex-shrink:0}
.wc-grad{width:100%;height:100%;background:linear-gradient(135deg,var(--g1),var(--g2));display:flex;align-items:center;justify-content:center;font-size:2rem;transition:transform .5s var(--ease-expo)}
.w-card:hover .wc-grad{transform:scale(1.15)}
.wc-arrow{color:var(--t3);transition:all .3s var(--ease-out)}
.w-card:hover .wc-arrow{color:var(--ac);transform:translate(4px,-4px)}
@media(max-width:768px){.w-card{grid-template-columns:40px 1fr 40px;gap:16px;padding:20px}.wc-media{display:none}}

/* ═══ TIMELINE ═══ */
.timeline{position:relative;max-width:700px;margin:0 auto}
.tl-track{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--bdr)}
.tl-fill{width:100%;background:linear-gradient(to bottom,var(--ac),var(--acg));border-radius:2px;height:0%;transition:height 80ms linear}
.tl-item{position:relative;padding-left:40px;padding-bottom:36px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-5px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--bg2);border:3px solid var(--ac);z-index:2;transition:all .3s}
.tl-item.rev .tl-dot{background:var(--ac);box-shadow:0 0 0 5px rgba(var(--acr),.15)}
.tl-card{background:var(--bgCard);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:24px;transition:all .4s var(--ease-expo);overflow:hidden;position:relative}
.tl-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--ac),var(--acg));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-expo)}
.tl-card:hover{border-color:var(--bdrH);transform:translateX(6px)}
.tl-card:hover::before{transform:scaleX(1)}
.tl-date{font-family:var(--ff-m);font-size:.68rem;color:var(--ac);padding:4px 12px;background:rgba(var(--acr),.06);border-radius:var(--r-full);display:inline-block;margin-bottom:10px}
.tl-card h3{font-size:1.05rem;font-weight:700;margin-bottom:2px}
.tl-card h4{font-size:.85rem;color:var(--t2);font-weight:500;margin-bottom:8px}
.tl-card p{font-size:.82rem;color:var(--t2);line-height:1.7}

/* ═══ TESTIMONIALS ═══ */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tc{background:var(--bgCard);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:28px;transition:all .4s var(--ease-expo)}
.tc:hover{transform:translateY(-6px);border-color:var(--bdrH)}
.tc-stars{font-size:.8rem;color:#fbbf24;letter-spacing:2px;margin-bottom:14px}
.tc p{font-size:.9rem;color:var(--t2);line-height:1.8;margin-bottom:22px;font-style:italic}
.tc-author{display:flex;align-items:center;gap:10px}
.tc-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--acg));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.85rem;flex-shrink:0}
.tc-author strong{display:block;font-size:.85rem}
.tc-author span{font-size:.72rem;color:var(--t3)}
@media(max-width:900px){.testi-grid{grid-template-columns:repeat(2,1fr)}.testi-grid .tc:last-child{grid-column:span 2;max-width:50%;margin:0 auto}}
@media(max-width:600px){.testi-grid{grid-template-columns:1fr}.testi-grid .tc:last-child{grid-column:span 1;max-width:100%}}

/* ═══ CONTACT ═══ */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.cl-intro{font-size:1rem;color:var(--t2);line-height:1.85;margin-bottom:28px}
.cl-methods{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.clm{display:flex;align-items:center;gap:14px;padding:16px;background:var(--bgCard);border:1px solid var(--bdr);transition:all .3s var(--ease-out)}
.clm:hover{border-color:var(--ac);transform:translateX(8px)}
.clm-icon{width:44px;height:44px;border-radius:var(--r-md);background:rgba(var(--acr),.06);color:var(--ac);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.clm small{font-size:.68rem;color:var(--t3);display:block;margin-bottom:1px}
.clm strong{font-size:.9rem;color:var(--t1)}
.cl-socials{display:flex;gap:8px}
.cl-soc{width:40px;height:40px;border-radius:var(--r-md);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;color:var(--t2);transition:all .25s var(--ease-out)}
.cl-soc:hover{background:var(--ac);color:#fff;border-color:var(--ac);transform:translateY(-4px)}

.cform{background:var(--bgCard);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:32px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-field{position:relative;margin-bottom:22px}
.cf-field input,.cf-field textarea{width:100%;padding:16px;background:var(--bgIn);border:1px solid var(--bdr);border-radius:var(--r-md);color:var(--t1);font-size:.9rem;font-family:var(--ff-b);outline:none;transition:all .3s var(--ease-out)}
.cf-field textarea{resize:vertical;min-height:120px}
.cf-field input:focus,.cf-field textarea:focus{border-color:var(--ac);box-shadow:0 0 0 4px rgba(var(--acr),.08)}
.cf-field label{position:absolute;top:16px;left:16px;color:var(--t3);font-size:.9rem;pointer-events:none;transition:all .25s var(--ease-out)}
.cf-field input:focus+label,.cf-field input:not(:placeholder-shown)+label,.cf-field textarea:focus+label,.cf-field textarea:not(:placeholder-shown)+label{top:-9px;left:12px;font-size:.65rem;background:var(--bg0);padding:2px 8px;border-radius:4px;color:var(--ac);font-weight:600}
.cf-line{position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--ac);transition:all .4s var(--ease-expo);transform:translateX(-50%);border-radius:2px}
.cf-field input:focus~.cf-line,.cf-field textarea:focus~.cf-line{width:100%}
@media(max-width:768px){.contact-layout{grid-template-columns:1fr;gap:36px}.cf-row{grid-template-columns:1fr}}

/* ═══ FOOTER ═══ */
.footer{padding:56px 24px 20px;border-top:1px solid var(--bdr);position:relative;z-index:1}
.ft-top{display:flex;justify-content:space-between;align-items:start;margin-bottom:36px}
.ft-logo{font-family:var(--ff-d);font-size:1.8rem;font-weight:800;color:var(--t1)}
.footer p{color:var(--t3);font-size:.85rem;margin-top:6px;max-width:320px}
.ft-nav{display:flex;gap:24px}
.ft-nav a{color:var(--t2);font-size:.85rem;font-weight:500;transition:color .25s}
.ft-nav a:hover{color:var(--ac)}
.ft-bottom{display:flex;justify-content:space-between;padding-top:20px;border-top:1px solid var(--bdr)}
.ft-bottom p{font-size:.75rem;color:var(--t3);margin:0}
.ft-credit{opacity:.5}
@media(max-width:600px){.ft-top{flex-direction:column;gap:20px}.ft-bottom{flex-direction:column;gap:6px;text-align:center}}

/* ═══ TOAST ═══ */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);z-index:10000;opacity:0;transition:all .4s var(--ease-spring);pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast-inner{display:flex;align-items:center;gap:8px;padding:12px 22px;background:var(--ac);color:#fff;border-radius:var(--r-full);font-size:.8rem;font-weight:600;box-shadow:0 8px 30px rgba(var(--acr),.3)}

/* ═══ AUTH MODAL ═══ */
.auth-modal{position:fixed;inset:0;z-index:10002;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s var(--ease-out)}
.auth-modal.on{opacity:1;visibility:visible}
.auth-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(10px)}
.auth-box{position:relative;width:380px;max-width:90vw;background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:36px;text-align:center;animation:authIn .4s var(--ease-spring);box-shadow:0 24px 80px rgba(0,0,0,.4)}
@keyframes authIn{from{opacity:0;transform:scale(.92) translateY(16px)}to{opacity:1;transform:none}}
.auth-icon{width:56px;height:56px;border-radius:50%;background:rgba(var(--acr),.08);color:var(--ac);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.auth-box h3{font-family:var(--ff-d);font-size:1.2rem;font-weight:700;margin-bottom:6px}
.auth-box p{font-size:.82rem;color:var(--t2);margin-bottom:20px}
.auth-input-wrap{position:relative;margin-bottom:8px}
.auth-input-wrap input{width:100%;padding:14px 48px 14px 16px;background:var(--bgIn);border:1px solid var(--bdr);border-radius:var(--r-md);color:var(--t1);font-size:.92rem;font-family:var(--ff-b);outline:none;transition:all .25s}
.auth-input-wrap input:focus{border-color:var(--ac);box-shadow:0 0 0 4px rgba(var(--acr),.1)}
.auth-input-wrap input.shake{animation:authShake .4s}
@keyframes authShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.auth-toggle-pw{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--t3);cursor:pointer;padding:4px;transition:color .2s}
.auth-toggle-pw:hover{color:var(--ac)}
.auth-error{font-size:.75rem;color:#ef4444;margin-bottom:8px;opacity:0;transition:opacity .2s}
.auth-error.show{opacity:1}
.auth-actions{display:flex;gap:8px;margin-top:16px}
.auth-btn{flex:1;padding:12px;border-radius:var(--r-md);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .25s;font-family:var(--ff-b);border:none}
.auth-cancel{background:var(--bgIn);color:var(--t2);border:1px solid var(--bdr)}
.auth-cancel:hover{background:var(--bgCardH);color:var(--t1)}
.auth-submit{background:var(--ac);color:#fff}
.auth-submit:hover{filter:brightness(1.1);transform:translateY(-1px)}

/* ═══ REDUCED MOTION ═══ */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}