/* ============================================================
   FUSIONTECHMARK — DESIGN SYSTEM v4.0
   FTM Warm-Paper Editorial System — canonical reference: index.html
   Palette: Warm Paper (#F6F3ED) / Ink (#111111) / Signal Orange (#E8500F)
   Typography: Space Grotesk (display) + Manrope (body) + JetBrains Mono (labels)

   base.css — design tokens, reset, base typography, shared primitives.
   Linked FIRST in every <head>; styles.css follows with components.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* warm paper surface scale */
  --bg:#F6F3ED; --bg2:#EAE4D7; --bg3:#E2DBCB;
  --ink:#111111; --ink2:#3B3A36; --mut:#8B857A;
  --line:#DED7C9; --line2:#C9C1B2;

  /* signal orange */
  --acc:#E8500F; --acc-soft:rgba(232,80,15,.09); --acc-glow:rgba(232,80,15,.22);

  /* dark panels (repo blocks, mobile menu, dark bands, code) */
  --dark:#121110; --dark2:#1C1A17;
  --dline:rgba(246,243,237,.14); --dmut:rgba(246,243,237,.55);

  /* aliases kept for generator/content compatibility */
  --white:#F6F3ED; --black:#111111;
  --orange:#E8500F; --orange-h:#FF6A2E; --orange-d:#C43F08;
  --orange-bg:rgba(232,80,15,.09); --orange-glow:rgba(232,80,15,.22);
  --ftm-orange:#E8500F; --color-accent:#E8500F;
  --muted:#8B857A;
  --color-surface-card:#F6F3ED;
  --color-border:#DED7C9;
  --color-text-secondary:#3B3A36;
  --color-text-muted:#8B857A;
  --surface-panel:#EAE4D7; --surface-card:#F6F3ED; --surface-float:#E2DBCB;
  --border-subtle:#DED7C9; --border-card:#C9C1B2;
  --nav-bg:rgba(246,243,237,.94); --nav-scrolled:rgba(246,243,237,.94);

  --sans:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  --display:'Space Grotesk','Manrope',-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --font:var(--sans);

  --e-out:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.7,0,.2,1);
  --ease:var(--e-out);

  --pad:clamp(20px,4vw,64px);
  --gutter:var(--pad);
  --container:1500px;

  /* calibrated balanced radii */
  --r-xs:3px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:9999px;
  --r-card:14px; --r-input:6px;

  --shadow-sm:0 2px 8px rgba(17,17,17,.04);
  --shadow-md:0 8px 24px -4px rgba(17,17,17,.06);
  --shadow-lg:0 16px 36px -8px rgba(17,17,17,.08);
  --shadow-card:var(--shadow-md);
  --shadow-float:var(--shadow-lg);
}

/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  background:var(--bg); color:var(--ink);
  font:400 16px/1.65 var(--sans);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--acc);color:#F6F3ED;border-radius:var(--r-xs)}
img{user-select:none;max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:var(--r-xs)}
section{scroll-margin-top:84px}
p{text-wrap:pretty}
h1,h2,h3,h4,h5{
  font-family:var(--display);color:var(--ink);
  font-weight:700;letter-spacing:-.03em;line-height:1.15;text-wrap:balance;
}

/* ── SHARED LAYOUT ── */
.wrap,.inner{max-width:var(--container);margin:0 auto;padding-inline:var(--pad);position:relative}
.inner--reading{max-width:1120px}
.text-center{text-align:center}
.mono{font-family:var(--mono)}

.section{position:relative;padding:clamp(64px,9vw,128px) 0}
.section--border-top{border-top:1px solid var(--line)}
.section-head{margin-bottom:clamp(36px,5vw,64px)}

/* ── EYEBROWS (architectural inline meta style) ── */
.meta,
.label,
.eyebrow-text{
  font:600 10px/1 var(--mono);letter-spacing:.18em;color:var(--mut);
  display:flex;align-items:center;gap:10px;text-transform:uppercase;
  margin-bottom:14px;
}
.meta::before{
  content:"";width:7px;height:7px;background:var(--acc);flex:none;border-radius:1.5px;
}
.meta em{font-style:normal;color:var(--ink)}
.label::before{
  content:"";width:7px;height:7px;background:var(--acc);flex:none;border-radius:1.5px;
}
.text-center .label,.text-center .meta{justify-content:center}

