/* =============================================================================
   furnisystems.ro — flagship v4
   site.css: tokens, fonts, chrome (header + footer), shared components.
   Loaded AFTER assets/scrollcraft.css on every page of the site.
   Fonts are local and subset (from V1). Zero external requests, ever.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts -- */
@font-face{
  font-family:'Archivo Variable';font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo Variable';font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;
  src:url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;
  src:url('fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ----------------------------------------------------------------- tokens -- */
:root{
  --sc-canvas:#0B0C0F; --sc-surface:#14161C; --sc-surface-2:#1B1E26;
  --sc-ink:#ECEAE4; --sc-ink-soft:#A3A49F;
  --sc-accent:#FFB25B; --sc-accent-ink:#0B0C0F; --sc-cool:#8FB6E6;
  --sc-metal:#5B6068;              /* metallic gray edges, hairlines, dial */
  --sc-font-display:"Archivo Variable",system-ui,sans-serif;
  --sc-font-text:"Inter Variable",system-ui,sans-serif;
  --sc-font-mono:"Archivo Variable",ui-monospace,monospace;

  --sc-hairline:rgba(160,170,190,.14);
  --sc-hairline-strong:rgba(160,170,190,.26);

  /* the bar's ink. hero.js flips it to dark over the bright frames of A1. */
  --hero-ink:var(--sc-ink);
  --hero-ink-soft:var(--sc-ink-soft);
  --hero-bar-line:rgba(160,170,190,.13);

  --fs-hdr-h:70px;
  --sc-maxw:78rem;
  --sc-gutter:clamp(1.25rem,5vw,4.5rem);
  --sc-section:clamp(5rem,9vw,10rem);
  --sc-measure:60ch;
  --sc-r-sm:4px; --sc-r-md:10px; --sc-r-lg:16px; --sc-r-pill:999px;
  --sc-shadow-color:222 30% 2%;
}

/* Light text on a dark ground wants a touch more leading and one step more
   weight than the same face on white; that is optical, not decoration. */
body{
  font-size:17px;
  line-height:1.62;
  font-weight:380;
  background:var(--sc-canvas);
  color:var(--sc-ink);
  overflow-x:clip;
}
@media (min-width:900px){ body{ font-size:1.0625rem; } }

/* Display ramp: hero >= 6rem desktop, section headlines >= 3rem. */
:root{
  --sc-t-4xl:clamp(2.6rem,1.3rem + 5.6vw,6.6rem);
  --sc-t-3xl:clamp(2.1rem,1.2rem + 3.6vw,4.2rem);
  --sc-t-2xl:clamp(1.75rem,1.1rem + 2.4vw,3rem);
  --sc-t-xl:clamp(1.35rem,1.1rem + 1vw,1.9rem);
  --sc-t-lg:clamp(1.1rem,1rem + 0.5vw,1.35rem);
}
.sc-display{ font-weight:560; letter-spacing:-0.028em; }
.sc-display--xl{ letter-spacing:-0.035em; line-height:0.98; }
.sc-display--lg{ line-height:1.02; }
.sc-display--md{ line-height:1.08; letter-spacing:-0.022em; }
.sc-body{ color:var(--sc-ink-soft); font-weight:380; }
.sc-lede{ font-weight:400; }

h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--sc-accent); outline-offset:3px; border-radius:var(--sc-r-sm); }
::selection{ background:rgba(255,178,91,.3); color:#fff; }

.fs-wrap{ width:100%; max-width:var(--sc-maxw); margin-inline:auto; padding-inline:var(--sc-gutter); }
.fs-skip{ position:fixed; left:-9999px; top:0; z-index:200; background:var(--sc-accent); color:var(--sc-accent-ink); padding:10px 18px; font-weight:600; }
.fs-skip:focus{ left:12px; top:12px; }

/* An eyebrow is rationed: at most one per three sections. */
.fs-eyebrow{
  font-family:var(--sc-font-display);
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:600; color:var(--sc-accent);
  margin:0;
}
.fs-eyebrow--cool{ color:var(--sc-cool); }

/* ----------------------------------------------------------------- header -- */
.fs-hdr{
  position:fixed; inset:0 0 auto 0; z-index:70;
  height:var(--fs-hdr-h);
  display:flex; align-items:center;
  background:transparent;
  color:var(--hero-ink);
  transition:color 420ms var(--sc-ease-out);
}
/* The bar is transparent, and a transparent bar sits on whatever scrolls under
   it. A soft top edge keeps the mark and the nav readable when a headline
   passes beneath. It is switched off over the hero's bright frames, where the
   bar goes dark ink instead and a dark veil would fight it. */
.fs-hdr::before{
  content:""; position:absolute; inset:0 0 auto 0; z-index:-1;
  height:calc(var(--fs-hdr-h) + 2rem);
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(11,12,15,.88) 0%, rgba(11,12,15,.62) 48%, rgba(11,12,15,.22) 76%, rgba(11,12,15,0) 100%);
  opacity:var(--hdr-veil, 1);
  transition:opacity 420ms var(--sc-ease-out);
}
.fs-hdr__in{
  width:100%; max-width:var(--sc-maxw); margin-inline:auto;
  padding-inline:var(--sc-gutter);
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
}
.fs-mark{
  font-family:var(--sc-font-display);
  font-size:1.02rem; font-weight:640; letter-spacing:-0.03em;
  color:currentColor; white-space:nowrap;
}
.fs-hdr__nav{
  display:flex; align-items:center; gap:clamp(.9rem,1.9vw,1.9rem);
  margin-left:auto;
  font-size:.86rem; font-weight:460; letter-spacing:-0.005em;
}
.fs-hdr__nav a{
  color:currentColor; opacity:.74;
  padding:.35rem 0;
  transition:opacity 150ms var(--sc-ease-out);
}
.fs-hdr__nav a:hover{ opacity:1; }
.fs-hdr__nav a[aria-current="page"]{ opacity:1; box-shadow:inset 0 -1px 0 var(--sc-accent); }
.fs-hdr .fs-btn{ margin-left:clamp(.6rem,1.6vw,1.4rem); }

