/* ============================================================
   Alan Prasanth Sam — portfolio
   Shared stylesheet for all pages
   ============================================================ */

:root{
  --bg:#ffffff;
  --bg-alt:#f5f5f7;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#86868b;
  --line:#d2d2d7;
  --line-soft:#e8e8ed;
  --link:#0071e3;
  --link-hover:#0077ed;
  --card:#ffffff;
  --nav-bg:rgba(255,255,255,.72);
  --panel:#e9e9ec;
  --note-bg:#fff8e6;
  --note-line:#e8d9a8;
  --note-ink:#6b5518;
  --radius:20px;
  --doc-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M1 0h6l4 4v9H1z' fill='none' stroke='black' stroke-width='1.2'/%3E%3Cpath d='M7 0v4h4' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E");
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",
         Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --glass:linear-gradient(148deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.28) 46%, rgba(255,255,255,.16) 100%);
  --glass-edge:rgba(255,255,255,.65);
  --glass-inset:rgba(255,255,255,.85);
  --glass-shadow:0 14px 38px -18px rgba(24,24,40,.34);
  --gloss:linear-gradient(158deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.14) 30%, rgba(255,255,255,0) 56%);
  --grid-line:rgba(29,29,31,.055);
  --contour:rgba(29,29,31,.10);
  --sweep:rgba(0,113,227,.035);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
html.dark{
  --bg:#000000;
  --bg-alt:#0a0a0a;
  --ink:#f5f5f7;
  --ink-2:#a1a1a6;
  --ink-3:#86868b;
  --line:#2a2a2c;
  --line-soft:#1c1c1e;
  --link:#2997ff;
  --link-hover:#57adff;
  --card:#101012;
  --nav-bg:rgba(10,10,10,.72);
  --panel:#17171a;
  --note-bg:#1a1608;
  --note-line:#3d3416;
  --note-ink:#d9c48a;
  --glass:linear-gradient(148deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 46%, rgba(255,255,255,.02) 100%);
  --glass-edge:rgba(255,255,255,.16);
  --glass-inset:rgba(255,255,255,.22);
  --glass-shadow:0 18px 44px -20px rgba(0,0,0,.85);
  --gloss:linear-gradient(158deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 56%);
  --grid-line:rgba(245,245,247,.055);
  --contour:rgba(245,245,247,.12);
  --sweep:rgba(41,151,255,.055);
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;scroll-padding-top:60px;
  -webkit-text-size-adjust:100%;
}
html{background:var(--bg)}
body{
  background:transparent;color:var(--ink);
  font-family:var(--sans);
  font-size:17px;line-height:1.55;letter-spacing:-.011em;
  font-optical-sizing:auto;
  font-feature-settings:"cv05" 1,"cv08" 1,"ss03" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:60;height:48px;
  background:var(--nav-bg);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{
  max-width:1040px;margin:0 auto;padding:0 22px;height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.nav-name{
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.nav-links{display:flex;gap:22px;margin-right:34px}
.nav-links a{
  font-size:12px;font-weight:400;letter-spacing:0;
  color:var(--ink-2);text-decoration:none;transition:color .2s;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
@media(max-width:700px){.nav-links{display:none}}

/* pinned to the top-right corner of the page, above the nav */
.controls{
  position:fixed;top:8px;right:16px;z-index:70;
  display:flex;align-items:center;gap:2px;
}
.toggle{
  appearance:none;background:none;border:0;cursor:pointer;
  width:32px;height:32px;border-radius:50%;
  color:var(--ink-2);display:grid;place-items:center;
  transition:color .2s,background .2s,transform .12s;
}
.toggle:active{transform:scale(.9)}
.toggle[aria-pressed="true"]{color:var(--link)}
.toggle:hover{color:var(--ink);background:rgba(128,128,128,.14)}
.toggle:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.toggle svg{width:17px;height:17px;display:none}
.toggle .moon{display:block}
html.dark .toggle .moon{display:none}
html.dark .toggle .sun{display:block}

/* ============ HERO ============ */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:#000;color:#f5f5f7;
  min-height:min(88vh,760px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:120px 22px 130px;
}
.hero.compact{min-height:min(58vh,520px);padding:96px 22px 100px}
.hero-in{position:relative;z-index:3;max-width:820px;margin:0 auto}

/* drifting background, present on every hero */
.layer{position:absolute;inset:0;z-index:0;will-change:transform}
.fill{position:absolute;will-change:transform}
@keyframes driftA{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3.5%,-3%,0) scale(1.09)}
  100%{transform:translate3d(-2.5%,2.5%,0) scale(1.03)}
}
@keyframes driftB{
  0%{transform:translate3d(0,0,0) scale(1.02) rotate(0deg)}
  50%{transform:translate3d(-4%,3.5%,0) scale(1.12) rotate(2.5deg)}
  100%{transform:translate3d(3%,-2%,0) scale(1.05) rotate(-1.5deg)}
}
@keyframes driftC{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(5%,4%,0) scale(.93)}
  100%{transform:translate3d(-3.5%,-3%,0) scale(1.06)}
}
@keyframes driftOrb{
  0%{transform:translate3d(0,0,0) scale(1)}
  25%{transform:translate3d(22%,10%,0) scale(1.14)}
  50%{transform:translate3d(32%,-14%,0) scale(.9)}
  75%{transform:translate3d(10%,-24%,0) scale(1.08)}
  100%{transform:translate3d(-12%,7%,0) scale(1)}
}
.haze{
  inset:-30% -20%;animation:driftA 42s ease-in-out infinite alternate;
  background:
    radial-gradient(58% 62% at 18% 8%, rgba(178,181,186,.9) 0%, rgba(178,181,186,0) 62%),
    radial-gradient(46% 50% at 44% 26%, rgba(150,154,160,.5) 0%, rgba(150,154,160,0) 68%);
}
.glob{
  inset:-35% -25%;animation:driftB 54s ease-in-out infinite alternate;
  background:
    radial-gradient(40% 44% at 62% 44%, rgba(9,9,10,.97) 0%, rgba(9,9,10,0) 66%),
    radial-gradient(52% 40% at 88% 70%, rgba(6,6,7,.98) 0%, rgba(6,6,7,0) 64%),
    radial-gradient(46% 36% at 22% 92%, rgba(8,8,9,.95) 0%, rgba(8,8,9,0) 68%),
    radial-gradient(30% 26% at 47% 78%, rgba(74,77,82,.3) 0%, rgba(74,77,82,0) 70%);
}
.glob2{
  inset:-30% -20%;animation:driftC 37s ease-in-out infinite alternate;
  background:
    radial-gradient(34% 30% at 76% 30%, rgba(5,5,6,.85) 0%, rgba(5,5,6,0) 68%),
    radial-gradient(28% 34% at 12% 62%, rgba(120,124,130,.2) 0%, rgba(120,124,130,0) 70%);
}
.orb{
  left:0;top:20%;width:64vmax;height:52vmax;border-radius:50%;
  animation:driftOrb 31s ease-in-out infinite alternate;
  background:radial-gradient(closest-side,
    rgba(158,164,175,.38) 0%, rgba(158,164,175,.15) 46%, rgba(158,164,175,0) 78%);
}
.hero .grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:var(--grain);background-size:180px 180px;
  opacity:.42;mix-blend-mode:overlay;
}
.hero .veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
}

