/* ================================================================
   Xruseon — Applied AI systems. Built to operate.
   Shared design tokens and base components. Load experience.css
   after this file for the progressive spatial layout, responsive
   rules, reduced-motion behavior, and print presentation.
   ================================================================ */

/* ---------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------- */
:root{
  /* Ink (cool charcoal neutral scale) */
  --ink-950:#0B0C0E; --ink-900:#121417; --ink-850:#16191D; --ink-800:#1B1F24;
  --ink-700:#24282F; --ink-600:#353B44; --ink-500:#4C535D; --ink-400:#6B727D;
  --ink-300:#9198A2; --ink-200:#C2C7CE; --ink-150:#D7DBE0; --ink-100:#E6E9ED;
  --ink-75:#EFF1F4;  --ink-50:#F5F6F8;

  /* Paper (warm off-white surfaces) */
  --paper:#F8F6F1; --paper-dim:#F0ECE3; --paper-deep:#E7E2D6; --white:#FFFFFF;

  /* Cyan (interactive / technology accent) */
  --cyan-800:#0A4F5E; --cyan-700:#0E6E82; --cyan-600:#128CA4; --cyan-500:#16AEC9;
  --cyan-400:#3DC4DB; --cyan-300:#79D8E8; --cyan-200:#B3EAF2; --cyan-100:#DEF5F9;

  /* Gold (brand "gold standard" accent) */
  --gold-800:#6E561A; --gold-700:#8A6E1E; --gold-600:#B08F2A; --gold-500:#C6A33E;
  --gold-400:#D8BE5E; --gold-300:#E6D38C; --gold-200:#F0E4BB; --gold-100:#F8F2DC;

  /* Semantic hues */
  --green-600:#1E8A5A; --green-500:#25A86E; --green-100:#DCF2E7;
  --amber-600:#B5821A; --amber-500:#DFA32B; --amber-100:#FBEED0;
  --red-600:#C5453B;   --red-500:#E05A4E;   --red-100:#FBE1DE;

  /* Semantic aliases */
  --surface-page:var(--paper);
  --surface-card:var(--white);
  --surface-sunken:var(--paper-dim);
  --surface-inverse:var(--ink-900);
  --surface-overlay:rgba(11,12,14,.55);
  --text-strong:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-400);
  --text-subtle:var(--ink-300);
  --text-inverse:var(--paper);
  --text-link:var(--cyan-700);
  --border-subtle:var(--ink-100);
  --border-default:var(--ink-150);
  --border-strong:var(--ink-300);
  --border-inverse:rgba(255,255,255,.12);
  --hairline:rgba(11,12,14,.08);
  --accent:var(--cyan-500);
  --accent-on:var(--white);
  --focus-ring:rgba(22,174,201,.45);
  --brand:var(--gold-500);

  /* Type */
  --font-display:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --font-text:'Hanken Grotesk','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --leading-relaxed:1.65;

  /* Spacing / radius / layout */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem;
  --space-9:4rem; --space-10:5rem; --space-11:6rem; --space-12:8rem;
  --radius-xs:3px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
  --radius-xl:20px; --radius-pill:999px;
  --container-md:880px; --container-xl:1280px;
  --header-h:64px;

  /* Elevation */
  --shadow-xs:0 1px 2px rgba(11,12,14,.06);
  --shadow-sm:0 1px 2px rgba(11,12,14,.06),0 2px 6px rgba(11,12,14,.05);
  --shadow-md:0 2px 4px rgba(11,12,14,.05),0 8px 20px rgba(11,12,14,.08);
  --shadow-lg:0 4px 10px rgba(11,12,14,.06),0 18px 40px rgba(11,12,14,.12);
  --shadow-xl:0 8px 24px rgba(11,12,14,.10),0 32px 64px rgba(11,12,14,.16);
  --glow-cyan:0 0 0 1px rgba(22,174,201,.35),0 6px 24px rgba(22,174,201,.22);
  --ring:0 0 0 3px var(--focus-ring);

  /* Motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:360ms; --dur-slower:600ms;

  /* Signature gradients */
  --grad-gold:linear-gradient(135deg,var(--gold-400) 0%,var(--gold-600) 100%);
  --grad-ink:linear-gradient(160deg,var(--ink-850) 0%,var(--ink-950) 100%);
  --grad-cyan-edge:linear-gradient(90deg,var(--cyan-500),var(--gold-500));
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);
  overflow-x:hidden;overflow-x:clip}
