/* === Design tokens mapped from Noble Web Studio brand system (navy + gold) === */
  :root[data-theme="light"]{
    --brand:#002F86;--brand-strong:#001E5C;--brand-soft:rgba(0,47,134,0.06);--brand-line:rgba(0,47,134,0.14);
    --accent:#D5A716;--accent-soft:rgba(213,167,22,0.12);--accent-line:rgba(213,167,22,0.35);
    --success:#0E7C4A;--success-soft:rgba(14,124,74,0.12);
    --surface-0:#F4F6FB;--surface-1:#FFFFFF;--surface-2:#EEF1F7;--surface-glass:rgba(255,255,255,0.85);
    --ink-1:#0A1633;--ink-2:#4A5878;--ink-3:#8794AE;--ink-4:#B9C2D6;
    --line-1:rgba(0,47,134,0.10);--line-strong:rgba(0,47,134,0.20);
    --shadow-sm:0 1px 2px rgba(0,47,134,0.06), 0 1px 3px rgba(0,47,134,0.04);
    --shadow-md:0 4px 14px rgba(0,47,134,0.10), 0 2px 4px rgba(0,47,134,0.05);
    --shadow-lg:0 16px 40px rgba(0,47,134,0.14), 0 4px 12px rgba(0,47,134,0.06);--ring:rgba(0,47,134,0.16);
  }
  :root[data-theme="dark"]{
    --brand:#15347e;--brand-strong:#0A4DB8;--brand-soft:rgba(21,52,126,0.35);--brand-line:rgba(21,52,126,0.55);
    --accent:#E8C04C;--accent-soft:rgba(213,167,22,0.12);--accent-line:rgba(213,167,22,0.30);
    --success:#34D399;--success-soft:rgba(52,211,153,0.14);
    --surface-0:#050B1F;--surface-1:#0B1530;--surface-2:#111E3C;--surface-glass:rgba(11,21,48,0.72);
    --ink-1:#F1F4FA;--ink-2:#A0AEC8;--ink-3:#5E6E8C;--ink-4:#3D4A66;
    --line-1:rgba(255,255,255,0.08);--line-strong:rgba(213,167,22,0.25);
    --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
    --shadow-md:0 4px 14px rgba(0,0,0,0.5);
    --shadow-lg:0 16px 50px rgba(0,0,0,0.6);--ring:rgba(21,52,126,0.45);
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0;height:100%}
  html{color-scheme:light dark}
  body{
    font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--surface-0);color:var(--ink-1);
    height:100dvh;overflow:hidden;display:flex;flex-direction:column;
    letter-spacing:-.005em;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    background-image:
      radial-gradient(1100px 500px at 92% -10%, var(--accent-soft), transparent 60%),
      radial-gradient(800px 460px at -8% 105%, var(--brand-soft), transparent 55%);
  }
  @media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}
  ::selection{background:var(--brand);color:#fff}

  /* TOPBAR */
  .topbar{
    flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
    padding:16px 30px;background:var(--surface-glass);
    backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--line-1);
  }
  .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
  .brand-mark{width:34px;height:34px;border-radius:9px;background:var(--brand);display:grid;place-items:center;position:relative;box-shadow:var(--shadow-sm)}
  .brand-mark::after{content:"";position:absolute;right:5px;bottom:5px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
  .brand-mark span{font-family:'IBM Plex Serif',Georgia,serif;font-weight:600;color:#fff;font-size:17px;line-height:1}
  .brand-name{font-family:'IBM Plex Serif',Georgia,serif;font-weight:500;font-size:17px;letter-spacing:-.01em;color:var(--ink-1)}
  .brand-name em{font-style:italic;color:var(--brand);font-weight:500}
  :root[data-theme="dark"] .brand-name em{color:var(--accent)}

  .topbar-actions{display:flex;align-items:center;gap:10px}
  .theme-toggle{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-1);background:var(--surface-1);cursor:pointer;display:grid;place-items:center;color:var(--ink-2);transition:all .2s ease;padding:0}
  .theme-toggle:hover{border-color:var(--brand-line);color:var(--brand);transform:rotate(18deg)}
  .theme-toggle svg{width:16px;height:16px}
  .theme-toggle .sun{display:none}
  :root[data-theme="dark"] .theme-toggle .sun{display:block}
  :root[data-theme="dark"] .theme-toggle .moon{display:none}

  .btn{padding:10px 18px;border-radius:8px;font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:-.005em;cursor:pointer;border:1px solid transparent;transition:all .2s cubic-bezier(.2,.8,.2,1);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
  .btn-primary{background:var(--brand);color:#fff;box-shadow:0 1px 0 var(--brand-strong) inset, var(--shadow-sm)}
  .btn-primary:hover{background:var(--brand-strong);transform:translateY(-1px);box-shadow:0 1px 0 var(--brand-strong) inset, var(--shadow-md)}
  .btn-primary:active{transform:translateY(0)}
  .btn-ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-strong)}
  .btn-ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--surface-2)}
  :root[data-theme="dark"] .btn-ghost:hover{
    border-color:var(--accent);
    color:var(--accent);
    background:var(--surface-2);
  }
  .btn .arrow{transition:transform .2s cubic-bezier(.22,.61,.36,1)}
  .btn-primary:hover .arrow{transform:translateX(3px)}

  /* MAIN — single screen, two columns */
  main{flex:1 1 auto;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:40px;max-width:1140px;width:100%;margin:0 auto;padding:24px 30px;min-height:0}

  .copy{animation:reveal .7s cubic-bezier(.22,.61,.36,1) both}
  @keyframes reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--ink-1);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px 6px 10px;border-radius:30px;margin-bottom:20px}
  .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
  :root[data-theme="dark"] .eyebrow{color:var(--accent)}

  h1{font-family:'IBM Plex Serif',Georgia,serif;font-weight:500;font-size:clamp(32px,4.4vw,50px);line-height:1.08;letter-spacing:-.025em;margin:0 0 16px;color:var(--ink-1)}
  h1 em{font-style:italic;color:var(--brand);font-weight:400}
  :root[data-theme="dark"] h1 em{color:var(--accent)}
  .desc{font-size:15.5px;color:var(--ink-2);line-height:1.6;margin:0 0 26px;max-width:46ch}

  .cta{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:22px}
  .cta .btn{padding:13px 22px;font-size:14.5px;border-radius:9px}

  .badges{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .badge-chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-3);font-weight:500}
  .badge-chip svg{width:15px;height:15px;color:var(--brand)}
  .badge-chip b{color:var(--ink-1);font-weight:600}
  .badge-sep{width:4px;height:4px;border-radius:50%;background:var(--ink-4)}

  /* VISUAL */
  .visual{position:relative;animation:reveal .7s .12s cubic-bezier(.22,.61,.36,1) both;display:flex;justify-content:center}
  .visual-card{background:var(--surface-1);border:1px solid var(--line-1);border-radius:20px;box-shadow:var(--shadow-lg);padding:16px;position:relative;width:100%;max-width:420px}
  .visual-card::before{content:"";position:absolute;top:18px;left:18px;width:24px;height:2px;border-radius:2px;background:var(--accent);z-index:2}
  .visual-svg{width:100%;height:auto;display:block}

  .float-chip{position:absolute;display:flex;align-items:center;gap:8px;background:var(--surface-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line-1);border-radius:12px;padding:8px 12px;box-shadow:var(--shadow-md);font-size:12px;font-weight:600;color:var(--ink-1);z-index:3}
  .float-chip .ic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--success-soft);color:var(--success);flex-shrink:0}
  .float-chip.chip-2 .ic{background:var(--brand-soft);color:var(--brand)}
  .float-chip .ic svg{width:13px;height:13px}
  .float-chip small{display:block;color:var(--ink-3);font-size:10px;font-weight:500}
  .chip-1{top:24px;right:-10px;animation:floatA 5s ease-in-out infinite}
  .chip-2{bottom:28px;left:-14px;animation:floatB 6s ease-in-out infinite}
  @keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}

  @media (max-width:900px){
    body{overflow-y:auto;height:auto;min-height:100dvh}
    main{grid-template-columns:1fr;gap:36px;padding:32px 22px 40px}
    .visual{order:-1;max-width:360px;margin:0 auto}
    .desc{max-width:none}
  }
  @media (max-width:560px){
    .topbar{padding:13px 16px}
    .label-hide{display:none}
    .cta{flex-direction:column;align-items:stretch}
    .cta .btn{width:100%}
    .float-chip{display:none}
  }