/* ============ TYPE ============ */
.eyebrow{
  font-size:15px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  font-family:var(--mono);
  color:#a1a1a6;margin-bottom:10px;
}
.hero h1{
  font-size:clamp(40px,7.2vw,80px);font-weight:640;
  line-height:1.03;letter-spacing:-.035em;margin-bottom:20px;
}
.hero .sub{
  font-size:clamp(19px,2.4vw,26px);font-weight:400;line-height:1.38;
  letter-spacing:.004em;color:#d2d2d7;max-width:34em;margin:0 auto;
}
.hero .cta{margin-top:34px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

h2{
  font-size:clamp(30px,4.6vw,48px);font-weight:640;
  line-height:1.07;letter-spacing:-.028em;
}
h3{
  font-size:clamp(22px,2.6vw,28px);font-weight:620;
  line-height:1.16;letter-spacing:-.021em;
}
.lead{
  font-size:clamp(18px,2vw,21px);line-height:1.5;letter-spacing:.004em;
  color:var(--ink-2);
}
p{color:var(--ink-2);font-size:17px;line-height:1.6;letter-spacing:-.004em}
p+p{margin-top:15px}
strong{color:var(--ink);font-weight:600}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}

/* ============ BUTTONS ============ */
.btn{
  display:inline-block;border-radius:980px;padding:11px 22px;
  font-size:15px;font-weight:400;letter-spacing:-.01em;
  background:var(--link);color:#fff;text-decoration:none;transition:background .2s;
}
.btn:hover{background:var(--link-hover);color:#fff;text-decoration:none}
.btn.ghost{
  background:transparent;color:#2997ff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.btn.ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.more{font-size:17px;font-weight:400}
.more::after{content:" ›"}

/* ============ LAYOUT ============ */
.band{padding:100px 22px}
.band.alt{background:color-mix(in srgb, var(--bg-alt) 90%, transparent)}
.band.tight{padding:72px 22px}
.wrap{max-width:1040px;margin:0 auto}
.wrap.wide{max-width:1320px}
.narrow{max-width:700px;margin:0 auto}
.center{text-align:center}
.center p,.center .lead{margin-left:auto;margin-right:auto}
.center .lead{max-width:34em}
.band-head{margin-bottom:52px}
.band-head h2{margin-bottom:16px}

/* ============ MEDIA PANELS ============ */
.media{
  background:var(--panel);border-radius:var(--radius);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:28px;
}
.media span{
  font-size:15px;line-height:1.5;color:var(--ink-3);max-width:78%;
}
.media span b{display:block;color:var(--ink-2);font-weight:600;margin-bottom:4px}
.ar169{aspect-ratio:16/9}
.ar43{aspect-ratio:4/3}
.ar11{aspect-ratio:1/1}
.cap{
  font-size:14px;color:var(--ink-3);margin-top:14px;text-align:center;
  letter-spacing:.004em;
}
figure{margin:0}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:760px){.g2,.g3{grid-template-columns:1fr;gap:26px}}

/* ============ TILES (landing) ============ */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.tiles .tile:first-child{grid-column:1 / -1}
@media(max-width:760px){.tiles{grid-template-columns:1fr}.tiles .tile:first-child{grid-column:auto}}
.tile{
  display:block;background:var(--card);border-radius:var(--radius);
  border:1px solid var(--line-soft);padding:0;overflow:hidden;
  text-decoration:none;color:inherit;transition:transform .4s cubic-bezier(.28,.11,.32,1),box-shadow .4s;
}
.tile:hover{transform:translateY(-4px);box-shadow:0 14px 40px -20px rgba(0,0,0,.35);text-decoration:none}
.tile .tile-media{background:var(--panel);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
.tile .tile-media span{font-size:14px;color:var(--ink-3);max-width:80%}
.tile-body{padding:26px 28px 30px}
.tile-eyebrow{font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:7px}
.tile-title{font-size:24px;font-weight:600;letter-spacing:-.014em;line-height:1.18;margin-bottom:8px}
.tile p{font-size:16px;margin-bottom:14px}
.tile .more{color:var(--link)}

/* ============ BIG QUOTE ============ */
.pull{
  max-width:800px;margin:0 auto;text-align:center;
  font-size:clamp(24px,3.4vw,36px);font-weight:600;
  line-height:1.24;letter-spacing:-.014em;color:var(--ink);
}

/* ============ FACT ROW ============ */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
@media(max-width:700px){.facts{grid-template-columns:1fr;gap:34px}}
.fact .n{font-size:clamp(30px,4vw,44px);font-weight:640;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.fact .l{font-size:15px;color:var(--ink-3);margin-top:6px;line-height:1.4}

/* ============ SPECS ============ */
.specs{max-width:760px;margin:0 auto}
.specs .row{
  display:grid;grid-template-columns:34% 1fr;gap:24px;
  padding:16px 0;border-top:1px solid var(--line-soft);
}
.specs .row:first-child{border-top:0}
.specs .k{font-size:13.5px;color:var(--ink-3);font-family:var(--mono);letter-spacing:.01em;padding-top:2px}
.specs .v{font-size:16px;color:var(--ink)}
@media(max-width:600px){.specs .row{grid-template-columns:1fr;gap:4px}}

/* ============ LIST ============ */
ul.pts{list-style:none;max-width:700px;margin:0 auto}
ul.pts li{
  position:relative;padding-left:22px;margin-bottom:14px;
  color:var(--ink-2);font-size:17px;line-height:1.6;
}
ul.pts li::before{
  content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--ink-3);
}
ul.pts li strong{color:var(--ink)}

/* ============ TIMELINE (glass) ============ */
#timeline{position:relative;overflow:hidden}
/* soft colour wash so the frosted cards have something to refract */
#timeline::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 38% at 12% 12%, rgba(120,160,255,.20) 0%, rgba(120,160,255,0) 70%),
    radial-gradient(40% 34% at 88% 26%, rgba(255,170,120,.17) 0%, rgba(255,170,120,0) 70%),
    radial-gradient(52% 40% at 70% 88%, rgba(170,130,255,.16) 0%, rgba(170,130,255,0) 72%),
    radial-gradient(38% 30% at 26% 74%, rgba(120,220,210,.14) 0%, rgba(120,220,210,0) 72%);
}
html.dark #timeline::before{
  background:
    radial-gradient(46% 38% at 12% 12%, rgba(90,140,255,.24) 0%, rgba(90,140,255,0) 70%),
    radial-gradient(40% 34% at 88% 26%, rgba(255,140,90,.18) 0%, rgba(255,140,90,0) 70%),
    radial-gradient(52% 40% at 70% 88%, rgba(150,100,255,.20) 0%, rgba(150,100,255,0) 72%),
    radial-gradient(38% 30% at 26% 74%, rgba(70,210,200,.15) 0%, rgba(70,210,200,0) 72%);
}
#timeline > .wrap{position:relative;z-index:1}

