/* ISP Fuel Systems — dark industrial-premium design system */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');

:root{
  --bg:#0a0f1c; --surface:#0f1626; --surface-2:#141d31; --surface-3:#1a2540;
  --border:#1f2c44; --border-2:#2a3a59;
  --ink:#e8eef8; --muted:#9aa9c2; --faint:#62718d;
  --accent:#38bdf8;            /* sky — primary action */
  --accent-press:#0ea5e9;
  --energy:#f5a524;            /* amber — fuel/energy accent */
  --ok:#34d399; --warn:#fbbf24; --danger:#f87171;
  --r:14px; --r-sm:10px; --maxw:1180px;
  --shadow:0 18px 50px -24px rgba(0,0,0,.7);
  --ring:0 0 0 3px rgba(56,189,248,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Open Sans",system-ui,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1100px 520px at 85% -8%, rgba(56,189,248,.08), transparent 60%),
    radial-gradient(900px 480px at 0% 0%, rgba(245,165,36,.06), transparent 55%);
  background-attachment:fixed;
}
h1,h2,h3,h4{font-family:"Poppins",sans-serif; line-height:1.15; margin:0 0 .4em; letter-spacing:-.01em}
a{color:var(--accent); text-decoration:none}
a:hover{color:#7dd3fc}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace}

/* ---------- top nav ---------- */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:rgba(10,15,28,.82); border-bottom:1px solid var(--border)}
.nav-inner{display:flex; align-items:center; gap:22px; height:64px}
.brand{display:flex; align-items:center; gap:11px; font-family:"Poppins"; font-weight:700; color:var(--ink)}
.brand .logo{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--accent),var(--energy)); color:#06101f; font-weight:800; font-size:15px}
.brand small{display:block; font-weight:500; font-size:11px; color:var(--faint); letter-spacing:.02em; margin-top:-2px}
.nav-links{display:flex; gap:4px; margin-left:8px; flex-wrap:wrap}
.nav-links a{color:var(--muted); padding:8px 13px; border-radius:9px; font-size:14.5px; font-weight:600;
  transition:background .18s,color .18s}
.nav-links a:hover{color:var(--ink); background:var(--surface-2)}
.nav-links a.active{color:var(--ink); background:var(--surface-3)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:12px}
.avatar{width:34px;height:34px;border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px;
  background:var(--surface-3); border:1px solid var(--border-2); color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:"Open Sans"; font-weight:600; font-size:15px;
  padding:11px 18px; border-radius:var(--r-sm); border:1px solid transparent; cursor:pointer; transition:.18s; min-height:44px}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--accent); color:#04121f}
.btn-primary:hover{background:var(--accent-press); color:#04121f}
.btn-ghost{background:transparent; border-color:var(--border-2); color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn:focus-visible{outline:none; box-shadow:var(--ring)}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------- cards / layout ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:24px; box-shadow:var(--shadow)}
.card-2{background:var(--surface-2)}
.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.kicker{font-family:ui-monospace,monospace; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--faint)}
.section{padding:54px 0}
.divider{height:1px;background:var(--border);margin:0}

/* badges / chips */
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.04em;
  padding:4px 10px; border-radius:999px; border:1px solid var(--border-2); color:var(--muted)}
.badge.ok{color:var(--ok); border-color:rgba(52,211,153,.4)}
.badge.energy{color:var(--energy); border-color:rgba(245,165,36,.4)}
.badge.sky{color:var(--accent); border-color:rgba(56,189,248,.4)}

/* hero */
.hero{padding:64px 0 28px}
.hero h1{font-size:clamp(34px,5.4vw,60px); font-weight:800}
.hero p.lede{font-size:clamp(16px,2vw,20px); color:var(--muted); max-width:680px}
.statline{display:flex; gap:28px; flex-wrap:wrap; margin-top:26px}
.stat .n{font-family:"Poppins"; font-weight:700; font-size:26px}
.stat .l{font-size:13px; color:var(--faint)}

/* forms */
.field{margin-bottom:16px}
.field label{display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:6px}
.field input{width:100%; background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--r-sm);
  color:var(--ink); padding:13px 14px; font-size:15px; font-family:"Open Sans"; min-height:46px; transition:.18s}
.field input:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring)}
.field .err{color:var(--danger); font-size:13px; margin-top:6px}
.helptext{color:var(--faint); font-size:12.5px; margin-top:6px}

/* auth shell */
.auth-wrap{min-height:100dvh; display:grid; place-items:center; padding:24px}
.auth-card{width:100%; max-width:412px}
.auth-card .logo-lg{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--accent),var(--energy)); color:#06101f; font-weight:800; font-size:22px; margin-bottom:18px}

/* messages */
.msgs{position:fixed; top:78px; right:18px; z-index:80; display:flex; flex-direction:column; gap:10px; max-width:360px}
.msg{padding:12px 16px; border-radius:var(--r-sm); border:1px solid var(--border-2); background:var(--surface-2); font-size:14px;
  box-shadow:var(--shadow); animation:slidein .35s ease}
.msg.error{border-color:rgba(248,113,113,.5)} .msg.success{border-color:rgba(52,211,153,.5)} .msg.info{border-color:rgba(56,189,248,.5)}
@keyframes slidein{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* gallery */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px}
.tile{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; transition:.18s; display:block}
.tile:hover{border-color:var(--accent); transform:translateY(-3px)}
.tile .thumb{aspect-ratio:4/3; background:var(--surface-3); display:grid; place-items:center; color:var(--faint); overflow:hidden}
.tile .thumb img{width:100%;height:100%;object-fit:cover}
.tile .meta{padding:13px 15px}
.tile .meta .t{font-weight:600; font-size:14.5px; line-height:1.3}
.filters{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 22px}
.filters a{font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px; border:1px solid var(--border-2); color:var(--muted)}
.filters a.active{background:var(--surface-3); color:var(--ink); border-color:var(--border-2)}

/* agent chat */
.chat{display:flex; flex-direction:column; gap:14px; min-height:280px}
.bubble{max-width:80%; padding:14px 17px; border-radius:14px; font-size:15px; white-space:pre-wrap; line-height:1.55}
.bubble.user{align-self:flex-end; background:var(--accent); color:#04121f; font-weight:500}
.bubble.bot{align-self:flex-start; background:var(--surface-2); border:1px solid var(--border)}
.bubble.bot .src{margin-top:10px; font-size:12px; color:var(--faint)}
.askbar{display:flex; gap:10px; margin-top:18px}
.askbar input{flex:1}
.suggest{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.suggest button{font-size:13px; color:var(--muted); background:var(--surface-2); border:1px solid var(--border);
  border-radius:999px; padding:7px 13px; cursor:pointer; transition:.18s}
.suggest button:hover{border-color:var(--accent); color:var(--ink)}
.spinner{width:16px;height:16px;border:2px solid var(--border-2);border-top-color:var(--accent);border-radius:50%;
  display:inline-block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* value-add */
.va{border-left:3px solid var(--border-2); padding:16px 20px; border-radius:0 var(--r-sm) var(--r-sm) 0; background:var(--surface)}
.va.client{border-left-color:var(--energy)} .va.proposed{border-left-color:var(--accent)}
.va h4{margin:6px 0 6px; font-size:17px}
.va p{margin:0; color:var(--muted); font-size:14.5px}

footer.ft{border-top:1px solid var(--border); padding:40px 0 60px; color:var(--faint); font-size:13.5px; margin-top:40px}

@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}