/* ─────────────────────────────────────────
    RESET
───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; }
body {
    font-family: var(--font1);
    background: var(--bg);
    color: var(--t1);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
.section-dots {
    position: fixed;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 999px;
    background: var(--bg-overlay);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--surface-soft-track);
}
.section-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--surface-soft-dot);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform .2s, background .2s, box-shadow .2s;
}
.section-dot:hover {
    transform: scale(1.15);
    background: var(--surface-soft-dot-hover);
}
.section-dot.is-active {
    background: linear-gradient(180deg, var(--blue) 0%, var(--btn-cta-green) 100%);
    box-shadow: 0 0 14px var(--shadow-blue-strong);
    transform: scale(1.2);
}
@media (max-width: 900px) {
    .section-dots { display: none; }
}

/* ─────────────────────────────────────────
    BACKGROUND
───────────────────────────────────────── */
.bg-mesh {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
    radial-gradient(ellipse 72% 58% at 4% -6%, var(--bg-mesh-blue) 0%, transparent 58%),
    radial-gradient(ellipse 58% 48% at 96% 7%, var(--bg-mesh-green) 0%, transparent 52%),
    radial-gradient(ellipse 46% 50% at 50% 105%, var(--bg-mesh-blue-soft) 0%, transparent 55%);
}
.bg-grid {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--bg-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--bg-grid-line) 1px, transparent 1px);
    background-size: 52px 52px;
    background-position: 0 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 72%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 72%, transparent 100%);
    animation: drift-grid 10s linear infinite;
}
@keyframes drift-grid {
    from {
        background-position: 0 0, 0 0;
    }
    to {
        background-position: 52px 0, 52px 0;
    }
}

/* ─────────────────────────────────────────
    LAYOUT
───────────────────────────────────────── */
.wrap {
    max-width: 1180px; margin: 0 auto; padding: 0 24px;
    position: relative; z-index: 1;
}
.section { padding: 96px 0; }

/* ─────────────────────────────────────────
    TYPOGRAPHY
───────────────────────────────────────── */
.eyebrow {
    font-family: var(--font3);
    font-size: 11px; font-weight: 500; letter-spacing: .18em;
    text-transform: uppercase; color: var(--blue);
    display: block; margin-bottom: 12px;
}
.eyebrow-green { color: var(--green); }

h1 {
    font-size: clamp(40px, 6.5vw, 72px); font-weight: 700;
    line-height: 1.07; letter-spacing: -.03em;
    color: var(--t1);
}
h2 {
    font-size: clamp(28px, 4vw, 46px); font-weight: 700;
    line-height: 1.15; letter-spacing: -.025em;
    color: var(--t1);
}
h3 { font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: var(--t1); }

.lead {
    font-size: clamp(15px, 1.5vw, 16px); color: var(--t2);
    line-height: 1.8; max-width: 540px;
}
.text-grad {
    background: linear-gradient(100deg, var(--text-grad-start) 0%, var(--text-grad-end) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ─────────────────────────────────────────
    BUTTONS
───────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border-radius: var(--r-sm); font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all .2s; border: 1px solid transparent;
    white-space: nowrap; font-family: inherit;
}
.btn-sm  { padding: 7px 15px; font-size: 13px; }
.btn-md  { padding: 11px 22px; }
.btn-lg  { padding: 13px 26px; font-size: 15px; border-radius: var(--r-md); }

.btn-ghost  { color: var(--t2); background: transparent; }
.btn-ghost:hover { color: var(--t1); background: var(--surface-soft-hover); }

.btn-outline { color: var(--t2); background: var(--surface-soft-stronger); border-color: var(--border); }
.btn-outline:hover { color: var(--t1); border-color: var(--outline-border-hover); transform: translateY(-1px); }

.btn-blue { color: var(--white); background: var(--blue); box-shadow: 0 4px 20px var(--blue-glow); }
.btn-blue:hover { opacity: .9; transform: translateY(-1px); }

.btn-cta {
    color: var(--white);
    border: none;
    background: linear-gradient(130deg, var(--blue) 0%, var(--btn-cta-green) 100%);
    box-shadow: 0 6px 28px var(--blue-glow);
}
.btn-cta:hover { opacity: .92; transform: translateY(-2px); box-shadow: 0 12px 36px var(--shadow-blue-cta); }

/* ─────────────────────────────────────────
    PILL / BADGE
───────────────────────────────────────── */
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing: .04em;
}
.pill-blue  { background: var(--blue-soft);  border: 1px solid var(--blue-border-soft); color: var(--info-text); }
.pill-green { background: var(--green-soft); border: 1px solid var(--green-border-soft); color: var(--success-text); }
.pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green); box-shadow: 0 0 8px var(--green);
    animation: pulse-anim 2s ease infinite;
}
@keyframes pulse-anim {
    0%,100% { opacity:1; box-shadow: 0 0 6px var(--green); }
    50%      { opacity:.6; box-shadow: 0 0 14px var(--green); }
}