/* No overflow-x on body: with html carrying overflow-x, a body value would no longer
   propagate to the viewport and would turn body into a scroll container — which breaks
   position:sticky for every act stage. Horizontal clipping lives on html (clip) only. */
body{
  margin:0;font-family:var(--font-text);font-size:1rem;line-height:var(--leading-relaxed);
  color:var(--text-body);background:var(--ink-950);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:500;line-height:1.1;
  letter-spacing:-.015em;color:var(--text-strong);text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.18em}
img,svg{display:block;max-width:100%}
button{font-family:inherit}
[hidden]{display:none !important}
ul{margin:0;padding:0;list-style:none}
::selection{background:rgba(22,174,201,.3);color:inherit}
:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--ring);border-radius:4px}
@media (forced-colors:active){
  :focus-visible{outline:2px solid Highlight;outline-offset:2px}
}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink-900);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--radius-md) 0;font:600 14px var(--font-text)}
.skip-link:focus{left:0}

/* ---------------------------------------------------------------
   3. Shared type & atoms
   --------------------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:.7em;font-family:var(--font-mono);font-weight:500;
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);line-height:1}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--grad-gold);flex:none}
.eyebrow--inverse{color:rgba(255,255,255,.62)}
.section-title{font:500 clamp(30px,3.2vw,44px)/1.1 var(--font-display);letter-spacing:-.025em;
  color:var(--ink-950);margin-top:16px;max-width:680px}
.section-lead{font:400 16px/1.6 var(--font-text);color:var(--text-body);margin-top:12px;max-width:560px}

/* Buttons */
.btn{--_bg:var(--accent);--_fg:var(--accent-on);--_bd:transparent;
  font-family:var(--font-text);font-weight:600;line-height:1;display:inline-flex;align-items:center;
  justify-content:center;gap:.55em;border:1.5px solid var(--_bd);background:var(--_bg);color:var(--_fg);
  border-radius:var(--radius-md);cursor:pointer;text-decoration:none;white-space:nowrap;
  font-size:.875rem;padding:0 var(--space-4);height:42px;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn .ico{width:1.15em;height:1.15em;transition:transform var(--dur-base) var(--ease-out)}
.btn:hover .ico--arrow{transform:translateX(3px)}
.btn--sm{font-size:.875rem;padding:0 var(--space-3);height:34px}
.btn--lg{font-size:1rem;padding:0 var(--space-5);height:52px;border-radius:var(--radius-lg)}
.btn--block{display:flex;width:100%}
.btn--primary{--_bg:var(--cyan-700);--_fg:var(--accent-on)}
.btn--primary:hover{--_bg:var(--cyan-800)}
.btn--gold{--_bg:transparent;--_fg:var(--gold-700);--_bd:var(--gold-500)}
.btn--gold:hover{--_bg:var(--gold-100);--_bd:var(--gold-600)}
.btn--inverse{--_bg:var(--paper);--_fg:var(--ink-900);--_bd:transparent}
.btn--inverse:hover{--_bg:#fff}
.btn--gold-on-ink{--_bg:transparent;--_fg:var(--gold-300);--_bd:var(--gold-500)}
.btn--gold-on-ink:hover{--_bg:rgba(198,163,62,.12);--_bd:var(--gold-400)}
/* Magnetic offset via custom props so :active press feedback still composes. */
.magnetic{transform:translate(var(--mx,0px),var(--my,0px))}
.magnetic:active{transform:translate(var(--mx,0px),calc(var(--my,0px) + 1px))}

/* Cards */
.card{position:relative;height:100%;background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out)}
.card--lg{padding:var(--space-6)}
.card--md{padding:var(--space-5)}
.card--interactive{cursor:pointer}
.card--interactive:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--border-default)}
.card--interactive:active{transform:translateY(0);box-shadow:var(--shadow-sm)}
.card--featured::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad-gold);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.badge{display:inline-flex;align-items:center;gap:.4em;font:500 12px var(--font-mono);letter-spacing:.04em;
  text-transform:uppercase;padding:.32em .7em;border-radius:var(--radius-sm);
  background:var(--gold-100);color:var(--gold-700);border:1px solid transparent}
