:root{
  --bg:#0a0c0d;
  --bg-2:#101413;
  --ink:#f6eee3;
  --muted:#aaa095;
  --soft:#746d64;
  --line:rgba(246,238,227,.14);
  --panel:rgba(246,238,227,.06);
  --panel-strong:rgba(246,238,227,.105);
  --accent:#e96d48;
  --accent-2:#a8d879;
  --amber:#d9a450;
  --violet:#b9a4d6;
  --shadow:rgba(4,7,7,.58);
  --max:1320px;
  --radius:24px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  min-height:100vh;
  overflow-x:hidden;
  font-family:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 72% 9%,rgba(233,109,72,.2),transparent 30rem),
    radial-gradient(circle at 16% 36%,rgba(168,216,121,.1),transparent 29rem),
    radial-gradient(circle at 86% 68%,rgba(185,164,214,.08),transparent 24rem),
    linear-gradient(135deg,#080909 0%,#101413 52%,#090b0b 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background-image:
    linear-gradient(rgba(246,238,227,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(246,238,227,.04) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.18) 68%,transparent);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.28;
  background:
    linear-gradient(115deg,transparent 0 38%,rgba(246,238,227,.035) 45%,transparent 52% 100%),
    repeating-linear-gradient(115deg,transparent 0 118px,rgba(168,216,121,.035) 119px,transparent 121px);
  transform:translate3d(calc(var(--scroll-progress,0) * -0.08px),0,0);
  mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.85) 18%,rgba(0,0,0,.4) 76%,transparent);
}

a{color:inherit;text-decoration:none}
img,canvas{display:block;max-width:100%}
button,a{touch-action:manipulation}
::selection{background:var(--accent);color:#140907}
:focus-visible{outline:2px solid rgba(168,216,121,.85);outline-offset:4px}

.skip-link{
  position:fixed;
  left:1rem;
  top:-4rem;
  z-index:100;
  padding:.8rem 1rem;
  background:var(--ink);
  color:#111;
  border-radius:999px;
  transition:top .2s ease;
}
.skip-link:focus{top:1rem}

.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:80;
  opacity:.12;
  mix-blend-mode:screen;
  background-image:url('data:image/svg+xml,%3Csvg viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.86" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.62"/%3E%3C/svg%3E');
}
.cursor-glow{
  position:fixed;
  left:50%;
  top:50%;
  width:31rem;
  height:31rem;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
  opacity:.62;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(233,109,72,.17),rgba(168,216,121,.08) 34%,transparent 68%);
  filter:blur(6px);
}
#global-scene{
  position:fixed;
  inset:0;
  z-index:0;
  width:100vw;
  height:100vh;
  max-width:none;
  pointer-events:none;
  opacity:.34;
  filter:saturate(.86) contrast(1.02) blur(.2px);
  mix-blend-mode:screen;
}
.scroll-progress{
  position:fixed;
  left:0;
  top:0;
  width:0%;
  height:3px;
  z-index:100;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 28px rgba(233,109,72,.66);
}

.site-header{
  position:fixed;
  left:50%;
  top:18px;
  z-index:60;
  width:min(calc(100% - 36px),var(--max));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 14px 12px 18px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(12,15,15,.7);
  box-shadow:0 24px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(24px);
}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:0}
.brand span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:13px;
  color:#16110d;
  background:linear-gradient(135deg,var(--ink),#eebc9e 50%,var(--accent));
  box-shadow:0 16px 42px rgba(233,109,72,.24);
}
.brand small{display:block;color:var(--muted);font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.12em}
.primary-nav{display:flex;align-items:center;gap:4px;padding:5px;border:1px solid rgba(246,238,227,.08);border-radius:17px;background:rgba(246,238,227,.035)}
.primary-nav a{
  padding:10px 12px;
  border-radius:12px;
  color:#cfc4b7;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:color .25s ease,background .25s ease,transform .25s ease;
}
.primary-nav a:hover,.primary-nav a:focus-visible,.primary-nav a[aria-current]{color:var(--ink);background:rgba(246,238,227,.1);transform:translateY(-1px)}
.header-link{
  min-width:max-content;
  padding:13px 18px;
  border-radius:15px;
  background:var(--ink);
  color:#14110e;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  transition:transform .25s ease,box-shadow .25s ease;
}
.header-link:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(233,109,72,.2)}

