/* ================================================
   Me2Leads — index page styles
   Brand: navy #0B3C5D, gold #D4AF37, Plus Jakarta Sans
   ================================================ */

/* ───────── HERO ───────── */
.hero {
position: relative;
padding: 160px 0 80px;
overflow: hidden;
background:
    radial-gradient(ellipse 80% 60% at 80% -10%, rgba(212, 175, 55, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 30%, rgba(11, 60, 93, 0.06), transparent 60%),
    var(--bg);
}
.hero-inner {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 60px;
align-items: center;
}
.hero-eyebrow-row {
display: flex; align-items: center; gap: 12px;
margin-bottom: 28px;
}
.pill-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px 6px 8px;
border-radius: 100px;
background: rgba(212, 175, 55, 0.12);
border: 1px solid rgba(212, 175, 55, 0.3);
font-size: 12px;
font-weight: 700;
color: var(--primary-dark);
}
.pill-badge .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.25);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
50% { box-shadow: 0 0 0 6px rgba(212, 175, 55, 0); }
}
.hero h1 .accent {
background: linear-gradient(120deg, var(--accent) 0%, var(--accent-light) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 300;
letter-spacing: -0.02em;
}
.hero p.lead {
margin-top: 28px;
max-width: 520px;
font-size: 19px;
}
.hero-cta-row {
margin-top: 40px;
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.hero-stats {
margin-top: 56px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
max-width: 540px;
}
.hero-stats .stat-num {
font-size: 36px; font-weight: 800; color: var(--ink);
letter-spacing: -0.03em;
line-height: 1;
}
.hero-stats .stat-num span { color: var(--accent); }
.hero-stats .stat-label {
font-size: 12px;
color: var(--ink-mid);
margin-top: 6px;
letter-spacing: -0.005em;
line-height: 1.4;
}

/* hero phone showcase */
.hero-visual {
position: relative;
height: 640px;
display: flex; align-items: center; justify-content: center;
}
.hero-visual .glow {
position: absolute; inset: 5% 10%;
background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.35), transparent 60%);
filter: blur(40px);
z-index: 0;
}
.hero-phone {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
animation: float-y 6s ease-in-out infinite;
}
.hero-phone-bg {
position: absolute;
top: 50%; left: 50%;
transform: translate(-78%, -50%) rotate(-8deg) scale(0.86);
z-index: 1;
opacity: 0.55;
filter: blur(0.3px);
animation: float-y 7s ease-in-out infinite reverse;
}
.hero-phone-bg-2 {
position: absolute;
top: 50%; left: 50%;
transform: translate(-22%, -50%) rotate(8deg) scale(0.86);
z-index: 1;
opacity: 0.55;
animation: float-y 7.5s ease-in-out infinite;
}
@keyframes float-y {
0%, 100% { translate: 0 calc(0px + var(--py, 0px)); }
50% { translate: 0 calc(-12px + var(--py, 0px)); }
}