/* ─────────────────────────────────────────
    NAV
───────────────────────────────────────── */
#nav {
    position: sticky; top: 0; z-index: 60;
    padding: 14px 20px;
}
.nav-pill {
    max-width: 1180px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--nav-surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border); border-radius: 14px; padding: 10px 16px 10px 14px;
    transition: border-color .3s, box-shadow .3s;
}
#nav.scrolled .nav-pill { border-color: var(--outline-border-hover); box-shadow: 0 8px 40px var(--shadow-dark-xl); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--brand-mark-bg);
    border: 1px solid var(--brand-mark-border); display: grid; place-items: center;
    font-size: 16px; flex-shrink: 0;
    box-shadow: var(--brand-mark-shadow);
}
.brand-sup  { font-family:var(--font3); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); line-height:1; }
.brand-name {
    font-size:14px; font-weight:650; line-height:1.3;
    background: linear-gradient(90deg,var(--brand-grad-start) 0%,var(--brand-grad-end) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
/* ─────────────────────────────────────────
    WHAT IS IT
───────────────────────────────────────── */
.wit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 48px;
}
.wit-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 28px 26px;
    position: relative;
    overflow: hidden;
    transition: border-color .25s, transform .25s, box-shadow .25s;
}
.wit-card::before {
    content:''; position:absolute; inset:0; border-radius:inherit;
    background: linear-gradient(135deg, var(--panel-overlay-blue), transparent 55%, var(--panel-overlay-green));
    opacity:0; transition:opacity .3s; pointer-events:none;
}
.wit-card:hover::before { opacity:1; }
.wit-card:hover { border-color: var(--blue-border-soft); transform:translateY(-2px); box-shadow: 0 20px 60px var(--shadow-dark-md); }
.wit-icon {
    width: 42px; height: 42px; border-radius: 11px;
    display: grid; place-items: center; font-size: 19px;
    border: 1px solid var(--border); margin-bottom: 18px;
}
.wit-card h3 { font-size: 15px; font-weight: 650; margin-bottom: 10px; color: var(--t1); }
.wit-card p  { font-size: 13.5px; color: var(--t2); line-height: 1.75; }

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


.nav-right { display: flex; align-items: center; gap: 6px; }

@media (max-width: 700px) {
    .nav-link { display: none !important; }
}

/* ─────────────────────────────────────────
    HERO — fills exactly one viewport
───────────────────────────────────────── */
.hero {
    min-height: calc(100vh - 72px); /* subtract nav height */
    display: flex;
    align-items: center;
    padding: 64px 0 80px;
    text-align: center;
}
.hero-wrap { width: 100%; }
.hero-content { display: flex; flex-direction: column; align-items: center; }
.hero h1 { max-width: 820px; margin: 0 auto 16px; }
.hero .lead { margin: 0 auto; text-align: center; }

/* ─────────────────────────────────────────
    FIXED SCROLL ARROW
───────────────────────────────────────── */
@keyframes chevron-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(7px); }
}
.scroll-chevron { animation: chevron-bounce 1.8s ease-in-out infinite; display: block; }

