/* ================================================================
   1. DESIGN TOKENS
   The palette primitives (--bg, --ink, --accent, --pop-*) are injected
   into index.html by build.mjs from content/model.json -> theme.
   Everything else is derived here, so changing palette = changing a few
   primitives. The values below are the fallback palette.
   ================================================================ */
:root{
  --bg:#F8F7FC;
  --surface:#FFFFFF;
  --ink:#191735;
  --ink-2:#4C4A6A;
  --ink-3:#6E6C89;
  --accent:#6C4CF1;
  --accent-ink:#FFFFFF;
  --pop-coral:#FF6A3D;
  --pop-teal:#06BFA4;
  --pop-gold:#FFC233;
  --pop-pink:#FF5C9E;
  --pop-blue:#2E8DFF;
  --pop-coral-ink:#C63A16;
  --pop-teal-ink:#077A66;
  --pop-gold-ink:#8A6400;
  --pop-blue-ink:#1466D6;

  /* derived surfaces, lines and depth.
     Each token declares a plain fallback first, then the colour-mix version,
     so browsers without color-mix() still render a complete theme. */
  --line:#E6E3F2;
  --line:color-mix(in srgb, var(--ink) 10%, var(--bg));
  --line-strong:#D2CDEA;
  --line-strong:color-mix(in srgb, var(--ink) 18%, var(--bg));
  --bg-tint:#F1EFFA;
  --bg-tint:color-mix(in srgb, var(--accent) 5%, var(--bg));
  /* Mixing the accent toward --ink always moves it away from the canvas,
     so the hover state gains contrast on light and on black themes alike. */
  --accent-deep:#6242DE;
  --accent-deep:color-mix(in srgb, var(--accent) 88%, var(--ink));
  --accent-readable:#5A40C8;
  --accent-readable:var(--accent-deep);
  --accent-soft:#EDE8FF;
  --accent-soft:color-mix(in srgb, var(--accent) 10%, var(--surface));
  --accent-line:#CFC4FA;
  --accent-line:color-mix(in srgb, var(--accent) 26%, var(--surface));
  --accent-ring:#6C4CF12E;
  --accent-ring:color-mix(in srgb, var(--accent) 18%, transparent);
  --grid-line:#1917350F;
  --grid-line:color-mix(in srgb, var(--ink) 6%, transparent);
  --orbit-line:#6C4CF13D;
  --orbit-line:color-mix(in srgb, var(--accent) 24%, transparent);
  --dot:#C8C5DC;
  --dot:color-mix(in srgb, var(--ink) 24%, var(--bg));
  --star-faint:#E4DFF7;
  --star-faint:color-mix(in srgb, var(--accent) 14%, var(--bg));
  --shadow-sm:0 3px 12px #19173512;
  --shadow-sm:0 3px 12px color-mix(in srgb, var(--ink) 7%, transparent);
  --shadow-md:0 14px 38px #1917351A;
  --shadow-md:0 14px 38px color-mix(in srgb, var(--ink) 10%, transparent);
  --shadow-lg:0 30px 70px #19173524;
  --shadow-lg:0 30px 70px color-mix(in srgb, var(--ink) 14%, transparent);

  /* headline gradient and hero illustration */
  --grad-a:var(--accent);
  --grad-b:#E23A7E;
  --sticker:conic-gradient(from 20deg, var(--pop-coral), var(--pop-gold), var(--pop-teal), var(--accent), var(--pop-pink), var(--pop-coral));
  --code-bg:linear-gradient(150deg, var(--surface), #F3EFFF);
  --code-bg:linear-gradient(150deg, var(--surface), color-mix(in srgb, var(--accent) 7%, var(--surface)));
  --code-line:#DDD6FA;
  --code-line:color-mix(in srgb, var(--accent) 16%, var(--surface));
  --code-ink:var(--ink);
  --code-keyword:#6C4CF1;
  --code-string:#077A66;
  --code-comment:var(--ink-3);
  --code-dot:#D8D5E6;
  --code-dot:color-mix(in srgb, var(--ink) 16%, var(--surface));

  /* neon halos used by hover states and the pointer glow */
  --glow:color-mix(in srgb, var(--accent) 42%, transparent);
  --glow-soft:color-mix(in srgb, var(--accent) 20%, transparent);
  --tag-bg:#FFFFFFE6;
  --tag-bg:color-mix(in srgb, var(--surface) 90%, transparent);
  --tag-line:#E2DFF0;
  --tag-line:color-mix(in srgb, var(--ink) 12%, var(--surface));

  /* call to action panel — derived from the palette accent so every palette stays coherent */
  --cta-bg:linear-gradient(115deg, #4F2FD6, #1E5FD8);
  --cta-bg:radial-gradient(620px 320px at 88% 6%, color-mix(in srgb, var(--pop-pink) 42%, transparent), transparent 62%), linear-gradient(115deg, color-mix(in srgb, var(--accent) 78%, #12103A), color-mix(in srgb, var(--accent) 52%, #0C2B7A));
  --cta-ink:#FFFFFF;
  --cta-em:#FFE066;
  --cta-line:rgba(255,255,255,.38);
  --cta-line-soft:rgba(255,255,255,.26);
  --cta-hover:rgba(255,255,255,.18);

  --heading:'Space Grotesk',sans-serif;
  --body:'DM Sans',sans-serif;
}

/* ================================================================
   2. BASE
   ================================================================ */
*{box-sizing:border-box}
/* Page colour washes live on <html> so the fixed pointer glow (z-index:-1)
   can paint between the background and the content. */
html{
  scroll-behavior:smooth;scroll-padding-top:30px;
  overflow-x:clip;
  overscroll-behavior-x:none;
  background-color:var(--bg);
  background-image:
    radial-gradient(1000px 680px at 88% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(820px 560px at -14% 14%, color-mix(in srgb, var(--pop-teal) 14%, transparent), transparent 62%),
    radial-gradient(760px 560px at 74% 62%, color-mix(in srgb, var(--pop-pink) 11%, transparent), transparent 66%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}
body{margin:0;color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;min-width:280px;padding-bottom:env(safe-area-inset-bottom)}
a{color:inherit;text-decoration:none}
button{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
::selection{background:var(--accent);color:var(--accent-ink)}
.shell{width:min(1200px,calc(100% - 100px));margin-inline:auto}

/* ================================================================
   3. HEADER
   ================================================================ */
.header{height:110px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.logo{font:700 31px var(--heading);letter-spacing:-1.7px}
.logo span{font-size:13px;vertical-align:top;margin-left:4px;color:var(--accent)}
nav{display:flex;gap:38px;align-items:center;font-size:14px}
nav a{transition:color .2s}
nav a:hover,.text-link:hover{color:var(--accent)}
.nav-contact{border:1px solid var(--accent-line);border-radius:30px;padding:10px 22px;background:var(--surface);box-shadow:var(--shadow-sm);transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
.nav-contact:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:var(--shadow-md)}
.nav-contact span{margin-left:20px}
.menu-toggle{display:none}

/* ================================================================
   4. HERO
   ================================================================ */
.hero{position:relative;display:grid;grid-template-columns:1.12fr 1fr;column-gap:35px;padding-top:78px}
.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;margin:0 0 26px;display:flex;align-items:center;gap:10px;color:var(--ink-2)}
.status-dot{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px var(--accent-ring);flex-shrink:0}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--heading);font-weight:500}
h1{font-size:clamp(65px,6.7vw,92px);line-height:1.04;letter-spacing:-5px;margin-bottom:27px}
h1>span,h2>span,blockquote span{background-image:linear-gradient(96deg,var(--grad-a),var(--grad-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-intro{max-width:410px;font-size:16px;color:var(--ink-2);line-height:1.8}
.hero-intro span{color:var(--accent);margin-left:5px}
.hero-actions{display:flex;gap:30px;align-items:center;margin-top:29px}
.button{display:inline-flex;gap:30px;align-items:center;padding:15px 23px;border-radius:5px;font-size:13px;font-weight:600;transition:transform .2s,background .2s,box-shadow .2s}
.primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 12px 26px color-mix(in srgb, var(--accent) 30%, transparent)}
.button:hover{background:var(--accent-deep);transform:translateY(-3px)}
.text-link{font-size:13px;font-weight:500;display:inline-flex;gap:18px;align-items:center;transition:color .2s}
.hero-location{color:var(--ink-3);font-size:9px;letter-spacing:1.4px;margin-top:42px}
.hero-location span{color:var(--accent);margin-right:8px}
.hero-art{position:relative;min-height:490px;align-self:center;isolation:isolate}
.art-grid{position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:35px 35px;mask-image:radial-gradient(ellipse,#000,transparent 70%)}
.orbit-field{position:absolute;inset:0;overflow:hidden;z-index:0}
.orbit{position:absolute;border:1px solid var(--orbit-line);border-radius:50%;left:4%;top:5%;width:92%;height:90%;transform:rotate(-25deg)}
.orbit-two{top:17%;left:-3%;width:108%;height:65%;transform:rotate(30deg);border-style:dashed}
.art-coordinate{position:absolute;right:18px;top:6px;font:9px monospace;color:var(--ink-3);letter-spacing:1px}
.code-window{position:absolute;top:105px;left:4%;width:94%;background:var(--code-bg);border:1px solid var(--code-line);border-radius:11px;transform:rotate(-5deg);box-shadow:var(--shadow-lg);overflow:hidden}
.window-top{height:43px;display:flex;align-items:center;gap:6px;padding:0 17px;border-bottom:1px solid var(--code-line);background:color-mix(in srgb, var(--accent) 5%, transparent)}
.window-top>span{width:7px;height:7px;border-radius:50%;background:var(--code-dot)}
.window-top>span:first-child{background:var(--pop-coral)}
.window-top>span:nth-child(2){background:var(--pop-gold)}
.window-top>span:nth-child(3){background:var(--pop-teal)}
.window-top small{margin-left:auto;color:var(--ink-3);font:10px monospace}
.code-body{padding:22px 25px;font:12px/1.85 monospace;color:var(--code-ink)}
.code-body p{margin:0;white-space:nowrap}
.code-purple{color:var(--code-keyword)}
.code-green{color:var(--code-string)}
.code-comment{color:var(--code-comment);padding-top:12px}
.cursor{color:var(--pop-coral)}
.floating-tag{position:absolute;z-index:2;border:1px solid var(--tag-line);padding:9px 17px;border-radius:8px;background:var(--tag-bg);font:500 12px var(--heading);box-shadow:var(--shadow-sm);animation:float 6s ease-in-out infinite}
.tag-node{top:48px;left:34%;transform:rotate(7deg);color:var(--accent)}
.tag-react{right:-4px;top:148px;color:var(--pop-blue-ink);animation-delay:-2s}
.tag-shopify{bottom:38px;left:0;transform:rotate(-8deg);color:var(--pop-coral-ink);animation-delay:-4s}
.art-sticker{position:absolute;bottom:7px;right:2%;font-size:145px;line-height:1;background:var(--sticker);-webkit-background-clip:text;background-clip:text;color:transparent;transform:rotate(10deg);filter:drop-shadow(0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent))}
.build-badge{position:absolute;bottom:4px;left:33%;font:8px monospace;letter-spacing:1.5px;display:flex;gap:9px;align-items:center;color:var(--ink-3)}
.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.4px;color:var(--ink-3);padding:46px 0 27px}
.hero-bottom a span{margin-left:15px;color:var(--accent)}

/* ================================================================
   5. TECHNOLOGY BAND
   ================================================================ */
.tech-band{border-block:1px solid var(--line);background:var(--bg-tint)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 44s linear infinite;will-change:translate}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;gap:40px;padding-block:27px;padding-inline-end:40px}
.marquee-group span{font:500 21px var(--heading);color:var(--ink-2);transition:color .3s,translate .3s}
.marquee-group span:hover{color:var(--accent);translate:0 -3px}
@keyframes marquee{from{translate:0 0}to{translate:-50% 0}}
.tech-band i{font-size:18px;font-style:normal;color:var(--pop-coral)}
.tech-band i:nth-of-type(5n+2){color:var(--pop-gold)}
.tech-band i:nth-of-type(5n+3){color:var(--pop-teal)}
.tech-band i:nth-of-type(5n+4){color:var(--pop-blue)}
.tech-band i:nth-of-type(5n+5){color:var(--accent)}

/* ================================================================
   6. SECTIONS, ABOUT, METRICS
   ================================================================ */
.section{padding-block:105px}
h2{font-size:clamp(33px,3.6vw,48px);line-height:1.16;letter-spacing:-2px;margin-bottom:24px}
.about{display:grid;grid-template-columns:1fr 1fr;gap:90px;border-bottom:1px solid var(--line)}
.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 30px;margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.metric strong{display:block;font:600 32px/1 var(--heading);letter-spacing:-1.6px;color:var(--accent)}
.metrics .metric:nth-child(2) strong{color:var(--pop-coral-ink)}
.metrics .metric:nth-child(3) strong{color:var(--pop-teal-ink)}
.metrics .metric:nth-child(4) strong{color:var(--pop-gold-ink)}
.metric span{display:block;font-size:9px;letter-spacing:1.2px;color:var(--ink-3);margin-top:8px;text-transform:uppercase;line-height:1.5}
.about-signature{font:500 23px var(--heading);letter-spacing:-1px;margin-top:40px}
.about-signature span{color:var(--accent);margin-left:15px}
.about-copy{padding-top:35px;color:var(--ink-2);font-size:14px}
.about-copy .large-copy{font-size:21px;line-height:1.5;color:var(--ink)}
.about-details{display:flex;gap:60px;border-top:1px solid var(--line);padding-top:24px;margin-top:27px}
.about-details span{display:block;font-size:9px;letter-spacing:1.4px;margin-bottom:5px;color:var(--ink-3)}
.about-details strong{font-size:13px;color:var(--ink);font-weight:500}

/* ================================================================
   7. SERVICES
   ================================================================ */
.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:30px}
.section-heading>p{font-size:14px;color:var(--ink-2);margin-bottom:28px}
.services{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.service-card{border:1px solid var(--line);background:var(--surface);padding:30px;border-radius:9px;box-shadow:var(--shadow-sm);transition:transform .25s,border-color .25s,box-shadow .25s}
.service-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:var(--shadow-md)}
.card-top{display:flex;justify-content:space-between;align-items:center;color:var(--ink-3);font:11px monospace;margin-bottom:35px}
.service-icon{font:25px var(--heading);color:var(--accent);display:inline-block}
.service-card:nth-child(2) .service-icon{color:var(--pop-coral-ink)}
.service-card:nth-child(3) .service-icon{color:var(--pop-teal-ink)}
.service-card:nth-child(4) .service-icon{color:var(--pop-gold-ink)}
h3{font-size:27px;line-height:1.2;letter-spacing:-.8px;margin-bottom:18px}
.service-card p{font-size:13px;color:var(--ink-2);line-height:1.9;min-height:84px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:25px}
.tags span{border:1px solid var(--accent-line);border-radius:4px;padding:4px 8px;font-size:9px;color:var(--accent-readable);background:var(--accent-soft)}
.featured{background:linear-gradient(165deg,var(--accent-soft),var(--surface));border-color:var(--accent-line)}
.project-note{display:flex;justify-content:space-between;margin-top:30px;font-size:13px;color:var(--ink-2)}
.project-note a{color:var(--ink)}

/* ================================================================
   8. SKILLS AND STACK
   ================================================================ */
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.skill-group{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:26px;box-shadow:var(--shadow-sm);transition:border-color .25s,box-shadow .25s}
.skill-group:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.skill-group h3{font-size:19px;letter-spacing:-.4px;margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips span{border:1px solid var(--line-strong);border-radius:20px;padding:6px 12px;font-size:11px;color:var(--ink-2);background:var(--surface)}
.chips span.chip-top{border-color:var(--accent);color:var(--accent-readable);background:var(--accent-soft)}
.stack-cloud{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.stack-cloud span{font:500 15px var(--heading);color:var(--ink-3);border-bottom:1px dashed var(--line-strong);padding-bottom:2px;transition:color .2s,border-color .2s}
.stack-cloud span:hover{color:var(--accent);border-color:var(--accent)}

/* ================================================================
   9. JOURNEY
   ================================================================ */
.journey-wrap{background:var(--bg-tint);border-block:1px solid var(--line)}
.journey{display:grid;grid-template-columns:1fr 1fr;gap:90px}
.journey-intro>p:not(.eyebrow){color:var(--ink-2);font-size:14px;max-width:360px;margin-bottom:28px}
.derived-note{font-size:11px !important;color:var(--ink-3) !important;border-left:2px solid var(--line-strong);padding-left:14px}
.experience{position:relative;padding:0 0 27px 30px;border-left:1px solid var(--line-strong)}
.experience:before{content:'';position:absolute;top:5px;left:-4px;width:7px;height:7px;border-radius:50%;background:var(--dot)}
.experience:first-child:before{background:var(--accent);box-shadow:0 0 0 5px var(--accent-ring)}
.experience:last-child{padding-bottom:0}
.experience-date{font-size:9px;letter-spacing:1.4px;color:var(--accent)}
.experience-date em{font-style:normal;color:var(--pop-teal-ink);background:color-mix(in srgb, var(--pop-teal) 16%, transparent);padding:2px 6px;border-radius:4px;margin-left:4px}
.experience h3{font-size:21px;margin:9px 0 7px}
.experience p{font-size:12px;color:var(--ink-2);margin:0}
.experience p span{display:block;font-size:11px;color:var(--ink-3);margin-top:4px}

/* ================================================================
   10. CREDENTIALS
   ================================================================ */
.credentials-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;border-top:1px solid var(--line);padding-top:42px}
.column-title{font:600 10px var(--body);letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-3);margin:0 0 26px}
.credential{position:relative;padding:0 0 30px 30px;border-left:1px solid var(--line-strong)}
.credential:last-child{padding-bottom:0}
.credential:before{content:'';position:absolute;top:5px;left:-4px;width:7px;height:7px;border-radius:50%;background:var(--dot)}
.credential-meta{font-size:9px;letter-spacing:1.4px;color:var(--accent)}
.credential h3{font-size:20px;margin:9px 0}
.credential p{font-size:12px;color:var(--ink-2);margin:0}
.credential p span{display:block;font-size:11px;color:var(--ink-3);margin-top:4px}
.cert-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cert-list li{display:flex;gap:14px;align-items:baseline;font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:12px}
.cert-list li:before{content:'✓';color:var(--accent);font-size:11px}

/* ================================================================
   11. PHILOSOPHY
   ================================================================ */
.philosophy{position:relative;overflow:hidden}
.philosophy blockquote{font:500 clamp(30px,4vw,51px)/1.3 var(--heading);letter-spacing:-1.8px;margin:0 0 22px}
.philosophy>p:not(.eyebrow){font-size:13px;color:var(--ink-2)}
.philosophy-star{position:absolute;right:20px;top:80px;font-size:165px;color:var(--star-faint);line-height:1;transform:rotate(12deg)}

/* ================================================================
   12. CONTACT
   ================================================================ */
.contact{border-radius:12px;padding:40px 48px;background:var(--cta-bg);color:var(--cta-ink);box-shadow:0 30px 70px color-mix(in srgb, var(--accent) 26%, transparent)}
.contact-top{display:flex;justify-content:space-between;gap:20px}
.contact-top .eyebrow{font-size:9px;letter-spacing:1.3px;color:var(--cta-ink)}
.contact-top>span{font:9px monospace;white-space:nowrap}
.contact .status-dot{background:var(--cta-em);box-shadow:0 0 0 4px rgba(255,255,255,.2)}
.contact h2{position:relative;font-size:clamp(45px,6.5vw,84px);letter-spacing:-4px;margin:10px 0 30px;line-height:1.08}
.contact h2 em{font-style:normal;color:var(--cta-em)}
.contact h2>span{position:absolute;right:20px;top:0;color:var(--cta-ink);font-size:130px;font-weight:400}
.contact-bottom{border-top:1px solid var(--cta-line);padding-top:25px;display:flex;gap:20px;align-items:center}
.email-link{font-size:20px;letter-spacing:-.5px}
.email-link:hover{text-decoration:underline}
.copy-email{background:rgba(255,255,255,.14);border:1px solid var(--cta-line);border-radius:5px;padding:7px 12px;cursor:pointer;font-size:10px;color:var(--cta-ink);transition:background .2s}
.copy-email:hover{background:var(--cta-hover)}
.contact-bottom .text-link{margin-left:auto;font-size:11px}
.contact-bottom .text-link:hover{color:var(--cta-em)}
.contact-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px}
.contact-links a{font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;border-bottom:1px solid var(--cta-line-soft);padding-bottom:2px;transition:border-color .2s}
.contact-links a:hover{border-color:var(--cta-ink)}

/* ================================================================
   13. FOOTER, UTILITIES, MOTION
   ================================================================ */
.footer{display:flex;justify-content:space-between;align-items:center;padding-block:35px}
.footer .logo{font-size:24px}
.footer p{font-size:10px;color:var(--ink-3);margin:0}
.footer>a:last-child{font-size:9px;letter-spacing:1px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;top:-100px;left:20px;z-index:20;background:var(--accent);color:var(--accent-ink);padding:10px}
.skip-link:focus{top:10px}
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
[data-reveal].is-visible{opacity:1;transform:none}
@keyframes float{50%{translate:0 -9px}}

/* ================================================================
   14. RESPONSIVE
   ================================================================ */
@media(min-width:1500px){
  .hero{padding-top:100px;padding-bottom:10px}
  .hero-art{min-height:530px}
  .code-window{top:120px}
}
@media(max-width:1050px){
  .shell{width:calc(100% - 60px)}
  .hero{gap:15px}
  h1{font-size:72px}
  .code-body{font-size:10px;padding:20px 14px}
  .hero-art{min-height:450px}
  .tag-react{right:0}
  .about,.journey{gap:45px}
  .service-card{padding:24px}
  .tags{gap:4px}
  .contact{padding:35px}
  .contact-bottom{flex-wrap:wrap}
  .email-link{font-size:18px}
  .tech-band span{font-size:18px}
  nav{gap:22px;font-size:13px}
  .metrics{gap:18px 24px}
  .skills-grid{grid-template-columns:repeat(2,1fr)}
  .credentials-grid{gap:34px}
}
@media(max-width:900px){
  .shell{width:calc(100% - 40px)}
  html{scroll-padding-top:92px;background-attachment:scroll}
  body{font-size:16px}
  .header{height:calc(78px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
  .logo{font-size:28px}
  .menu-toggle{display:flex;min-width:92px;min-height:44px;justify-content:center;gap:20px;align-items:center;border:1px solid var(--line-strong);border-radius:999px;background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--ink);padding:9px 15px;font-size:12px;box-shadow:var(--shadow-sm)}
  .menu-toggle span{display:inline-block;font-size:17px;line-height:1;transition:rotate .35s cubic-bezier(.2,.7,.3,1),color .25s}
  .menu-toggle[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring),var(--shadow-sm)}
  .menu-toggle[aria-expanded="true"] span{rotate:45deg;color:var(--accent)}
  nav{display:flex;visibility:hidden;pointer-events:none;position:absolute;top:calc(68px + env(safe-area-inset-top));left:0;right:0;padding:14px;background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line-strong);border-radius:16px;align-items:stretch;gap:2px;box-shadow:0 26px 70px rgba(0,0,0,.55),0 0 50px var(--glow-soft);flex-direction:column;opacity:0;transform:translateY(-10px) scale(.98);transform-origin:top right;transition:opacity .25s ease,transform .32s cubic-bezier(.2,.75,.25,1),visibility .32s}
  nav.open{visibility:visible;pointer-events:auto;opacity:1;transform:none}
  nav a{display:flex;align-items:center;min-height:48px;padding:7px 12px;border-radius:10px;font-size:15px}
  nav a:active{background:var(--accent-soft)}
  nav a::after{bottom:3px;left:12px}
  .nav-contact{border:0;padding:0;background:none;box-shadow:none}
  .hero{padding-top:45px;grid-template-columns:1fr}
  .eyebrow{font-size:8px;letter-spacing:1.5px}
  h1{font-size:clamp(60px,12vw,86px);letter-spacing:-3.8px}
  .hero-intro{font-size:15px;max-width:400px}
  .hero-location{margin-top:30px;font-size:8px}
  .hero-art{width:min(440px,100%);margin:15px auto 0;min-height:450px;overflow:hidden}
  .code-window{transform:rotate(-3deg)}
  .art-sticker{font-size:110px}
  .code-body{font-size:11px;padding:20px}
  .hero-bottom{padding-top:30px;font-size:8px}
  .hero-bottom>span:first-child{display:none}
  .hero-actions{gap:24px}
  .button{padding:14px 18px;gap:20px}
  .marquee-group{gap:24px;padding-block:20px;padding-inline-end:24px}
  .marquee-group span{font-size:16px}
  .tech-band i{font-size:12px}
  .section{padding-block:65px}
  .about,.journey{grid-template-columns:1fr;gap:15px}
  .about-copy{padding-top:10px}
  .about-signature{margin-top:25px}
  .about-details{gap:35px}
  .section-heading{display:block;margin-bottom:25px}
  .section-heading>p{margin-bottom:0}
  .services{grid-template-columns:1fr}
  .service-card{padding:27px}
  .card-top{margin-bottom:25px}
  .service-card h3 br{display:none}
  .service-card p{min-height:0;max-width:450px}
  .tags{margin-top:20px}
  .project-note{align-items:start;gap:15px;flex-direction:column}
  .skills-grid{grid-template-columns:1fr}
  .journey{gap:40px}
  .timeline{padding-left:5px}
  .credentials-grid{grid-template-columns:1fr;gap:44px;padding-top:32px}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .metric strong{font-size:27px}
  .philosophy-star{font-size:80px;right:-20px;top:35px;opacity:.6}
  .philosophy blockquote{position:relative;font-size:32px}
  .contact{padding:28px 24px}
  .contact-top>span{display:none}
  .contact-top .eyebrow{font-size:8px;line-height:1.7}
  .contact h2{font-size:clamp(40px,8.5vw,62px);letter-spacing:-2px}
  .contact h2>span{font-size:55px;right:0;top:5px}
  .contact-bottom{gap:15px}
  .email-link{font-size:clamp(14px,4.2vw,19px)}
  .contact-bottom .text-link{margin-left:0;width:100%}
  .contact-links{gap:10px 20px}
  .footer{flex-wrap:wrap;gap:20px}
  .footer p{order:3;width:100%;font-size:10px}
}

@media(max-width:480px){
  .shell{width:calc(100% - 28px)}
  .header{height:calc(72px + env(safe-area-inset-top))}
  .logo{font-size:26px}
  .menu-toggle{min-width:88px}
  nav{top:calc(63px + env(safe-area-inset-top));padding:12px}
  .hero{padding-top:32px}
  h1{font-size:clamp(46px,14.2vw,60px);letter-spacing:-3.2px;line-height:1.01;margin-bottom:22px}
  h2{letter-spacing:-2px}
  .hero-intro{font-size:16px;line-height:1.72}
  .hero-actions{gap:16px;flex-wrap:wrap;margin-top:24px}
  .button{min-height:48px;padding-inline:18px}
  .text-link{min-height:44px}
  .hero-location{line-height:1.7;margin-top:24px}
  .hero-art{min-height:370px;margin-top:4px}
  .code-window{top:82px;left:1%;width:98%;transform:rotate(-2.5deg)}
  .window-top{height:38px;padding-inline:12px}
  .window-top small{font-size:8px}
  .code-body{font-size:8.6px;padding:15px 11px;line-height:1.82}
  .floating-tag{font-size:10px;padding:7px 11px}
  .tag-node{top:36px;left:28%}
  .tag-react{top:128px;right:-3px}
  .tag-shopify{bottom:29px}
  .art-sticker{font-size:96px;bottom:3px}
  .build-badge{left:auto;right:7px;bottom:2px;font-size:7px}
  .hero-bottom{padding-top:20px}
  .hero-bottom>span:last-child{display:none}
  .marquee-group{padding-block:17px}
  .section{padding-block:56px}
  .section-heading h2,.about h2,.journey h2{font-size:clamp(34px,10.5vw,46px)}
  .metrics{gap:16px 12px}
  .metric{padding-top:15px}
  .service-card,.skill-group{padding:22px;border-radius:12px}
  .about-details{gap:18px;grid-template-columns:1fr 1fr}
  .experience{padding-left:22px}
  .credential{padding-left:20px}
  .philosophy blockquote{font-size:29px;letter-spacing:-1.5px}
  .contact{padding:24px 18px;border-radius:14px}
  .contact h2{font-size:clamp(38px,12vw,52px);padding-right:28px}
  .contact h2>span{font-size:44px;right:-2px}
  .contact-bottom{align-items:stretch}
  .email-link{width:100%;overflow-wrap:anywhere}
  .copy-email{min-height:44px;padding:10px 14px}
  .contact-links{gap:12px 18px}
  .contact-links a{min-height:32px;display:inline-flex;align-items:center}
  .footer{padding-block:28px calc(28px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  [data-reveal]{opacity:1;transform:none}
}

/* ================================================================
   15. MOTION & INTERACTION
   Pointer parallax, spotlight + tilt hovers, marquee, scroll reveals.
   Every effect collapses under prefers-reduced-motion or a touch pointer.
   ================================================================ */

/* --- scroll progress bar ------------------------------------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:30;background:linear-gradient(90deg,var(--pop-coral),var(--pop-gold),var(--pop-teal),var(--pop-blue),var(--accent),var(--pop-pink));box-shadow:0 0 20px var(--glow)}

/* --- pointer glow that trails the cursor --------------------- */
.pointer-glow{position:fixed;top:0;left:0;z-index:-1;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .6s ease;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent),color-mix(in srgb,var(--pop-pink) 10%,transparent) 42%,transparent 68%)}
.pointer-glow.is-on{opacity:1}

/* --- nav underline that fills on hover, and marks the current section --- */
nav a{position:relative}
nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-9px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--pop-pink));transition:right .35s cubic-bezier(.2,.7,.3,1)}
nav a:hover::after,nav a.is-active::after{right:0}
nav a.is-active{color:var(--accent)}