.arrow-up{color:var(--ink-400);transition:transform var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.arrow-up svg{width:18px;height:18px}
.card--interactive:hover .arrow-up{transform:translate(3px,-3px);color:var(--cyan-600)}

/* ---------------------------------------------------------------
   5. Header (fixed, chrome switches with the section beneath it)
   --------------------------------------------------------------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:80;height:var(--header-h);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  background:rgba(11,12,14,.5);color:var(--paper);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .35s ease,color .35s ease,border-color .35s ease}
[data-chrome="light"] .site-header{background:rgba(248,246,241,.72);color:var(--ink-900);
  border-bottom-color:rgba(11,12,14,.08)}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 28px}
.brand{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand:hover{text-decoration:none}
.brand img{width:26px;height:26px}
.brand span{font:500 17px/1 var(--font-display);letter-spacing:0}
.nav-desktop{display:flex;align-items:center;gap:26px}
.nav-link{font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:inherit;opacity:.72;transition:opacity var(--dur-fast) var(--ease-out)}
.nav-link:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.nav-link.active{opacity:1}
.header-cta{display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:var(--radius-md);color:inherit;cursor:pointer}
.nav-toggle svg{width:22px;height:22px}
.nav-mobile{display:none;flex-direction:column;gap:4px;position:fixed;top:var(--header-h);left:0;right:0;
  z-index:79;background:var(--ink-900);border-bottom:1px solid rgba(255,255,255,.1);
  padding:14px 24px 20px;box-shadow:var(--shadow-lg)}
.nav-mobile.open{display:flex}
.nav-mobile a{font:500 13px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.8);padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.06)}
.nav-mobile a:hover{color:#fff;text-decoration:none}

/* ---------------------------------------------------------------
   6. Progress rail
   --------------------------------------------------------------- */
.rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:16px;align-items:flex-end}
.rail-item{display:flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;
  color:rgba(255,255,255,.55);transition:color .3s ease}
.rail-item:hover{text-decoration:none;color:rgba(255,255,255,.8)}
[data-chrome="light"] .rail-item{color:rgba(11,12,14,.52)}
[data-chrome="light"] .rail-item:hover{color:rgba(11,12,14,.7)}
.rail-item.is-active{color:#3DC4DB}
[data-chrome="light"] .rail-item.is-active{color:#0E6E82}
.rail-label{font:500 9px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transition:opacity .3s ease}
.rail-item.is-active .rail-label,.rail-item:hover .rail-label{opacity:1}
.rail-num{font:500 10px/1 var(--font-mono)}
.rail-tick{display:block;width:14px;height:1px;background:currentColor;transition:width .3s ease}
.rail-item.is-active .rail-tick{width:24px}

/* ---------------------------------------------------------------
   7. Acts — shared stage scaffolding
   --------------------------------------------------------------- */
.act{position:relative}
.act:focus,.act:focus-visible{outline:none;box-shadow:none}
.act--hero{height:240vh}
.act--who{height:300vh}
.act--services{height:320vh}
.act--work{height:280vh}
.act--cto{height:250vh}
.act--process{height:300vh}
.act--contact{height:230vh}
/* overflow:clip (with hidden fallback) so focus navigation can't scroll the stage internally */
.stage{position:sticky;top:0;height:100vh;overflow:hidden;overflow:clip;perspective:1400px}
.stage--gradink{background:var(--grad-ink)}
.stage--ink950{background:var(--ink-950)}
.stage--paper{background:var(--paper)}
.stage--sunken{background:var(--surface-sunken);border-top:1px solid var(--hairline)}

/* ---------------------------------------------------------------
   8. Act 01 · Signal — hero
   --------------------------------------------------------------- */
.a1-floor{position:absolute;left:-40vw;right:-40vw;bottom:-48vh;height:115vh;
  transform:rotateX(74deg);transform-origin:50% 100%;pointer-events:none;will-change:background-position,opacity;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    radial-gradient(circle,rgba(22,174,201,.4) 1.2px,transparent 1.9px);
  background-size:56px 56px,56px 56px,56px 56px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 4%,black 62%);
  mask-image:linear-gradient(to bottom,transparent 4%,black 62%)}
.a1-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 45% at 62% 60%,rgba(22,174,201,.09),transparent 70%)}
.a1-grid{position:absolute;inset:0;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  max-width:1240px;margin:0 auto;gap:40px;
  padding:clamp(70px,11vh,96px) 48px clamp(20px,4.5vh,48px)}
