:root{--ink:#f7f8fb;--muted:#9ba3b2;--dark:#06101e;--violet:#8f79ff;--page:clamp(24px,4.3vw,78px);--ease:cubic-bezier(.2,.76,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:#05080e}body{margin:0;background:#05080e;color:var(--ink);font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}::selection{background:#7d6bff;color:#fff}
.noise{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.045;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}.scroll-meter{position:fixed;right:0;top:0;width:2px;height:100vh;z-index:210;background:rgba(255,255,255,.04)}.scroll-meter i{display:block;height:0;width:100%;background:linear-gradient(#8e7dff,#62c8ff)}
.topbar{position:fixed;z-index:150;top:0;left:0;right:0;height:70px;padding:0 var(--page);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#eef1f7;transition:color .6s,background .6s,border-color .6s;border-bottom:1px solid transparent}.topbar.on-light{color:#1c1d23;background:rgba(245,244,238,.55);border-color:rgba(0,0,0,.06);backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:11px;width:max-content}.brand .mark{width:34px;height:34px;border-radius:11px;border:1px solid rgba(139,124,255,.45);display:grid;place-items:center;font-size:9px;font-weight:800;background:rgba(106,83,255,.1)}.brand>span:last-child{display:flex;flex-direction:column}.brand b{font-size:11px}.brand small{font-size:7px;text-transform:uppercase;letter-spacing:.11em;opacity:.62}.topbar nav{display:flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(10,14,24,.25);backdrop-filter:blur(14px)}.topbar.on-light nav{border-color:rgba(0,0,0,.08);background:rgba(255,255,255,.4)}.topbar nav a{font-size:8px;padding:7px 12px;border-radius:999px}.status{justify-self:end;font-size:8px;display:flex;align-items:center;gap:7px;opacity:.72}.status i{width:5px;height:5px;border-radius:50%;background:#4bd59e;box-shadow:0 0 11px #4bd59e}
.cinema{height:1280vh;position:relative}.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#06101e;perspective:1600px}.stage-bg{position:absolute;inset:-2%;background:radial-gradient(circle at 50% 50%,#102242 0,#081429 46%,#06101e 78%);will-change:background,opacity}.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(circle at 55% 48%,#000,transparent 78%);opacity:.75}.vignette{position:absolute;inset:0;box-shadow:inset 0 0 180px rgba(0,0,0,.58);pointer-events:none}.scene{position:absolute;inset:0;padding:100px var(--page) 45px;pointer-events:none;will-change:opacity,transform,filter}
.hero{opacity:1}.hero-copy{position:absolute;z-index:8;left:var(--page);top:50%;width:min(39vw,610px);transform:translateY(-50%);will-change:transform,opacity}.eyebrow{font:600 8px "Cascadia Code",Consolas,monospace;letter-spacing:.12em;color:#a49ccc;margin:0 0 24px}.hero-copy h1{font-size:clamp(46px,5.1vw,80px);line-height:1.02;letter-spacing:-.055em;font-weight:550;margin:0 0 22px}.hero-copy h1 em{font-style:normal;color:#9989ff}.lede{font-size:13px;line-height:1.72;color:#a8afbc;max-width:560px;margin:0}.hero-actions{margin-top:30px;display:flex;align-items:center;gap:20px}.buttonish{display:inline-flex;align-items:center;gap:22px;padding:7px 8px 7px 16px;border:1px solid rgba(145,126,255,.4);border-radius:999px;background:rgba(111,83,255,.17);font-size:9px;box-shadow:0 0 32px rgba(104,75,255,.18)}.buttonish b{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#8a78ff}.hero-actions small{font-size:7px;letter-spacing:.12em;color:#71798a}.portrait{position:absolute;z-index:6;left:36%;bottom:-4%;width:min(39vw,620px);height:88vh;margin:0;will-change:transform,opacity;transform-style:preserve-3d}.portrait-aura{position:absolute;inset:12% -10% 2%;background:radial-gradient(circle at 52% 50%,rgba(117,91,255,.24),rgba(25,43,80,.08) 50%,transparent 72%);filter:blur(28px)}.portrait img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:100%;width:auto;max-width:none;filter:saturate(.75) contrast(1.03) brightness(.82);mask-image:radial-gradient(ellipse at 50% 45%,#000 28%,#000 52%,rgba(0,0,0,.93) 65%,rgba(0,0,0,.55) 77%,transparent 90%);-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 28%,#000 52%,rgba(0,0,0,.93) 65%,rgba(0,0,0,.55) 77%,transparent 90%)}.portrait figcaption{position:absolute;left:8%;bottom:8%;padding:8px 11px;border-left:1px solid #8e7dff;background:rgba(6,11,20,.35);backdrop-filter:blur(8px);display:flex;flex-direction:column}.portrait figcaption small{font-size:6px;letter-spacing:.11em;color:#aaa5ce}.portrait figcaption b{font-size:9px;font-weight:550}.hero-previews{position:absolute;z-index:5;right:var(--page);top:16%;width:35vw;height:72vh;will-change:transform,opacity}.soft-shot{position:absolute;margin:0;overflow:visible;will-change:transform,opacity,filter}.soft-shot::after{content:"";position:absolute;inset:-12%;background:radial-gradient(ellipse at center,transparent 42%,rgba(6,16,30,.1) 59%,rgba(6,16,30,.62) 80%,#06101e 100%);filter:blur(15px);pointer-events:none}.soft-shot span{position:absolute;z-index:3;left:7%;top:5%;font-size:7px;color:#c3c7d1;text-shadow:0 1px 10px #000}.soft-shot img{width:100%;height:100%;object-fit:cover;border-radius:16px;filter:saturate(.72) brightness(.76) contrast(.95);mask-image:radial-gradient(ellipse at center,#000 42%,rgba(0,0,0,.96) 59%,rgba(0,0,0,.58) 76%,transparent 93%);-webkit-mask-image:radial-gradient(ellipse at center,#000 42%,rgba(0,0,0,.96) 59%,rgba(0,0,0,.58) 76%,transparent 93%)}.shot-a{right:-3%;top:0;width:94%;height:34%;transform:rotate(1deg)}.shot-b{left:2%;top:31%;width:88%;height:31%;transform:rotate(-1.2deg)}.shot-c{right:-4%;bottom:1%;width:69%;height:27%;transform:rotate(1.5deg)}.hero-scene-label{position:absolute;left:var(--page);bottom:27px;border:1px solid rgba(255,255,255,.12);background:rgba(7,11,18,.45);border-radius:999px;padding:9px 13px;display:flex;align-items:center;gap:9px;font-size:7px;color:#8b92a1}.hero-scene-label b{font-size:17px;color:#fff}.hero-scene-label span{padding-left:7px;border-left:1px solid rgba(255,255,255,.1)}
.light-scene{color:#17181d;opacity:0;display:grid;grid-template-columns:.72fr 1.28fr;grid-template-rows:auto 1fr;gap:4vw 8vw;align-content:center;background:transparent}.light-kicker{grid-column:1/-1;font:600 8px "Cascadia Code",Consolas,monospace;letter-spacing:.14em;color:#77717e;transform:translateY(30px);opacity:0}.light-scene h2{font-size:clamp(39px,4.4vw,68px);line-height:1.03;letter-spacing:-.05em;font-weight:520;margin:20px 0 0;max-width:730px;transform:translateY(40px);opacity:0}.light-intro{font-family:Georgia,serif;font-size:clamp(21px,2.1vw,31px);line-height:1.45;color:#454248;margin:25px 0 0;max-width:560px;transform:translateY(45px);opacity:0}.principles{align-self:center;border-top:1px solid rgba(20,20,25,.15);transform:translateY(55px);opacity:0}.principles article{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid rgba(20,20,25,.15)}.principles article>span{font:600 8px "Cascadia Code",monospace;color:#8a8490;padding-top:4px}.principles b{font-size:21px;font-weight:560;letter-spacing:-.025em}.principles p{font-size:12px;line-height:1.65;color:#716d75;max-width:600px;margin:8px 0 0}.light-note{position:absolute;right:var(--page);bottom:30px;font:600 7px "Cascadia Code",monospace;letter-spacing:.16em;color:#827b88;opacity:0}
.orbit-scene{opacity:0;color:#f6f7fb}.orbit-title{position:absolute;left:var(--page);top:16%;width:36vw;opacity:0;will-change:transform,opacity}.orbit-title small{font:600 8px "Cascadia Code",monospace;letter-spacing:.15em;color:#8a84a7}.orbit-title h2{font-size:clamp(38px,4vw,60px);line-height:1.04;letter-spacing:-.05em;font-weight:520;margin:14px 0}.orbit-title em{font-family:Georgia,serif;font-weight:400;color:#9a8dda}.orbit-core{position:absolute;left:50%;top:50%;width:128px;height:128px;border-radius:50%;transform:translate(-50%,-50%) scale(.2);display:grid;place-items:center;border:1px solid rgba(145,126,255,.28);background:radial-gradient(circle,rgba(111,85,255,.16),rgba(9,11,18,.5) 68%);box-shadow:0 0 80px rgba(104,77,255,.16);opacity:0}.core-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#9a89ff;box-shadow:0 0 24px #9a89ff}.orbit-core span{margin-top:45px;font:600 6px "Cascadia Code",monospace;letter-spacing:.12em;color:#767b89}.project-orbit{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}.orbit-card{position:absolute;left:50%;top:50%;width:min(29vw,470px);margin:0;transform-style:preserve-3d;transform-origin:center;opacity:0;will-change:transform,opacity,filter}.orbit-card>span{position:absolute;right:-4px;top:-4px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#101522;border:1px solid rgba(153,135,255,.4);font:600 7px "Cascadia Code",monospace;color:#b9b2e8;box-shadow:0 0 25px rgba(119,94,255,.18)}.card-frame{padding:5px;border-radius:15px;background:rgba(15,18,28,.86);border:1px solid rgba(255,255,255,.12);box-shadow:0 32px 90px rgba(0,0,0,.55),0 0 55px rgba(102,84,214,.08);overflow:hidden}.card-frame img{width:100%;aspect-ratio:1.9;object-fit:cover;border-radius:10px}.project-detail{position:absolute;left:var(--page);bottom:9%;width:min(38vw,540px);opacity:0;will-change:opacity,transform}.project-detail small{font:600 8px "Cascadia Code",monospace;letter-spacing:.14em;color:#9289bb}.project-detail h3{font-size:clamp(36px,4vw,62px);line-height:1;letter-spacing:-.05em;font-weight:540;margin:12px 0 8px}.project-detail>span{font-size:13px;color:#c0c4ce}.project-detail p{font-size:12px;line-height:1.72;color:#8f96a4;max-width:500px}.detail-line{display:flex;align-items:center;gap:9px;margin-top:20px}.detail-line i{width:40px;height:1px;background:#8e7dff}.detail-line b{font:600 7px "Cascadia Code",monospace;letter-spacing:.13em;color:#6e7482}
.final-scene{opacity:0}.final-copy{position:absolute;left:var(--page);top:18%;max-width:660px}.final-copy small{font:600 8px "Cascadia Code",monospace;letter-spacing:.15em;color:#9b92be}.final-copy h2{font-size:clamp(39px,4.3vw,66px);line-height:1.04;letter-spacing:-.05em;font-weight:520;margin:16px 0}.final-copy h2 em{font-family:Georgia,serif;font-weight:400;color:#9d90dc}.final-copy p{font-size:13px;line-height:1.72;color:#9ba2af;max-width:570px}.stack-row{position:absolute;left:var(--page);right:var(--page);bottom:13%;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stack-row article{padding:20px;border:1px solid rgba(255,255,255,.1);background:rgba(16,20,31,.55);border-radius:14px;backdrop-filter:blur(14px)}.stack-row span{font:600 7px "Cascadia Code",monospace;letter-spacing:.13em;color:#797f8e}.stack-row b{display:block;font-size:20px;margin:10px 0 7px;font-weight:550}.stack-row p{margin:0;font-size:10px;line-height:1.55;color:#878e9b}.final-portrait{position:absolute;right:-2%;bottom:-10%;width:37vw;height:82vh;opacity:.26}.final-portrait img{height:100%;width:auto;margin-left:auto;filter:saturate(.55) brightness(.58);mask-image:radial-gradient(ellipse at 50% 50%,#000 38%,rgba(0,0,0,.78) 64%,transparent 88%);-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 38%,rgba(0,0,0,.78) 64%,transparent 88%)}.final-quote{position:absolute;right:var(--page);top:24%;font-family:Georgia,serif;font-size:18px;font-style:italic;color:#817a9f;max-width:300px;text-align:right}.bottom-cue{position:absolute;right:var(--page);bottom:26px;z-index:100;display:flex;align-items:center;gap:11px;font:600 7px "Cascadia Code",monospace;letter-spacing:.13em;color:#7f8693}.bottom-cue b{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.13);display:grid;place-items:center;color:#d8dbe2;animation:bob 1.8s ease-in-out infinite}@keyframes bob{50%{transform:translateY(5px)}}
.contact{min-height:100vh;background:#efede7;color:#17181c;display:grid;place-items:center;padding:120px var(--page)}.contact>div{width:min(1050px,100%);border-top:1px solid rgba(20,20,25,.15);padding-top:50px}.contact small{font:600 8px "Cascadia Code",monospace;letter-spacing:.14em;color:#7d7782}.contact h2{font-size:clamp(44px,5.2vw,76px);letter-spacing:-.055em;line-height:1;margin:28px 0}.contact p{font-size:16px;color:#68656d;max-width:580px;line-height:1.7}.contact a{display:inline-block;margin-top:28px;padding-bottom:5px;border-bottom:1px solid #77717e;font-size:13px}
@media(max-width:1000px){.topbar{grid-template-columns:1fr auto}.status{display:none}.portrait{left:43%;width:50vw}.hero-previews{opacity:.58}.light-scene{grid-template-columns:1fr;gap:20px}.principles{max-width:740px}.orbit-title{width:46vw}.orbit-card{width:39vw}.project-detail{width:46vw}.stack-row{grid-template-columns:1fr 1fr}.final-portrait{width:50vw}}
@media(max-width:720px){:root{--page:22px}.topbar nav a:nth-child(2),.topbar nav a:nth-child(3){display:none}.brand>span:last-child{display:none}.cinema{height:980vh}.scene{padding-top:82px}.hero-copy{width:86%;top:31%;transform:none}.hero-copy h1{font-size:44px}.lede{font-size:12px;width:78%}.portrait{left:34%;width:86vw;height:65vh;bottom:-3%;opacity:.72}.hero-previews{display:none}.hero-scene-label{bottom:18px}.light-scene h2{font-size:38px}.light-intro{font-size:21px}.principles b{font-size:18px}.orbit-title{left:22px;top:12%;width:75vw}.orbit-title h2{font-size:37px}.orbit-card{width:70vw}.project-detail{left:22px;bottom:8%;width:80vw}.project-detail h3{font-size:39px}.orbit-core{width:95px;height:95px}.stack-row{left:22px;right:22px;grid-template-columns:1fr 1fr;bottom:8%}.stack-row article{padding:14px}.stack-row b{font-size:16px}.final-copy{left:22px;top:13%;max-width:87%}.final-copy h2{font-size:38px}.final-portrait{display:none}.final-quote{display:none}.bottom-cue{right:22px}.contact{padding-left:22px;padding-right:22px}}
@media(max-width:480px){.hero-copy{top:24%}.hero-copy h1{font-size:38px}.portrait{left:21%;width:105vw;height:61vh}.hero-actions small{display:none}.light-scene{padding-top:110px}.light-scene h2{font-size:34px}.light-intro{font-size:19px}.principles article{padding:18px 0}.orbit-card{width:78vw}.stack-row{grid-template-columns:1fr;bottom:5%;gap:6px}.stack-row article{padding:10px 13px}.stack-row article p{display:none}.final-copy h2{font-size:34px}.bottom-cue span{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.bottom-cue b{animation:none}}


/* =========================================================
   V5 HERO — approved cinematic composition
   Keeps the scroll-timeline scenes, but refines the opening
   frame to match the cleaner approved visual direction.
   ========================================================= */
@media (min-width:1001px){
  .stage{
    background:#050b16;
  }
  .stage-bg{
    inset:-3%;
    background:
      radial-gradient(circle at 45% 42%,rgba(52,54,143,.18),transparent 26%),
      radial-gradient(circle at 71% 61%,rgba(45,30,118,.22),transparent 28%),
      linear-gradient(135deg,#07111f 0%,#050b15 52%,#07101d 100%);
  }
  .vignette{
    box-shadow:inset 0 0 190px rgba(0,0,0,.66),inset 0 -120px 170px rgba(0,0,0,.28);
  }
  .hero-copy{
    left:clamp(54px,4.2vw,86px);
    top:52.5%;
    width:min(34vw,560px);
  }
  .eyebrow{
    margin-bottom:22px;
    font-size:8px;
    letter-spacing:.13em;
  }
  .hero-copy h1{
    font-size:clamp(46px,4vw,66px);
    line-height:1.04;
    letter-spacing:-.052em;
    margin-bottom:18px;
    max-width:550px;
  }
  .hero-copy h1 em{
    color:#9a89ff;
    text-shadow:0 0 42px rgba(114,88,255,.18);
  }
  .lede{
    max-width:535px;
    font-size:12px;
    line-height:1.7;
    color:#9ba4b4;
  }
  .hero-actions{
    margin-top:26px;
    gap:19px;
  }
  .buttonish{
    padding:6px 7px 6px 15px;
    box-shadow:0 0 34px rgba(103,72,255,.16),inset 0 0 20px rgba(135,112,255,.05);
  }

  .hero .portrait{
    left:29.5%;
    top:12.5%;
    bottom:auto;
    width:min(45vw,760px);
    height:85vh;
    z-index:6;
    overflow:visible;
  }
  .hero .portrait-aura{
    inset:8% -7% -4%;
    background:
      radial-gradient(ellipse at 50% 48%,rgba(107,82,245,.22),rgba(34,43,82,.07) 48%,transparent 72%);
    filter:blur(34px);
    opacity:.95;
  }
  .hero .portrait::after{
    content:"";
    position:absolute;
    z-index:3;
    inset:-3% -6% -3%;
    pointer-events:none;
    background:
      radial-gradient(ellipse 53% 63% at 50% 51%,transparent 58%,rgba(5,11,22,.08) 68%,rgba(5,11,22,.42) 82%,rgba(5,11,22,.96) 100%);
    filter:blur(15px);
    opacity:.7;
  }
  .hero .portrait img{
    left:0;
    bottom:0;
    transform:none;
    width:100%;
    height:100%;
    max-width:100%;
    object-fit:contain;
    object-position:center bottom;
    filter:saturate(.74) contrast(1.04) brightness(.79) drop-shadow(0 30px 65px rgba(0,0,0,.18));
    mask-image:none;
    -webkit-mask-image:none;
  }
  .hero .portrait figcaption{
    z-index:5;
    left:16%;
    bottom:8.5%;
    padding:8px 12px;
    border-left-color:#907eff;
    background:rgba(5,10,18,.42);
    box-shadow:0 13px 45px rgba(0,0,0,.22);
  }

  .hero-previews{
    right:clamp(52px,4vw,82px);
    top:13.5%;
    width:min(31.5vw,535px);
    height:73vh;
    z-index:7;
  }
  .soft-shot{
    overflow:hidden;
    padding:4px;
    border:1px solid rgba(159,154,207,.17);
    border-radius:13px;
    background:rgba(9,14,25,.88);
    box-shadow:0 24px 70px rgba(0,0,0,.42),0 0 48px rgba(88,70,202,.08);
    backdrop-filter:blur(8px);
  }
  .soft-shot::after{
    inset:0;
    border-radius:inherit;
    background:linear-gradient(120deg,rgba(255,255,255,.055),transparent 28%,transparent 70%,rgba(112,89,255,.05));
    filter:none;
    opacity:.8;
  }
  .soft-shot span{
    top:7px;
    left:11px;
    font-size:6.5px;
    letter-spacing:.02em;
    color:#c9cbd4;
  }
  .soft-shot img{
    width:100%;
    height:100%;
    border-radius:9px;
    object-fit:cover;
    filter:saturate(.76) brightness(.78) contrast(.97);
    mask-image:none;
    -webkit-mask-image:none;
  }
  .shot-a{
    right:-1%;
    top:0;
    width:92%;
    height:31%;
    transform:rotate(.7deg);
  }
  .shot-b{
    left:1%;
    top:29.5%;
    width:91%;
    height:32.5%;
    transform:rotate(-.7deg);
    z-index:3;
  }
  .shot-c{
    right:-1.5%;
    bottom:1.5%;
    width:68%;
    height:26%;
    transform:rotate(.6deg);
  }
  .hero-scene-label{
    left:clamp(54px,4.2vw,86px);
    bottom:25px;
  }
}

@media (min-width:721px) and (max-width:1000px){
  .hero-copy{left:32px;top:49%;width:42vw}
  .hero-copy h1{font-size:clamp(43px,5.5vw,58px)}
  .hero .portrait{left:31%;bottom:-3%;width:55vw;height:79vh}
  .hero .portrait img{mask-image:radial-gradient(ellipse at 50% 48%,#000 35%,rgba(0,0,0,.96) 58%,rgba(0,0,0,.56) 76%,transparent 94%);-webkit-mask-image:radial-gradient(ellipse at 50% 48%,#000 35%,rgba(0,0,0,.96) 58%,rgba(0,0,0,.56) 76%,transparent 94%)}
  .hero-previews{right:24px;top:15%;width:35vw;height:68vh}
  .shot-a{width:96%;height:31%}.shot-b{width:92%;height:31%;top:31%}.shot-c{width:72%;height:25%}
}


/* =========================================================
   V6 HERO REFINEMENT — sharper UI, stronger header,
   larger portrait visibility, cleaner Explore CTA
   ========================================================= */
@media (min-width:1001px){
  .topbar{
    height:88px;
    padding:0 clamp(54px,4.2vw,86px);
    border-bottom-color:rgba(255,255,255,.055);
    background:linear-gradient(180deg,rgba(5,11,22,.74),rgba(5,11,22,.18) 72%,transparent);
  }
  .brand{gap:14px}
  .brand .mark{
    width:42px;height:42px;border-radius:13px;
    font-size:11px;
    border-color:rgba(145,128,255,.58);
    background:rgba(105,84,244,.12);
    box-shadow:0 0 26px rgba(113,90,255,.08);
  }
  .brand b{font-size:14px;line-height:1.15;letter-spacing:-.015em}
  .brand small{font-size:8px;line-height:1.4;letter-spacing:.12em;margin-top:2px}
  .topbar nav{
    gap:6px;padding:5px 7px;
    border-color:rgba(255,255,255,.13);
    background:rgba(7,12,22,.48);
    backdrop-filter:blur(8px);
    box-shadow:0 10px 34px rgba(0,0,0,.12);
  }
  .topbar nav a{font-size:10px;padding:9px 16px;font-weight:520}
  .status{font-size:9.5px;gap:9px;opacity:.88}
  .status i{width:6px;height:6px}
  .topbar.on-light{
    color:#1c1d23;
    background:rgba(245,244,238,.88);
    border-color:rgba(0,0,0,.07);
    backdrop-filter:blur(12px);
  }
  .topbar.on-light nav{
    border-color:rgba(0,0,0,.11);
    background:rgba(255,255,255,.62);
    box-shadow:0 10px 30px rgba(60,54,70,.06);
  }

  .buttonish{
    gap:16px;
    min-height:46px;
    padding:7px 8px 7px 18px;
    font-size:10px;
    font-weight:570;
    background:rgba(82,62,190,.12);
    border-color:rgba(148,128,255,.52);
    box-shadow:0 12px 38px rgba(72,48,177,.12),inset 0 0 18px rgba(146,125,255,.045);
  }
  .buttonish>b{display:none}
  .systems-icon{
    width:32px;height:32px;
    display:grid;grid-template-columns:repeat(2,4px);grid-template-rows:repeat(2,4px);
    place-content:center;gap:4px;
    border:1px solid rgba(165,151,255,.38);
    border-radius:9px;
    background:rgba(130,107,255,.13);
  }
  .systems-icon i{width:4px;height:4px;border-radius:1.5px;background:#b8adff;box-shadow:0 0 7px rgba(151,132,255,.28)}

  .hero .portrait{
    left:28.3%;
    top:10.5%;
    width:min(47vw,805px);
    height:89vh;
  }
  .hero .portrait-aura{
    inset:5% -5% -2%;
    filter:blur(30px);
    opacity:.82;
  }
  .hero .portrait::after{
    inset:-1% -3% -2%;
    background:radial-gradient(ellipse 65% 73% at 50% 50%,transparent 72%,rgba(5,11,22,.12) 82%,rgba(5,11,22,.62) 96%,rgba(5,11,22,.88) 100%);
    filter:blur(12px);
    opacity:.28;
  }
  .hero .portrait img{
    filter:saturate(.82) contrast(1.055) brightness(.84) drop-shadow(0 32px 70px rgba(0,0,0,.18));
  }
  .hero .portrait figcaption{left:14%;bottom:7.2%}

  .hero-previews{
    right:clamp(48px,3.7vw,76px);
    top:13.5%;
    width:min(33vw,565px);
    height:73vh;
  }
  .soft-shot{
    padding:5px;
    border-color:rgba(180,184,207,.26);
    background:rgba(8,13,23,.96);
    box-shadow:0 26px 72px rgba(0,0,0,.42),0 0 34px rgba(80,70,176,.065);
    backdrop-filter:none;
  }
  .soft-shot::after{
    background:linear-gradient(120deg,rgba(255,255,255,.028),transparent 22%,transparent 78%,rgba(112,89,255,.025));
    opacity:.4;
  }
  .soft-shot span{
    top:8px;left:12px;
    font-size:7.5px;
    font-weight:600;
    color:#eef0f6;
    text-shadow:0 1px 8px rgba(0,0,0,.7);
  }
  .soft-shot img{
    filter:saturate(.94) brightness(.91) contrast(1.075);
    image-rendering:auto;
  }
  .shot-a{width:94%;height:32%}
  .shot-b{width:94%;height:33%;top:30%}
  .shot-c{width:72%;height:27%;right:-1%;bottom:.5%}
}

@media (min-width:721px) and (max-width:1000px){
  .topbar{height:78px;padding:0 30px}
  .brand .mark{width:38px;height:38px;font-size:10px}
  .brand b{font-size:12px}.brand small{font-size:7.5px}
  .topbar nav a{font-size:9px;padding:8px 13px}
  .hero .portrait{left:29%;width:62vw;height:82vh}
  .hero .portrait img{mask-image:none;-webkit-mask-image:none}
  .hero .portrait::after{content:"";position:absolute;z-index:3;inset:0;background:radial-gradient(ellipse 68% 76% at 50% 50%,transparent 72%,rgba(5,11,22,.18) 84%,rgba(5,11,22,.72) 100%);filter:blur(10px);opacity:.32;pointer-events:none}
  .soft-shot img{filter:saturate(.92) brightness(.9) contrast(1.06)}
}

@media(max-width:720px){
  .topbar{height:72px}
  .brand .mark{width:38px;height:38px;font-size:10px}
  .topbar nav a{font-size:9px;padding:8px 12px}
  .buttonish{gap:13px;padding-right:8px}
  .systems-icon{width:29px;height:29px;display:grid;grid-template-columns:repeat(2,4px);grid-template-rows:repeat(2,4px);place-content:center;gap:3px;border:1px solid rgba(165,151,255,.36);border-radius:8px;background:rgba(130,107,255,.13)}
  .systems-icon i{width:4px;height:4px;border-radius:1px;background:#b8adff}
  .portrait img{mask-image:none;-webkit-mask-image:none}
}

/* =========================================================
   v7 — projector quote + solar-system project orbit
   ========================================================= */

/* Larger intro HUD / scroll affordances */
.hero-scene-label{
  bottom:34px;
  padding:12px 17px;
  gap:12px;
  font-size:9px;
  border-color:rgba(255,255,255,.17);
  background:rgba(6,10,18,.62);
  box-shadow:0 14px 42px rgba(0,0,0,.22);
}
.hero-scene-label b{font-size:22px;line-height:1}
.hero-scene-label span{font-size:9px;padding-left:10px}
.bottom-cue{
  bottom:30px;
  gap:15px;
  font-size:9px;
  letter-spacing:.15em;
  color:#a2a8b4;
}
.bottom-cue b{
  width:46px;height:46px;
  font-size:15px;
  border-color:rgba(255,255,255,.2);
  background:rgba(9,13,22,.42);
  box-shadow:0 12px 36px rgba(0,0,0,.18);
}

/* Scene 02 — old projector / scientist field-note look */
.light-scene{
  display:block;
  color:#241f1a;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 44%,rgba(255,251,226,.98) 0%,rgba(239,229,194,.94) 48%,rgba(190,169,125,.84) 79%,rgba(64,49,34,.88) 122%);
  box-shadow:inset 0 0 170px rgba(54,40,25,.34);
}
.light-scene::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(60,42,23,.16),transparent 8%,transparent 92%,rgba(60,42,23,.18)),
    linear-gradient(180deg,rgba(60,42,23,.11),transparent 9%,transparent 91%,rgba(60,42,23,.18));
  mix-blend-mode:multiply;
  pointer-events:none;
}
.projector-beam{
  position:absolute;
  left:50%;top:50%;
  width:78%;height:82%;
  transform:translate(-50%,-50%);
  border-radius:5% 4% 6% 3%;
  background:rgba(255,250,221,.48);
  filter:blur(24px);
  box-shadow:0 0 130px rgba(255,241,188,.3);
}
.projector-grain{
  position:absolute;inset:0;opacity:.26;pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 17%,rgba(53,37,24,.22) 0 1px,transparent 1.5px),
    radial-gradient(circle at 71% 64%,rgba(53,37,24,.17) 0 1px,transparent 1.4px),
    radial-gradient(circle at 42% 83%,rgba(53,37,24,.17) 0 1px,transparent 1.3px);
  background-size:31px 29px,43px 47px,37px 41px;
  mix-blend-mode:multiply;
}
.projector-frame{position:absolute;inset:7.5% 4.2%;border:1px solid rgba(74,58,41,.26);pointer-events:none}
.projector-frame i{position:absolute;width:19px;height:19px;border-color:rgba(70,51,34,.42);border-style:solid}
.projector-frame i:nth-child(1){left:-1px;top:-1px;border-width:2px 0 0 2px}
.projector-frame i:nth-child(2){right:-1px;top:-1px;border-width:2px 2px 0 0}
.projector-frame i:nth-child(3){left:-1px;bottom:-1px;border-width:0 0 2px 2px}
.projector-frame i:nth-child(4){right:-1px;bottom:-1px;border-width:0 2px 2px 0}
.light-kicker{
  position:absolute;
  left:8%;top:12%;
  font:600 8px "Cascadia Code",Consolas,monospace;
  letter-spacing:.2em;
  color:#675746;
}
.projector-quote{
  position:absolute;
  left:8%;top:24%;
  width:min(49vw,770px);
  padding-left:42px;
  border-left:1px solid rgba(76,57,39,.34);
}
.quote-open{
  position:absolute;left:-5px;top:-68px;
  font:italic 132px/1 Georgia,serif;
  color:rgba(84,58,34,.28);
}
.light-scene h2{
  margin:0;
  max-width:none;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(44px,5.3vw,82px);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:400;
  color:#2e281f;
  text-shadow:0 1px rgba(255,255,255,.5);
}
.light-intro{
  margin:28px 0 0;
  max-width:650px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(17px,1.55vw,24px);
  line-height:1.56;
  color:#564b3e;
}
.quote-signature{
  display:block;margin-top:20px;
  font:600 8px "Cascadia Code",Consolas,monospace;
  letter-spacing:.18em;color:#7a6855;
}
.light-scene .principles{
  position:absolute;
  right:7%;top:22%;
  width:min(31vw,520px);
  border-top:1px solid rgba(68,52,36,.28);
  transform:translateY(55px);
}
.light-scene .principles article{
  grid-template-columns:42px 1fr;
  padding:22px 0;
  border-color:rgba(68,52,36,.22);
}
.light-scene .principles article>span{color:#89735d}
.light-scene .principles b{
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;font-weight:600;color:#362e26;
}
.light-scene .principles p{font-family:Georgia,"Times New Roman",serif;font-size:12px;color:#6d5d4c}
.light-note{right:7%;bottom:9%;font-size:8px;color:#786652}

/* Scene 03 — actual solar-system orbit */
.orbit-scene::before,
.orbit-scene::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:min(55vw,880px);
  height:min(56vh,500px);
  border:1px solid rgba(134,120,224,.12);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-9deg);
  box-shadow:0 0 120px rgba(78,65,177,.045);
  pointer-events:none;
}
.orbit-scene::after{
  width:min(39vw,630px);height:min(39vh,350px);
  border-color:rgba(134,120,224,.07);
  transform:translate(-50%,-50%) rotate(13deg);
}
.orbit-core{width:104px;height:104px}
.project-orbit{z-index:5}
.orbit-card{
  width:min(49vw,780px);
  height:min(58vh,520px);
  pointer-events:none;
}
.system-node{
  position:absolute;
  left:50%;top:50%;
  width:78px;height:78px;
  margin:-39px 0 0 -39px;
  border-radius:50%;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 34% 28%,rgba(164,150,255,.2),transparent 34%),
    linear-gradient(145deg,#161b2b,#090d17 72%);
  border:1px solid rgba(155,138,255,.38);
  box-shadow:0 16px 42px rgba(0,0,0,.38),0 0 28px rgba(114,91,255,.14),inset 0 0 28px rgba(132,112,255,.08);
  transform:scale(var(--node-scale,1)) rotate(var(--node-rotate,0deg));
  opacity:var(--node-opacity,1);
  will-change:transform,opacity;
}
.system-node::before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.08);border-radius:50%}
.system-node span{font-size:17px;font-weight:720;letter-spacing:-.05em;color:#d8d2ff}
.system-node small{position:absolute;right:-4px;bottom:1px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#0c101b;border:1px solid rgba(155,138,255,.35);font:600 6px "Cascadia Code",monospace;color:#9890c5}
.orbit-card:nth-child(2) .system-node{background:radial-gradient(circle at 34% 28%,rgba(255,154,92,.16),transparent 34%),linear-gradient(145deg,#201714,#0c0d14 72%)}
.orbit-card:nth-child(3) .system-node{background:radial-gradient(circle at 34% 28%,rgba(72,206,183,.17),transparent 34%),linear-gradient(145deg,#10201d,#091014 72%)}
.orbit-card:nth-child(4) .system-node{background:radial-gradient(circle at 34% 28%,rgba(83,145,255,.19),transparent 34%),linear-gradient(145deg,#10182a,#090d17 72%)}
.orbit-card:nth-child(5) .system-node{background:radial-gradient(circle at 34% 28%,rgba(128,113,255,.2),transparent 34%),linear-gradient(145deg,#17162b,#090d17 72%)}
.orbit-card:nth-child(6) .system-node{background:radial-gradient(circle at 34% 28%,rgba(74,194,155,.18),transparent 34%),linear-gradient(145deg,#10211c,#090f14 72%)}
.orbit-card:nth-child(7) .system-node{background:radial-gradient(circle at 34% 28%,rgba(210,214,225,.16),transparent 34%),linear-gradient(145deg,#181a21,#0a0d14 72%)}
.card-frame{
  position:absolute;
  left:50%;top:50%;
  width:100%;
  transform:translate3d(calc(-50% + var(--frame-x,0px)),-50%,0) scale(var(--frame-scale,.82)) rotateY(var(--frame-ry,-9deg)) rotateZ(var(--frame-rz,0deg));
  opacity:var(--frame-opacity,0);
  padding:6px;
  border-radius:18px;
  background:rgba(13,17,27,.95);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 40px 120px rgba(0,0,0,.65),0 0 75px rgba(102,84,214,.12);
  overflow:hidden;
  will-change:transform,opacity;
}
.frame-head{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;color:#d8dbe4;font-size:8px}
.frame-head small{font:600 6px "Cascadia Code",monospace;letter-spacing:.13em;color:#6f7685}
.card-frame img{width:100%;aspect-ratio:1.9;object-fit:cover;border-radius:11px;filter:saturate(.96) contrast(1.04)}
.project-detail{
  left:var(--page);bottom:12%;width:min(31vw,470px);
  padding:22px 24px 22px 0;
  border-top:1px solid rgba(143,126,255,.26);
}
.project-detail h3{font-size:clamp(34px,3.4vw,54px)}
.project-detail p{font-size:11px;max-width:430px}

@media(max-width:1000px){
  .projector-quote{width:53vw;left:6%}
  .light-scene .principles{right:5%;width:34vw}
  .orbit-card{width:min(58vw,720px)}
}
@media(max-width:720px){
  .hero-scene-label{bottom:16px;padding:10px 13px}.hero-scene-label b{font-size:19px}
  .bottom-cue{bottom:15px}.bottom-cue b{width:40px;height:40px}
  .projector-frame{inset:9% 18px}
  .projector-quote{left:28px;top:18%;width:82vw;padding-left:24px}
  .quote-open{font-size:88px;top:-48px}
  .light-scene h2{font-size:42px}
  .light-intro{font-size:17px}
  .light-scene .principles{left:28px;right:auto;top:auto;bottom:11%;width:82vw}
  .light-scene .principles article{padding:13px 0}.light-scene .principles p{display:none}
  .light-note{display:none}
  .orbit-scene::before{width:82vw;height:44vh}.orbit-scene::after{width:58vw;height:30vh}
  .orbit-card{width:86vw;height:54vh}
  .system-node{width:62px;height:62px;margin:-31px 0 0 -31px}.system-node span{font-size:14px}
  .project-detail{left:22px;bottom:8%;width:84vw;padding-top:15px}
}

@media (prefers-reduced-motion:no-preference){
  .projector-beam{animation:projectorFlicker 4.8s steps(1,end) infinite}
  .projector-grain{animation:projectorDust 7s linear infinite}
}
@keyframes projectorFlicker{
  0%,18%,22%,61%,64%,100%{opacity:1}
  19%{opacity:.93}
  20%{opacity:.98}
  62%{opacity:.91}
  63%{opacity:.97}
}
@keyframes projectorDust{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(2px,-1px,0)}
  100%{transform:translate3d(0,0,0)}
}


/* =========================================================
   v8 — fuller flashcards, larger orbit copy, dynamic topbar,
   updated email
   ========================================================= */
.topbar{
  transform:translateY(0) scale(1);
  transform-origin:center top;
  box-shadow:none;
}
.topbar.is-compact{
  height:78px;
  background:rgba(7,12,21,.76);
  border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 14px 46px rgba(0,0,0,.18);
  backdrop-filter:blur(14px);
}
.topbar.on-light.is-compact{
  background:rgba(245,244,238,.92);
  box-shadow:0 16px 44px rgba(52,42,30,.07);
}
.topbar nav a{
  position:relative;
  transition:background .35s ease,color .35s ease,box-shadow .35s ease,transform .35s ease;
}
.topbar nav a:hover{transform:translateY(-1px)}
.topbar nav a.active{
  background:rgba(136,116,255,.18);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(170,155,255,.18), 0 8px 24px rgba(70,56,155,.12);
}
.topbar.on-light nav a.active{
  background:#191a21;
  color:#f5f4ef;
  box-shadow:0 10px 22px rgba(29,25,21,.08);
}
.status span{display:inline-block;min-width:168px;transition:opacity .25s ease,transform .25s ease}

.orbit-title{
  width:min(40vw,620px);
}
.orbit-title small{
  font-size:9px;
  color:#9f97c9;
}
.orbit-title h2{
  font-size:clamp(46px,4.45vw,72px);
  margin-top:16px;
}
.project-detail{
  width:min(38vw,620px);
  padding:26px 28px 24px 0;
}
.project-detail small{
  font-size:9px;
}
.project-detail h3{
  font-size:clamp(42px,4.1vw,66px);
  margin:14px 0 10px;
}
.project-detail>span{
  display:block;
  font-size:15px;
  color:#d3d6e1;
  margin-bottom:10px;
}
.project-detail p{
  font-size:14px;
  line-height:1.82;
  color:#a3abbb;
  max-width:560px;
}
.detail-line b{font-size:8px}

.orbit-card{
  width:min(54vw,860px);
  height:min(60vh,560px);
}
.card-frame{
  width:min(100%, 860px);
  padding:8px;
}
.frame-head{
  height:34px;
  padding:0 12px;
  font-size:10px;
}
.frame-head small{font-size:7px}
.card-frame img{
  display:block;
  width:100%;
  height:clamp(250px,35vh,400px);
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center center;
  background:linear-gradient(180deg,#0d1119,#090c13);
  border-radius:12px;
  padding:8px;
}

@media(max-width:1000px){
  .project-detail{width:min(46vw,560px)}
  .project-detail h3{font-size:clamp(36px,4.8vw,56px)}
  .project-detail p{font-size:13px}
  .orbit-card{width:min(66vw,760px)}
}
@media(max-width:720px){
  .topbar nav a.active{box-shadow:none}
  .status span{min-width:0}
  .orbit-title h2{font-size:40px}
  .project-detail h3{font-size:42px}
  .project-detail>span{font-size:14px}
  .project-detail p{font-size:13px;line-height:1.72}
  .orbit-card{width:90vw;height:58vh}
  .card-frame img{height:clamp(220px,30vh,320px);padding:6px}
}


/* =========================================================
   v9 — larger readable project flashcards
   ========================================================= */
@media (min-width:1001px){
  .orbit-scene::before{width:min(62vw,980px);height:min(60vh,560px)}
  .orbit-scene::after{width:min(45vw,720px);height:min(45vh,410px)}

  .orbit-card{
    width:min(62vw,1040px);
    height:min(72vh,690px);
  }
  .card-frame{
    width:min(100%,1040px);
    padding:10px;
    border-radius:20px;
    border-color:rgba(255,255,255,.17);
    box-shadow:0 42px 130px rgba(0,0,0,.68),0 0 88px rgba(102,84,214,.14);
  }
  .frame-head{
    height:38px;
    padding:0 13px;
    font-size:10.5px;
  }
  .frame-head small{font-size:7.5px}
  .card-frame img{
    width:100%;
    height:clamp(360px,50vh,560px);
    object-fit:contain;
    object-position:center;
    padding:10px;
    border-radius:14px;
    background:linear-gradient(180deg,#0b0e14,#080b11);
  }
}

@media (min-width:721px) and (max-width:1000px){
  .orbit-card{width:min(74vw,840px);height:min(66vh,620px)}
  .card-frame img{height:clamp(300px,40vh,460px)}
}

@media (max-width:720px){
  .orbit-card{width:92vw;height:60vh}
  .card-frame{padding:7px;border-radius:16px}
  .frame-head{height:32px;font-size:9px}
  .card-frame img{height:clamp(250px,34vh,340px);padding:6px}
}


/* =========================================================
   v10 — topbar blend fix + shift card left + bigger descriptions
   ========================================================= */
.topbar{
  position:fixed;
  overflow:visible;
  isolation:isolate;
}
.topbar::before,
.topbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .55s ease, background .55s ease;
}
.topbar::before{
  inset:0;
  z-index:-2;
}
.topbar::after{
  top:100%;
  height:38px;
  z-index:-3;
}
.topbar.on-light::before{
  opacity:1;
  background:linear-gradient(180deg, rgba(245,244,238,.97) 0%, rgba(245,244,238,.88) 68%, rgba(245,244,238,.72) 100%);
}
.topbar.on-light::after{
  opacity:1;
  background:linear-gradient(180deg, rgba(245,244,238,.58) 0%, rgba(245,244,238,.18) 45%, rgba(245,244,238,0) 100%);
}
.topbar.on-light{
  background:transparent;
  border-bottom-color:rgba(85,74,58,.08);
  box-shadow:0 8px 28px rgba(71,58,41,.04);
  backdrop-filter:none;
}
.topbar.on-light nav{
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(10px);
}
.topbar.on-light.is-compact{
  background:transparent;
  box-shadow:0 10px 32px rgba(57,46,34,.05);
}
.topbar.on-light .status{color:#615849;opacity:.84}
.topbar.on-light .brand small{opacity:.52}

.project-detail{
  width:min(42vw,680px);
  padding-right:18px;
}
.project-detail small{
  font-size:10px;
  letter-spacing:.16em;
}
.project-detail h3{
  font-size:clamp(44px,4.2vw,70px);
  margin:14px 0 12px;
}
.project-detail>span{
  font-size:17px;
  color:#dce0e8;
  margin-bottom:12px;
}
.project-detail p{
  font-size:16px;
  line-height:1.88;
  color:#b7becd;
  max-width:620px;
}
.detail-line{
  margin-top:22px;
}
.detail-line b{
  font-size:8px;
  letter-spacing:.16em;
}

@media (min-width:1001px){
  .orbit-card{
    width:min(60vw,1020px);
    height:min(72vh,690px);
  }
}
@media (min-width:721px) and (max-width:1000px){
  .project-detail{width:min(48vw,620px)}
  .project-detail h3{font-size:clamp(38px,5vw,58px)}
  .project-detail>span{font-size:15px}
  .project-detail p{font-size:14px;max-width:540px}
}
@media (max-width:720px){
  .topbar::after{height:22px}
  .project-detail{width:84vw}
  .project-detail h3{font-size:42px}
  .project-detail>span{font-size:15px}
  .project-detail p{font-size:14px;line-height:1.78}
}


/* =========================================================
   v11 — extended technology stack scene
   ========================================================= */
.extended-scene{
  opacity:0;
  color:#f5f6f9;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 42%,rgba(73,54,176,.18),transparent 27%),
    radial-gradient(circle at 28% 76%,rgba(24,110,145,.10),transparent 30%);
}
.extended-copy{
  position:absolute;
  left:var(--page);
  top:15%;
  width:min(39vw,650px);
  z-index:8;
  will-change:opacity,transform;
}
.extended-copy small{
  font:600 8px "Cascadia Code",Consolas,monospace;
  letter-spacing:.16em;
  color:#9d94c8;
}
.extended-copy h2{
  margin:16px 0 18px;
  font-size:clamp(42px,4.25vw,68px);
  line-height:1.04;
  letter-spacing:-.052em;
  font-weight:520;
}
.extended-copy h2 em{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  color:#9b8fd8;
}
.extended-copy p{
  margin:0;
  max-width:610px;
  color:#a3aab8;
  font-size:14px;
  line-height:1.78;
}
.tech-constellation{
  position:absolute;
  inset:0;
  perspective:1500px;
  transform-style:preserve-3d;
}
.tech-cluster{
  position:absolute;
  width:min(29vw,460px);
  min-height:210px;
  padding:24px 26px 22px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(16,21,34,.88),rgba(9,13,23,.70));
  backdrop-filter:blur(16px);
  box-shadow:0 30px 100px rgba(0,0,0,.40), inset 0 0 35px rgba(123,103,255,.025);
  will-change:transform,opacity;
}
.tech-cluster::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,.035),transparent 32%,transparent 74%,rgba(131,111,255,.045));
  pointer-events:none;
}
.tech-cluster .cluster-index{
  position:absolute;
  right:20px;
  top:18px;
  width:29px;height:29px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid rgba(155,139,255,.26);
  color:#9f96c9;
  font:600 8px "Cascadia Code",monospace;
}
.tech-cluster>small{
  font:600 7px "Cascadia Code",monospace;
  letter-spacing:.15em;
  color:#777f90;
}
.tech-cluster h3{
  margin:13px 0 9px;
  font-size:26px;
  line-height:1.05;
  letter-spacing:-.035em;
  font-weight:560;
}
.tech-cluster p{
  margin:0;
  max-width:380px;
  color:#949ca9;
  font-size:11px;
  line-height:1.65;
}
.tech-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:18px;
}
.tech-tags b{
  padding:7px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  color:#c9cdd6;
  font-size:8px;
  font-weight:550;
}
.cluster-js{right:8%;top:15%;transform:rotate(2.4deg)}
.cluster-php{right:4%;bottom:12%;transform:rotate(-2.6deg)}
.cluster-firebase{left:39%;bottom:8%;transform:rotate(1.6deg)}
.cluster-engine{left:11%;bottom:8%;transform:rotate(-2deg)}
.extended-orbit{
  position:absolute;
  right:7%;top:12%;
  width:58vw;height:72vh;
  pointer-events:none;
  opacity:.38;
}
.extended-orbit i{
  position:absolute;
  left:50%;top:50%;
  border-radius:50%;
  border:1px solid rgba(132,115,229,.09);
  transform:translate(-50%,-50%) rotate(-11deg);
}
.extended-orbit i:nth-child(1){width:94%;height:72%}
.extended-orbit i:nth-child(2){width:72%;height:54%;transform:translate(-50%,-50%) rotate(12deg)}
.extended-orbit i:nth-child(3){width:48%;height:36%;transform:translate(-50%,-50%) rotate(-24deg)}
.extended-foot{
  position:absolute;
  left:var(--page);right:var(--page);bottom:34px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
  font:600 7px "Cascadia Code",monospace;
  letter-spacing:.13em;
  color:#626978;
}
.extended-foot span{padding:0 12px;color:#8f82d2}
@media(max-width:1000px){
  .extended-copy{width:48vw;top:13%}
  .tech-cluster{width:35vw;padding:20px;min-height:190px}
  .cluster-js{right:5%;top:17%}.cluster-php{right:4%;bottom:11%}.cluster-firebase{left:42%;bottom:7%}.cluster-engine{left:7%;bottom:7%}
}
@media(max-width:720px){
  .cinema{height:1360vh}
  .extended-copy{left:22px;top:12%;width:86vw}
  .extended-copy h2{font-size:38px}
  .extended-copy p{font-size:12px;max-width:84vw}
  .tech-cluster{width:43vw;min-height:150px;padding:15px;border-radius:15px}
  .tech-cluster h3{font-size:19px}.tech-cluster p{font-size:9px}.tech-tags b{font-size:7px;padding:5px 7px}
  .cluster-js{left:22px;right:auto;top:43%}.cluster-php{right:22px;top:43%;bottom:auto}.cluster-firebase{left:22px;bottom:7%}.cluster-engine{right:22px;left:auto;bottom:7%}
  .extended-foot{display:none}
}


/* =========================================================
   v12 — mail icon + larger home role label
   ========================================================= */
.hero .portrait figcaption{
  min-width:170px;
  padding:12px 16px;
  gap:4px;
  border-left-width:2px;
  background:rgba(6,11,20,.48);
  box-shadow:0 12px 34px rgba(0,0,0,.16);
}
.hero .portrait figcaption small{
  font-size:8px;
  line-height:1.2;
  letter-spacing:.13em;
}
.hero .portrait figcaption b{
  font-size:14px;
  line-height:1.15;
  font-weight:650;
  letter-spacing:-.015em;
}
.contact .email-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
  padding:0 0 6px;
  border-bottom:1px solid #77717e;
  font-size:13px;
  line-height:1;
}
.contact .email-link .mail-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .22s ease;
}
@media (hover:hover) and (pointer:fine){
  .contact .email-link:hover .mail-icon{transform:translateY(-1px)}
}
@media(max-width:720px){
  .hero .portrait figcaption{
    min-width:145px;
    padding:10px 13px;
  }
  .hero .portrait figcaption small{font-size:7px}
  .hero .portrait figcaption b{font-size:12px}
}


/* =========================================================
   v13 — smoother light topbar blend + left-shift card + larger project copy
   ========================================================= */
.topbar{
  overflow:visible;
  isolation:isolate;
}
.topbar::before,
.topbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s ease, background .5s ease;
}
.topbar::before{
  inset:0;
  z-index:-2;
}
.topbar::after{
  top:100%;
  height:44px;
  z-index:-3;
}
.topbar.on-light{
  background:transparent !important;
  backdrop-filter:none !important;
  border-bottom-color:rgba(80,70,58,.10);
  box-shadow:0 10px 28px rgba(72,58,40,.04);
}
.topbar.on-light::before{
  opacity:1;
  background:linear-gradient(180deg,
    rgba(241,238,229,.98) 0%,
    rgba(241,238,229,.94) 55%,
    rgba(241,238,229,.84) 82%,
    rgba(241,238,229,.70) 100%);
}
.topbar.on-light::after{
  opacity:1;
  background:linear-gradient(180deg,
    rgba(241,238,229,.66) 0%,
    rgba(241,238,229,.24) 48%,
    rgba(241,238,229,0) 100%);
}
.topbar.on-light nav{
  background:rgba(255,255,255,.62);
  border-color:rgba(28,25,20,.08);
  box-shadow:0 10px 26px rgba(64,53,38,.05);
  backdrop-filter:blur(12px);
}
.topbar.on-light .brand,
.topbar.on-light .status{
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

.project-detail{
  width:min(44vw,720px);
  padding-right:24px;
}
.project-detail small{
  font-size:10px;
  letter-spacing:.17em;
}
.project-detail h3{
  font-size:clamp(48px,4.6vw,76px);
  margin:14px 0 12px;
}
.project-detail>span{
  font-size:18px;
  color:#dde1ea;
  margin-bottom:13px;
}
.project-detail p{
  font-size:17px;
  line-height:1.92;
  color:#b5bdcc;
  max-width:640px;
}
.detail-line b{
  font-size:8px;
  letter-spacing:.16em;
}

@media (min-width:1001px){
  .orbit-card{
    width:min(58vw,1000px);
  }
}
@media (min-width:721px) and (max-width:1000px){
  .project-detail{width:min(50vw,640px)}
  .project-detail h3{font-size:clamp(40px,5.1vw,60px)}
  .project-detail>span{font-size:16px}
  .project-detail p{font-size:15px;max-width:560px}
}
@media (max-width:720px){
  .topbar::after{height:26px}
  .project-detail{width:84vw;padding-right:0}
  .project-detail h3{font-size:42px}
  .project-detail>span{font-size:15px}
  .project-detail p{font-size:14px;line-height:1.78}
}


/* =========================================================
   v14 — CV / Resume download + Senior Full Stack Developer
   ========================================================= */
.hero-actions{
  flex-wrap:wrap;
}
.resume-button{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:7px 8px 7px 17px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(8,13,23,.54);
  color:#e9ebf1;
  font-size:10px;
  font-weight:570;
  box-shadow:0 12px 38px rgba(0,0,0,.14),inset 0 0 18px rgba(255,255,255,.025);
  backdrop-filter:blur(10px);
  transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease;
}
.pdf-badge{
  min-width:34px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0 7px;
  border:1px solid rgba(159,146,255,.34);
  border-radius:9px;
  background:rgba(130,107,255,.12);
  color:#bcb3ff;
  font-size:8px;
  line-height:1;
  letter-spacing:.08em;
  font-weight:750;
}
@media (hover:hover) and (pointer:fine){
  .resume-button:hover{
    transform:translateY(-2px);
    border-color:rgba(155,140,255,.48);
    background:rgba(76,61,156,.16);
    box-shadow:0 16px 42px rgba(0,0,0,.18),0 0 30px rgba(103,82,223,.08);
  }
}
.topbar.on-light ~ main .resume-button,
.topbar.on-light + main .resume-button{
  color:#292720;
}

.contact-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 26px;
  margin-top:28px;
}
.contact-actions .email-link{
  margin-top:0;
}
.contact-resume{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:6px 8px 6px 16px;
  border:1px solid rgba(30,29,34,.16);
  border-radius:999px;
  color:#25242a;
  font-size:13px;
  background:rgba(255,255,255,.42);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.contact-resume .pdf-badge{
  border-color:rgba(52,47,74,.18);
  background:#171820;
  color:#f2f1eb;
}
@media (hover:hover) and (pointer:fine){
  .contact-resume:hover{
    transform:translateY(-2px);
    border-color:rgba(30,29,34,.28);
    background:rgba(255,255,255,.68);
  }
}
@media(max-width:720px){
  .hero-actions{gap:10px 12px}
  .resume-button{min-height:42px;padding-left:14px;font-size:9px}
  .pdf-badge{height:28px;min-width:32px;font-size:7px}
  .contact-actions{align-items:flex-start;flex-direction:column;gap:14px}
}


/* =========================================================
   v15 — redesigned closing/contact scene
   ========================================================= */
.contact{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:clamp(110px,11vh,150px) var(--page) clamp(54px,7vh,90px);
  background:
    radial-gradient(circle at 77% 24%,rgba(116,94,255,.055),transparent 28%),
    linear-gradient(180deg,#f2f0ea 0%,#ece9e1 100%);
  color:#17181c;
  position:relative;
  overflow:hidden;
}
.contact::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(rgba(35,33,30,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(35,33,30,.045) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 82%,transparent 100%);
}
.contact .contact-shell{
  position:relative;
  z-index:1;
  width:min(1260px,100%);
  border-top:1px solid rgba(24,24,28,.15);
  border-bottom:1px solid rgba(24,24,28,.11);
  padding:clamp(46px,6vw,78px) 0 26px;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);
  gap:clamp(60px,8vw,130px);
  align-items:center;
}
.contact-heading{min-width:0}
.contact-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:9px;
  font-weight:650;
  letter-spacing:.16em;
  color:#756f68;
  margin-bottom:24px;
}
.contact-kicker span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(32,30,28,.14);
  border-radius:50%;
  font-size:8px;
  letter-spacing:.04em;
}
.contact h2{
  margin:0;
  max-width:780px;
  font-size:clamp(58px,6.2vw,96px);
  line-height:.92;
  letter-spacing:-.065em;
  font-weight:620;
}
.contact h2 em{
  font-style:normal;
  color:#7868d8;
}
.contact-heading>p{
  max-width:650px;
  margin:30px 0 0;
  color:#66615b;
  font-size:16px;
  line-height:1.75;
}
.contact-panel{
  border:1px solid rgba(29,28,32,.12);
  background:rgba(255,255,255,.38);
  border-radius:22px;
  padding:12px;
  box-shadow:0 28px 80px rgba(66,56,43,.08);
  backdrop-filter:blur(10px);
}
.contact-panel-head{
  padding:12px 14px 14px;
  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;
  color:#827b72;
}
.contact .contact-row{
  width:100%;
  min-height:78px;
  margin:0;
  padding:12px 14px;
  border:0;
  border-top:1px solid rgba(29,28,32,.09);
  border-radius:0;
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  color:#1b1c20;
  background:transparent;
  transition:background .25s ease,transform .25s ease;
}
.contact .contact-row:first-of-type{border-top-color:rgba(29,28,32,.09)}
.contact-row-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(32,31,36,.13);
  border-radius:13px;
  background:rgba(255,255,255,.58);
}
.contact-row-icon svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.contact-row-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.contact-row-copy small{
  font-family:inherit;
  font-size:8px;
  line-height:1;
  letter-spacing:.14em;
  font-weight:700;
  color:#817a72;
}
.contact-row-copy strong{
  overflow-wrap:anywhere;
  font-size:15px;
  font-weight:600;
  letter-spacing:-.015em;
}
.contact-file-meta{
  justify-self:end;
  white-space:nowrap;
  font-size:9px;
  letter-spacing:.08em;
  color:#807a72;
  padding:7px 9px;
  border:1px solid rgba(30,29,34,.10);
  border-radius:999px;
}
@media (hover:hover) and (pointer:fine){
  .contact .contact-row:hover{
    background:rgba(255,255,255,.62);
    transform:translateX(3px);
  }
}
.contact-meta{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  gap:22px;
  padding-top:26px;
  border-top:1px solid rgba(24,24,28,.09);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#858079;
}

@media(max-width:900px){
  .contact .contact-shell{
    grid-template-columns:1fr;
    gap:48px;
  }
  .contact h2{max-width:720px}
  .contact-panel{max-width:680px}
}
@media(max-width:600px){
  .contact{
    min-height:auto;
    padding-top:100px;
    padding-bottom:44px;
  }
  .contact .contact-shell{padding-top:38px;gap:36px}
  .contact h2{font-size:clamp(46px,14vw,64px)}
  .contact-heading>p{font-size:14px;margin-top:22px}
  .contact-panel{padding:8px;border-radius:18px}
  .contact .contact-row{
    min-height:72px;
    grid-template-columns:42px minmax(0,1fr);
    padding:11px 10px;
    gap:12px;
  }
  .contact-row-icon{width:40px;height:40px;border-radius:12px}
  .contact-row-copy strong{font-size:13px}
  .contact-file-meta{grid-column:2;justify-self:start;margin-top:-5px;font-size:8px;padding:5px 8px}
  .contact-meta{flex-direction:column;gap:7px;padding-top:20px}
}