@media (max-width:1080px){
  .fs-hdr__nav{ display:none; }
  .fs-hdr .fs-btn{ margin-left:auto; }
}
@media (max-width:520px){
  :root{ --fs-hdr-h:58px; }
  .fs-hdr .fs-btn{ font-size:.78rem; padding:.5rem .8rem; }
}

/* ---------------------------------------------------------------- buttons -- */
.fs-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; white-space:nowrap;
  font-family:var(--sc-font-display);
  font-size:.86rem; font-weight:600; letter-spacing:-0.01em;
  padding:.62rem 1.1rem;
  border-radius:var(--sc-r-pill);
  background:var(--sc-accent); color:var(--sc-accent-ink);
  border:0; cursor:pointer;
  box-shadow:0 1px 2px hsl(var(--sc-shadow-color)/.3), 0 6px 18px -8px rgba(255,178,91,.45);
  transition:transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.fs-btn:hover{ background:#FFC176; }
.fs-btn:active{ transform:translateY(1px); }
.fs-btn--lg{ font-size:1rem; padding:.85rem 1.5rem; }
.fs-btn[disabled], .fs-btn[aria-disabled="true"]{
  background:transparent; color:var(--sc-ink-soft);
  border:1px solid var(--sc-hairline-strong); box-shadow:none; cursor:default;
}
.fs-btn[disabled]:hover, .fs-btn[aria-disabled="true"]:hover{ background:transparent; }

/* stroke only, no fill: a box that separates from the ground twice reads as
   over styled the moment it renders. */
.fs-ghost{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--sc-font-display); font-weight:560; font-size:.9rem;
  padding:.6rem 1.05rem; border-radius:var(--sc-r-pill);
  border:1px solid var(--sc-hairline-strong); background:transparent; color:var(--sc-ink);
  cursor:pointer;
  transition:border-color 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out);
}
.fs-ghost:hover{ border-color:var(--sc-accent); color:var(--sc-accent); }
.fs-ghost:active{ transform:translateY(1px); }

