/* home.css — CrescoDB marketing site. Separate surface from the dashboard,
   shares the brand. Marketing can have polish/motion (unlike the dev tool). */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* Onyx / carbon black + lime — Resend-style: near-black, subtle white-alpha
     borders, lime primary accent. */
  --bg:#0a0a0c; --surface:#121214; --surface2:#18181b; --surface3:#222226; --border:#ffffff14;
  --txt:#f4f4f6; --txt2:#a1a1aa; --txt3:#6b6b76;
  --accent:#bef264; --accent2:#34d399; --accent3:#ff5470; --accent4:#ffb547;
  --r:18px; --r-sm:11px; --maxw:1140px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--txt); font-family:'DM Sans',system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.mono { font-family:'DM Mono',monospace; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.accent { color:var(--accent); }
.grad { background:linear-gradient(110deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* glows */
.glow { position:absolute; border-radius:50%; filter:blur(140px); opacity:.18; z-index:0; pointer-events:none; }

/* header */
header { position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(8,8,13,.7); border-bottom:1px solid var(--border); }
.nav { display:flex; align-items:center; gap:28px; height:64px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; }
/* Brand mark: the real CrescoDB logo, rendered as a mask so it takes the live
   --accent (so it follows a user's custom accent). The literal "C" still in the
   markup is hidden via font-size:0. */
.logo { width:30px; height:30px; flex-shrink:0; background:var(--accent); color:transparent; font-size:0; -webkit-mask:url('../img/favicon.svg') center/contain no-repeat; mask:url('../img/favicon.svg') center/contain no-repeat; }
.nav-links { display:flex; align-items:center; gap:24px; margin-left:14px; font-size:14px; color:var(--txt2); }
.nav-links a:hover { color:var(--txt); }

/* Resend-style hover dropdown */
.nav-drop-wrap { position:relative; display:flex; align-items:center; }
.nav-drop-trigger { display:inline-flex; align-items:center; gap:5px; cursor:default; color:var(--txt2); transition:color .15s; }
.nav-drop-wrap:hover .nav-drop-trigger { color:var(--txt); }
.nav-drop-trigger svg { transition:transform .2s ease; }
.nav-drop-wrap:hover .nav-drop-trigger svg { transform:rotate(180deg); }
.nav-drop {
  position:absolute; top:100%; left:50%; margin-top:10px; width:440px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:10px;
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:60;
}
.nav-drop::before { content:""; position:absolute; top:-12px; left:0; right:0; height:12px; } /* hover bridge over the gap */
.nav-drop-wrap:hover .nav-drop { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-drop a { display:flex; gap:11px; padding:11px 12px; border-radius:11px; align-items:flex-start; transition:background .15s; }
.nav-drop a:hover { background:var(--surface2); }
.nav-drop .di { color:var(--accent); flex-shrink:0; font-size:15px; line-height:1.3; }
.nav-drop .dt { font-size:13px; font-weight:600; color:var(--txt); display:block; }
.nav-drop .dd { font-size:11.5px; color:var(--txt3); margin-top:3px; display:block; line-height:1.45; }
@media (max-width:860px){ .nav-drop{display:none;} }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.btn { display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-weight:600; font-size:14px; padding:10px 18px; border-radius:10px; cursor:pointer; border:1px solid transparent; transition:all .18s; }
.btn-primary { background:var(--accent); color:#0b0b0d; box-shadow:0 6px 24px rgba(190,242,100,.35); }
.btn-primary:hover { background:#d2f96e; transform:translateY(-1px); }
.btn-ghost { color:var(--txt2); }
.btn-ghost:hover { color:var(--txt); }
.btn-outline { border-color:var(--border); color:var(--txt); }
.btn-outline:hover { border-color:var(--accent); }
.btn-lg { padding:14px 26px; font-size:15px; border-radius:12px; }

/* segmented currency toggle (₦ / $) */
.cur-toggle { display:inline-flex; background:var(--surface2); border:1px solid var(--border); border-radius:100px; padding:3px; gap:2px; }
.cur-opt { border:none; background:transparent; color:var(--txt2); font-family:inherit; font-weight:600; font-size:13px; padding:7px 18px; border-radius:100px; cursor:pointer; transition:background .15s, color .15s; }
.cur-opt:hover { color:var(--txt); }
.cur-opt.active { background:var(--accent); color:#0b0b0d; }

/* hero */
.hero { position:relative; text-align:center; padding:90px 0 70px; }
.pill { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--txt2); background:var(--surface2); border:1px solid var(--border); border-radius:100px; padding:6px 14px; margin-bottom:26px; }
.pill .dot { width:6px; height:6px; border-radius:50%; background:var(--accent2); box-shadow:0 0 8px var(--accent2); }
h1 { font-size:clamp(38px,6vw,68px); line-height:1.05; letter-spacing:-2px; font-weight:800; }
.sub { font-size:clamp(16px,2.2vw,20px); color:var(--txt2); max-width:620px; margin:22px auto 0; }
.hero-cta { display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.terminal { max-width:560px; margin:46px auto 0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); text-align:left; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.term-bar { display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--border); }
.term-bar i { width:11px; height:11px; border-radius:50%; display:inline-block; }
.term-body { padding:18px 20px; font-family:'DM Mono',monospace; font-size:13.5px; line-height:1.9; }
.term-body .c { color:var(--txt3); }
.term-body .p { color:var(--accent2); }
.term-body .o { color:var(--txt2); }

/* sections */
section { position:relative; padding:70px 0; }
.eyebrow { text-align:center; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--accent); }
.h2 { text-align:center; font-size:clamp(28px,4vw,42px); letter-spacing:-1px; font-weight:800; margin-top:10px; }
.lead { text-align:center; color:var(--txt2); max-width:560px; margin:16px auto 0; font-size:16px; }

.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:26px; transition:all .2s; }
.card:hover { border-color:rgba(190,242,100,.4); transform:translateY(-3px); }
.card .ico { width:42px; height:42px; border-radius:12px; background:var(--surface2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:16px; }
.card h3 { font-size:17px; font-weight:700; }
.card p { color:var(--txt2); font-size:14px; margin-top:8px; }

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:48px; }
.step .n { font-family:'DM Mono',monospace; font-size:13px; color:var(--accent); border:1px solid var(--border); border-radius:8px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.step h3 { font-size:17px; }
.step code { font-family:'DM Mono',monospace; font-size:13px; color:var(--accent2); }
.step p { color:var(--txt2); font-size:14px; margin-top:8px; }

/* pricing */
.tiers { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:48px; }
.tier { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:26px 22px; display:flex; flex-direction:column; }
.tier.pop { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),0 20px 50px rgba(190,242,100,.18); }
.tier .tag { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--txt3); }
.tier.pop .tag { color:var(--accent); }
.tier .price { font-size:34px; font-weight:800; letter-spacing:-1px; margin:12px 0 2px; }
.tier .price span { font-size:14px; color:var(--txt3); font-weight:500; }
.tier ul { list-style:none; margin:18px 0; flex:1; }
.tier li { font-size:13.5px; color:var(--txt2); padding:7px 0 7px 24px; position:relative; }
.tier li::before { content:"✓"; position:absolute; left:0; color:var(--accent2); font-weight:700; }
.tier .btn { width:100%; justify-content:center; }

/* CTA + footer */
.cta { text-align:center; background:linear-gradient(180deg,var(--surface),var(--surface2)); border:1px solid var(--border); border-radius:26px; padding:60px 30px; margin:30px 0; }
footer { border-top:1px solid var(--border); padding:40px 0; color:var(--txt3); font-size:13px; }
.foot { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot-links { display:flex; gap:22px; }
.foot-links a:hover { color:var(--txt); }

/* auth */
.auth-wrap { min-height:calc(100vh - 64px); display:flex; align-items:center; justify-content:center; padding:40px 24px; position:relative; }
.auth-card { width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:32px; position:relative; z-index:1; }
.auth-card h2 { font-size:22px; font-weight:800; letter-spacing:-.5px; }
.auth-card .muted { color:var(--txt2); font-size:14px; margin-top:6px; }
.field { margin-top:18px; }
.field label { display:block; font-size:12px; color:var(--txt3); margin-bottom:6px; font-weight:600; }
.field input { width:100%; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:12px 14px; color:var(--txt); font-family:inherit; font-size:14px; outline:none; transition:border-color .15s; }
.field input:focus { border-color:var(--accent); }
.auth-card .btn { width:100%; justify-content:center; margin-top:22px; }
.auth-alt { text-align:center; font-size:13.5px; color:var(--txt3); margin-top:18px; }
.auth-alt a { color:var(--accent); }
.auth-note { font-size:12px; color:var(--txt3); background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 12px; margin-top:18px; line-height:1.5; }
.auth-msg { font-size:13px; margin-top:14px; min-height:18px; }
.field-link { float:right; font-weight:500; color:var(--txt3); }
.field-link:hover { color:var(--accent); }

/* docs */
.docs { display:grid; grid-template-columns:200px 1fr; gap:40px; padding:50px 0; align-items:start; }
.docs-side { position:sticky; top:84px; font-size:13.5px; }
.docs-side a { display:block; color:var(--txt2); padding:6px 0; }
.docs-side a:hover { color:var(--txt); }
.docs-side .grp { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--txt3); margin:18px 0 6px; font-weight:700; }
.docs-main h1 { font-size:32px; letter-spacing:-1px; }
.docs-main h2 { font-size:21px; margin:34px 0 10px; padding-top:10px; }
.docs-main p { color:var(--txt2); margin-top:8px; }
.docs-main ul { color:var(--txt2); margin:10px 0 0 20px; }
.docs-main li { margin:5px 0; }
.code { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:14px 16px; font-family:'DM Mono',monospace; font-size:13px; color:var(--txt); margin-top:12px; white-space:pre; overflow-x:auto; line-height:1.7; }
.code .c { color:var(--txt3); } .code .p { color:var(--accent2); }

/* oauth + auth extras */
.back-home { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--txt3); margin-bottom:18px; }
.back-home:hover { color:var(--txt); }
.oauth { display:flex; flex-direction:column; gap:10px; margin-top:4px; }
.oauth-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--border); background:var(--surface2); color:var(--txt); font-family:inherit; font-weight:600; font-size:13.5px; cursor:pointer; transition:all .15s; }
.oauth-btn:hover { border-color:var(--accent); background:var(--surface); }
.oauth-btn svg { width:17px; height:17px; }
.divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--txt3); font-size:12px; }
.divider::before,.divider::after { content:""; flex:1; height:1px; background:var(--border); }