/* --- hero illustration: pointer parallax layers + scroll drift --- */
.hero-art{translate:0 calc(var(--sp,0) * -34px)}
.art-grid{translate:calc(var(--px,0) * 5px) calc(var(--py,0) * 5px)}
.orbit-field{translate:calc(var(--px,0) * 9px) calc(var(--py,0) * 9px)}
.code-window{translate:calc(var(--px,0) * 17px) calc(var(--py,0) * 17px)}
.tag-node{translate:calc(var(--px,0) * 24px) calc(var(--py,0) * 24px)}
.tag-react{translate:calc(var(--px,0) * 36px) calc(var(--py,0) * 36px)}
.tag-shopify{translate:calc(var(--px,0) * 30px) calc(var(--py,0) * 30px)}
.art-sticker{translate:calc(var(--px,0) * 32px) calc(var(--py,0) * 32px)}
.floating-tag{transition:background .3s,color .3s,box-shadow .3s}
.floating-tag:hover{background:var(--accent);color:var(--accent-ink);box-shadow:0 12px 34px var(--glow)}

/* --- code card: staggered line reveal, breathing caret --- */
.code-body p{opacity:0;animation:codeLine .55s cubic-bezier(.2,.7,.3,1) forwards}
.code-body p:nth-child(1){animation-delay:.3s}
.code-body p:nth-child(2){animation-delay:.42s}
.code-body p:nth-child(3){animation-delay:.54s}
.code-body p:nth-child(4){animation-delay:.66s}
.code-body p:nth-child(5){animation-delay:.78s}
.code-body p:nth-child(6){animation-delay:.9s}
.code-body p:nth-child(7){animation-delay:1.02s}
.code-body p:nth-child(8){animation-delay:1.14s}
.code-body p:nth-child(9){animation-delay:1.26s}
.code-body p:nth-child(10){animation-delay:1.38s}
.code-body p:nth-child(11){animation-delay:1.5s}
@keyframes codeLine{from{opacity:0;translate:-10px 0}to{opacity:1;translate:0 0}}
.cursor{animation:blink 1.15s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}