.a1-copy{will-change:transform,opacity}
.hero-title{font:500 min(clamp(42px,4.8vw,74px),10vh)/1.04 var(--font-display);letter-spacing:-.03em;
  color:#fff;margin:clamp(12px,2.2vh,22px) 0 0}
.hero-lead{font:400 min(18px,3vh)/1.55 var(--font-text);color:rgba(255,255,255,.72);
  margin:clamp(12px,2.2vh,22px) 0 0;max-width:520px}
.hero-sub{font:400 min(15px,2.6vh)/1.55 var(--font-text);color:rgba(255,255,255,.52);
  margin:clamp(8px,1.6vh,14px) 0 0;max-width:500px}
.hero-actions{display:flex;gap:12px;margin-top:clamp(18px,3.5vh,34px);flex-wrap:wrap}
.hero-proof{font:500 10px/1.8 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:clamp(14px,2.6vh,30px) 0 0}
.a1-xwrap{position:relative;height:min(64vh,560px);display:flex;align-items:center;justify-content:center;
  will-change:transform,opacity}
.a1-halo{position:absolute;width:min(32vw,430px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(198,163,62,.14),transparent 62%)}
.a1-ring{position:absolute;width:min(30vw,440px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);transform:rotateX(72deg)}
.a1-ring2{position:absolute;width:min(23vw,330px);aspect-ratio:1;border-radius:50%;
  border:1px dashed rgba(198,163,62,.35);transform:rotateX(72deg)}
.a1-x{width:clamp(220px,22vw,330px);height:auto;animation:xr-float 7s ease-in-out infinite;
  filter:drop-shadow(0 18px 60px rgba(198,163,62,.32))}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-cue-label{font:500 10px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.scroll-cue-track{display:block;width:1px;height:34px;background:rgba(255,255,255,.15);
  overflow:hidden;position:relative}
.scroll-cue-dot{position:absolute;left:0;top:0;width:1px;height:12px;background:var(--cyan-400);
  animation:xr-cue 1.8s ease-in-out infinite}

/* ---------------------------------------------------------------
   9. Act 02 · Who — fly-through
   --------------------------------------------------------------- */
.a2-dots{position:absolute;inset:-20%;pointer-events:none;opacity:.5;will-change:background-position;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1.4px),
    radial-gradient(rgba(22,174,201,.22) 1px,transparent 1.5px);
  background-size:74px 74px,122px 122px;background-position:0 0,37px 55px}
.a2-label{position:absolute;top:clamp(72px,11vh,96px);left:0;right:0;display:flex;justify-content:center}
.a2-stack{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(30px,6vh,52px);padding:0 48px;text-align:center}
.a2-stmt{transform-style:preserve-3d;will-change:transform,opacity}
.a2-line{font:500 clamp(40px,4.6vw,66px)/1.05 var(--font-display);letter-spacing:-.03em;color:#fff}
.a2-sub{font:500 12px/1.6 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan-400);margin-top:12px}

/* ---------------------------------------------------------------
   10. Act 03 · Services — 3D rail
   --------------------------------------------------------------- */
.a3-head{max-width:1240px;margin:0 auto;padding:clamp(76px,13vh,118px) 48px 0}
.a3-rail{position:absolute;left:0;top:46%;display:flex;gap:28px;padding:0 8vw;
  transform-style:preserve-3d;will-change:transform}
.svc-card{width:360px;flex:none;will-change:transform,opacity}
.svc-icon{width:44px;height:44px;border-radius:var(--radius-md);background:var(--cyan-100);
  color:var(--cyan-700);display:flex;align-items:center;justify-content:center}
.svc-icon svg{width:22px;height:22px}
.svc-num{font:500 12px/1 var(--font-mono);letter-spacing:.08em;color:var(--text-subtle);margin:18px 0 8px}
.svc-card h3,.svc-card .card h3{font:500 20px/1.25 var(--font-display);letter-spacing:-.015em;
  color:var(--ink-900);margin:0}
.svc-card .card p{font:400 15px/1.55 var(--font-text);color:var(--text-body);margin:10px 0 0}
.a3-hint{position:absolute;bottom:30px;left:0;right:0;display:flex;justify-content:center}
.a3-hint span{font:500 10px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-subtle)}

/* ---------------------------------------------------------------
   11. Act 04 · Featured work
   --------------------------------------------------------------- */
.a4-marquee{position:absolute;top:clamp(68px,11vh,84px);left:-6vw;right:-6vw;
  transform:rotate(-1.6deg);overflow:hidden;pointer-events:none}