/* ── DISPLAY HEADINGS ── */
.h2,
.section-title{
  font-family:var(--display);
  font-size:clamp(2rem,4.4vw,3.8rem);font-weight:700;letter-spacing:-.025em;
  line-height:1.06;text-transform:uppercase;color:var(--ink);
}
.h2 em{font-style:normal;color:var(--acc)}
.section-sub{
  font-size:clamp(15px,1.35vw,17.5px);color:var(--ink2);
  margin-top:16px;max-width:54ch;line-height:1.7;
}
.text-center .section-title,.text-center .section-sub{margin-left:auto;margin-right:auto}

/* ── REVEAL ON ENTER (index uses .rv, subpages use .reveal) ── */
html.js:not(.reduced) .rv,
html.js:not(.reduced) .reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--e-out),transform .9s var(--e-out);
  transition-delay:var(--d,0s);
}
html.js:not(.reduced) .rv.in,
html.js:not(.reduced) .reveal.is-visible{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1}

/* ── BUTTONS & LINKS (clean modern semi-rounded) ── */
.btn,
.btn-orange{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--ink);color:var(--bg);
  font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  padding:16px 26px;border-radius:var(--r-sm);
  transition:background .3s,transform .25s var(--e-out),box-shadow .3s;
  white-space:nowrap;cursor:pointer;
  box-shadow:var(--shadow-sm);
}
.btn .arr{transition:transform .3s var(--e-out)}
.btn:hover,.btn-orange:hover{
  background:var(--acc);color:var(--bg);transform:translateY(-1px);
  box-shadow:0 6px 18px var(--acc-glow);
}
.btn:hover .arr{transform:translateX(5px)}
.btn:active,.btn-orange:active{transform:translateY(0) scale(.99);transition-duration:.08s}
.btn:focus-visible,.btn-orange:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.btn.sm,.btn-sm{padding:11px 18px;font-size:10px;border-radius:var(--r-xs)}

.lnk{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:5px;cursor:pointer;
}
.lnk::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform-origin:right;animation:none;
}
.lnk:hover::after{animation:lnk .55s var(--e-io)}
@keyframes lnk{
  0%{transform-origin:right;transform:scaleX(1)}
  45%{transform-origin:right;transform:scaleX(0)}
  55%{transform-origin:left;transform:scaleX(0)}
  100%{transform-origin:left;transform:scaleX(1)}
}
.arr{flex:none}

/* outline variant (was btn-outline) */
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  padding:15px 24px;border-radius:var(--r-sm);
  border:1px solid var(--line2);color:var(--ink);cursor:pointer;white-space:nowrap;
  background:transparent;
  transition:border-color .3s,color .3s,background .3s,transform .25s var(--e-out);
}
.btn-outline:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-1px)}
.btn-outline:active{transform:translateY(0) scale(.99);transition-duration:.08s}
.btn-outline:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.btn-outline.btn-sm{padding:10px 16px;font-size:10px}

/* ── SHARED IMAGE TREATMENT: warm monochrome ── */
.ph{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(1.02);
  mix-blend-mode:multiply;border-radius:inherit;
}

/* ── SCROLL PROGRESS HAIRLINE ── */
.sprog{
  position:fixed;top:0;left:0;right:0;height:2px;background:var(--acc);
  transform:scaleX(0);transform-origin:left;z-index:400;border-radius:var(--r-xs);
}

/* ── SKIP LINK ── */
.skip,
.skip-link{
  position:fixed;top:-60px;left:16px;z-index:500;
  background:var(--ink);color:var(--bg);padding:10px 16px;
  border-radius:var(--r-xs);font:600 11px var(--mono);letter-spacing:.14em;
  transition:top .3s;text-decoration:none;
}
.skip:focus,.skip-link:focus{top:12px}