@charset "UTF-8";
/* =============================================================
   PRINCE RAUNIYAR — PORTFOLIO
   File     : css/style.css
   Theme    : "Traceroute" — the page is a route, sections are hops.
   Palette  : mint paper + botanical emerald + one marigold signal.
   RGB rule : the spectrum is reserved for things that MOVE —
              the boot sequence, the cursor probe, the scroll rail,
              hover glints. Nothing static is ever rainbow.
   ============================================================= */

/* -------------------------------------------------------------
   TABLE OF CONTENTS
   01. Design tokens
   02. Reset & base
   03. Type scale
   04. Layout helpers
   05. Ambient background
   06. Cursor probe light
   07. Boot sequence (RGB preloader)
   08. Scroll rail + navigation
   09. Buttons
   10. Hero
   11. Hero visual (topology node)
   12. Marquee band
   13. Stats strip
   14. Motion system (reveals + parallax)
   15. About
   16. Skills
   17. Education
   18. Certifications
   19. Currently learning
   20. Objective
   21. Contact
   22. Footer
   23. Mobile sheet, toast, back-to-top
   24. Responsive
   25. Reduced motion & print
   ------------------------------------------------------------- */


/* ============ 01. DESIGN TOKENS ============ */
:root{
  /* surfaces */
  --paper:#F1F6F1;
  --paper-2:#FFFFFF;
  --paper-3:#E8F1EA;
  --mist:#DCEADF;
  --line:rgba(14,43,34,.11);
  --line-2:rgba(14,43,34,.06);

  /* ink */
  --ink:#0E2B22;
  --ink-2:#3D5A4E;
  --ink-3:#728C80;

  /* brand */
  --emerald:#0B8A5C;
  --sprout:#12B978;
  --deep:#0C1B16;
  --glow:rgba(11,138,92,.16);
  --marigold:#D9931F;
  --on-emerald:#F1F6F1;

  /* motion spectrum — only used by animated elements */
  --sig-1:#12B978;   /* signal green  */
  --sig-2:#2BB6E8;   /* link cyan     */
  --sig-3:#7C5CFF;   /* route violet  */
  --sig-4:#FF4D8D;   /* alert magenta */
  --sig-5:#D9931F;   /* marigold      */
  --probe-blend:multiply;
  --probe-alpha:.28;
  --aurora-a:.18;

  --shadow-1:0 1px 2px rgba(14,43,34,.05), 0 6px 18px -8px rgba(14,43,34,.14);
  --shadow-2:0 24px 60px -28px rgba(14,43,34,.30), 0 2px 6px rgba(14,43,34,.05);
  --shadow-3:0 40px 90px -40px rgba(14,43,34,.42), 0 3px 10px rgba(14,43,34,.07);

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-2:cubic-bezier(.65,0,.35,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);

  --maxw:1200px;
  --pad:clamp(20px,5vw,64px);

  --f-display:'Sora',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}

html[data-theme="dark"]{
  --paper:#0C1B16;
  --paper-2:#122620;
  --paper-3:#163028;
  --mist:#1C3A31;
  --line:rgba(231,243,236,.13);
  --line-2:rgba(231,243,236,.07);
  --ink:#E7F3EC;
  --ink-2:#AEC8BB;
  --ink-3:#7F9C8E;
  --emerald:#17C47E;
  --sprout:#3FE3A5;
  --deep:#081310;
  --glow:rgba(23,196,126,.20);
  --marigold:#F0B44A;
  --on-emerald:#07211A;
  --probe-blend:screen;
  --probe-alpha:.46;
  --aurora-a:.28;
  --shadow-1:0 1px 2px rgba(0,0,0,.30), 0 8px 22px -10px rgba(0,0,0,.5);
  --shadow-2:0 30px 70px -30px rgba(0,0,0,.72), 0 2px 8px rgba(0,0,0,.35);
  --shadow-3:0 46px 100px -44px rgba(0,0,0,.85), 0 3px 12px rgba(0,0,0,.4);
}


/* ============ 02. RESET & BASE ============ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  font-size:16.5px;
  line-height:1.65;
  font-weight:450;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .55s var(--ease), color .55s var(--ease);
}
body.is-booting{overflow:hidden;height:100vh}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
ul{list-style:none}
::selection{background:var(--emerald);color:var(--on-emerald)}
:focus-visible{outline:2.5px solid var(--emerald);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;z-index:9999;background:var(--emerald);color:var(--on-emerald);padding:10px 16px;border-radius:8px;font-size:.85rem}
.skip:focus{left:16px}


/* ============ 03. TYPE SCALE ============ */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.06;letter-spacing:-.025em}
.h-xl{font-size:clamp(3rem,9.2vw,6.4rem);font-weight:800;letter-spacing:-.045em}
.h-lg{font-size:clamp(2rem,4.6vw,3.35rem);letter-spacing:-.035em}
.mono{font-family:var(--f-mono);font-size:.735rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.lead{font-size:clamp(1.02rem,1.35vw,1.16rem);color:var(--ink-2);max-width:60ch;line-height:1.72}


/* ============ 04. LAYOUT HELPERS ============ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(72px,10vw,132px);position:relative}
.sec-head{margin-bottom:clamp(36px,5vw,60px);max-width:62ch}
.eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:20px}
.eyebrow .hop{
  font-family:var(--f-mono);font-size:.7rem;font-weight:600;letter-spacing:.1em;
  color:var(--on-emerald);background:var(--emerald);
  padding:5px 9px;border-radius:6px;font-style:normal;position:relative;overflow:hidden;
}
/* a packet slides through the hop label */
.eyebrow .hop::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.5),transparent 80%);
  transform:translateX(-120%);animation:glint 4.6s var(--ease) infinite;
}
@keyframes glint{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.eyebrow .tag{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.sec-sub{margin-top:16px}
section[id],#top{scroll-margin-top:96px}


/* ============ 05. AMBIENT BACKGROUND ============ */
/* Four layers, all of them slow: an aurora wash, colour clouds, a dot
   field rising like packets on a link, and one trace line sweeping down.
   Nothing here is decorative noise — the page is a network under load. */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* the whole spectrum, turning once every 70 seconds */
.aurora{
  position:absolute;left:-40%;top:-40%;width:180%;height:180%;
  background:conic-gradient(from 0deg at 50% 50%,
    color-mix(in srgb,var(--sig-1) 60%,transparent),
    color-mix(in srgb,var(--sig-2) 60%,transparent),
    color-mix(in srgb,var(--sig-3) 60%,transparent),
    color-mix(in srgb,var(--sig-4) 60%,transparent),
    color-mix(in srgb,var(--sig-5) 60%,transparent),
    color-mix(in srgb,var(--sig-1) 60%,transparent));
  filter:blur(130px);
  opacity:var(--aurora-a);
  mix-blend-mode:var(--probe-blend);
  animation:aurora-turn 70s linear infinite;
  will-change:transform;
}
@keyframes aurora-turn{to{transform:rotate(360deg)}}

.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.orb.a{width:46vw;height:46vw;background:var(--glow);top:-14vw;right:-8vw;animation:drift 26s ease-in-out infinite}
.orb.b{width:36vw;height:36vw;background:var(--glow);bottom:-10vw;left:-8vw;animation:drift 32s ease-in-out infinite reverse}
.orb.c{width:22vw;height:22vw;background:rgba(217,147,31,.10);top:52%;left:44%;animation:drift 38s ease-in-out infinite}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(4vw,5vh,0) scale(1.12)}
  66%{transform:translate3d(-3vw,-4vh,0) scale(.94)}
}

.grid-bg{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 55% at 50% 22%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 22%,#000 20%,transparent 78%);
  will-change:background-position;
}

/* dot field — each mote is one colour of the spectrum, drifting upward.
   The nodes are made by JS so the count can follow the screen size. */
.motes{position:absolute;inset:0}
.motes i{
  position:absolute;bottom:-10px;
  width:var(--w,3px);height:var(--w,3px);border-radius:50%;
  background:currentColor;box-shadow:0 0 10px currentColor;
  opacity:0;animation:rise linear infinite;will-change:transform,opacity;
}
.motes i:nth-child(5n+1){color:var(--sig-1)}
.motes i:nth-child(5n+2){color:var(--sig-2)}
.motes i:nth-child(5n+3){color:var(--sig-3)}
.motes i:nth-child(5n+4){color:var(--sig-4)}
.motes i:nth-child(5n+5){color:var(--sig-5)}
@keyframes rise{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.5)}
  10%{opacity:.7}
  80%{opacity:.45}
  100%{opacity:0;transform:translate3d(var(--dx,30px),-112vh,0) scale(1.15)}
}