.tl{position:relative;max-width:820px;margin:0 auto}
.tl::before{
  content:"";position:absolute;left:118px;top:14px;bottom:14px;width:1px;
  background:linear-gradient(180deg,
    transparent 0%, var(--line) 6%, var(--line) 94%, transparent 100%);
}
.tl-item{
  position:relative;display:grid;grid-template-columns:96px 1fr;gap:48px;
  padding-bottom:22px;
}
.tl-item:last-child{padding-bottom:0}

/* glossy bead on the rail */
.tl-item::before{
  content:"";position:absolute;left:112px;top:26px;z-index:2;
  width:13px;height:13px;border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.25) 42%, rgba(255,255,255,0) 60%),
    var(--ink-3);
  box-shadow:0 0 0 4px var(--bg), 0 2px 6px rgba(0,0,0,.28);
}
.tl-item.key::before{
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.3) 42%, rgba(255,255,255,0) 60%),
    var(--link);
  box-shadow:0 0 0 4px var(--bg), 0 2px 10px rgba(0,113,227,.55);
}

.tl-year{
  font-family:var(--mono);font-size:13px;font-weight:500;
  color:var(--ink-3);text-align:right;padding-top:22px;
  white-space:nowrap;letter-spacing:.01em;font-variant-numeric:tabular-nums;
}