#scroll-arrow-btn {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 20px;
    border-radius: 999px;
    /* subtle pill background so it's visible over any section */
    transition: opacity .4s ease, transform .4s ease;
}
#scroll-arrow-btn:hover { opacity: .75; }
#scroll-arrow-btn.hidden-arrow {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(16px);
}
#scroll-arrow-btn:hover .scroll-chevron { animation-play-state: paused; }

/* ─────────────────────────────────────────
    DASHBOARD SNAPSHOT SECTION
───────────────────────────────────────── */
.snap-section { padding: 80px 0 96px; }
.snap-section-label { text-align: center; margin-bottom: 24px; }
.snap-wrap { margin: 0 auto; max-width: 1060px; }

.hero-ctas {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: center; gap: 10px; margin-top: 36px;
}
.hero-tags {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px; margin-top: 40px;
}
.hero-tag {
    padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
    color: var(--t2); border: 1px solid var(--border);
    background: var(--surface-soft);
    transition: color .2s, border-color .2s;
}
.hero-tag:hover { color: var(--t1); border-color: var(--outline-border-hover); }
.snap {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: 0 32px 80px var(--shadow-dark-2xl), 0 0 0 1px var(--surface-soft-stronger);
}
.snap-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; border-bottom: 1px solid var(--border);
    background: var(--surface-softer);
}
.snap-dots { display: flex; gap: 5px; }
.snap-dot  { width: 10px; height: 10px; border-radius: 50%; }
.snap-body { padding: 18px; display: grid; gap: 10px; }
.snap-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.sm {
    background: var(--surface-soft-strong); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 14px 16px;
}
.sm-label {
    font-family:var(--font3); font-size:9px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--t3); margin-bottom:6px;
}
.sm-val  { font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--t1); }
.sm-sub  { font-size:11px; color:var(--t3); margin-top:4px; line-height:1.45; }
.snap-sigs { display: flex; flex-direction: column; gap: 7px; }
.sig {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--surface-soft); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 10px 14px; gap: 10px;
}
.sig-name  { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color: var(--t1); }
.sig-dot   { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.sig-meta  { font-size:11.5px; color:var(--t3); text-align:right; }

/* ─────────────────────────────────────────
    CARD
───────────────────────────────────────── */
.card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); position: relative; overflow: hidden;
    transition: border-color .25s, transform .25s, box-shadow .25s;
}
.card::before {
    content:''; position:absolute; inset:0; border-radius:inherit;
    background: linear-gradient(135deg, var(--panel-overlay-blue), transparent 50%, var(--panel-overlay-green));
    opacity:0; transition:opacity .3s; pointer-events:none;
}
.card:hover::before { opacity:1; }
.card:hover { border-color: var(--blue-border-soft); transform:translateY(-2px); box-shadow: 0 20px 60px var(--shadow-dark-md); }
.p { padding: 28px; }

/* ─────────────────────────────────────────
    SECTION HEAD
───────────────────────────────────────── */
.sec-head { margin-bottom: 48px; }
.sec-head h2 { margin-top: 10px; }
.sec-head .lead { margin-top: 14px; }

/* ─────────────────────────────────────────
    CAPABILITIES — narrative rows
───────────────────────────────────────── */

/* Shared feature parts */
.feat-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center; font-size: 21px;
    border: 1px solid var(--border); flex-shrink: 0;
}
.feat-kicker {
    font-family:var(--font3); font-size:10px; font-weight:500;
    letter-spacing:.16em; text-transform:uppercase;
}
.feat-body { font-size:14.5px; color:var(--t2); line-height:1.8; }
.feat-list { display:flex; flex-direction:column; gap:10px; }
.feat-list li { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--t2); line-height:1.6; }
.fl-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; margin-top:7px; }

/* Channel chips */
.ch-chips { display:flex; flex-wrap:wrap; gap:8px; }
.ch-chip {
    display:inline-flex; align-items:center; gap:7px;
    padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:500;
    border: 1px solid var(--border); background:var(--surface-soft-strong); color:var(--t2);
    transition: border-color .2s, color .2s;
}
.ch-chip:hover { color: var(--t1); border-color: var(--outline-border-hover); }
.ch-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

/* ── Narrative row layout ─────────────── */
/* Each capability is a full-width row: text left + visual right, alternating */
.cap-rows { display: flex; flex-direction: column; gap: 25px; }

.cap-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--card);
    position: relative;
    transition: border-color .25s, box-shadow .25s;
}
.cap-row::before {
    content:''; position:absolute; inset:0;
    background: linear-gradient(135deg, var(--blue-surface-soft), transparent 45%, var(--panel-overlay-green));
    opacity:0; transition:opacity .3s; pointer-events:none;
}
.cap-row:hover::before { opacity:1; }
.cap-row:hover { border-color: var(--blue-border-soft); box-shadow: 0 20px 60px var(--shadow-dark-sm); }
.cap-row:last-child { margin-bottom: 0; }
/* Text pane */
.cap-text {
    padding: 52px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    border-right: 1px solid var(--border);
}
.cap-row.flip .cap-text { border-right: none; border-left: 1px solid var(--border); order: 2; }
.cap-row.flip .cap-visual { order: 1; }

.cap-text .feat-icon { margin-bottom: 20px; }
.cap-text .feat-kicker {
    font-family: var(--font1);
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: none;
    margin-bottom: 10px;
    line-height: 1.25;
}
.cap-text h3 {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--t2);
    line-height: 1.5;
    margin-bottom: 18px;
}
.cap-text .feat-body { margin-bottom: 24px; }
.cap-text .feat-list { margin-top: 0; }

/* Visual pane */
.cap-visual {
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--surface-softest);
    gap: 12px;
}

/* Connector line between rows */
.cap-connector {
    display: flex; align-items: center; justify-content: center;
    height: 32px; position: relative; margin: -8px 0;
    z-index: 2;
}
.cap-connector::before {
    content:''; position:absolute; left:50%; top:0; bottom:0;
    width:1px; background: linear-gradient(to bottom, transparent, var(--border), transparent);
    transform: translateX(-50%);
}
.cap-connector-dot {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--card); border: 1px solid var(--border);
    display: grid; place-items: center;
    font-size: 11px; color: var(--t3);
    font-family: var(--font-mono);
    position: relative; z-index: 1;
}

/* Mini signals reuse */
.mini-sigs { display:flex; flex-direction:column; gap:9px; }
.msig {
    display:flex; align-items:center; gap:11px;
    background:var(--surface-soft-strong); border:1px solid var(--border);
    border-radius:var(--r-sm); padding:10px 14px;
}
.msig-ico { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:14px; flex-shrink:0; }
.msig-txt { font-size:13px; color:var(--t2); flex:1; }
.msig-tag {
    font-size:10px; font-weight:600; padding:3px 9px; border-radius:999px;
    font-family:var(--font3); letter-spacing:.06em; white-space:nowrap;
}

/* Workflow stage diagram */
.stage-flow { display:flex; flex-direction:column; gap:8px; }
.stage {
    display:flex; align-items:center; gap:12px;
    background:var(--surface-soft-strong); border:1px solid var(--border);
    border-radius: var(--r-sm); padding:12px 16px;
    transition: border-color .2s;
}
.stage:hover { border-color: var(--blue-border-medium); }
.stage-ico { font-size:15px; flex-shrink:0; }
.stage-info { flex:1; }
.stage-name { font-size:13px; font-weight:600; color:var(--t1); line-height:1.2; }
.stage-desc { font-size:11.5px; color:var(--t3); margin-top:2px; }
.stage-badge {
    font-size:10px; font-weight:600; padding:3px 9px; border-radius:999px;
    font-family:var(--font3); letter-spacing:.05em; white-space:nowrap;
}
.stage-arrow {
    display:flex; align-items:center; justify-content:center; padding-left:20px;
    color:var(--t3); font-size:11px; font-family:var(--font3);
}