/* three outlined shapes turning slowly — spare parts of a topology */
.floaters i{position:absolute;opacity:.12;will-change:transform}
.floaters .f1{
  width:150px;height:150px;top:14%;left:6%;border-radius:50%;
  border:1px dashed var(--sig-2);animation:turn 44s linear infinite;
}
.floaters .f2{
  width:96px;height:96px;top:62%;right:8%;border-radius:14px;
  border:1px solid var(--sig-3);animation:turn 36s linear infinite reverse;
}
.floaters .f3{
  width:70px;height:70px;top:38%;right:22%;
  background:
    linear-gradient(var(--sig-5),var(--sig-5)) center/100% 1px no-repeat,
    linear-gradient(var(--sig-5),var(--sig-5)) center/1px 100% no-repeat;
  animation:turn 28s linear infinite;
}
@keyframes turn{
  0%{transform:rotate(0) translateY(0)}
  50%{transform:rotate(180deg) translateY(-26px)}
  100%{transform:rotate(360deg) translateY(0)}
}

/* one horizontal sweep line, like a trace running down the page */
.scanline{
  position:absolute;left:0;right:0;height:1px;top:0;
  background:linear-gradient(90deg,transparent,var(--emerald),transparent);
  opacity:.22;animation:scan 9s linear infinite;
}
@keyframes scan{0%{transform:translateY(0)}100%{transform:translateY(100vh)}}
#app{position:relative;z-index:1}

/* four restrained RGB rails at the viewport edge. They fade in only
   after the boot sequence so the intro still owns the first impression. */
.rgb-frame{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity 1.4s ease 1s}
body:not(.is-booting) .rgb-frame{opacity:.55}
.rgb-frame i{position:absolute;overflow:hidden}
.rgb-frame i::before{
  content:'';position:absolute;
  background:linear-gradient(90deg,transparent,var(--sig-1),var(--sig-2),var(--sig-3),var(--sig-4),var(--sig-5),transparent);
  filter:drop-shadow(0 0 6px currentColor);animation:rail-flow 8s linear infinite;
}
.rgb-frame i:nth-child(1),.rgb-frame i:nth-child(3){left:4vw;right:4vw;height:1px}
.rgb-frame i:nth-child(1){top:18px}.rgb-frame i:nth-child(3){bottom:18px}
.rgb-frame i:nth-child(1)::before,.rgb-frame i:nth-child(3)::before{inset:0;width:48%;transform:translateX(-120%)}
.rgb-frame i:nth-child(2),.rgb-frame i:nth-child(4){top:5vh;bottom:5vh;width:1px}
.rgb-frame i:nth-child(2){right:18px}.rgb-frame i:nth-child(4){left:18px}
.rgb-frame i:nth-child(2)::before,.rgb-frame i:nth-child(4)::before{
  inset:0;height:48%;width:1px;background:linear-gradient(180deg,transparent,var(--sig-1),var(--sig-2),var(--sig-3),var(--sig-4),var(--sig-5),transparent);
  transform:translateY(-120%);animation-name:rail-flow-y;
}
.rgb-frame i:nth-child(2)::before{animation-delay:-2s}.rgb-frame i:nth-child(3)::before{animation-delay:-4s}.rgb-frame i:nth-child(4)::before{animation-delay:-6s}
@keyframes rail-flow{to{transform:translateX(330%)}}
@keyframes rail-flow-y{to{transform:translateY(330%)}}


/* ============ 06. CURSOR LIGHT ============ */
/* A light with weight. Six layers chase the pointer at six different
   speeds, so the further back a layer sits the further it lags — the
   colour arrives a moment after you do. Each layer is its own fixed
   element: a blended child inside a positioned wrapper would be
   isolated and never blend with the page behind it. */
.probe-glow,.probe-halo,.probe-ring,.probe-dot,.probe-tail i{
  position:fixed;left:0;top:0;pointer-events:none;
  opacity:0;transition:opacity .6s ease;
}
.probe-glow,.probe-halo{z-index:5}
.probe-tail{position:fixed;inset:0;z-index:6;pointer-events:none}
.probe-ring,.probe-dot{z-index:7}

/* the far light — big, soft, cycles the full spectrum every 9s */
.probe-glow{
  width:600px;height:600px;margin:-300px 0 0 -300px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--sig-1) 0%,transparent 62%);
  mix-blend-mode:var(--probe-blend);
  filter:blur(46px) hue-rotate(0deg);
  animation:spectrum 9s linear infinite;
  will-change:transform,filter;
}
/* the near light — smaller, turns the other way, so the two colours
   cross each other and never sit still */
.probe-halo{
  width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;
  background:radial-gradient(circle,var(--sig-3) 0%,transparent 60%);
  mix-blend-mode:var(--probe-blend);
  filter:blur(28px) hue-rotate(0deg);
  animation:spectrum-2 9s linear infinite;
  will-change:transform,filter;
}
@keyframes spectrum{to{filter:blur(46px) hue-rotate(360deg)}}
@keyframes spectrum-2{to{filter:blur(28px) hue-rotate(-360deg)}}

/* the tail — five beads of the spectrum, each one lagging more than
   the last, so a fast flick of the mouse draws a comet */
.probe-tail i{
  border-radius:50%;mix-blend-mode:var(--probe-blend);
  will-change:transform;
}
.probe-tail i:nth-child(1){width:26px;height:26px;margin:-13px 0 0 -13px;background:radial-gradient(circle,var(--sig-1),transparent 70%)}
.probe-tail i:nth-child(2){width:22px;height:22px;margin:-11px 0 0 -11px;background:radial-gradient(circle,var(--sig-2),transparent 70%)}
.probe-tail i:nth-child(3){width:19px;height:19px;margin:-9.5px 0 0 -9.5px;background:radial-gradient(circle,var(--sig-3),transparent 70%)}
.probe-tail i:nth-child(4){width:16px;height:16px;margin:-8px 0 0 -8px;background:radial-gradient(circle,var(--sig-4),transparent 70%)}
.probe-tail i:nth-child(5){width:13px;height:13px;margin:-6.5px 0 0 -6.5px;background:radial-gradient(circle,var(--sig-5),transparent 70%)}

.probe-ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--emerald) 55%,transparent);
  transition:opacity .6s ease,width .3s var(--ease-back),height .3s var(--ease-back),
             margin .3s var(--ease-back),border-color .3s ease,background .3s ease;
}
.probe-dot{
  width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--sig-1);box-shadow:0 0 14px var(--sig-1),0 0 30px var(--sig-1);
  animation:spectrum-3 9s linear infinite;
}
/* the dot and the far light turn through the spectrum together, so the
   point of the light and its bloom are always the same colour */
@keyframes spectrum-3{to{filter:hue-rotate(360deg)}}
/* the pointer has moved at least once */
html.probe-live .probe-glow{opacity:var(--probe-alpha)}
html.probe-live .probe-halo{opacity:calc(var(--probe-alpha) * .85)}
html.probe-live .probe-tail i{opacity:calc(var(--probe-alpha) * 1.6)}
html.probe-live .probe-ring,html.probe-live .probe-dot{opacity:1}
/* the ring swells over anything clickable */
html.probe-hot .probe-ring{
  width:56px;height:56px;margin:-28px 0 0 -28px;
  border-color:var(--emerald);background:var(--glow);
}

/* a quick spectrum shockwave on click/tap with a real pointer */
.probe-click{
  position:fixed;left:0;top:0;z-index:8;width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;pointer-events:none;transform:translate3d(var(--cx),var(--cy),0) scale(.25);
  border:1.5px solid var(--sig-2);box-shadow:0 0 18px var(--sig-3),inset 0 0 12px var(--sig-1);
  animation:probe-pop .72s var(--ease) forwards;
}
.probe-click::after{
  content:'';position:absolute;inset:-5px;border-radius:inherit;
  border:1px solid var(--sig-4);filter:hue-rotate(0deg);animation:spectrum-3 .72s linear;
}
@keyframes probe-pop{
  0%{opacity:.95;transform:translate3d(var(--cx),var(--cy),0) scale(.2)}
  72%{opacity:.5}
  100%{opacity:0;transform:translate3d(var(--cx),var(--cy),0) scale(4.4)}
}

/* generic spotlight surface — cards read the --mx/--my the JS writes */
.lit{position:relative;isolation:isolate}
.lit::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  opacity:0;transition:opacity .45s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),var(--glow),transparent 70%);
}
.lit:hover::after{opacity:1}
/* keep real content above the spotlight wash */
.lit>*{position:relative;z-index:2}

/* a spectrum hairline that runs around a card while the pointer is on it */
@property --edge{syntax:'<angle>';initial-value:0deg;inherits:false}
.edge::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;
  z-index:0;opacity:0;transition:opacity .4s ease;pointer-events:none;
  background:conic-gradient(from var(--edge),
    var(--sig-1),var(--sig-2),var(--sig-3),var(--sig-4),var(--sig-5),var(--sig-1));
  padding:1.4px;
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  mask-composite:exclude;
  animation:edge-turn 4s linear infinite;
}
.edge:hover::before{opacity:.85}
@keyframes edge-turn{to{--edge:360deg}}


/* ============ 07. THE INTRO ============ */
/* A room you walk through before the site. It keeps its own dark
   palette in both themes, because the point of the sequence is that
   the lights come up at the end of it.
   Order of events: brackets draw, mark lands, name rises letter by
   letter, the handshake completes, then six panels lift away. */
