/* ============================================================
   Nexus SaaS — product showcase (800 px column)
   Cool paper ground, charcoal ink, Nexus green as the signal.
   Screenshots sit in browser frames; every image is a real
   capture of the running demo.
   ============================================================ */
:root{
  --ground:#F5F7F6; --surface:#FFFFFF; --ink:#0F1A14; --muted:#5B6B62; --faint:#8C9A92;
  --line:#E3E8E5; --brand:#16A34A; --brand-deep:#15803D; --brand-soft:#DCFCE7; --brand-wash:#F0FDF4;
  --amber:#F59E0B; --amber-soft:#FEF3C7; --amber-deep:#B45309;
  --blue:#2563EB; --blue-soft:#DBEAFE; --purple:#7C3AED; --purple-soft:#EDE9FE; --coral:#EA580C; --coral-soft:#FFEDD5;
  --display:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --col:800px; --r:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-feature-settings:"cv03","cv04","cv11";background:var(--ground);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--display);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.col{max-width:var(--col);margin:0 auto;padding:0 20px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-deep);background:var(--brand-soft);border-radius:100px;padding:6px 14px}
.kicker.amber{color:var(--amber-deep);background:var(--amber-soft)}
.kicker.blue{color:var(--blue);background:var(--blue-soft)}
.kicker.purple{color:var(--purple);background:var(--purple-soft)}
.kicker.coral{color:var(--coral);background:var(--coral-soft)}

/* top bar */
.top{position:sticky;top:0;z-index:30;background:rgba(245,247,246,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .col{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.logo i{width:32px;height:32px;border-radius:9px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:1rem}
.top nav{display:flex;gap:18px;font-size:.86rem;font-weight:600;color:var(--muted)}
.top nav a:hover{color:var(--brand-deep)}
@media(max-width:700px){.top nav{display:none}}

/* hero */
.hero{padding:64px 0 40px;text-align:center;position:relative}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(640px 360px at 50% -10%,rgba(22,163,74,.14),transparent 70%);pointer-events:none}
.hero .col{position:relative}
.hero h1{font-size:clamp(2.3rem,1.6rem + 3vw,3.5rem);font-weight:800;margin:20px auto 16px;max-width:720px}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:12px 22px;font-weight:700;font-size:.95rem;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 12px 28px rgba(22,163,74,.35)}
.btn-primary:hover{background:var(--brand-deep)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fab{position:fixed;right:20px;bottom:20px;z-index:40;display:inline-flex;align-items:center;gap:9px;background:var(--brand);color:#fff;border-radius:100px;padding:12px 18px 12px 14px;font-weight:700;font-size:.9rem;box-shadow:0 14px 34px rgba(22,163,74,.45);transition:transform .15s,background .15s}
.fab:hover{transform:translateY(-2px);background:var(--brand-deep)}
.fab i{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-style:normal}
.fab svg{width:14px;height:14px;fill:#fff}
.hero .lead{font-size:1.08rem;color:var(--muted);max-width:660px;margin:0 auto}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:36px}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 10px}
.stat b{display:block;font-size:1.5rem;font-weight:800;color:var(--brand-deep);letter-spacing:-.02em}
.stat span{font-size:.78rem;color:var(--muted)}

/* frames */
.browser{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(15,26,20,.12)}
.browser .bar{height:34px;background:#EEF1EF;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 12px}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#D5DAD7}
.browser .bar i:nth-child(1){background:#FF6B6B}.browser .bar i:nth-child(2){background:#FFC94D}.browser .bar i:nth-child(3){background:#4CD97B}
.browser .bar span{margin-left:10px;flex:1;height:18px;border-radius:6px;background:#fff;border:1px solid var(--line);font-size:.68rem;color:var(--faint);display:flex;align-items:center;padding:0 8px;font-family:var(--mono)}
.browser img{width:100%}
.phone-frame{width:250px;background:#0F1A14;border-radius:34px;padding:9px;box-shadow:0 24px 50px rgba(15,26,20,.22);margin:0 auto}
.phone-frame .scr{border-radius:26px;overflow:hidden;background:#fff;height:470px}
.phone-frame img{width:100%;height:100%;object-fit:cover;object-position:top}
figure{margin:0}
figcaption{font-size:.8rem;color:var(--faint);margin-top:10px;text-align:center}
.hero-shot{margin-top:40px;position:relative}
.hero-shot .phone-frame{position:absolute;right:-8px;bottom:-30px;width:190px;transform:rotate(-4deg)}
.hero-shot .phone-frame .scr{height:360px}
@media(max-width:700px){.hero-shot .phone-frame{display:none}}

/* sections */
section{padding:64px 0}
section.tint{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.head{margin-bottom:28px}
.head h2{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.3rem);font-weight:800;margin:12px 0 10px}
.head p{color:var(--muted);font-size:1.02rem;max-width:660px}
.num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;font-weight:800;font-size:.95rem;margin-right:10px;vertical-align:middle}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(15,26,20,.08)}
.card .ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px}
.card h3{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.card p{font-size:.9rem;color:var(--muted)}
.card ul{margin-top:10px;list-style:none;display:grid;gap:5px}
.card li{font-size:.86rem;padding-left:18px;position:relative}
.card li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.surface-card{padding:0;overflow:hidden}
.surface-card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--brand-wash);border-bottom:1px solid var(--line)}
.surface-card .thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.surface-card .body{padding:16px 18px}
.surface-card .body h3{font-size:1rem}
.surface-card .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-deep)}

/* feature blocks */
.feat{display:grid;grid-template-columns:1fr;gap:18px;margin-top:34px}
.feat h3{font-size:1.32rem;font-weight:800;margin:8px 0 8px}
.feat p{color:var(--muted);font-size:.96rem}
.feat ul{list-style:none;margin-top:12px;display:grid;gap:8px}
.feat li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.feat li b{color:var(--brand-deep)}
.chk{flex:none;width:20px;height:20px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;margin-top:2px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.pair{grid-template-columns:1fr}}

/* flow */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:8px}
@media(max-width:700px){.flow{grid-template-columns:repeat(2,1fr)}}
.flow div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 12px}
.flow b{display:block;font-size:1.5rem;font-weight:800;color:var(--brand);line-height:1}
.flow h4{font-size:.92rem;margin:8px 0 4px}
.flow p{font-size:.8rem;color:var(--muted)}

/* dark band */
.dark{background:var(--ink);color:#fff;border-radius:24px;padding:36px 28px;position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;right:-90px;bottom:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(22,163,74,.5),transparent 70%)}
.dark .head h2,.dark .head p{color:#fff}.dark .head p{opacity:.75}
.dark .kicker{background:rgba(255,255,255,.1);color:#86EFAC}
.dark .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative}
@media(max-width:640px){.dark .steps{grid-template-columns:1fr 1fr}}
.dark .steps div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px}
.dark .steps b{display:block;font-size:1.4rem;font-weight:800;color:#86EFAC}
.dark .steps h4{font-size:.9rem;margin:6px 0 4px}
.dark .steps p{font-size:.8rem;opacity:.72}
.dark code{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}

/* table */
table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:.9rem}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{width:32%;font-weight:700;background:var(--brand-wash);color:var(--brand-deep)}
tr:last-child td,tr:last-child th{border-bottom:0}
code{font-family:var(--mono);font-size:.84em;background:var(--ground);border:1px solid var(--line);border-radius:6px;padding:1px 6px}

/* not-here */

/* demo */
.demo{background:linear-gradient(135deg,var(--brand-deep),var(--brand));color:#fff;border-radius:24px;padding:32px 28px}
.demo h2{font-size:1.8rem;font-weight:800;margin:10px 0 8px}
.demo p{opacity:.9}
.demo .kicker{background:rgba(255,255,255,.16);color:#fff}
.demo .creds{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
@media(max-width:600px){.demo .creds{grid-template-columns:1fr}}
.demo .creds div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:12px 14px;font-size:.86rem}
.demo .creds b{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;opacity:.85;margin-bottom:2px}

footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:.84rem}
footer .col{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}

/* Helpers (replace per-element inline styles). */
.link-brand{color:var(--brand-deep);font-weight:700}
nav .link-brand{font-weight:inherit}
.mt-14{margin-top:14px}
.mt-22{margin-top:22px}
.ic-brand{background:var(--brand-soft)}
.ic-amber{background:var(--amber-soft)}
.ic-blue{background:var(--blue-soft)}
.h2-sm{font-size:1.6rem}

/* Login access — the three cards from access.html, under the hero lead.
   Scoped (.access-*) so they don't collide with the showcase's .card/.head. */
.access{margin:28px auto 0;text-align:left}
.access-lead{text-align:center;color:var(--muted);font-size:.92rem;margin-bottom:16px}
.access-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.access-cards{grid-template-columns:1fr}}
.access-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px rgba(15,26,20,.06)}
.access-card h3{font-size:1.05rem;font-weight:800}
.access-card p{font-size:.86rem;color:var(--muted)}
.access-card .btn{margin-top:auto;justify-content:center;padding:10px 14px;font-size:.88rem}
.access-creds{display:block;background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.access-creds dt{font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.access-creds dt:first-child{margin-top:0}
.access-creds dd{font-family:var(--mono);font-size:.84rem;user-select:all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}