.section{position:relative;z-index:2;width:min(calc(100% - 40px),var(--max));margin-inline:auto;padding:132px 0;scroll-margin-top:118px}
.section::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:72px;
  height:1px;
  pointer-events:none;
  opacity:.34;
  background:linear-gradient(90deg,transparent,rgba(246,238,227,.16),rgba(168,216,121,.16),transparent);
  transform:scaleX(.4);
  transform-origin:left center;
  transition:transform 1.1s var(--ease),opacity 1.1s ease;
}
.section:has(.reveal.show)::before{transform:scaleX(1);opacity:.52}
.hero{
  min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(460px,.88fr);
  align-items:center;
  gap:54px;
  padding-top:132px;
  padding-bottom:86px;
}
.hero-copy{position:relative;z-index:4}
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
  color:#e9d9c9;
  font-size:12px;
  font-weight:850;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.eyebrow::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 26px rgba(168,216,121,.82);
}
h1,h2,h3{font-family:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;text-wrap:balance;letter-spacing:0}
h1{
  max-width:900px;
  font-size:clamp(4.15rem,9.7vw,10.2rem);
  line-height:.82;
  font-weight:760;
  color:var(--ink);
  text-shadow:0 22px 84px rgba(0,0,0,.58);
}
h2{font-size:clamp(2.45rem,5.25vw,5.25rem);line-height:.94;font-weight:740;color:var(--ink)}
h3{font-size:clamp(1.32rem,1.92vw,1.95rem);line-height:1.04;font-weight:720;color:var(--ink)}
p{max-width:66ch;color:var(--muted);font-size:1.05rem;line-height:1.78;text-wrap:pretty}
.hero-kicker{
  margin-top:28px;
  color:#f0dcc8;
  font-size:clamp(1.04rem,1.8vw,1.34rem);
  font-weight:760;
}
.hero-desc{margin-top:18px;font-size:1.1rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 24px;
  border:1px solid var(--line);
  border-radius:16px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;
}
.btn.primary{background:linear-gradient(135deg,#fff0e5,#ed8a67 62%,#c54c2d);color:#160d08;border-color:rgba(255,255,255,.22);box-shadow:0 18px 52px rgba(233,109,72,.22)}
.btn.secondary{background:rgba(246,238,227,.055);color:var(--ink)}
.btn:hover{transform:translateY(-4px);box-shadow:0 24px 64px rgba(0,0,0,.32)}
.btn:active{transform:translateY(-1px) scale(.98)}
.hero-stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;max-width:760px}
.hero-stack span{
  padding:8px 10px;
  border:1px solid rgba(246,238,227,.12);
  border-radius:10px;
  background:rgba(0,0,0,.22);
  color:#e7ddd1;
  font-size:11px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero-stage{
  position:relative;
  min-height:690px;
  display:grid;
  place-items:center;
  perspective:1300px;
  isolation:isolate;
}
.hero-stage::before{
  content:"";
  position:absolute;
  inset:9% 4% 9% 8%;
  border-radius:42px;
  background:
    radial-gradient(circle at 50% 32%,rgba(246,238,227,.15),transparent 15rem),
    radial-gradient(circle at 46% 72%,rgba(233,109,72,.18),transparent 14rem);
  filter:blur(12px);
  transform:rotateY(-8deg) rotateX(4deg) translateZ(-40px);
  transform-style:preserve-3d;
}
.hero-stage::after{
  content:"";
  position:absolute;
  inset:16% 10% 16% 14%;
  border:1px solid rgba(246,238,227,.12);
  border-radius:38px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 120px rgba(0,0,0,.34);
  transform:rotateY(-9deg) rotateX(4deg);
}
.portrait-shell{
  border:1px solid rgba(246,238,227,.14);
  background:rgba(13,16,16,.7);
  box-shadow:0 28px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(22px);
  transform-style:preserve-3d;
}
.portrait-shell{
  position:relative;
  z-index:4;
  width:min(84%,460px);
  aspect-ratio:4 / 5;
  overflow:hidden;
  border-radius:34px;
  padding:14px;
  background:
    linear-gradient(145deg,rgba(246,238,227,.13),rgba(246,238,227,.035)),
    radial-gradient(circle at var(--mx,50%) var(--my,20%),rgba(233,109,72,.22),transparent 34%);
}
.portrait-shell::before{
  content:"";
  position:absolute;
  inset:14px;
  z-index:2;
  border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(246,238,227,.14),inset 0 -120px 120px rgba(0,0,0,.26);
  pointer-events:none;
}
.portrait-shell::after{
  content:"";
  position:absolute;
  inset:-40%;
  z-index:1;
  background:linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.14) 48%,transparent 56% 100%);
  transform:translateX(-50%) rotate(12deg);
  transition:transform .8s var(--ease);
  pointer-events:none;
}
.portrait-shell:hover::after{transform:translateX(38%) rotate(12deg)}
.portrait-shell img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:24px;
  filter:saturate(.92) contrast(1.09);
}
.ticker-section{
  position:relative;
  z-index:3;
  overflow:hidden;
  border-block:1px solid rgba(246,238,227,.1);
  background:
    radial-gradient(circle at 72% 42%,rgba(168,216,121,.08),transparent 22rem),
    radial-gradient(circle at 34% 58%,rgba(233,109,72,.08),transparent 24rem),
    rgba(246,238,227,.025);
}
.skill-orbit-section{
  display:grid;
  grid-template-columns:minmax(300px,.78fr) minmax(560px,1.2fr);
  align-items:center;
  gap:42px;
}
.skill-orbit-copy{
  display:grid;
  gap:18px;
}
.skill-orbit-copy h2{
  max-width:720px;
}
.skill-orbit{
  position:relative;
  width:min(68vw,720px);
  aspect-ratio:1;
  justify-self:end;
  border-radius:50%;
  transform-style:preserve-3d;
  perspective:1600px;
  isolation:isolate;
}
.skill-orbit::before,
.skill-orbit::after{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:50%;
  pointer-events:none;
}
.skill-orbit::before{
  background:
    radial-gradient(circle,rgba(246,238,227,.12),transparent 18%),
    radial-gradient(circle at 50% 50%,transparent 0 42%,rgba(168,216,121,.12) 43%,transparent 45%),
    radial-gradient(circle at 50% 50%,transparent 0 63%,rgba(233,109,72,.11) 64%,transparent 66%);
  filter:blur(.2px);
  transform:rotateX(62deg) rotateZ(-12deg);
  opacity:.82;
}
.skill-orbit::after{
  inset:18%;
  border:1px solid rgba(246,238,227,.08);
  box-shadow:0 0 72px rgba(168,216,121,.12),inset 0 0 54px rgba(233,109,72,.08);
  transform:rotateX(64deg) rotateZ(18deg);
}
.orbit-core{
  position:absolute;
  left:50%;
  top:50%;
  z-index:6;
  display:grid;
  place-items:center;
  width:178px;
  aspect-ratio:1;
  padding:18px;
  border:1px solid rgba(246,238,227,.18);
  border-radius:50%;
  color:#fff3e7;
  text-align:center;
  background:
    linear-gradient(145deg,rgba(246,238,227,.14),rgba(246,238,227,.04)),
    radial-gradient(circle at 42% 24%,rgba(255,255,255,.18),transparent 42%);
  box-shadow:0 30px 90px rgba(0,0,0,.42),0 0 46px rgba(233,109,72,.16);
  transform:translate(-50%,-50%) translateZ(70px);
  animation:skillCorePulse 5.4s ease-in-out infinite;
}
.orbit-core span,
.orbit-core small{
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(246,238,227,.7);
}
.orbit-core strong{
  font-size:1.22rem;
  line-height:1.05;
}
.orbit-ring{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(246,238,227,.12);
  border-radius:50%;
  transform:translate(-50%,-50%) rotateX(64deg) rotateZ(var(--rz,0deg));
  pointer-events:none;
}
.ring-a{width:42%;height:42%;--rz:18deg;animation:skillRingSpin 28s linear infinite}
.ring-b{width:64%;height:64%;--rz:-18deg;animation:skillRingSpin 38s linear infinite reverse}
.ring-c{width:86%;height:86%;--rz:42deg;animation:skillRingSpin 48s linear infinite}
.orbit-tag{
  position:absolute;
  left:50%;
  top:50%;
  z-index:5;
  display:grid;
  place-items:center;
  width:clamp(82px,7vw,112px);
  aspect-ratio:1;
  padding:12px;
  border:1px solid rgba(246,238,227,.16);
  border-radius:50%;
  color:#f3eadc;
  text-align:center;
  background:
    radial-gradient(circle at 36% 22%,rgba(255,255,255,.13),transparent 38%),
    linear-gradient(145deg,rgba(18,20,18,.82),rgba(8,10,10,.54));
  box-shadow:0 18px 46px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);
  font-size:clamp(.65rem,.72vw,.82rem);
  font-weight:900;
  line-height:1.12;
  letter-spacing:.02em;
  opacity:0;
  transform:translate(-50%,-50%) rotate(var(--angle)) translateX(calc(var(--radius) * .7)) rotate(var(--counter-angle)) translateZ(0) scale(.68);
  transition:
    opacity .55s ease var(--delay),
    transform .85s cubic-bezier(.16,1,.25,1) var(--delay),
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
  will-change:transform,opacity;
}
.orbit-tag:nth-of-type(4n + 1){border-color:rgba(168,216,121,.28)}
.orbit-tag:nth-of-type(4n + 2){border-color:rgba(233,109,72,.28)}
.orbit-tag:nth-of-type(4n + 3){border-color:rgba(196,177,255,.22)}
.skill-orbit.show .orbit-tag,
.section-active .skill-orbit .orbit-tag{
  opacity:1;
  transform:translate(-50%,-50%) rotate(var(--angle)) translateX(var(--radius)) rotate(var(--counter-angle)) translateZ(var(--lift)) scale(1);
}
.section-active .skill-orbit .orbit-tag{
  animation:skillTagFloat 4.8s ease-in-out infinite;
  animation-delay:calc(var(--delay) + .85s);
}
.orbit-tag:hover{
  z-index:8;
  border-color:rgba(246,238,227,.4);
  background:
    radial-gradient(circle at 36% 22%,rgba(255,255,255,.2),transparent 38%),
    linear-gradient(145deg,rgba(233,109,72,.24),rgba(8,10,10,.64));
  box-shadow:0 22px 56px rgba(0,0,0,.42),0 0 26px rgba(168,216,121,.18);
}

