/* ============================================================
   Elias Arellano Campos — AI Engineer
   Technical-editorial system
   ============================================================ */

:root{
  /* surfaces */
  --bg:        oklch(0.165 0.005 65);
  --bg-2:      oklch(0.195 0.006 65);
  --surface:   oklch(0.215 0.007 66);
  --surface-2: oklch(0.255 0.008 66);

  /* ink */
  --ink:       oklch(0.965 0.004 85);
  --ink-2:     oklch(0.80 0.006 80);
  --muted:     oklch(0.66 0.008 78);
  --faint:     oklch(0.52 0.008 78);

  /* accent — luminous signal green */
  --acc:       oklch(0.85 0.155 152);
  --acc-deep:  oklch(0.72 0.15 152);
  --acc-soft:  oklch(0.85 0.155 152 / 0.12);
  --acc-line:  oklch(0.85 0.155 152 / 0.30);

  /* hairlines */
  --line:      oklch(1 0 0 / 0.085);
  --line-2:    oklch(1 0 0 / 0.16);

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);

  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --disp: "Space Grotesk", "IBM Plex Sans", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::selection,*::selection{ background:var(--acc-soft); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ---------- shared layout ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; padding-block:clamp(72px,11vh,140px); }
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex; align-items:center; gap:12px;
}
.eyebrow .num{ color:var(--acc); }
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--line); }
.eyebrow.tight::after{ display:none; }

.h-sec{
  font-family:var(--disp);
  font-weight:600;
  font-size:clamp(30px,4.6vw,56px);
  line-height:1.02;
  letter-spacing:-0.02em;
  margin-top:22px;
  text-wrap:balance;
}
.lead{
  color:var(--ink-2);
  font-size:clamp(16px,1.5vw,19px);
  max-width:60ch;
  margin-top:18px;
  text-wrap:pretty;
}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad);
  background:oklch(0.165 0.005 65 / 0.6);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.nav.scrolled{ border-bottom-color:var(--line); background:oklch(0.15 0.005 65 / 0.82); }
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--mono); font-size:13px; letter-spacing:.04em; white-space:nowrap; min-width:0; }
.brand b,.brand span{ white-space:nowrap; }
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 4px var(--acc-soft); animation:pulse 3.5s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px var(--acc-soft);} 50%{ box-shadow:0 0 0 7px transparent;} }
.brand b{ font-weight:600; color:var(--ink); }
.brand span{ color:var(--muted); }
.nav-links{ display:flex; align-items:center; gap:26px; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; white-space:nowrap; }
.nav-links a{ color:var(--muted); transition:color .25s var(--ease); position:relative; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.cta{ color:var(--bg); background:var(--acc); padding:9px 18px; border-radius:100px; font-weight:600; white-space:nowrap; }
.nav-links a.cta:hover{ background:var(--ink); }
.nav-links .hide-sm{ }
@media(max-width:980px){ .nav-links a.hide-sm[href="#stack"]{ display:none; } }
@media(max-width:860px){ .nav-links .hide-sm{ display:none; } .brand span{ display:none; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13px; letter-spacing:.03em; font-weight:500;
  padding:13px 22px; border-radius:100px; border:1px solid var(--line-2);
  color:var(--ink); background:transparent; cursor:pointer;
  transition:all .28s var(--ease);
}
.btn:hover{ border-color:var(--acc-line); background:var(--acc-soft); transform:translateY(-1px); }
.btn.primary{ background:var(--acc); color:var(--bg); border-color:var(--acc); font-weight:600; }
.btn.primary:hover{ background:var(--ink); border-color:var(--ink); box-shadow:0 12px 40px -12px var(--acc); }
.btn .arr{ transition:transform .28s var(--ease); }
.btn:hover .arr{ transform:translate(3px,-3px); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:120px; padding-bottom:60px; overflow:hidden; }
#wave{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.55; }
.hero::after{ /* vignette to keep text legible */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 15% 40%, transparent 30%, var(--bg) 92%);
}
.hero .wrap{ position:relative; z-index:2; width:100%; }

.status{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--acc); padding:7px 14px; border:1px solid var(--acc-line); border-radius:100px;
  background:var(--acc-soft); margin-bottom:30px;
}
.status .led{ width:7px; height:7px; border-radius:50%; background:var(--acc); animation:pulse 2.4s infinite; }