/* code example panel */
.example { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:48px; text-align:left; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.panel-h { padding:11px 16px; border-bottom:1px solid var(--border); font-family:'DM Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--txt3); display:flex; align-items:center; gap:8px; }
.panel-h .m { font-weight:700; color:var(--accent2); }
.panel-b { padding:16px 18px; font-family:'DM Mono',monospace; font-size:12.5px; line-height:1.85; overflow-x:auto; white-space:pre; }
.panel-b .k { color:var(--accent); } .panel-b .s { color:var(--accent2); } .panel-b .n { color:var(--accent4); } .panel-b .c { color:var(--txt3); }

/* faq */
.faq { max-width:760px; margin:44px auto 0; }
.qa { border-bottom:1px solid var(--border); padding:20px 4px; }
.qa h3 { font-size:16px; font-weight:700; }
.qa p { color:var(--txt2); font-size:14.5px; margin-top:8px; }

/* logo / trust strip */
.strip { display:flex; align-items:center; justify-content:center; gap:30px; flex-wrap:wrap; margin-top:30px; color:var(--txt3); font-size:13px; }
.strip .item { display:flex; align-items:center; gap:8px; }
.strip .item b { color:var(--txt); font-weight:700; }

/* footer columns */
.foot-cols { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; padding-bottom:34px; }
.foot-cols h4 { font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--txt3); margin-bottom:12px; }
.foot-cols a { display:block; color:var(--txt2); font-size:13.5px; padding:4px 0; }
.foot-cols a:hover { color:var(--txt); }
.foot-cols .blurb { color:var(--txt3); font-size:13px; line-height:1.6; margin-top:12px; max-width:260px; }

/* ── mega-menus (Resend/Supabase-style multi-column nav dropdowns) ── */
.nav-drop.mega { width:560px; left:0; transform:translateX(0) translateY(8px); grid-template-columns:1fr 1fr; gap:10px; padding:14px; }
.nav-drop-wrap:hover .nav-drop.mega { transform:translateX(0) translateY(0); }
.mega-col { display:flex; flex-direction:column; }
.mega-h { font-size:10.5px; text-transform:uppercase; letter-spacing:.9px; color:var(--txt3); font-weight:700; padding:8px 12px 5px; }

/* ── feature deep-dive rows ── */
.frow { display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; margin-top:72px; }
.frow.rev .ftext { order:2; }
.ftext .eyebrow, .ftext .lead { text-align:left; margin-left:0; }
.ftext h3 { font-size:clamp(22px,3vw,30px); letter-spacing:-.6px; font-weight:800; margin-top:10px; }
.ftext > p { color:var(--txt2); margin-top:12px; font-size:15px; }
.flist { list-style:none; margin:20px 0 0; display:grid; gap:10px; }
.flist li { position:relative; padding-left:26px; color:var(--txt2); font-size:14px; }
.flist li::before { content:"✓"; position:absolute; left:0; color:var(--accent2); font-weight:700; }
.flink { display:inline-flex; align-items:center; gap:6px; margin-top:20px; color:var(--accent); font-weight:600; font-size:14px; }
.flink:hover { gap:9px; }
.fvisual { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:18px; font-family:'DM Mono',monospace; font-size:12.5px; line-height:1.85; overflow:hidden; }
.fvisual .c { color:var(--txt3); } .fvisual .p { color:var(--accent2); } .fvisual .k { color:var(--accent); } .fvisual .n { color:var(--accent4); }
.fvisual .chip { display:inline-block; font-family:'DM Sans',sans-serif; font-size:11px; background:var(--surface2); border:1px solid var(--border); border-radius:7px; padding:3px 9px; margin:3px 4px 3px 0; color:var(--txt2); }
.fvisual .row { display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid var(--border); font-family:'DM Sans',sans-serif; font-size:13px; color:var(--txt2); }
.fvisual .row:last-child { border-bottom:none; }
.fvisual .m { font-weight:700; font-size:10px; padding:2px 7px; border-radius:5px; background:rgba(52,211,153,.12); color:var(--accent2); font-family:'DM Mono',monospace; }

/* ── audience cards (for individuals / teams / enterprise) ── */
.aud-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; text-align:left; }
.aud { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:26px; display:flex; flex-direction:column; transition:border-color .2s, transform .2s; }
.aud:hover { border-color:rgba(190,242,100,.4); transform:translateY(-3px); }
.aud .badge { align-self:flex-start; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--accent); background:rgba(190,242,100,.1); border:1px solid rgba(190,242,100,.22); border-radius:100px; padding:4px 11px; }
.aud h3 { font-size:19px; margin-top:14px; }
.aud > p { color:var(--txt2); font-size:14px; margin-top:8px; }
.aud ul { list-style:none; margin:16px 0 20px; display:grid; gap:9px; flex:1; }
.aud li { position:relative; padding-left:22px; color:var(--txt2); font-size:13.5px; }
.aud li::before { content:"→"; position:absolute; left:0; color:var(--accent2); }
.aud .btn { width:100%; justify-content:center; }