.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.about-body{display:grid;gap:18px;padding-top:42px}
.stats-grid{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.stats-grid article{
  position:relative;
  overflow:hidden;
  min-height:188px;
  padding:26px;
  border:1px solid rgba(246,238,227,.11);
  border-radius:21px;
  background:linear-gradient(145deg,rgba(246,238,227,.08),rgba(246,238,227,.025));
  box-shadow:0 24px 80px rgba(0,0,0,.28);
  transition:transform .26s ease,border-color .26s ease;
}
.stats-grid article::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:
    linear-gradient(120deg,transparent 0 35%,rgba(246,238,227,.13) 50%,transparent 65% 100%),
    radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(168,216,121,.12),transparent 38%);
  opacity:0;
  transform:translateX(-40%);
  transition:opacity .35s ease,transform .7s var(--ease);
  pointer-events:none;
}
.stats-grid article:hover::before{opacity:1;transform:translateX(40%)}
.stats-grid article:hover{transform:translateY(-5px);border-color:rgba(233,109,72,.28)}
.stats-grid strong{display:block;font-family:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;font-size:clamp(2.75rem,4.8vw,4.75rem);line-height:.9;color:#fff0e4;font-variant-numeric:tabular-nums}
.stats-grid span{display:block;margin-top:16px;color:var(--muted);font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}

.section-title{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:38px}
.section-title .eyebrow{margin-bottom:0}
.section-title h2{max-width:760px;text-align:right}
.expertise-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;perspective:1600px}
.expertise-card{
  position:relative;
  grid-column:span 4;
  min-height:290px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  padding:26px;
  border:1px solid rgba(246,238,227,.12);
  border-radius:var(--radius);
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(168,216,121,.13),transparent 36%),
    linear-gradient(150deg,rgba(246,238,227,.082),rgba(246,238,227,.024));
  box-shadow:0 28px 92px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06);
  transform-style:preserve-3d;
  transition:transform .18s ease,border-color .25s ease,box-shadow .25s ease;
}
.expertise-card::after,.project-card::after{
  content:"";
  position:absolute;
  inset:18px;
  z-index:0;
  border-radius:calc(var(--radius) - 8px);
  pointer-events:none;
  opacity:.22;
  background:
    linear-gradient(rgba(246,238,227,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(246,238,227,.08) 1px,transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(0,0,0,.8),transparent 56%);
  transform:translateZ(18px);
  transition:opacity .25s ease;
}
.expertise-card:hover::after,.project-card:hover::after{opacity:.36}
.expertise-card:nth-child(2),.expertise-card:nth-child(5){transform:translateY(28px)}
.expertise-card span{
  position:absolute;
  top:22px;
  right:24px;
  color:rgba(246,238,227,.22);
  font-size:3.8rem;
  font-weight:780;
  line-height:1;
}
.expertise-card h3,.expertise-card p,.expertise-card .chips{transform:translateZ(38px)}
.expertise-card p{margin-top:12px}
.expertise-card:hover{border-color:rgba(168,216,121,.28);box-shadow:0 38px 118px rgba(0,0,0,.48)}

.project-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:stretch;perspective:1600px}
.project-card{
  position:relative;
  grid-column:span 2;
  min-height:340px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  padding:28px;
  border:1px solid rgba(246,238,227,.12);
  border-radius:var(--radius);
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(233,109,72,.18),transparent 34%),
    linear-gradient(150deg,rgba(246,238,227,.09),rgba(246,238,227,.025));
  box-shadow:0 30px 96px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06);
  transform-style:preserve-3d;
  transition:transform .18s ease,border-color .25s ease,box-shadow .25s ease;
}
.project-card::before,.expertise-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(125deg,transparent 0 38%,rgba(255,255,255,.12) 48%,transparent 58% 100%);
  transform:translateX(-120%);
  transition:transform .72s ease;
}
.project-card:hover::before,.expertise-card:hover::before{transform:translateX(120%)}
.project-card:hover{border-color:rgba(233,109,72,.34);box-shadow:0 38px 122px rgba(0,0,0,.5)}
.project-card.tall{min-height:450px}
.project-card.wide{grid-column:span 3}
.project-index{position:absolute;top:22px;right:24px;color:rgba(246,238,227,.24);font-family:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;font-size:4.4rem;font-weight:760;line-height:1}
.project-mark{position:relative;width:max-content;margin-bottom:auto;padding:10px 12px;border-radius:11px;background:rgba(0,0,0,.24);font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.project-mark.red{color:#ee8968}.project-mark.green{color:#b9df8d}.project-mark.white{color:#fff1e4}.project-mark.amber{color:#d9b15f}.project-mark.violet{color:#c6b0df}
.project-card h3,.project-card p,.project-card .chips,.project-card .project-mark{transform:translateZ(42px)}
.project-card p{margin-top:14px;color:#bdb3a8}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chips span{padding:8px 10px;border:1px solid rgba(246,238,227,.11);border-radius:10px;background:rgba(0,0,0,.2);color:#eaded0;font-size:11px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}

.systems-section{padding-top:96px}
.system-layout{display:grid;grid-template-columns:minmax(420px,.95fr) 1fr;gap:42px;align-items:center;margin-top:42px}
.system-map{
  position:relative;
  min-height:560px;
  overflow:hidden;
  perspective:1100px;
  transform-style:preserve-3d;
  border:1px solid rgba(246,238,227,.12);
  border-radius:34px;
  background:
    radial-gradient(circle at 50% 50%,rgba(233,109,72,.15),transparent 17rem),
    radial-gradient(circle at 28% 22%,rgba(168,216,121,.1),transparent 12rem),
    radial-gradient(circle at 76% 72%,rgba(185,164,214,.08),transparent 12rem),
    linear-gradient(145deg,rgba(246,238,227,.076),rgba(246,238,227,.022));
  box-shadow:0 34px 112px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06);
  transform:rotateX(0deg) rotateY(0deg);
  transition:transform .9s var(--ease),border-color .45s ease,box-shadow .45s ease;
}
.system-map::before{
  content:"";
  position:absolute;
  inset:8%;
  border:1px dashed rgba(246,238,227,.14);
  border-radius:50%;
  transform:rotateX(64deg) rotateZ(-16deg);
  animation:mapRingSpin 32s linear infinite;
}
.system-map::after{
  content:"";
  position:absolute;
  inset:16%;
  border:1px solid rgba(168,216,121,.12);
  border-radius:50%;
  transform:rotateX(68deg) rotateZ(22deg) translateZ(-28px);
  filter:drop-shadow(0 0 24px rgba(168,216,121,.12));
  animation:orbitPulse 8s ease-in-out infinite;
}
.system-map.show{
  transform:rotateX(4deg) rotateY(-7deg);
  border-color:rgba(246,238,227,.18);
  box-shadow:0 44px 132px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);
}
.map-orbit{
  position:absolute;
  left:50%;
  top:50%;
  z-index:1;
  width:68%;
  aspect-ratio:1;
  border:1px solid rgba(246,238,227,.13);
  border-radius:50%;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateX(66deg) rotateZ(var(--rz,0deg));
  box-shadow:0 0 38px rgba(168,216,121,.08);
  animation:mapOrbitSpin 22s linear infinite;
}
.orbit-two{width:54%;--rz:64deg;animation-duration:28s;animation-direction:reverse;border-color:rgba(233,109,72,.14)}
.orbit-three{width:82%;--rz:-38deg;animation-duration:38s;border-color:rgba(185,164,214,.11)}
.map-orbit::before{
  content:"";
  position:absolute;
  left:18%;
  top:-4px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 22px rgba(168,216,121,.75);
}
.map-orbit::after{
  content:"";
  position:absolute;
  right:24%;
  bottom:-3px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 18px rgba(233,109,72,.75);
}
.map-node{
  position:absolute;
  z-index:2;
  display:grid;
  place-items:center;
  min-width:96px;
  min-height:54px;
  padding:12px 16px;
  border:1px solid rgba(246,238,227,.14);
  border-radius:16px;
  background:rgba(10,13,13,.76);
  color:#f6eee3;
  font-weight:900;
  letter-spacing:.05em;
  box-shadow:0 18px 54px rgba(0,0,0,.42);
  backdrop-filter:blur(18px);
  opacity:0;
  transform:translate3d(0,18px,0) scale(.94);
  transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .3s ease,box-shadow .3s ease;
}
.system-map.show .map-node{opacity:1;transform:translate3d(0,0,46px) scale(1);animation:mapFloat 5.6s ease-in-out infinite}
.system-map.show .map-node.core{transform:translate3d(-50%,-50%,86px) scale(1);animation:corePulse 4.8s ease-in-out infinite}
.map-node:hover{border-color:rgba(168,216,121,.34);box-shadow:0 24px 72px rgba(0,0,0,.48),0 0 30px rgba(168,216,121,.12)}
.map-node.core{left:50%;top:50%;min-width:132px;min-height:82px;transform:translate(-50%,-50%);background:linear-gradient(135deg,#f6eee3,#ed8a67);color:#17100c}
.map-node.grab{left:12%;top:17%}.map-node.shopee{right:12%;top:18%}.map-node.pos{left:16%;bottom:17%}.map-node.cms{right:16%;bottom:18%}
.system-map.show .map-node.grab{animation-delay:.1s}.system-map.show .map-node.shopee{animation-delay:.35s}.system-map.show .map-node.pos{animation-delay:.55s}.system-map.show .map-node.cms{animation-delay:.8s}
.map-line{
  position:absolute;
  left:50%;
  top:50%;
  width:36%;
  height:1px;
  transform-origin:left center;
  z-index:1;
  overflow:hidden;
  background:linear-gradient(90deg,rgba(246,238,227,.08),rgba(168,216,121,.44),rgba(233,109,72,.08));
  box-shadow:0 0 20px rgba(168,216,121,.24);
  opacity:.72;
}
.map-line::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(246,238,227,.85),transparent);
  transform:translateX(-100%);
  animation:lineScan 3.2s ease-in-out infinite;
}
.line-a{transform:rotate(217deg)}.line-b{transform:rotate(322deg)}.line-c{transform:rotate(145deg)}.line-d{transform:rotate(38deg)}
.line-b::before{animation-delay:.55s}.line-c::before{animation-delay:1.1s}.line-d::before{animation-delay:1.65s}
.map-packet{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  width:9px;
  height:9px;
  border-radius:50%;
  color:#f6eee3;
  background:#f6eee3;
  box-shadow:0 0 20px rgba(246,238,227,.72);
  opacity:0;
  transform:translate(-50%,-50%);
}
.map-packet::after{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:50%;
  border:1px solid currentColor;
  opacity:.35;
  animation:packetHalo 1.8s ease-out infinite;
}
.system-map.show .map-packet{opacity:1;animation:packetA 3.8s var(--ease) infinite}
.system-map.show .packet-b{color:var(--accent-2);background:var(--accent-2);box-shadow:0 0 22px rgba(168,216,121,.8);animation-name:packetB;animation-delay:.6s}
.system-map.show .packet-c{color:var(--accent);background:var(--accent);box-shadow:0 0 22px rgba(233,109,72,.8);animation-name:packetC;animation-delay:1.2s}
.system-map.show .packet-d{color:var(--violet);background:var(--violet);box-shadow:0 0 22px rgba(185,164,214,.75);animation-name:packetD;animation-delay:1.8s}
.strength-list{display:grid;gap:16px}
.strength-list article{
  position:relative;
  overflow:hidden;
  padding:24px 24px 24px 76px;
  border:1px solid rgba(246,238,227,.12);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(246,238,227,.075),rgba(246,238,227,.025));
  box-shadow:0 22px 76px rgba(0,0,0,.3);
}
.strength-list article::before{
  content:"";
  position:absolute;
  left:-20%;
  top:0;
  width:28%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(246,238,227,.09),transparent);
  transform:skewX(-12deg);
  animation:panelSweep 7s ease-in-out infinite;
}
.strength-list article:nth-child(2)::before{animation-delay:1.2s}
.strength-list article:nth-child(3)::before{animation-delay:2.4s}
.strength-list span{
  position:absolute;
  left:22px;
  top:24px;
  color:var(--accent-2);
  font-size:13px;
  font-weight:900;
  letter-spacing:.12em;
}
.strength-list p{margin-top:10px}