.hero h1{
  font-family:var(--disp); font-weight:600;
  font-size:clamp(44px,8.2vw,108px); line-height:0.93; letter-spacing:-0.035em;
  text-wrap:balance;
}
.hero h1 .grad{ color:var(--acc); }
.hero .sub{
  margin-top:30px; max-width:54ch;
  font-size:clamp(17px,1.8vw,22px); line-height:1.5; color:var(--ink-2); text-wrap:pretty;
}
.hero .sub b{ color:var(--ink); font-weight:600; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.facts{
  display:flex; flex-wrap:wrap; gap:0; margin-top:54px;
  border-top:1px solid var(--line); padding-top:22px;
}
.fact{ padding-right:38px; margin-right:38px; border-right:1px solid var(--line); }
.fact:last-child{ border-right:0; }
.fact .k{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.fact .v{ margin-top:5px; font-size:15px; color:var(--ink-2); font-weight:500; }
@media(max-width:620px){
  .fact{ padding-right:22px; margin-right:22px; }
  .facts{ gap:14px 0; }
}

.scrollcue{ position:absolute; left:var(--pad); bottom:26px; z-index:2; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:10px; }
.scrollcue .bar{ width:34px; height:1px; background:var(--line-2); position:relative; overflow:hidden; }
.scrollcue .bar::after{ content:""; position:absolute; inset:0; width:40%; background:var(--acc); animation:slide 2.2s var(--ease) infinite; }
@keyframes slide{ 0%{ transform:translateX(-110%);} 100%{ transform:translateX(260%);} }

/* ============================================================
   METRICS BAND
   ============================================================ */
.metrics{ border-block:1px solid var(--line); background:linear-gradient(180deg, var(--bg-2), var(--bg)); }
.metrics .grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.metric{ padding:clamp(34px,5vw,60px) clamp(20px,3vw,40px); border-right:1px solid var(--line); position:relative; }
.metric:last-child{ border-right:0; }
.metric .big{ font-family:var(--disp); font-weight:600; font-size:clamp(40px,5.6vw,72px); line-height:1; letter-spacing:-0.03em; color:var(--ink); font-feature-settings:"tnum"; }
.metric .big .unit{ color:var(--acc); font-size:0.5em; margin-left:3px; }
.metric .lab{ margin-top:14px; font-size:14.5px; color:var(--ink-2); line-height:1.4; }
.metric .ctx{ margin-top:7px; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--faint); }
@media(max-width:860px){ .metrics .grid{ grid-template-columns:repeat(2,1fr);} .metric:nth-child(2){border-right:0;} .metric:nth-child(1),.metric:nth-child(2){border-bottom:1px solid var(--line);} }
@media(max-width:480px){ .metrics .grid{ grid-template-columns:1fr;} .metric{ border-right:0; border-bottom:1px solid var(--line);} .metric:last-child{border-bottom:0;} }

/* ============================================================
   WORK
   ============================================================ */
.proj{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(24px,5vw,72px);
  padding-block:clamp(40px,6vw,64px); border-top:1px solid var(--line);
  align-items:start;
}
.proj:first-of-type{ border-top:0; }
.proj.flagship{ display:block; }
.proj-meta{ position:sticky; top:96px; }
.proj-index{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--faint); }
.proj-domain{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); }
.proj-domain .sq{ width:7px; height:7px; background:var(--acc); }
.proj h3{ font-family:var(--disp); font-weight:600; font-size:clamp(26px,3.2vw,40px); line-height:1.05; letter-spacing:-0.02em; margin-top:16px; }
.proj .blurb{ color:var(--ink-2); margin-top:16px; max-width:46ch; text-wrap:pretty; }
.proj-link{ display:inline-flex; align-items:center; gap:9px; margin-top:22px; font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; color:var(--ink); border-bottom:1px solid var(--line-2); padding-bottom:4px; transition:all .25s var(--ease); white-space:nowrap; }
.proj-link:hover{ color:var(--acc); border-color:var(--acc-line); gap:13px; }

.proj-body{ }
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.chip{
  font-family:var(--mono); font-size:12px; letter-spacing:.02em;
  padding:7px 13px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2);
}
.chip b{ color:var(--acc); font-weight:600; }

.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.kpi{ background:var(--bg-2); padding:20px 18px; }
.kpi .n{ font-family:var(--disp); font-weight:600; font-size:clamp(24px,2.6vw,34px); line-height:1; color:var(--ink); letter-spacing:-0.02em; font-feature-settings:"tnum"; }
.kpi .n .u{ color:var(--acc); font-size:.55em; }
.kpi .l{ margin-top:9px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); line-height:1.4; }
@media(max-width:520px){ .kpis{ grid-template-columns:1fr 1fr;} }