.fs-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--sc-font-display); font-weight:580; font-size:.95rem;
  color:var(--sc-accent);
  padding-bottom:2px;
  box-shadow:inset 0 -1px 0 rgba(255,178,91,.35);
  transition:box-shadow 150ms var(--sc-ease-out);
}
.fs-link:hover{ box-shadow:inset 0 -1px 0 var(--sc-accent); }
.fs-link--cool{ color:var(--sc-cool); box-shadow:inset 0 -1px 0 rgba(143,182,230,.35); }
.fs-link--cool:hover{ box-shadow:inset 0 -1px 0 var(--sc-cool); }

/* ------------------------------------------------------------------ cards -- */
/* Hairline only. No fill. One radius scale for the whole site. */
.fs-card{
  border:1px solid var(--sc-hairline);
  border-radius:var(--sc-r-lg);
  padding:clamp(1.3rem,2.4vw,2rem);
  background:transparent;
}
.fs-card__k{
  font-family:var(--sc-font-display); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; color:#8A8D93;
}
.fs-card h3{
  font-family:var(--sc-font-display); font-size:var(--sc-t-lg);
  font-weight:580; letter-spacing:-0.02em; line-height:1.14;
}
.fs-card p{ color:var(--sc-ink-soft); font-size:.97rem; }

.fs-rule{ height:1px; border:0; background:var(--sc-hairline); margin:0; }

/* ----------------------------------------------------------------- footer -- */
.fs-foot{
  border-top:1px solid var(--sc-hairline);
  padding-block:clamp(2.5rem,5vw,4rem) clamp(1.6rem,3vw,2.4rem);
  background:var(--sc-canvas);
}
.fs-foot__in{
  width:100%; max-width:var(--sc-maxw); margin-inline:auto;
  padding-inline:var(--sc-gutter);
  display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:clamp(1.5rem,4vw,3rem);
}
.fs-foot__mark{ display:flex; flex-direction:column; gap:.5rem; min-width:14rem; }
.fs-foot__mark .fs-mark{ font-size:1.15rem; color:var(--sc-ink); }
.fs-foot__tel{ color:var(--sc-ink-soft); font-size:.95rem; }
.fs-foot__tel:hover{ color:var(--sc-ink); }
.fs-foot__nav{
  display:flex; flex-wrap:wrap; gap:.55rem clamp(1rem,2.4vw,2rem);
  margin-left:auto; font-size:.92rem;
}
.fs-foot__nav a{ color:var(--sc-ink-soft); }
.fs-foot__nav a:hover{ color:var(--sc-ink); }
.fs-foot__base{
  width:100%; max-width:var(--sc-maxw); margin-inline:auto;
  padding-inline:var(--sc-gutter);
  margin-top:clamp(1.8rem,4vw,3rem);
  padding-top:1.1rem; border-top:1px solid var(--sc-hairline);
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem;
  font-size:.82rem; color:#8A8D93;
}

/* --------------------------------------------------------------- utilities -- */
.fs-stack > * + *{ margin-top:1rem; }
.fs-stack > :is(h1,h2,h3){ margin-top:3rem; }
.fs-stack > :is(h1,h2,h3):first-child{ margin-top:0; }
.fs-lead{ text-align:left; }
.fs-grid-2{ display:grid; gap:clamp(1.5rem,3vw,3rem); grid-template-columns:1fr; }
@media (min-width:860px){ .fs-grid-2{ grid-template-columns:1.05fr .95fr; } }
.fs-vis-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.fs-nums{ font-variant-numeric:tabular-nums; }

/* An inner page's own hero band, so the fixed bar never sits on live type. */
.fs-page-head{ padding-top:calc(var(--fs-hdr-h) + clamp(3.5rem,8vw,7rem)); }