.boot{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;
  --b-fg:#F4F9FC;
  --b-mute:#7D95A3;
  --c1:#12E08C;   /* mint    */
  --c2:#22C9F2;   /* cyan    */
  --c3:#8B6BFF;   /* violet  */
  --c4:#FF5C9A;   /* magenta */
  --c5:#C6F24A;   /* lime    */
  color:var(--b-fg);
}
html[data-theme] .boot{--b-bg:#04070A}

/* --- the six panels. They are the backdrop AND the exit --- */
.boot-bg{position:absolute;inset:0;display:flex;z-index:0}
.boot-bg i{
  position:relative;flex:1 1 0;background:var(--b-bg);
  transition:transform 1.15s cubic-bezier(.76,0,.24,1);
}
.boot-bg i::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  opacity:0;background:currentColor;box-shadow:0 0 22px currentColor;
  transition:opacity .3s ease;
}
.boot-bg i:nth-child(1){color:var(--c1)}
.boot-bg i:nth-child(2){color:var(--c2)}
.boot-bg i:nth-child(3){color:var(--c3)}
.boot-bg i:nth-child(4){color:var(--c4)}
.boot-bg i:nth-child(5){color:var(--c5)}
.boot-bg i:nth-child(6){color:var(--c2)}
.boot.out .boot-bg i::after{opacity:.95}
.boot.out .boot-bg i{transform:translateY(-101%)}

/* --- atmosphere: grid, vignette, motes, brackets --- */
.boot-atmos{position:absolute;inset:0;z-index:1;transition:opacity .45s ease}
.boot.out .boot-atmos{opacity:0}
/* the moment it starts leaving, it stops intercepting the page */
.boot.out{pointer-events:none}

.boot-grid{
  position:absolute;inset:-60px;
  background-image:
    linear-gradient(var(--c2) 1px,transparent 1px),
    linear-gradient(90deg,var(--c2) 1px,transparent 1px);
  background-size:62px 62px;
  opacity:.055;
  animation:boot-pan 30s linear infinite;
}
@keyframes boot-pan{to{background-position:62px 62px}}

/* wide network routes behind the loader. The paths use a moving dash
   and the packets use native SVG motion, keeping the effect light. */
.boot-route-map{
  position:absolute;inset:-2%;width:104%;height:104%;opacity:.24;
  mix-blend-mode:screen;filter:saturate(1.25);animation:route-map-in 1.4s ease .25s both;
}
.boot-route-lines use{
  fill:none;stroke:url(#bootRouteGradient);stroke-width:1.25;stroke-linecap:round;
  stroke-dasharray:2 15;animation:route-dash 14s linear infinite;
}
.boot-route-lines use:nth-child(2){animation-direction:reverse;opacity:.72}
.boot-route-lines use:nth-child(3){animation-duration:10s;opacity:.5}
.boot-route-nodes circle{fill:#22C9F2;animation:route-node 2.4s ease-in-out infinite}
.boot-route-nodes circle:nth-child(3n+2){fill:#8B6BFF;animation-delay:-.8s}
.boot-route-nodes circle:nth-child(3n+3){fill:#C6F24A;animation-delay:-1.6s}
.boot-route-packets circle{fill:#F4F9FC;stroke:#22C9F2;stroke-width:1.2}
.boot-route-packets circle:nth-child(2){stroke:#8B6BFF}.boot-route-packets circle:nth-child(3){stroke:#C6F24A}
@keyframes route-map-in{from{opacity:0;transform:scale(1.08)}to{opacity:.24;transform:scale(1)}}
@keyframes route-dash{to{stroke-dashoffset:-340}}
@keyframes route-node{0%,100%{opacity:.35;r:3px}50%{opacity:1;r:5px}}

/* tiny system labels make the screen feel alive without adding noise */
.boot-sys{
  position:absolute;display:flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:.61rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,249,252,.48);opacity:0;animation:sys-in .8s ease 1s forwards;
}
.boot-sys i{width:6px;height:6px;border-radius:50%;background:var(--c1);box-shadow:0 0 12px var(--c1);animation:sys-blink 1.5s ease-in-out infinite}
.boot-sys-a{left:46px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%)}
.boot-sys-b{right:46px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}
.boot-sys-b i{background:var(--c3);box-shadow:0 0 12px var(--c3)}
@keyframes sys-in{to{opacity:1}}
@keyframes sys-blink{0%,100%{opacity:.35;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}

/* the grid fades toward the edges so the middle stays the subject */
.boot-vig{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 42% 46% at 50% 46%,color-mix(in srgb,var(--c3) 16%,transparent),transparent 70%),
    radial-gradient(circle at 50% 46%,transparent 0%,var(--b-bg) 72%);
}

.boot-motes i{
  position:absolute;width:2.5px;height:2.5px;border-radius:50%;
  background:currentColor;box-shadow:0 0 9px currentColor;opacity:0;
  animation:boot-mote linear infinite;
}
.boot-motes i:nth-child(4n+1){color:var(--c2)}
.boot-motes i:nth-child(4n+2){color:var(--c3)}
.boot-motes i:nth-child(4n+3){color:var(--c1)}
.boot-motes i:nth-child(4n+4){color:var(--c5)}
@keyframes boot-mote{
  0%{opacity:0;transform:translate3d(0,0,0)}
  15%{opacity:.8}
  85%{opacity:.4}
  100%{opacity:0;transform:translate3d(var(--dx,24px),var(--dy,-190px),0)}
}

/* four brackets, one colour each, drawn on at the start */
.boot-corner i{
  position:absolute;width:74px;height:74px;opacity:0;
  animation:corner-in 1s var(--ease) forwards;
}
.boot-corner i:nth-child(1){
  top:30px;left:30px;border-top:1.5px solid var(--c2);border-left:1.5px solid var(--c2);
  border-top-left-radius:18px;filter:drop-shadow(0 0 7px var(--c2));animation-delay:.15s;
}
.boot-corner i:nth-child(2){
  top:30px;right:30px;border-top:1.5px solid var(--c3);border-right:1.5px solid var(--c3);
  border-top-right-radius:18px;filter:drop-shadow(0 0 7px var(--c3));animation-delay:.28s;
}
.boot-corner i:nth-child(3){
  bottom:30px;left:30px;border-bottom:1.5px solid var(--c4);border-left:1.5px solid var(--c4);
  border-bottom-left-radius:18px;filter:drop-shadow(0 0 7px var(--c4));animation-delay:.41s;
}
.boot-corner i:nth-child(4){
  bottom:30px;right:30px;border-bottom:1.5px solid var(--c5);border-right:1.5px solid var(--c5);
  border-bottom-right-radius:18px;filter:drop-shadow(0 0 7px var(--c5));animation-delay:.54s;
}
@keyframes corner-in{
  from{opacity:0;transform:scale(.55)}
  to{opacity:.85;transform:scale(1)}
}

/* --- the centre --- */
.boot-in{
  position:relative;z-index:2;width:min(440px,84vw);text-align:center;
  transition:opacity .5s ease,transform .7s var(--ease);
}
.boot.out .boot-in{opacity:0;transform:translateY(-26px) scale(.94)}

.bstage{position:relative;display:grid;place-items:center;margin-bottom:34px}

/* rings leaving the mark like a ping going out */
.b-rings{position:absolute;display:grid;place-items:center;pointer-events:none}
.b-rings i{
  position:absolute;width:var(--s);height:var(--s);border-radius:50%;
  border:1px solid rgba(255,255,255,.11);opacity:0;
  animation:ring-out 3.4s ease-out infinite;
}
.b-rings i::after{
  content:'';position:absolute;top:-3.5px;left:50%;width:7px;height:7px;margin-left:-3.5px;
  border-radius:50%;background:currentColor;box-shadow:0 0 14px currentColor;
}
.b-rings i:nth-child(1){--s:180px;color:var(--c2);animation-delay:.7s}
.b-rings i:nth-child(2){--s:262px;color:var(--c3);animation-delay:1.25s}
.b-rings i:nth-child(3){--s:344px;color:var(--c5);animation-delay:1.8s}
@keyframes ring-out{
  0%{opacity:0;transform:scale(.72) rotate(0)}
  28%{opacity:.55}
  100%{opacity:0;transform:scale(1.18) rotate(120deg)}
}

/* the mark: a bright plate with a dark face, exactly one bloom */
.bmark{
  position:relative;width:112px;height:112px;border-radius:27px;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--c2),var(--c3) 48%,var(--c5));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 20px 60px -12px color-mix(in srgb,var(--c2) 65%,transparent),
    0 0 140px -18px color-mix(in srgb,var(--c3) 70%,transparent);
  animation:mark-land 1.25s cubic-bezier(.2,.85,.25,1.2) both,
            mark-breathe 5s ease-in-out 1.4s infinite;
}
@keyframes mark-land{
  from{opacity:0;transform:scale(.4) rotateY(-150deg)}
  to{opacity:1;transform:scale(1) rotateY(0)}
}
@keyframes mark-breathe{
  0%,100%{transform:scale(1) translateY(0)}
  50%{transform:scale(1.035) translateY(-4px)}
}
.bmark::before{
  content:'';position:absolute;inset:2px;border-radius:25px;
  background:linear-gradient(160deg,#0B1219,#04080C);
}
/* light travelling across the glass */
.bmark::after{
  content:'';position:absolute;inset:2px;border-radius:25px;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.24) 48%,transparent 62%);
  background-size:300% 100%;background-position:180% 0;
  animation:mark-shine 3.8s ease-in-out 1.5s infinite;
}
@keyframes mark-shine{
  0%{background-position:180% 0}
  55%,100%{background-position:-120% 0}
}
.bmark b{
  position:relative;z-index:2;font-family:var(--f-display);font-weight:800;
  font-size:2.4rem;letter-spacing:-.045em;
  background:linear-gradient(135deg,var(--c1),var(--c2) 38%,var(--c3) 68%,var(--c5));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* the name, one letter at a time. JS gives each letter its slice of a
   single gradient, so the colour runs across the whole word instead of
   restarting on every character. */
.bword{
  display:flex;justify-content:center;flex-wrap:wrap;
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.6rem,5.4vw,2.3rem);letter-spacing:-.02em;line-height:1.1;
  margin-bottom:.55rem;
}
.bword span{
  display:inline-block;color:var(--b-fg);
  opacity:0;transform:translateY(22px) rotateX(-55deg);
  animation:letter-up .72s var(--ease-back) forwards;
}
.bword span.sp{width:.34em}
.bword.grad span{
  background-image:linear-gradient(90deg,var(--c1),var(--c2) 28%,var(--c3) 55%,var(--c4) 78%,var(--c5));
  background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@keyframes letter-up{
  to{opacity:1;transform:translateY(0) rotateX(0)}
}

.btag{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--b-mute);margin-bottom:2.1rem;opacity:0;
  animation:fade-up .8s var(--ease) 1.55s forwards;
}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* the handshake — his own subject, used as the loading copy */
.hs{
  font-family:var(--f-mono);font-size:.665rem;line-height:2.1;text-align:left;
  margin:1.5rem auto 0;width:max-content;max-width:100%;
}
.hs p{
  opacity:0;transform:translateX(-10px);color:var(--b-mute);white-space:nowrap;
  transition:opacity .5s ease,transform .5s var(--ease);
}
.hs p.on{opacity:1;transform:none}
.hs p b{font-weight:600}
.hs p:nth-child(1) b{color:var(--c2)}
.hs p:nth-child(2) b{color:var(--c3)}
.hs p:nth-child(3) b{color:var(--c1)}

/* the bar */
.bbar-wrap{opacity:0;animation:fade-up .7s var(--ease) 1.7s forwards}
.bbar{
  height:5px;border-radius:99px;background:rgba(255,255,255,.09);
  overflow:hidden;position:relative;
}
.bbar i{
  display:block;height:100%;width:0;border-radius:99px;position:relative;
  background:linear-gradient(90deg,var(--c1),var(--c2) 30%,var(--c3) 58%,var(--c4) 78%,var(--c5));
  box-shadow:0 0 18px color-mix(in srgb,var(--c2) 70%,transparent);
  transition:width .22s linear;
}
.bbar i::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:bar-shine 1.5s linear infinite;
}
@keyframes bar-shine{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
.bmeta{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:.7rem;font-family:var(--f-mono);font-size:.68rem;
  letter-spacing:.12em;color:var(--b-mute);
}
.bmeta .stage{transition:opacity .25s ease}
.bmeta .pct{color:var(--c2)}
.bmeta .pct b{font-weight:600}

/* a way out for anyone who has seen it already */
.boot-skip{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  z-index:3;font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--b-mute);
  padding:9px 18px;border:1px solid rgba(255,255,255,.14);border-radius:99px;
  opacity:0;animation:fade-up .6s var(--ease) 2.4s forwards;
  transition:color .3s ease,border-color .3s ease,background .3s ease;
}
.boot-skip:hover{color:var(--b-fg);border-color:var(--c2);background:rgba(34,201,242,.1)}
.boot.out .boot-skip{opacity:0;pointer-events:none;animation:none}

