/* =========================================================================
   BULAWA HOMEPAGE — STYLESHEET
   Theme: green + white only (no secondary accent color).
   Fonts: Space Grotesk (display/body), JetBrains Mono (data/stats).

   Structure of this file:
   1. Design tokens (colors, fonts, radius) — edit these first to re-theme
   2. Base / reset
   3. Layout helpers
   4. Nav
   5. Buttons
   6. Hero + routing diagram
   7. Positioning / delivery table
   8. Features grid
   9. Analytics dashboard preview
   10. Wizard steps
   11. CTA band + footer
   12. Responsive (mobile) overrides
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   Only two hues are used: green (brand) and white/near-black (neutrals).
   Dark mode keeps the same two-color logic: white text/green accent on
   a near-black background, instead of introducing a third color.
   ------------------------------------------------------------------------- */
:root{
  /* neutrals */
  --white:#FFFFFF;
  --paper:#F7FAF8;         /* page background — white with a faint green cast */
  --paper-alt:#EDF4EF;     /* secondary surface */
  --panel:#FFFFFF;         /* cards/panels */
  --ink:#0F1F16;           /* primary text — near-black, green-tinted */
  --ink-soft:#4C5C53;      /* secondary text */
  --line:#DCE6DF;          /* hairline borders */

  /* brand (green only) */
  --green:#0E8F4E;
  --green-deep:#0A6B3B;    /* hover / pressed state */
  --green-tint:#E3F5EA;    /* light fill for tags/badges */

  --radius:7px;
  --serif:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0A130D;
    --paper-alt:#0F1B13;
    --panel:#101F16;
    --ink:#EFF6F1;
    --ink-soft:#9FB3A6;
    --line:#1E3327;
    --green:#3CCB7F;
    --green-deep:#5FE097;
    --green-tint:#123321;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0A130D;
  --paper-alt:#0F1B13;
  --panel:#101F16;
  --ink:#EFF6F1;
  --ink-soft:#9FB3A6;
  --line:#1E3327;
  --green:#3CCB7F;
  --green-deep:#5FE097;
  --green-tint:#123321;
  color-scheme: dark;
}

/* -------------------------------------------------------------------------
   2. BASE / RESET
   ------------------------------------------------------------------------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
a{color:inherit;}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.01em;}
p{margin:0;}
section{overflow-x:hidden;}

/* -------------------------------------------------------------------------
   3. LAYOUT HELPERS
   ------------------------------------------------------------------------- */
.wrap{
  max-width:1160px;
  margin:0 auto;
  padding:0 28px;
}

/* -------------------------------------------------------------------------
   4. NAV
   ------------------------------------------------------------------------- */
.nav{
  position:sticky;
  top:0;
  z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
}
.brand{
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:700;
  font-size:1.15rem;
  text-decoration:none;
}
.brand svg{width:22px;height:22px;flex:none;}
.nav-links{
  display:flex;
  gap:30px;
  list-style:none;
  margin:0;padding:0;
  font-size:0.95rem;
  color:var(--ink-soft);
}
.nav-links a{text-decoration:none;}
.nav-links a:hover{color:var(--ink);}
.nav-actions{display:flex;align-items:center;gap:18px;}
.nav-login{font-size:0.95rem;text-decoration:none;color:var(--ink-soft);}
.nav-login:hover{color:var(--ink);}

.burger-toggle{display:none;}
.burger{display:none;}

/* -------------------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------------------- */
.btn-primary,.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 20px;
  border-radius:var(--radius);
  font-family:var(--serif);
  font-size:0.95rem;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-primary{
  background:var(--green);
  color:var(--white);
}
.btn-primary:hover{background:var(--green-deep);}
.btn-ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--ink);
}
.btn-ghost:hover{border-color:var(--green);}
.btn-primary.small{padding:9px 16px;font-size:0.88rem;}

/* -------------------------------------------------------------------------
   6. HERO + ROUTING DIAGRAM
   ------------------------------------------------------------------------- */
