/* =====================================================================
   HUSS AI — Design System
   Warm espresso black · cream ink · terracotta accent · cork tan
   Type: Hanken Grotesk (display/body) + IBM Plex Mono (data/labels)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- Surfaces (warm espresso) ---- */
  --espresso:    #110C08;   /* page background, warm near-black     */
  --espresso-2:  #1A130C;   /* cards / raised panels                */
  --espresso-3:  #251A10;   /* hover / deeper raise                 */
  --espresso-4:  #0B0805;   /* footer / deepest                     */
  --panel:       rgba(243,234,212,.045);  /* translucent cream glass */
  --panel-2:     rgba(243,234,212,.08);

  /* ---- Ink (warm cream) ---- */
  --cream:       #F3EAD4;
  --cream-80:    rgba(243,234,212,.80);
  --cream-60:    rgba(243,234,212,.58);
  --cream-40:    rgba(243,234,212,.38);
  --line:        rgba(243,234,212,.16);
  --line-soft:   rgba(243,234,212,.09);

  /* ---- Accent + material ---- */
  --accent:      #D85C24;   /* terracotta — primary accent          */
  --accent-2:    #E9711E;   /* brighter orange (buttons/glow)       */
  --accent-deep: #A8410F;
  --cork:        #C49A6C;   /* natural material tan                 */
  --olive:       #7E8B4F;   /* muted earth secondary                */
  --dust:        #6E879E;   /* dusty blue secondary                 */
  --stone:       #9B978C;   /* warm stone                           */

  /* ---- Type ---- */
  --font-display: "Hanken Grotesk", system-ui, sans-serif;
  --font-text:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* ---- Radius ---- */
  --r-xs: 8px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --pill: 999px;

  /* ---- Layout ---- */
  --pad: clamp(18px, 4vw, 64px);
  --maxw: 1320px;
}

/* ---------- Reset ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--espresso);
  color:var(--cream);
  font-family:var(--font-text);
  font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; }
::selection{ background:var(--accent); color:var(--espresso); }

/* =====================================================================
   TYPE
   ===================================================================== */
.h-display{
  font-family:var(--font-display);
  font-weight:800; line-height:.92;
  letter-spacing:-.025em; margin:0;
  text-transform:uppercase;
}
.h-xl{ font-family:var(--font-display); font-weight:800; font-size:clamp(56px,11vw,170px); line-height:.86; letter-spacing:-.03em; text-transform:uppercase; margin:0; }
.h-1 { font-family:var(--font-display); font-weight:800; font-size:clamp(38px,5.6vw,80px);  line-height:.94; letter-spacing:-.025em; text-transform:uppercase; margin:0; }
.h-2 { font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3.4vw,48px);  line-height:1.0;  letter-spacing:-.02em;  text-transform:uppercase; margin:0; }
.h-3 { font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2vw,28px);    line-height:1.08; letter-spacing:-.01em;  margin:0; }

.lead{ font-size:clamp(19px,1.7vw,26px); line-height:1.4; font-weight:500; margin:0; color:var(--cream); }
.body{ font-size:17px; line-height:1.62; font-weight:400; margin:0; color:var(--cream-80); }
.muted{ color:var(--cream-60); }

/* small-caps eyebrow label (sans) */
.eyebrow{
  font-family:var(--font-text);
  font-weight:700; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--cream);
}
.eyebrow--accent{ color:var(--accent); }

/* mono technical label / data readout */
.mono{
  font-family:var(--font-mono);
  font-weight:500; font-size:12px;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--cream-60);
}
.mono--accent{ color:var(--accent); }
.data{ font-family:var(--font-mono); font-weight:600; letter-spacing:-.01em; color:var(--cream); }

/* =====================================================================
   BUTTONS / PILLS
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 26px; border-radius:var(--pill);
  font-family:var(--font-text); font-weight:600; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase; line-height:1;
  white-space:nowrap; cursor:pointer; border:1.5px solid transparent;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--accent{ background:var(--accent); color:var(--espresso); }
.btn--accent:hover{ background:var(--accent-2); }
.btn--cork{ background:var(--espresso-3); color:var(--cream); }
.btn--cork:hover{ background:#31230f; }
.btn--ghost{ background:transparent; color:var(--cream); border:1.5px dashed var(--line); }
.btn--ghost:hover{ border-color:var(--cream); }
.btn .ic{ width:16px; height:16px; }

/* circular dotted control (scroll cue) */
.ring{
  width:46px; height:46px; border-radius:50%;
  border:1.5px dotted var(--cream-40);
  display:grid; place-items:center; color:var(--cream);
  flex:none;
}

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  mix-blend-mode:normal;
}
.nav__brand{
  display:inline-flex; align-items:baseline; gap:.2em;
  font-family:var(--font-display); font-weight:800; font-size:24px;
  letter-spacing:.02em; text-transform:uppercase; color:var(--cream);
}
.nav__brand .ai{ color:var(--accent); font-size:.62em; letter-spacing:.06em; }
.nav__links{ display:flex; gap:38px; }
.nav__link{
  font-family:var(--font-text); font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cream);
  padding-bottom:4px; opacity:.85; transition:opacity .2s;
}
.nav__link:hover{ opacity:1; }
.nav__link.is-active{ opacity:1; border-bottom:1.5px dotted var(--cream); }
.nav__edge{
  position:fixed; right:0; top:0; z-index:50;
  writing-mode:vertical-rl;
  background:var(--cream); color:var(--espresso);
  font-family:var(--font-mono); font-weight:600; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  padding:18px 7px; border-radius:0 0 0 6px;
}