.a4-track{display:flex;white-space:nowrap;width:max-content;animation:xr-marquee 30s linear infinite}
.a4-set{display:flex;align-items:center;gap:40px;padding-right:40px}
.a4-word{font:500 clamp(42px,8vh,64px)/1 var(--font-display);letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px var(--ink-200)}
.a4-dot{width:8px;height:8px;border-radius:50%;background:var(--gold-500);display:block;flex:none}
.a4-content{max-width:1240px;margin:0 auto;
  padding:calc(clamp(68px,11vh,84px) + clamp(42px,8vh,64px) + 30px) 48px 0}
.a4-head .section-title{font-size:min(clamp(28px,3vw,40px),5.5vh);margin-top:clamp(8px,1.6vh,14px)}
.work-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(12px,2.2vh,22px);
  margin-top:clamp(10px,2vh,30px);align-items:stretch}
.work-feature,.work-mini{transform-style:preserve-3d;will-change:transform,opacity}
.work-col{display:flex;flex-direction:column;gap:22px}
.work-col .work-mini{flex:1}
.work-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.work-feature h3{font:500 min(30px,5vh)/1.1 var(--font-display);letter-spacing:-.025em;
  color:var(--ink-900);margin:clamp(10px,2vh,20px) 0 0}
.work-mini h3{font:500 min(21px,3.6vh)/1.15 var(--font-display);letter-spacing:-.02em;
  color:var(--ink-900);margin:0}
.work-mini .arrow-up svg{width:16px;height:16px}
.work-tag{font:500 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--cyan-700);margin:clamp(6px,1.2vh,10px) 0 0}
.work-mini .work-tag{font-size:11px;margin-top:clamp(5px,1vh,8px)}
.work-feature .card p{font:400 min(15px,2.6vh)/1.55 var(--font-text);color:var(--text-body);
  margin:clamp(8px,1.6vh,14px) 0 0;max-width:460px}
.work-mini .card p{font:400 min(14px,2.4vh)/1.5 var(--font-text);color:var(--text-body);
  margin:clamp(6px,1.2vh,10px) 0 0}
.work-demo{font:500 10px/1.7 var(--font-mono) !important;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-subtle) !important;margin-top:clamp(8px,1.6vh,16px) !important;max-width:none !important}
.work-mini .work-demo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-top:clamp(6px,1.2vh,12px) !important}

/* ---------------------------------------------------------------
   12. Act 05 · Fractional CTO
   --------------------------------------------------------------- */
.a5-grid{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:56px;
  align-items:center;max-width:1240px;margin:0 auto;
  padding:clamp(70px,11vh,96px) 48px clamp(20px,4.5vh,48px)}
.a5-copy{will-change:transform,opacity}
.a5-copy h2{font:500 clamp(30px,3.4vw,46px)/1.08 var(--font-display);letter-spacing:-.025em;
  color:#fff;margin:18px 0 0}
.a5-p1{font:400 17px/1.6 var(--font-text);color:rgba(255,255,255,.72);margin:18px 0 0;max-width:470px}
.a5-p2{font:400 15px/1.6 var(--font-text);color:rgba(255,255,255,.58);margin:14px 0 0;max-width:470px}
.a5-actions{margin-top:30px}
.a5-panel{background:var(--ink-850);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-xl);
  padding:34px;box-shadow:var(--shadow-xl);will-change:transform,opacity}
.a5-fit-label{font:500 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-400);margin-bottom:22px}
.checklist{display:flex;flex-direction:column;gap:16px}
.checklist li{display:flex;align-items:flex-start;gap:12px}
.checklist .ck{flex:none;width:24px;height:24px;border-radius:6px;background:rgba(22,174,201,.16);
  color:var(--cyan-400);display:flex;align-items:center;justify-content:center;margin-top:1px}
.checklist .ck svg{width:14px;height:14px}
.checklist .t{font:400 16px/1.45 var(--font-text);color:rgba(255,255,255,.88)}

/* ---------------------------------------------------------------
   13. Act 06 · Process
   --------------------------------------------------------------- */
.a6-wrap{max-width:1240px;margin:0 auto;padding:clamp(76px,13vh,118px) 48px 0}
.proc-track{position:relative;margin-top:clamp(40px,8vh,84px);border-top:1px solid var(--border-default)}
.proc-line{position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--grad-gold);
  transform:scaleX(0);transform-origin:left;will-change:transform}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.proc-step{position:relative;padding:clamp(24px,4.5vh,38px) 28px 0 0}
