:root{
    --bg:#FFF8E7;
    --ink:#0A0A0A;
    --pink:#FF6FB5;
    --mint:#8CE7C1;
    --cyan:#7ED8F5;
    --yellow:#FFD447;
    --lilac:#C8B6FF;
    --white:#FFFFFF;
    --shadow:6px 6px 0 var(--ink);
    --shadow-lg:10px 10px 0 var(--ink);
    --border:3px solid var(--ink);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Space Grotesk',system-ui,sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.5;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:'Archivo Black',sans-serif;line-height:1.05;letter-spacing:-0.02em;text-transform:uppercase}
  a{color:inherit;text-decoration:none}
  .container{max-width:1200px;margin:0 auto;padding:0 24px}
  svg.i{width:1em;height:1em;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none;flex-shrink:0}

  /* NAV */
  nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:var(--border)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1200px;margin:0 auto}
  .logo{display:flex;align-items:center;gap:10px;font-family:'Archivo Black';font-size:22px}
  .logo-mark{width:38px;height:38px;background:var(--pink);border:var(--border);border-radius:10px;display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink);font-size:20px}
  .nav-links{display:flex;gap:28px;font-weight:500}
  .nav-links a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;font-family:'Archivo Black';font-size:15px;text-transform:uppercase;background:var(--ink);color:var(--yellow);border:var(--border);box-shadow:var(--shadow);transition:transform .1s ease, box-shadow .1s ease;cursor:pointer;border-radius:8px}
  .btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
  .btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
  .btn.pink{background:var(--pink);color:var(--ink)}
  .btn.mint{background:var(--mint);color:var(--ink)}
  .btn.cyan{background:var(--cyan);color:var(--ink)}
  .btn svg.i{font-size:18px}
  @media (max-width:720px){ .nav-links{display:none} }

  /* HERO */
  .hero{padding:80px 0 100px;position:relative;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
  .badge{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);border:var(--border);padding:8px 14px;font-weight:700;font-size:13px;text-transform:uppercase;box-shadow:4px 4px 0 var(--ink);border-radius:6px;margin-bottom:24px}
  .badge svg.i{font-size:14px}
  .hero h1{font-size:clamp(42px,6vw,84px)}
  .hero h1 .hl{background:var(--pink);padding:0 10px;border:var(--border);box-shadow:6px 6px 0 var(--ink);display:inline-block;margin:6px 0}
  .hero p.lead{font-size:20px;margin:28px 0 32px;max-width:520px}
  .hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
  .hero-visual{position:relative;height:520px}
  .phone{position:absolute;width:260px;height:520px;background:var(--white);border:var(--border);border-radius:34px;box-shadow:var(--shadow-lg);padding:18px}
  .phone-1{left:20px;top:0;background:var(--mint);transform:rotate(-6deg)}
  .phone-2{right:20px;top:40px;background:var(--cyan);transform:rotate(5deg)}
  .phone-screen{background:var(--white);border:var(--border);border-radius:18px;height:100%;padding:16px;display:flex;flex-direction:column;gap:10px}
  .chip{display:inline-flex;align-items:center;gap:6px;background:var(--yellow);border:var(--border);border-radius:8px;padding:6px 10px;font-weight:700;font-size:12px;width:fit-content;box-shadow:2px 2px 0 var(--ink)}
  .row{display:flex;justify-content:space-between;align-items:center;background:var(--bg);border:var(--border);border-radius:10px;padding:10px 12px;font-weight:600;font-size:14px;box-shadow:2px 2px 0 var(--ink);gap:8px}
  .row .l{display:flex;align-items:center;gap:8px}
  .row.pink{background:var(--pink)}
  .row.lilac{background:var(--lilac)}
  .total{margin-top:auto;background:var(--ink);color:var(--yellow);border-radius:10px;padding:12px;font-family:'Archivo Black';display:flex;justify-content:space-between}
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr}
    .hero-visual{height:440px;margin-top:20px}
    .phone{width:220px;height:440px}
  }

  /* SECTIONS */
  section{padding:90px 0;border-top:var(--border)}
  .section-head{text-align:center;max-width:720px;margin:0 auto 60px}
  .section-head h2{font-size:clamp(32px,4.5vw,52px)}
  .section-head p{margin-top:16px;font-size:18px;color:#333}
  .kicker{display:inline-block;background:var(--ink);color:var(--yellow);padding:6px 12px;font-weight:700;font-size:13px;text-transform:uppercase;margin-bottom:16px;border-radius:6px}

  /* FEATURES */
  .features{background:var(--lilac)}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
  @media (max-width:900px){.grid-3{grid-template-columns:1fr}}
  .card{background:var(--white);border:var(--border);border-radius:16px;padding:28px;box-shadow:var(--shadow-lg);transition:transform .15s}
  .card:hover{transform:translate(-3px,-3px);box-shadow:14px 14px 0 var(--ink)}
  .card .icon{width:56px;height:56px;border:var(--border);border-radius:12px;display:grid;place-items:center;margin-bottom:18px;box-shadow:3px 3px 0 var(--ink);font-size:28px}
  .card h3{font-size:22px;margin-bottom:10px}
  .card p{font-size:15px;color:#222}

  /* DUAL MODE */
  .dual-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
  @media (max-width:900px){.dual-grid{grid-template-columns:1fr}}
  .mode{border:var(--border);border-radius:18px;padding:36px;box-shadow:var(--shadow-lg)}
  .mode.b2c{background:var(--pink)}
  .mode.b2b{background:var(--mint)}
  .mode h3{font-size:32px;margin-bottom:8px}
  .mode .tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase;background:var(--ink);color:var(--yellow);padding:5px 10px;border-radius:4px;margin-bottom:16px}
  .mode ul{list-style:none;margin-top:18px}
  .mode li{padding:12px 0;border-bottom:2px solid var(--ink);font-weight:500;display:flex;gap:12px;align-items:flex-start}
  .mode li:last-child{border-bottom:none}
  .mode li svg.i{font-size:20px;margin-top:1px}

  /* HOW */
  .how{background:var(--cyan)}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  @media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.steps{grid-template-columns:1fr}}
  .step{background:var(--white);border:var(--border);border-radius:14px;padding:24px;box-shadow:var(--shadow)}
  .step .num{font-family:'Archivo Black';font-size:44px;color:var(--pink);-webkit-text-stroke:2px var(--ink);line-height:1}
  .step h4{font-family:'Archivo Black';margin:8px 0;font-size:18px;text-transform:uppercase}
  .step p{font-size:14px}

  /* OFFLINE STRIP */
  .strip{background:var(--yellow);padding:40px 0;border-top:var(--border);border-bottom:var(--border)}
  .strip-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .strip h3{display:flex;align-items:center;gap:12px;font-size:28px}
  .strip .dot{width:14px;height:14px;background:#22c55e;border:2px solid var(--ink);border-radius:50%;display:inline-block;box-shadow:2px 2px 0 var(--ink)}

  /* CTA */
  .cta{background:var(--ink);color:var(--white);text-align:center}
  .cta h2{color:var(--yellow);font-size:clamp(36px,5vw,64px)}
  .cta p{max-width:560px;margin:20px auto 32px;font-size:18px;color:#ddd}
  .cta .btn{background:var(--pink);color:var(--ink)}

  /* FOOTER */
  footer{background:var(--bg);border-top:var(--border);padding:36px 0}
  .foot-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-weight:500;font-size:14px}

  /* =========== DARK MODE (neobrutalism) =========== */
  html{transition:background-color .2s ease}
  body,.card,.step,.phone,.phone-screen,.row,.mode,.btn,nav,footer,.strip,.cta{transition:background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease}

  [data-theme="dark"]{
    --bg:#0F1020;          /* deep night */
    --white:#1C1D33;       /* surface */
    --ink:#F5EFDC;         /* stroke/border/shadow becomes light cream */
    /* pastels stay vivid — that's the whole point of neobrutalism */
  }
  /* Body/text on dark background flips to the light "ink" */
  [data-theme="dark"] body{color:var(--ink)}

  /* Anything with a hardcoded muted grey needs to become readable */
  [data-theme="dark"] .section-head p,
  [data-theme="dark"] .card p{color:var(--ink);opacity:.82}

  /* Elements sitting on pastel backgrounds keep dark ink for contrast */
  [data-theme="dark"] .badge,
  [data-theme="dark"] .chip,
  [data-theme="dark"] .row.pink,
  [data-theme="dark"] .row.lilac,
  [data-theme="dark"] .mode,
  [data-theme="dark"] .strip,
  [data-theme="dark"] .logo-mark,
  [data-theme="dark"] .card .icon,
  [data-theme="dark"] .btn.pink,
  [data-theme="dark"] .btn.mint,
  [data-theme="dark"] .btn.cyan{color:#0A0A0A}

  /* Solid-dark pieces stay solid dark (button, total pill, kicker, tag, cta) */
  [data-theme="dark"] .btn{background:#0A0A0A}
  [data-theme="dark"] .btn.pink{background:var(--pink)}
  [data-theme="dark"] .btn.mint{background:var(--mint)}
  [data-theme="dark"] .btn.cyan{background:var(--cyan)}
  [data-theme="dark"] .total{background:#0A0A0A;color:var(--yellow)}
  [data-theme="dark"] .kicker,
  [data-theme="dark"] .mode .tag{background:#0A0A0A;color:var(--yellow)}
  [data-theme="dark"] .cta{background:#000;color:#F5EFDC}
  [data-theme="dark"] .cta h2{color:var(--yellow)}

  /* Highlighted hero word — keep it screaming pink with dark text */
  [data-theme="dark"] .hero h1 .hl{color:#0A0A0A}

  /* Step numbers: pink fill + light stroke reads great on dark card */
  [data-theme="dark"] .step .num{-webkit-text-stroke:2px var(--ink)}

  /* Theme toggle button */
  .theme-toggle{
    width:44px;height:44px;display:inline-grid;place-items:center;
    background:var(--yellow);border:var(--border);border-radius:10px;
    box-shadow:3px 3px 0 var(--ink);cursor:pointer;color:#0A0A0A;
    transition:transform .1s ease, box-shadow .1s ease;
    margin-right:10px;
  }
  .theme-toggle:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
  .theme-toggle:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
  .theme-toggle svg.i{font-size:20px}
  [data-theme="dark"] .theme-toggle{background:var(--lilac)}
  .theme-toggle .moon{display:none}
  [data-theme="dark"] .theme-toggle .sun{display:none}
  [data-theme="dark"] .theme-toggle .moon{display:block}
  .nav-actions{display:flex;align-items:center}

  /* Deep Link Redirect Overlay */
  #redirect-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    z-index: 1000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
  }
  [data-theme="dark"] #redirect-overlay {
    background: var(--bg);
  }
  .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--ink);
    border-top: 4px solid var(--pink);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }