/* Turbo Design System — plain CSS port for Auvita landing */

/* ---- tokens ---- */
:root{
  --n-0:#FFFFFF; --n-50:#F6F7F9; --n-100:#E8EAEF; --n-200:#CFD3DC; --n-300:#A6ABB8;
  --n-400:#7E8493; --n-500:#5C6270; --n-600:#424754; --n-700:#2B303B; --n-800:#1A1E27;
  --n-900:#11141B; --n-950:#0A0C12; --n-1000:#06070C;

  --amber-100:#FFE7C7; --amber-200:#FFD199; --amber-300:#FFB865; --amber-400:#FF9B33;
  --amber-500:#FF7A18; --amber-600:#E15A08; --amber-700:#A83E05;
  --gold-300:#FFDC8A; --gold-400:#FFC85C; --gold-500:#FFB02E;

  --success:#2FCE84; --warning:#FFB02E; --danger:#F4553C;

  --surface-page:#06070C; --surface-sunken:#04050A; --surface-raised:#11141B;
  --surface-card:#0D0F16; --surface-card-hover:#141822; --surface-chip:#161A24;
  --surface-inset:rgba(255,255,255,.04); --scrim:rgba(6,7,12,.74);

  --text-strong:#FFFFFF; --text-body:#DDE0E7; --text-muted:#9AA0AE; --text-faint:#6A7080;
  --text-link:#FFB865; --text-link-hover:#FFD199;

  --border-hairline:rgba(255,196,140,.085); --border-soft:rgba(255,196,140,.15); --border-strong:rgba(255,196,140,.28);

  --grad-brand:linear-gradient(180deg,#FF9B33,#E15A08);
  --grad-glow:radial-gradient(92% 105% at 50% 104%, rgba(255,150,52,.30), rgba(255,138,32,.12) 42%, rgba(255,138,32,0) 78%);
  --grad-brand-soft:linear-gradient(160deg, rgba(255,138,42,.22), rgba(255,176,46,.07));
  --grad-meter:linear-gradient(90deg,#FF7A18,#FFC85C);
  --grad-viz:linear-gradient(0deg,#E15A08 0%,#FF7A18 55%,#FFC85C 100%);

  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:36px; --r-2xl:44px; --r-pill:999px;

  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 8px 24px rgba(0,0,0,.5);
  --shadow-3:0 20px 56px rgba(0,0,0,.58);
  --shadow-4:0 40px 100px rgba(0,0,0,.68);
  --shadow-accent:0 10px 34px rgba(255,130,30,.26);
  --inner-light:inset 0 1px 0 rgba(255,226,196,.08);
  --focus-ring:0 0 0 3px rgba(255,138,42,.32);
  --glow-amber:0 0 110px 24px rgba(255,150,52,.24);
  --glow-gold:0 0 130px 30px rgba(255,206,120,.20);
  --inner-well:inset 0 1px 2px rgba(0,0,0,.5);

  --font-display:"Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;

  --type-metric:700 96px/0.95 var(--font-display);
  --type-metric-sm:700 56px/0.95 var(--font-display);
  --type-h1:600 42px/1.12 var(--font-display);
  --type-h2:600 28px/1.2 var(--font-display);
  --type-title:600 24px/1.25 var(--font-display);
  --type-h3:600 20px/1.25 var(--font-display);
  --type-body-lg:400 18px/1.6 var(--font-display);
  --type-body:400 16px/1.55 var(--font-display);
  --type-body-sm:400 14px/1.55 var(--font-display);
  --type-label:500 13px/1.3 var(--font-display);
  --type-caption:400 12px/1.4 var(--font-display);
  --type-eyebrow:500 11px/1.2 var(--font-display);
  --type-emphasis:700 16px/1.55 var(--font-display);
  --type-mono:400 13px/1.5 var(--font-mono);

  --ls-metric:-.035em; --ls-title:-.01em; --ls-caps:.12em;

  --dur-control:140ms; --dur-surface:220ms; --dur-large:380ms;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.16,1,.3,1);

  --gutter:20px; --container:1120px;
}

/* ---- reset ---- */
*{box-sizing:border-box}
body{margin:0; background:var(--surface-page); color:var(--text-body); font:var(--type-body); -webkit-font-smoothing:antialiased}
img,svg,canvas{display:block; max-width:100%}
a{color:var(--text-link); text-decoration:none}
a:hover{color:var(--text-link-hover)}
h1,h2,h3,h4,h5,h6{margin:0}
button{font:inherit; color:inherit}

/* ---- field / glow ---- */
.turbo-field{
  background:
    radial-gradient(110% 70% at 50% 118%, rgba(255,138,42,.26), transparent 78%),
    radial-gradient(70% 55% at 12% 104%, rgba(255,186,80,.15), transparent 80%),
    radial-gradient(80% 60% at 88% 110%, rgba(140,58,14,.26), transparent 80%),
    var(--surface-page);
  background-attachment:scroll;
}

.turbo-glow{position:relative; overflow:hidden}
.turbo-glow::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:70%;
  background:var(--grad-glow); pointer-events:none;
}

/* ---- layout ---- */
.container{max-width:var(--container); padding-inline:var(--gutter); margin-inline:auto}
.section{padding-block:96px}
@media (max-width:720px){.section{padding-block:64px}}

.grid-2{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:14px}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px}
@media (max-width:720px){.grid-2,.grid-3{grid-template-columns:1fr}}

