/* FLAIT design system — ported at layout fidelity from the Lovable export
   (agentic-trip-whisperer). Brand tokens v1.0. Semantic law: green = verdicts +
   confirmed bookings ONLY; amber = money-about-to-move ONLY; accent = interactive. */

:root {
  --bg:#0B0E14; --surface:#131825; --surface-2:#1A2132; --surface-3:#222B40;
  --line:#1F2737; --text:#E8EDF6; --dim:#8B96AB;
  --accent:#5B8CFF; --accent-hover:#6E9AFF; --accent-pressed:#4A7AE8;
  --green:#3DDC84; --amber:#FFC24B; --red:#FF6B6B;
  --green-a12:rgba(61,220,132,.12); --green-a22:rgba(61,220,132,.22);
  --amber-a12:rgba(255,194,75,.12); --amber-a22:rgba(255,194,75,.22);
  --accent-a12:rgba(91,140,255,.12);
  --font-ui:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-data:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --r-chip:11px; --r-card:12px; --r-input:9px;
  --ease:cubic-bezier(.2,0,0,1);
  --shadow-card:0 1px 2px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.18);
}
* { box-sizing:border-box; margin:0; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font:15px/1.5 var(--font-ui);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3 { text-wrap:balance; }
a { color:var(--accent); text-decoration:none; }
button { font:inherit; cursor:pointer; transition:transform .12s var(--ease),
  background .12s var(--ease), border-color .12s var(--ease), opacity .12s var(--ease); }
button:active:not(:disabled) { transform:scale(.96); }
code, .mono, .price, .iata, .ref, .stat { font-family:var(--font-data); font-variant-numeric:tabular-nums; }
code { background:var(--surface); border:1px solid var(--line); padding:2px 6px;
  border-radius:6px; font-size:12.5px; }

/* motion */
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.reveal { animation:fadeUp .4s var(--ease) both; }
.reveal.d1 { animation-delay:.08s; } .reveal.d2 { animation-delay:.16s; }
.reveal.d3 { animation-delay:.24s; }
@media (prefers-reduced-motion: reduce) { .reveal { animation:none; } html { scroll-behavior:auto; } }

/* ── nav ── */
.nav { position:sticky; top:0; z-index:30; border-bottom:1px solid rgba(31,39,55,.6);
  background:rgba(11,14,20,.7); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.nav-inner { max-width:1152px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:16px 20px; }
.lockup { display:inline-flex; align-items:center; gap:8px; color:var(--text);
  font-weight:700; font-size:20px; letter-spacing:-.4px; }
.lockup .dot { color:var(--accent); }
.lockup svg { display:block; }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a { font-size:13px; color:var(--dim); transition:color .12s var(--ease); }
.nav-links a:hover, .nav-links a.on { color:var(--text); }
.gh-pill { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line);
  background:var(--surface-2); border-radius:var(--r-input); padding:6px 12px;
  font-size:13px; color:var(--text) !important; }
.gh-pill:hover { border-color:rgba(91,140,255,.5); }
.gh-pill .star { color:var(--amber); }
@media (max-width: 760px) { .nav-links a:not(.gh-pill) { display:none; } }

/* ── layout ── */
.section { padding:56px 20px; }
.section.tight { padding:24px 20px; }
.wrap-3 { max-width:768px; margin:0 auto; }
.wrap-5 { max-width:1024px; margin:0 auto; }
.wrap-6 { max-width:1152px; margin:0 auto; }
.section h2 { font-size:24px; font-weight:650; line-height:1.3; }
.section .sub { margin-top:6px; font-size:13px; color:var(--dim); }

/* ── hero ── */
.hero { position:relative; overflow:hidden; padding:64px 20px 40px; text-align:center; }
.hero::before { content:''; position:absolute; inset:0 -10% auto; height:520px; z-index:0;
  pointer-events:none; background:radial-gradient(60% 55% at 50% 0%,
  rgba(91,140,255,.22), rgba(91,140,255,.04) 45%, transparent 70%); }
.hero > * { position:relative; z-index:1; }
.hero h1 { font-size:clamp(36px,6vw,56px); font-weight:700; line-height:1.05;
  letter-spacing:-.02em; max-width:768px; margin:0 auto; }
.hero .sub { margin:20px auto 0; max-width:576px; font-size:15px; color:var(--dim); }
.hero .tagline { margin-top:16px; font-size:13px; color:var(--dim); opacity:.7; }

/* hero form card */
.form-card { max-width:768px; margin:40px auto 0; text-align:left;
  background:rgba(26,33,50,.7); border:1px solid var(--line); border-radius:16px;
  padding:20px 22px; box-shadow:var(--shadow-card);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.fields { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:860px) { .fields { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .fields { grid-template-columns:1fr; } }
.field { display:flex; flex-direction:column; gap:6px; }
.field .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); }
.field .box { display:flex; align-items:center; gap:4px; border:1px solid var(--line);
  background:var(--surface); border-radius:var(--r-input); padding:10px 12px;
  transition:border-color .12s var(--ease); }
.field .box:focus-within { border-color:var(--accent); }
.field input, .field select { width:100%; background:transparent; border:0; color:var(--text);
  font:inherit; outline:none; }
.field input::placeholder { color:rgba(139,150,171,.7); }
.field .prefix { color:var(--dim); }
.form-row { margin-top:16px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; }
.btn { background:var(--accent); border:0; border-radius:var(--r-input); color:#0B0E14;
  font-weight:650; font-size:13px; padding:10px 20px; }
.btn:hover:not(:disabled) { background:var(--accent-hover); }
.btn:disabled { opacity:.6; cursor:default; }
.btn.big { font-size:15px; padding:12px 26px; }

/* arm switch (amber = money movement) */
.arm { display:inline-flex; align-items:center; gap:10px; font-size:13px;
  color:var(--text); cursor:pointer; user-select:none; }
.arm input { appearance:none; -webkit-appearance:none; width:44px; height:24px; flex:none;
  border-radius:20px; background:var(--surface-3); position:relative; cursor:pointer;
  transition:background .18s var(--ease); margin:0; }
.arm input::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px;
  border-radius:50%; background:var(--bg); transition:left .18s var(--ease); }
