/* ╔═══════════════════════════════════════════════════════════════════
   DONEZO · DZ-LP-01-Tokens-Layout.css
   © 2026 Sequence Theory · Amsterdam · donezo.space
   All rights reserved. Unauthorised redistribution is prohibited.

   INTELLECTUAL PROPERTY NOTICE
   · EU Directive 2009/24/EC Art. 4 — Reproduction prohibited
   · Dutch Auteurswet Art. 1, 10, 13 — Copyright protection
   · EU Directive 2004/48/EC Art. 13 — Damages include infringer profits
   Infringement: legal@donezo.space · Source: https://donezo.space

   DZ:FILE:START
   slug:   dz-lp-tokens-layout
   id:     LP-CSS-001
   role:   Brand tokens, base layout, typography
   canary: dz-c-lp-tok-2026
   build:  lp-1.0.0+2026.04.30
   name:   DZ-LP-01-Tokens-Layout.css
╚═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────── */


    /* =========================================================================
      DONEZO LANDING PAGE v2.0
      Section 1: HEAD + TOKENS + UNIVERSE BG + NAV + HERO
      - Universe-feeling canvas background (stars, nebula, gentle drift)
      - Combined best of v1 (landing_page) and v2 (Donezo.html)
      - Full i18n dictionary for all user-facing strings
      - Donezo brand system enforced (navbar/footer rules)
      - Security baseline (safe rendering, no innerHTML for user content)
    ========================================================================= */

    /* === DZ:TOKENS BEGIN === */
    :root {
      /* Core palette */
      --bg: #060609;
      --fg: #ffffff;
      --muted: #8a8a9a;
      --border: #1a1a2a;
      --soft: #111118;

      /* Nav */
      --navBg: rgba(10, 10, 15, 0.84);
      --shadow: 0 20px 50px rgba(0, 0, 0, 0.50);

      /* Timing */
      --ease: cubic-bezier(.22, 1, .36, 1);
      --ease2: cubic-bezier(.2, .9, .2, 1);
      --fast: 120ms;
      --dz-heart: color-mix(in oklab, var(--fg) 22%, transparent);   /* green in dark mode */
      --ui: 220ms;
      --slow: 820ms;

      /* Radius */
      --radius: 18px;
      --radius2: 24px;

      /* Layout */
      --shellMax: 1200px;
      --pad: 20px;

      /* Logo face */
      --faceFill: rgba(255, 255, 255, 0.08);
      --faceStroke: rgba(255, 255, 255, 0.90);
      --eyeWhite: rgba(255, 255, 255, 0.90);
      --pupil: rgba(10, 10, 15, 0.95);
      --mouth: rgba(255, 255, 255, 0.90);

      /* Universe accent spectrum */
      --g: rgba(90, 255, 170, 0.95);
      --b: rgba(100, 180, 255, 0.95);
      --p: color-mix(in oklab, var(--fg) 14%, transparent);
      --y: color-mix(in oklab, var(--fg) 50%, transparent);

      /* Cards */
      --card: rgba(255, 255, 255, 0.04);
      --card2: rgba(255, 255, 255, 0.06);
      --cardStroke: rgba(255, 255, 255, 0.10);
      --cardStroke2: rgba(255, 255, 255, 0.16);

      /* Universe BG tokens */
      --nebula1: rgba(90, 120, 255, 0.10);
      --nebula2: rgba(160, 80, 255, 0.09);
      --nebula3: rgba(80, 255, 180, 0.06);
      --starDim: rgba(255, 255, 255, 0.25);
      --starBright: rgba(255, 255, 255, 0.65);
    }

    body.light {
      background: #fafafa;
      color: #0f0f0f;
      --bg: #fafafa;
      --fg: #0f0f0f;
      --muted: #6a6a7a;
      --border: #e0e0ea;
      --soft: #f0f0f5;

      --navBg: rgba(250, 250, 250, 0.92);
      --shadow: 0 20px 50px rgba(0, 0, 0, 0.10);

      --faceFill: rgba(0, 0, 0, 0.04);
      --faceStroke: rgba(0, 0, 0, 0.90);
      --eyeWhite: rgba(0, 0, 0, 0.16);
      --pupil: rgba(0, 0, 0, 0.85);
      --mouth: rgba(0, 0, 0, 0.90);

      --card: rgba(0, 0, 0, 0.03);
      --card2: rgba(0, 0, 0, 0.05);
      --cardStroke: rgba(0, 0, 0, 0.08);
      --cardStroke2: rgba(0, 0, 0, 0.14);

      --nebula1: rgba(60, 80, 200, 0.04);
      --nebula2: rgba(120, 60, 200, 0.03);
      --nebula3: rgba(60, 180, 120, 0.02);
      --starDim: rgba(0, 0, 0, 0.08);
      --starBright: rgba(0, 0, 0, 0.18);

      /* Accent spectrum — dark readable on white */
      --g: rgba(0, 148, 76, 1);
      --b: rgba(14, 99, 200, 1);
      --p: rgba(120, 30, 200, 1);
      --y: rgba(160, 108, 0, 1);

      --dz-heart: #e63946;  /* red in light mode */
    /* Build Standard v2.2 light supplemental */
    --bg2:      #f2f2f8;
    --bg3:      #eaeaf4;
    --surface:  #f8f8ff;
    --surfH:    #ededf8;
    --borderH:  #c8c8da;
    --fgS:      #404050;
    --dim:      #9090a8;
    --r:  #c42121;
    --o:  #c06010;
    --gDim: rgba(13,128,85,0.10);
    --bDim: rgba(26,111,196,0.10);
    --pDim: rgba(124,52,200,0.09);
    --yDim: rgba(161,98,7,0.09);
    --rDim: rgba(196,33,33,0.09);

      /* Accent overrides: readable on white bg */
      --g: color-mix(in oklab, var(--fg) 14%, transparent);
      --b: color-mix(in oklab, var(--fg) 14%, transparent);
      --p: color-mix(in oklab, var(--fg) 14%, transparent);
      --y: color-mix(in oklab, var(--fg) 14%, transparent);
    
    /* ── Build Standard v2.2 supplemental tokens ── */
    --bg2:      #0c0c12;
    --bg3:      #111118;
    --surface:  #14141e;
    --surfH:    #1a1a26;
    --borderH:  #2a2a3e;
    --fgS:      #c0c0d0;
    --dim:      #44445a;
    --r:  #ff6b6b;   /* red — prohibited / error */
    --o:  #ff9f5a;   /* orange — wave 2+ */
    --r2: 6px;
    --r3: 4px;
    /* Font system */
    /* Prismatic accent */
    --acc-prismatic: linear-gradient(90deg, color-mix(in oklab, var(--fg) 35%, transparent) 0%, color-mix(in oklab, var(--fg) 35%, transparent) 40%, color-mix(in oklab, var(--fg) 35%, transparent) 100%);
    /* Semantic dim tints */
    --gDim: color-mix(in oklab, var(--fg) 8%, transparent);
    --bDim: rgba(100,180,255,0.08);
    --pDim: color-mix(in oklab, var(--fg) 14%, transparent);
    --yDim: color-mix(in oklab, var(--fg) 8%, transparent);
    --rDim: rgba(255,107,107,0.08);
    }
    /* === DZ:TOKENS END === */

    /* ══ PRISMATIC ACCENT UTILITIES — Build Standard v2.2 ══ */
    .dz-prism-text {
      background: var(--acc-prismatic);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
    .dz-prism-bg { background: var(--acc-prismatic); color: #000; }
    .dz-prism-border {
      border-color: transparent !important;
      border-image: linear-gradient(180deg, color-mix(in oklab, var(--fg) 35%, transparent) 0%, color-mix(in oklab, var(--fg) 35%, transparent) 50%, color-mix(in oklab, var(--fg) 35%, transparent) 100%) 1;
    }

        /* === DZ:RESET BEGIN === */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { overflow-x: hidden; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
      background: var(--bg);
      color: var(--fg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      transition: background var(--ui) ease, color var(--ui) ease;
    }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font-family: inherit; color: inherit; }
    ::selection { background: color-mix(in oklab, var(--fg) 8%, transparent); color: var(--bg); }
    /* === DZ:RESET END === */

    /* === DZ:LAYOUT BEGIN === */
    .dz-shell {
      width: min(var(--shellMax), calc(100% - (var(--pad) * 2)));
      margin: 0 auto;
    }

    .dz-section {
      padding: 72px 0;
    }
    /* === DZ:LAYOUT END === */

    /* === DZ:UNIVERSE_BG BEGIN === */
    #dzCanvas {
      position: fixed;
      inset: 0;
      z-index: -5;
      pointer-events: none;
    }

    .dz-nebula {
      position: fixed;
      inset: -30%;
      z-index: -4;
      pointer-events: none;
      opacity: 0;
      filter: blur(80px);
      background:
        radial-gradient(900px 700px at 15% 20%, var(--nebula1), transparent 60%),
        radial-gradient(1000px 800px at 75% 30%, var(--nebula2), transparent 55%),
        radial-gradient(800px 600px at 45% 85%, var(--nebula3), transparent 60%);
      animation: nebulaFadeIn 4s var(--ease) 0.5s forwards, nebulaDrift 90s ease-in-out infinite alternate;
    }
    @keyframes nebulaFadeIn {
      to { opacity: 1; }
    }
    @keyframes nebulaDrift {
      0%   { transform: translate(0, 0) scale(1); }
      33%  { transform: translate(3%, 2%) scale(1.04); }
      66%  { transform: translate(-2%, 3%) scale(0.97); }
      100% { transform: translate(1%, -2%) scale(1.02); }
    }

    
    /* Sun layer (restored) */
    .dz-sun{
      position: fixed;
      inset: -40%;
      z-index: -4;
      pointer-events: none;
      opacity: 0;
      transform: translate3d(-2%, -2%, 0) scale(0.95);
      background:
        radial-gradient(650px 650px at 18% 18%, rgba(255,255,255,0.16), transparent 55%),
        radial-gradient(900px 900px at 18% 18%, rgba(255,255,255,0.08), transparent 65%),
        radial-gradient(1200px 1200px at 18% 18%, rgba(255,255,255,0.05), transparent 70%);
      animation: sunIn 11s var(--ease) forwards;
      animation-delay: 3.4s;
    }
    body.light .dz-sun{
      background:
        radial-gradient(650px 650px at 18% 18%, rgba(0,0,0,0.08), transparent 55%),
        radial-gradient(900px 900px at 18% 18%, rgba(0,0,0,0.05), transparent 65%),
        radial-gradient(1200px 1200px at 18% 18%, rgba(0,0,0,0.03), transparent 70%);
    }
    @keyframes sunIn{
      0%{opacity:0; transform: translate3d(-2%,-2%,0) scale(0.92)}
      50%{opacity:0.95}
      100%{opacity:0.75; transform: translate3d(0,0,0) scale(1)}
    }

    .dz-nebulaDrift {
      position: fixed;
      inset: -40%;
      z-index: -4;
      pointer-events: none;
      opacity: 0;
      filter: blur(100px);
      background:
        radial-gradient(700px 500px at 60% 15%, rgba(100, 140, 255, 0.04), transparent 55%),
        radial-gradient(600px 500px at 25% 70%, rgba(180, 100, 255, 0.03), transparent 55%);
      animation: nebulaFadeIn 6s var(--ease) 2s forwards, nebulaSway 24s var(--ease2) infinite 2s;
    }
    @keyframes nebulaSway {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
      33% { transform: translate3d(3%, 2%, 0) rotate(1.5deg); }
      66% { transform: translate3d(-2%, -1%, 0) rotate(-1deg); }
    }

    .dz-noise {
      position: fixed;
      inset: -10%;
      z-index: -3;
      pointer-events: none;
      opacity: 0.04;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
      background-size: 200px 200px;
      mix-blend-mode: overlay;
    }

    .dz-vignette {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -2;
      background:
        radial-gradient(1400px 1000px at 50% 8%, transparent 45%, rgba(0, 0, 0, 0.22) 100%);
      opacity: 0.60;
    }
    body.light .dz-vignette {
      background: radial-gradient(1400px 1000px at 50% 8%, transparent 40%, rgba(0, 0, 0, 0.08) 100%);
      opacity: 0.60;
    }
    /* Canvas animation = dark mode only; light mode keeps nebula/sun CSS only */
    body.light .dz-nebula      { opacity: 0 !important; animation: none !important; }
    body.light .dz-nebulaDrift { opacity: 0 !important; animation: none !important; }

    /* Occasional shooting star via CSS (supplement to canvas) */
    .dz-shootingStar {
      position: fixed;
      z-index: -3;
      pointer-events: none;
      width: 160px;
      height: 1.5px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
      border-radius: 999px;
      opacity: 0;
      transform: rotate(-25deg);
    }
    .dz-shootingStar.s1 {
      top: 12%;
      left: -15%;
      animation: shootStar 40s var(--ease) infinite 30s;
    }
    .dz-shootingStar.s2 {
      top: 35%;
      left: -20%;
      animation: shootStar 55s var(--ease) infinite 50s;
    }
    .dz-shootingStar.s3 {
      top: 58%;
      left: -10%;
      animation: shootStar 75s var(--ease) infinite 70s;
    }
    @keyframes shootStar {
      0% { transform: translateX(0) rotate(-25deg); opacity: 0; }
      1% { opacity: 0.5; }
      3% { opacity: 0.35; }
      5% { opacity: 0; }
      100% { transform: translateX(180vw) rotate(-25deg); opacity: 0; }
    }
    body.light .dz-shootingStar {
      background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
    }

    @media (prefers-reduced-motion: reduce) {
      .dz-nebula, .dz-nebulaDrift { animation: none !important; opacity: 0.7; }
      .dz-shootingStar { animation: none !important; display: none; }
    }
    /* === DZ:UNIVERSE_BG END === */

    /* === DZ:NAV BEGIN === */
    .dz-nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 50;
      background: var(--navBg);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid color-mix(in oklab, var(--fg) 12%, var(--border));
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
      transition: transform var(--ui) var(--ease), opacity var(--ui) var(--ease), box-shadow var(--ui) ease;
    }
    .dz-nav.scrolled {
      border-bottom-color: color-mix(in oklab, var(--fg) 18%, var(--border));
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
    }
    .dz-nav.hidden {
      transform: translateY(-80px);
      opacity: 0.2;
    }

    .dz-nav-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 0;
    }

    .dz-left {
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      user-select: none;
      min-width: 0;
    }

    .dz-brandText {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .dz-name {
      font-weight: 980;
      letter-spacing: -0.02em;
      font-size: 19px;
      line-height: 1;
      white-space: nowrap;
    }

    .dz-appName {
      font-weight: 520;
      opacity: 0.80;
      font-size: 12.5px;
      letter-spacing: 0.01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 46vw;
      line-height: 1;
      margin-top: 3px;
      color: var(--muted);
    }

    .dz-links {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-left: 18px;
    }
    .dz-links a {
      color: var(--muted);
      font-size: 14px;
      font-weight: 500;
      border-bottom: 1px solid transparent;
      transition: color var(--fast) ease, border-color var(--fast) ease, transform var(--fast) var(--ease);
      padding-bottom: 2px;
    }
    .dz-links a:hover {
      color: var(--fg);
      border-color: color-mix(in oklab, var(--fg) 40%, transparent);
      transform: translateY(-1px);
    }

    .dz-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .dz-themeBtn {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid color-mix(in oklab, var(--fg) 12%, var(--border));
      background: transparent;
      color: var(--fg);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform var(--fast) var(--ease), border-color var(--fast) ease, opacity var(--fast) ease;
    }
    .dz-themeBtn:hover {
      transform: translateY(-1px);
      border-color: color-mix(in oklab, var(--fg) 50%, var(--border));
    }
    .dz-themeBtn:active { transform: translateY(0); opacity: .90; }
    .dz-themeBtn svg { width: 18px; height: 18px; display: block; }

    .dz-navCta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid color-mix(in oklab, var(--fg) 16%, var(--border));
      background: color-mix(in oklab, var(--fg) 8%, transparent);
      font-weight: 980;
      font-size: 13px;
      transition: transform var(--fast) var(--ease), border-color var(--fast) ease, opacity var(--fast) ease;
      user-select: none;
      cursor: pointer;
      white-space: nowrap;
    }
    .dz-navCta:hover {
      transform: translateY(-1px);
      border-color: color-mix(in oklab, var(--fg) 38%, var(--border));
    }
    .dz-navCta:active { transform: translateY(0); opacity: .90; }
    /* Login button — shown to logged-out users */
    .dz-loginBtn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:11px;border:1px solid rgba(255,255,255,.1);background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s;white-space:nowrap}
    .dz-loginBtn:hover{border-color:rgba(255,255,255,.22);color:var(--fg)}
    body.light .dz-loginBtn{border-color:rgba(0,0,0,.15);color:var(--muted);}
    body.light .dz-loginBtn:hover{border-color:rgba(0,0,0,.3);color:var(--fg);}
    body.dz-member .dz-loginBtn{display:none}
    /* Account button — shown when logged in (replaces Login button in same slot).
       Brand-correct: neutral at rest, prismatic on hover. */
    .dz-accountBtn {
      display: none;  /* shown by body.dz-member rule below */
      align-items: center;
      gap: 8px;
      padding: 5px 12px 5px 5px;
      border-radius: 999px;
      border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent);
      background: color-mix(in oklab, var(--fg) 4%, transparent);
      color: var(--fg);
      font-family: inherit;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: -.01em;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      max-width: 200px;
      transition: border-color .18s ease, background .18s ease, transform .18s ease;
    }
    .dz-accountBtn:hover {
      border-color: transparent;
      background: var(--rainbow);
      color: #0a0a0f;
      transform: translateY(-1px);
    }
    .dz-accountBtn:hover .dz-acc-avatar {
      background: rgba(255,255,255,.55);
      color: #0a0a0f;
    }
    .dz-accountBtn:hover .dz-acc-chev {
      opacity: 1;
      transform: translateX(2px);
    }
    .dz-acc-avatar {
      width: 24px; height: 24px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: color-mix(in oklab, var(--fg) 12%, transparent);
      color: var(--fg);
      font-weight: 800;
      font-size: 10.5px;
      flex-shrink: 0;
      overflow: hidden;
      transition: background .18s ease, color .18s ease;
    }
    .dz-acc-avatar img {
      width: 100%; height: 100%;
      object-fit: cover;
      border-radius: 999px;
    }
    .dz-acc-name {
      max-width: 110px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .dz-acc-chev {
      opacity: .55;
      flex-shrink: 0;
      transition: opacity .18s ease, transform .18s ease;
    }
    /* Toggle: show Account when member, hide Login */
    body.dz-member .dz-loginBtn  { display: none !important; }
    body.dz-member .dz-accountBtn { display: inline-flex !important; }

    /* Logged-out: ensure Account stays hidden */
    body:not(.dz-member) .dz-accountBtn { display: none !important; }

    /* Member plan pill — shown when logged in, replaces login btn */
    .dz-navPlan{display:none;align-items:center;gap:8px;padding:8px 13px;border-radius:11px;border:1px solid color-mix(in oklab,var(--fg) 12%,transparent);background:color-mix(in oklab,var(--fg) 5%,transparent);font-size:12px;font-weight:800;cursor:pointer;color:var(--fg);transition:all .14s;white-space:nowrap;font-family:inherit}
    .dz-navPlan:hover{border-color:color-mix(in oklab,var(--fg) 28%,transparent);background:color-mix(in oklab,var(--fg) 8%,transparent)}
    body.dz-member .dz-navPlan{display:inline-flex}

    /* New member nav buttons — only visible when dz-member */
    .dz-nav-suite-btn,.dz-nav-vault-btn,.dz-nav-logout-btn{
      display:none;align-items:center;gap:6px;
      padding:8px 13px;border-radius:11px;
      border:1px solid color-mix(in oklab,var(--fg) 12%,transparent);
      background:color-mix(in oklab,var(--fg) 4%,transparent);
      font-size:12px;font-weight:600;cursor:pointer;
      color:var(--fg);font-family:inherit;
      transition:all .14s;white-space:nowrap;
    }
    body.dz-member .dz-nav-suite-btn,
    body.dz-member .dz-nav-vault-btn,
    body.dz-member .dz-nav-logout-btn{display:inline-flex}
    .dz-nav-suite-btn:hover{border-color:color-mix(in oklab, var(--fg) 22%, transparent);background:color-mix(in oklab, var(--fg) 8%, transparent);color:color-mix(in oklab, var(--fg) 35%, transparent)}
    .dz-nav-vault-btn:hover{border-color:color-mix(in oklab, var(--fg) 14%, transparent);background:color-mix(in oklab, var(--fg) 14%, transparent)}
    .dz-nav-logout-btn:hover{border-color:rgba(255,100,100,.3);background:rgba(255,100,100,.07);color:rgba(255,140,140,.9)}
    .dz-nav-myspace-btn{display:none;align-items:center;gap:6px;padding:8px 15px;border-radius:11px;border:none;background:color-mix(in oklab, var(--fg) 8%, transparent);color:color-mix(in oklab, var(--fg) 35%, transparent);font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;transition:background .15s;white-space:nowrap;text-decoration:none}
    .dz-nav-myspace-btn:hover{background:color-mix(in oklab, var(--fg) 14%, transparent);text-decoration:none}
    .dz-stImg{width:20px;height:20px;display:inline-block;vertical-align:middle;opacity:.85;transition:opacity .15s}
    a:hover .dz-stImg{opacity:1}
    body.dz-member .dz-nav-myspace-btn{display:inline-flex}

    /* PIN indicator dot on vault button */
    .dz-nav-pin-indicator{width:6px;height:6px;border-radius:50%;background:color-mix(in oklab, var(--fg) 35%, transparent);display:none;flex-shrink:0}
    .dz-nav-vault-btn.locked .dz-nav-pin-indicator{display:inline-block;background:color-mix(in oklab, var(--fg) 35%, transparent)}
    .dz-nav-vault-btn.unlocked .dz-nav-pin-indicator{display:inline-block;background:color-mix(in oklab, var(--fg) 35%, transparent)}
    .dz-navPlan-dot{width:5px;height:5px;border-radius:50%;background: color-mix(in oklab, var(--fg) 8%, transparent);flex-shriflex-shrink:0}
    /* Login modal */
    .dz-li-back{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:102000;display:none;overflow-y:auto}
    .dz-li-back.show{display:block}
    .dz-li-modal{width:min(440px,calc(100vw - 24px));margin:100px auto 80px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:var(--bg);box-shadow:0 40px 120px rgba(0,0,0,.75);overflow:hidden;padding:0}
    .dz-li-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.06)}
    .dz-li-title{font-size:15px;font-weight:980;letter-spacing:-.02em}
    .dz-li-x{width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.09);background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background .14s}
    .dz-li-x:hover{background:rgba(255,255,255,.06);color:var(--fg)}
    .dz-li-body{padding:22px}
    .dz-li-lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:.7;margin-bottom:8px}
    .dz-li-field{width:100%;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--fg);padding:0 14px;font-size:13px;font-family:ui-monospace,SFMono-Regular,monospace;outline:none;transition:border-color .15s;box-sizing:border-box;letter-spacing:.05em}
    .dz-li-field:focus{border-color:rgba(255,255,255,.26)}
    .dz-li-field::placeholder{color:var(--muted);font-family:inherit;letter-spacing:normal}
    .dz-li-hint{font-size:10.5px;color:var(--muted);margin-top:8px;line-height:1.6}
    .dz-li-status{font-size:11px;min-height:18px;margin-top:10px;line-height:1.5}
    .dz-li-status.ok{color:rgba(255,255,255,.8)}
    .dz-li-status.err{color:rgba(255,120,100,.85)}
    .dz-li-btn{width:100%;height:46px;border-radius:13px;border:none;background:var(--fg);color:var(--bg);font-size:14px;font-weight:980;letter-spacing:-.01em;cursor:pointer;margin-top:18px;transition:opacity .14s,transform .14s;display:flex;align-items:center;justify-content:center;font-family:inherit}
    .dz-li-btn:hover{opacity:.88;transform:translateY(-1px)}
    .dz-li-sep{display:flex;align-items:center;gap:10px;margin:18px 0;font-size:10px;color:var(--muted);opacity:.5}
    .dz-li-sep::before,.dz-li-sep::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.07)}
    .dz-li-note{font-size:11px;color:var(--muted);text-align:center;line-height:1.6}

    .dz-build {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid color-mix(in oklab, var(--fg) 10%, var(--border));
      background: color-mix(in oklab, var(--soft) 85%, var(--bg));
      color: var(--muted);
      font-size: 11.5px;
      user-select: none;
      white-space: nowrap;
    }

    /* Brand standard: no standalone accent at rest. The dot is neutral
       and adopts the prismatic rainbow only when the user hovers the
       pill that contains it. Animation kept subtle, no green halo. */
    .dz-dotPulse {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: color-mix(in oklab, var(--fg) 30%, transparent);
      box-shadow: 0 0 0 0 transparent;
      animation: pulse 2.4s var(--ease2) infinite;
      transition: background .18s ease;
    }
    .dz-build:hover .dz-dotPulse {
      background: var(--rainbow);
    }
    @keyframes pulse {
      0%   { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
      35%  { box-shadow: 0 0 0 8px color-mix(in oklab, var(--fg) 6%, transparent); transform: scale(1.05); }
      100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
    }

    /* Mobile menu */
    .dz-menuBtn {
      display: none;
      width: 40px;
      height: 38px;
      border-radius: 12px;
      border: 1px solid color-mix(in oklab, var(--fg) 12%, var(--border));
      background: transparent;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
      padding: 0;
    }
    .dz-menuBtn span {
      display: block;
      width: 18px;
      height: 2px;
      background: var(--fg);
      border-radius: 2px;
      opacity: 0.88;
      transition: transform var(--fast) var(--ease), opacity var(--fast) ease;
    }

    .dz-mobileNav {
      display: none;
      border-top: 1px solid color-mix(in oklab, var(--fg) 12%, var(--border));
      padding: 10px 0 16px;
    }
    .dz-mobileNav.open { display: block; }
    .dz-mobileNav a {
      display: block;
      padding: 10px 0;
      color: var(--muted);
      font-size: 15px;
      font-weight: 500;
      transition: color var(--fast) ease;
    }
    .dz-mobileNav a:hover { color: var(--fg); }
    .dz-mobileNav a.cta { color: var(--fg); font-weight: 980; }

    @media (max-width: 860px) {
      .dz-links { display: none; }
      .dz-build { display: none; }
      .dz-menuBtn { display: flex; }
    }

    @media (prefers-reduced-motion: reduce) {
      .dz-dotPulse { animation: none !important; }
    }
    /* === DZ:NAV END === */

    /* === DZ:LOGO BEGIN === */
    .dz-logo {
      width: 44px;
      height: 44px;
      display: block;
      filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.25));
      transform-origin: 50% 60%;
      will-change: transform;
    }

    .dz-logo[data-anim="home"] {
      animation: logoFloat 3.4s var(--ease) infinite;
    }
    @keyframes logoFloat {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-2.5px) rotate(-1.2deg); }
    }

    .eyeGroup {
      transform-origin: 50% 50%;
      animation: blink 6.5s ease-in-out infinite;
      animation-delay: 1.2s;
    }
    @keyframes blink {
      0%, 93%, 100% { transform: scaleY(1); }
      95% { transform: scaleY(0.06); }
    }

    .dz-sparkOnce { animation: sparkOnce 700ms var(--ease) 1; }
    @keyframes sparkOnce {
      0%   { transform: translateY(0) rotate(0deg) scale(1); }
      20%  { transform: translateY(2px) rotate(0.8deg) scale(0.985); }
      45%  { transform: translateY(-2px) rotate(-0.6deg) scale(1.012); }
      100% { transform: translateY(0) rotate(0deg) scale(1); }
    }

    .dz-smilePulse {
      animation: smilePulse 800ms var(--ease) 1;
      transform-origin: 50% 60%;
    }
    @keyframes smilePulse {
      0% { transform: scale(1); }
      40% { transform: scale(1.06); }
      100% { transform: scale(1); }
    }

    /* Wink */
    .dz-wink .eyeR {
      transform: scaleY(0.06);
      transform-origin: 50% 50%;
      transition: transform 180ms var(--ease);
    }
    .dz-unwink .eyeR {
      transform: scaleY(1);
      transition: transform 220ms var(--ease);
    }

    @media (prefers-reduced-motion: reduce) {
      .dz-logo, .eyeGroup { animation: none !important; }
      .dz-sparkOnce, .dz-smilePulse { animation: none !important; }
    }
    /* === DZ:LOGO END === */

    /* === DZ:HERO BEGIN === */
    .dz-hero {
      min-height: calc(100vh - 66px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 120px 0 50px;
      text-align: center;
      position: relative;
    }

    .dz-hero-inner {
      max-width: 940px;
      margin: 0 auto;
      opacity: 0;
      transform: translateY(18px);
      animation: heroIn 1s var(--ease) 0.15s forwards;
    }
    @keyframes heroIn {
      to { opacity: 1; transform: none; }
    }

    .dz-overline {
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--fg);
      margin-bottom: 8px;
    }

    .dz-eyebrow {
      font-size: 13px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--muted);
    }

    /* Footer heart SVG — matches Donezo Build Standard exactly */
    /* Heart — dual class alias for Build Standard cross-file consistency */
    .dz-footer-heart,
    .dz-heart-svg { display: inline-block; vertical-align: middle; flex-shrink: 0; margin: 0 2px; }
    .dz-footer-heart path,
    .dz-heart-svg path { fill: var(--dz-heart); transition: fill .25s var(--ease); }

    .dz-title {
      margin: 0;
      font-size: clamp(40px, 6vw, 80px);
      letter-spacing: -0.055em;
      line-height: 1.02;
      font-weight: 980;
    }
    .dz-title .grad {
      /* Donezo tri-color: soft mint → sky → lavender (dark mode) */
      background: linear-gradient(
        100deg,
        color-mix(in oklab, var(--fg) 22%, var(--fg)),
        color-mix(in oklab, var(--b) 65%, var(--fg)),
        color-mix(in oklab, var(--p) 65%, var(--fg))
      );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    body.light .grad {
      /* Deep saturated for white background readability */
      background: linear-gradient(
        105deg,
        #008a45 0%,
        #1a6ecf 48%,
        #7c22c8 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .dz-sub {
      margin: 20px auto 0;
      max-width: 780px;
      font-size: 18px;
      line-height: 1.65;
      color: var(--muted);
      opacity: 0;
      animation: fadeUp 800ms var(--ease) 0.5s forwards;
    }

    .dz-bridge {
      margin: 12px auto 0;
      max-width: 780px;
      font-size: 16px;
      line-height: 1.65;
      color: color-mix(in oklab, var(--muted) 70%, var(--fg));
      opacity: 0;
      animation: fadeUp 800ms var(--ease) 0.65s forwards;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .dz-heroCtas {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 28px;
      opacity: 0;
      animation: fadeUp 800ms var(--ease) 0.8s forwards;
    }

    .dz-btn {
      border-radius: 14px;
      border: 1px solid color-mix(in oklab, var(--fg) 14%, var(--border));
      background: transparent;
      color: var(--fg);
      padding: 13px 18px;
      cursor: pointer;
      font-weight: 980;
      font-size: 14px;
      transition: transform var(--fast) var(--ease), border-color var(--fast) ease, opacity var(--fast) ease, box-shadow var(--fast) ease;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      user-select: none;
    }
    .dz-btn:hover {
      transform: translateY(-1px);
      border-color: color-mix(in oklab, var(--fg) 42%, var(--border));
    }
    .dz-btn:active { transform: translateY(0); opacity: .90; }

    .dz-btn.primary {
      background: var(--fg);
      color: var(--bg);
      border-color: color-mix(in oklab, var(--fg) 20%, transparent);
      position: relative;
      overflow: hidden;
    }
    .dz-btn.primary::after {
      content: "";
      position: absolute;
      inset: -60%;
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.30), transparent 55%);
      opacity: 0;
      transform: translate3d(-8%, -6%, 0);
      transition: opacity var(--ui) ease, transform var(--ui) ease;
      pointer-events: none;
    }
    body.light .dz-btn.primary::after {
      background: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.10), transparent 55%);
    }
    .dz-btn.primary:hover {
      box-shadow: var(--shadow);
    }
    .dz-btn.primary:hover::after {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    .dz-micro {
      margin-top: 22px;
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: 13px;
      opacity: 0;
      animation: fadeUp 800ms var(--ease) 0.95s forwards;
    }

    .dz-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 13px;
      border-radius: 999px;
      border: 1px solid color-mix(in oklab, var(--fg) 10%, var(--border));
      background: color-mix(in oklab, var(--soft) 85%, var(--bg));
      user-select: none;
      white-space: nowrap;
      font-size: 12.5px;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .dz-heroCaption {
      margin-top: 16px;
      font-size: 13px;
      color: var(--muted);
      opacity: 0;
      animation: fadeUp 800ms var(--ease) 1.1s forwards;
    }

    @media (max-width: 640px) {
      .dz-hero { padding-top: 130px; }
      .dz-sub { font-size: 16px; }
      .dz-bridge { font-size: 15px; }
    }
    /* === DZ:HERO END === */

    /* === DZ:ACCESSIBILITY BEGIN === */
    .srOnly {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    /* Smooth scroll anchors */
    #apps, #pricing, #vision, #access { scroll-margin-top: 90px; }
    /* === DZ:ACCESSIBILITY END === */
  
    /* ================= NAV PROGRESS + SPACER ================= */
    .dz-nav-progress{
      position:absolute;
      left:0; right:0; bottom:-1px;
      height:2px;
      background: color-mix(in oklab, var(--fg) 8%, transparent);
      overflow:hidden;
      pointer-events:none;
    }
    .dz-nav-progress > span{
      display:block;
      height:100%;
      width:0%;
      background: linear-gradient(90deg,
        color-mix(in oklab, var(--fg) 35%, transparent),
        color-mix(in oklab, var(--fg) 35%, transparent),
        color-mix(in oklab, var(--fg) 35%, transparent)
      );
      filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
      transform-origin:left center;
      transition: width 120ms linear;
    }
    .dz-nav-spacer{ height:72px; }

    /* ================= LANGUAGE BUTTON ================= */
    .dz-langBtn{
      height: 40px;
      padding: 0 12px;
      border-radius: 14px;
      border: 1px solid color-mix(in oklab, var(--fg) 14%, var(--border));
      background: transparent;
      color: var(--fg);
      cursor: pointer;
      font-weight: 950;
      font-size: 12px;
      letter-spacing: 0.10em;
      transition: transform var(--fast) var(--ease), border-color var(--fast) ease, opacity var(--fast) ease;
      user-select: none;
    }
    .dz-langBtn:hover{
      transform: translateY(-1px);
      border-color: color-mix(in oklab, var(--fg) 55%, var(--border));
    }
    .dz-langBtn:active{ transform: translateY(0); opacity: 0.92; }

    /* ================= PURPOSEFUL CURSOR ================= */
    .dz-cursor{
      position: fixed;
      left: 0; top: 0;
      width: 18px; height: 18px;
      border-radius: 999px;
      z-index: 80;
      pointer-events: none;
      transform: translate3d(-50%,-50%,0);
      opacity: 0;
      transition: opacity 220ms var(--ease);
      filter: drop-shadow(0 14px 28px rgba(0,0,0,.35));
    }
    .dz-cursor.on{ opacity: 1; }
    .dz-cursor .halo{
      position:absolute; inset:-18px;
      border-radius: 999px;
      border: 1px solid color-mix(in oklab, var(--cursorCol, color-mix(in oklab, var(--fg) 35%, transparent)) 55%, transparent);
      background: radial-gradient(circle at 30% 30%,
        color-mix(in oklab, var(--cursorCol, color-mix(in oklab, var(--fg) 35%, transparent)) 18%, transparent),
        transparent 60%);
      transform: scale(var(--cursorHalo, 1));
      transition: transform 260ms var(--ease), border-color 260ms var(--ease), background 260ms var(--ease);
    }
    .dz-cursor .dot{
      position:absolute; inset:0;
      border-radius: 999px;
      background: color-mix(in oklab, var(--cursorCol, color-mix(in oklab, var(--fg) 35%, transparent)) 85%, white 12%);
      box-shadow: 0 0 0 1px color-mix(in oklab, var(--fg) 14%, transparent);
      transform: scale(var(--cursorDot, 1));
      transition: transform 220ms var(--ease), background 260ms var(--ease);
    }
    .dz-cursor .label{
      position:absolute;
      left: 18px;
      top: 50%;
      transform: translate3d(10px,-50%,0);
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      letter-spacing: .02em;
      color: var(--fg);
      background: color-mix(in oklab, var(--panel, rgba(15,15,15,0.82)) 85%, transparent);
      border: 1px solid color-mix(in oklab, var(--fg) 12%, var(--border));
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      white-space: nowrap;
      opacity: 0;
      pointer-events:none;
      transition: opacity 160ms var(--ease), transform 220ms var(--ease);
    }
    .dz-cursor.hasLabel .label{
      opacity: 1;
      transform: translate3d(0,-50%,0);
    }
    @media (pointer: coarse){
      .dz-cursor{ display:none; }
    }

    /* ================= SUN TIMELESS MOTION ================= */
    .dz-sun{
      will-change: transform, opacity, background-position;
      transform: translate3d(calc(-2% + var(--sunParX, 0px)), calc(-2% + var(--sunParY, 0px)), 0) scale(var(--sunScale, 1));
      background-position: var(--sunBPX, 18%) var(--sunBPY, 18%);
      animation: sunIn 11s var(--ease) 0.3s forwards, sunDrift 12s ease-in-out 0s infinite;
    }
    @keyframes sunDrift{
      0%{ filter: saturate(1.02) contrast(1.02); }
      50%{ filter: saturate(1.10) contrast(1.04); }
      100%{ filter: saturate(1.02) contrast(1.02); }
    }

    
    /* ================= LANGUAGE POPOVER ================= */
    .dz-popBack{
      position: fixed;
      inset: 0;
      z-index: 80;
      background: rgba(0,0,0,0.38);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display:none;
    }
    .dz-popBack.show{ display:block; }
    .dz-pop{
      position: fixed;
      z-index: 81;
      top: 74px;
      right: 18px;
      width: min(360px, calc(100% - 36px));
      border-radius: 18px;
      border: 1px solid color-mix(in oklab, var(--fg) 14%, var(--border));
      background: color-mix(in oklab, var(--bg) 92%, transparent);
      box-shadow: var(--shadow, 0 18px 45px rgba(0,0,0,0.45));
      display:none;
      overflow:hidden;
    }
    html[dir="rtl"] .dz-pop{ right:auto; left:18px; }
    .dz-pop.show{ display:block; }
    .dz-popHead{
      padding: 14px;
      border-bottom: 1px solid color-mix(in oklab, var(--fg) 12%, var(--border));
    }
    .dz-popTitle{ font-weight: 980; letter-spacing:-0.02em; font-size: 13px; }
    .dz-popHint{ margin-top: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
    .dz-popBody{ padding: 12px; display:flex; flex-direction: column; gap: 8px; }
    .dz-langRow{
      width: 100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 12px;
      border-radius: 16px;
      border: 1px solid color-mix(in oklab, var(--fg) 12%, var(--border));
      background: transparent;
      cursor:pointer;
      transition: transform var(--fast,120ms) var(--ease), border-color var(--fast,120ms) ease, background var(--fast,120ms) ease;
      text-align:left;
    }
    html[dir="rtl"] .dz-langRow{ text-align:right; }
    .dz-langRow:hover{
      transform: translateY(-1px);
      border-color: color-mix(in oklab, var(--fg) 26%, var(--border));
      background: color-mix(in oklab, var(--fg) 4%, transparent);
    }
    .dz-langRow:active{ transform: translateY(0); opacity: .95; }
    .dz-langRow .name{ font-weight: 980; font-size: 13px; }
    .dz-langRow .code{ font-weight: 980; font-size: 12px; color: var(--muted); letter-spacing: 0.10em; }
    .dz-langRow.selected{
      border-color: color-mix(in oklab, var(--fg) 40%, var(--border));
      background: color-mix(in oklab, var(--fg) 7%, transparent);
    }
    .dz-popFoot{
      padding: 12px;
      border-top: 1px solid color-mix(in oklab, var(--fg) 12%, var(--border));
      display:flex;
      justify-content:flex-end;
    }
    .dz-miniBtn{
      border-radius: 14px;
      border: 1px solid color-mix(in oklab, var(--fg) 12%, var(--border));
      background: transparent;
      padding: 10px 12px;
      cursor:pointer;
      font-weight: 950;
      font-size: 12px;
      color: var(--muted);
      transition: transform var(--fast,120ms) var(--ease), border-color var(--fast,120ms) ease, color var(--fast,120ms) ease, opacity var(--fast,120ms) ease;
      user-select:none;
      white-space: nowrap;
    }
    .dz-miniBtn:hover{ transform: translateY(-1px); border-color: color-mix(in oklab, var(--fg) 42%, var(--border)); color: var(--fg); }
    .dz-miniBtn:active{ transform: translateY(0); opacity: .92; }

    
    /* ═══════════════════════════════════════════════════════════════════════
       TOAST NOTIFICATIONS
       ═══════════════════════════════════════════════════════════════════════ */
    .dz-toast {
      position: fixed;
      top: 24px;
      right: 24px;
      background: rgba(0,0,0,0.95);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 12px;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 300px;
      max-width: 450px;
      z-index: 100000;
      opacity: 0;
      transform: translateX(400px);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 10px 40px rgba(0,0,0,0.5);
      backdrop-filter: blur(10px);
    }
    
    .dz-toast-show {
      opacity: 1;
      transform: translateX(0);
    }
    
    .dz-toast-icon {
      font-size: 20px;
      flex-shrink: 0;
    }
    
    .dz-toast-message {
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.4;
    }
    
    .dz-toast-success {
      border-color: color-mix(in oklab, var(--fg) 22%, transparent);
      background: linear-gradient(135deg, color-mix(in oklab, var(--fg) 14%, transparent), color-mix(in oklab, var(--fg) 8%, transparent));
    }
    
    .dz-toast-success .dz-toast-icon {
      color: color-mix(in oklab, var(--fg) 22%, transparent);
    }
    
    .dz-toast-error {
      border-color: rgba(244,106,106,0.4);
      background: linear-gradient(135deg, rgba(244,106,106,0.15), rgba(244,106,106,0.05));
    }
    
    .dz-toast-error .dz-toast-icon {
      color: color-mix(in oklab, var(--fg) 22%, transparent);
    }
    
    .dz-toast-warning {
      border-color: rgba(255,193,7,0.4);
      background: linear-gradient(135deg, rgba(255,193,7,0.15), rgba(255,193,7,0.05));
    }
    
    .dz-toast-warning .dz-toast-icon {
      color: color-mix(in oklab, var(--fg) 22%, transparent);
    }
    
    .dz-toast-info {
      border-color: rgba(100,180,255,0.4);
      background: linear-gradient(135deg, rgba(100,180,255,0.15), rgba(100,180,255,0.05));
    }
    
    .dz-toast-info .dz-toast-icon {
      color: #64b4ff;
    }
    
/* Hide founder story when logged in */
body.dz-member #dz-founder-section { display: none !important; }