/* the glass card */
.tl-body{
  position:relative;overflow:hidden;isolation:isolate;
  padding:22px 26px 24px;border-radius:20px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow), inset 0 1px 0 var(--glass-inset);
  transition:transform .45s cubic-bezier(.28,.11,.32,1), box-shadow .45s, border-color .45s;
}
/* the sheen across the top-left */
.tl-body::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--gloss);
}
.tl-item:hover .tl-body{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.85);
  box-shadow:0 20px 46px -20px rgba(24,24,40,.42), inset 0 1px 0 var(--glass-inset);
}
html.dark .tl-item:hover .tl-body{
  border-color:rgba(255,255,255,.26);
  box-shadow:0 22px 52px -22px rgba(0,0,0,.95), inset 0 1px 0 var(--glass-inset);
}

.tl-kind{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:7px;
}
.tl-item.key .tl-kind{color:var(--link)}
.tl-title{
  font-size:19px;font-weight:620;letter-spacing:-.022em;
  color:var(--ink);line-height:1.28;margin-bottom:4px;
}
.tl-where{font-size:15px;color:var(--ink-2);line-height:1.5}
.tl-note{font-size:15px;color:var(--ink-2);line-height:1.56;margin-top:9px}
.tl-link{font-size:15px;margin-top:10px;display:inline-block}
.tl-links{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:12px}
.tl-links .tl-link{margin-top:0}

/* certificate link */
.cert{
  display:inline-flex;align-items:center;gap:7px;
  appearance:none;cursor:pointer;font-family:var(--mono);
  font-size:13px;font-family:var(--mono);letter-spacing:.01em;
  color:var(--ink-2);text-decoration:none;
  padding:5px 11px 5px 9px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(127,127,127,.06);
  transition:color .2s,border-color .2s,background .2s;
}
.cert::before{
  content:"";width:11px;height:13px;flex:none;
  background:currentColor;
  -webkit-mask:var(--doc-icon) center/contain no-repeat;
          mask:var(--doc-icon) center/contain no-repeat;
}
.cert:hover{
  color:var(--link);border-color:var(--link);
  background:rgba(0,113,227,.08);text-decoration:none;
}
.specs .v .cert{margin-top:8px}

@media(max-width:640px){
  .tl::before,.tl-item::before{display:none}
  .tl-item{grid-template-columns:1fr;gap:8px;padding-bottom:18px}
  .tl-year{text-align:left;padding-top:0;color:var(--ink-2)}
  .tl-body{padding:20px 22px 22px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tl-body{background:var(--card);border-color:var(--line)}
}

/* ============ NOTE ============ */
.note{
  max-width:760px;margin:60px auto 0;background:var(--note-bg);
  border:1px solid var(--note-line);border-radius:14px;padding:22px 26px;
}
.note h4{font-size:15px;font-weight:600;color:var(--note-ink);margin-bottom:8px}
.note ul{margin:0;padding-left:18px}
.note li{font-size:14px;line-height:1.55;color:var(--note-ink);margin-bottom:6px}
.note code{background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px;font-size:.92em}
html.dark .note code{background:rgba(255,255,255,.09)}

/* ============ NEXT / FOOTER ============ */
.next{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  max-width:1040px;margin:0 auto;padding:44px 22px;
  border-top:1px solid var(--line-soft);font-size:16px;
}
footer{
  background:var(--bg-alt);padding:72px 22px 40px;
  border-top:1px solid var(--line-soft);
}
.foot{max-width:1040px;margin:0 auto;font-size:14px;color:var(--ink-3)}

/* Three columns: a closing line with the two actions that matter, then
   the site's own pages, then the contact channels. The old footer was a
   definition list of six labels — accurate, but it asked the reader to
   read a table at the point where they had already decided to act. */
.foot-top{
  display:grid;gap:44px 56px;
  grid-template-columns:1.5fr 1fr 1.2fr;
  padding-bottom:40px;
}
@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr;gap:36px 32px}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr;gap:32px}}

