:root {
        color-scheme: dark;
        --bg: #060816;
        --bg2: #0b1020;
        --panel: rgba(12, 18, 38, .72);
        --panel2: rgba(255, 255, 255, .045);
        --line: rgba(91, 140, 255, .22);
        --line2: rgba(255, 255, 255, .08);
        --text: #ffffff;
        --muted: #aab3c5;
        --blue: #5b8cff;
        --violet: #7a5cff;
        --cyan: #00d1ff;
        --good: #34d399;
        --warn: #fbbf24;
        --danger: #fb7185;
        --radius: 28px;
        --shadow: 0 28px 90px rgba(0, 0, 0, .34);
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        background:
          radial-gradient(circle at 15% 5%, rgba(91,140,255,.24), transparent 34%),
          radial-gradient(circle at 82% 12%, rgba(122,92,255,.22), transparent 30%),
          radial-gradient(circle at 50% 70%, rgba(0,209,255,.12), transparent 34%),
          linear-gradient(180deg, var(--bg), var(--bg2) 42%, #070b18 100%);
        color: var(--text);
        font-family: Inter, Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        overflow-x: hidden;
      }
      body.modal-open { overflow: hidden; }
      a { color: inherit; }
      .noise {
        position: fixed;
        inset: 0;
        pointer-events: none;
        opacity: .22;
        background-image:
          linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
        background-size: 56px 56px;
        mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
        z-index: 0;
      }
      #particles {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        opacity: .72;
        z-index: 0;
      }
      .page {
        position: relative;
        z-index: 1;
        min-height: 100vh;
      }
      .container {
        width: min(1180px, calc(100% - 36px));
        margin: 0 auto;
      }
      .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 40;
        transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
        border-bottom: 1px solid transparent;
      }
      .site-header.scrolled {
        background: rgba(6, 8, 22, .74);
        backdrop-filter: blur(16px);
        border-color: rgba(255,255,255,.08);
        box-shadow: 0 14px 40px rgba(0,0,0,.24);
      }
      .header-inner {
        width: min(1280px, calc(100% - 32px));
        min-height: 82px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
      }
      .brand {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        min-width: 0;
      }
      .brand-logo {
        width: 76px;
        height: 76px;
        border-radius: 24px;
        display: grid;
        place-items: center;
        position: relative;
        overflow: hidden;
        background: transparent;
        border: 0;
        box-shadow: none;
      }
      .brand-logo::before {
        content: none;
      }
      .brand-logo img {
        width: 62px;
        height: 62px;
        object-fit: contain;
        position: relative;
        z-index: 1;
      }
      .brand-logo span {
        position: relative;
        z-index: 1;
        font-size: 34px;
        font-weight: 900;
        letter-spacing: -.04em;
      }
      .brand-title {
        display: grid;
        gap: 2px;
        line-height: 1.1;
      }
      .brand-title b { font-size: 22px; letter-spacing: -.03em; }
      .brand-title small {
        color: #c7d2fe;
        font-size: 12px;
        white-space: nowrap;
      }
      .nav {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-right: 8px;
      }
      .nav-links a {
        color: var(--muted);
        text-decoration: none;
        font-size: 14px;
        padding: 10px 12px;
        border-radius: 12px;
        transition: color .18s ease, background .18s ease;
      }
      .nav-links a:hover {
        color: #fff;
        background: rgba(255,255,255,.06);
      }
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 46px;
        padding: 12px 18px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.12);
        background: rgba(255,255,255,.055);
        color: #fff;
        text-decoration: none;
        font-weight: 800;
        font-size: 14px;
        cursor: pointer;
        transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
      }
      .btn:hover {
        transform: translateY(-2px);
        border-color: rgba(91,140,255,.55);
        box-shadow: 0 0 28px rgba(91,140,255,.16);
      }
      .btn.primary {
        border-color: rgba(91,140,255,.6);
        background: linear-gradient(135deg, var(--blue), var(--violet));
        box-shadow: 0 0 34px rgba(91,140,255,.34);
      }
      .btn.glow {
        animation: pulseGlow 2.8s ease-in-out infinite;
      }
      .btn.wide { width: 100%; }
      .cookie-consent {
        position: fixed;
        left: 18px;
        right: 18px;
        bottom: 18px;
        z-index: 70;
        width: min(720px, calc(100% - 36px));
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 14px;
        border: 1px solid rgba(91,140,255,.28);
        border-radius: 18px;
        background:
          linear-gradient(135deg, rgba(91,140,255,.12), rgba(0,209,255,.055)),
          rgba(6,8,22,.92);
        box-shadow: 0 18px 50px rgba(0,0,0,.34), 0 0 34px rgba(91,140,255,.14);
        backdrop-filter: blur(16px);
      }
      .cookie-consent[hidden] {
        display: none;
      }
      .cookie-consent b {
        display: block;
        margin-bottom: 4px;
        font-size: 14px;
      }
      .cookie-consent span {
        display: block;
        color: #eef5ff;
        font-size: 15px;
        line-height: 1.55;
      }
      .cookie-consent .btn {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 10px 16px;
      }
      @keyframes pulseGlow {
        0%, 100% { box-shadow: 0 0 28px rgba(91,140,255,.28); }
        50% { box-shadow: 0 0 46px rgba(0,209,255,.38); }
      }
      .hero {
        padding: 112px 0 52px;
        min-height: 86vh;
        display: grid;
        align-items: center;
      }
      .hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
        gap: clamp(24px, 5vw, 70px);
        align-items: center;
      }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: #dbeafe;
        border: 1px solid rgba(91,140,255,.28);
        background: rgba(91,140,255,.08);
        border-radius: 999px;
        padding: 8px 12px;
        font-size: 13px;
        font-weight: 800;
        margin-bottom: 18px;
      }
      .dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--good);
        box-shadow: 0 0 18px rgba(52,211,153,.9);
      }
      h1, h2, h3, p { margin-top: 0; }
      h1 {
        font-size: clamp(42px, 7vw, 86px);
        line-height: .94;
        letter-spacing: -.07em;
        margin-bottom: 22px;
      }
      .gradient-text {
        background: linear-gradient(90deg, #fff, #c7d2fe 42%, #67e8f9);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .lead {
        color: var(--muted);
        font-size: clamp(16px, 2vw, 20px);
        line-height: 1.72;
        max-width: 710px;
        margin-bottom: 26px;
      }
      .hero-statement {
        max-width: 790px;
        margin: 0 0 30px;
        color: #f8fbff;
        font-size: clamp(20px, 2.7vw, 34px);
        line-height: 1.25;
        font-weight: 800;
        letter-spacing: -.025em;
        text-shadow: 0 0 22px rgba(91,140,255,.22);
      }
      .hero-actions,
      .section-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
      }
      .trust-row {
        margin-top: 28px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        max-width: 720px;
      }
      .trust-item {
        min-height: 78px;
        border: 1px solid var(--line2);
        border-radius: 18px;
        background: rgba(255,255,255,.045);
        padding: 14px;
        backdrop-filter: blur(12px);
      }
      .trust-item b {
        display: block;
        font-size: 15px;
        margin-bottom: 4px;
      }
      .trust-item span {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.4;
      }
      .connect-card {
        position: relative;
        border: 1px solid rgba(91,140,255,.28);
        border-radius: 34px;
        background:
          linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
          radial-gradient(circle at 70% 0%, rgba(0,209,255,.2), transparent 36%);
        box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.05);
        padding: 22px;
        overflow: hidden;
        transform-style: preserve-3d;
      }
      .connect-card::before {
        content: "";
        position: absolute;
        inset: -40%;
        background: conic-gradient(from 120deg, transparent, rgba(91,140,255,.18), transparent 28%, rgba(0,209,255,.16), transparent 55%);
        animation: rotate 9s linear infinite;
      }
      .connect-inner {
        position: relative;
        z-index: 1;
        border-radius: 25px;
        background: rgba(5, 9, 22, .78);
        border: 1px solid rgba(255,255,255,.09);
        padding: 18px;
        backdrop-filter: blur(14px);
      }
      @keyframes rotate { to { transform: rotate(360deg); } }
      .panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 18px;
      }
      .status-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #bbf7d0;
        background: rgba(52,211,153,.1);
        border: 1px solid rgba(52,211,153,.18);
        border-radius: 999px;
        padding: 8px 11px;
        font-size: 12px;
        font-weight: 800;
      }
      .server-list {
        display: grid;
        gap: 10px;
      }
      .server {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 16px;
        background: rgba(255,255,255,.045);
      }
      .flag {
        width: 38px;
        height: 26px;
        border-radius: 7px;
        border: 1px solid rgba(255,255,255,.24);
        box-shadow: 0 0 18px rgba(91,140,255,.14);
        overflow: hidden;
      }
      .flag-no {
        background:
          linear-gradient(90deg, transparent 0 31%, #00205b 31% 39%, transparent 39%),
          linear-gradient(to bottom, transparent 0 42%, #00205b 42% 58%, transparent 58%),
          linear-gradient(90deg, transparent 0 27%, #fff 27% 43%, transparent 43%),
          linear-gradient(to bottom, transparent 0 34%, #fff 34% 66%, transparent 66%),
          #ba0c2f;
      }
      .flag-nl {
        background: linear-gradient(to bottom, #ae1c28 0 33.333%, #fff 33.333% 66.666%, #21468b 66.666% 100%);
      }
      .flag-fi {
        position: relative;
        background: #fff;
      }
      .flag-fi::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 6px;
        background: #003580;
        transform: translateY(-50%);
      }
      .flag-fi::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 32%;
        width: 6px;
        background: #003580;
      }
      .server b { display: block; font-size: 14px; }
      .server span { color: var(--muted); font-size: 12px; }
      .ping {
        color: #bfdbfe;
        font-weight: 900;
        font-size: 13px;
      }
      .meter {
        margin-top: 18px;
        display: grid;
        gap: 12px;
      }
      .meter-row {
        display: grid;
        gap: 7px;
      }
      .meter-row label {
        display: flex;
        justify-content: space-between;
        color: #c7d2fe;
        font-size: 12px;
        font-weight: 800;
      }
      .bar {
        height: 9px;
        border-radius: 999px;
        background: rgba(255,255,255,.08);
        overflow: hidden;
      }
      .bar span {
        display: block;
        height: 100%;
        width: var(--w);
        border-radius: inherit;
        background: linear-gradient(90deg, var(--blue), var(--cyan));
        box-shadow: 0 0 22px rgba(0,209,255,.32);
        animation: barFlow 2.6s ease-in-out infinite alternate;
      }
      @keyframes barFlow { from { filter: brightness(1); } to { filter: brightness(1.35); } }
      section {
        padding: 64px 0;
        position: relative;
      }
      .section-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 22px;
        margin-bottom: 30px;
      }
      .section-head h2 {
        font-size: clamp(30px, 4vw, 52px);
        line-height: 1.02;
        letter-spacing: -.05em;
        margin-bottom: 0;
      }
      .section-head p {
        max-width: 540px;
        color: var(--muted);
        line-height: 1.65;
        margin-bottom: 0;
      }
      .cards {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
      }
      .glass {
        border: 1px solid rgba(255,255,255,.09);
        border-radius: var(--radius);
        background: linear-gradient(180deg, rgba(255,255,255,.072), rgba(255,255,255,.032));
        backdrop-filter: blur(18px);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
        transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
      }
      .glass:hover {
        transform: translateY(-6px);
        border-color: rgba(91,140,255,.42);
        box-shadow: 0 0 42px rgba(91,140,255,.14), inset 0 0 0 1px rgba(255,255,255,.035);
      }
      .feature-card {
        padding: 24px;
        min-height: 230px;
        display: flex;
        flex-direction: column;
      }
      .icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        margin-bottom: 20px;
        background: linear-gradient(135deg, rgba(91,140,255,.16), rgba(122,92,255,.16));
        border: 1px solid rgba(91,140,255,.22);
        color: #bfdbfe;
        font-size: 22px;
      }
      .feature-card h3,
      .audience-card h3 {
        font-size: 20px;
        letter-spacing: -.02em;
        margin-bottom: 10px;
      }
      .feature-card p,
      .audience-card p {
        color: var(--muted);
        line-height: 1.65;
        margin-bottom: 0;
      }
      .routes {
        border-radius: 36px;
        padding: clamp(20px, 3vw, 36px);
        background:
          radial-gradient(circle at 20% 10%, rgba(91,140,255,.18), transparent 32%),
          radial-gradient(circle at 80% 76%, rgba(0,209,255,.12), transparent 34%),
          rgba(255,255,255,.035);
        border: 1px solid rgba(91,140,255,.16);
        overflow: hidden;
      }
      .steps {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        margin-top: 28px;
      }
      .step {
        position: relative;
        padding: 22px;
        border-radius: 24px;
        background: rgba(5,9,22,.64);
        border: 1px solid rgba(255,255,255,.08);
      }
      .step-num {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--blue), var(--violet));
        font-weight: 900;
        margin-bottom: 18px;
      }
      .step h3 { font-size: 19px; margin-bottom: 10px; }
      .step p { color: var(--muted); line-height: 1.6; margin-bottom: 0; }
      .dashboard {
        display: grid;
        grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr);
        gap: 28px;
        align-items: center;
      }
      .mock-ui {
        padding: 18px;
        border-radius: 32px;
        background: rgba(255,255,255,.045);
        border: 1px solid rgba(255,255,255,.09);
        box-shadow: var(--shadow);
      }
      .mock-top {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: center;
        padding: 6px 4px 16px;
      }
      .traffic-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }
      .stat {
        padding: 16px;
        border-radius: 20px;
        background: rgba(5,9,22,.7);
        border: 1px solid rgba(255,255,255,.08);
      }
      .stat small {
        display: block;
        color: var(--muted);
        margin-bottom: 10px;
      }
      .stat b {
        display: block;
        font-size: 26px;
        letter-spacing: -.04em;
      }
      .wide-stat {
        margin-top: 12px;
        padding: 18px;
        border-radius: 22px;
        background: rgba(5,9,22,.72);
        border: 1px solid rgba(255,255,255,.08);
      }
      .session {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255,255,255,.07);
      }
      .session:last-child { border-bottom: 0; }
      .session > div {
        min-width: 0;
        display: grid;
        gap: 5px;
      }
      .session > div > b {
        display: block;
        line-height: 1.2;
      }
      .session > div > span {
        display: block;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.35;
        overflow-wrap: anywhere;
      }
      .session > .ping {
        color: var(--muted);
        font-size: 13px;
      }
      .quick-connect {
        margin-top: 12px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        align-items: center;
        padding: 14px;
        border-radius: 20px;
        background: linear-gradient(135deg, rgba(91,140,255,.14), rgba(0,209,255,.08));
        border: 1px solid rgba(91,140,255,.18);
      }
      .audience {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }
      .audience-card {
        padding: 24px;
        min-height: 220px;
      }
      .big-cta {
        text-align: center;
        border-radius: 38px;
        padding: clamp(30px, 5vw, 54px);
        border: 1px solid rgba(91,140,255,.24);
        background:
          linear-gradient(135deg, rgba(91,140,255,.16), rgba(122,92,255,.12)),
          rgba(255,255,255,.035);
        box-shadow: var(--shadow);
        position: relative;
        overflow: hidden;
      }
      .big-cta::before {
        content: "";
        position: absolute;
        inset: auto -10% -45% -10%;
        height: 220px;
        background: radial-gradient(ellipse at center, rgba(0,209,255,.32), transparent 64%);
        filter: blur(14px);
      }
      .big-cta > * { position: relative; z-index: 1; }
      .big-cta h2 {
        font-size: clamp(34px, 5vw, 64px);
        letter-spacing: -.06em;
        margin-bottom: 14px;
      }
      .big-cta p {
        color: var(--muted);
        line-height: 1.65;
        max-width: 680px;
        margin: 0 auto 24px;
      }
      .faq {
        display: grid;
        gap: 12px;
      }
      details {
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 20px;
        background: rgba(255,255,255,.045);
        overflow: hidden;
      }
      summary {
        list-style: none;
        padding: 20px 22px;
        cursor: pointer;
        font-weight: 900;
        display: flex;
        justify-content: space-between;
        gap: 16px;
      }
      summary::-webkit-details-marker { display: none; }
      summary::after {
        content: "+";
        color: var(--cyan);
        font-size: 22px;
        line-height: 1;
      }
      details[open] summary::after { content: "−"; }
      details p {
        margin: 0;
        color: var(--muted);
        line-height: 1.65;
        padding: 0 22px 22px;
      }
      .final {
        padding-bottom: 64px;
      }
      .footer {
        border-top: 1px solid rgba(255,255,255,.08);
        background: rgba(5,9,22,.56);
        padding: 34px 0;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 1.2fr .8fr .8fr;
        gap: 24px;
        align-items: start;
      }
      .footer p,
      .footer a {
        color: var(--muted);
        line-height: 1.7;
        text-decoration: none;
      }
      .footer a:hover { color: #fff; }
      .footer-links {
        display: grid;
        gap: 8px;
      }
      .copyright {
        margin-top: 24px;
        color: rgba(170,179,197,.72);
        font-size: 13px;
      }
      [data-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
      }
      body.has-reveal [data-reveal] {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .38s ease, transform .38s ease;
      }
      body.has-reveal [data-reveal].is-visible {
        opacity: 1;
        transform: translateY(0);
      }
      .modal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, .76);
        backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        z-index: 90;
      }
      .modal-card {
        width: min(390px, 100%);
        max-height: calc(100vh - 20px);
        overflow: auto;
        border: 1px solid rgba(255,255,255,.11);
        border-radius: 28px;
        background:
          radial-gradient(circle at 18% 0%, rgba(91,140,255,.18), transparent 36%),
          linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.032));
        box-shadow: 0 28px 90px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.025);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        position: relative;
      }
      .modal-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.12);
        background: rgba(255,255,255,.075);
        color: #e5e7eb;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
      }
      .modal-body { padding: 16px; }
      .modal-title { margin: 0 42px 6px 0; font-size: 20px; line-height: 1.15; }
      .muted { color: #cbd5e1; line-height: 1.45; font-size: 13px; }
      .modal-hint {
        margin-top: 10px;
        border: 1px solid rgba(251,191,36,.48);
        background: rgba(251,191,36,.12);
        color: #fde68a;
        border-radius: 12px;
        padding: 10px 12px;
        line-height: 1.4;
        font-size: 12px;
      }
      .error, .flash {
        margin-top: 14px;
        padding: 12px 14px;
        border-radius: 14px;
      }
      .error {
        border: 1px solid rgba(248,113,113,.5);
        background: rgba(248,113,113,.12);
        color: #fecaca;
      }
      .flash {
        border: 1px solid rgba(99,102,241,.45);
        background: rgba(99,102,241,.12);
        color: #c7d2fe;
      }
      .auth-form { margin-top: 12px; display: grid; gap: 9px; }
      .field {
        border: 1px solid #22335e;
        border-radius: 13px;
        background: rgba(255,255,255,.03);
        padding: 9px;
      }
      .auth-form label {
        display: block;
        margin-bottom: 6px;
        color: #c7d2fe;
        font-size: 12px;
      }
      .auth-form input {
        width: 100%;
        min-height: 41px;
        border-radius: 10px;
        border: 1px solid #22335e;
        background: #060a14;
        color: #e5e7eb;
        padding: 10px 12px;
        outline: none;
      }
      .auth-form input:focus {
        border-color: #6366f1;
        box-shadow: 0 0 0 1px rgba(99,102,241,.22), 0 0 18px rgba(99,102,241,.16);
      }
      .password-wrap {
        position: relative;
        display: flex;
        align-items: center;
      }
      .password-wrap input { padding-right: 46px; }
      .password-toggle {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 32px;
        border: 1px solid #22335e;
        border-radius: 10px;
        background: #111c35;
        color: #c7d2fe;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .captcha {
        border: 1px solid #22335e;
        border-radius: 13px;
        background: rgba(255,255,255,.03);
        padding: 10px;
      }
      .captcha.is-hidden { display: none; }
      .captcha-title { color: #c7d2fe; font-size: 13px; margin-bottom: 10px; }
      .captcha-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; align-items:stretch; }
      .cap {
        border: 1px solid #22335e;
        border-radius: 12px;
        background: #060a14;
        min-height: 44px;
        display:grid;
        place-items:center;
        padding:0;
        line-height:1;
        text-align:center;
        cursor:pointer;
      }
      .cap span {
        width:100%;
        height:100%;
        min-height:44px;
        display:flex;
        align-items:center;
        justify-content:center;
        line-height:1;
        text-align:center;
        font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif;
      }
      .cap input { display:none; }
      .cap.selected {
        border-color: rgba(99,102,241,.8);
        box-shadow: 0 0 0 1px rgba(99,102,241,.25), 0 0 18px rgba(99,102,241,.16);
      }
      .submit {
        min-height: 44px;
        border: 0;
        border-radius: 12px;
        color: #fff;
        font-weight: 800;
        font-size: 15px;
        background: linear-gradient(180deg, #6366f1, #4f46e5);
        box-shadow: 0 0 24px rgba(99,102,241,.18);
        cursor: pointer;
      }
      .submit[disabled] { opacity: .65; cursor: not-allowed; }
      .code-input {
        letter-spacing: .24em;
        font-size: 18px;
        text-align: center;
      }
      .inline-register {
        width: min(760px, 100%);
        margin: 28px auto 0;
        padding: 18px;
        border-radius: 24px;
        border: 1px solid rgba(91,140,255,.2);
        background:
          radial-gradient(circle at 20% 0%, rgba(91,140,255,.16), transparent 34%),
          rgba(255,255,255,.045);
        box-shadow: 0 24px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
      }
      .inline-register h3 {
        margin: 0 0 7px;
        font-size: clamp(22px, 3vw, 30px);
        letter-spacing: -.03em;
      }
      .inline-register .muted {
        margin-bottom: 14px;
      }
      .inline-register .auth-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .inline-register .field:first-child,
      .inline-register .captcha,
      .inline-register .submit {
        grid-column: 1 / -1;
      }
      @media (max-width: 1100px) {
        .hero-grid,
        .dashboard {
          grid-template-columns: 1fr;
        }
        .cards,
        .audience,
        .steps {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .trust-row {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 780px) {
        .nav-links { display: none; }
        .header-inner {
          width: min(100% - 20px, 1280px);
          min-height: 78px;
        }
        .brand-logo {
          width: 58px;
          height: 58px;
          border-radius: 18px;
        }
        .brand-logo img {
          width: 48px;
          height: 48px;
        }
        .brand-title small { display: none; }
        .nav { gap: 7px; }
        .btn {
          min-height: 42px;
          padding: 10px 13px;
          font-size: 13px;
        }
        .cookie-consent {
          left: 10px;
          right: 10px;
          bottom: 10px;
          width: calc(100% - 20px);
          flex-direction: column;
          align-items: stretch;
          padding: 12px;
        }
        .cookie-consent .btn {
          width: 100%;
        }
        .inline-register .auth-form {
          grid-template-columns: 1fr;
        }
        .hero {
          padding: 112px 0 52px;
          min-height: auto;
        }
        .container { width: min(100% - 22px, 1180px); }
        h1 { font-size: clamp(40px, 13vw, 62px); }
        .section-head {
          display: grid;
        }
        .cards,
        .audience,
        .steps,
        .trust-row,
        .traffic-grid,
        .footer-grid {
          grid-template-columns: 1fr;
        }
        .connect-card {
          border-radius: 26px;
          padding: 12px;
        }
        section { padding: 62px 0; }
        .modal-card { width: min(370px, 100%); }
        .captcha-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      }

      /* Lightweight mobile mode: particles stay desktop-only, content remains visible without JS. */
      #particles,
      .noise {
        display: none !important;
      }
      @media (max-width: 780px) {
        html { scroll-behavior: auto; }
        .site-header.scrolled { backdrop-filter: none; }
        .hero { padding: 92px 0 34px; }
        section { padding: 42px 0; }
        .hero-statement { font-size: clamp(24px, 7vw, 36px); }
        .connect-card,
        .mock-ui {
          display: none;
        }
        .section-head,
        .big-cta,
        .inline-register {
          border-radius: 18px;
        }
        .feature-card:hover,
        .audience-card:hover,
        .btn:hover {
          transform: none;
        }
        .connect-card::before,
        .metric-bar span {
          animation: none !important;
        }
        .connect-card,
        .mock-ui,
        .feature-card,
        .audience-card,
        .big-cta,
        .modal-card,
        .inline-register {
          backdrop-filter: none !important;
          -webkit-backdrop-filter: none !important;
        }
      }