/* ============================================================
   xAI clone — component layer

   Base tokens: assets/css/tokens.css (the supplied variables.css,
   unmodified). The dark surface + warm accent roles below come from
   the Refero capture of the live x.ai homepage
   (style 744c9117, screen a7d91c65): near-black canvas #0a0a0a–#121212,
   warm gold hero spotlight, warm brown footer gradient, Geist type.
   ============================================================ */

:root{
  /* Real brand typefaces, per Refero's font capture for x.ai */
  --font-universalsans:'Geist',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-universalsansdisplay:'Geist',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-geistmono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;

  /* Surfaces */
  --bg:var(--color-jet-ink);          /* #0a0a0a */
  --bg-raise:#121212;
  --surface:var(--color-charcoal);    /* #151515 */
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.055);

  /* Text */
  --ink:var(--color-paper);           /* #ffffff */
  --ink-2:#cccccc;
  --ink-3:var(--color-fog);           /* #858585 */
  --ink-4:var(--color-steel);         /* #545454 */

  /* Warm accents — decorative only, never on functional UI */
  --gold:#cfa55a;
  --gold-soft:#bd9f73;
  --gold-deep:#8e754c;
  --umber:#675943;
  --umber-deep:#352e22;
  --orange:#cc7a00;
  --spotlight:#f7f1c1;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-universalsans);
  font-size:var(--text-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button,input{font:inherit;color:inherit}

.wrap{max-width:var(--page-max-width);margin:0 auto;padding-inline:24px}
.section{padding-block:var(--section-gap)}
.section--tight{padding-block:48px}
.section--rule{border-top:1px solid var(--line-soft)}

/* ---------- type ---------- */
.h2{
  margin:0;
  font-family:var(--font-universalsansdisplay);
  font-size:clamp(34px,4.6vw,var(--text-heading));
  line-height:1.04;
  letter-spacing:-0.025em;
  font-weight:var(--font-weight-medium);
}
.h2--sm{font-size:clamp(26px,3vw,var(--text-heading-sm));line-height:1.15}
.lede{margin:0;font-size:18px;line-height:1.6;color:var(--ink-3);max-width:46ch}
.eyebrow{
  font-family:var(--font-geistmono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-4);
  margin-bottom:16px;
}
.link{font-size:14px;color:var(--ink-3);transition:color .18s ease}
.link:hover{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 22px;
  border-radius:var(--radius-buttons);
  font-size:14px;font-weight:var(--font-weight-medium);
  letter-spacing:.02em;
  white-space:nowrap;cursor:pointer;
  border:1px solid transparent;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.btn--sm{height:38px;padding:0 18px;font-size:13px}
.btn--xs{height:32px;padding:0 15px;font-size:12px}
.btn--outline{border-color:rgba(255,255,255,.28);color:var(--ink);background:transparent}
.btn--outline:hover{border-color:var(--ink);background:rgba(255,255,255,.06)}
.btn--filled{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn--filled:hover{background:#e6e6e6;border-color:#e6e6e6}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  height:64px;display:flex;align-items:center;
  background:rgba(10,10,10,.72);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:background-color .2s ease,border-color .2s ease;
}
.hdr.is-scrolled{background:rgba(10,10,10,.9);border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:32px;width:100%}
.brand{flex:0 0 auto;color:var(--ink)}
.brand svg{width:22px;height:22px}
.nav{display:flex;align-items:center;gap:28px;margin-inline:auto}
.nav a{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);transition:color .18s ease;
}
.nav a:hover{color:var(--ink)}
.hdr__end{display:flex;align-items:center;gap:12px;flex:0 0 auto}

.burger{display:none;width:40px;height:40px;background:none;border:0;cursor:pointer;padding:0;position:relative}
.burger span{position:absolute;left:10px;width:20px;height:1px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
.burger.is-open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.is-open span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.drawer{position:fixed;inset:64px 0 0;z-index:49;background:var(--bg);padding:28px 24px}
.drawer__nav{display:flex;flex-direction:column;gap:4px}
.drawer__nav a{padding:14px 0;font-size:20px;border-bottom:1px solid var(--line-soft)}
.drawer__nav .btn{margin-top:20px;border-bottom:0;align-self:flex-start}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:clamp(460px,64vh,620px);
  display:flex;align-items:center;
  overflow:hidden;
  isolation:isolate;
}
/* warm gold spotlight blooming from the right, per the reference */
.hero__glow{
  position:absolute;z-index:-2;inset:0;
  background:
    radial-gradient(ellipse 60% 56% at 74% 44%,
      rgba(247,241,193,.20) 0%,
      rgba(207,165,90,.15) 30%,
      rgba(142,117,76,.07) 54%,
      transparent 74%);
  filter:blur(24px);
  pointer-events:none;
}
/* oversized semi-transparent wordmark behind the field */
.hero__mark{
  position:absolute;z-index:-1;
  left:50%;top:50%;
  transform:translate(-50%,-58%);
  font-family:var(--font-universalsansdisplay);
  font-size:clamp(120px,27vw,360px);
  font-weight:var(--font-weight-bold);
  letter-spacing:-0.04em;
  line-height:1;
  color:rgba(255,255,255,.045);
  user-select:none;pointer-events:none;white-space:nowrap;
}
.hero__in{width:100%;display:flex;justify-content:center}

.ask{
  display:flex;align-items:center;gap:8px;
  width:min(640px,100%);
  height:56px;padding:0 8px 0 22px;
  background:rgba(18,18,18,.86);
  border:1px solid var(--line);
  border-radius:var(--radius-pills);
  backdrop-filter:blur(8px);
  transition:border-color .2s ease,background-color .2s ease;
}
.ask.is-focus{border-color:rgba(255,255,255,.3);background:rgba(18,18,18,.96)}
.ask__field{flex:1;min-width:0;height:100%;background:none;border:0;outline:none;font-size:16px}
.ask__field::placeholder{color:var(--ink-4)}
.ask__go{
  flex:0 0 auto;width:40px;height:40px;
  display:grid;place-items:center;
  background:none;border:0;border-radius:50%;
  color:#999;cursor:pointer;
  transition:color .18s ease,background-color .18s ease;
}
.ask__go svg{width:18px;height:18px}
.ask__go:hover{color:var(--ink);background:rgba(255,255,255,.08)}

/* ---------- 3-column overview ---------- */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
.col__icon{color:#444;margin-bottom:28px}
.col__icon svg{width:64px;height:64px}
.col__h{margin:0 0 12px;font-size:var(--text-heading-sm);line-height:1.25;letter-spacing:-0.025em;font-weight:var(--font-weight-medium)}
.col__p{margin:0 0 24px;font-size:15px;line-height:1.6;color:var(--ink-3);max-width:34ch}

/* ---------- understand the universe ---------- */
.universe{padding-block:var(--section-gap);border-top:1px solid var(--line-soft);overflow:hidden}
.universe__in{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  gap:48px;align-items:center;
  min-height:460px;
}
.graph{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(520px,58vw);
  color:var(--gold-soft);
  opacity:.5;
  pointer-events:none;
}
.universe__side{position:relative;z-index:1}
.universe__side--r{justify-self:end;max-width:34ch;text-align:right}
.universe__p{margin:0 0 24px;font-size:16px;line-height:1.62;color:var(--ink-3)}

/* ---------- metrics band ---------- */
.band{display:grid;grid-template-columns:repeat(3,1fr)}
.band__cell{padding:8px 32px}
.band__cell+.band__cell{border-left:1px solid var(--line-soft)}
.band__cell:first-child{padding-left:0}
.band__n{
  font-family:var(--font-universalsansdisplay);
  font-size:clamp(34px,4.2vw,var(--text-heading-lg));
  line-height:1;letter-spacing:-0.03em;
  font-weight:var(--font-weight-medium);
}
.band__l{margin-top:12px;font-size:14px;color:var(--ink-4)}

/* ---------- api ---------- */
.api{display:grid;grid-template-columns:.94fr 1.06fr;gap:64px;align-items:center}
.api__copy .h2{margin-bottom:20px}
.stats{display:flex;gap:40px;margin:32px 0}
.stat__n{font-size:18px;font-weight:var(--font-weight-medium)}
.stat__l{margin-top:4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.api__cta{display:flex;gap:12px;flex-wrap:wrap}

.code-wrap{position:relative;isolation:isolate}
.orb{
  position:absolute;z-index:-1;
  inset:-14% 0;
  background:radial-gradient(circle at 68% 40%,rgba(207,165,90,.34) 0%,rgba(142,117,76,.16) 40%,transparent 70%);
  filter:blur(56px);
}
.code{background:var(--bg-raise);border:1px solid var(--line);border-radius:var(--radius-cards);overflow:hidden}
.code__bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--line-soft);
}
.code__file{font-family:var(--font-geistmono);font-size:12px;color:var(--ink-4)}
.code__copy{
  background:none;border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius-pills);
  padding:5px 13px;font-size:11px;color:var(--ink-3);cursor:pointer;
  transition:color .18s ease,border-color .18s ease;
}
.code__copy:hover{color:var(--ink);border-color:rgba(255,255,255,.4)}
.code pre{margin:0;padding:22px 20px;overflow-x:auto}
.code code{font-family:var(--font-geistmono);font-size:13px;line-height:1.75;color:#d6d6d6}
.tk-kw{color:#c792ea}
.tk-str{color:#91c17a}
.tk-fn{color:#82aaff}

/* ---------- supergrok promo ---------- */
.promo{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:28px 32px;
  background:linear-gradient(100deg,var(--surface) 0%,#191510 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-cards);
}
.promo__t{font-size:18px;font-weight:var(--font-weight-medium)}
.promo__p{margin:6px 0 0;font-size:14px;color:var(--ink-3)}

/* ---------- news list ---------- */
.news__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.item{
  display:grid;grid-template-columns:1fr 300px;
  gap:48px;align-items:center;
  padding:36px 0;
  border-bottom:1px solid var(--line-soft);
}
.item:first-of-type{border-top:1px solid var(--line-soft)}
.item__meta{margin-bottom:12px}
.item__cat{
  font-family:var(--font-geistmono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);
}
.item__t{margin:0 0 10px;font-size:22px;line-height:1.25;letter-spacing:-0.02em;font-weight:var(--font-weight-medium)}
.item__s{margin:0 0 20px;font-size:15px;line-height:1.6;color:var(--ink-3);max-width:56ch}
.item__thumb{
  aspect-ratio:16/10;border-radius:var(--radius-smallcards);
  display:flex;align-items:flex-end;padding:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.item__thumb span{
  font-family:var(--font-geistmono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.thumb--a{background:linear-gradient(135deg,#ff7a3d 0%,#d94b7a 52%,#6a3fb5 100%)}
.thumb--b{background:linear-gradient(135deg,#2f7cf6 0%,#3fb8d6 55%,#7de3a8 100%)}
.thumb--c{background:linear-gradient(135deg,#f5c542 0%,#f2803c 50%,#c8324f 100%)}
.thumb--d{background:linear-gradient(135deg,#8b5cf6 0%,#e05fa8 48%,#ffab5e 100%)}

/* ---------- footer ---------- */
.ftr{
  border-top:1px solid var(--line-soft);
  padding-top:64px;
  background:linear-gradient(175deg,var(--bg) 24%,#1d1712 74%,var(--umber-deep) 100%);
}
.ftr__in{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-bottom:56px}
.ftr__h{font-size:13px;font-weight:var(--font-weight-medium);margin-bottom:16px}
.ftr__col a{display:block;padding:6px 0;font-size:14px;color:var(--ink-3);transition:color .18s ease}
.ftr__col a:hover{color:var(--ink)}
.ftr__bot{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:24px 32px;
  border-top:1px solid rgba(255,255,255,.08);
}
.ftr__brand{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-3)}
.ftr__brand svg{width:16px;height:16px;color:var(--ink-3)}
.social{display:flex;gap:6px}
.social a{
  width:32px;height:32px;display:grid;place-items:center;
  border-radius:50%;color:var(--ink-3);
  transition:color .18s ease,background-color .18s ease;
}
.social a:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.social svg{width:15px;height:15px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.reveal.is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .api{grid-template-columns:1fr;gap:48px}
  .cols3{gap:36px}
  .item{grid-template-columns:1fr 240px;gap:32px}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:block}
  .cols3{grid-template-columns:1fr;gap:48px}
  .col__p{max-width:none}
  .universe__in{grid-template-columns:1fr;text-align:center;gap:32px;min-height:0}
  .universe__side--r{justify-self:center;text-align:center;max-width:52ch}
  .graph{position:relative;left:auto;top:auto;transform:none;margin:8px auto;width:min(360px,72vw);opacity:.34}
  .universe__side--l{order:1}
  .graph{order:2}
  .universe__side--r{order:3}
}
@media (max-width:760px){
  .section{padding-block:56px}
  .band{grid-template-columns:1fr}
  .band__cell{padding:20px 0}
  .band__cell+.band__cell{border-left:0;border-top:1px solid var(--line-soft)}
  .stats{gap:24px;flex-wrap:wrap}
  .item{grid-template-columns:1fr;gap:20px}
  .item__thumb{order:-1}
  .promo{flex-direction:column;align-items:flex-start}
  .ftr__in{grid-template-columns:repeat(2,1fr);gap:28px}
  .ftr__bot{flex-direction:column;align-items:flex-start}
}
@media (max-width:420px){
  .ask{height:50px;padding-left:18px}
  .ask__field{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}