/* dashboard/static/dashboard/css/landing.css */
/* ─── Reset & Tokens ─────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #070709;
    --bg-surface: #0e0e11;
    --bg-elevated: #151518;
    --border: rgba(255, 255, 255, 0.06);
    --border-md: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.16);
    --red: #dc2626;
    --red-hover: #b91c1c;
    --red-dark: #7f1d1d;
    --red-glow: rgba(220, 38, 38, 0.18);
    --text: #f5f5f5;
    --text-2: #a1a1aa;
    --text-3: #52525b;
    --font: 'Inter', -apple-system, sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --r: 10px;
    --r-lg: 18px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

svg {
    display: block;
}

/* ─── Layout helpers ─────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
}

.section {
    padding: 104px 0;
}

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    border: none;
    transition: all .2s ease;
    white-space: nowrap;
}

.btn-primary {
    background: var(--red);
    color: #fff;
}

.btn-primary:hover {
    background: var(--red-hover);
    box-shadow: 0 6px 24px rgba(220, 38, 38, .35);
    transform: translateY(-1px);
}

.btn-ghost {
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--border-md);
}

.btn-ghost:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, .03);
}

.btn-lg {
    padding: 13px 30px;
    font-size: 15px;
}

/* ─── Badge ──────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: 100px;
    border: 1px solid rgba(220, 38, 38, .28);
    background: rgba(220, 38, 38, .07);
    color: #f87171;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    animation: blink 2s ease-in-out infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

/* ─── Navbar ─────────────────────────────────────────────────────── */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 18px 0;
    transition: padding .3s, background .3s, border-color .3s;
    border-bottom: 1px solid transparent;
}

.nav.scrolled {
    padding: 12px 0;
    background: rgba(7, 7, 9, .88);
    backdrop-filter: blur(20px) saturate(160%);
    border-bottom-color: var(--border);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-logo-eye {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.nav-logo-text {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.nav-logo-text em {
    color: var(--red);
    font-style: normal;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 32px;
}

.nav-links a {
    font-size: 14px;
    color: var(--text-2);
    font-weight: 500;
    transition: color .2s;
}

.nav-links a:hover {
    color: var(--text);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── Hero ───────────────────────────────────────────────────────── */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}

/* grid overlay */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(220, 38, 38, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(220, 38, 38, .025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 90% 90% at 60% 50%, black 20%, transparent 75%);
}

.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-badge {
    margin-bottom: 24px;
}

.hero-title {
    font-size: clamp(36px, 5.5vw, 66px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.035em;
    margin-bottom: 20px;
}

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

.hero-sub {
    font-size: 17px;
    line-height: 1.75;
    color: var(--text-2);
    margin-bottom: 40px;
    max-width: 480px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 52px;
    flex-wrap: wrap;
}

.hero-divider {
    height: 1px;
    background: var(--border);
    margin-bottom: 28px;
}

.hero-stats {
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
}

.stat-val {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1;
}

.stat-lbl {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 4px;
    font-weight: 500;
}

/* ─── Sharingan Eye ──────────────────────────────────────────────── */
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.eye-wrap {
    position: relative;
    width: 380px;
    height: 380px;
    flex-shrink: 0;
}

.eye-wrap::before {
    content: '';
    position: absolute;
    inset: -50px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220, 38, 38, .14) 0%, transparent 68%);
    animation: aura 5s ease-in-out infinite;
}

.eye-wrap::after {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220, 38, 38, .06) 0%, transparent 70%);
    animation: aura 5s ease-in-out 2.5s infinite;
}

@keyframes aura {

    0%,
    100% {
        opacity: .6;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.04)
    }
}

.sharingan {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 32px rgba(220, 38, 38, .45)) drop-shadow(0 0 8px rgba(220, 38, 38, .3));
}

/* Tomoe ring — spins around the pupil at a fixed radius */
.ring-tomoe {
    transform-origin: 100px 100px;
    animation: spin 12s linear infinite;
}

/* Outer ring detail — slow reverse */
.ring-outer {
    transform-origin: 100px 100px;
    animation: spin 40s linear infinite reverse;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ─── Ticker ─────────────────────────────────────────────────────── */
.ticker-wrap {
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
    overflow: hidden;
}

.ticker-track {
    display: flex;
    gap: 56px;
    width: max-content;
    animation: ticker 30s linear infinite;
}

.ticker-track:hover {
    animation-play-state: paused;
}

@keyframes ticker {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-2);
    white-space: nowrap;
    letter-spacing: .02em;
}