@media(max-width:600px){
  .boot-corner i{width:52px;height:52px}
  .boot-corner i:nth-child(1),.boot-corner i:nth-child(2){top:18px}
  .boot-corner i:nth-child(3),.boot-corner i:nth-child(4){bottom:18px}
  .boot-corner i:nth-child(1),.boot-corner i:nth-child(3){left:18px}
  .boot-corner i:nth-child(2),.boot-corner i:nth-child(4){right:18px}
  .b-rings i:nth-child(3){display:none}
  .bmark{width:92px;height:92px;border-radius:23px}
  .bmark::before,.bmark::after{border-radius:21px}
  .bmark b{font-size:2rem}
  .hs{font-size:.6rem}
}


/* ============ 08. SCROLL RAIL + NAVIGATION ============ */
.rail{position:fixed;top:0;left:0;height:2.5px;width:100%;z-index:900;background:transparent}
.rail i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--sig-1),var(--sig-2),var(--sig-3),var(--sig-4),var(--sig-5));
  background-size:300% 100%;animation:slide 6s linear infinite;
  box-shadow:0 0 12px color-mix(in srgb,var(--sig-2) 45%,transparent);
}

.nav{
  position:fixed;top:0;left:0;right:0;z-index:800;padding-block:18px;
  transition:padding .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease),transform .5s var(--ease);
}
.nav.stuck{
  padding-block:10px;
  background:color-mix(in srgb,var(--paper) 80%,transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 0 var(--line);
}
.nav.hide{transform:translateY(-108%)}
.nav-in{display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mark{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
  background:var(--emerald);color:var(--on-emerald);position:relative;overflow:hidden;
  font-family:var(--f-display);font-weight:800;font-size:.86rem;letter-spacing:-.02em;
  transition:transform .55s var(--ease-back);
}
.brand-mark::after{
  content:'';position:absolute;inset:-50%;
  background:conic-gradient(from 0deg,transparent 60%,rgba(255,255,255,.55),transparent);
  opacity:0;transition:opacity .4s;animation:rgbspin 2.4s linear infinite;
}
.brand:hover .brand-mark{transform:rotate(-10deg) scale(1.08)}
.brand:hover .brand-mark::after{opacity:1}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-txt b{font-family:var(--f-display);font-size:.94rem;font-weight:700;letter-spacing:-.02em}
.brand-txt span{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}

.nav-links{display:flex;gap:4px;margin-left:auto;position:relative}
.nav-links a{
  position:relative;padding:8px 13px;border-radius:99px;font-size:.88rem;font-weight:550;
  color:var(--ink-2);transition:color .3s;
}
.nav-links a::after{
  content:'';position:absolute;left:13px;right:13px;bottom:4px;height:1.5px;background:var(--emerald);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.active{color:var(--emerald)}
.nav-links a.active::after{transform:scaleX(1)}
/* the pill physically travels to the active link */
.nav-pill{
  position:absolute;top:0;left:0;height:100%;border-radius:99px;background:var(--glow);
  opacity:0;pointer-events:none;
  transition:transform .55s var(--ease),width .55s var(--ease),opacity .35s ease;
}
.nav-act{display:flex;align-items:center;gap:10px}
.tgl{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center;
  background:var(--paper-2);transition:transform .45s var(--ease-back),border-color .3s,background .3s;
}
.tgl:hover{transform:translateY(-2px) rotate(-8deg);border-color:var(--emerald)}
.tgl svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.9;stroke-linecap:round}
.tgl .moon{display:none}
html[data-theme="dark"] .tgl .sun{display:none}
html[data-theme="dark"] .tgl .moon{display:block}
.burger{display:none;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--paper-2);place-items:center}
.burger i{display:block;width:16px;height:1.7px;background:var(--ink);border-radius:2px;transition:transform .45s var(--ease),opacity .3s}
.burger i+i{margin-top:4.5px}
.burger.on i:first-child{transform:translateY(6.2px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:last-child{transform:translateY(-6.2px) rotate(-45deg)}


/* ============ 09. BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:9px;position:relative;overflow:hidden;
  padding:13px 22px;border-radius:99px;font-size:.9rem;font-weight:650;letter-spacing:-.01em;
  transition:box-shadow .45s var(--ease),color .35s,border-color .35s,background .35s;
  will-change:transform;
}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.btn span{position:relative;z-index:2}
.btn-1{background:var(--emerald);color:var(--on-emerald);box-shadow:0 10px 24px -12px var(--emerald)}
.btn-1:hover{box-shadow:0 20px 40px -14px var(--emerald)}
.btn-1:hover svg{transform:translateX(4px)}
.btn-2{border:1px solid var(--line);color:var(--ink);background:var(--paper-2)}
.btn-2:hover{border-color:var(--emerald);color:var(--emerald)}
.btn-sm{padding:10px 17px;font-size:.83rem}
/* cursor-tracked sheen inside the button */
.btn::before{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:1;
  background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.26),transparent 62%);
  opacity:0;transition:opacity .35s;
}
.btn-1:hover::before,.btn-w:hover::before{opacity:1}
.btn-2:hover::before{background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 62%);opacity:1}