/* ── use-case grid ── */
.ucase { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:44px; text-align:left; }
.uc { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:18px; transition:border-color .2s; }
.uc:hover { border-color:rgba(190,242,100,.35); }
.uc .ico { font-size:20px; }
.uc h4 { font-size:15px; margin-top:10px; }
.uc p { color:var(--txt3); font-size:12.5px; margin-top:5px; }

/* ── everything-included checklist ── */
.checks { display:grid; grid-template-columns:repeat(3,1fr); gap:11px 28px; margin:40px auto 0; text-align:left; max-width:940px; }
.checks div { position:relative; padding-left:26px; color:var(--txt2); font-size:14px; }
.checks div::before { content:"✓"; position:absolute; left:0; color:var(--accent2); font-weight:700; }

/* ── compact pricing teaser ── */
.ptease { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:42px; text-align:left; }
.pt { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:22px; }
.pt.pop { border-color:var(--accent); }
.pt .tag { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--txt3); }
.pt.pop .tag { color:var(--accent); }
.pt .price { font-size:26px; font-weight:800; letter-spacing:-1px; margin:8px 0 4px; }
.pt .price span { font-size:13px; color:var(--txt3); font-weight:500; }
.pt p { color:var(--txt2); font-size:13px; }

/* 5-column footer */
.foot-cols { grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; }