.hero{padding:76px 0 60px;}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:56px;
  align-items:center;
}
.eyebrow-note{color:var(--ink-soft);font-size:0.9rem;margin-bottom:16px;}
h1.headline{
  font-size:clamp(2.3rem,4vw,3.35rem);
  line-height:1.06;
  max-width:12ch;
}
.hero-sub{
  margin-top:22px;
  max-width:46ch;
  color:var(--ink-soft);
  font-size:1.08rem;
  line-height:1.55;
}
.hero-actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;}
.hero-facts{
  margin-top:44px;
  display:flex;
  gap:34px;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:22px;
}
.fact dd{margin:0;font-family:var(--mono);font-size:1.5rem;font-weight:500;color:var(--ink);}
.fact dt{margin:4px 0 0;font-size:0.82rem;color:var(--ink-soft);}

.diagram-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px 20px 18px;
}
.diagram-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
  font-size:0.82rem;
  color:var(--ink-soft);
}
.dot-live{
  width:7px;height:7px;border-radius:50%;
  background:var(--green);
  display:inline-block;
  margin-right:6px;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent);
}
.lane-label{font-family:var(--mono);font-size:0.72rem;fill:var(--ink-soft);}
.lane-line{fill:none;stroke:var(--line);stroke-width:1.5;}
.lane-pulse{fill:var(--green);}
.inbox-mark{fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

@media (prefers-reduced-motion: no-preference){
  .p1{ offset-path:path("M20,40 C 140,40 210,100 340,100"); animation:travel 3.2s linear infinite; }
  .p2{ offset-path:path("M20,100 C 140,100 210,100 340,100"); animation:travel 3.2s linear infinite; animation-delay:1.05s; }
  .p3{ offset-path:path("M20,160 C 140,160 210,100 340,100"); animation:travel 3.2s linear infinite; animation-delay:2.1s; }
  @keyframes travel{
    0%{ offset-distance:0%; opacity:0; }
    8%{ opacity:1; }
    92%{ opacity:1; }
    100%{ offset-distance:100%; opacity:0; }
  }
}

/* -------------------------------------------------------------------------
   7. POSITIONING / DELIVERY TABLE
   ------------------------------------------------------------------------- */
.positioning{padding:64px 0;border-top:1px solid var(--line);}
.positioning-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:56px;
  align-items:start;
}
h2.section-title{font-size:clamp(1.7rem,2.6vw,2.15rem);max-width:13ch;}
.positioning p{margin-top:18px;color:var(--ink-soft);max-width:42ch;font-size:1.02rem;}

table.lane-table{width:100%;border-collapse:collapse;font-size:0.92rem;}
table.lane-table caption{text-align:left;font-size:0.82rem;color:var(--ink-soft);margin-bottom:10px;}
table.lane-table th{
  text-align:left;
  font-weight:500;
  color:var(--ink-soft);
  font-size:0.78rem;
  padding:0 0 10px;
  border-bottom:1px solid var(--line);
}
table.lane-table td{padding:13px 0;border-bottom:1px solid var(--line);}
table.lane-table td.mono, table.lane-table th.mono{font-family:var(--mono);}
.server-name{display:flex;align-items:center;gap:9px;}
.server-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;}

/* -------------------------------------------------------------------------
   8. FEATURES GRID
   ------------------------------------------------------------------------- */
.features{padding:64px 0;border-top:1px solid var(--line);}
.features-head{max-width:52ch;}
.feature-grid{
  margin-top:44px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
.feature-card{background:var(--panel);padding:28px 24px;}
.feature-card h3{font-size:1.02rem;margin-bottom:10px;}
.feature-card p{font-size:0.92rem;color:var(--ink-soft);line-height:1.55;}
.feature-tag{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--green-deep);
  background:var(--green-tint);
  padding:3px 8px;
  border-radius:4px;
  margin-bottom:14px;
}

/* -------------------------------------------------------------------------
   9. ANALYTICS DASHBOARD PREVIEW
   ------------------------------------------------------------------------- */
.analytics{padding:64px 0;border-top:1px solid var(--line);}
.analytics-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
.analytics-head p{color:var(--ink-soft);max-width:40ch;margin-top:14px;}