.stack{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.stack span{ font-family:var(--mono); font-size:11.5px; color:var(--muted); padding:5px 10px; border:1px solid var(--line); border-radius:100px; }

/* flagship inner layout */
.flag-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; margin-top:8px; }
@media(max-width:900px){ .proj{ grid-template-columns:1fr; } .proj-meta{ position:static; } .flag-grid{ grid-template-columns:1fr; } }

/* model comparison table (flagship) */
.modeltable{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12.5px; margin-top:6px; }
.modeltable th{ text-align:right; font-weight:500; color:var(--faint); letter-spacing:.06em; text-transform:uppercase; font-size:10.5px; padding:0 0 12px; border-bottom:1px solid var(--line); }
.modeltable th:first-child{ text-align:left; }
.modeltable td{ text-align:right; padding:13px 0; border-bottom:1px solid var(--line); color:var(--ink-2); }
.modeltable td:first-child{ text-align:left; color:var(--ink); }
.modeltable tr.best td{ color:var(--ink); }
.modeltable tr.best td:first-child{ color:var(--acc); }
.modeltable tr.best .bar-cell{ position:relative; }
.barwrap{ display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.bar{ height:6px; border-radius:4px; background:var(--surface-2); width:90px; overflow:hidden; }
.bar i{ display:block; height:100%; background:var(--acc-deep); border-radius:4px; transform-origin:left; transition:width 1.1s var(--ease); }
.modeltable tr.best .bar i{ background:var(--acc); }

/* ============================================================
   ASK THE AGENT
   ============================================================ */
.agent-sec{ background:linear-gradient(180deg,var(--bg),var(--bg-2)); border-block:1px solid var(--line); }
.agent-head{ max-width:62ch; }
.term{
  margin-top:42px; border:1px solid var(--line-2); border-radius:16px; overflow:hidden;
  background:oklch(0.145 0.005 65); box-shadow:0 40px 90px -50px #000;
}
.term-bar{ display:flex; align-items:center; gap:14px; padding:13px 18px; border-bottom:1px solid var(--line); background:var(--bg-2); }
.term-dots{ display:flex; gap:7px; }
.term-dots i{ width:11px; height:11px; border-radius:50%; background:var(--surface-2); }
.term-title{ font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.04em; }
.term-title b{ color:var(--ink-2); font-weight:500; }
.term-status{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--acc); display:flex; align-items:center; gap:7px; }
.term-status .led{ width:6px; height:6px; border-radius:50%; background:var(--acc); animation:pulse 2.4s infinite; }

.term-body{ padding:24px clamp(18px,3vw,30px); height:min(46vh,420px); overflow-y:auto; scroll-behavior:smooth; }
.term-body::-webkit-scrollbar{ width:8px; }
.term-body::-webkit-scrollbar-thumb{ background:var(--surface-2); border-radius:8px; }