.ticker-item .t-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--red);
}

/* ─── Section header ─────────────────────────────────────────────── */
.sec-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 12px;
}

.sec-title {
    font-size: clamp(26px, 3.5vw, 42px);
    font-weight: 700;
    letter-spacing: -.022em;
    line-height: 1.18;
    margin-bottom: 14px;
}

.sec-sub {
    font-size: 16px;
    color: var(--text-2);
    line-height: 1.75;
    max-width: 520px;
}

.sec-head {
    margin-bottom: 60px;
}

/* ─── Features grid ──────────────────────────────────────────────── */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    gap: 1px;
    background: var(--border);
}

.feat-card {
    background: var(--bg);
    padding: 36px 30px;
    transition: background .2s;
}

.feat-card:hover {
    background: var(--bg-surface);
}

.feat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(220, 38, 38, .09);
    border: 1px solid rgba(220, 38, 38, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    color: #f87171;
}

.feat-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 9px;
}

.feat-desc {
    font-size: 13.5px;
    color: var(--text-2);
    line-height: 1.65;
}

/* ─── How it works ───────────────────────────────────────────────── */
.hiw {
    background: var(--bg-surface);
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    position: relative;
}

.steps::before {
    content: '';
    position: absolute;
    top: 30px;
    left: calc(33.33% + 24px);
    right: calc(33.33% + 24px);
    height: 1px;
    background: linear-gradient(90deg, var(--red) 0%, rgba(220, 38, 38, .15) 100%);
}

.step {
    padding: 44px 36px 44px 0;
}

.step:not(:last-child) {
    border-right: 1px solid var(--border);
    padding-right: 40px;
    margin-right: 0;
}

.step:not(:first-child) {
    padding-left: 40px;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(220, 38, 38, .35);
    background: rgba(220, 38, 38, .08);
    font-size: 13px;
    font-weight: 700;
    color: #f87171;
    margin-bottom: 22px;
    font-family: var(--mono);
}

.step-title {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: 11px;
}

.step-desc {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.7;
    margin-bottom: 18px;
}

.step-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.step-tag {
    padding: 4px 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-3);
    font-family: var(--mono);
}

/* ─── Plans ──────────────────────────────────────────────────────── */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 60px;
}

.plan {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 26px 20px;
    display: flex;
    flex-direction: column;
    transition: transform .25s, border-color .25s, box-shadow .25s, opacity .25s;
    position: relative;
}

.plan:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
}

/* Secondary tiers (trial + enterprise/custom) — visually de-emphasized
   so the 3 recurring plans (Two/Three Tomoe, Mangekyō) read as the
   primary comparison set. Same card size/proportions as every other
   plan (keeps grid alignment clean) — de-emphasis comes purely from
   a muted border and reduced opacity, not from dimensions. */
.plan.tier-secondary {
    border-style: dashed;
    opacity: 0.78;
}

.plan.tier-secondary:hover {
    opacity: 1;
}

.plan.featured {
    border-color: rgba(220, 38, 38, .4);
    background: linear-gradient(155deg, rgba(220, 38, 38, .07) 0%, var(--bg-surface) 55%);
}

.plan.featured:hover {
    border-color: rgba(220, 38, 38, .65);
    box-shadow: 0 16px 48px rgba(220, 38, 38, .14);
}

.plan-chip {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--red);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 13px;
    border-radius: 100px;
    letter-spacing: .04em;
    white-space: nowrap;
    text-transform: uppercase;
}

/* mini eye for each plan */
.plan-eye-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.plan-eye {
    width: 52px;
    height: 52px;
}

.plan-name {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    letter-spacing: -.01em;
    margin-bottom: 3px;
}

.plan-sub {
    font-size: 11px;
    color: var(--text-3);
    text-align: center;
    margin-bottom: 18px;
    font-family: var(--mono);
}

.plan-price {
    text-align: center;
    margin-bottom: 20px;
}

.plan-price-val {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

.plan-price-per {
    font-size: 12px;
    color: var(--text-3);
    margin-left: 2px;
}

.plan-sep {
    height: 1px;
    background: var(--border);
    margin-bottom: 18px;
}

.plan-limits {
    list-style: none;
    margin-bottom: 22px;
    flex: 1;
}

.plan-limits li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    font-size: 12.5px;
    border-bottom: 1px solid var(--border);
}

.plan-limits li:last-child {
    border-bottom: none;
}