.dash{
  margin-top:40px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:26px;
}
.dash-stats{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:24px;
}
.dash-stat{background:var(--panel);padding:16px 14px;}
.dash-stat .n{font-family:var(--mono);font-size:1.4rem;font-weight:500;}
.dash-stat .l{font-size:0.74rem;color:var(--ink-soft);margin-top:4px;}

.dash-body{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;}
.dash-panel{border:1px solid var(--line);border-radius:8px;padding:18px;}
.dash-panel h4{font-size:0.85rem;font-weight:600;margin-bottom:14px;}
.chart-line{fill:none;stroke:var(--green);stroke-width:2;}
.chart-area{fill:url(#chartFill);}
.feed-item{
  display:flex;
  justify-content:space-between;
  padding:9px 0;
  border-bottom:1px solid var(--line);
  font-size:0.85rem;
}
.feed-item:last-child{border-bottom:none;}
.feed-item .who{color:var(--ink);}
.feed-item .when{color:var(--ink-soft);font-family:var(--mono);font-size:0.76rem;}

/* -------------------------------------------------------------------------
   10. WIZARD STEPS
   ------------------------------------------------------------------------- */
.wizard{padding:64px 0 76px;border-top:1px solid var(--line);}
.steps{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.steps li{position:relative;padding:0 22px 0 0;border-left:1px solid var(--line);padding-left:22px;}
.steps li:first-child{border-left:none;padding-left:0;}
.step-n{font-family:var(--mono);font-size:0.78rem;color:var(--green);margin-bottom:14px;display:block;}
.steps h3{font-size:1rem;margin-bottom:8px;}
.steps p{font-size:0.88rem;color:var(--ink-soft);}

/* -------------------------------------------------------------------------
   11. CTA BAND + FOOTER
   ------------------------------------------------------------------------- */
.cta-band{
  background:var(--ink);
  color:var(--paper);
  padding:64px 0;
}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;}
.cta-band h2{color:var(--white);font-size:clamp(1.5rem,2.6vw,2rem);max-width:20ch;}
.cta-band .btn-primary{background:var(--green);}
.cta-band .btn-ghost{border-color:color-mix(in srgb, var(--white) 25%, transparent);color:var(--white);}

footer{padding:40px 0;}
.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  font-size:0.85rem;
  color:var(--ink-soft);
}
.footer-links{display:flex;gap:22px;list-style:none;margin:0;padding:0;}
.footer-links a{text-decoration:none;}
.footer-links a:hover{color:var(--ink);}

/* -------------------------------------------------------------------------
   12. RESPONSIVE (MOBILE) OVERRIDES
   ------------------------------------------------------------------------- */
@media (max-width: 880px){
  .hero-grid,.positioning-grid,.dash-body{grid-template-columns:1fr;}
  .hero{padding:40px 0 44px;}
  h1.headline{max-width:none;}
  .hero-sub{max-width:none;}
  .feature-grid{grid-template-columns:1fr;}
  .dash-stats{grid-template-columns:repeat(3,1fr);}
  .steps{grid-template-columns:1fr;gap:22px;}
  .steps li{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:20px;}
  .steps li:first-child{border-top:none;padding-top:0;}

  .nav-links{
    position:absolute;
    top:68px;left:0;right:0;
    flex-direction:column;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:18px 28px;
    gap:16px;
    display:none;
  }
  .burger-toggle:checked ~ .nav-links{display:flex;}
  .nav-login{display:none;}
  .burger{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;height:36px;
    cursor:pointer;
  }
  .burger span, .burger span::before, .burger span::after{
    content:"";
    display:block;
    width:18px;height:2px;
    background:var(--ink);
    position:relative;
    transition:transform .2s ease;
  }
  .burger span::before{position:absolute;top:-6px;}
  .burger span::after{position:absolute;top:6px;}

  .wrap{padding:0 20px;}
  .cta-band .wrap{flex-direction:column;align-items:flex-start;}
}

@media (max-width:520px){
  .dash-stats{grid-template-columns:repeat(2,1fr);}
  .hero-facts{gap:24px;}
}