.foot-lead{
  font-size:19px;line-height:1.45;color:var(--ink);
  letter-spacing:-.012em;max-width:26ch;
}
.foot-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

.foot h4{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:16px;
}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot ul a{color:var(--ink-2);text-decoration:none;transition:color .2s}
.foot ul a:hover{color:var(--link);text-decoration:none}
.foot ul a .wa-mark{width:15px;height:15px;color:#25d366;flex:none}
.foot ul li{display:flex;align-items:center;gap:8px}

.foot-base{
  border-top:1px solid var(--line);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:8px 22px;
  align-items:center;justify-content:space-between;
  font-size:13px;
}
.foot-base .made{display:inline-flex;align-items:center;gap:9px}
.foot-base .made::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#2fa84f;
}

/* ============ SCROLL REVEAL ============ */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.28,.11,.32,1),transform .85s cubic-bezier(.28,.11,.32,1);
}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .fill{animation:none !important}
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}


/* ============================================================
   INTERACTION LAYER
   ============================================================ */

/* scroll progress */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:80;
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--link),#8f6dff 60%,#ff9a62);
  pointer-events:none;transition:opacity .3s;
  opacity:var(--po,0);
}

@media (hover:hover) and (pointer:fine){

  /* ---- tiles: pointer tilt + travelling glare ---- */
  .tiles{perspective:1400px}
  .tile{
    transform-style:preserve-3d;
    transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
    transition:transform .5s cubic-bezier(.22,.9,.25,1), box-shadow .5s, border-color .35s;
  }
  .tile.live{transition:transform .12s linear, box-shadow .5s, border-color .35s}
  .tile::after{
    content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
    opacity:0;transition:opacity .4s;border-radius:inherit;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.28), rgba(255,255,255,.05) 42%, transparent 68%);
  }
  .tile:hover::after{opacity:1}
  .tile:hover{border-color:rgba(127,127,127,.42)}
  .tile .tile-media{overflow:hidden}
  .tile .tile-media span{transition:transform .6s cubic-bezier(.22,.9,.25,1)}
  .tile:hover .tile-media span{transform:scale(1.04)}

  /* ---- glass timeline cards react to the cursor ---- */
  .tl-body{
    background-image:
      radial-gradient(340px circle at var(--mx,120%) var(--my,-20%),
        rgba(255,255,255,.34), transparent 62%),
      var(--glass);
  }
  html.dark .tl-body{
    background-image:
      radial-gradient(340px circle at var(--mx,120%) var(--my,-20%),
        rgba(255,255,255,.10), transparent 62%),
      var(--glass);
  }

  /* ---- media panels ---- */
  .media{transition:transform .5s cubic-bezier(.22,.9,.25,1),box-shadow .5s}
  figure:hover .media{transform:translateY(-3px) scale(1.006)}

  /* ---- spec rows ---- */
  .specs .row{
    transition:background .25s,padding-left .25s;
    border-radius:8px;
  }
  .specs .row:hover{background:rgba(127,127,127,.07);padding-left:10px}

  /* ---- bullet points ---- */
  ul.pts li{transition:color .25s,transform .35s}
  ul.pts li:hover{color:var(--ink);transform:translateX(3px)}

  /* ---- nav underline ---- */
  .nav-links a{position:relative}
  .nav-links a::after{
    content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
    background:currentColor;transform:scaleX(0);transform-origin:50%;
    transition:transform .3s cubic-bezier(.22,.9,.25,1);
  }
  .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
}

/* ---- buttons: press + cursor-tracked sheen ---- */
.btn{
  position:relative;overflow:hidden;
  transition:background .2s,transform .12s,box-shadow .3s;
}
.btn::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.3), transparent 60%);
}
.btn:hover::after{opacity:1}
.btn:hover{box-shadow:0 6px 20px -8px rgba(0,113,227,.6)}
.btn:active{transform:scale(.97)}
.btn.ghost:hover{box-shadow:0 6px 20px -10px rgba(255,255,255,.35)}

.cert{transition:color .2s,border-color .2s,background .2s,transform .12s}
.cert:active{transform:scale(.96)}

.more{transition:letter-spacing .3s}
.tile:hover .more{letter-spacing:.01em}