/* AI draft preview */
.ai-draft {
    background:var(--surface-soft); border:1px solid var(--border);
    border-radius: var(--r-md); overflow:hidden;
}
.ai-draft-header {
    padding:10px 14px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    background:var(--surface-softer);
}
.ai-draft-label { font-size:11px; font-family:var(--font3); color:var(--t3); letter-spacing:.1em; }
.ai-draft-body { padding:16px; display:flex; flex-direction:column; gap:10px; }
.ai-bubble {
    border-radius:10px; padding:10px 13px;
    font-size:13px; line-height:1.6;
    max-width:88%;
}
.ai-bubble.bot { background:var(--blue-surface-mid); border:1px solid var(--outline-border-hover); color:var(--bot-bubble-text); align-self:flex-start; }
.ai-bubble.user { background:var(--surface-soft-hover); border:1px solid var(--border); color:var(--t2); align-self:flex-end; }
.ai-bubble.draft { background:var(--green-surface-mid); border:1px dashed var(--green-border-mid); color:var(--draft-bubble-text); align-self:flex-start; }
.ai-draft-footer {
    padding:10px 14px; border-top:1px solid var(--border);
    display:flex; align-items:center; gap:8px;
}
.ai-draft-action {
    font-size:11px; font-weight:600; padding:4px 12px; border-radius:999px;
    border:1px solid var(--border); color:var(--t2); cursor:pointer;
    font-family:var(--font3);
    transition: border-color .2s, color .2s;
}
.ai-draft-action.primary { background:var(--blue-soft); border-color:var(--blue-border-strong); color:var(--info-text); }

/* Sheets row preview */
.sheet-preview {
    background:var(--surface-soft); border:1px solid var(--border);
    border-radius:var(--r-md); overflow:hidden;
}
.sheet-header {
    padding:9px 14px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:8px;
    background:var(--surface-softer);
    font-size:11px; font-family:var(--font3); color:var(--t3); letter-spacing:.1em;
}
.sheet-row {
    display:grid; grid-template-columns:1fr 1fr 1fr 80px;
    gap:0; padding:9px 14px; border-bottom:1px solid var(--border);
    font-size:12px; align-items:center;
    transition: background .15s;
}
.sheet-row:hover { background:var(--surface-soft-strong); }
.sheet-row:last-child { border-bottom:none; }
.sheet-row.head { font-family:var(--font3); font-size:10px; color:var(--t3); letter-spacing:.08em; text-transform:uppercase; }
.sheet-cell { color:var(--t2); padding:0 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sheet-row.head .sheet-cell { color:var(--t3); }
.sheet-status {
    font-size:10px; font-weight:600; padding:3px 9px; border-radius:999px;
    font-family:var(--font3); text-align:center;
}
.sheet-arrow {
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:12px 0; color:var(--t3); font-size:12px;
}
.sheet-arrow-line { flex:1; height:1px; background: linear-gradient(to right, transparent, var(--border), transparent); }
.sheet-arrow-text { font-family:var(--font3); font-size:10px; letter-spacing:.1em; }

/* ─────────────────────────────────────────
    PRICING
───────────────────────────────────────── */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: start;
    margin-top: 48px;
}
.price-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 28px 24px;
    position: relative; overflow: hidden;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    display: flex; flex-direction: column;
}
.price-card:hover { border-color: var(--blue-border-soft); transform: translateY(-3px); box-shadow: 0 20px 60px var(--shadow-dark-lg); }
.price-card.featured {
    border-color: var(--blue); background: linear-gradient(160deg, var(--blue-surface-mid) 0%, var(--card) 60%);
    box-shadow: 0 0 0 1px var(--blue-border-strong), 0 16px 48px var(--shadow-blue-soft);
}
.price-card.featured:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--blue-border-stronger), 0 24px 60px var(--shadow-blue-mid); }
.price-badge {
    position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(130deg, var(--blue) 0%, var(--btn-cta-green) 100%);
    color: var(--white); font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; padding: 4px 14px; border-radius: 0 0 10px 10px;
    white-space: nowrap;
}
.price-icon {
    width: 40px; height: 40px; border-radius: 11px;
    display: grid; place-items: center; margin-bottom: 16px; flex-shrink: 0;
}
.price-name { font-size: 15px; font-weight: 700; color: var(--t1); margin-bottom: 6px; }
.price-amount {
    font-size: clamp(32px, 4vw, 42px); font-weight: 700;
    letter-spacing: -.03em; color: var(--t1); line-height: 1;
}
.price-amount sup { font-size: 18px; font-weight: 600; vertical-align: super; margin-right: 2px; }
.price-period { font-size: 13px; color: var(--t2); margin-top: 4px; margin-bottom: 22px; }
.price-divider { height: 1px; background: var(--border); margin: 0 0 20px; }
.price-features { display: flex; flex-direction: column; gap: 10px; flex: 1; margin-bottom: 24px; }
.price-feature { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--t2); line-height: 1.5; }
.pf-check { flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px; color: var(--green); }
.pricing-note {
    margin-top: 28px; text-align: center;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 24px;
}
.pricing-note-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--t2); }
.pn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); flex-shrink: 0; }