.pl-key {
    color: var(--text-2);
}

.pl-val {
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 600;
}

.pl-inf {
    color: var(--red);
    font-size: 16px;
    line-height: 1;
}

.plan-btn {
    width: 100%;
    padding: 10px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    display: block;
    font-family: var(--font);
    border: none;
}

.plan-btn-primary {
    background: var(--red);
    color: #fff;
}

.plan-btn-primary:hover {
    background: var(--red-hover);
    box-shadow: 0 4px 16px rgba(220, 38, 38, .35);
}

.plan-btn-ghost {
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--border-md);
}

.plan-btn-ghost:hover {
    border-color: var(--border-strong);
    color: var(--text);
    background: rgba(255, 255, 255, .03);
}

/* ─── Terminal mockup ────────────────────────────────────────────── */
.terminal {
    background: #0c0c0e;
    border: 1px solid var(--border-md);
    border-radius: 12px;
    overflow: hidden;
    font-family: var(--mono);
    font-size: 12.5px;
}

@media (max-width: 640px) {
    .terminal {
        font-size: 10.5px;
    }
}

.term-bar {
    background: #141416;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
}

.term-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.term-dot-r {
    background: #ef4444;
}

.term-dot-y {
    background: #f59e0b;
}

.term-dot-g {
    background: #22c55e;
}

.term-title {
    flex: 1;
    text-align: center;
    font-size: 11px;
    color: var(--text-3);
    margin-left: -50px;
}

.term-body {
    padding: 18px 20px;
    line-height: 1.9;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    .term-body {
        padding: 14px 16px;
    }

    .term-body .t-line {
        white-space: nowrap;
    }
}

.term-body .t-prompt {
    color: #6d6d7a;
    user-select: none;
}

.term-body .t-cmd {
    color: #e4e4e7;
}

.term-body .t-info {
    color: #6d6d7a;
}

.term-body .t-ok {
    color: #22c55e;
    font-weight: 600;
}

.term-body .t-warn {
    color: #f59e0b;
}

.term-body .t-host {
    color: #a78bfa;
}

.term-body .t-signal {
    color: #f87171;
}

.term-body .t-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cursor {
    display: inline-block;
    width: 7px;
    height: 13px;
    background: var(--red);
    margin-left: 2px;
    animation: blink 1s step-end infinite;
}

/* ─── CTA Banner ─────────────────────────────────────────────────── */
.cta-banner {
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 88px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(220, 38, 38, .07) 0%, transparent 70%);
}

.cta-banner-title {
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 700;
    letter-spacing: -.025em;
    margin-bottom: 14px;
    position: relative;
}

.cta-banner-sub {
    color: var(--text-2);
    font-size: 17px;
    margin-bottom: 36px;
    position: relative;
}

.cta-banner-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    position: relative;
}

/* ─── Footer ─────────────────────────────────────────────────────── */
.footer {
    padding: 48px 0 28px;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--border);
    gap: 40px;
    flex-wrap: wrap;
}

.footer-brand .nav-logo {
    margin-bottom: 10px;
}

.footer-tagline {
    font-size: 13px;
    color: var(--text-3);
    max-width: 260px;
    line-height: 1.6;
}

.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border-md);
    background: rgba(255, 255, 255, .03);
    color: var(--text-2);
    transition: all .2s ease;
}

.footer-social-link:hover {
    color: #f87171;
    border-color: rgba(220, 38, 38, .35);
    background: rgba(220, 38, 38, .07);
    transform: translateY(-2px);
}

.footer-links-group h4 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 14px;
}

.footer-links-group ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-links-group a {
    font-size: 13.5px;
    color: var(--text-2);
    transition: color .2s;
}

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

.footer-bottom {
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-copy {
    font-size: 12.5px;
    color: var(--text-3);
}

.footer-made {
    font-size: 12px;
    color: var(--text-3);
    font-family: var(--mono);
}

.footer-made span {
    color: var(--red);
}

/* ─── Scroll-in animations ───────────────────────────────────────── */
.fade-up {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .55s ease, transform .55s ease;
}

.fade-up.in {
    opacity: 1;
    transform: translateY(0);
}

.fade-up.d1 {
    transition-delay: .08s;
}

.fade-up.d2 {
    transition-delay: .16s;
}

.fade-up.d3 {
    transition-delay: .24s;
}

.fade-up.d4 {
    transition-delay: .32s;
}

.fade-up.d5 {
    transition-delay: .40s;
}

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1060px) {
    .plans-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ─── Plans swipe dots (mobile only) ───────────────────────────────── */
.plans-swipe-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
}

