:root {
      --paper: #dfe4ec; --paper-lift: #e7ebf1; --paper-high: #f2f4f8;
      --ink: #38383a; --ink-soft: #5f636b; --ink-mute: #878c95;
      --ruby: #a3163c; --ruby-deep: #8f1637; --blue: #5b8fd9; --peri: #a8c4ea; --coral: #f26b45;
      --mint: #5fc9b8; --orchid: #dfa6d9; --butter: #f2d489;
      --hair: rgba(56,56,58,.20); --hair-soft: rgba(56,56,58,.11);
      --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      --text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
      --r-md: 22px; --r-sm: 14px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
    .field { position: fixed; inset: -25vmax; z-index: 0; pointer-events: none; filter: blur(90px) saturate(125%); opacity: .85; }
    .orb { position: absolute; border-radius: 50%; }
    .orb-1 { width: 58vmax; height: 46vmax; left: 4%; top: 2%; background: radial-gradient(circle at 40% 40%, rgba(91,143,217,.62), rgba(91,143,217,0) 68%); }
    .orb-2 { width: 44vmax; height: 44vmax; left: 52%; top: -4%; background: radial-gradient(circle at 50% 50%, rgba(168,196,234,.75), rgba(168,196,234,0) 66%); }
    .orb-3 { width: 40vmax; height: 32vmax; left: 62%; top: 40%; background: radial-gradient(circle at 50% 50%, rgba(242,107,69,.38), rgba(242,107,69,0) 66%); }
    .orb-4 { width: 36vmax; height: 36vmax; left: 8%; top: 60%; background: radial-gradient(circle at 50% 50%, rgba(95,201,184,.34), rgba(95,201,184,0) 68%); }
    .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .38; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
    .page { position: relative; z-index: 2; }
    .wrap { width: min(1120px, calc(100% - clamp(56px, 10vw, 180px))); margin: 0 auto; }
    .top { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); background: rgba(223,228,236,.58); border-bottom: 1px solid var(--hair-soft); }
    .top-in { display: flex; align-items: center; gap: 20px; padding: 15px 0; }
    .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
    .brand span { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -.035em; }
    .brand-mark { width: 30px; height: 30px; border-radius: 8px; display: block; box-shadow: 0 4px 12px -6px rgba(163,22,60,.6); }
    .top nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
    .top nav a { font-size: 14px; font-weight: 500; color: var(--ink-soft); text-decoration: none; }
    .top nav a:hover { color: var(--ink); }
    .top nav a.btn-primary, .top nav a.btn-primary:hover { color: #fff; }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-weight: 600; font-size: 14px; text-decoration: none; border: 1px solid var(--hair); background-origin: border-box; background-clip: border-box; color: var(--ink); background: rgba(255,255,255,.35) border-box; transition: transform .2s ease, background .2s ease; }
    .btn-primary { background: linear-gradient(135deg, var(--blue), var(--coral)) border-box; border-color: transparent; color: #fff; box-shadow: 0 18px 40px -22px rgba(91,143,217,.9); }
    .btn:hover { transform: translateY(-1px); }
    .eyebrow { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); display: flex; align-items: center; gap: 10px; }
    .eyebrow::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--ruby); }
    h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 0; color: var(--ink); }
    h1 { font-size: clamp(38px, 6.4vw, 78px); max-width: 16ch; }
    h2 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.03em; line-height: 1.1; margin: 48px 0 16px; max-width: 24ch; }
    h3 { font-size: 21px; letter-spacing: -.02em; margin: 30px 0 10px; }
    .lede { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5; color: var(--ink-soft); max-width: 46ch; }
    .meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--ink-mute); font-weight: 500; }
    .hero { padding: clamp(48px, 7vw, 90px) 0 clamp(28px, 4vw, 48px); display: grid; gap: 22px; }
    .prose { max-width: 68ch; display: grid; gap: 18px; padding-bottom: 40px; }
    .prose p { margin: 0; }
    .prose blockquote { margin: 10px 0; padding: 18px 24px; border-left: 3px solid var(--ruby); background: rgba(255,255,255,.32); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -.02em; line-height: 1.3; color: var(--ink); }
    .prose ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
    .prose a { color: var(--ruby); }
    .glass { background: rgba(255,255,255,.34); border: 1px solid rgba(255,255,255,.55); box-shadow: 0 40px 90px -50px rgba(28,34,48,.45), inset 0 1px 0 rgba(255,255,255,.6); border-radius: var(--r-md); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); }
    .cta { padding: 28px 30px; display: grid; gap: 14px; margin: 24px 0 56px; max-width: 68ch; }
    .cta h3 { margin: 0; }
    .cta p { margin: 0; color: var(--ink-soft); }
    .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
    .list { display: grid; gap: 18px; padding: 10px 0 70px; }
    .card { display: grid; gap: 10px; padding: 26px 28px; text-decoration: none; color: inherit; transition: transform .25s cubic-bezier(.2,.7,.3,1); }
    .card:hover { transform: translateY(-3px); }
    .card h2 { margin: 0; font-size: clamp(22px, 2.6vw, 32px); }
    .card p { margin: 0; color: var(--ink-soft); max-width: 60ch; }
    .card .meta { margin-top: 4px; }
    .more { padding: 0 0 70px; display: grid; gap: 14px; max-width: 68ch; }
    .more .eyebrow { margin-bottom: 4px; }
    .more a { color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
    .more a:hover { color: var(--ruby); }
    footer { border-top: 1px solid var(--hair-soft); padding: 30px 0 44px; font-size: 13px; color: var(--ink-mute); }
    .foot-in { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
    .foot-links { display: flex; flex-wrap: wrap; gap: 18px; }
    footer a { color: var(--ink-mute); text-decoration: none; }
    footer a:hover { color: var(--ink); }
    @media (max-width: 900px) { .top nav { gap: 14px; } .top nav .hide-sm { display: none; } }
    @media (max-width: 640px) { .cta { padding: 22px; } }