/* ---- copy-to-clipboard ---- */
.copy{
  appearance:none;border:1px solid var(--line);background:transparent;
  color:var(--ink-2);cursor:pointer;border-radius:999px;
  font-family:var(--mono);font-size:12px;padding:3px 10px;margin-left:10px;
  transition:color .2s,border-color .2s,background .2s,transform .12s;
}
.copy:hover{color:var(--link);border-color:var(--link)}
.copy:active{transform:scale(.94)}
.copy.done{color:#2fa84f;border-color:#2fa84f}

/* ---- focus visibility for everything interactive ---- */
a:focus-visible,button:focus-visible,.tile:focus-visible{
  outline:2px solid var(--link);outline-offset:3px;border-radius:6px;
}

@media (prefers-reduced-motion: reduce){
  .tile,.media,.specs .row,ul.pts li,.btn{transition:none !important;transform:none !important}
  .tile::after,.btn::after{display:none}
  .progress{transition:none}
}


/* ============================================================
   WHATSAPP
   ============================================================ */
.wa-fab{
  position:fixed;right:20px;bottom:20px;z-index:75;
  display:inline-flex;align-items:center;gap:0;
  height:52px;padding:0 15px;border-radius:999px;
  background:#25d366;color:#fff;text-decoration:none;
  box-shadow:0 10px 28px -10px rgba(37,211,102,.75), 0 2px 8px rgba(0,0,0,.22);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.9,.25,1), box-shadow .35s, gap .35s, padding .35s;
}
.wa-fab:hover,.wa-fab:focus-visible{
  color:#fff;text-decoration:none;gap:10px;padding:0 20px 0 15px;
  transform:translateY(-3px);
  box-shadow:0 16px 34px -10px rgba(37,211,102,.85), 0 3px 10px rgba(0,0,0,.26);
}
.wa-fab:active{transform:translateY(-1px) scale(.97)}
.wa-fab svg{width:26px;height:26px;flex:none}
.wa-fab .wa-text{
  max-width:0;opacity:0;white-space:nowrap;
  font-size:15px;font-weight:500;letter-spacing:-.01em;
  transition:max-width .35s cubic-bezier(.22,.9,.25,1), opacity .3s;
}
.wa-fab:hover .wa-text,.wa-fab:focus-visible .wa-text{max-width:180px;opacity:1}
@media(max-width:600px){
  .wa-fab{right:14px;bottom:14px;height:48px;padding:0 13px}
  .wa-fab .wa-text{display:none}
}
@media (prefers-reduced-motion: reduce){
  .wa-fab{transition:none}
  .wa-fab:hover{transform:none}
}

/* inline whatsapp link in tables and footers */
.wa-link{display:inline-flex;align-items:center;gap:7px}
.wa-link svg{width:15px;height:15px;flex:none;color:#25d366}


/* ============================================================
   CERTIFICATE LIGHTBOX
   View-only. Note: nothing shown in a browser can be made truly
   un-copyable — this raises friction, it is not protection.
   ============================================================ */
.lb{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  padding:56px 22px 30px;
  background:rgba(10,10,12,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transition:opacity .28s ease;
}
.lb.open{display:flex}
.lb.shown{opacity:1}
.lb-fig{
  margin:0;max-width:min(900px,100%);max-height:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.lb-img{
  max-width:100%;max-height:calc(100vh - 130px);
  border-radius:8px;background:#fff;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
  -webkit-touch-callout:none;pointer-events:none;
  transform:scale(.97);transition:transform .32s cubic-bezier(.22,.9,.25,1);
}
.lb.shown .lb-img{transform:scale(1)}
.lb-cap{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;
  color:#c9c9ce;text-align:center;
}
.lb-close{
  position:absolute;top:14px;right:18px;
  appearance:none;background:rgba(255,255,255,.1);border:0;cursor:pointer;
  width:38px;height:38px;border-radius:50%;color:#fff;font-size:16px;line-height:1;
  transition:background .2s,transform .12s;
}
.lb-close:hover{background:rgba(255,255,255,.2)}
.lb-close:active{transform:scale(.92)}
body.lb-open{overflow:hidden}
@media (prefers-reduced-motion: reduce){
  .lb,.lb-img{transition:none}
  .lb-img{transform:none}
}


/* ============================================================
   PRODUCT GALLERY  (Intime Fire renders)
   ============================================================ */
.prow{margin-top:34px}
.prow-head{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:10px;margin-bottom:18px;border-bottom:1px solid var(--line-soft);
}
.prow-code{font-family:var(--mono);font-size:12px;color:var(--link);letter-spacing:.04em}
.prow-name{font-size:15px;color:var(--ink-2)}

.pcard{
  appearance:none;border:1px solid var(--line-soft);background:var(--panel);
  border-radius:16px;padding:14px 14px 10px;cursor:zoom-in;display:block;width:100%;
  transition:transform .45s cubic-bezier(.22,.9,.25,1),box-shadow .45s,border-color .3s;
}
.pcard img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
}
.pcard figcaption,.pcard .pcode{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  color:var(--ink-3);text-align:center;margin-top:8px;
}
.pcard:hover{
  transform:translateY(-4px);
  border-color:var(--line);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.5);
}
.pcard:hover .pcode{color:var(--ink-2)}
.pcard:focus-visible{outline:2px solid var(--link);outline-offset:3px}

/* single large product plate */
.plate{
  background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:26px;
  display:flex;align-items:center;justify-content:center;
}
.plate img{max-height:520px;width:auto;max-width:100%;-webkit-user-drag:none}
@media(max-width:640px){.plate{padding:16px}.plate img{max-height:360px}}


/* ============================================================
   SLIDER  — scroll-snap carousel, used for renders and drawings
   ============================================================ */
.slider{position:relative}
.sl-track{
  display:flex;gap:20px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 2px 6px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.sl-track::-webkit-scrollbar{display:none}
.sl-track:focus-visible{outline:2px solid var(--link);outline-offset:6px;border-radius:12px}
.sl-item{flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start}
.slider[data-per="2"] .sl-item{flex-basis:calc((100% - 20px)/2)}
@media(max-width:820px){
  .sl-item,.slider[data-per="2"] .sl-item{flex-basis:calc((100% - 20px)/2)}
}
@media(max-width:560px){
  .sl-item,.slider[data-per="2"] .sl-item{flex-basis:84%}
  .sl-track{gap:14px}
}

.sl-nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:14px;
}
.sl-dots{display:flex;gap:7px;flex-wrap:wrap}
.sl-dot{
  appearance:none;border:0;padding:0;cursor:pointer;
  width:7px;height:7px;border-radius:50%;background:var(--line);
  transition:background .25s,transform .25s;
}
.sl-dot[aria-current="true"]{background:var(--link);transform:scale(1.35)}
.sl-arrows{display:flex;gap:8px}
.sl-btn{
  appearance:none;cursor:pointer;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink-2);
  display:grid;place-items:center;font-size:15px;line-height:1;
  transition:color .2s,border-color .2s,background .2s,transform .12s,opacity .2s;
}
.sl-btn:hover:not(:disabled){color:var(--link);border-color:var(--link)}
.sl-btn:active:not(:disabled){transform:scale(.92)}
.sl-btn:disabled{opacity:.32;cursor:default}
.sl-count{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  letter-spacing:.04em;
}