@media (max-width:860px){
  .grid,.steps,.tiers,.example,.foot-cols,.frow,.aud-grid,.ucase,.checks,.ptease{ grid-template-columns:1fr; }
  .nav-links{ display:none; } .docs{ grid-template-columns:1fr; } .docs-side{ position:static; }
  .frow{ gap:24px; } .frow.rev .ftext{ order:0; }
}

/* ── Toasts (CrescoAi-style: top-right, dark card, colored status icon) ──────── */
.cr-toasts { position:fixed; top:18px; right:18px; z-index:9999; display:flex; flex-direction:column; gap:10px; max-width:360px; pointer-events:none; }
.cr-toast { pointer-events:auto; display:flex; align-items:flex-start; gap:11px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:12px; padding:12px 14px; box-shadow:0 16px 44px rgba(0,0,0,.5); color:var(--txt); font-size:13.5px; line-height:1.45; cursor:pointer; transform:translateX(120%); opacity:0; transition:transform .34s cubic-bezier(.22,1,.36,1), opacity .34s; }
.cr-toast.in { transform:translateX(0); opacity:1; }
.cr-toast.out { transform:translateX(120%); opacity:0; }
.cr-toast .ic { width:18px; height:18px; border-radius:50%; flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#0b0b0d; background:var(--accent); }
.cr-toast .tx { flex:1; min-width:0; }
.cr-toast .tt { font-weight:700; display:block; margin-bottom:2px; color:var(--txt); }
.cr-toast.success { border-left-color:var(--accent2); } .cr-toast.success .ic { background:var(--accent2); }
.cr-toast.error   { border-left-color:var(--accent3); } .cr-toast.error .ic   { background:var(--accent3); color:#fff; }
.cr-toast.info    { border-left-color:var(--accent); }  .cr-toast.info .ic    { background:var(--accent); }