/* floating chip cards on hero */
.float-chip {
position: absolute;
background: white;
border-radius: 14px;
box-shadow: var(--shadow);
padding: 12px 16px;
z-index: 3;
display: flex; align-items: center; gap: 10px;
font-size: 13px; font-weight: 700;
color: var(--ink);
border: 1px solid var(--line-soft);
}
.float-chip .chip-icon {
width: 32px; height: 32px;
border-radius: 9px;
display: grid; place-items: center;
flex-shrink: 0;
}
.float-chip-a { top: 14%; left: 4%; animation: float-soft 5s ease-in-out infinite; }
.float-chip-b { top: 38%; right: 0%; animation: float-soft 6s ease-in-out infinite .5s; }
.float-chip-c { bottom: 18%; left: 8%; animation: float-soft 5.5s ease-in-out infinite 1s; }
@keyframes float-soft {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.chip-hot { background: rgba(231, 76, 60, 0.12); color: var(--hot); }
.chip-gold { background: rgba(212, 175, 55, 0.16); color: #8a7220; }
.chip-success { background: rgba(39, 174, 96, 0.14); color: var(--success); }

@media (max-width: 960px) {
.hero-inner { grid-template-columns: 1fr; }
.hero-visual { height: 500px; margin-top: 20px; }
.hero { padding-top: 130px; }
.hero-phone { transform: translate(-50%, -50%) scale(0.85); }
.hero-phone-bg, .hero-phone-bg-2 { display: none; }
}
@media (max-width: 480px) {
.hero-stats { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hero-stats .stat-num { font-size: 24px; }
.hero { padding-top: 100px; }
.hero-visual { height: 380px; }
.hero-phone { transform: translate(-50%, -50%) scale(0.75); }
.float-chip { display: none !important; }
}

/* ───────── MARQUEE ───────── */
.marquee {
padding: 36px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--bg-tint);
overflow: hidden;
}
.marquee-track {
display: flex;
gap: 64px;
animation: scroll 32s linear infinite;
white-space: nowrap;
width: max-content;
}
.marquee-item {
display: flex; align-items: center; gap: 12px;
color: var(--ink-mid);
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
text-wrap: nowrap;
}
.marquee-item .marker {
width: 6px; height: 6px;
background: var(--accent);
border-radius: 50%;
flex-shrink: 0;
}
@keyframes scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}

/* ───────── PROBLEM / SOLUTION ───────── */
.problem {
background: var(--bg);
}
.problem-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
@media (max-width: 960px) { .problem-grid { grid-template-columns: 1fr; gap: 50px; } }
.problem h2 { margin-bottom: 24px; }
.problem-list {
margin-top: 40px;
display: grid; gap: 20px;
}
.problem-item {
display: flex; gap: 18px;
padding: 22px;
background: white;
border-radius: var(--radius);
border: 1px solid var(--line);
transition: transform .3s, box-shadow .3s;
}
.problem-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.problem-icon {
width: 44px; height: 44px;
border-radius: 12px;
background: rgba(212, 175, 55, 0.12);
color: var(--accent);
display: grid; place-items: center;
flex-shrink: 0;
}
.problem-icon svg { width: 22px; height: 22px; }
.problem-item h4 { margin-bottom: 4px; font-size: 16px; }
.problem-item p { font-size: 14px; }

/* before/after card on the right */
.compare-card {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
border-radius: var(--radius-lg);
padding: 40px;
color: white;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
}
.compare-card::before {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(212, 175, 55, 0.25), transparent 70%);
border-radius: 50%;
}
.compare-card h3 { color: white; margin-bottom: 30px; position: relative; }
.compare-row {
display: flex; align-items: center; gap: 14px;
padding: 18px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
position: relative;
font-size: 15px;
}
.compare-row:last-child { border-bottom: 0; }
.compare-row .icon-wrap {
width: 28px; height: 28px;
border-radius: 8px;
display: grid; place-items: center;
flex-shrink: 0;
}
.compare-row .icon-wrap.bad { background: rgba(231, 76, 60, 0.2); color: var(--hot-light); }
.compare-row .icon-wrap.good { background: rgba(39, 174, 96, 0.2); color: #6dd5a0; }
.compare-row .label .label-no-top { color: rgba(255,255,255,0.7); flex: 1; }
.compare-row .label .label-no-top strong { color: white; }
.compare-row.win .label .label-no-top strong { color: var(--accent-light); }

/* ───────── FEATURES ───────── */
.features {
background: var(--bg-tint);
position: relative;
}
.section-head {
max-width: 720px;
margin: 0 auto 70px;
text-align: center;
}
.section-head .eyebrow {
margin-bottom: 18px;
justify-content: center;
}
.section-head .eyebrow::before, .section-head .eyebrow::after {
content: '';
width: 24px;
height: 1.5px;
background: currentColor;
}
.section-head h2 { margin-bottom: 16px; }
.section-head p { font-size: 17px; }

.feature-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
}
.feature-card {
background: white;
border-radius: var(--radius-lg);
padding: 36px;
border: 1px solid var(--line);
position: relative;
overflow: hidden;
transition: transform .35s, box-shadow .35s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature-card.span-7 { grid-column: span 7; }
.feature-card.span-5 { grid-column: span 5; }
.feature-card.span-4 { grid-column: span 4; }
.feature-card.span-8 { grid-column: span 8; }
.feature-card.span-6 { grid-column: span 6; }

.feature-card .feat-icon {
width: 52px; height: 52px;
border-radius: 14px;
display: grid; place-items: center;
margin-bottom: 22px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: white;
box-shadow: 0 10px 24px rgba(11, 60, 93, 0.25);
}
.feature-card .feat-icon.gold {
background: linear-gradient(135deg, var(--accent), var(--accent-light));
color: var(--primary-dark);
box-shadow: 0 10px 24px rgba(212, 175, 55, 0.35);
}
.feature-card .feat-icon svg { width: 24px; height: 24px; }
.feature-card h3 { margin-bottom: 10px; font-size: 24px; }
.feature-card p { font-size: 15px; line-height: 1.6; }

/* feature visuals */
.feat-visual-scan {
margin-top: 28px;
height: 200px;
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
border-radius: var(--radius);
display: grid;
place-items: center;
overflow: hidden;
position: relative;
}
.scan-frame {
width: 220px; height: 140px;
border: 2px dashed rgba(212, 175, 55, 0.6);
border-radius: 12px;
position: relative;
}
.scan-frame::before, .scan-frame::after,
.scan-frame > i:nth-child(1), .scan-frame > i:nth-child(2) {
content: '';
position: absolute;
width: 24px; height: 24px;
border: 3px solid var(--accent);
}
.scan-frame::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.scan-frame::after { top: -3px; right: -3px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.scan-frame > i:nth-child(1) { bottom: -3px; left: -3px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.scan-frame > i:nth-child(2) { bottom: -3px; right: -3px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.scan-line {
position: absolute;
left: 8%; right: 8%; top: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
box-shadow: 0 0 14px var(--accent);
animation: scan 2.4s ease-in-out infinite;
}
@keyframes scan {
0% { top: 8%; opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { top: 92%; opacity: 0; }
}

/* lead board */
.lead-rows {
margin-top: 24px;
display: grid; gap: 10px;
}
.lead-row {
display: flex; align-items: center; gap: 14px;
padding: 14px;
background: var(--bg-tint);
border-radius: 12px;
border: 1px solid var(--line-soft);
}
.lead-avatar {
width: 40px; height: 40px;
border-radius: 12px;
display: grid; place-items: center;
color: white;
font-weight: 800;
font-size: 14px;
flex-shrink: 0;
}
.lead-meta { flex: 1; min-width: 0; }
.lead-meta .lead-name {
font-size: 14px; font-weight: 700; color: var(--ink);
}
.lead-meta .lead-sub {
font-size: 12px; color: var(--ink-soft);
}
.lead-tag {
font-size: 10px; font-weight: 800;
padding: 4px 10px; border-radius: 100px;
letter-spacing: 0.5px;
}
.lead-tag.hot { background: rgba(231, 76, 60, 0.14); color: var(--hot); }
.lead-tag.warm { background: rgba(243, 156, 18, 0.18); color: #b27800; }
.lead-tag.cold { background: rgba(149, 165, 166, 0.2); color: #5d7273; }

/* reminder visual */
.reminder-card {
margin-top: 24px;
border-radius: var(--radius);
border: 1px solid var(--line);
padding: 18px;
display: grid;
grid-template-columns: 4px 1fr auto;
gap: 14px;
background: white;
}
.reminder-bar { background: var(--hot); border-radius: 4px; }
.reminder-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.reminder-sub { font-size: 12px; color: var(--ink-mid); margin-top: 2px; }
.reminder-time { font-size: 12px; font-weight: 700; color: var(--accent); align-self: center; white-space: nowrap; }

@media (max-width: 960px) {
.feature-card.span-7, .feature-card.span-5, .feature-card.span-4, .feature-card.span-8, .feature-card.span-6 {
    grid-column: span 12;
}
}

/* ───────── SHOWCASE ───────── */
.showcase {
background: var(--primary-deep);
color: white;
overflow: hidden;
position: relative;
}
.showcase::before {
content: '';
position: absolute;
top: -200px; left: 50%; transform: translateX(-50%);
width: 1000px; height: 600px;
background: radial-gradient(ellipse, rgba(212, 175, 55, 0.18), transparent 65%);
pointer-events: none;
}
.showcase .section-head h2,
.showcase .section-head .eyebrow { color: white; }
.showcase .section-head .eyebrow { color: var(--accent); }
.showcase .section-head p { color: rgba(255,255,255,0.7); }
.showcase-track {
display: flex; gap: 32px;
justify-content: center;
align-items: flex-end;
flex-wrap: wrap;
}
.showcase-item {
text-align: center;
transition: transform .35s ease;
}
.showcase-item:hover { transform: translateY(-8px); }
.showcase-item .device { margin: 0 auto; }
.showcase-item .label {
margin-top: 22px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--accent);
}
.showcase-item .desc {
margin-top: 4px;
font-size: 14px;
color: rgba(255,255,255,0.6);
}
.showcase-item:nth-child(2) .device { transform: translateY(-30px); }
.showcase-item:nth-child(4) .device { transform: translateY(-30px); }

@media (max-width: 720px) {
.showcase-track {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
    padding-bottom: 20px;
    gap: 20px;
}
.showcase-item {
    flex-shrink: 0;
    scroll-snap-align: start;
}
.showcase-item .device { width: 200px; }
.showcase-item:nth-child(2) .device,
.showcase-item:nth-child(4) .device { transform: none; }
}

.label-no-top {
    margin-top: 0px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
}

@media (max-width: 720px) {
.label-no-top {
    margin-top: 22px;
}}

/* ───────── COUNTDOWN ───────── */
.countdown {
position: relative;
background: linear-gradient(180deg, #07314D 0%, #0B3C5D 60%, #0E4A73 100%);
color: white;
overflow: hidden;
padding: 120px 0;
}
.cd-bg {
position: absolute; inset: 0;
pointer-events: none;
z-index: 0;
}
.cd-grid {
position: absolute; inset: 0;
background-image:
    linear-gradient(rgba(212,175,55,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,0.06) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
}
.cd-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.55;
}
.cd-orb-1 {
top: -120px; left: 8%;
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(212,175,55,0.55), transparent 65%);
}
.cd-orb-2 {
bottom: -160px; right: 6%;
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(214,87,77,0.45), transparent 65%);
}
.cd-inner {
position: relative;
z-index: 1;
text-align: center;
}
.cd-pill {
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 16px;
border-radius: 999px;
background: rgba(212,175,55,0.12);
border: 1px solid rgba(212,175,55,0.35);
color: var(--accent);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 24px;
}
.cd-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 0 rgba(212,175,55,0.7);
animation: cd-pulse 2s ease-out infinite;
}
@keyframes cd-pulse {
0% { box-shadow: 0 0 0 0 rgba(212,175,55,0.7); }
100% { box-shadow: 0 0 0 14px rgba(212,175,55,0); }
}
.countdown h2 {
font-size: clamp(36px, 4.6vw, 60px);
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 18px;
color: white;
}
.countdown .lead {
color: rgba(255,255,255,0.72);
max-width: 620px;
margin: 0 auto;
}
.countdown .lead strong {
color: white;
font-weight: 700;
}

.cd-board {
margin: 56px auto 36px;
display: flex;
align-items: stretch;
justify-content: center;
gap: 14px;
flex-wrap: nowrap;
}
.cd-cell {
position: relative;
flex: 0 0 auto;
min-width: 156px;
padding: 28px 22px 22px;
border-radius: 22px;
background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%),
    rgba(7, 30, 48, 0.55);
border: 1px solid rgba(212,175,55,0.22);
box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 30px 60px -30px rgba(0,0,0,0.7);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
overflow: hidden;
}
.cd-cell::before {
content: '';
position: absolute;
top: 50%; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212,175,55,0.4), transparent);
transform: translateY(-22px);
}
.cd-digit {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: clamp(48px, 5.4vw, 76px);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
background: linear-gradient(180deg, #FFFFFF 0%, #FFE9A8 55%, #D4AF37 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
}
.cd-digit span {
display: inline-block;
transition: transform .35s cubic-bezier(.2,.9,.2,1), opacity .25s;
}
.cd-digit.cd-tick span {
animation: cd-flip .55s cubic-bezier(.2,.9,.2,1);
}
@keyframes cd-flip {
0% { transform: translateY(-40%); opacity: 0; }
60% { transform: translateY(6%); opacity: 1; }
100% { transform: translateY(0); opacity: 1; }
}
.cd-label {
margin-top: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.cd-sep {
align-self: center;
font-size: clamp(36px, 4vw, 56px);
font-weight: 800;
color: rgba(212,175,55,0.45);
line-height: 1;
padding: 0 4px;
user-select: none;
}

.cd-actions {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin-bottom: 36px;
}
.btn-ghost-light {
background: rgba(255,255,255,0.06);
color: white;
border: 1px solid rgba(255,255,255,0.18);
padding: 14px 24px;
border-radius: 10px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
transition: background .25s, border-color .25s, transform .25s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-ghost-light:hover {
background: rgba(255,255,255,0.12);
border-color: rgba(212,175,55,0.5);
transform: translateY(-1px);
}

.cd-meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px 28px;
color: rgba(255,255,255,0.6);
font-size: 13px;
}
.cd-meta-item {
display: inline-flex;
align-items: center;
gap: 8px;
}
.cd-meta-item svg {
color: var(--accent);
flex-shrink: 0;
}

@media (max-width: 720px) {
.countdown { padding: 88px 0; }
.cd-board { gap: 8px; }
.cd-cell { min-width: 0; flex: 1 1 0; padding: 22px 8px 16px; border-radius: 16px; }
.cd-sep { display: none; }
.cd-cell-secs { display: flex; }
.cd-label { font-size: 10px; letter-spacing: 0.16em; }
}
@media (max-width: 400px) {
.cd-digit { font-size: 32px; }
.cd-cell { padding: 16px 4px 12px; }
.cd-label { font-size: 8px; letter-spacing: 0.1em; }
}

/* ───────── PRICING ───────── */
.pricing {
background: var(--bg);
}
.price-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 880px) {
.price-grid { grid-template-columns: 1fr; }
.price-card.featured { transform: none; }
.price-card.featured:hover { transform: translateY(-4px); }
}

.price-card {
background: white;
border-radius: var(--radius-lg);
padding: 40px 36px;
border: 1px solid var(--line);
position: relative;
transition: transform .3s, box-shadow .3s;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price-card.featured {
background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
border: 0;
box-shadow: var(--shadow-lg);
transform: translateY(-12px);
}
.price-card.featured:hover { transform: translateY(-16px); }
.price-card.featured h3,
.price-card.featured .price { color: white; }
.price-card.featured p { color: rgba(255,255,255,0.7); }
.price-card.featured ul li { color: rgba(255,255,255,0.85); }
.price-card.featured .feat-check { color: var(--accent); }

.price-tag {
display: inline-block;
padding: 4px 12px;
border-radius: 100px;
font-size: 11px; font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
margin-bottom: 18px;
}
.price-tag.free { background: var(--bg-tint); color: var(--ink-mid); }
.price-tag.popular {
background: var(--accent);
color: var(--primary-dark);
}
.price-tag.business { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.15); }
.price-card h3 { margin-bottom: 6px; font-size: 22px; }
.price-card p { font-size: 14px; margin-bottom: 28px; }

.price {
display: flex; align-items: baseline; gap: 4px;
margin-bottom: 28px;
font-size: 56px; font-weight: 800;
letter-spacing: -0.04em;
color: var(--ink);
line-height: 1;
}
.price small {
font-size: 15px; font-weight: 500;
color: var(--ink-mid);
letter-spacing: 0;
}
.price-card.featured .price small { color: rgba(255,255,255,0.6); }
.price-card ul {
list-style: none; padding: 0; margin: 0 0 32px;
display: grid; gap: 14px;
}
.price-card ul li {
display: flex; align-items: center; gap: 12px;
font-size: 14px; color: var(--ink-mid);
}
.feat-check {
flex-shrink: 0;
width: 18px; height: 18px;
color: var(--success);
}
.price-card .btn { width: 100%; }
.price-card.featured .btn-primary { box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4); }

/* ───────── FAQ ───────── */
.faq { background: var(--bg-tint); }
.faq-grid {
max-width: 820px;
margin: 0 auto;
display: grid; gap: 14px;
}
.faq-item {
background: white;
border-radius: var(--radius);
border: 1px solid var(--line);
overflow: hidden;
transition: border-color .2s;
}
.faq-item[open] { border-color: var(--accent); }
.faq-item summary {
list-style: none;
padding: 22px 28px;
cursor: pointer;
font-weight: 700;
font-size: 16px;
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--bg-tint);
display: grid; place-items: center;
flex-shrink: 0;
transition: transform .25s, background .2s;
color: var(--ink-mid);
}
.faq-item[open] summary .plus {
transform: rotate(45deg);
background: var(--accent);
color: var(--primary-dark);
}
.faq-item .faq-body {
padding: 0 28px 24px;
color: var(--ink-mid);
font-size: 15px;
line-height: 1.7;
}