/* ============ 10. HERO ============ */
.hero{padding-top:clamp(120px,17vw,180px);padding-bottom:clamp(56px,7vw,96px);position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center}
.badge{
  display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 11px;border-radius:99px;
  border:1px solid var(--line);background:var(--paper-2);box-shadow:var(--shadow-1);
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:500;
}
.pulse{position:relative;width:7px;height:7px;border-radius:50%;background:var(--marigold);flex-shrink:0}
.pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--marigold);opacity:.6;animation:ping 2s ease-out infinite}
@keyframes ping{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.6);opacity:0}}

.hero h1{margin:22px 0 0}
.ln{display:block;overflow:hidden;padding-bottom:.045em}
.ln>i{display:block;font-style:normal;transform:translateY(112%);transition:transform 1.15s var(--ease)}
.hero h1 .ln:last-child>i{color:var(--emerald)}
.role{
  display:flex;align-items:center;gap:11px;margin-top:20px;
  font-family:var(--f-mono);font-size:clamp(.78rem,1.5vw,.92rem);letter-spacing:.06em;color:var(--ink-2);
  min-height:1.7em;
}
.role .arrow{color:var(--emerald);font-weight:600}
.role .caret{display:inline-block;width:8px;height:1.05em;background:var(--emerald);animation:blink 1.05s steps(2) infinite;vertical-align:-2px;border-radius:1px}
@keyframes blink{50%{opacity:0}}
.hero .lead{margin-top:24px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:36px;padding-top:26px;border-top:1px solid var(--line)}
.fact{display:flex;align-items:center;gap:9px;font-size:.83rem;color:var(--ink-2);transition:color .3s}
.fact:hover{color:var(--ink)}
.fact svg{width:15px;height:15px;stroke:var(--emerald);fill:none;stroke-width:1.9;stroke-linecap:round;flex-shrink:0}

/* hero entrance orchestration */
.hero .badge,.hero .role,.hero .lead,.hero-cta,.hero-facts,.hero-visual{
  opacity:0;transform:translateY(22px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
}
.hero.in .badge{opacity:1;transform:none;transition-delay:.05s}
.hero.in .ln>i{transform:none}
.hero.in h1 .ln:nth-child(1)>i{transition-delay:.14s}
.hero.in h1 .ln:nth-child(2)>i{transition-delay:.26s}
.hero.in .role{opacity:1;transform:none;transition-delay:.52s}
.hero.in .lead{opacity:1;transform:none;transition-delay:.60s}
.hero.in .hero-cta{opacity:1;transform:none;transition-delay:.68s}
.hero.in .hero-facts{opacity:1;transform:none;transition-delay:.76s}
.hero.in .hero-visual{opacity:1;transform:none;transition-delay:.34s;transition-duration:1.25s}


/* ============ 11. HERO VISUAL (TOPOLOGY NODE) ============ */
.hero-vis-wrap{min-width:0}
.hero-visual{position:relative;width:100%;max-width:440px;margin-inline:auto;aspect-ratio:4/4.55}
.net{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.net .link{fill:none;stroke:var(--line);stroke-width:1.2;stroke-dasharray:5 7;animation:crawl 3.6s linear infinite}
@keyframes crawl{to{stroke-dashoffset:-24}}
.net .pkt{fill:var(--sig-5)}
.net .pkt.g{fill:var(--sig-1)}
.net .pkt.c{fill:var(--sig-2)}
.net .pkt.v{fill:var(--sig-3)}

.ring{
  position:absolute;left:50%;top:50%;width:96%;aspect-ratio:1;
  border:1px dashed var(--line);border-radius:50%;
  transform:translate(-50%,-50%) rotate(var(--spin,0deg));
  will-change:transform;
}
.ring::before{
  content:'';position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:var(--emerald);box-shadow:0 0 0 4px var(--glow),0 0 14px var(--emerald);
}
.ring-2{
  position:absolute;left:50%;top:50%;width:112%;aspect-ratio:1;
  border:1px solid var(--line-2);border-radius:50%;
  transform:translate(-50%,-50%) rotate(calc(var(--spin,0deg) * -.6));
  will-change:transform;
}
.portrait{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(var(--tiltz,0deg));
  width:74%;aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;
  background:var(--paper-3);box-shadow:var(--shadow-2);border:1px solid var(--line);
  transition:box-shadow .6s var(--ease);
}
.portrait:hover{box-shadow:var(--shadow-3)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transform:scale(1.03);transition:transform 1.5s var(--ease),filter .9s ease}
.portrait .tint{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(190deg,rgba(11,138,92,.30),rgba(11,138,92,.04) 45%,rgba(12,27,22,.42));
  mix-blend-mode:multiply;transition:opacity .9s ease;
}
html[data-theme="dark"] .portrait .tint{background:linear-gradient(190deg,rgba(23,196,126,.22),transparent 50%,rgba(8,19,16,.62))}
/* a slow spectrum wash crosses the portrait — the "signal" on the person */
.portrait .wash{
  position:absolute;inset:-30%;pointer-events:none;opacity:.28;
  background:linear-gradient(115deg,transparent 35%,var(--sig-2) 48%,var(--sig-3) 54%,transparent 68%);
  mix-blend-mode:screen;filter:blur(18px);
  animation:wash 7s var(--ease) infinite;
}
@keyframes wash{0%,55%{transform:translateX(-70%)}100%{transform:translateX(70%)}}
.portrait:hover img{transform:scale(1.07)}
.portrait:hover .tint{opacity:.22}
.portrait .fb{position:absolute;inset:0;display:none;place-items:center;font-family:var(--f-display);font-size:3rem;font-weight:800;color:var(--ink-3);background:var(--paper-3)}

.chip{
  position:absolute;display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:99px;
  background:color-mix(in srgb,var(--paper-2) 86%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);box-shadow:var(--shadow-1);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--ink-2);
  white-space:nowrap;animation:bob 6s ease-in-out infinite;
  transition:border-color .35s,color .35s;
}
.chip:hover{border-color:var(--emerald);color:var(--ink)}
.chip b{width:6px;height:6px;border-radius:50%;background:var(--emerald);flex-shrink:0}
.chip.c1{top:6%;left:-2%}
.chip.c2{top:38%;right:-5%;animation-delay:-2s}
.chip.c3{bottom:16%;left:-4%;animation-delay:-4s}
.chip.c4{bottom:2%;right:2%;animation-delay:-1s}
.chip.c4 b{background:var(--marigold);animation:blink 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}


/* ============ 12. MARQUEE BAND ============ */
.marquee{
  border-block:1px solid var(--line);overflow:hidden;
  background:color-mix(in srgb,var(--paper-2) 42%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-track>div{display:flex;align-items:center;padding-block:14px;flex-shrink:0}
.marquee-track span{
  display:inline-flex;align-items:center;gap:16px;padding-inline:22px;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;
}
.marquee-track span::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--emerald);opacity:.55}
.marquee-track span:nth-child(3n)::after{background:var(--marigold)}


/* ============ 13. STATS STRIP ============ */
.strip{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper-2) 55%,transparent)}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(22px,3vw,34px) clamp(10px,2vw,26px);border-left:1px solid var(--line);position:relative;overflow:hidden}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(1.5rem,3.4vw,2.4rem);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--emerald)}
.stat span{display:block;margin-top:9px;font-family:var(--f-mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}


/* ============ 14. MOTION SYSTEM (reveals + parallax) ============ */
/* every block enters; the direction encodes where it sits in the layout */
.rv,.rv-l,.rv-r,.rv-s,.rv-b{transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);transition-delay:var(--d,0ms)}
.rv{opacity:0;transform:translateY(38px)}
.rv-l{opacity:0;transform:translateX(-34px)}
.rv-r{opacity:0;transform:translateX(34px)}
.rv-s{opacity:0;transform:scale(.93) translateY(18px)}
.rv-b{opacity:0;transform:translateY(24px);filter:blur(10px)}
.rv.on,.rv-l.on,.rv-r.on,.rv-s.on,.rv-b.on{opacity:1;transform:none;filter:none}

/* word-by-word heading reveal */
.split{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .05em 0}
.split>i{display:inline-block;font-style:normal;transform:translateY(105%);transition:transform .95s var(--ease);transition-delay:var(--wd,0ms)}
.on .split>i,.split.on>i{transform:none}

/* parallax targets get their offset written by JS */
[data-parallax]{will-change:transform}