/* --- headline gradient drifts ------------------------------- */
h1>span,h2>span,blockquote span{background-size:220% 100%;animation:shimmer 10s ease-in-out infinite}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* --- pulsing status dot ------------------------------------- */
.status-dot{animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px var(--accent-ring)}50%{box-shadow:0 0 0 10px transparent}}

/* --- cards: pointer-tracked spotlight + lift + neon edge ---- */
.service-card,.skill-group{position:relative;overflow:hidden;border-radius:9px;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s,box-shadow .35s}
.service-card::after,.skill-group::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(320px 320px at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 22%,transparent),transparent 68%)}
.service-card:hover::after,.skill-group:hover::after{opacity:1}
.service-card:hover,.skill-group:hover{border-color:var(--accent);box-shadow:var(--shadow-md),0 18px 44px var(--glow-soft)}
.service-icon{transition:translate .35s cubic-bezier(.2,.7,.3,1),rotate .35s cubic-bezier(.2,.7,.3,1)}
.service-card:hover .service-icon{translate:0 -4px;rotate:-7deg}
.tags span,.chips span{transition:translate .25s,background .25s,color .25s,border-color .25s,box-shadow .25s}
.tags span:hover{translate:0 -2px}
.chips span:hover{border-color:var(--accent);color:var(--accent);translate:0 -2px}