.experience-section{padding-top:96px}
.timeline{
  position:relative;
  max-width:960px;
  margin-inline:auto;
  padding:34px;
  border:1px solid rgba(246,238,227,.12);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(246,238,227,.075),rgba(246,238,227,.025));
  box-shadow:0 28px 92px rgba(0,0,0,.34);
}
.line-item{position:relative;padding:10px 0 34px 42px;border-left:1px solid rgba(246,238,227,.14)}
.line-item:last-child{padding-bottom:8px}
.line-item::before{content:"";position:absolute;left:-7px;top:18px;width:13px;height:13px;border-radius:50%;background:var(--accent);box-shadow:0 0 28px rgba(233,109,72,.82)}
.line-item time{color:#efc2a9;font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.line-item h3{margin-top:10px;margin-bottom:10px;font-size:1.5rem}

.contact-section{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-bottom:112px}
.contact-panel{
  display:grid;
  gap:14px;
  padding:24px;
  border:1px solid rgba(246,238,227,.13);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(246,238,227,.09),rgba(246,238,227,.03));
  box-shadow:0 28px 92px rgba(0,0,0,.4);
  transform-style:preserve-3d;
}
.contact-panel a,.contact-panel span{
  display:flex;
  align-items:center;
  min-height:66px;
  padding:0 18px;
  border:1px solid rgba(246,238,227,.1);
  border-radius:16px;
  background:rgba(0,0,0,.2);
  color:#f3e5d6;
  font-weight:820;
  transition:background .25s ease,transform .25s ease,border-color .25s ease;
}
.contact-panel a:hover{background:rgba(233,109,72,.13);border-color:rgba(233,109,72,.4);transform:translateX(4px)}
.site-footer{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;width:min(calc(100% - 40px),var(--max));margin:0 auto;padding:28px 0 36px;border-top:1px solid rgba(246,238,227,.1);color:var(--soft);font-size:13px}