.plans-swipe-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-strong);
    transition: background .2s ease, transform .2s ease;
}

.plans-swipe-dot.active {
    background: var(--red);
    transform: scale(1.3);
}

.plans-swipe-hint {
    display: none;
    text-align: center;
    font-size: 11.5px;
    color: var(--text-3);
    font-family: var(--mono);
    letter-spacing: .04em;
    margin-top: -8px;
    margin-bottom: 18px;
}

@media (max-width: 640px) {
    .plans-swipe-hint {
        display: block;
    }
}

/* ─── Mobile nav: hamburger + slide-down panel ─────────────────────── */
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-md);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    align-items: center;
}

.nav-burger span {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--text-2);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
}

.nav-burger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-mobile-panel {
    display: none;
    flex-direction: column;
    gap: 2px;
    max-height: 0;
    overflow: hidden;
    background: rgba(7, 7, 9, .97);
    backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid transparent;
    transition: max-height .3s ease, border-color .3s ease;
}

.nav-mobile-panel.open {
    max-height: 420px;
    border-bottom-color: var(--border);
}

.nav-mobile-link {
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
}

.nav-mobile-link:active { color: var(--text); }

.nav-mobile-divider { height: 8px; }

.nav-mobile-btn {
    margin: 8px 28px;
    justify-content: center;
}

@media (max-width: 820px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 52px;
        text-align: center;
    }

    .hero-sub,
    .sec-sub {
        max-width: 100%;
    }

    .hero-actions,
    .hero-stats {
        justify-content: center;
    }

    .hero-stats {
        gap: 24px 32px;
        row-gap: 20px;
    }

    .hero-stats {
        gap: 24px 32px;
        row-gap: 20px;
    }

    .hero-visual {
        order: -1;
    }

    .eye-wrap {
        width: 260px;
        height: 260px;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .steps::before {
        display: none;
    }

    .step:not(:last-child),
    .step:not(:first-child) {
        border: none;
        padding: 0 0 36px;
        border-bottom: 1px solid var(--border);
    }

    .plans-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-links {
        display: none;
    }

    .nav-burger {
        display: flex;
    }

    .nav-mobile-panel {
        display: flex;
    }

    /* Hide the inline nav buttons on mobile — they're duplicated
       inside the slide-down panel, so keeping them here just crowds
       the burger out of view on narrow/portrait viewports. */
    .nav-actions > a.btn {
        display: none;
    }
}

@media (max-width: 640px) {
    /* ─── Plans: horizontal swipe instead of vertical stack ───────── */
    .plans-grid {
        display: flex;
        grid-template-columns: unset;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: 24px;
        gap: 14px;
        padding: 6px 24px 18px;
        margin: 0 -24px;
        /* hide native scrollbar (iOS Safari doesn't show one anyway,
           this keeps other WebKit/desktop-narrowed browsers clean) */
        scrollbar-width: none;
    }

    .plans-grid::-webkit-scrollbar { display: none; }

    .plans-grid .plan {
        flex: 0 0 82%;
        scroll-snap-align: center;
        max-width: 300px;
    }

    /* Hover-lift doesn't apply well to touch — keep cards flat until tapped */
    .plans-grid .plan:hover {
        transform: none;
    }

    /* Chip/ribbon badges normally float above the card via top:-11px,
       relying on the ancestor .plans-grid clipping at exactly the
       right edge. On mobile .plans-grid is itself a scroll container
       (overflow-x:auto) — per spec that forces overflow-y to auto too,
       and combined with .fade-up's own transform-based entrance
       animation on .plan, WebKit intermittently mis-clips anything
       positioned outside the card's box during/after that transform.
       0.1.48's padding-clearance fix did not resolve this in practice
       (reported still clipping once the card's scroll-in animation
       settles). Pulling both badges into normal flow at the top of
       the card sidesteps the clipping question entirely instead of
       chasing exact clearance math against an animated transform.
       Both are already the first DOM child(ren) of .plan, so static
       positioning naturally places them above .plan-eye-wrap. */
    .plan-chip,
    .plan-selected-ribbon {
        position: static;
        left: auto;
        transform: none;
        align-self: center;
        margin: 0 0 14px;
    }

    .plans-swipe-dots {
        display: flex;
    }
}