@media (max-width: 960px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────
    CONTACT
───────────────────────────────────────── */
.contact-section {
    padding-top: 0;
}
.contact-head {
    max-width: 700px;
    margin-bottom: 40px;
}
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
}
.form-card,
.sidebar-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    position: relative;
    overflow: hidden;
}
.form-card {
    padding: 40px 36px;
}
.form-card::before,
.sidebar-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--panel-overlay-blue), transparent 55%, var(--panel-overlay-green));
    pointer-events: none;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px;
}
.form-group:last-child { margin-bottom: 0; }
label {
    font-size: 13px;
    font-weight: 500;
    color: var(--t2);
    letter-spacing: .01em;
}
.req {
    color: var(--blue);
    margin-left: 2px;
}
input,
select,
textarea {
    width: 100%;
    background: var(--surface-soft-stronger);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--t1);
    font-family: var(--font1);
    font-size: 14px;
    padding: 11px 14px;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    -webkit-appearance: none;
    appearance: none;
}
input::placeholder,
textarea::placeholder {
    color: var(--t3);
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--blue-border-strongest);
    background: var(--blue-surface-soft);
    box-shadow: 0 0 0 3px var(--blue-ring);
}
input:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) {
    border-color: var(--outline-border-soft);
}
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6480' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}
select option {
    background: var(--select-option-bg);
    color: var(--t1);
}
textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.7;
}
.form-divider {
    height: 1px;
    background: var(--border);
    margin: 20px 0;
}
.form-section-label {
    font-family: var(--font3);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--t3);
    margin-bottom: 16px;
    display: block;
}
.submit-wrap {
    margin-top: 24px;
}
.btn-submit {
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
    border-radius: var(--r-md);
    color: var(--white);
    background: linear-gradient(130deg, var(--blue) 0%, var(--btn-cta-green) 100%);
    box-shadow: 0 6px 28px var(--blue-glow);
    border: none;
    cursor: pointer;
    font-family: var(--font1);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity .2s, transform .2s, box-shadow .2s;
}
.btn-submit:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 12px 36px var(--shadow-blue-cta); }
.btn-submit:active { transform: translateY(0); }
.btn-submit:disabled { opacity: .68; cursor: not-allowed; transform: none; box-shadow: none; }
.submit-status {
    display: none;
    margin-top: 14px;
    border-radius: var(--r-sm);
    padding: 10px 13px;
    font-size: 13px;
    line-height: 1.6;
}
.submit-status.is-visible { display: block; }
.submit-status.is-error {
    background: var(--error-soft);
    border: 1px solid var(--error-border);
    color: var(--error-text-soft);
}
.submit-status.is-success {
    background: var(--green-soft);
    border: 1px solid var(--green-border-soft);
    color: var(--success-text);
}
.legal-note {
    margin-top: 16px;
    font-size: 12.5px;
    color: var(--t3);
    line-height: 1.8;
}
.legal-note a {
    color: var(--t2);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-note a:hover { color: var(--t1); }
.success-state {
    display: none;
    min-height: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
}
.success-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--green-soft);
    border: 1px solid var(--green-border-soft);
}
.success-state p {
    color: var(--t2);
    max-width: 520px;
}
.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.sidebar-card {
    padding: 26px 24px;
}
.sidebar-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    margin-bottom: 16px;
}
.sidebar-card-title {
    font-size: 16px;
    font-weight: 650;
    color: var(--t1);
    margin-bottom: 8px;
}
.sidebar-card-body {
    font-size: 14px;
    color: var(--t2);
    line-height: 1.75;
}
.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contact-method {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--t2);
}
.contact-method a:hover {
    color: var(--t1);
}
.contact-method-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--surface-soft-stronger);
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.contact-detail-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}
.contact-detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--t2);
}
.contact-detail-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
    flex-shrink: 0;
}