.proc-step:last-child{padding-right:0}
.proc-dot{position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;
  background:var(--white);border:2px solid var(--border-strong);
  transition:border-color .3s ease,background .3s ease,box-shadow .3s ease}
.proc-num{font:500 13px/1 var(--font-mono);letter-spacing:.1em;color:var(--text-subtle);
  transition:color .3s ease}
.proc-step h3{font:500 24px/1.1 var(--font-display);letter-spacing:-.02em;color:var(--ink-900);
  margin:14px 0 0}
.proc-step p{font:400 15px/1.55 var(--font-text);color:var(--text-body);margin:10px 0 0;padding-right:8px}
.a6-close{font:400 17px/1.6 var(--font-text);color:var(--text-muted);
  margin:clamp(32px,7vh,72px) 0 0;max-width:620px}

/* ---------------------------------------------------------------
   14. Act 07 · Contact — final CTA
   --------------------------------------------------------------- */
.a7-floor{position:absolute;left:-40vw;right:-40vw;bottom:-50vh;height:110vh;
  transform:rotateX(74deg);transform-origin:50% 100%;pointer-events:none;will-change:background-position;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),
    radial-gradient(circle,rgba(198,163,62,.3) 1.2px,transparent 1.9px);
  background-size:56px 56px,56px 56px,56px 56px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 6%,black 65%);
  mask-image:linear-gradient(to bottom,transparent 6%,black 65%)}
.a7-x{position:absolute;left:50%;top:50%;width:min(46vw,560px);height:auto;
  transform:translate(-50%,-50%);opacity:.08;pointer-events:none;will-change:transform}
.a7-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;
  padding:clamp(70px,11vh,96px) 48px clamp(20px,4.5vh,48px)}
