:root {
            --ink-950: var(--az-bg);
            --ink-900: var(--az-sidebar);
            --ink-850: var(--az-surface);
            --ink-800: var(--az-surface-2);
            --ink-700: var(--az-surface-3);
            --slate-500: var(--az-dim);
            --slate-400: var(--az-muted);
            --slate-300: #CBD5E1;
            --white: var(--az-text);
            --accent: var(--az-accent);
            --accent-strong: #2563EB;
            --accent-soft: rgba(59, 130, 246, .12);
            --accent-line: #253247;
            --success: var(--az-success);
            --warning: var(--az-warning);
            --danger: var(--az-danger);
            --container: 1240px;
            --radius-sm: .65rem;
            --radius-md: 1rem;
            --radius-lg: 1.6rem;
            --shadow-blue: 0 16px 40px rgba(0, 0, 0, .18);
            --ease-spring: cubic-bezier(.16, 1, .3, 1);
            --z-nav: 30;
            --z-grain: 50;
        }

        *, *::before, *::after {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 7rem;
        }

        body {
            margin: 0;
            background: var(--ink-950);
            color: var(--white);
            font-family: "Manrope", sans-serif;
            line-height: 1.6;
            overflow-x: hidden;
        }

        body::after {
            position: fixed;
            z-index: var(--z-grain);
            inset: 0;
            pointer-events: none;
            content: "";
            opacity: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
        }

        a {
            color: inherit;
        }

        button,
        input {
            font: inherit;
        }

        .container {
            width: min(calc(100% - 2.5rem), var(--container));
            margin-inline: auto;
        }

        .skip-link {
            position: fixed;
            z-index: 100;
            top: .75rem;
            left: .75rem;
            padding: .8rem 1rem;
            background: var(--white);
            color: var(--ink-950);
            border-radius: var(--radius-sm);
            transform: translateY(-150%);
            transition: transform .2s;
        }

        .skip-link:focus {
            transform: translateY(0);
        }

        :focus-visible {
            outline: 3px solid rgba(59, 130, 246, .48);
            outline-offset: 4px;
        }

        .site-header {
            position: sticky;
            z-index: var(--z-nav);
            top: 0;
            padding: 0;
            border-bottom: 1px solid #253247;
            background: var(--ink-900);
        }

        .nav-shell {
            display: flex;
            min-height: 4.4rem;
            align-items: center;
            justify-content: space-between;
            gap: 1.5rem;
            padding: .65rem 0;
            border: 0;
            border-radius: 0;
            background: transparent;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: .7rem;
            color: var(--white);
            font-size: .92rem;
            font-weight: 800;
            letter-spacing: .08em;
            text-decoration: none;
        }

        .brand-mark {
            display: grid;
            width: 2rem;
            height: 2rem;
            place-items: center;
            border-radius: .55rem;
            background: var(--accent);
            color: #fff;
        }

        .brand-mark svg {
            width: 1.1rem;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: .25rem;
        }

        .nav-link {
            padding: .62rem .8rem;
            border-radius: .7rem;
            color: var(--slate-300);
            font-size: .87rem;
            font-weight: 600;
            text-decoration: none;
            transition: color .2s, background .2s;
        }

        .nav-link:hover,
        .nav-link.is-active {
            background: rgba(255, 255, 255, .055);
            color: var(--white);
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: .6rem;
        }

        .button {
            display: inline-flex;
            min-height: 2.85rem;
            align-items: center;
            justify-content: center;
            gap: .55rem;
            padding: .72rem 1.08rem;
            border: 1px solid transparent;
            border-radius: .72rem;
            cursor: pointer;
            font-size: .88rem;
            font-weight: 700;
            text-decoration: none;
            transition: background .2s, border-color .2s, color .2s;
        }

        .button:hover {
            border-color: var(--accent);
        }

        .button:active {
            transform: none;
        }

        .button-primary {
            background: var(--accent);
            color: #fff;
        }

        .button-primary:hover {
            background: #60A5FA;
            color: #08101d;
        }

        .button-quiet {
            border-color: rgba(185, 219, 240, .15);
            background: rgba(255, 255, 255, .045);
            color: var(--white);
        }

        .button-quiet:hover {
            border-color: var(--accent-line);
            background: rgba(59, 130, 246, .09);
        }

        .button-link {
            padding-inline: .45rem;
            color: var(--slate-300);
        }

        .button-link:hover {
            color: var(--white);
        }

        .nav-toggle {
            display: none;
            width: 2.85rem;
            height: 2.85rem;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(185, 219, 240, .15);
            border-radius: .72rem;
            background: rgba(255, 255, 255, .04);
            color: var(--white);
            cursor: pointer;
        }

        .hero {
            position: relative;
            padding: clamp(4rem, 7vw, 6rem) 0 5rem;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, .88fr) minmax(34rem, 1.12fr);
            align-items: center;
            gap: clamp(2rem, 4vw, 4rem);
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .65rem;
            margin-bottom: 1.3rem;
            color: #93C5FD;
            font-family: "Roboto Mono", monospace;
            font-size: .75rem;
            font-weight: 600;
            letter-spacing: .08em;
        }

        .eyebrow::before {
            width: 1.9rem;
            height: 1px;
            content: "";
            background: var(--accent);
            box-shadow: none;
        }

        .hero-title {
            max-width: 13ch;
            margin: 0;
            font-size: clamp(2.8rem, 4.8vw, 4.5rem);
            font-weight: 700;
            letter-spacing: -.075em;
            line-height: 1.08;
            text-wrap: balance;
        }

        .hero-title span {
            color: var(--accent);
        }

        .hero-copy {
            max-width: 59ch;
            margin: 1.65rem 0 0;
            color: var(--slate-400);
            font-size: clamp(1rem, 1.3vw, 1.12rem);
            line-height: 1.75;
            text-wrap: pretty;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: .8rem;
            margin-top: 2rem;
        }

        .hero-actions .button {
            min-height: 3.35rem;
            padding-inline: 1.3rem;
        }

        .micro-proof {
            display: flex;
            flex-wrap: wrap;
            gap: .7rem 1.2rem;
            margin-top: 1.4rem;
            color: var(--slate-500);
            font-size: .78rem;
        }

        .micro-proof span {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
        }

        .micro-proof svg {
            width: .9rem;
            color: var(--success);
        }

        .dashboard-stage {
            position: relative;
            isolation: isolate;
        }

        .dashboard-stage::before {
            content: none;
        }

        .dashboard-frame {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(165, 215, 246, .16);
            border-radius: 1.35rem;
            background: #091625;
            box-shadow: inset 0 1px rgba(255, 255, 255, .07), var(--shadow-blue);
            transform: perspective(1100px) rotateY(-3deg) rotateX(1.5deg);
            transition: transform .8s var(--ease-spring);
        }

        .dashboard-frame:hover {
            transform: perspective(1100px) rotateY(0) rotateX(0) translateY(-6px);
        }

        .window-bar {
            display: flex;
            min-height: 3rem;
            align-items: center;
            justify-content: space-between;
            padding: 0 1rem;
            border-bottom: 1px solid rgba(165, 215, 246, .1);
            background: rgba(255, 255, 255, .018);
        }

        .window-dots {
            display: flex;
            gap: .35rem;
        }

        .window-dots i {
            width: .43rem;
            height: .43rem;
            border-radius: 50%;
            background: #395068;
        }

        .window-label {
            color: #70869d;
            font-family: "Roboto Mono", monospace;
            font-size: .65rem;
        }

        .dashboard-body {
            display: grid;
            grid-template-columns: 10rem 1fr;
            min-height: 29rem;
        }

        .preview-sidebar {
            padding: 1rem .7rem;
            border-right: 1px solid rgba(165, 215, 246, .09);
            background: rgba(2, 10, 18, .3);
        }

        .preview-logo {
            display: flex;
            align-items: center;
            gap: .5rem;
            margin: 0 .4rem 1.5rem;
            font-size: .7rem;
            font-weight: 800;
            letter-spacing: .05em;
        }

        .preview-logo b {
            display: grid;
            width: 1.55rem;
            height: 1.55rem;
            place-items: center;
            border-radius: .4rem;
            background: var(--accent);
            color: var(--ink-950);
        }

        .preview-nav {
            display: grid;
            gap: .35rem;
        }

        .preview-nav span {
            display: flex;
            align-items: center;
            gap: .5rem;
            padding: .55rem .6rem;
            border-radius: .45rem;
            color: #71859a;
            font-size: .63rem;
            font-weight: 600;
        }

        .preview-nav span:first-child {
            background: var(--accent-soft);
            color: #a8dcff;
        }

        .preview-nav svg {
            width: .85rem;
        }

        .preview-main {
            padding: 1.2rem;
        }

        .preview-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .preview-heading strong {
            font-size: .83rem;
        }

        .live-chip {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: .3rem .45rem;
            border: 1px solid rgba(34, 197, 94, .18);
            border-radius: .4rem;
            background: rgba(34, 197, 94, .08);
            color: var(--success);
            font-family: "Roboto Mono", monospace;
            font-size: .55rem;
        }

        .live-chip::before {
            width: .38rem;
            height: .38rem;
            border-radius: 50%;
            background: currentColor;
            box-shadow: 0 0 0 4px rgba(34, 197, 94, .1);
            content: "";
            animation: pulse 2s infinite;
        }

        .preview-metrics {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: .65rem;
        }

        .preview-metric {
            padding: .85rem;
            border: 1px solid rgba(165, 215, 246, .09);
            border-radius: .7rem;
            background: rgba(255, 255, 255, .025);
        }

        .preview-metric span {
            display: block;
            margin-bottom: .4rem;
            color: #6f8498;
            font-size: .55rem;
        }

        .preview-metric strong {
            display: block;
            font-family: "Roboto Mono", monospace;
            font-size: 1.05rem;
            font-variant-numeric: tabular-nums;
        }

        .preview-metric small {
            color: var(--success);
            font-size: .48rem;
        }

        .preview-chart {
            position: relative;
            height: 8.3rem;
            margin-top: .7rem;
            overflow: hidden;
            border: 1px solid rgba(165, 215, 246, .09);
            border-radius: .7rem;
            background:
                linear-gradient(rgba(133, 177, 205, .055) 1px, transparent 1px),
                linear-gradient(90deg, rgba(133, 177, 205, .055) 1px, transparent 1px),
                rgba(255, 255, 255, .018);
            background-size: 100% 2rem, 3.4rem 100%;
        }

        .preview-chart svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }

        .campaign-list {
            display: grid;
            gap: .45rem;
            margin-top: .7rem;
        }

        .campaign-row {
            display: grid;
            grid-template-columns: 1fr auto auto;
            align-items: center;
            gap: .7rem;
            padding: .55rem .7rem;
            border-radius: .52rem;
            background: rgba(255, 255, 255, .025);
            color: #9aabbb;
            font-size: .55rem;
        }

        .campaign-row strong {
            color: #dceaf4;
            font-size: .58rem;
        }

        .progress {
            width: 3.6rem;
            height: .27rem;
            overflow: hidden;
            border-radius: 1rem;
            background: #24384a;
        }

        .progress i {
            display: block;
            width: var(--progress);
            height: 100%;
            border-radius: inherit;
            background: var(--accent);
        }

        .floating-note {
            position: absolute;
            right: -1.25rem;
            bottom: 2.6rem;
            width: 11.6rem;
            padding: .85rem;
            border: 1px solid rgba(167, 218, 250, .19);
            border-radius: .8rem;
            background: rgba(9, 25, 41, .92);
            box-shadow: 0 20px 40px rgba(1, 10, 19, .34);
            backdrop-filter: blur(14px);
            animation: float 5s ease-in-out infinite;
        }

        .floating-note > span {
            display: flex;
            align-items: center;
            gap: .45rem;
            color: var(--success);
            font-size: .6rem;
            font-weight: 700;
        }

        .floating-note strong {
            display: block;
            margin-top: .35rem;
            color: #d9e7f1;
            font-size: .67rem;
            line-height: 1.4;
        }

        .section {
            padding: 7rem 0 8rem;
        }

        .section-lined {
            border-top: 1px solid rgba(173, 216, 244, .08);
        }

        .section-intro {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            align-items: end;
            gap: 4rem;
            margin-bottom: 3rem;
        }

        .section-title {
            max-width: 13ch;
            margin: 0;
            font-size: clamp(2.4rem, 4.5vw, 4.4rem);
            font-weight: 700;
            letter-spacing: -.06em;
            line-height: 1;
            text-wrap: balance;
        }

        .section-copy {
            max-width: 58ch;
            margin: 0 0 .4rem auto;
            color: var(--slate-400);
            text-wrap: pretty;
        }

        .bento {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            grid-template-areas:
                "bulk accounts"
                "bulk proxy"
                "card proxy";
            gap: 1rem;
        }

        .bento-item {
            position: relative;
            min-height: 18rem;
            overflow: hidden;
            border: 1px solid rgba(173, 216, 244, .1);
            background: var(--ink-850);
            transition: transform .45s var(--ease-spring), border-color .35s, background .35s;
        }

        .bento-item::after {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: radial-gradient(28rem circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(59, 130, 246, .1), transparent 44%);
            content: "";
            opacity: 0;
            transition: opacity .3s;
        }

        .bento-item:hover {
            border-color: var(--accent-line);
            background: #0b1b2d;
            transform: translateY(-4px);
        }

        .bento-item:hover::after {
            opacity: 1;
        }

        .bento-bulk {
            grid-area: bulk;
            min-height: 37rem;
            border-radius: var(--radius-lg) var(--radius-sm) var(--radius-md) var(--radius-lg);
        }

        .bento-accounts {
            grid-area: accounts;
            border-radius: var(--radius-sm) var(--radius-lg) var(--radius-md) var(--radius-sm);
        }

        .bento-card {
            grid-area: card;
            border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-md);
        }

        .bento-proxy {
            grid-area: proxy;
            border-radius: var(--radius-md) var(--radius-lg) var(--radius-lg) var(--radius-sm);
        }

        .bento-content {
            position: relative;
            z-index: 2;
            max-width: 31rem;
            padding: clamp(1.5rem, 3vw, 2.5rem);
        }

        .feature-index {
            display: block;
            margin-bottom: 1.2rem;
            color: #6e879c;
            font-family: "Roboto Mono", monospace;
            font-size: .7rem;
        }

        .feature-icon {
            display: grid;
            width: 2.75rem;
            height: 2.75rem;
            margin-bottom: 1.25rem;
            place-items: center;
            border: 1px solid var(--accent-line);
            border-radius: .72rem;
            background: var(--accent-soft);
            color: #75c7fd;
        }

        .feature-icon svg {
            width: 1.25rem;
        }

        .feature-title {
            margin: 0;
            font-size: clamp(1.35rem, 2.2vw, 2rem);
            letter-spacing: -.035em;
            line-height: 1.15;
        }

        .feature-copy {
            max-width: 48ch;
            margin: .9rem 0 0;
            color: var(--slate-400);
            font-size: .9rem;
            text-wrap: pretty;
        }

        .message-composer {
            position: absolute;
            right: -1.5rem;
            bottom: 2rem;
            left: 2.5rem;
            z-index: 1;
            overflow: hidden;
            border: 1px solid rgba(165, 215, 246, .12);
            border-radius: .9rem 0 0 .9rem;
            background: #071422;
        }

        .composer-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: .75rem 1rem;
            border-bottom: 1px solid rgba(165, 215, 246, .09);
            color: #8498aa;
            font-size: .66rem;
        }

        .composer-body {
            padding: 1rem;
        }

        .composer-text {
            min-height: 4.5rem;
            padding: .8rem;
            border: 1px solid rgba(165, 215, 246, .1);
            border-radius: .55rem;
            background: rgba(255, 255, 255, .02);
            color: #aabac7;
            font-size: .67rem;
            line-height: 1.55;
        }

        .composer-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: .8rem;
            color: #657c90;
            font-size: .59rem;
        }

        .send-button {
            padding: .45rem .7rem;
            border-radius: .42rem;
            background: var(--accent);
            color: #02101b;
            font-weight: 800;
        }

        .account-stack {
            position: absolute;
            right: 1.5rem;
            bottom: 1.5rem;
            left: 45%;
            display: grid;
            gap: .48rem;
        }

        .account-line,
        .proxy-line {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: .7rem;
            padding: .65rem .75rem;
            border: 1px solid rgba(165, 215, 246, .09);
            border-radius: .58rem;
            background: rgba(3, 13, 23, .62);
            color: #a5b4c1;
            font-size: .61rem;
        }

        .account-avatar {
            display: grid;
            width: 1.65rem;
            height: 1.65rem;
            place-items: center;
            border-radius: .45rem;
            background: #16324a;
            color: #81cfff;
            font-family: "Roboto Mono", monospace;
            font-weight: 600;
        }

        .status-dot {
            width: .45rem;
            height: .45rem;
            border-radius: 50%;
            background: var(--success);
            box-shadow: 0 0 0 4px rgba(34, 197, 94, .08);
        }

        .namecard-preview {
            position: absolute;
            right: 2rem;
            bottom: -1.2rem;
            width: 14rem;
            min-height: 8rem;
            padding: 1rem;
            border: 1px solid rgba(165, 215, 246, .13);
            border-radius: .8rem .8rem 0 0;
            background: #f1f8fc;
            color: #0c1c2a;
            transform: rotate(-2deg);
            box-shadow: 0 20px 30px rgba(1, 9, 17, .25);
        }

        .namecard-preview span {
            display: block;
            color: #587084;
            font-size: .58rem;
        }

        .namecard-preview strong {
            display: block;
            margin-top: .4rem;
            font-size: .95rem;
        }

        .namecard-preview i {
            display: block;
            width: 3rem;
            height: .32rem;
            margin-top: 1.4rem;
            border-radius: 1rem;
            background: var(--accent);
        }

        .proxy-stack {
            position: absolute;
            right: 1.5rem;
            bottom: 1.5rem;
            left: 48%;
            display: grid;
            gap: .5rem;
        }

        .proxy-line {
            grid-template-columns: 1fr auto;
            font-family: "Roboto Mono", monospace;
            font-size: .57rem;
        }

        .proxy-line em {
            color: var(--success);
            font-style: normal;
        }

        .workflow {
            display: grid;
            grid-template-columns: .65fr 1.35fr;
            gap: 4rem;
            align-items: start;
        }

        .workflow-copy {
            position: sticky;
            top: 8rem;
        }

        .workflow-steps {
            display: grid;
        }

        .workflow-step {
            display: grid;
            grid-template-columns: 3.25rem 1fr;
            gap: 1.1rem;
            padding: 1.75rem 0 2.1rem;
            border-bottom: 1px solid rgba(173, 216, 244, .1);
        }

        .workflow-step:first-child {
            border-top: 1px solid rgba(173, 216, 244, .1);
        }

        .step-number {
            color: #6991ac;
            font-family: "Roboto Mono", monospace;
            font-size: .75rem;
        }

        .workflow-step h3 {
            margin: 0;
            font-size: 1.25rem;
            letter-spacing: -.025em;
        }

        .workflow-step p {
            max-width: 55ch;
            margin: .5rem 0 0;
            color: var(--slate-400);
            font-size: .9rem;
        }

        .pricing-layout {
            display: grid;
            grid-template-columns: minmax(17rem, .72fr) minmax(0, 1.28fr);
            gap: 1rem;
        }

        .trial-panel {
            position: relative;
            display: flex;
            min-height: 29rem;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            padding: clamp(1.8rem, 4vw, 3rem);
            border-radius: var(--radius-lg) var(--radius-sm) var(--radius-lg) var(--radius-lg);
            background: var(--accent);
            color: #03111d;
        }

        .trial-panel::after {
            position: absolute;
            right: -8rem;
            bottom: -9rem;
            width: 21rem;
            height: 21rem;
            border: 3.5rem solid rgba(255, 255, 255, .14);
            border-radius: 50%;
            content: "";
        }

        .trial-label {
            font-family: "Roboto Mono", monospace;
            font-size: .73rem;
            font-weight: 600;
        }

        .trial-panel h2 {
            position: relative;
            z-index: 1;
            max-width: 8ch;
            margin: 1rem 0;
            font-size: clamp(2.8rem, 5vw, 5rem);
            letter-spacing: -.07em;
            line-height: .92;
        }

        .trial-panel p {
            position: relative;
            z-index: 1;
            max-width: 38ch;
            font-size: .9rem;
        }

        .trial-panel .button {
            position: relative;
            z-index: 1;
            align-self: flex-start;
            background: var(--ink-950);
            color: var(--white);
        }

        .plans-panel {
            display: grid;
            gap: .65rem;
            padding: .7rem;
            border: 1px solid rgba(173, 216, 244, .1);
            border-radius: var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-md);
            background: var(--ink-850);
        }

        .plan-row {
            display: grid;
            grid-template-columns: minmax(8rem, .8fr) minmax(10rem, 1.1fr) minmax(9rem, 1fr) auto;
            align-items: center;
            gap: 1rem;
            padding: 1.15rem 1.1rem;
            border-radius: .7rem;
            background: rgba(255, 255, 255, .025);
            transition: background .25s, transform .35s var(--ease-spring);
        }

        .plan-row:hover {
            background: rgba(59, 130, 246, .07);
            transform: translateX(4px);
        }

        .plan-name {
            font-weight: 700;
        }

        .plan-price {
            font-family: "Roboto Mono", monospace;
            font-size: 1rem;
            font-variant-numeric: tabular-nums;
        }

        .plan-price small,
        .plan-detail {
            color: var(--slate-500);
            font-family: "Manrope", sans-serif;
            font-size: .72rem;
        }

        .plan-detail {
            line-height: 1.45;
        }

        .plan-row .button {
            min-height: 2.55rem;
            padding: .55rem .75rem;
            white-space: nowrap;
        }

        .plan-empty {
            display: grid;
            min-height: 100%;
            place-items: center;
            padding: 2rem;
            color: var(--slate-400);
            text-align: center;
        }

        .final-cta {
            padding: 1rem 0 7rem;
        }

        .cta-shell {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 2rem;
            padding: clamp(2rem, 5vw, 4.5rem);
            border: 1px solid var(--accent-line);
            border-radius: var(--radius-lg);
            background:
                radial-gradient(circle at 88% 20%, rgba(59, 130, 246, .18), transparent 26rem),
                var(--ink-800);
            box-shadow: inset 0 1px rgba(255, 255, 255, .06), var(--shadow-blue);
        }

        .cta-shell h2 {
            max-width: 16ch;
            margin: 0;
            font-size: clamp(2.25rem, 4.3vw, 4rem);
            letter-spacing: -.055em;
            line-height: 1;
            text-wrap: balance;
        }

        .cta-shell p {
            max-width: 53ch;
            margin: 1rem 0 0;
            color: var(--slate-400);
        }

        .site-footer {
            padding: 2.6rem 0;
            border-top: 1px solid rgba(173, 216, 244, .1);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: end;
            gap: 2rem;
        }

        .footer-note {
            max-width: 48ch;
            margin: 1rem 0 0;
            color: var(--slate-500);
            font-size: .8rem;
        }

        .footer-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 1.1rem;
        }

        .footer-links a {
            color: var(--slate-400);
            font-size: .8rem;
            text-decoration: none;
        }

        .footer-links a:hover {
            color: var(--white);
        }

        .status {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            margin-top: 1rem;
            color: var(--slate-400);
            font-family: "Roboto Mono", monospace;
            font-size: .67rem;
        }

        .status i {
            width: .45rem;
            height: .45rem;
            border-radius: 50%;
            background: var(--success);
            box-shadow: 0 0 0 4px rgba(34, 197, 94, .09);
        }

        [data-reveal] {
            opacity: 0;
            transform: translateY(1.4rem);
            transition: opacity .75s var(--ease-spring), transform .75s var(--ease-spring);
        }

        [data-reveal].is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        @keyframes pulse {
            50% { opacity: .45; }
        }

        @keyframes float {
            50% { transform: translateY(-8px); }
        }

        @media (max-width: 1050px) {
            .hero-grid {
                grid-template-columns: 1fr;
                gap: 3.5rem;
            }

            .hero-copy {
                max-width: 67ch;
            }

            .dashboard-stage {
                width: min(100%, 48rem);
                margin-inline: auto;
            }

            .section-intro,
            .workflow {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .section-copy {
                margin-left: 0;
            }

            .workflow-copy {
                position: static;
            }

            .pricing-layout {
                grid-template-columns: 1fr;
            }

            .trial-panel {
                min-height: 22rem;
            }
        }

        @media (max-width: 820px) {
            .nav-toggle {
                display: inline-flex;
            }

            .nav-links,
            .nav-actions {
                position: absolute;
                top: calc(100% + .4rem);
                right: 1.25rem;
                left: 1.25rem;
                display: none;
                padding: .85rem;
                border: 1px solid rgba(183, 220, 244, .13);
                background: rgba(7, 17, 31, .96);
                backdrop-filter: blur(18px);
            }

            .nav-links {
                flex-direction: column;
                align-items: stretch;
                border-radius: 1rem 1rem 0 0;
            }

            .nav-actions {
                top: calc(100% + 16.6rem);
                grid-template-columns: 1fr 1fr;
                border-top: 0;
                border-radius: 0 0 1rem 1rem;
            }

            .nav-links.is-open {
                display: flex;
            }

            .nav-actions.is-open {
                display: grid;
            }

            .nav-link {
                padding: .75rem;
            }

            .bento {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "bulk"
                    "accounts"
                    "card"
                    "proxy";
            }

            .bento-bulk {
                min-height: 34rem;
            }

            .account-stack,
            .proxy-stack {
                left: 38%;
            }

            .plan-row {
                grid-template-columns: 1fr auto;
            }

            .plan-detail {
                grid-column: 1 / -1;
                grid-row: 2;
            }

            .cta-shell {
                grid-template-columns: 1fr;
            }

            .footer-grid {
                grid-template-columns: 1fr;
            }

            .footer-links {
                justify-content: flex-start;
            }
        }

        @media (max-width: 600px) {
            .container {
                width: min(calc(100% - 1.5rem), var(--container));
            }

            .site-header {
                padding-top: .55rem;
            }

            .nav-shell {
                min-height: 3.75rem;
                padding-left: .8rem;
            }

            .brand {
                font-size: .78rem;
            }

            .hero {
                padding: 4.5rem 0 5rem;
            }

            .hero-title {
                font-size: clamp(3rem, 16vw, 4.6rem);
            }

            .hero-actions {
                display: grid;
            }

            .hero-actions .button {
                width: 100%;
            }

            .dashboard-frame {
                transform: none;
            }

            .dashboard-body {
                grid-template-columns: 1fr;
                min-height: 27rem;
            }

            .preview-sidebar {
                display: none;
            }

            .preview-main {
                padding: .85rem;
            }

            .preview-metrics {
                gap: .4rem;
            }

            .preview-metric {
                padding: .6rem;
            }

            .preview-metric strong {
                font-size: .85rem;
            }

            .floating-note {
                right: .65rem;
                bottom: -2rem;
            }

            .section {
                padding: 5.5rem 0 6rem;
            }

            .section-intro {
                margin-bottom: 2rem;
            }

            .bento-item,
            .bento-bulk {
                min-height: 31rem;
            }

            .bento-accounts,
            .bento-card,
            .bento-proxy {
                min-height: 22rem;
            }

            .message-composer {
                left: 1.3rem;
            }

            .account-stack,
            .proxy-stack {
                right: 1rem;
                left: 1rem;
            }

            .namecard-preview {
                right: 1rem;
                bottom: -1rem;
            }

            .workflow-step {
                grid-template-columns: 2.2rem 1fr;
            }

            .plan-row {
                grid-template-columns: 1fr;
            }

            .plan-detail {
                grid-column: auto;
                grid-row: auto;
            }

            .plan-row .button {
                width: 100%;
            }

            .cta-shell .button {
                width: 100%;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *, *::before, *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                scroll-behavior: auto !important;
                transition-duration: .01ms !important;
            }

            [data-reveal] {
                opacity: 1;
                transform: none;
            }
        }

/* Feature cards keep their illustrations in normal flow so copy never overlaps. */
.bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "bulk accounts" "card proxy";
    align-items: stretch;
}
.bento-item { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 26rem; overflow: hidden; border-radius: var(--radius-md); }
.bento-bulk { min-height: 30rem; }
.bento-content { max-width: 100%; padding: clamp(1.5rem, 2.5vw, 2.25rem); }
.bento .feature-title { max-width: 24ch; }
.bento .feature-copy { max-width: 52ch; }
.message-composer, .account-stack, .proxy-stack, .namecard-preview {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 1;
    width: auto;
    max-width: none;
    margin: 1rem clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.5rem, 2.5vw, 2.25rem);
    transform: none;
}
.message-composer { border-radius: .8rem; }
.namecard-preview { width: min(16rem, calc(100% - 3rem)); align-self: flex-end; margin-top: .25rem; border-radius: .8rem; }
.account-stack, .proxy-stack { gap: .5rem; }
.account-line, .proxy-line { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 820px) {
    .bento { grid-template-columns: 1fr; grid-template-areas: "bulk" "accounts" "card" "proxy"; }
    .bento-item, .bento-bulk, .bento-accounts, .bento-card, .bento-proxy { min-height: 0; }
}
@media (max-width: 600px) {
    .message-composer, .account-stack, .proxy-stack, .namecard-preview { left: auto; right: auto; bottom: auto; margin-inline: 1.25rem; }
    .bento .feature-title { font-size: 1.35rem; }
}