@media (max-width: 540px) {
    .features-grid {
        grid-template-columns: 1fr;
    }

    .cta-banner-btns {
        flex-direction: column;
        align-items: center;
    }
}

/* ─── Plans controls (billing + TTL) ──────────────────────────────── */
.plans-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

/* ─── Advanced settings accordion ──────────────────────────────────── */
.advanced-settings-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid var(--border-md);
    background: transparent;
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    transition: all .2s ease;
}

.advanced-settings-toggle:hover {
    border-color: var(--border-strong);
    color: var(--text);
    background: rgba(255, 255, 255, .03);
}

.advanced-settings-toggle.open {
    border-color: rgba(220, 38, 38, .35);
    color: var(--text);
    background: rgba(220, 38, 38, .05);
}

.advanced-settings-summary {
    color: var(--text-3);
    font-family: var(--mono);
    font-size: 11px;
}

.advanced-settings-chevron {
    transition: transform .2s ease;
    flex-shrink: 0;
}

.advanced-settings-toggle.open .advanced-settings-chevron {
    transform: rotate(180deg);
}

.advanced-settings-panel {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    transition: grid-template-rows .3s ease;
}

.advanced-settings-panel.open {
    grid-template-rows: 1fr;
}

.advanced-settings-inner {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    opacity: 0;
    transition: opacity .2s ease;
}

.advanced-settings-panel.open .advanced-settings-inner {
    opacity: 1;
    transition-delay: .1s;
    padding-top: 4px;
}

/* Fallback for browsers without animated grid-template-rows support
   (iOS Safari < 15.4) — max-height transition instead. Feature-detected
   via @supports so modern browsers keep using the grid technique above. */
@supports not (grid-template-rows: 0fr) {
    .advanced-settings-panel {
        grid-template-rows: unset;
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease;
    }

    .advanced-settings-panel.open {
        max-height: 600px;
    }
}

.billing-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-md);
    border-radius: 100px;
    padding: 4px;
    gap: 2px;
    position: relative;
}

.billing-toggle-btn {
    padding: 7px 20px;
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text-2);
    font-family: var(--font);
    transition: all .2s ease;
    position: relative;
}

.billing-toggle-btn.active {
    background: var(--bg-surface);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.billing-save-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 100px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    vertical-align: middle;
}

.ttl-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ttl-picker-label {
    font-size: 12px;
    color: var(--text-3);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ttl-picker-options {
    display: inline-flex;
    background: var(--bg-elevated);
    border: 1px solid var(--border-md);
    border-radius: 10px;
    padding: 4px;
    gap: 3px;
}

.ttl-btn {
    padding: 7px 18px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--mono);
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text-3);
    transition: all .18s ease;
}

.ttl-btn:hover {
    color: var(--text-2);
    background: rgba(255, 255, 255, .04);
}

.ttl-btn.active {
    background: var(--red);
    color: #fff;
    box-shadow: 0 2px 8px rgba(220, 38, 38, .35);
}

.ttl-note {
    font-size: 11.5px;
    color: var(--text-3);
    text-align: center;
}

.ttl-note strong {
    color: var(--text-2);
}

/* ─── Info tooltip (technical detail on hover/focus) ──────────────── */
.info-tooltip {
    position: relative;
    cursor: help;
}

.info-tooltip.underline {
    border-bottom: 1px dashed var(--text-3);
}

.info-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #18181c;
    border: 1px solid var(--border-md);
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 10.5px;
    line-height: 1.55;
    padding: 8px 10px;
    border-radius: 8px;
    white-space: normal;
    width: max-content;
    max-width: 210px;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 20;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

.info-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #18181c;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 20;
}

.info-tooltip:hover::after,  .info-tooltip:hover::before,
.info-tooltip:focus::after,  .info-tooltip:focus::before,
.info-tooltip:focus-visible::after, .info-tooltip:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Touch devices: JS toggles this class on tap instead of relying on
   :hover/:focus, which don't fire reliably for taps on non-form
   elements in iOS Safari. */
.info-tooltip.tooltip-active::after,
.info-tooltip.tooltip-active::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Small visual cue (on touch only, via .touch-device on <body>) so it's
   clear these are tappable, not just decorative dashed text. */
.touch-device .info-tooltip.underline {
    border-bottom-style: dotted;
    border-bottom-color: var(--text-2);
}