/* white plate for line-art drawings — black lines need a light ground */
.dcard{
  appearance:none;cursor:zoom-in;display:block;width:100%;
  background:#fff;border:1px solid var(--line-soft);border-radius:16px;
  padding:16px 16px 10px;
  transition:transform .45s cubic-bezier(.22,.9,.25,1),box-shadow .45s,border-color .3s;
}
.dcard img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;
  -webkit-user-select:none;user-select:none;-webkit-user-drag:none;
}
.dcard .pcode{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  color:#86868b;text-align:center;margin-top:8px;display:block;
}
.dcard:hover{transform:translateY(-4px);border-color:var(--line);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.45)}
.dcard:focus-visible{outline:2px solid var(--link);outline-offset:3px}


/* ============================================================
   3D MODEL VIEWER
   ============================================================ */
.viewer{
  position:relative;overflow:hidden;
  /* no frame, no ground: the model sits straight on the page */
  background:transparent;border:0;
  aspect-ratio:16/10;
  /* Clamp against the viewport so the pinned block always fits on screen.
     Deliberately well under half the viewport height: the model is one
     element on the page, not the page itself, and the text above and below
     it should stay in view while you scrub. */
  max-height:min(600px, 58vh);
}
@media(max-width:900px){.viewer{aspect-ratio:3/2;max-height:min(480px,50vh)}}
/* short viewports (1366x768 laptops and similar) need a tighter clamp,
   or the pinned block plus the cue runs off the bottom of the screen */
@media(max-height:780px){.viewer{max-height:52vh}}
@media(max-width:640px){.viewer{aspect-ratio:4/3;max-height:min(360px,42vh)}}
.viewer model-viewer{width:100%;height:100%;display:block;--poster-color:transparent}

/* click-to-load gate — nobody should pull 2.4 MB unasked */
.viewer-gate{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:28px;
  background:transparent;
  transition:opacity .4s ease;
}
.viewer-gate.gone{opacity:0;pointer-events:none}
.viewer-gate .cube{width:52px;height:52px;color:var(--ink-3)}
.viewer-gate p{font-size:15px;color:var(--ink-2);max-width:34ch;margin:0}
.viewer-gate .size{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.04em;
}
/* How to drive the 3D viewers. Stated rather than left to be discovered:
   zoom is deliberately on ctrl+scroll so that ordinary scrolling moves the
   page instead of the model, and nobody guesses that unprompted. */