.msg{ display:flex; gap:14px; margin-bottom:22px; animation:rise .5s var(--ease) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
.msg .av{ flex:none; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-family:var(--mono); font-size:11px; font-weight:600; }
.msg.user .av{ background:var(--surface-2); color:var(--ink-2); }
.msg.bot .av{ background:var(--acc-soft); color:var(--acc); border:1px solid var(--acc-line); }
.msg .body{ padding-top:4px; font-size:15px; line-height:1.6; color:var(--ink-2); max-width:64ch; }
.msg.user .body{ color:var(--ink); }
.msg .body b{ color:var(--ink); font-weight:600; }
/* chunked answer formatting — paragraphs + bullet lists for skimmability */
.msg .body .ln{ margin:0 0 11px; }
.msg .body .ln:last-child{ margin-bottom:0; }
.msg .body .ans-list{ margin:6px 0 13px; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.msg .body .ans-list:last-child{ margin-bottom:0; }
.msg .body .ans-list li{ position:relative; padding-left:19px; }
.msg .body .ans-list li::before{ content:""; position:absolute; left:1px; top:9px; width:6px; height:6px; border-radius:1px; background:var(--acc); }
.msg .who{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.msg.bot .who{ color:var(--acc); }

.typing{ display:inline-flex; gap:5px; align-items:center; padding-top:4px; }
.typing i{ width:7px; height:7px; border-radius:50%; background:var(--muted); animation:blink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.2s; } .typing i:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,60%,100%{ opacity:.25; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }

.term-foot{ border-top:1px solid var(--line); padding:16px clamp(18px,3vw,30px); background:var(--bg-2); }
.suggest{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:14px; }
.suggest button{
  font-family:var(--mono); font-size:11.5px; color:var(--muted); cursor:pointer;
  padding:7px 12px; border-radius:100px; border:1px solid var(--line); background:transparent;
  transition:all .22s var(--ease);
}
.suggest button:hover{ color:var(--acc); border-color:var(--acc-line); background:var(--acc-soft); }
.inputrow{ display:flex; gap:10px; align-items:center; }
.inputrow .prompt{ font-family:var(--mono); color:var(--acc); font-size:15px; }
.inputrow input{
  flex:1; background:transparent; border:0; outline:0; color:var(--ink);
  font-family:var(--mono); font-size:14.5px; padding:8px 0;
}
.inputrow input::placeholder{ color:var(--faint); }
.inputrow .send{
  flex:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink); cursor:pointer; display:grid; place-items:center;
  transition:all .22s var(--ease);
}
.inputrow .send:hover{ background:var(--acc); color:var(--bg); border-color:var(--acc); }
.inputrow .send:disabled{ opacity:.4; cursor:not-allowed; }
.agent-note{ margin-top:16px; font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.03em; display:flex; align-items:center; gap:8px; }

/* ============================================================
   CAPABILITIES
   ============================================================ */
.caps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:48px; }
.cap{ background:var(--bg-2); padding:30px 26px; transition:background .3s var(--ease); }
.cap:hover{ background:var(--surface); }
.cap .h{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); margin-bottom:18px; }
.cap ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.cap li{ font-size:14px; color:var(--ink-2); display:flex; gap:10px; align-items:baseline; }
.cap li::before{ content:""; flex:none; width:5px; height:5px; background:var(--faint); border-radius:1px; transform:translateY(-2px); }
@media(max-width:900px){ .caps{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .caps{ grid-template-columns:1fr;} }

/* ============================================================
   ABOUT + CONTACT
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,90px); align-items:start; }
@media(max-width:820px){ .about-grid{ grid-template-columns:1fr; } }
.about-body p{ color:var(--ink-2); font-size:clamp(16px,1.5vw,18px); margin-top:18px; text-wrap:pretty; max-width:52ch; }
.about-body p:first-child{ margin-top:0; }
.about-body b{ color:var(--ink); font-weight:600; }
.about-body .lq{ font-family:var(--disp); font-size:clamp(22px,2.6vw,30px); line-height:1.25; letter-spacing:-0.01em; color:var(--ink); margin-bottom:30px; text-wrap:balance; }
.about-body .lq em{ color:var(--acc); font-style:normal; }

.contact-card{ border:1px solid var(--line); border-radius:18px; background:var(--bg-2); overflow:hidden; }
.contact-card .top{ padding:30px; border-bottom:1px solid var(--line); }
.contact-card .top .h{ font-family:var(--disp); font-size:24px; font-weight:600; letter-spacing:-0.01em; }
.contact-card .top p{ color:var(--muted); margin-top:8px; font-size:14.5px; }
.clink{ display:flex; align-items:center; gap:16px; padding:20px 30px; border-bottom:1px solid var(--line); transition:background .25s var(--ease); }
.clink:last-child{ border-bottom:0; }
.clink:hover{ background:var(--surface); }
.clink:hover .ic{ border-color:var(--acc-line); color:var(--acc); }
.clink .ic{ flex:none; width:42px; height:42px; border-radius:11px; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--ink-2); transition:all .25s var(--ease); }
.clink .ic svg{ width:19px; height:19px; }
.clink .t{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.clink .t .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.clink .t .v{ font-size:15px; color:var(--ink); font-weight:500; overflow-wrap:anywhere; }
.clink .arr{ margin-left:auto; color:var(--faint); transition:transform .25s var(--ease), color .25s; }
.clink:hover .arr{ color:var(--acc); transform:translate(3px,-3px); }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--line); padding-block:40px; }
.footer .wrap{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; }
.footer .l{ font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.04em; }
.footer .l b{ color:var(--ink-2); font-weight:500; }
.footer .r{ display:flex; gap:24px; font-family:var(--mono); font-size:12px; }
.footer .r a{ color:var(--muted); transition:color .25s; }
.footer .r a:hover{ color:var(--acc); }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation:none !important; }
  html{ scroll-behavior:auto; }
}