.stack-12{display:flex; flex-direction:column; gap:12px}
.stack-14{display:flex; flex-direction:column; gap:14px}
.row{display:flex; align-items:center; gap:14px}

/* ---- card ---- */
.card{
  position:relative;
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--r-lg);
  box-shadow:var(--inner-light), var(--shadow-1);
}
.card--pad-18{padding:18px}
.card--pad-20{padding:20px}
.card--interactive{
  transition:background var(--dur-surface) var(--ease-out), transform var(--dur-surface) var(--ease-out);
}
.card--interactive:hover{background:var(--surface-card-hover); transform:translateY(-2px)}
.card--interactive:active{transform:scale(.97)}
.card--gradient{background:var(--grad-brand); color:var(--n-0); border-color:transparent}

/* ---- button ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 18px; border-radius:var(--r-pill); border:none;
  font:var(--type-label); font-size:15px; cursor:pointer;
  transition:transform var(--dur-control) var(--ease-out), background var(--dur-control);
}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:none; box-shadow:var(--focus-ring)}
.btn:disabled{opacity:.4; cursor:default}

.btn--gradient{background:var(--grad-brand); color:var(--n-0); box-shadow:var(--shadow-accent)}
.btn--primary{background:var(--amber-500); color:var(--n-0)}
.btn--glass{backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); background:rgba(255,255,255,.06); border:1px solid var(--border-soft); color:var(--text-strong)}
.btn--outline{background:transparent; border:1px solid var(--border-soft); color:var(--text-strong)}
.btn--ghost{background:transparent; color:var(--text-muted)}
.btn--light{background:var(--n-50); color:var(--n-1000)}

.btn--sm{height:36px; padding:0 14px; font-size:13px}
.btn--lg{height:52px; padding:0 24px; font-size:16px}
.btn--block{width:100%}

/* ---- badge / chip / eyebrow / em / mono ---- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  height:24px; padding:0 10px; border-radius:var(--r-pill);
  font-size:12px; font-weight:500;
}
.badge--neutral{background:var(--surface-chip); color:var(--text-body); border:1px solid var(--border-hairline)}
.badge--accent{background:var(--grad-brand-soft); color:var(--amber-200); border:1px solid var(--border-soft)}
.badge--dot{background:var(--surface-chip); color:var(--text-body); border:1px solid var(--border-hairline)}
.badge--dot::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--amber-500)}

.chip{
  width:44px; height:44px; border-radius:50%;
  background:var(--surface-chip); border:1px solid var(--border-hairline);
  display:grid; place-items:center;
}
.chip--on{color:var(--amber-300)}
.chip--off{color:var(--text-faint)}

.eyebrow{font:var(--type-eyebrow); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--text-faint)}
.em{font:var(--type-emphasis); color:var(--text-body)}
.mono{font:var(--type-mono)}

/* ---- seg / glass ---- */
.seg{
  display:inline-flex; padding:4px; gap:4px;
  border-radius:var(--r-pill);
  background:rgba(13,15,22,.86);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border-soft);
}
.seg__item{
  height:36px; padding:0 14px; border-radius:var(--r-pill); border:none;
  background:transparent; font-size:13px; font-weight:500; color:var(--text-muted);
  cursor:pointer; transition:background var(--dur-control) var(--ease-out), color var(--dur-control);
}
.seg__item[aria-pressed="true"]{background:var(--n-0); color:var(--n-1000)}

.glass-12{backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); background:rgba(13,15,22,.86)}
.glass-24{backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); background:rgba(13,15,22,.86)}
.glass-40{backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px); background:rgba(13,15,22,.86)}

/* ---- utilities ---- */
.icon{width:1em; height:1em; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; fill:none}

/* ---- motion ---- */
@media (prefers-reduced-motion: reduce){
  :root{--dur-control:0ms; --dur-surface:0ms; --dur-large:0ms}
  .card--interactive:hover{transform:none}
  .btn:active{transform:none}
}