.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.show{opacity:1;transform:translateY(0)}
.delay-1{transition-delay:.12s}.delay-2{transition-delay:.22s}
body.fullpage-enabled main > section.section-active .reveal.show{
  animation:sectionContentIn .96s cubic-bezier(.16,1,.25,1) both;
}
body.fullpage-enabled main > section.section-active .section-title.reveal.show,
body.fullpage-enabled main > section.section-active .section-copy.reveal.show,
body.fullpage-enabled main > section.section-active .skill-orbit-copy.reveal.show,
body.fullpage-enabled main > section.section-active .contact-copy.reveal.show{
  animation-name:sectionTitleIn;
}
body.fullpage-enabled main > section.section-active .expertise-card.reveal.show,
body.fullpage-enabled main > section.section-active .project-card.reveal.show,
body.fullpage-enabled main > section.section-active .stats-grid.reveal.show,
body.fullpage-enabled main > section.section-active .timeline.reveal.show,
body.fullpage-enabled main > section.section-active .contact-panel.reveal.show,
body.fullpage-enabled main > section.section-active .system-map.reveal.show,
body.fullpage-enabled main > section.section-active .strength-list.reveal.show{
  animation-name:sectionTileIn;
}

@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes sectionContentIn{0%{opacity:0;transform:translate3d(0,42px,-70px) rotateX(8deg);filter:blur(12px)}62%{opacity:1;filter:blur(0)}100%{opacity:1;transform:translate3d(0,0,0) rotateX(0);filter:blur(0)}}
@keyframes sectionTitleIn{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translate3d(-32px,24px,-80px) rotateY(-8deg);filter:blur(14px)}58%{opacity:1;clip-path:inset(0 0 0 0);filter:blur(0)}100%{opacity:1;clip-path:inset(0 0 0 0);transform:translate3d(0,0,0) rotateY(0);filter:blur(0)}}
@keyframes sectionTileIn{0%{opacity:0;transform:translate3d(0,58px,-120px) rotateX(14deg) scale(.94);filter:blur(14px) saturate(.72)}66%{opacity:1;filter:blur(0) saturate(1)}100%{opacity:1;transform:translate3d(0,0,0) rotateX(0) scale(1);filter:blur(0) saturate(1)}}
@keyframes skillCorePulse{0%,100%{filter:saturate(1);box-shadow:0 30px 90px rgba(0,0,0,.42),0 0 46px rgba(233,109,72,.16)}50%{filter:saturate(1.16);box-shadow:0 34px 110px rgba(0,0,0,.52),0 0 64px rgba(168,216,121,.2)}}
@keyframes skillRingSpin{to{transform:translate(-50%,-50%) rotateX(64deg) rotateZ(calc(var(--rz,0deg) + 360deg))}}
@keyframes skillTagFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes floaty{0%,100%{transform:translateY(0) translateZ(60px)}50%{transform:translateY(-16px) translateZ(60px)}}
@keyframes orbitPulse{0%,100%{opacity:.36;transform:rotateX(68deg) rotateZ(-18deg) scale(.96)}50%{opacity:.7;transform:rotateX(68deg) rotateZ(12deg) scale(1.04)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes mapRingSpin{to{transform:rotateX(64deg) rotateZ(344deg)}}
@keyframes mapOrbitSpin{to{transform:translate(-50%,-50%) rotateX(66deg) rotateZ(calc(var(--rz,0deg) + 360deg))}}
@keyframes mapFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes corePulse{0%,100%{filter:saturate(1);box-shadow:0 18px 54px rgba(0,0,0,.42),0 0 0 rgba(233,109,72,0)}50%{filter:saturate(1.12);box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 38px rgba(233,109,72,.18)}}
@keyframes lineScan{0%,18%{transform:translateX(-100%);opacity:0}45%{opacity:1}78%,100%{transform:translateX(100%);opacity:0}}
@keyframes packetA{0%{transform:translate(-50%,-50%) rotate(217deg) translateX(0);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translate(-50%,-50%) rotate(217deg) translateX(210px);opacity:0}}
@keyframes packetB{0%{transform:translate(-50%,-50%) rotate(322deg) translateX(0);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translate(-50%,-50%) rotate(322deg) translateX(210px);opacity:0}}
@keyframes packetC{0%{transform:translate(-50%,-50%) rotate(145deg) translateX(0);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translate(-50%,-50%) rotate(145deg) translateX(210px);opacity:0}}
@keyframes packetD{0%{transform:translate(-50%,-50%) rotate(38deg) translateX(0);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translate(-50%,-50%) rotate(38deg) translateX(210px);opacity:0}}
@keyframes packetHalo{0%{transform:scale(.45);opacity:.42}100%{transform:scale(1.6);opacity:0}}
@keyframes panelSweep{0%,38%{transform:translateX(0) skewX(-12deg);opacity:0}48%{opacity:1}70%,100%{transform:translateX(520%) skewX(-12deg);opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}
@media (max-width:1120px){
  .primary-nav{display:none}
  .hero{grid-template-columns:1fr;gap:20px}
  .hero-stage{min-height:580px;max-width:760px;width:100%;margin-inline:auto}
  .skill-orbit-section{grid-template-columns:1fr;gap:26px}
  .skill-orbit{justify-self:center;width:min(86vw,660px)}
  .section-title{display:block}.section-title h2{text-align:left;margin-top:18px}
  .project-card,.project-card.wide{grid-column:span 3}
  .expertise-card{grid-column:span 6}
  .expertise-card:nth-child(2),.expertise-card:nth-child(5){transform:none}
  .system-layout{grid-template-columns:1fr}
}
@media (max-width:760px){
  .cursor-glow{display:none}
  .site-header{top:10px;width:min(calc(100% - 20px),var(--max));border-radius:20px}.brand small{display:none}.header-link{padding-inline:14px}
  .section{width:min(calc(100% - 28px),var(--max));padding:88px 0}
  #global-scene{opacity:.32}
  .hero{padding-top:112px}.hero-stage{min-height:470px}.hero-stage::before{inset:7% 0 5% 0;transform:none}
  .hero-stage::after{inset:11% 3% 10% 3%;transform:none;border-radius:28px}
  h1{font-size:clamp(3.35rem,18vw,5.8rem)}
  h2{font-size:clamp(2.2rem,11vw,3.8rem)}
  p{font-size:1rem}
  .hero-stack{max-width:100%}
  .portrait-shell{width:min(92%,360px);border-radius:28px;padding:11px}.portrait-shell img,.portrait-shell::before{border-radius:19px}
  .skill-orbit-section{gap:20px}
  .skill-orbit-copy{gap:12px}
  .skill-orbit{
    width:100%;
    aspect-ratio:auto;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
    padding:10px 0 0;
    border-radius:0;
  }
  .skill-orbit::before,
  .skill-orbit::after,
  .orbit-ring,
  .orbit-core{display:none}
  .orbit-tag,
  .skill-orbit.show .orbit-tag,
  .section-active .skill-orbit .orbit-tag{
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    min-height:72px;
    padding:9px;
    opacity:1;
    transform:none;
    animation:none;
    font-size:.66rem;
  }
  .about-grid,.contact-section{grid-template-columns:1fr;gap:26px}.about-body{padding-top:0}.stats-grid{grid-template-columns:1fr 1fr}
  .project-grid,.expertise-grid{grid-template-columns:1fr}.project-card,.project-card.wide,.project-card.tall,.expertise-card{grid-column:auto;min-height:310px}
  .project-index{font-size:3.35rem}.timeline{padding:24px 22px}.line-item{padding-left:30px}
  .system-map{min-height:440px}.system-layout{gap:26px}.strength-list article{padding-left:24px}.strength-list span{position:static;display:block;margin-bottom:10px}
  .system-map.show{transform:none}
  .map-node{min-width:82px;font-size:.9rem}.map-node.core{min-width:112px;min-height:72px}.map-line{width:32%}
  .map-orbit{width:72%}
}
@media (max-width:500px){
  .hero-actions{display:grid}.btn{width:100%}.stats-grid{grid-template-columns:1fr}.site-footer{display:grid}.contact-panel a,.contact-panel span{font-size:.92rem;word-break:break-word}
  .hero-stage{min-height:390px}
  .portrait-shell{width:min(92%,310px)}
  .skill-orbit{grid-template-columns:repeat(4,minmax(0,1fr))}
  .orbit-tag,
  .skill-orbit.show .orbit-tag,
  .section-active .skill-orbit .orbit-tag{min-height:60px;padding:7px;font-size:.56rem}
  .system-map{min-height:360px}
  .map-node.grab{left:6%;top:16%}.map-node.shopee{right:6%;top:17%}.map-node.pos{left:8%;bottom:16%}.map-node.cms{right:8%;bottom:17%}
}

html.fullpage-enabled,
body.fullpage-enabled{
  width:100%;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}
body.fullpage-enabled main{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  perspective:1500px;
  transform-style:preserve-3d;
}
body.fullpage-enabled main > section{
  position:absolute;
  inset:0;
  width:min(calc(100% - 40px),var(--max));
  height:100dvh;
  margin:auto;
  padding:118px 0 62px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
  transform:translate3d(0,80px,-220px) rotateX(9deg) scale(.92);
  filter:blur(16px) saturate(.72);
  transition:
    opacity .82s var(--ease),
    transform .98s cubic-bezier(.16,1,.25,1),
    filter .82s var(--ease);
  will-change:opacity,transform,filter;
}
body.fullpage-enabled main > section.section-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate3d(0,0,0) rotateX(0) scale(1);
  filter:blur(0) saturate(1);
}
body.fullpage-enabled main > section.section-before{
  transform:translate3d(0,-86px,-260px) rotateX(-10deg) scale(.94);
}
body.fullpage-enabled main > section.section-after{
  transform:translate3d(0,86px,-260px) rotateX(10deg) scale(.94);
}
body.fullpage-enabled main > section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 20% 18%,rgba(246,238,227,.08),transparent 18rem),
    linear-gradient(115deg,transparent 0 42%,rgba(246,238,227,.06) 50%,transparent 58% 100%);
  transform:translateX(-18%) skewX(-12deg);
  transition:opacity .7s ease,transform 1s var(--ease);
}
body.fullpage-enabled main > section.section-active::after{
  opacity:1;
  transform:translateX(18%) skewX(-12deg);
}
body.fullpage-enabled .site-footer{display:none}
body.fullpage-enabled .scroll-progress{
  transition:width .75s var(--ease);
}
body.fullpage-enabled .section::before{
  top:100px;
}
body.fullpage-enabled .hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(390px,.72fr);
  align-items:center;
  gap:38px;
  min-height:100dvh;
}
body.fullpage-enabled .hero-stage{
  min-height:calc(100dvh - 190px);
}
body.fullpage-enabled h1{
  font-size:clamp(4rem,8.2vw,8.7rem);
}
body.fullpage-enabled h2{
  font-size:clamp(2.25rem,4.8vw,4.6rem);
}
body.fullpage-enabled p{
  line-height:1.62;
}
body.fullpage-enabled .ticker-section{
  width:min(calc(100% - 40px),var(--max));
  display:grid;
  grid-template-columns:minmax(310px,.78fr) minmax(540px,1.2fr);
  align-items:center;
  align-content:center;
  gap:38px;
  border:0;
  background:transparent;
}
body.fullpage-enabled .skill-orbit{
  width:min(56vw,680px);
}
body.fullpage-enabled .skill-orbit-copy p{
  max-width:52ch;
}
body.fullpage-enabled .about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-content:center;
}
body.fullpage-enabled .stats-grid article{
  min-height:145px;
  padding:22px;
}
body.fullpage-enabled .stats-grid strong{
  font-size:clamp(2.45rem,4.2vw,4rem);
}
body.fullpage-enabled .section-title{
  margin-bottom:22px;
}
body.fullpage-enabled .expertise-grid,
body.fullpage-enabled .project-grid{
  gap:14px;
}
body.fullpage-enabled .expertise-card{
  min-height:220px;
  padding:22px;
}
body.fullpage-enabled .expertise-card p,
body.fullpage-enabled .project-card p{
  font-size:.94rem;
  line-height:1.5;
}
body.fullpage-enabled .expertise-card h3,
body.fullpage-enabled .project-card h3{
  font-size:clamp(1.08rem,1.45vw,1.45rem);
}
body.fullpage-enabled .project-card{
  min-height:242px;
  padding:24px;
}
body.fullpage-enabled .project-card.tall{
  min-height:296px;
}
body.fullpage-enabled .project-index{
  font-size:3.4rem;
}
body.fullpage-enabled .chips{
  margin-top:14px;
}
body.fullpage-enabled .chips span{
  padding:7px 9px;
  font-size:10px;
}
body.fullpage-enabled .systems-section{
  display:grid;
  align-content:center;
}
body.fullpage-enabled .system-layout{
  margin-top:24px;
  grid-template-columns:minmax(400px,.92fr) 1fr;
}
body.fullpage-enabled .system-map{
  min-height:430px;
}
body.fullpage-enabled .strength-list article{
  padding-block:20px;
}
body.fullpage-enabled .experience-section,
body.fullpage-enabled .contact-section{
  display:grid;
  align-content:center;
}
body.fullpage-enabled .timeline{
  max-width:1040px;
}
.section-dots{
  position:fixed;
  right:24px;
  top:50%;
  z-index:70;
  display:grid;
  gap:12px;
  transform:translateY(-50%);
}
.section-dot{
  width:10px;
  height:10px;
  border:1px solid rgba(246,238,227,.42);
  border-radius:50%;
  background:rgba(246,238,227,.08);
  cursor:pointer;
  transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.section-dot:hover,
.section-dot.is-active{
  transform:scale(1.45);
  border-color:rgba(168,216,121,.8);
  background:var(--accent-2);
  box-shadow:0 0 22px rgba(168,216,121,.5);
}
.section-label{
  position:fixed;
  left:24px;
  bottom:22px;
  z-index:70;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(246,238,227,.65);
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  pointer-events:none;
}
.section-label::before{
  content:"";
  width:34px;
  height:1px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}

@media (max-width:1120px){
  body.fullpage-enabled main > section{
    padding:104px 0 42px;
  }
  body.fullpage-enabled main > section{
    overflow:auto;
    scrollbar-width:none;
  }
  body.fullpage-enabled main > section::-webkit-scrollbar{display:none}
  body.fullpage-enabled .hero,
  body.fullpage-enabled .ticker-section,
  body.fullpage-enabled .about-grid,
  body.fullpage-enabled .system-layout,
  body.fullpage-enabled .contact-section{
    grid-template-columns:1fr;
  }
  body.fullpage-enabled .skill-orbit{
    width:min(70vw,430px);
  }
  body.fullpage-enabled .hero-stage{
    min-height:38dvh;
  }
  body.fullpage-enabled .portrait-shell{
    width:min(58%,340px);
  }
  body.fullpage-enabled .project-grid,
  body.fullpage-enabled .expertise-grid{
    grid-template-columns:repeat(2,1fr);
  }
  body.fullpage-enabled .project-card,
  body.fullpage-enabled .project-card.wide,
  body.fullpage-enabled .project-card.tall,
  body.fullpage-enabled .expertise-card{
    grid-column:auto;
    min-height:250px;
  }
}
@media (max-width:760px){
  body.fullpage-enabled main > section{
    width:min(calc(100% - 28px),var(--max));
    padding:108px 0 44px;
  }
  body.fullpage-enabled h1{font-size:clamp(3.25rem,17vw,5.4rem)}
  body.fullpage-enabled h2{font-size:clamp(2rem,10vw,3.5rem)}
  body.fullpage-enabled .hero-stage{display:none}
  body.fullpage-enabled .ticker-section{
    align-content:start;
    gap:16px;
  }
  body.fullpage-enabled .skill-orbit-copy p{
    display:none;
  }
  body.fullpage-enabled .skill-orbit{
    width:100%;
    max-height:calc(100dvh - 320px);
    overflow:auto;
    scrollbar-width:none;
  }
  body.fullpage-enabled .skill-orbit::-webkit-scrollbar{display:none}
  body.fullpage-enabled .about-grid,
  body.fullpage-enabled .project-grid,
  body.fullpage-enabled .expertise-grid{
    grid-template-columns:1fr;
  }
  body.fullpage-enabled .project-grid,
  body.fullpage-enabled .expertise-grid{
    max-height:calc(100dvh - 245px);
    overflow:auto;
    padding-right:4px;
    scrollbar-width:none;
  }
  body.fullpage-enabled .project-grid::-webkit-scrollbar,
  body.fullpage-enabled .expertise-grid::-webkit-scrollbar{display:none}
  body.fullpage-enabled .project-card,
  body.fullpage-enabled .project-card.wide,
  body.fullpage-enabled .project-card.tall,
  body.fullpage-enabled .expertise-card{
    min-height:255px;
  }
  body.fullpage-enabled .system-map{
    min-height:310px;
  }
  .section-dots{
    right:10px;
    gap:9px;
  }
  .section-dot{
    width:8px;
    height:8px;
  }
  .section-label{
    display:none;
  }
}