/* =====================================================================
   GLASS / INFO CARD  (translucent w/ dotted divider)
   ===================================================================== */
.glass{
  background:var(--panel);
  border:1px solid var(--line-soft);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:var(--r-sm);
  padding:24px;
}
.divider-dot{ border:none; border-top:1.5px dotted var(--line); margin:18px 0; }

/* =====================================================================
   CARDS / PANELS
   ===================================================================== */
.card{
  background:var(--espresso-2);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:28px;
}
.card--raise{ background:var(--espresso-3); }

/* spec / data row (mono, dotted-rule) */
.spec{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:13px 0; border-bottom:1px dotted var(--line);
}
.spec__k{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--cream-60); }
.spec__v{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--cream); }

/* stat callout (big mono number) */
.stat__n{ font-family:var(--font-display); font-weight:800; font-size:clamp(40px,5vw,68px); line-height:1; letter-spacing:-.02em; color:var(--cream); }
.stat__n .u{ color:var(--accent); }
.stat__l{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--cream-60); margin-top:8px; }

/* =====================================================================
   SECTION SHELL
   ===================================================================== */
.section{ padding:clamp(72px,11vw,150px) var(--pad); position:relative; }
.wrap{ max-width:var(--maxw); margin:0 auto; }
.rule{ height:1px; background:var(--line); border:none; margin:0; }

/* ticker (mono, like the measurement readouts) */
.scrollcue{ display:inline-flex; align-items:center; gap:14px; }
.scrollcue .mono{ color:var(--cream-60); }

/* grid helpers */
.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,48px); }
.cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cols-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:900px){
  .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; }
  .nav__links{ display:none; }
}

/* image well */
.well{ border-radius:var(--r-sm); overflow:hidden; background:var(--espresso-2); position:relative; }
image-slot{ border-radius:var(--r-sm); overflow:hidden; }
.ph{
  border-radius:var(--r-sm);
  background:
    repeating-linear-gradient(45deg, var(--espresso-2) 0 11px, var(--espresso-3) 11px 22px);
  display:grid; place-items:center; min-height:200px;
  color:var(--cream-40);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}

/* accent glow utility */
.glow{ background:radial-gradient(60% 60% at 50% 40%, rgba(216,92,36,.28), transparent 70%); }

/* =====================================================================
   QUOTE / TESTIMONIAL  (espresso card + accent mark + mono attribution)
   ===================================================================== */
.quote{ display:flex; flex-direction:column; gap:16px; height:100%; }
.quote__mark{ font-family:var(--font-display); font-weight:800; font-size:56px; line-height:.5; color:var(--accent); height:26px; }
.quote__text{ margin:0; font-size:18px; line-height:1.5; font-weight:500; color:var(--cream); text-wrap:pretty; }
.quote__who{ display:flex; align-items:center; gap:13px; margin-top:auto; padding-top:8px; }
.quote__av{
  width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--espresso-3); border:1px solid var(--line); color:var(--cork);
  font-family:var(--font-mono); font-weight:600; font-size:13px; letter-spacing:.02em;
}
.quote__name{ font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.01em; }
.quote__role{ margin-top:3px; }

/* trust / wordmark logo strip */
.logos{
  margin-top:54px; padding-top:30px; border-top:1px dotted var(--line);
  display:flex; flex-direction:column; gap:22px; align-items:center; text-align:center;
}
.logos__row{ display:flex; flex-wrap:wrap; gap:16px 40px; justify-content:center; align-items:center; }
.logo{
  font-family:var(--font-display); font-weight:800; font-size:clamp(16px,1.6vw,21px);
  letter-spacing:-.01em; text-transform:uppercase; color:var(--cream); opacity:.42; transition:opacity .2s;
}
.logo:hover{ opacity:.85; }