.arm input:checked { background:var(--amber); }
.arm input:checked::after { left:22px; }
.arm:has(input:checked) .arm-label { color:var(--amber); }
.arm-note { font-size:11px; color:var(--dim); }
.arm-panel { margin-top:14px; border:1px solid var(--amber-a22); background:var(--amber-a12);
  border-radius:var(--r-input); padding:14px 16px; }
.arm-panel .warn { font-size:11px; color:var(--amber); margin-bottom:10px; }
.arm-panel .fields { grid-template-columns:repeat(4,1fr); }
@media (max-width:860px) { .arm-panel .fields { grid-template-columns:1fr 1fr; } }

/* stats strip */
.stats { margin:28px auto 0; display:flex; flex-wrap:wrap; justify-content:center;
  gap:6px 12px; font-size:13px; color:var(--dim); }
.stats b { color:var(--text); font-family:var(--font-data); font-weight:600; }

/* steps */
.steps { margin-top:24px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:860px) { .steps { grid-template-columns:1fr; } }
.step { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:20px; }
.step .n { display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid rgba(91,140,255,.4); background:var(--accent-a12);
  color:var(--accent); font:600 13px var(--font-data); }
.step h3 { margin-top:14px; font-size:17px; font-weight:600; }
.step p { margin-top:8px; font-size:13px; line-height:1.6; color:var(--dim); }

/* guard banner */
.guard { border:1px solid var(--green-a22); background:rgba(61,220,132,.07);
  border-radius:var(--r-card); padding:20px 24px; font-size:15px; line-height:1.6;
  color:var(--dim); }
.guard b { color:var(--green); }

/* receipt */
.receipt { max-width:576px; margin:0 auto; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:24px; box-shadow:var(--shadow-card); }
.receipt .chip-line { display:flex; align-items:center; gap:8px; color:var(--green);
  font-size:13px; font-weight:650; }
.receipt .body { margin-top:14px; }
.receipt .meta { margin-top:6px; font-size:13px; color:var(--dim); }