/* ───────── DOWNLOAD CTA ───────── */
.cta {
background: var(--primary);
color: white;
position: relative;
overflow: hidden;
}
.cta::before {
content: '';
position: absolute;
bottom: -200px; right: -100px;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(212, 175, 55, 0.3), transparent 65%);
pointer-events: none;
}
.cta-inner {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 60px;
align-items: center;
position: relative;
}
@media (max-width: 880px) { .cta-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; } }
.cta h2 {
color: white;
margin-bottom: 20px;
}
.cta h2 .accent {
background: linear-gradient(120deg, var(--accent), var(--accent-light));
-webkit-background-clip: text; background-clip: text; color: transparent;
font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
}
.cta p { color: rgba(255,255,255,0.75); font-size: 18px; margin-bottom: 32px; max-width: 540px; }
@media (max-width: 880px) { .cta p { margin-left: auto; margin-right: auto; } }
.store-row { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 880px) { .store-row { justify-content: center; } }
.store-btn {
display: inline-flex; align-items: center; gap: 12px;
padding: 12px 22px;
border-radius: 14px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.18);
color: white;
font-weight: 600;
transition: background .2s, transform .2s;
backdrop-filter: blur(12px);
}
.store-btn:hover { background: rgba(255,255,255,0.14); transform: translateY(-2px); }
.store-btn img { width: 28px; height: 28px; }
.store-btn .store-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-btn .store-text small { font-size: 10px; opacity: 0.7; letter-spacing: 1px; text-transform: uppercase; }
.store-btn .store-text strong { font-size: 16px; font-weight: 700; }

.cta-phone {
display: flex; justify-content: center;
position: relative;
}

/* ───────── KPI strip ───────── */
.kpi-strip {
padding: 80px 0;
background: var(--bg);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
@media (max-width: 720px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; } }
.kpi {
text-align: left;
padding-left: 24px;
border-left: 2px solid var(--accent);
}
.kpi-num {
font-size: 48px;
font-weight: 800;
letter-spacing: -0.04em;
color: var(--ink);
line-height: 1;
font-family: 'Fraunces', 'Plus Jakarta Sans', serif;
font-style: italic;
font-weight: 400;
}
.kpi-label {
margin-top: 8px;
font-size: 13px;
color: var(--ink-mid);
letter-spacing: -0.005em;
}