/* --- buttons: shine sweep + magnetic offset (JS writes --mag-x/y) --- */
.button,.nav-contact,.copy-email{translate:var(--mag-x,0) var(--mag-y,0)}
.button{position:relative;overflow:hidden}
.button::after{content:'';position:absolute;top:-10%;bottom:-10%;width:38%;left:-50%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transition:left .6s cubic-bezier(.2,.7,.3,1)}
.button:hover::after{left:130%}
.button span,.nav-contact span,.copy-email span{transition:translate .25s cubic-bezier(.2,.7,.3,1)}
.button:hover span,.nav-contact:hover span{translate:3px -3px}
.nav-contact{position:relative;overflow:hidden}
.nav-contact::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .35s;background:radial-gradient(120px 120px at var(--mx,50%) var(--my,50%),color-mix(in srgb,#FFFFFF 26%,transparent),transparent 70%)}
.nav-contact:hover::before{opacity:1}

/* --- lists and timeline rows -------------------------------- */
.stack-cloud span,.contact-links a,.cert-list li{transition:translate .25s,color .25s,border-color .25s}
.stack-cloud span:hover,.contact-links a:hover{translate:0 -2px}
.cert-list li:hover{translate:5px 0;color:var(--accent)}
.experience,.credential{transition:translate .3s,border-color .3s}
.experience:hover,.credential:hover{translate:7px 0;border-color:var(--accent)}
.experience:hover:before,.credential:hover:before{background:var(--accent);box-shadow:0 0 0 5px var(--accent-ring)}
.metric strong{transition:translate .3s cubic-bezier(.2,.7,.3,1)}
.metric:hover strong{translate:0 -4px}
.contact-links a:hover{border-color:var(--cta-ink)}

/* --- scroll reveal variants (stagger delays written by JS) --- */
[data-reveal="left"]{transform:translateX(-28px)}
[data-reveal="scale"]{transform:translateY(20px) scale(.962)}
[data-reveal].is-visible{opacity:1;transform:none}

@media(hover:none){
  .pointer-glow{display:none}
}
@media(hover:none) and (pointer:coarse){
  .service-card,.skill-group{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent)}
  .service-card:active,.skill-group:active{border-color:var(--accent);box-shadow:0 12px 34px var(--glow-soft)}
  .button:active,.copy-email:active,.menu-toggle:active{transform:scale(.975)}
  .marquee-track{animation-duration:34s}
}
@media(max-width:900px){
  .pointer-glow{display:none}
  .art-sticker{translate:0 0}
}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .pointer-glow{display:none}
  .progress{background:var(--accent)}
  .hero-art,.art-grid,.orbit-field,.code-window,.tag-node,.tag-react,.tag-shopify,.art-sticker{translate:0 0}
  .code-body p{opacity:1;animation:none}
  .cursor,.status-dot{animation:none}
  h1>span,h2>span,blockquote span{background-size:100% 100%;animation:none}
  .button,.nav-contact,.copy-email{translate:0 0}
}