/* cards / grid (deals) */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px;
  margin-top:20px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:16px 18px; box-shadow:var(--shadow-card);
  transition:background .18s var(--ease), transform .18s var(--ease); }
.grid .card:hover { background:var(--surface-2); transform:translateY(-2px); }
.route { font-size:17px; font-weight:600; font-family:var(--font-data); }
.route .arrow { color:var(--accent); }
.cities { color:var(--dim); font-size:11px; margin-top:2px; }
.price-lg { font-size:24px; font-weight:700; margin:8px 0 4px; font-family:var(--font-data); }
.badge { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:650;
  padding:4px 10px; border-radius:var(--r-chip); margin:2px 6px 2px 0; border:1px solid transparent; }
.b-green { background:var(--green-a12); border-color:var(--green-a22); color:var(--green); }
.b-amber { background:var(--amber-a12); border-color:var(--amber-a22); color:var(--amber); }
.b-dim { background:var(--surface-2); border-color:var(--line); color:var(--dim); }
.b-nodata { background:transparent; border:1px dashed var(--line); color:var(--dim); }
.meta { color:var(--dim); font-size:12.5px; margin-top:8px; }
a.book { font-size:13px; }
.sparkrow { display:flex; align-items:center; gap:10px; margin-top:10px; }
.sparkrow .range { color:var(--dim); font-size:12px; font-family:var(--font-data); }

/* verdict chip (oracle) */
.verdict { display:inline-flex; align-items:flex-start; gap:8px; border-radius:var(--r-chip);
  border:1px solid; padding:10px 14px; font-size:13px; font-weight:650; line-height:1.4; }
.v-good { background:var(--green-a12); border-color:var(--green-a22); color:var(--green); }
.v-mid { background:var(--amber-a12); border-color:var(--amber-a22); color:var(--amber); }
.v-unknown { background:transparent; border:1px dashed var(--line); color:var(--dim); }

/* snips (agents) */
.snip { display:flex; align-items:center; gap:8px; margin:8px 0; flex-wrap:wrap; }
.snip .lbl { color:var(--dim); font-size:12px; flex:0 0 104px; }
.snip code { flex:1; min-width:200px; overflow-x:auto; white-space:nowrap; padding:8px 10px;
  background:var(--surface-2); }
.snip button { background:transparent; border:1px solid var(--line); border-radius:6px;
  color:var(--accent); font-size:12px; padding:5px 12px; }
.snip button:hover { border-color:var(--accent); }
.toolmenu { width:100%; border-collapse:collapse; margin-top:16px; font-size:13.5px; }
.toolmenu td { padding:12px 10px; border-top:1px solid var(--line); vertical-align:top; }
.tag { font-size:11px; font-weight:700; letter-spacing:.5px; padding:3px 9px;
  border-radius:var(--r-chip); white-space:nowrap; }
.tag.read { background:var(--accent-a12); color:var(--accent); }
.tag.act { background:var(--amber-a12); color:var(--amber); }
.pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.pill { font-size:12px; font-family:var(--font-data); padding:5px 12px;
  border-radius:20px; border:1px solid var(--line); background:var(--surface-2); color:var(--dim); }
.pill.green { border-color:var(--green-a22); background:var(--green-a12); color:var(--green); }
.pill.amber { border-color:var(--amber-a22); background:var(--amber-a12); color:var(--amber); }
.pill.red { border-color:rgba(255,107,107,.25); background:rgba(255,107,107,.12); color:var(--red); }

/* forms misc */
.form-msg { font-size:13px; margin-top:10px; min-height:18px; }
.form-msg.ok { color:var(--green); }
.form-msg.err { color:var(--amber); }
.hp { position:absolute; left:-9999px; opacity:0; }

/* trips */
.trip-row { display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; padding:14px 0; border-top:1px solid var(--line); font-size:14px; }
.trip-row:first-child { border-top:0; }
.trip-row .facts { font-family:var(--font-data); }

/* footer */
.footer { border-top:1px solid rgba(31,39,55,.6); padding:40px 20px; margin-top:40px; }
.footer-inner { max-width:1152px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--dim); font-size:13px; }