/* ============ 15. ABOUT ============ */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(30px,5vw,68px);align-items:start}
.about-copy p+p{margin-top:18px}
.about-copy .big{font-family:var(--f-display);font-size:clamp(1.18rem,2.1vw,1.5rem);font-weight:600;line-height:1.45;letter-spacing:-.02em;color:var(--ink)}
.about-copy .big em{font-style:normal;color:var(--emerald)}
.notes{display:grid;gap:12px}
.note{
  display:flex;gap:15px;padding:19px 21px;border-radius:var(--r-md);
  background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--shadow-1);
  transition:transform .55s var(--ease),border-color .4s,box-shadow .55s var(--ease);
}
.note:hover{transform:translateX(8px);border-color:var(--emerald);box-shadow:var(--shadow-2)}
.note-ic{width:36px;height:36px;border-radius:10px;background:var(--glow);display:grid;place-items:center;flex-shrink:0;transition:transform .5s var(--ease-back)}
.note:hover .note-ic{transform:rotate(-10deg) scale(1.08)}
.note-ic svg{width:18px;height:18px;stroke:var(--emerald);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.note h4{font-size:.95rem;font-weight:650;margin-bottom:3px}
.note p{font-size:.855rem;color:var(--ink-2);line-height:1.55}


/* ============ 16. SKILLS ============ */
.skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);perspective:1400px}
.sk{
  padding:clamp(24px,2.6vw,32px);border-radius:var(--r-lg);
  background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--shadow-1);overflow:hidden;
  transform-style:preserve-3d;
  transition:box-shadow .55s var(--ease),border-color .4s,transform .5s var(--ease);
}
.sk:hover{box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--emerald) 42%,var(--line))}
.sk-top{display:flex;align-items:center;gap:14px;margin-bottom:20px;position:relative;z-index:2}
.sk-ic{width:44px;height:44px;border-radius:13px;background:var(--emerald);display:grid;place-items:center;flex-shrink:0;transition:transform .55s var(--ease-back)}
.sk-ic svg{width:21px;height:21px;stroke:var(--on-emerald);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sk:hover .sk-ic{transform:rotate(-10deg) scale(1.09)}
.sk-top h3{font-size:1.08rem;font-weight:700}
.sk-top em{display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-style:normal;margin-top:3px}
.pills{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:2}
.pill{
  padding:6.5px 13px;border-radius:99px;font-size:.795rem;font-weight:550;
  background:var(--paper-3);border:1px solid transparent;color:var(--ink-2);cursor:default;
  opacity:0;transform:translateY(12px);
  transition:opacity .55s var(--ease) var(--pd,0ms),transform .55s var(--ease) var(--pd,0ms),
             background .35s,color .35s,border-color .35s;
}
.pills.on .pill{opacity:1;transform:none}
.pill:hover{background:var(--emerald);color:var(--on-emerald);transform:translateY(-3px) scale(1.04)}


/* ============ 17. EDUCATION ============ */
.edu-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(30px,5vw,64px);align-items:start}
.route{position:relative;padding-left:34px}
.route::before{content:'';position:absolute;left:8px;top:8px;bottom:8px;width:1.5px;background:linear-gradient(var(--emerald),var(--line))}
/* a packet runs down the route line */
.route::after{
  content:'';position:absolute;left:5.5px;top:8px;width:6px;height:6px;border-radius:50%;
  background:var(--marigold);box-shadow:0 0 10px var(--marigold);
  animation:runline 4.4s var(--ease-2) infinite;
}
@keyframes runline{0%{transform:translateY(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(120px);opacity:0}}
.hopcard{position:relative}
.hopcard::before{
  content:'';position:absolute;left:-34px;top:6px;width:17px;height:17px;border-radius:50%;
  background:var(--paper);border:2.5px solid var(--emerald);box-shadow:0 0 0 5px var(--glow);
}
.hopcard .when{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald);font-weight:600}
.hopcard h3{font-size:clamp(1.15rem,2vw,1.4rem);margin:10px 0 6px}
.hopcard .where{font-size:.95rem;font-weight:600;color:var(--ink)}
.hopcard .where a{border-bottom:1.5px solid var(--emerald);padding-bottom:1px;transition:color .3s}
.hopcard .where a:hover{color:var(--emerald)}
.hopcard .spec{font-size:.88rem;color:var(--ink-2);margin-top:8px}
.status{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:6px 13px;border-radius:99px;
  background:var(--glow);color:var(--emerald);
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
}
.status .pulse{background:var(--emerald)}
.status .pulse::after{border-color:var(--emerald)}
.course-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.course-head h4{font-size:.98rem;font-weight:700}
.course-head span{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;color:var(--ink-3)}
.courses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 22px}
.courses li{
  display:flex;align-items:flex-start;gap:9px;padding:7px 0;font-size:.855rem;color:var(--ink-2);
  border-bottom:1px solid var(--line-2);
  opacity:0;transform:translateX(-14px);
  transition:opacity .5s var(--ease) var(--pd,0ms),transform .5s var(--ease) var(--pd,0ms),color .3s,padding-left .35s var(--ease);
}
.courses.on li{opacity:1;transform:none}
.courses li:hover{color:var(--ink);padding-left:6px}
.courses li i{font-family:var(--f-mono);font-size:.7rem;color:var(--emerald);flex-shrink:0;line-height:1.75;font-style:normal}


/* ============ 18. CERTIFICATIONS ============ */
.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(14px,1.8vw,20px)}
.cert{
  padding:26px;border-radius:var(--r-lg);background:var(--paper-2);
  border:1px solid var(--line);box-shadow:var(--shadow-1);overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .4s;
}
.cert::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--sig-1),var(--sig-2),var(--sig-3));
  transform:scaleX(0);transform-origin:left;transition:transform .75s var(--ease);
}
.cert:hover{transform:translateY(-8px);box-shadow:var(--shadow-2);border-color:color-mix(in srgb,var(--emerald) 40%,var(--line))}
.cert:hover::before{transform:scaleX(1)}
.cert-ic{width:40px;height:40px;border-radius:12px;background:var(--glow);display:grid;place-items:center;margin-bottom:18px;position:relative;z-index:2;transition:transform .5s var(--ease-back)}
.cert:hover .cert-ic{transform:rotate(-8deg) scale(1.08)}
.cert-ic svg{width:19px;height:19px;stroke:var(--emerald);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cert em{position:relative;z-index:2;font-family:var(--f-mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-style:normal}
.cert h3{position:relative;z-index:2;font-size:1.02rem;font-weight:650;line-height:1.35;margin-top:9px;letter-spacing:-.015em}
.cert .kind{
  position:relative;z-index:2;display:inline-block;margin-top:16px;padding:4.5px 11px;border-radius:6px;
  background:var(--paper-3);color:var(--ink-2);
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
}
.cert.has-img{padding-top:0}
.cert-thumb{
  position:relative;z-index:2;display:block;margin:0 -26px 20px;overflow:hidden;
  border-bottom:1px solid var(--line);background:var(--paper-3);
}
.cert-thumb img{
  display:block;width:100%;aspect-ratio:16/10.85;object-fit:cover;object-position:top center;
  transition:transform .6s var(--ease);
}
.cert:hover .cert-thumb img{transform:scale(1.045)}
.cert-view{
  position:absolute;inset:auto 0 0 0;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 0;color:#fff;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(180deg,transparent,rgba(10,20,16,.82));
  opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.cert-view svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cert-thumb:hover .cert-view,.cert-thumb:focus-visible .cert-view{opacity:1;transform:translateY(0)}
.cert.has-img .cert-ic{margin-top:22px}


/* ============ 19. CURRENTLY LEARNING ============ */
.learn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lrn{
  position:relative;padding:20px 22px;border-radius:var(--r-md);
  background:var(--paper-2);border:1px solid var(--line);overflow:hidden;
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease);
}
.lrn:hover{transform:translateY(-5px);border-color:var(--marigold);box-shadow:var(--shadow-2)}
.lrn h4{font-size:.94rem;font-weight:650;letter-spacing:-.015em}
.lrn .state{display:flex;align-items:center;gap:8px;margin-top:11px;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.lrn .state i{width:5px;height:5px;border-radius:50%;background:var(--marigold);animation:blink 1.8s ease-in-out infinite;flex-shrink:0}
.lrn .track{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden}
.lrn .track i{position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,var(--marigold),transparent);animation:sweep 2.6s linear infinite}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}


/* ============ 20. OBJECTIVE ============ */
.obj{
  position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xl);
  background:var(--emerald);color:var(--on-emerald);
  padding:clamp(34px,6vw,68px);box-shadow:var(--shadow-2);
}
.obj::before{
  content:'';position:absolute;inset:0;opacity:.14;
  background-image:radial-gradient(circle,var(--on-emerald) 1px,transparent 1px);
  background-size:22px 22px;
}
/* a slow spectrum sweep across the emerald slab */
.obj::after{
  content:'';position:absolute;inset:-40%;pointer-events:none;opacity:.22;
  background:linear-gradient(115deg,transparent 40%,var(--sig-2) 50%,var(--sig-3) 56%,transparent 66%);
  mix-blend-mode:screen;filter:blur(30px);animation:wash 11s var(--ease) infinite;
}
.obj-in{position:relative;z-index:2;max-width:70ch}
.obj .mono{color:color-mix(in srgb,var(--on-emerald) 78%,transparent);margin-bottom:20px;display:block}
.obj q{
  font-family:var(--f-display);font-size:clamp(1.24rem,2.7vw,2.02rem);font-weight:600;line-height:1.34;
  letter-spacing:-.03em;quotes:'\201C' '\201D';
}
.obj-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.obj .btn-w{background:var(--paper-2);color:var(--emerald);box-shadow:0 12px 30px -14px rgba(0,0,0,.4)}
.obj .btn-o{border:1px solid color-mix(in srgb,var(--on-emerald) 42%,transparent);color:var(--on-emerald)}
.obj .btn-o:hover{border-color:var(--on-emerald)}