/* ─────────────────────────────────────────
    HOW IT WORKS
───────────────────────────────────────── */
.hiw-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.hiw-sticky { position:sticky; top:calc(72px + 32px); }
.hiw-steps  { display:flex; flex-direction:column; }
.step-item  { display:flex; gap:20px; padding:28px 0; border-bottom:1px solid var(--border); }
.step-item:last-child { border-bottom:none; }
.step-left  { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.step-num {
    width:38px; height:38px; border-radius:11px;
    background:var(--blue-soft); border:1px solid var(--blue-border-medium);
    display:grid; place-items:center;
    font-family:var(--font3); font-size:14px; font-weight:500; color:var(--brand-grad-start);
}
.step-line { width:1px; flex:1; min-height:24px; background:var(--border); margin-top:10px; }
.step-item:last-child .step-line { display:none; }
.step-right { padding-top:5px; }
.step-right h3 { margin-bottom:8px; }
.step-right p  { font-size:14px; color:var(--t2); line-height:1.75; }

/* ─────────────────────────────────────────
    CTA BAND
───────────────────────────────────────── */
.cta-band {
    border-radius: var(--r-xl); padding: 64px 56px;
    background:
    radial-gradient(ellipse 65% 90% at 0% 50%,   var(--panel-overlay-blue-strong), transparent 55%),
    radial-gradient(ellipse 65% 90% at 100% 50%,  var(--panel-overlay-green-strong), transparent 55%),
    var(--surface);
    border: 1px solid var(--border);
}
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:48px; }
.cta-actions { display:flex; flex-direction:column; gap:10px; flex-shrink:0; }