/* ─── Plan price dynamic area ──────────────────────────────────────── */
.plan-price-main {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.plan-price-breakdown {
    font-size: 10.5px;
    color: var(--text-3);
    font-family: var(--mono);
    text-align: center;
    margin-top: 5px;
    min-height: 16px;
    letter-spacing: .02em;
}

.plan-vps-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 auto 14px;
    padding: 3px 10px;
    border-radius: 100px;
    border: 1px solid var(--border-md);
    background: rgba(255, 255, 255, .03);
    font-size: 11px;
    color: var(--text-3);
    font-family: var(--mono);
    width: fit-content;
}

/* Reserve the DNS-brute badge's row height even when hidden, so
   toggling the add-on doesn't shift card heights relative to each
   other (previously display:none fully collapsed the row). */
.dns-brute-vps-badge {
    visibility: hidden;
    height: 24px;
}

.dns-brute-vps-badge.dns-brute-visible {
    visibility: visible;
}

.plan-vps-badge .vps-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 4px rgba(52, 211, 153, .5);
}

@media (max-width: 640px) {
    .ttl-btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    .plans-controls {
        gap: 16px;
    }
}

/* ─── Plan trial note (short, full detail on hover/tap) ────────────── */
.plan-trial-note-short {
    font-size: 11.5px;
    color: var(--text-3);
    text-align: center;
    margin-bottom: 12px;
}

/* ─── Yearly total inline label ──────────────────────────────────── */
.plan-price-yearly-total {
    font-size: 10px;
    color: #34d399;
    font-family: var(--mono);
    font-weight: 500;
    letter-spacing: .02em;
}

/* ─── Copy-selected plan card highlight ──────────────────────────── */
.plan.copy-selected {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .28), 0 16px 40px rgba(220, 38, 38, .18);
    transform: translateY(-4px);
}

.plan-selected-ribbon {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--red);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 13px;
    border-radius: 100px;
    letter-spacing: .04em;
    white-space: nowrap;
    text-transform: uppercase;
}

.plan.copy-selected .plan-selected-ribbon {
    display: inline-flex;
}

/* Featured/popular chip already occupies this spot — hide it while
   selected so the two ribbons never collide on Three Tomoe */
.plan.copy-selected .plan-chip {
    display: none;
}

/* ─── Copy-to-DM block ───────────────────────────────────────────── */
.dm-copy-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--border-md);
    border-radius: var(--r-lg);
    padding: 24px 28px;
    max-width: 640px;
    margin: 0 auto;
}

.dm-copy-header {
    margin-bottom: 14px;
}

.dm-copy-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.dm-copy-sub {
    font-size: 12px;
    color: var(--text-3);
}

.dm-copy-sub a {
    color: var(--red);
    text-decoration: none;
}

.dm-copy-sub a:hover {
    text-decoration: underline;
}

.dm-copy-textarea {
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r);
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.85;
    padding: 16px 18px;
    resize: none;
    outline: none;
    margin-bottom: 14px;
    letter-spacing: .01em;
}

.dm-copy-textarea:focus {
    border-color: rgba(220, 38, 38, .4);
}

.dm-copy-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.dm-copy-hint {
    font-size: 11.5px;
    color: var(--text-3);
    font-family: var(--mono);
    flex: 1;
}

/* ─── Agent / MCP integration section ─────────────────────────────── */
.agent-section {
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.agent-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.agent-copy .sec-title {
    margin-bottom: 18px;
}

.agent-note {
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--text-3);
    font-family: var(--mono);
}

.agent-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.agent-img-wrap {
    position: relative;
    width: 100%;
    max-width: 420px;
}

.agent-img-wrap::before {
    content: '';
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220, 38, 38, .16) 0%, transparent 70%);
    animation: aura 5s ease-in-out infinite;
    z-index: 0;
}

.agent-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-lg);
    filter: drop-shadow(0 0 32px rgba(220, 38, 38, .35));
}

@media (max-width: 820px) {
    .agent-inner {
        grid-template-columns: 1fr;
        gap: 44px;
        text-align: center;
    }

    .agent-tools {
        justify-content: center;
    }

    .agent-visual {
        order: -1;
    }

    .agent-img-wrap {
        max-width: 280px;
        margin: 0 auto;
    }
}

/* ─── DNS Brute-Force add-on picker ───────────────────────────────── */
.dns-brute-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.dns-brute-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
}

.dns-brute-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--red);
    cursor: pointer;
}

.dns-brute-options {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.dns-brute-options.active {
    display: flex;
}

.dns-brute-freq-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

@media (max-width: 640px) {
    .dns-brute-options {
        gap: 12px;
    }
}