/* ============ 21. CONTACT ============ */
.contact-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:start}
.cards{display:grid;gap:11px}
.card{
  display:flex;align-items:center;gap:16px;padding:17px 19px;border-radius:var(--r-md);
  background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--shadow-1);
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--emerald);box-shadow:var(--shadow-2)}
.card-ic{width:40px;height:40px;border-radius:11px;background:var(--glow);display:grid;place-items:center;flex-shrink:0;transition:transform .5s var(--ease-back)}
.card:hover .card-ic{transform:rotate(-8deg) scale(1.08)}
.card-ic svg{width:18px;height:18px;stroke:var(--emerald);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card-tx{min-width:0;flex:1;position:relative;z-index:2}
.card-tx em{display:block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-style:normal}
.card-tx b{display:block;font-size:.93rem;font-weight:600;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copy{
  position:relative;z-index:2;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;
  border:1px solid var(--line);transition:background .3s,border-color .3s,transform .35s var(--ease-back);
}
.copy:hover{background:var(--emerald);border-color:var(--emerald);transform:scale(1.08)}
.copy svg{width:14px;height:14px;stroke:var(--ink-2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.copy:hover svg{stroke:var(--on-emerald)}

.form{padding:clamp(24px,3vw,34px);border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.form h3{font-size:1.14rem;margin-bottom:6px;position:relative;z-index:2}
.form>p{font-size:.855rem;color:var(--ink-2);margin-bottom:22px;position:relative;z-index:2}
.field{margin-bottom:15px;position:relative;z-index:2}
.field label{display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;font-weight:500;transition:color .3s}
.field:focus-within label{color:var(--emerald)}
.field input,.field textarea{
  width:100%;padding:12px 15px;border-radius:var(--r-sm);background:var(--paper);
  border:1px solid var(--line);font-size:.9rem;font-family:var(--f-body);
  transition:border-color .3s,box-shadow .3s,background .3s;resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.75}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 3.5px var(--glow)}
.form .btn{width:100%;justify-content:center;margin-top:6px;z-index:2}


/* ============ 22. FOOTER ============ */
.foot{border-top:1px solid var(--line);padding-block:40px;margin-top:clamp(50px,7vw,90px)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between}
.foot p{font-size:.82rem;color:var(--ink-3)}
.foot p b{color:var(--ink-2);font-weight:600}
.foot-links{display:flex;gap:18px}
.foot-links a{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);transition:color .3s}
.foot-links a:hover{color:var(--emerald)}


/* ============ 23. MOBILE SHEET, TOAST, BACK-TO-TOP ============ */
.sheet{
  position:fixed;inset:0;z-index:790;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;padding:var(--pad);
  clip-path:circle(0% at calc(100% - 44px) 40px);transition:clip-path .85s var(--ease);
  visibility:hidden;
}
.sheet.open{clip-path:circle(150% at calc(100% - 44px) 40px);visibility:visible}
.sheet a{
  font-family:var(--f-display);font-size:clamp(1.7rem,8vw,2.5rem);font-weight:700;letter-spacing:-.035em;
  padding:9px 0;opacity:0;transform:translateY(26px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s;
  display:flex;align-items:baseline;gap:14px;
}
.sheet a em{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;color:var(--emerald);font-style:normal;font-weight:500}
.sheet.open a{opacity:1;transform:none}
.sheet a:hover{color:var(--emerald)}

.toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,90px);z-index:950;
  display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:99px;
  background:var(--ink);color:var(--paper);box-shadow:var(--shadow-2);
  font-size:.85rem;font-weight:600;opacity:0;
  transition:transform .6s var(--ease-back),opacity .4s;pointer-events:none;
}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast svg{width:15px;height:15px;stroke:var(--sprout);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

.top{
  position:fixed;right:24px;bottom:24px;z-index:700;width:46px;height:46px;border-radius:15px;
  background:var(--emerald);color:var(--on-emerald);display:grid;place-items:center;
  box-shadow:0 14px 30px -12px var(--emerald);
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease-back);
}
.top.show{opacity:1;transform:none;pointer-events:auto}
.top:hover{transform:translateY(-4px) scale(1.04)}
.top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}


/* ============ 24. RESPONSIVE ============ */
@media(max-width:1040px){
  .nav-links,.nav-pill{display:none}
  .burger{display:grid}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-vis-wrap{order:2}
  .hero-visual{max-width:370px}
  .about-grid,.edu-grid,.contact-grid{grid-template-columns:1fr}
  .skills{grid-template-columns:1fr}
  .learn{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  body{font-size:16px}
  .strip-in{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:1px solid var(--line);padding-left:clamp(14px,4vw,24px)}
  .stat:nth-child(1),.stat:nth-child(3){border-left:0;padding-left:0}
  .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line)}
  .courses{grid-template-columns:1fr}
  .learn{grid-template-columns:1fr}
  .foot-in{flex-direction:column;align-items:flex-start;gap:14px}
  .chip.c1{left:-1%;top:2%}
  .chip.c2{right:-2%}
  .chip.c3{left:-2%}
  .top{right:16px;bottom:16px}
  .probe-glow,.probe-halo,.probe-ring,.probe-dot{display:none}
}
@media(max-width:420px){
  .chip{font-size:.56rem;padding:6px 10px}
  .badge{font-size:.6rem}
}
/* pointer-less devices never get the probe light */
@media (hover:none) and (pointer:coarse) and (any-hover:none){.probe-glow,.probe-halo,.probe-tail,.probe-ring,.probe-dot{display:none}}


@media (max-width:760px){
  .boot-route-map{inset:-10%;width:120%;height:120%;opacity:.17}
  .boot-sys{display:none}
  .rgb-frame i:nth-child(1),.rgb-frame i:nth-child(3){left:16px;right:16px}
  .rgb-frame i:nth-child(2),.rgb-frame i:nth-child(4){top:16px;bottom:16px}
}



/* ============ 24b. TECHVYRO-INSPIRED FINISHING PASS ============ */
/* The intro keeps the portfolio identity, but now follows the same clean
   rhythm as the supplied reference: grid, RGB bloom, pulsing rings, logo,
   letter reveal, progress bar, then a soft cinematic dissolve. */
.boot{
  background:#030608;
  opacity:1;
  visibility:visible;
  transition:opacity .9s cubic-bezier(.22,1,.36,1),visibility .9s ease;
}
.boot.out{opacity:0;visibility:hidden}
.boot.out .boot-bg i{transform:none}
.boot.out .boot-bg i::after{opacity:0}
.boot.out .boot-in{opacity:0;transform:translateY(-12px) scale(.93);filter:blur(5px)}
.boot-bg i{background:#030608}
.boot-grid{opacity:.075;background-size:60px 60px;animation:boot-pan 24s linear infinite}
.boot-route-map{opacity:.11;filter:saturate(1.4) blur(.15px)}
.boot-sys,.hs{display:none}
.boot-rgb-cloud{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 43%,rgba(34,201,242,.17),transparent 22%),
    radial-gradient(circle at 43% 48%,rgba(139,107,255,.12),transparent 30%),
    radial-gradient(circle at 57% 50%,rgba(198,242,74,.08),transparent 28%);
  filter:blur(34px) saturate(1.35);
  animation:boot-cloud 5.5s ease-in-out infinite alternate;
}
.boot-sweep{
  position:absolute;inset:-15%;pointer-events:none;opacity:.34;
  background:linear-gradient(112deg,transparent 42%,rgba(34,201,242,.08) 49%,rgba(139,107,255,.1) 51%,transparent 58%);
  transform:translateX(-65%);
  animation:boot-sweep 4.8s ease-in-out .35s infinite;
}
@keyframes boot-cloud{
  from{transform:scale(.92) rotate(-4deg);opacity:.72}
  to{transform:scale(1.12) rotate(5deg);opacity:1}
}
@keyframes boot-sweep{
  0%,15%{transform:translateX(-70%)}
  70%,100%{transform:translateX(70%)}
}
.boot-in{width:min(410px,86vw)}
.bstage{margin-bottom:30px}
.b-rings i{animation-duration:2.7s}
.b-rings i:nth-child(1){--s:165px;animation-delay:.15s}
.b-rings i:nth-child(2){--s:225px;animation-delay:.45s}
.b-rings i:nth-child(3){--s:285px;animation-delay:.75s}
.bmark{
  width:104px;height:104px;border-radius:24px;
  box-shadow:0 0 0 1px rgba(255,255,255,.2),0 0 36px rgba(34,201,242,.26),0 0 92px rgba(139,107,255,.2);
}
.bmark::before,.bmark::after{border-radius:22px}
.bmark b{font-size:2.2rem}
.bword{font-size:clamp(1.65rem,5vw,2.18rem);margin-bottom:.52rem}
.btag{font-size:.62rem;letter-spacing:.38em;margin-bottom:1.8rem}
.bbar-wrap{width:min(250px,78vw);margin-inline:auto}
.bbar{height:6px}
.bmeta{font-size:.64rem;letter-spacing:.08em}
.boot-skip{bottom:25px;opacity:.55;animation:none}