/* ─────────────────────────────────────────
    FOOTER
───────────────────────────────────────── */
footer { padding:28px 24px 32px; border-top:1px solid var(--border); background:var(--surface); position:relative; z-index:1; }
.foot  { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot-brand { display:flex; align-items:center; gap:10px; }
.foot-copy  { font-size:13px; color:var(--t3); margin-top:8px; }
.foot-links { display:flex; gap:4px; flex-wrap:wrap; }
.foot-link  { font-size:13px; color:var(--t3); padding:6px 12px; border-radius:8px; transition:color .2s, background .2s; }
.foot-link:hover { color:var(--t1); background:var(--surface-soft-hover); }

/* ─────────────────────────────────────────
    REVEAL
───────────────────────────────────────── */
[data-r] { opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; transition-delay:var(--d,0ms); }
[data-r].on { opacity:1; transform:none; }

/* ─────────────────────────────────────────
    RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 960px) {
    .cap-row { grid-template-columns: 1fr; }
    .cap-text { border-right: none; border-bottom: 1px solid var(--border); padding: 36px 28px; }
    .cap-row.flip .cap-text { border-left: none; border-bottom: 1px solid var(--border); order: 1; }
    .cap-row.flip .cap-visual { order: 2; }
    .cap-visual { padding: 28px; }
    .hiw-grid { grid-template-columns: 1fr; gap: 32px; }
    .hiw-sticky { position: static; }
    .cta-band { padding: 40px 32px; }
    .cta-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
    .cta-actions { flex-direction: row; flex-wrap: wrap; }
    .section { padding: 72px 0; }
    .sec-head { margin-bottom: 36px; }
    .contact-grid { grid-template-columns: 1fr; }
    .contact-sidebar { order: -1; }
}

@media (max-width: 640px) {
    .wrap { padding: 0 16px; }
    #nav  { padding: 10px 12px; }
    .nav-pill { padding: 8px 12px; }
    .hero { padding: 48px 0 60px; min-height: calc(100svh - 64px); }
    .hero-ctas { flex-direction: column; align-items: stretch; }
    .hero-ctas .btn { justify-content: center; }
    .snap-metrics { grid-template-columns: 1fr 1fr !important; }
    .sig-meta { display: none; }
    .cap-text { padding: 28px 20px; }
    .cap-visual { padding: 20px; }
    .bento { gap: 10px; }
    .snap-body { grid-template-columns: 1fr !important; }
    .snap-body > div:first-child { border-right: none !important; border-bottom: 1px solid var(--border); padding-right: 0 !important; padding-bottom: 14px; }
    .p { padding: 20px; }
    .feat-icon { width:36px; height:36px; font-size:17px; }
    .cta-band { padding: 28px 22px; }
    .section { padding: 56px 0; }
    .snap-section { padding: 48px 0 64px; }
    .step-item { padding: 20px 0; }
    .foot { flex-direction: column; align-items: flex-start; gap: 16px; }
    #scroll-arrow-btn { bottom: 20px; padding: 10px 16px; }
    .form-card { padding: 28px 20px; }
    .sidebar-card { padding: 22px 18px; }
    .form-row { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────
    MOBILE TYPOGRAPHY — font-size reductions
    Layout is already handled above.
    These rules only reduce text sizes.
───────────────────────────────────────── */

@media (max-width: 640px) {

    /* Headings */
    h1 { font-size: clamp(26px, 7.5vw, 36px); }
    h2 { font-size: clamp(20px, 5.5vw, 28px); }
    h3 { font-size: 15px; }

    /* Body */
    .lead      { font-size: 14px; line-height: 1.7; }
    .feat-body { font-size: 13.5px; line-height: 1.75; }

    /* Eyebrow */
    .eyebrow { font-size: 10px; letter-spacing: .14em; }

    /* Hero tags */
    .hero-tag { font-size: 11.5px; padding: 5px 11px; }

    /* Capability kicker and subtitle */
    .cap-text .feat-kicker { font-size: clamp(14px, 4vw, 18px); }
    .cap-text h3           { font-size: 13px; }

    /* How it works */
    .step-right h3 { font-size: 14.5px; }
    .step-right p  { font-size: 13px; }

    /* ── Snap widget metric cards ── */
    /* 2-col grid is forced above — now shrink the content inside each card */
    .sm { padding: 10px 12px; }
    .sm-label { font-size: 8px; letter-spacing: .1em; }
    .sm-val   { font-size: 17px !important; }
    .sm-sub   { font-size: 10px; line-height: 1.4; }

    /* ── Snap widget sidebar (shown above main on mobile) ── */
    /* Inline font-sizes inside snap-body must be overridden with !important */
    .snap-body span[style*="font-size:12.5px"],
    .snap-body span[style*="font-size:12px"] { font-size: 11px !important; }
    .snap-body div[style*="font-size:12px"]  { font-size: 11px !important; }
    .snap-body div[style*="font-size:9px"]   { font-size: 8px  !important; }

    /* ── Snap widget signals ── */
    .sig { padding: 8px 12px; }
    .sig-name { font-size: 12px; }

    /* ── Snap widget bar ── */
    .snap-bar { flex-wrap: wrap; gap: 4px; padding: 8px 12px; }

    /* Pricing */
    .price-amount  { font-size: clamp(24px, 7vw, 32px); }
    .price-name    { font-size: 13.5px; }
    .price-period  { font-size: 12px; }
    .price-feature { font-size: 12px; }
    .pricing-note-item { font-size: 12px; }

    /* CTA */
    .cta-band h2 { font-size: clamp(18px, 5.5vw, 24px); }

    /* Footer */
    .foot-copy { font-size: 12px; }
    .foot-link { font-size: 12px; }
}

@media (max-width: 380px) {
    .snap-metrics { grid-template-columns: 1fr !important; }
    #scroll-arrow-btn { bottom: 14px; }
    h1 { font-size: 24px; }
    h2 { font-size: 19px; }
    .sm-val   { font-size: 15px !important; }
    .sm-label { font-size: 7.5px; }
    .hero-tag { font-size: 11px; padding: 4px 9px; }
    .price-amount { font-size: 24px; }
}