.viewer-hint{
  display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--ink-3);margin-top:12px;
}
.viewer-hint span{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:999px;
  border:1px solid color-mix(in srgb, var(--ink-3) 22%, transparent);
  background:color-mix(in srgb, var(--card) 60%, transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
@media(max-width:640px){
  /* a touch screen has no ctrl key and no right button */
  .viewer-hint span:nth-child(2),
  .viewer-hint span:nth-child(3){display:none}
}
.viewer-spin{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:1;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
}

.viewer-msg{
  max-width:44ch;display:flex;flex-direction:column;gap:8px;
  font-size:14.5px;line-height:1.55;color:var(--ink-2);text-align:center;
}
.viewer-msg strong{color:var(--ink);font-weight:600;font-size:15.5px}
.viewer-msg code{
  font-family:var(--mono);font-size:12.5px;
  background:rgba(127,127,127,.16);padding:2px 6px;border-radius:4px;
  color:var(--ink);white-space:nowrap;
}


/* the viewer is driven entirely by scroll — no controls to style */
.viewer canvas{display:block;width:100%;height:100%;touch-action:pan-y}


/* ---- scroll-driven 3D section ----
   A tall track with a sticky viewer inside it: scrolling the track
   scrubs the assembly apart and turns it. */
.scrolly{position:relative;height:300vh}
.scrolly-stick{
  position:sticky;top:64px;
  display:flex;flex-direction:column;gap:0;
}
@media(max-width:640px){
  .scrolly{height:250vh}
  .scrolly-stick{top:56px}
}
/* Reduced motion keeps the scroll track: scrubbing is direct
   manipulation, not autoplay. Only the turntable spin is dropped,
   and that is handled in viewer.js. */
.scroll-cue{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--ink-3);margin-top:10px;transition:opacity .4s;
}
.scroll-cue.spent{opacity:0}
.scroll-cue svg{width:13px;height:13px}


/* ============================================================
   DOWNLOAD DETERRENCE
   Nothing shown in a browser can be made un-copyable; a screenshot
   always works. This removes the easy paths — right-click, drag out,
   long-press save — and marks images as non-selectable. The résumé is
   deliberately exempt and stays a normal download.
   ============================================================ */
img:not(.free), .plate img, .media img, .pcard img, .dcard img{
  -webkit-user-select:none;user-select:none;
  -webkit-user-drag:none;user-drag:none;
  -webkit-touch-callout:none;
  pointer-events:none;
}
/* the cards themselves stay clickable — only the pixels are inert */
.pcard, .dcard, .sl-item{-webkit-touch-callout:none}


/* ============================================================
   SITE-WIDE MOTION BACKGROUND

   One fixed layer behind every page: a drifting measurement grid,
   four contour lines that draw and redraw themselves, and a slow
   coloured sweep. All of it runs on compositor-friendly properties
   — transform and stroke-dashoffset — so nothing here forces layout,
   and no JavaScript runs per frame.

   Injected once by script.js rather than pasted into five files.
   ============================================================ */
.bgfx{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  /* paint and layout containment only. Size containment would size this
     from its contents rather than its insets, which is not what a
     full-viewport backdrop wants. */
  contain:layout paint style;
}

/* the grid: two sets of hairlines, drifting one cell over a minute */
.bgfx-grid{
  position:absolute;inset:-10% -10% -10% -10%;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:68px 68px;
  animation:gridDrift 64s linear infinite;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 88%);
          mask-image:radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 88%);
}
@keyframes gridDrift{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(68px,68px,0)}
}

/* a heavier cell every eight, so the grid reads as a scale rather than graph paper */
.bgfx-grid::after{
  content:"";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:544px 544px;
}

/* contour lines */
.bgfx-lines{position:absolute;inset:0;width:100%;height:100%}
.bgfx-lines path{
  fill:none;stroke:var(--contour);stroke-width:1.1;
  stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:drawLine 26s ease-in-out infinite;
}
.bgfx-lines path:nth-child(2){animation-duration:34s;animation-delay:-6s;stroke-width:.9}
.bgfx-lines path:nth-child(3){animation-duration:42s;animation-delay:-14s;stroke-width:1.3}
.bgfx-lines path:nth-child(4){animation-duration:30s;animation-delay:-22s;stroke-width:.8}
@keyframes drawLine{
  0%  {stroke-dashoffset:1400}
  45% {stroke-dashoffset:0}
  55% {stroke-dashoffset:0}
  100%{stroke-dashoffset:-1400}
}

/* a slow coloured sweep, so the page is never entirely still */
.bgfx-sweep{
  position:absolute;top:-40%;left:-60%;width:120%;height:180%;
  background:radial-gradient(closest-side, var(--sweep) 0%, transparent 66%);
  animation:sweepPath 48s ease-in-out infinite alternate;
}
@keyframes sweepPath{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(58%,14%,0) scale(1.25)}
  100%{transform:translate3d(96%,-8%,0) scale(1.05)}
}

/* the same grid over the hero, which has its own solid backdrop */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(245,245,247,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,245,247,.05) 1px, transparent 1px);
  background-size:68px 68px;
  animation:gridDrift 64s linear infinite;
  -webkit-mask-image:radial-gradient(100% 80% at 50% 50%, #000 20%, transparent 78%);
          mask-image:radial-gradient(100% 80% at 50% 50%, #000 20%, transparent 78%);
}

@media (prefers-reduced-motion: reduce){
  /* the graphics stay; they simply stop moving */
  .bgfx-grid,.bgfx-sweep,.hero::after{animation:none}
  .bgfx-lines path{animation:none;stroke-dashoffset:0}
}