/* The reference uses a large cyan light and a smaller core. These two
   layers keep that readable shape, while a very subtle RGB drift makes it
   fit this portfolio in both themes. */
:root{--probe-alpha:.72;--probe-blend:normal}
html[data-theme="dark"]{--probe-alpha:.78;--probe-blend:screen}
.probe-glow,.probe-halo{z-index:30}
.probe-ring,.probe-dot{z-index:32}
.probe-tail{z-index:31}
.probe-glow{
  width:520px;height:520px;margin:-260px 0 0 -260px;
  background:
    radial-gradient(circle at 50% 50%,rgba(0,235,255,.18) 0%,rgba(0,235,255,.075) 38%,transparent 70%),
    conic-gradient(from 10deg,rgba(34,201,242,.055),rgba(139,107,255,.08),rgba(255,92,154,.05),rgba(198,242,74,.055),rgba(34,201,242,.055));
  filter:blur(38px) saturate(1.35) hue-rotate(0deg);
  animation:spectrum-tech 10s linear infinite;
}
.probe-halo{
  width:250px;height:250px;margin:-125px 0 0 -125px;
  background:
    radial-gradient(circle at 50% 50%,rgba(0,235,255,.25) 0%,rgba(0,235,255,.12) 30%,transparent 64%),
    radial-gradient(circle at 35% 40%,rgba(139,107,255,.11),transparent 48%),
    radial-gradient(circle at 66% 62%,rgba(198,242,74,.08),transparent 44%);
  filter:blur(21px) saturate(1.35) hue-rotate(0deg);
  animation:spectrum-tech-reverse 10s linear infinite;
}
@keyframes spectrum-tech{to{filter:blur(38px) saturate(1.35) hue-rotate(360deg)}}
@keyframes spectrum-tech-reverse{to{filter:blur(21px) saturate(1.35) hue-rotate(-360deg)}}
html.probe-live .probe-glow{opacity:var(--probe-alpha)}
html.probe-live .probe-halo{opacity:calc(var(--probe-alpha) * .95)}
.probe-tail i{filter:blur(1px)}
.probe-ring{border-color:rgba(0,210,230,.58);box-shadow:0 0 18px rgba(0,220,240,.13)}
.probe-dot{background:#62f2ff;box-shadow:0 0 12px #62f2ff,0 0 24px rgba(139,107,255,.65)}

/* Contact validation and true in-page submission. */
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.field-error{display:block;min-height:1.1em;margin-top:5px;font-size:.72rem;line-height:1.35;color:#d33f58}
.field.is-invalid label{color:#d33f58}
.field.is-invalid input,.field.is-invalid textarea{
  border-color:#d33f58;
  box-shadow:0 0 0 3.5px color-mix(in srgb,#d33f58 15%,transparent);
}
.field.is-valid input,.field.is-valid textarea{border-color:color-mix(in srgb,var(--emerald) 65%,var(--line))}
.send-message{min-height:50px}
.send-message[disabled]{cursor:wait;opacity:.78;transform:none!important}
.send-spinner{
  display:none;width:17px;height:17px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
  animation:send-spin .75s linear infinite;
}
.send-message.is-sending .send-spinner{display:inline-block}
.send-message.is-sending svg{display:none}
@keyframes send-spin{to{transform:rotate(360deg)}}
.form-status{min-height:1.4em!important;margin:12px 0 0!important;text-align:center;font-size:.78rem!important;color:var(--ink-3)!important}
.form-status.success{color:var(--emerald)!important}
.form-status.error{color:#d33f58!important}

@media(max-width:720px){
  .probe-glow,.probe-halo,.probe-tail,.probe-ring,.probe-dot{display:none}
  .boot-rgb-cloud{filter:blur(28px)}
}
@media (hover:none) and (pointer:coarse) and (any-hover:none){.probe-glow,.probe-halo,.probe-tail,.probe-ring,.probe-dot{display:none}}

/* ============ 25. REDUCED MOTION & PRINT ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .rv,.rv-l,.rv-r,.rv-s,.rv-b,
  .hero .badge,.hero .role,.hero .lead,.hero-cta,.hero-facts,.hero-visual,
  .pill,.courses li{opacity:1!important;transform:none!important;filter:none!important}
  .ln>i,.split>i{transform:none!important}
  .probe-glow,.probe-halo,.probe-tail,.probe-ring,.probe-dot,.probe-click,
  .scanline,.portrait .wash,.obj::after,.rgb-frame,
  .aurora,.motes,.floaters,.boot-motes,.b-rings,.boot-route-map,.boot-sys,.edge::before{display:none}
  .bword span,.btag,.bbar-wrap,.boot-corner i,.boot-skip{opacity:1!important;transform:none!important}
  .bmark{opacity:1!important;transform:none!important}
}
@media print{
  .nav,.boot,.ambient,.rgb-frame,.top,.sheet,.rail,.toast,.marquee,
  .probe-glow,.probe-halo,.probe-tail,.probe-ring,.probe-dot,.probe-click{display:none!important}
  body{background:#fff;color:#000}
}


/* =============================================================
   PRODUCTION ANIMATION ENHANCEMENTS
   ============================================================= */
html.intro-seen .boot{display:none!important}
html.intro-seen body.is-booting{overflow:auto;height:auto}
html.probe-live .probe-glow{opacity:calc(var(--probe-alpha) + var(--probe-boost-alpha,0))}
html.probe-live .probe-halo{opacity:calc((var(--probe-alpha) * .95) + var(--probe-boost-alpha,0))}
.sk{position:relative}
.sk::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--sig-1),var(--sig-2),var(--sig-3),var(--sig-4));
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) calc(var(--d,0ms) + 180ms);
}
.sk.on::after{transform:scaleX(1)}


/* ============ 26. CORRECTED PREMIUM CURSOR + INTRO RELIABILITY ============ */
/* Hidden until an actual mouse/pen movement is detected by JavaScript. */
html:not(.has-fine-pointer) .probe-glow,
html:not(.has-fine-pointer) .probe-halo,
html:not(.has-fine-pointer) .probe-tail,
html:not(.has-fine-pointer) .probe-ring,
html:not(.has-fine-pointer) .probe-dot{opacity:0!important}

:root{
  --probe-alpha:.92;
  --probe-blend:normal;
}
html[data-theme="dark"]{
  --probe-alpha:.96;
  --probe-blend:screen;
}
.probe-glow{
  width:680px;
  height:680px;
  margin:-340px 0 0 -340px;
  background:
    radial-gradient(circle at 50% 50%,rgba(52,226,255,.28) 0%,rgba(34,201,242,.18) 18%,rgba(139,107,255,.12) 39%,rgba(255,92,154,.055) 54%,transparent 72%);
  filter:blur(34px) saturate(1.28);
  animation:none;
  will-change:transform,opacity;
  contain:strict;
}
.probe-halo{
  width:290px;
  height:290px;
  margin:-145px 0 0 -145px;
  background:
    radial-gradient(circle at 50% 50%,rgba(164,248,255,.40) 0%,rgba(34,201,242,.24) 26%,rgba(139,107,255,.12) 46%,transparent 70%);
  filter:blur(20px) saturate(1.2);
  animation:none;
  will-change:transform,opacity;
  contain:strict;
}
html[data-theme="light"] .probe-glow{mix-blend-mode:multiply;opacity:0}
html[data-theme="light"] .probe-halo{mix-blend-mode:multiply;opacity:0}
html[data-theme="dark"] .probe-glow,
html[data-theme="dark"] .probe-halo{mix-blend-mode:screen}
html.has-fine-pointer.probe-live .probe-glow{
  opacity:calc(var(--probe-alpha) + var(--probe-boost-alpha,0));
}
html.has-fine-pointer.probe-live .probe-halo{
  opacity:calc((var(--probe-alpha) * .88) + var(--probe-boost-alpha,0));
}
html.probe-hot .probe-glow{filter:blur(38px) saturate(1.42)}
html.probe-hot .probe-halo{filter:blur(22px) saturate(1.42)}
html.probe-hot .probe-ring{
  width:68px;
  height:68px;
  margin:-34px 0 0 -34px;
  border-color:rgba(98,242,255,.95);
  background:rgba(34,201,242,.08);
  box-shadow:0 0 0 1px rgba(139,107,255,.18),0 0 30px rgba(34,201,242,.25);
}

/* Keep the opening screen unmistakably visible while the document starts. */
body.is-booting{overflow:hidden!important;height:100vh}
.boot{display:grid;opacity:1;visibility:visible}
.boot:not(.out) .boot-in{opacity:1;visibility:visible}