.a7-tick{display:block;width:56px;height:2px;background:var(--grad-gold)}
.a7-content h2{font:500 clamp(38px,4.6vw,62px)/1.05 var(--font-display);letter-spacing:-.03em;
  color:#fff;margin:26px 0 0;max-width:760px}
.a7-body{font:400 18px/1.6 var(--font-text);color:rgba(255,255,255,.7);margin:20px 0 0;max-width:560px}
.a7-btns{display:flex;gap:12px;justify-content:center;margin-top:clamp(18px,3.5vh,34px);flex-wrap:wrap}
.a7-mail{font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-top:30px}
.a7-mail:hover{color:rgba(255,255,255,.8)}

/* ---------------------------------------------------------------
   15. Principles (conventional scroll section)
   --------------------------------------------------------------- */
.principles{position:relative;background:var(--paper);border-top:1px solid var(--hairline)}
.principles-grid{max-width:1240px;margin:0 auto;padding:110px 48px;
  display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.principles-intro h2{font:500 clamp(28px,3vw,38px)/1.12 var(--font-display);letter-spacing:-.025em;
  color:var(--ink-950);margin:16px 0 0}
.principles-intro p{font:400 16px/1.6 var(--font-text);color:var(--text-body);margin:14px 0 0;max-width:360px}
.principle-row{display:flex;align-items:baseline;gap:18px;padding:22px 0;
  border-bottom:1px solid var(--border-default)}
.principle-row:last-child{border-bottom:0}
.principle-row .pi{font:500 13px/1 var(--font-mono);color:var(--gold-600);flex:none;width:28px}
.principle-row .pt{font:500 clamp(19px,2vw,25px)/1.2 var(--font-display);letter-spacing:-.015em;
  color:var(--ink-900)}

/* ---------------------------------------------------------------
   16. Footer
   --------------------------------------------------------------- */
.site-footer{background:var(--ink-950);color:var(--paper)}
.footer-inner{max-width:1240px;margin:0 auto;padding:72px 48px 40px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.footer-about-col .brand span{color:#fff}
.footer-about{font:400 14px/1.65 var(--font-text);color:rgba(255,255,255,.55);
  margin:16px 0 0;max-width:320px}
.footer-col h3{font:500 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin:0 0 4px}
.footer-col ul{display:flex;flex-direction:column;gap:12px}
.footer-col a,.footer-col .linklike{font:400 14px/1.4 var(--font-text);color:rgba(255,255,255,.72)}
.footer-col a:hover,.footer-col .linklike:hover{color:#fff;text-decoration:none}
.footer-col .linklike{background:none;border:0;padding:0;cursor:pointer;text-align:left}
.footer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:56px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap}
.footer-bar > span:first-child{font:400 12px/1 var(--font-text);color:rgba(255,255,255,.55)}
.footer-legal{display:inline-flex;gap:20px}
.footer-legal a{font:400 12px/1 var(--font-text);color:rgba(255,255,255,.55)}
.footer-legal a:hover{color:#fff}
.footer-tagline{font:500 10px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.footer-bar--solo{margin-top:0;border-top:0;padding-top:0}

/* ---------------------------------------------------------------
   17. Contact / Brain Scan dialog
   --------------------------------------------------------------- */
dialog.modal{width:min(520px,calc(100% - 32px));padding:0;border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);background:var(--paper);box-shadow:var(--shadow-xl);color:var(--text-body)}
dialog.modal::backdrop{background:var(--surface-overlay);backdrop-filter:blur(3px)}
dialog.modal[open]{animation:modal-in var(--dur-slow) var(--ease-out)}
.modal-head{position:relative;padding:var(--space-6) var(--space-6) 0}
.modal-close{position:absolute;top:var(--space-4);right:var(--space-4);width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;background:transparent;border:0;
  border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer}
.modal-close:hover{background:var(--ink-75);color:var(--ink-900)}
.modal-close svg{width:18px;height:18px}
.modal-head h3{font:500 26px/1.1 var(--font-display);letter-spacing:-.02em;color:var(--ink-900);margin-top:14px}
.modal-head p{font:400 15px/1.55 var(--font-text);color:var(--text-body);margin-top:8px}
.modal-form{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field label{font:600 14px var(--font-text);color:var(--text-strong)}
.input-wrap{display:flex;align-items:center;gap:var(--space-2);background:var(--white);
  border:1px solid var(--border-default);border-radius:var(--radius-md);padding-inline:var(--space-3);
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.input-wrap:hover{border-color:var(--ink-300)}
.input-wrap:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
.input-wrap svg{width:18px;height:18px;color:var(--text-muted);flex:none}
.input-wrap input,.input-wrap textarea,.input-wrap select{flex:1;border:0;background:transparent;outline:none;
  font:400 15px/1.4 var(--font-text);color:var(--ink-900);padding-block:11px;min-width:0}
.input-wrap textarea{min-height:96px;padding-block:11px;resize:vertical}
.input-wrap select{cursor:pointer;padding-right:var(--space-2)}
.modal-success{padding:var(--space-6);display:flex;align-items:center;gap:var(--space-3)}
.modal-success .ok{flex:none;width:40px;height:40px;border-radius:var(--radius-md);background:var(--green-100);
  color:var(--green-600);display:flex;align-items:center;justify-content:center}
.modal-success .ok svg{width:20px;height:20px}
.modal-success span.t{font:500 16px var(--font-text);color:var(--ink-900)}

/* ---------------------------------------------------------------
   18. Legal pages (privacy / terms)
   --------------------------------------------------------------- */
.legal-page{background:var(--paper)}
.legal-main{max-width:var(--container-md);margin:0 auto;
  padding:calc(var(--header-h) + 64px) 28px 96px}
.legal-main h1{font:500 clamp(32px,4vw,46px)/1.1 var(--font-display);letter-spacing:-.025em;
  color:var(--ink-950);margin:16px 0 0}
.legal-intro{font:400 17px/1.65 var(--font-text);color:var(--text-body);margin:18px 0 0;max-width:640px}
.legal-main h2{font:500 22px/1.25 var(--font-display);letter-spacing:-.015em;color:var(--ink-900);
  margin:44px 0 0}
.legal-main h2::after{content:"";display:block;width:28px;height:2px;background:var(--grad-gold);
  margin-top:10px}
.legal-main p{font:400 16px/1.7 var(--font-text);color:var(--text-body);margin:14px 0 0}
.legal-main ul{margin:12px 0 0;padding-left:2px;display:flex;flex-direction:column;gap:8px}
.legal-main li{position:relative;padding-left:22px;font:400 16px/1.6 var(--font-text);color:var(--text-body)}
.legal-main li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:2px;
  background:var(--gold-500)}
.legal-footnote{margin-top:56px;padding-top:22px;border-top:1px solid var(--border-default);
  font:400 14px/1.6 var(--font-text);color:var(--text-muted)}


@keyframes modal-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}