/* Velum VPN — Modern split-hero design system
* Based on Claude Design handoff bundle
*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root {
--bg: #0B1220;
--bg-deep: #070B16;
--surface: #121A2C;
--surface2: #1B253E;
--border: #1E2A44;
--border-soft:#172339;
--accent: #3B82F6;
--accent-hv: #2563EB;
--accent-2: #60A5FA;
--text: #F1F5F9;
--muted: #94A3B8;
--muted-2: #64748B;
--success: #22C55E;
--error: #EF4444;
--radius: 14px;
--radius-pill:999px;
}
body {
position: relative;
min-height: 100vh;
background:
radial-gradient(1100px 700px at 80% 30%, rgba(59,130,246,.18), transparent 60%),
radial-gradient(800px 600px at 5% 10%, rgba(37,99,235,.10), transparent 60%),
linear-gradient(180deg, #0B1220 0%, #070B16 100%);
color: var(--text);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.55;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
a { color: var(--text); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-2); }
/* ── NAV ──────────────────────────────────────────── */
nav {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1240px;
width: 100%;
margin: 0 auto;
padding: 1.1rem 2rem;
gap: 2.5rem;
position: sticky;
top: 0;
z-index: 10;
background: rgba(11, 18, 32, .85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-soft);
}
.logo {
display: flex;
align-items: center;
gap: .55rem;
font: 700 1.15rem 'Inter', sans-serif;
color: var(--text);
letter-spacing: -.02em;
cursor: pointer;
}
.logo-mark {
width: 28px; height: 28px;
border-radius: 8px;
display: grid;
place-items: center;
background: #01ABEA;
box-shadow: 0 6px 16px -4px rgba(1,171,234,.5);
position: relative;
}
/* Hide the raw ![]()
— we paint the V via CSS mask instead so we control its color */
.logo-mark img { display: none; }
.logo-mark::after {
content: '';
width: 78%; height: 78%;
background: #fff;
-webkit-mask: url('/static/velum-mark.svg') center / contain no-repeat;
mask: url('/static/velum-mark.svg') center / contain no-repeat;
}
.logo-mark svg {
width: 16px; height: 16px;
stroke: #fff; stroke-width: 2.2; fill: none;
stroke-linecap: round; stroke-linejoin: round;
}
.logo sup { font-size: .7em; color: var(--muted); margin-left: 1px; font-weight: 500; }
.nav-links { display: flex; align-items: center; gap: .4rem; }
/* ── BUTTONS ──────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .45rem;
padding: .65rem 1.3rem;
border-radius: var(--radius-pill);
font: 600 .9rem 'Inter', sans-serif;
cursor: pointer;
border: none;
transition: background .15s, transform .12s;
white-space: nowrap;
letter-spacing: -.005em;
text-decoration: none;
font-family: inherit;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hv); color: #fff; }
.btn-outline {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
}
.btn-outline:hover { background: rgba(148,163,184,.08); }
.btn-ghost {
background: rgba(148,163,184,.08);
color: var(--text);
border: 1px solid var(--border);
}
.btn-ghost:hover { background: rgba(148,163,184,.14); }
.btn-quiet { background: transparent; color: var(--text); padding: .55rem .95rem; }
.btn-quiet:hover { color: var(--accent-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-full { width: 100%; }
.btn-sm { padding: .5rem 1rem; font-size: .85rem; }
.btn-lg { padding: .95rem 2rem; font-size: 1rem; }
/* ── IP BAR ───────────────────────────────────────── */
.ip-bar {
padding: .45rem 1rem;
text-align: center;
background: rgba(7,11,22,.6);
border-bottom: 1px solid var(--border-soft);
font: 500 .78rem 'Inter', sans-serif;
color: var(--muted);
display: flex;
align-items: center;
justify-content: center;
gap: .55rem;
flex-wrap: wrap;
}
.ip-bar b { color: var(--text); font-weight: 600; }
.ip-bar .sep { color: var(--muted-2); }
.ip-bar .warn { color: #FCA5A5; }
.ip-bar .warn::before { content: '·'; margin-right: .55rem; color: var(--muted-2); }
/* ── SPLIT HERO ───────────────────────────────────── */
.hero {
max-width: 1240px;
margin: 0 auto;
padding: 3.5rem 2rem 4rem;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 3rem;
align-items: center;
min-height: 560px;
}
.hero-left h1 {
font: 700 clamp(2.2rem, 4.5vw, 3.3rem)/1.1 'Inter', sans-serif;
letter-spacing: -.025em;
margin-bottom: 1.25rem;
}
.hero-left h1 span { color: var(--accent-2); }
.hero-status {
display: inline-flex;
align-items: center;
gap: .5rem;
background: rgba(15,23,42,.6);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: .4rem .85rem .4rem .55rem;
font: 500 .82rem 'Inter', sans-serif;
margin-bottom: 1.75rem;
white-space: nowrap;
}
.hero-status .dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E;
box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulseDot 2s infinite; }
@keyframes pulseDot { 0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.6)} 50%{box-shadow:0 0 0 6px rgba(34,197,94,0)} }
.hero-status .meta { color: var(--muted); font-weight: 400; margin-left: .4rem;
border-left: 1px solid var(--border); padding-left: .7rem; }
.hero-left p {
font: 400 1.02rem/1.6 'Inter', sans-serif;
color: var(--muted);
max-width: 480px;
margin-bottom: 2rem;
}
.hero-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.trust-mini {
display: inline-flex;
align-items: center;
gap: .5rem;
font: 500 .85rem 'Inter', sans-serif;
color: var(--muted);
}
.trust-mini svg { width: 16px; height: 16px; stroke: var(--accent); stroke-width: 2; fill: none; }
/* Hero right — phone composition */
.hero-right { position: relative; height: 520px; display: grid; place-items: center; }
.hero-glow {
position: absolute;
width: 380px; height: 380px;
border-radius: 50%;
background: radial-gradient(circle, rgba(59,130,246,.45), transparent 65%);
filter: blur(40px);
z-index: 0;
animation: glowFloat 6s ease-in-out infinite alternate;
}
@keyframes glowFloat { from{transform:translateY(-8px) scale(1)} to{transform:translateY(8px) scale(1.05)} }
.phone-mock {
position: relative;
width: 280px; height: 560px;
border: 8px solid #0B2231;
border-radius: 48px;
background: #0B2231;
box-shadow:
0 30px 60px -20px rgba(0,0,0,.45),
0 12px 30px -12px rgba(59,130,246,.4),
inset 0 1px 0 rgba(255,255,255,.4);
z-index: 2;
overflow: hidden;
}
.phone-notch {
position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
width: 90px; height: 22px; background: #0B2231; border-radius: 14px; z-index: 5;
}
/* ── Velum App screen ─────────────────────────────── */
.app-screen {
position: absolute; inset: 0;
padding: 42px 16px 0;
display: flex; flex-direction: column;
background: linear-gradient(180deg, #1AB2EE 0%, #0FA9E9 60%, #01ABEA 100%);
transition: background .9s ease;
}
.app-screen.is-on {
background: linear-gradient(180deg, #27BAEE 0%, #01ABEA 55%, #0093CC 100%);
}
/* App header */
.app-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
padding: 6px 4px 0;
}
.app-title strong {
display: block; font: 800 17px/1.1 'Inter', sans-serif; color: #fff; letter-spacing: -.01em;
}
.app-title small {
display: block; font: 500 11px/1.2 'Inter', sans-serif;
color: rgba(255,255,255,.85); margin-top: 3px;
transition: opacity .35s ease;
}
.app-avatar {
width: 30px; height: 30px; border-radius: 50%;
background: rgba(255,255,255,.22);
display: grid; place-items: center; color: #fff;
border: 1px solid rgba(255,255,255,.2);
}
/* Power button + rings */
.app-power-wrap {
position: relative;
width: 120px; height: 120px;
margin: 42px auto 18px;
display: grid; place-items: center;
}
.app-rings {
position: absolute; inset: -22px;
display: grid; place-items: center;
pointer-events: none;
}
.app-rings .ring {
position: absolute; border-radius: 50%;
border: 1.4px solid rgba(255,255,255,.55);
width: 100%; height: 100%;
opacity: 0; transform: scale(.6);
transition: opacity .4s ease;
}
.app-screen.is-on .app-rings .ring {
opacity: 1;
animation: ringPulse 2.4s ease-out infinite;
}
.app-screen.is-on .app-rings .ring.r2 { animation-delay: .8s; }
.app-screen.is-on .app-rings .ring.r3 { animation-delay: 1.6s; }
@keyframes ringPulse {
0% { transform: scale(.55); opacity: .7; }
70% { transform: scale(1.15); opacity: .18; }
100% { transform: scale(1.35); opacity: 0; }
}
.app-power {
position: relative; z-index: 2;
width: 104px; height: 104px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #FFFFFF 0%, #E9F7FF 60%, #CFEEFB 100%);
color: #0FA9E9;
display: grid; place-items: center;
box-shadow:
0 12px 28px -8px rgba(0,0,0,.25),
inset 0 -3px 8px rgba(0,120,170,.18),
inset 0 2px 0 rgba(255,255,255,.9);
transition: transform .5s cubic-bezier(.25,1.4,.45,1), background .5s ease, color .5s ease, box-shadow .5s ease;
}
.app-screen.is-on .app-power {
background: radial-gradient(circle at 35% 30%, #7DDBFD 0%, #1AB2EE 65%, #0093CC 100%);
color: #fff;
box-shadow:
0 14px 30px -6px rgba(0,80,120,.45),
0 0 0 6px rgba(255,255,255,.18),
inset 0 -3px 8px rgba(0,80,120,.3),
inset 0 2px 0 rgba(255,255,255,.45);
transform: scale(1.04);
}
/* Status badge */
.app-badge {
align-self: center;
display: inline-flex; align-items: center; gap: 7px;
background: #fff;
border: 1px solid rgba(255,255,255,.6);
border-radius: 11px;
padding: 8px 13px;
font: 600 12.5px/1 'Inter', sans-serif;
color: #1F3A4D;
box-shadow: 0 6px 16px -8px rgba(0,40,70,.25);
transition: background .35s ease, color .35s ease;
white-space: nowrap;
}
.app-badge.on { background: #E9F7EE; color: #1F6B3A; }
/* Bottom sheet */
.app-sheet {
margin-top: auto;
background: #FFFFFF;
border-top-left-radius: 20px; border-top-right-radius: 20px;
padding: 16px 14px 14px;
display: flex; flex-direction: column; gap: 11px;
margin-left: -16px; margin-right: -16px;
}
.app-traffic {
background: #F2FAFD; border: 1px solid #DEF1F9; border-radius: 13px;
padding: 12px 14px;
}
.app-traffic .t-val {
font: 700 16px/1.1 'Inter', sans-serif; color: #01ABEA; letter-spacing: -.01em;
}
.app-traffic .t-lbl {
font: 500 11.5px 'Inter', sans-serif; color: #6B7B86; margin-top: 3px;
}
.app-loc {
display: flex; align-items: center; gap: 11px;
border: 1px solid #E1ECF3; border-radius: 13px;
padding: 9px 12px; background: #fff;
}
.app-loc .flag {
width: 24px; height: 17px; border-radius: 3px; overflow: hidden;
display: flex; flex-direction: column; flex: none;
box-shadow: 0 0 0 1px rgba(0,0,0,.05);
}
.app-loc .flag span { flex: 1; display: block; }
.app-loc .loc-l { flex: 1; min-width: 0; line-height: 1.1; }
.app-loc .loc-l strong {
display: block; font: 700 13px 'Inter', sans-serif; color: #1F3A4D;
}
.app-loc .loc-l small {
display: block; font: 500 11px 'Inter', sans-serif; color: #7B8A93; margin-top: 2px;
}
.app-loc .chev { color: #7B8A93; flex: none; }
.app-actions { display: flex; gap: 9px; }
.app-btn {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
border-radius: 12px; padding: 10px 6px;
font: 600 12.5px 'Inter', sans-serif;
background: #F2FAFD; color: #01ABEA;
border: 1px solid #DEF1F9;
white-space: nowrap; min-width: 0;
}
.app-btn--primary { background: #01ABEA; color: #fff; border-color: #01ABEA; }
/* Floating bubbles */
.bubble {
position: absolute; border-radius: 50%; display: grid; place-items: center;
box-shadow: 0 20px 40px -10px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
z-index: 3;
/* `backwards` makes the bubble pre-render the `from` keyframe during
animation-delay; otherwise it sits at translateY(0) until the delay
expires and then snaps to translateY(-6px), which reads as a jitter. */
animation: floatY 5s ease-in-out infinite alternate backwards;
}
.bubble svg { width: 60%; height: 60%; }
.bubble.b1 { width: 62px; height: 62px; top: 8%; left: 18%; background: #000; animation-delay: .3s; }
.bubble.b2 { width: 58px; height: 58px; top: 24%; left: 6%; background: #fff; animation-delay: .6s; }
.bubble.b3 { width: 64px; height: 64px; top: 6%; right: 10%; background: #229ED9; animation-delay: 0s; }
.bubble.b4 { width: 54px; height: 54px; top: 36%; right: 0; background: #fff; animation-delay: .9s; }
.bubble.b5 { width: 62px; height: 62px; bottom: 18%; left: 4%; background: #1ED760; animation-delay: .4s; }
.bubble.b6 { width: 64px; height: 64px; bottom: 8%; right: 12%; background: #FF0000; animation-delay: .7s; }
@keyframes floatY { from{transform:translateY(-6px)} to{transform:translateY(8px)} }
.spark {
position: absolute; color: #fff; opacity: .7; font-weight: 700; font-size: 14px;
text-shadow: 0 0 12px rgba(255,255,255,.6); pointer-events: none;
animation: twinkle 2.5s ease-in-out infinite;
}
.spark.s1 { top: 6%; left: 35%; animation-delay: 0s; }
.spark.s2 { top: 42%; right: 20%; animation-delay: .7s; }
.spark.s3 { bottom: 30%; right: 8%; animation-delay: 1.3s; font-size: 18px; }
.spark.s4 { bottom: 12%; left: 35%; animation-delay: 1.8s; }
@keyframes twinkle { 0%,100%{opacity:.3;transform:scale(.8)} 50%{opacity:1;transform:scale(1.1)} }
/* ── FEATURE ROW ──────────────────────────────────── */
.feat-row {
max-width: 1240px;
margin: 0 auto;
padding: 0 2rem 5rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.feat-card {
position: relative;
background: rgba(15,23,42,.5);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem 1.5rem 1.75rem;
transition: border-color .2s, transform .2s;
}
.feat-card:hover { border-color: rgba(59,130,246,.3); transform: translateY(-2px); }
.feat-card .ic {
width: 34px; height: 34px; border-radius: 8px;
background: rgba(59,130,246,.12);
display: grid; place-items: center; margin-bottom: .85rem;
}
.feat-card .ic svg {
width: 18px; height: 18px; stroke: var(--accent-2);
stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.feat-card h3 { font: 600 1.05rem 'Inter', sans-serif; letter-spacing: -.01em; margin-bottom: .35rem; }
.feat-card p { font: 400 .88rem/1.55 'Inter', sans-serif; color: var(--muted); }
/* ── PLANS SECTION ────────────────────────────────── */
.section-head {
text-align: center;
max-width: 720px;
margin: 0 auto 2.5rem;
padding: 0 2rem;
}
.section-head .kicker {
font: 600 .75rem 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: .14em;
color: var(--accent-2);
margin-bottom: .7rem;
}
.section-head h2 {
font: 700 2rem/1.15 'Inter', sans-serif;
letter-spacing: -.02em;
margin-bottom: .5rem;
}
.section-head p { color: var(--muted); }
.plans-section { max-width: 1100px; margin: 0 auto 5rem; padding: 0 2rem; }
.plans-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
}
.plan-card {
background: rgba(15,23,42,.5);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.75rem;
display: flex; flex-direction: column; gap: .75rem;
transition: border-color .2s, transform .2s;
position: relative;
}
.plan-card:hover { transform: translateY(-2px); }
.plan-card.popular { border-color: var(--accent); background: rgba(59,130,246,.06); }
.badge-popular {
align-self: flex-start;
padding: .25rem .65rem;
background: var(--accent); color: #fff;
font: 600 .7rem 'Inter', sans-serif;
letter-spacing: .06em; text-transform: uppercase;
border-radius: var(--radius-pill);
}
.plan-name {
font: 500 .82rem 'Inter', sans-serif;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .1em;
}
.plan-price { display: flex; align-items: baseline; gap: .3rem; }
.plan-price .big { font: 700 2.4rem 'Inter', sans-serif; letter-spacing: -.02em; }
.plan-price .unit { color: var(--muted); font-weight: 500; }
.plan-desc { font-size: .9rem; color: var(--muted); min-height: 2.6em; }
.plan-features {
list-style: none; display: flex; flex-direction: column; gap: .5rem;
font: 400 .9rem 'Inter', sans-serif; color: #CBD5E1; flex: 1; padding: .5rem 0 1rem;
}
.plan-features li { display: flex; align-items: center; gap: .55rem; }
.plan-features li svg { width: 14px; height: 14px; stroke: var(--accent); stroke-width: 2.4; fill: none; flex: none; }
/* ── FORMS ────────────────────────────────────────── */
.form-card {
max-width: 430px;
margin: 4rem auto;
background: rgba(15,23,42,.6);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2.25rem 2rem;
box-shadow: 0 30px 70px -30px rgba(0,0,0,.7);
width: 100%;
}
.form-card h2 {
font: 700 1.55rem 'Inter', sans-serif;
letter-spacing: -.02em;
margin-bottom: .3rem;
}
.form-sub { color: var(--muted); margin-bottom: 1.5rem; font-size: .92rem; }
.field { margin-bottom: .95rem; }
.field label {
display: block;
font: 500 .8rem 'Inter', sans-serif;
color: var(--muted);
margin-bottom: .4rem;
}
.field input {
width: 100%;
background: rgba(7,11,22,.7);
border: 1px solid var(--border);
border-radius: 10px;
padding: .75rem .9rem;
color: var(--text);
font: 400 .95rem 'Inter', sans-serif;
outline: none;
transition: .15s;
}
.field input:hover { border-color: rgba(148,163,184,.3); }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.form-footer { margin-top: 1.25rem; text-align: center; color: var(--muted); font-size: .87rem; }
.form-footer a { color: var(--accent-2); }
.form-footer a:hover { color: var(--accent); }
/* ── OR DIVIDER + GOOGLE BUTTON ──────────────────── */
.or-divider {
display: flex; align-items: center; gap: .75rem;
margin: 1.25rem 0;
color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
}
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* Custom Google sign-in button (visible) + GSI overlay (invisible, captures clicks) */
.google-btn-wrap {
position: relative;
width: 100%;
height: 44px;
/* Google GSI renders an overlay click-target that's bigger than its visible
button (300×150 by default) — clip it so it can't intercept clicks on the
"Войти" / "Создать" links rendered below. */
overflow: hidden;
}
.google-custom-btn {
width: 100%; height: 100%;
display: inline-flex; align-items: center; justify-content: center;
gap: .6rem;
background: #fff;
border: 1.5px solid #DCE7EE;
border-radius: 999px;
font: 600 .92rem 'Inter', sans-serif;
color: #0B2231;
cursor: pointer;
transition: .15s;
padding: 0 1.25rem;
white-space: nowrap;
}
.google-custom-btn:hover {
border-color: #01ABEA;
background: #F8FCFE;
}
.google-custom-btn svg { flex: none; }
.google-gsi-overlay {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0;
cursor: pointer;
}
.google-gsi-overlay > div { width: 100% !important; height: 100%; }
.google-gsi-overlay iframe { width: 100% !important; height: 100% !important; }
/* ── ALERTS ───────────────────────────────────────── */
.alert {
padding: .7rem .95rem;
border-radius: 10px;
font-size: .87rem;
margin-bottom: 1rem;
display: none;
align-items: center;
gap: .5rem;
}
.alert-error { background: rgba(239,68,68,.1); color: #FCA5A5; border: 1px solid rgba(239,68,68,.25); }
.alert-success { background: rgba(34,197,94,.1); color: #86EFAC; border: 1px solid rgba(34,197,94,.25); }
/* Email sent state (register / forgot-password) */
.sent-state { text-align: center; padding: 1rem 0; }
.sent-icon {
width: 60px; height: 60px; margin: 0 auto 1.25rem;
border-radius: 50%;
background: rgba(59,130,246,.12);
border: 1px solid rgba(59,130,246,.25);
display: grid; place-items: center;
}
.sent-icon svg { width: 26px; height: 26px; stroke: var(--accent-2); stroke-width: 1.8; fill: none; }
/* ── DASHBOARD ────────────────────────────────────── */
.dashboard {
max-width: 920px;
margin: 2.5rem auto 4rem;
padding: 0 2rem;
width: 100%;
}
.dash-head {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 2rem;
flex-wrap: wrap;
gap: 1rem;
}
.dash-head h1 {
font: 700 1.85rem 'Inter', sans-serif;
letter-spacing: -.025em;
}
.dash-head .sub { color: var(--muted); font-size: .92rem; margin-top: .2rem; }
.card {
background: rgba(15,23,42,.5);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
margin-bottom: 1rem;
transition: border-color .2s;
}
.card:hover { border-color: rgba(59,130,246,.2); }
.card-title {
font: 600 .72rem 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--muted);
margin-bottom: 1.1rem;
display: flex; align-items: center; gap: .5rem;
}
.card-title svg { width: 13px; height: 13px; stroke: var(--accent-2); stroke-width: 2; fill: none; }
/* Stats grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .85rem;
}
.stat-tile {
background: rgba(7,11,22,.5);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem 1.1rem;
transition: border-color .2s;
}
.stat-tile:hover { border-color: rgba(59,130,246,.25); }
.stat-tile .ic {
width: 30px; height: 30px; border-radius: 7px;
background: rgba(59,130,246,.12);
display: grid; place-items: center; margin-bottom: .65rem;
}
.stat-tile .ic svg { width: 15px; height: 15px; stroke: var(--accent-2); stroke-width: 1.8; fill: none; }
.stat-tile .label { font: 500 .72rem 'Inter', sans-serif; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .35rem; }
.stat-tile .value { font: 700 1.3rem 'Inter', sans-serif; letter-spacing: -.02em; }
.stat-tile .hint { font: 400 .72rem 'Inter', sans-serif; color: var(--muted-2); margin-top: .2rem; }
.stat-tile .bar { margin-top: .55rem; height: 4px; background: rgba(148,163,184,.1); border-radius: 99px; overflow: hidden; }
.stat-tile .bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 99px; transition: width .8s; }
/* Telegram status */
.tg-status { display: flex; align-items: center; gap: .55rem; font: 500 .92rem 'Inter', sans-serif; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-green { background: var(--success); box-shadow: 0 0 0 4px rgba(34,197,94,.15); }
.dot-grey { background: var(--muted-2); }
.flex-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem; }
/* Connect button */
.btn-connect {
display: flex;
align-items: center;
justify-content: center;
gap: .6rem;
width: 100%;
padding: 1.1rem;
margin: .25rem 0 1rem;
background: var(--accent);
color: #fff;
font: 600 1rem 'Inter', sans-serif;
letter-spacing: -.005em;
border-radius: var(--radius);
border: none;
cursor: pointer;
text-decoration: none;
transition: .15s;
}
.btn-connect:hover { background: var(--accent-hv); transform: translateY(-1px); color: #fff; }
.btn-connect svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2.4; fill: none; }
/* ── UPGRADE — comparison + plan selector ────────── */
#upgrade-section {
background: rgba(15,23,42,.5);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.5rem;
margin-bottom: 1rem;
}
.compare-table {
margin: 1rem 0 1.5rem;
border-radius: 12px;
overflow: hidden;
background: rgba(7,11,22,.4);
border: 1px solid var(--border);
width: 100%;
}
.cmp-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 5.5rem 6.5rem;
border-bottom: 1px solid var(--border-soft);
}
.cmp-row:last-child { border-bottom: none; }
.cmp-cell { padding: .75rem .9rem; display: flex; align-items: center; font-size: .9rem; }
.cmp-label { color: #CBD5E1; }
.cmp-free { justify-content: center; color: var(--muted); }
.cmp-free-header, .cmp-pro-header {
justify-content: center;
padding: .85rem 0;
font: 600 .76rem 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: .08em;
}
.cmp-free-header { color: var(--muted); }
.cmp-pro-header { background: rgba(59,130,246,.12); border-left: 1px solid rgba(59,130,246,.2); }
.cmp-pro {
background: rgba(59,130,246,.04);
justify-content: center;
font-weight: 600;
border-left: 1px solid rgba(59,130,246,.12);
}
.cmp-cross { opacity: .4; }
.cmp-cross svg, .cmp-check svg { width: 16px; height: 16px; stroke-width: 2.2; fill: none; }
.cmp-cross svg { stroke: var(--muted-2); }
.cmp-check svg { stroke: var(--accent); }
.badge-pro {
display: inline-flex; align-items: center; gap: .3rem;
background: var(--accent); color: #fff;
font: 700 .7rem 'Inter', sans-serif;
padding: .22rem .6rem; border-radius: var(--radius-pill);
letter-spacing: .06em; text-transform: uppercase;
}
/* Plan duration selector */
.plan-selector {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .6rem;
margin-bottom: 1.25rem;
}
.plan-option {
background: rgba(7,11,22,.4);
border: 1.5px solid var(--border);
border-radius: 12px;
padding: .95rem;
cursor: pointer;
transition: .15s;
position: relative;
display: flex; flex-direction: column; gap: .25rem;
}
.plan-option:hover { border-color: rgba(59,130,246,.3); }
.plan-option.selected { border-color: var(--accent); background: rgba(59,130,246,.08); }
.plan-option.selected::after {
content: ''; position: absolute; top: 9px; right: 9px;
width: 14px; height: 14px; border-radius: 50%; background: var(--accent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='m4 7 2 2 4-4' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size: contain;
}
.plan-option-name { font: 600 .92rem 'Inter', sans-serif; }
.plan-option-hint { font: 500 .68rem 'Inter', sans-serif; color: #86EFAC; text-transform: uppercase; letter-spacing: .06em; }
.plan-option.selected .plan-option-hint { color: var(--accent-2); }
.plan-option-price { display: flex; align-items: baseline; gap: .25rem; margin-top: .2rem; }
.plan-option-price .big { font: 700 1.05rem 'Inter', sans-serif; letter-spacing: -.02em; }
.plan-option-price small { font-size: .7rem; color: var(--muted); }
/* Payment-method selector */
.method-selector {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .5rem;
margin-bottom: 1rem;
}
.method-option {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: var(--surface2);
border: 1.5px solid var(--border);
border-radius: 12px;
padding: .7rem .5rem;
cursor: pointer;
font-size: .85rem;
font-weight: 600;
color: var(--text);
transition: border-color .15s, background .15s;
user-select: none;
}
.method-option:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.method-option.selected {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, var(--surface2));
}
.btn-buy {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
width: 100%;
padding: 1rem;
background: var(--accent);
color: #fff;
font: 600 .95rem 'Inter', sans-serif;
border-radius: 12px;
border: none;
cursor: pointer;
transition: .15s;
margin-bottom: .7rem;
}
.btn-buy:hover { background: var(--accent-hv); transform: translateY(-1px); }
.btn-buy:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.compare-hint { text-align: center; color: var(--muted-2); font-size: .78rem; }
/* ── FOOTER ───────────────────────────────────────── */
footer {
margin-top: 5rem;
padding: 2.5rem 2rem;
border-top: 1px solid var(--border-soft);
color: var(--muted-2);
font-size: .85rem;
max-width: 1240px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.footer-bar {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 1rem 1.75rem;
}
.footer-copy {
font: 400 .85rem 'Inter', sans-serif;
color: var(--muted);
}
.footer-bar-right {
display: flex; align-items: center;
gap: .5rem 1.75rem; flex-wrap: wrap;
}
.footer-links { display: flex; gap: 1.25rem; }
.footer-links a {
color: var(--muted);
font: 500 .87rem 'Inter', sans-serif;
transition: .15s;
}
.footer-links a:hover { color: var(--accent-2); }
.footer-contacts {
display: flex; align-items: center;
gap: .35rem; flex-wrap: wrap;
}
.footer-contact {
display: inline-flex; align-items: center; gap: .55rem;
padding: .4rem .7rem;
border-radius: 999px;
font: 500 .85rem 'Inter', sans-serif;
color: var(--muted);
transition: .15s;
}
.footer-contact:hover {
color: var(--accent-2);
background: rgba(96,165,250,.08);
}
.footer-contact-icon {
width: 24px; height: 24px;
border-radius: 7px;
display: grid; place-items: center;
background: rgba(96,165,250,.1);
color: var(--accent-2);
flex: none;
}
.footer-contact-icon svg { width: 13px; height: 13px; }
.footer-status {
display: inline-flex; align-items: center; gap: .5rem;
font: 500 .82rem 'Inter', sans-serif;
color: var(--muted);
flex-basis: 100%;
padding-top: 1rem;
margin-top: .5rem;
border-top: 1px solid var(--border-soft);
justify-content: center;
}
.footer-status .dot {
width: 7px; height: 7px; border-radius: 50%;
background: #34C759;
box-shadow: 0 0 0 0 rgba(52,199,89,.55);
animation: pulseDot 2s infinite;
flex: none;
}
/* ── LANG DROPDOWN ────────────────────────────────── */
.lang-dropdown { position: relative; }
.lang-dropdown-trigger {
width: 36px; height: 36px; border-radius: 50%;
display: grid; place-items: center;
background: transparent; border: none;
color: var(--muted); cursor: pointer; transition: .15s;
}
.lang-dropdown-trigger:hover { background: rgba(148,163,184,.08); color: var(--text); }
.lang-dropdown-trigger svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.lang-caret, #lang-flag, #lang-code { display: none; }
.lang-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 6px);
right: 0;
background: rgba(11,18,32,.95);
backdrop-filter: blur(14px);
border: 1px solid var(--border);
border-radius: 10px;
padding: .3rem;
min-width: 160px;
z-index: 100;
box-shadow: 0 12px 40px rgba(0,0,0,.5);
flex-direction: column;
gap: .1rem;
}
.lang-dropdown.open .lang-dropdown-menu { display: flex; }
.lang-btn {
display: flex; align-items: center;
background: transparent; border: none;
color: var(--muted); border-radius: 7px;
padding: .5rem .65rem;
font: 500 .85rem 'Inter', sans-serif;
cursor: pointer; text-align: left; width: 100%;
transition: .12s;
}
.lang-btn:hover { background: rgba(148,163,184,.08); color: var(--text); }
.lang-btn.active { color: var(--accent-2); background: rgba(59,130,246,.1); }
.lang-flag { font-size: 1rem; line-height: 1; margin-right: .35rem; }
/* RTL */
[dir="rtl"] .nav-links { flex-direction: row-reverse; }
[dir="rtl"] .flex-between { flex-direction: row-reverse; }
[dir="rtl"] .plan-option { flex-direction: row-reverse; }
[dir="rtl"] .compare-table { direction: rtl; }
/* ── UTILS ────────────────────────────────────────── */
.text-muted { color: var(--muted); font-size: .9rem; }
.mt1 { margin-top: .5rem; }
.mt2 { margin-top: 1rem; }
.hidden { display: none !important; }
/* ── MOBILE ───────────────────────────────────────── */
@media (max-width: 900px) {
.hero-left h1 { font-size: 2rem; }
.hero-left p { margin-left: auto; margin-right: auto; }
.hero-actions { justify-content: center; }
.feat-row { grid-template-columns: 1fr; }
nav { padding: .9rem 1.25rem; gap: 1rem; }
.stats-grid, .plan-selector { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
nav, body.light-landing nav { padding: .7rem 1rem; gap: .5rem; }
.logo { font-size: 1.05rem; gap: .5rem; }
.logo-mark img { width: 26px; height: 26px; }
.logo sup { display: none; }
/* Hide center nav and right-side links — replaced by hamburger drawer */
.nav-center, .nav-links { display: none !important; }
.nav-hamburger { display: grid; }
#user-email { display: none; }
.hero-left h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
.hero-actions { flex-direction: column; align-items: stretch; }
.hero-status {
font-size: .78rem;
padding: .35rem .85rem .35rem .55rem;
}
.hero-status .meta { display: none; }
.plans-section { padding: 0 1rem; margin-bottom: 3rem; }
.plans-grid { grid-template-columns: 1fr; }
.form-card { width: auto; margin: 1.5rem 1rem; padding: 1.75rem 1.25rem; }
.dashboard { margin: 1.5rem auto; padding: 0 1rem; }
.dash-head h1 { font-size: 1.5rem; }
.card { padding: 1.1rem; }
.cmp-row { grid-template-columns: minmax(0, 1fr) 5rem 5.5rem; }
.cmp-cell { padding: .55rem .4rem; font-size: .82rem; }
.btn-connect { font-size: .95rem; padding: .95rem; }
#upgrade-section { padding: 1.1rem; }
.lang-dropdown-menu { right: auto; left: 0; }
footer { padding: 1.25rem 1rem 1.5rem; }
.footer-bar {
flex-direction: column; text-align: center; align-items: center;
gap: .85rem;
}
.footer-bar-right {
flex-direction: column-reverse; gap: .75rem;
width: 100%;
}
/* Mobile: contacts row — icons only, centered */
.footer-contacts { justify-content: center; gap: .5rem; }
.footer-contact { padding: .35rem; }
.footer-contact-label { display: none; }
.footer-contact-icon { width: 32px; height: 32px; border-radius: 9px; }
.footer-contact-icon svg { width: 16px; height: 16px; }
.footer-links { gap: 1.5rem; justify-content: center; }
.footer-status { padding-top: .75rem; margin-top: .25rem; font-size: .78rem; }
.footer-copy { order: 99; font-size: .78rem; }
}
@media (max-width: 400px) {
nav { padding: .6rem .75rem; }
.cmp-row { grid-template-columns: minmax(0, 1fr) 4rem 4.5rem; }
.cmp-cell { font-size: .78rem; padding: .5rem .35rem; }
}
/* ═══════════════════════════════════════════════════════
LIGHT LANDING THEME — index.html only
Scoped under body.light-landing
═══════════════════════════════════════════════════════ */
body.light-landing {
background: #FAFCFE;
color: #0B2231;
}
/* Hide IP bar on landing */
body.light-landing .ip-bar { display: none; }
/* ── Nav (white fixed, full-width) ───────────────────── */
body.light-landing nav {
position: fixed; top: 0; left: 0; right: 0;
max-width: none;
padding: 1.1rem max(1rem, calc((100% - 1240px) / 2 + 2rem));
background: #fff;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid #EDF2F6;
z-index: 50;
}
/* Push content below fixed nav */
body.light-landing .heroband { padding-top: 64px; min-height: 100vh; }
body.light-landing .logo { color: #0B2231; }
body.light-landing .logo sup { color: #5A7384; }
body.light-landing .logo-mark {
background: #01ABEA;
box-shadow: 0 6px 16px -4px rgba(1,171,234,.5);
}
body.light-landing .nav-center {
display: flex; gap: 2rem; flex: 1;
}
body.light-landing .nav-link {
display: inline-flex; align-items: center; gap: .3rem;
font: 500 .92rem 'Inter', sans-serif;
color: #1F3A4D; cursor: pointer;
padding: .4rem 0; transition: color .15s;
}
body.light-landing .nav-link:hover { color: #01ABEA; }
body.light-landing .nav-link svg { width: 11px; height: 11px; opacity: .7; }
/* ── Nav dropdowns (hover-revealed panels) ──────────────────── */
.nav-dropdown { position: relative; }
.nav-link--drop { cursor: pointer; }
.nav-link--drop svg { transition: transform .18s ease; }
.nav-dropdown:hover .nav-link--drop svg { transform: rotate(180deg); }
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(-4px);
min-width: 280px;
background: #fff;
border: 1px solid #DCE7EE;
border-radius: 14px;
padding: .5rem;
box-shadow: 0 18px 40px -12px rgba(11,34,49,.18), 0 4px 12px -4px rgba(11,34,49,.06);
display: flex; flex-direction: column; gap: 2px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .15s ease, transform .18s ease, visibility .15s;
z-index: 60;
}
/* Bridge between trigger and menu so hover doesn't break in the gap */
.nav-dropdown::before {
content: '';
position: absolute;
top: 100%; left: 0; right: 0; height: 12px;
z-index: 59;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.nav-dd-item {
display: flex; flex-direction: column; gap: 2px;
padding: .65rem .8rem;
border-radius: 10px;
text-decoration: none;
color: inherit;
transition: background .12s;
}
.nav-dd-item:hover { background: #F2FAFD; }
.nav-dd-item strong {
font: 600 .92rem 'Inter', sans-serif;
color: #0B2231;
letter-spacing: -.005em;
}
.nav-dd-item small {
font: 400 .8rem/1.4 'Inter', sans-serif;
color: #5A7384;
}
/* Single-line variant — just a title, no description */
.nav-dd-item--simple {
flex-direction: row; align-items: center;
font: 500 .92rem 'Inter', sans-serif;
color: #1F3A4D;
}
.nav-dd-item--simple:hover { color: #01ABEA; }
/* Locations: 2-column grid */
.nav-dropdown-menu--cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 4px;
min-width: 360px;
}
.nav-dd-loc {
display: flex; align-items: center; gap: .6rem;
padding: .5rem .7rem;
border-radius: 8px;
font: 500 .88rem 'Inter', sans-serif;
color: #1F3A4D;
text-decoration: none;
transition: background .12s, color .12s;
}
.nav-dd-loc:hover { background: #F2FAFD; color: #01ABEA; }
.nav-dd-loc .loc-flag {
display: inline-flex; flex: none;
width: 24px; height: 16px;
border-radius: 3px; overflow: hidden;
box-shadow: 0 0 0 1px rgba(11,34,49,.08);
}
.nav-dd-loc .loc-flag img { width: 100%; height: 100%; display: block; object-fit: cover; }
@media (max-width: 900px) {
.nav-dropdown-menu, .nav-dropdown-menu--cols { display: none !important; }
}
body.light-landing .btn-quiet { color: #1F3A4D; }
body.light-landing .btn-quiet:hover { color: #01ABEA; }
body.light-landing .btn-primary {
background: #01ABEA;
box-shadow: 0 8px 20px -8px rgba(1,171,234,.6);
}
body.light-landing .btn-primary:hover { background: #0193C8; }
/* ── Heroband (cyan band wraps hero + features) ──────── */
.heroband {
position: relative;
background: linear-gradient(160deg, #6FCFF1 0%, #29B7EE 45%, #01ABEA 100%);
overflow: hidden;
padding-bottom: 8rem;
}
@media (max-width: 900px) {
.heroband { padding-bottom: 5rem; }
}
@media (max-width: 600px) {
.heroband { padding-bottom: 4rem; }
}
.heroband-inner {
position: relative;
z-index: 2;
max-width: 1240px;
margin: 0 auto;
padding: 3.5rem 2rem 2rem;
display: grid;
grid-template-columns: 1.1fr 1fr;
grid-template-areas:
"text phone"
"feat feat";
column-gap: 3rem;
row-gap: 2.5rem;
align-items: center;
}
.heroband-inner > .hero {
grid-area: text;
max-width: none;
padding: 0;
margin: 0;
min-height: auto;
display: block;
}
.heroband-inner > .hero-right { grid-area: phone; }
.heroband-inner > .feat-row {
grid-area: feat;
max-width: none;
padding: 0;
margin: 0;
}
@media (max-width: 900px) {
body .heroband-inner {
grid-template-columns: 1fr;
grid-template-areas:
"text"
"feat"
"phone";
text-align: center;
padding: 2rem 1.5rem 2rem;
column-gap: 0;
row-gap: 2rem;
}
body .heroband-inner > .feat-row { text-align: left; }
/* Wider container, scale phone (not container) so bubbles stay outside */
body .heroband-inner > .hero-right {
width: 100%;
height: 490px;
transform: none;
}
body .heroband-inner > .hero-right .phone-mock {
transform: scale(.85);
transform-origin: center;
}
body .heroband-inner > .hero-right .spark { display: none; }
body .heroband-inner > .hero-right .hero-glow {
width: 320px; height: 320px;
}
/* Chaotic bubble layout — stays in side strips outside the phone */
body .heroband-inner > .hero-right .bubble svg { width: 60%; height: 60%; }
body .heroband-inner > .hero-right .bubble.b1 {
width: 64px; height: 64px; top: 6%; left: 6%;
}
body .heroband-inner > .hero-right .bubble.b2 {
width: 54px; height: 54px; top: 38%; left: 2%;
}
body .heroband-inner > .hero-right .bubble.b3 {
width: 68px; height: 68px; top: 12%; right: 4%;
}
body .heroband-inner > .hero-right .bubble.b4 {
width: 58px; height: 58px; top: 56%; right: 1%;
}
body .heroband-inner > .hero-right .bubble.b5 {
width: 66px; height: 66px; bottom: 10%; left: 4%;
}
body .heroband-inner > .hero-right .bubble.b6 {
width: 60px; height: 60px; bottom: 4%; right: 7%;
}
}
@media (max-width: 600px) {
body .heroband-inner {
padding: 1.5rem 1rem 1.5rem;
row-gap: 1.5rem;
}
body .heroband-inner > .hero-right {
height: 420px;
}
body .heroband-inner > .hero-right .phone-mock {
transform: scale(.72);
}
body .heroband-inner > .hero-right .bubble.b1 {
width: 52px; height: 52px; top: 4%; left: 2%;
}
body .heroband-inner > .hero-right .bubble.b2 {
width: 44px; height: 44px; top: 32%; left: 0;
}
body .heroband-inner > .hero-right .bubble.b3 {
width: 56px; height: 56px; top: 10%; right: 2%;
}
body .heroband-inner > .hero-right .bubble.b4 {
width: 46px; height: 46px; top: 50%; right: 0;
}
body .heroband-inner > .hero-right .bubble.b5 {
width: 54px; height: 54px; bottom: 12%; left: 1%;
}
body .heroband-inner > .hero-right .bubble.b6 {
width: 48px; height: 48px; bottom: 4%; right: 4%;
}
}
.heroband::before {
content: ''; position: absolute; inset: 0;
background-image:
radial-gradient(circle at 12% 18%, rgba(255,255,255,.18), transparent 38%),
radial-gradient(circle at 88% 82%, rgba(255,255,255,.12), transparent 42%);
pointer-events: none;
}
/* Curved transition into the light section below */
.heroband::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 90px;
background: #FAFCFE;
-webkit-mask: radial-gradient(120% 100% at 50% 100%, #000 49.5%, transparent 50%);
mask: radial-gradient(120% 100% at 50% 100%, #000 49.5%, transparent 50%);
pointer-events: none;
z-index: 4;
}
/* Hero inside heroband */
body.light-landing .hero {
color: #fff;
padding: 2rem 2rem 2rem;
min-height: 580px;
align-items: center;
}
body.light-landing .heroband-inner > .hero {
padding: 0;
min-height: auto;
}
body.light-landing .hero-right { height: 580px; }
body.light-landing .hero-left h1 { color: #fff; }
body.light-landing .hero-left p { color: rgba(255,255,255,.9); }
body.light-landing .hero-status {
background: rgba(255,255,255,.16);
backdrop-filter: blur(12px);
border-color: rgba(255,255,255,.22);
color: #fff;
}
body.light-landing .hero-status .dot {
background: #7DF9C4;
box-shadow: 0 0 0 0 rgba(125,249,196,.7);
}
@keyframes pulseDotLight { 0%,100%{box-shadow:0 0 0 0 rgba(125,249,196,.7)} 50%{box-shadow:0 0 0 6px rgba(125,249,196,0)} }
body.light-landing .hero-status .dot { animation: pulseDotLight 2s infinite; }
body.light-landing .hero-status .meta {
color: rgba(255,255,255,.75);
border-color: rgba(255,255,255,.3);
}
/* Hero CTA — white button on cyan */
body.light-landing .hero-actions .btn-primary {
background: #fff; color: #01ABEA; font-weight: 700;
box-shadow: none;
}
body.light-landing .hero-actions .btn-primary:hover {
background: #fff;
transform: translateY(-1px);
box-shadow: 0 12px 28px -10px rgba(11,34,49,.18);
}
body.light-landing .trust-mini { color: rgba(255,255,255,.85); }
body.light-landing .trust-mini svg { stroke: #fff; }
/* Hero glow — lighter for cyan bg */
body.light-landing .hero-glow {
background: radial-gradient(circle, rgba(255,255,255,.25), transparent 65%);
filter: blur(50px);
}
/* Sparks too subtle on light — hide */
body.light-landing .spark { display: none; }
/* Bubbles adapted for cyan bg */
body.light-landing .bubble {
box-shadow: 0 16px 32px -8px rgba(11,34,49,.25), 0 0 0 1px rgba(255,255,255,.3);
}
/* Phone shadow adapted */
body.light-landing .phone-mock {
box-shadow:
0 30px 60px -20px rgba(0,0,0,.45),
0 12px 30px -12px rgba(1,80,120,.4),
inset 0 1px 0 rgba(255,255,255,.4);
}
/* Feature cards on cyan band — white cards */
body.light-landing .feat-row {
position: relative; z-index: 3;
margin-top: 3rem; padding-bottom: 0;
}
body.light-landing .feat-card {
background: #fff;
border-color: rgba(255,255,255,.7);
box-shadow: 0 8px 28px -16px rgba(8,42,69,.35), 0 1px 0 rgba(255,255,255,.6) inset;
}
body.light-landing .feat-card:hover {
border-color: #fff;
box-shadow: 0 24px 48px -16px rgba(1,171,234,.25);
}
body.light-landing .feat-card h3 { color: #0B2231; }
body.light-landing .feat-card p { color: #5A7384; }
body.light-landing .feat-card .ic { background: #E6F7FE; }
body.light-landing .feat-card .ic svg { stroke: #01ABEA; }
/* ── Plans section on light bg ───────────────────────── */
body.light-landing .section-head .kicker { color: #01ABEA; }
body.light-landing .section-head h2 { color: #0B2231; }
body.light-landing .section-head p { color: #5A7384; }
body.light-landing .plan-card {
background: #fff; border-color: #DCE7EE;
}
body.light-landing .plan-card:hover {
box-shadow: 0 20px 40px -16px rgba(11,34,49,.12);
}
body.light-landing .plan-card.popular {
border-color: #01ABEA;
background: linear-gradient(180deg, #F0FAFE 0%, #fff 100%);
box-shadow: 0 20px 50px -16px rgba(1,171,234,.35);
}
body.light-landing .badge-popular { background: #01ABEA; }
body.light-landing .plan-name { color: #5A7384; }
body.light-landing .plan-price .big { color: #0B2231; }
body.light-landing .plan-price .unit { color: #5A7384; }
body.light-landing .plan-desc { color: #5A7384; }
body.light-landing .plan-features { color: #1F3A4D; }
body.light-landing .plan-features li svg { stroke: #01ABEA; }
body.light-landing .btn-buy { background: #01ABEA; }
body.light-landing .btn-buy:hover { background: #0193C8; }
/* ── Dashboard on light bg ───────────────────────────── */
body.light-landing .dash-head h1 { color: #0B2231; }
body.light-landing .dash-head .sub { color: #5A7384; }
body.light-landing .card {
background: #fff;
border: 1px solid #DCE7EE;
box-shadow: 0 12px 28px -16px rgba(11,34,49,.08);
}
body.light-landing .card:hover {
border-color: #BFEAFB;
box-shadow: 0 20px 40px -16px rgba(1,171,234,.15);
}
body.light-landing .card-title { color: #5A7384; }
body.light-landing .card-title svg { stroke: #01ABEA; }
body.light-landing .stat-tile {
background: linear-gradient(160deg, #F2FAFD 0%, #fff 100%);
border: 1px solid #DCE7EE;
}
body.light-landing .stat-tile:hover { border-color: #BFEAFB; }
body.light-landing .stat-tile .ic { background: #E6F7FE; }
body.light-landing .stat-tile .ic svg { stroke: #01ABEA; }
body.light-landing .stat-tile .label { color: #5A7384; }
body.light-landing .stat-tile .value { color: #0B2231; }
body.light-landing .stat-tile .hint { color: #5A7384; }
body.light-landing .stat-tile .bar { background: rgba(1,171,234,.12); }
body.light-landing .stat-tile .bar-fill {
background: linear-gradient(90deg, #01ABEA, #4FC8F0);
}
body.light-landing .tg-status { color: #0B2231; }
body.light-landing .dot-grey { background: #B6C4CC; }
body.light-landing .dot-green {
background: #18A957;
box-shadow: 0 0 0 4px rgba(24,169,87,.15);
}
body.light-landing .btn-ghost {
background: #fff;
border: 1px solid #DCE7EE;
color: #1F3A4D;
}
body.light-landing .btn-ghost:hover {
background: #E6F7FE;
border-color: #BFEAFB;
color: #01ABEA;
}
body.light-landing .btn-connect {
background: #01ABEA;
box-shadow: 0 14px 30px -12px rgba(1,171,234,.45);
}
body.light-landing .btn-connect:hover {
background: #0193C8;
box-shadow: 0 20px 40px -12px rgba(1,171,234,.55);
}
body.light-landing #upgrade-section {
background: #fff;
border: 1px solid #DCE7EE;
box-shadow: 0 12px 28px -16px rgba(11,34,49,.08);
}
body.light-landing .compare-table {
background: #F8FBFC;
border: 1px solid #DCE7EE;
}
body.light-landing .cmp-row { border-bottom-color: #EDF2F6; }
body.light-landing .cmp-label { color: #1F3A4D; }
body.light-landing .cmp-free { color: #5A7384; }
body.light-landing .cmp-free-header { color: #5A7384; }
body.light-landing .cmp-pro {
background: rgba(1,171,234,.06);
color: #0B2231;
border-left-color: rgba(1,171,234,.2);
}
body.light-landing .cmp-pro-header {
background: rgba(1,171,234,.1);
border-left-color: rgba(1,171,234,.2);
color: #01ABEA;
}
body.light-landing .cmp-cross svg { stroke: #B6C4CC; }
body.light-landing .cmp-check svg { stroke: #18A957; }
body.light-landing .badge-pro { background: #01ABEA; }
body.light-landing .plan-option {
background: #fff;
border: 1.5px solid #DCE7EE;
}
body.light-landing .plan-option:hover { border-color: #BFEAFB; }
body.light-landing .plan-option.selected {
border-color: #01ABEA;
background: #F2FAFD;
}
body.light-landing .plan-option.selected::after { background-color: #01ABEA; }
body.light-landing .plan-option-name { color: #0B2231; }
body.light-landing .plan-option-hint { color: #18A957; }
body.light-landing .plan-option.selected .plan-option-hint { color: #01ABEA; }
body.light-landing .plan-option-price .big { color: #0B2231; }
body.light-landing .plan-option-price small { color: #5A7384; }
body.light-landing .compare-hint { color: #5A7384; }
/* ── Footer on light bg ─────────────────────────────── */
body.light-landing footer {
background: #fff; border-top-color: #EDF2F6;
max-width: none;
}
body.light-landing .footer-bar { color: #5A7384; }
body.light-landing .footer-copy { color: #5A7384; }
body.light-landing .footer-contact { color: #5A7384; }
body.light-landing .footer-contact:hover {
color: #01ABEA;
background: rgba(1,171,234,.08);
}
body.light-landing .footer-contact-icon {
background: #E6F7FE; color: #01ABEA;
}
body.light-landing .footer-links a { color: #5A7384; }
body.light-landing .footer-links a:hover { color: #01ABEA; }
/* ── Lang dropdown on light ─────────────────────────── */
body.light-landing .lang-dropdown-trigger { color: #5A7384; }
body.light-landing .lang-dropdown-trigger:hover { background: #E6F7FE; color: #01ABEA; }
body.light-landing .lang-dropdown-menu {
background: rgba(255,255,255,.95);
border-color: #DCE7EE;
box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
body.light-landing .lang-btn { color: #5A7384; }
body.light-landing .lang-btn:hover { background: #E6F7FE; color: #0B2231; }
body.light-landing .lang-btn.active { color: #01ABEA; background: rgba(1,171,234,.08); }
/* ── Auth forms on light theme ────────────────────────── */
body.light-landing .form-card {
margin-top: 100px; /* below fixed nav */
background: #fff;
border: 1px solid #DCE7EE;
box-shadow: 0 12px 40px -16px rgba(11,34,49,.1);
}
body.light-landing .form-card h2 { color: #0B2231; }
body.light-landing .form-sub { color: #5A7384; }
body.light-landing .field label { color: #5A7384; }
body.light-landing .field input {
background: #fff;
border-color: #DCE7EE;
color: #0B2231;
}
body.light-landing .field input:hover { border-color: #94A3B8; }
body.light-landing .field input:focus {
border-color: #01ABEA;
box-shadow: 0 0 0 3px rgba(1,171,234,.12);
}
body.light-landing .field input::placeholder { color: #8AA0AE; }
body.light-landing .form-card .btn-primary {
background: #01ABEA;
box-shadow: 0 8px 20px -8px rgba(1,171,234,.5);
}
body.light-landing .form-card .btn-primary:hover { background: #0193C8; }
body.light-landing .form-footer { color: #5A7384; }
body.light-landing .form-footer a { color: #01ABEA; }
body.light-landing .form-footer a:hover { color: #0193C8; }
body.light-landing .or-divider { color: #8AA0AE; }
body.light-landing .or-divider::before,
body.light-landing .or-divider::after { background: #DCE7EE; }
body.light-landing .alert-error {
background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C;
}
/* Footer sticks to bottom on short pages (auth) — but not on landing where heroband exists */
body.light-landing footer { margin-top: auto; }
body.light-landing .heroband ~ footer { margin-top: 0; }
body.light-landing footer span { color: #5A7384; }
/* ── Light landing responsive ────────────────────────── */
@media (max-width: 900px) {
.heroband { padding-bottom: 4rem; }
.heroband .feat-row { margin-top: 0; }
body.light-landing .nav-center { display: none; }
}
@media (max-width: 600px) {
.heroband { padding-bottom: 3rem; }
body.light-landing footer { padding: 1.5rem 1rem; }
}
/* ═══════════════════════════════════════════════════════
PRO PAGE — pricing/tariffs (auth-only)
═══════════════════════════════════════════════════════ */
.pro-head {
max-width: 880px; margin: 0 auto; padding: 6rem 2rem 2rem;
text-align: center;
}
.pro-head .kicker {
display: inline-block; color: #01ABEA;
font: 700 .82rem/1 'Inter', sans-serif;
letter-spacing: .12em; text-transform: uppercase; margin-bottom: .9rem;
}
.pro-head h1 {
font: 800 clamp(2rem, 4vw, 2.8rem)/1.08 'Inter', sans-serif;
letter-spacing: -.025em; color: #0B2231;
margin: 0 0 .85rem; text-wrap: balance;
}
.pro-head p {
color: #5A7384; font: 400 1.05rem/1.55 'Inter', sans-serif;
margin: 0; text-wrap: pretty;
}
.pro-plans { max-width: 1100px; margin: 0 auto 3rem; padding: 0 2rem; }
.pro-plan-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
margin-bottom: 1.5rem;
}
.pro-plan-grid .plan-card {
background: #fff; border: 1.5px solid #DCE7EE;
border-radius: 20px; padding: 1.85rem;
display: flex; flex-direction: column; gap: .75rem;
transition: .22s; position: relative;
}
.pro-plan-grid .plan-card:hover {
transform: translateY(-3px); box-shadow: 0 20px 40px -16px rgba(11,34,49,.12);
}
.pro-plan-grid .plan-card.popular {
border-color: #01ABEA;
background: linear-gradient(180deg, #F0FAFE 0%, #fff 100%);
box-shadow: 0 20px 50px -16px rgba(1,171,234,.35);
}
.pro-plan-grid .badge-popular {
position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
padding: .3rem .85rem;
background: #01ABEA; color: #fff;
font: 700 .7rem 'Inter', sans-serif;
letter-spacing: .08em; text-transform: uppercase;
border-radius: 999px;
box-shadow: 0 4px 10px -2px rgba(1,171,234,.35);
z-index: 2;
}
.pro-plan-grid .badge-save {
position: absolute; top: 1.1rem; right: 1.1rem;
background: #fff; color: #01ABEA;
font: 700 .78rem 'Inter', sans-serif;
padding: .28rem .6rem; border-radius: 999px;
box-shadow: 0 4px 10px -2px rgba(11,34,49,.1);
border: 1px solid #BFEAFB;
}
.pro-plan-grid .plan-name {
font: 600 .82rem 'Inter', sans-serif;
color: #5A7384; text-transform: uppercase; letter-spacing: .1em;
}
.pro-plan-grid .plan-price { display: flex; align-items: baseline; gap: .3rem; }
.pro-plan-grid .plan-price .big {
font: 800 2.6rem 'Inter', sans-serif; letter-spacing: -.025em; color: #0B2231;
}
.pro-plan-grid .plan-price .unit { color: #5A7384; font-weight: 500; }
.pro-plan-grid .plan-desc { color: #5A7384; font-size: .92rem; min-height: 2.6em; }
.pro-plan-grid .plan-features {
list-style: none; display: flex; flex-direction: column; gap: .55rem;
font: 400 .92rem 'Inter', sans-serif; color: #1F3A4D; flex: 1;
padding: .5rem 0 1rem; margin: 0;
}
.pro-plan-grid .plan-features li { display: flex; align-items: center; gap: .6rem; }
.pro-plan-grid .plan-features li svg {
width: 14px; height: 14px; color: #01ABEA; flex: none;
}
.pro-plan-grid .btn-outline {
background: #fff; border: 1.5px solid #DCE7EE; color: #0B2231;
}
.pro-plan-grid .btn-outline:hover {
border-color: #01ABEA; color: #01ABEA; background: #E6F7FE;
}
/* Trial block */
.pro-trial {
background: linear-gradient(110deg, #29B7EE 0%, #01ABEA 100%);
border-radius: 20px; padding: 2rem 2.25rem; color: #fff;
display: flex; align-items: center; justify-content: space-between;
gap: 2rem; flex-wrap: wrap;
box-shadow: 0 18px 40px -12px rgba(1,171,234,.4);
position: relative; overflow: hidden;
}
.pro-trial::after {
content: ''; position: absolute; right: -30px; top: -30px;
width: 200px; height: 200px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
pointer-events: none;
}
.pro-trial-l { position: relative; z-index: 1; flex: 1; min-width: 240px; }
.pro-trial-eyebrow {
font: 700 .78rem 'Inter', sans-serif; text-transform: uppercase;
letter-spacing: .12em; color: rgba(255,255,255,.85); margin-bottom: .5rem;
}
.pro-trial-price {
font: 800 2.4rem/1 'Inter', sans-serif; letter-spacing: -.025em;
color: #fff; margin-bottom: .5rem;
}
.pro-trial-price span {
font-size: 1.2rem; font-weight: 600;
color: rgba(255,255,255,.92); margin-left: .4rem;
}
.pro-trial-sub { color: rgba(255,255,255,.85); font-size: .92rem; max-width: 480px; }
.pro-trial .btn-light {
background: #fff; color: #01ABEA; font-weight: 700;
position: relative; z-index: 1;
}
.pro-trial .btn-light:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px -10px rgba(11,34,49,.18);
}
/* Compare table */
.pro-compare-head {
max-width: 720px; margin: 4rem auto 2rem; padding: 0 2rem; text-align: center;
}
.pro-compare-head .kicker {
font: 700 .75rem 'Inter', sans-serif; text-transform: uppercase;
letter-spacing: .14em; color: #01ABEA; margin-bottom: .75rem;
}
.pro-compare-head h2 {
font: 800 2.2rem/1.1 'Inter', sans-serif; letter-spacing: -.025em;
margin-bottom: .6rem; color: #0B2231;
}
.pro-compare-head p { color: #5A7384; font-size: 1.02rem; }
.pro-compare-wrap { max-width: 1100px; margin: 0 auto 4rem; padding: 0 2rem; }
.cmp-table {
background: #fff; border: 1px solid #DCE7EE;
border-radius: 14px; overflow: hidden;
box-shadow: 0 12px 28px -16px rgba(11,34,49,.1);
}
.cmp-row {
display: grid; grid-template-columns: minmax(0, 1fr) 8rem 9rem;
border-bottom: 1px solid #EDF2F6;
}
.cmp-row:last-child { border-bottom: none; }
.cmp-cell {
padding: .8rem .95rem; display: flex; align-items: center;
font-size: .92rem; color: #1F3A4D;
}
.cmp-free { justify-content: center; color: #5A7384; }
.cmp-pro {
background: rgba(1,171,234,.05);
justify-content: center; font-weight: 600;
border-left: 1px solid #BFEAFB;
}
.cmp-row.cmp-head .cmp-free-h,
.cmp-row.cmp-head .cmp-pro-h {
justify-content: center; padding: .85rem 0;
font: 700 .76rem 'Inter', sans-serif;
text-transform: uppercase; letter-spacing: .08em;
}
.cmp-free-h { background: #F5F8FA; color: #5A7384; }
.cmp-pro-h { background: #E6F7FE; color: #053D52; border-left: 1px solid #BFEAFB; }
.cmp-check svg { width: 16px; height: 16px; color: #01ABEA; }
.cmp-cross svg { width: 16px; height: 16px; color: #8AA0AE; }
.pro-cta-row {
display: flex; justify-content: center; gap: .75rem;
margin-top: 1.5rem; flex-wrap: wrap;
}
body.light-landing .pro-cta-row .btn-ghost {
background: #fff; color: #0B2231; border: 1.5px solid #DCE7EE;
}
body.light-landing .pro-cta-row .btn-ghost:hover {
border-color: #01ABEA; color: #01ABEA; background: #E6F7FE;
}
@media (max-width: 900px) {
.pro-plan-grid { grid-template-columns: 1fr; }
.pro-trial { padding: 1.5rem 1.5rem; }
.pro-trial-price { font-size: 2rem; }
}
@media (max-width: 600px) {
.pro-head { padding: 5rem 1rem 1.5rem; }
.pro-plans { padding: 0 1rem; }
.pro-compare-wrap { padding: 0 1rem; }
.cmp-row { grid-template-columns: minmax(0, 1fr) 4.5rem 5rem; }
.cmp-cell { padding: .6rem .5rem; font-size: .85rem; }
}
/* ═══════════════════════════════════════════════════════
LEGAL PAGES — /oferta, /term
═══════════════════════════════════════════════════════ */
.legal {
max-width: 820px;
margin: 0 auto;
padding: 6rem 2rem 4rem;
color: #1F3A4D;
}
.legal-head { text-align: center; margin-bottom: 2.5rem; }
.legal-head .kicker {
display: inline-block;
font: 700 .78rem 'Inter', sans-serif;
text-transform: uppercase; letter-spacing: .14em;
color: #01ABEA; margin-bottom: .9rem;
}
.legal-head h1 {
font: 800 clamp(1.8rem, 3.5vw, 2.4rem)/1.15 'Inter', sans-serif;
letter-spacing: -.025em; color: #0B2231;
margin: 0 0 .6rem; text-wrap: balance;
}
.legal-head .legal-meta {
color: #5A7384; font-size: .92rem; margin: 0;
}
.legal-body { line-height: 1.7; font-size: 1rem; }
.legal-body h2 {
font: 700 1.35rem/1.3 'Inter', sans-serif;
letter-spacing: -.015em; color: #0B2231;
margin: 2.5rem 0 .9rem;
}
.legal-body h3 {
font: 600 1.08rem/1.3 'Inter', sans-serif;
letter-spacing: -.01em; color: #0B2231;
margin: 1.6rem 0 .55rem;
}
.legal-body p { margin: 0 0 1rem; color: #1F3A4D; }
.legal-body p strong { color: #0B2231; }
.legal-body a { color: #01ABEA; text-decoration: none; border-bottom: 1px solid rgba(1,171,234,.25); }
.legal-body a:hover { color: #0193C8; border-bottom-color: #01ABEA; }
.legal-body ul, .legal-body ol { margin: 0 0 1rem 1.4rem; padding: 0; }
.legal-body ul.legal-sub, .legal-body ol.legal-sub { margin-left: 1.2rem; }
.legal-body li { margin: 0 0 .45rem; color: #1F3A4D; }
.legal-callout {
background: linear-gradient(160deg, #F2FAFD 0%, #fff 100%);
border: 1px solid #BFEAFB;
border-radius: 16px;
padding: 1.5rem 1.75rem;
margin: 0 0 2rem;
}
.legal-callout h3 {
margin: 0 0 .8rem;
font: 700 .82rem 'Inter', sans-serif;
text-transform: uppercase; letter-spacing: .12em;
color: #01ABEA;
}
.legal-callout ol { margin: 0; padding-left: 1.4rem; }
.legal-callout ol li { font-size: .94rem; line-height: 1.6; }
.legal-foot {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid #EDF2F6;
font-size: .9rem; color: #5A7384;
}
@media (max-width: 600px) {
.legal { padding: 5rem 1rem 3rem; }
.legal-callout { padding: 1.1rem 1.2rem; }
}
/* ═══════════════════════════════════════════════════════
LOCATIONS SHOWCASE — landing page
═══════════════════════════════════════════════════════ */
.locations-section {
max-width: 1240px;
margin: 2rem auto 5rem;
padding: 0 2rem;
}
.loc-head { text-align: center; margin-bottom: 2.5rem; }
.loc-pill {
display: inline-flex; align-items: center;
background: #fff;
border: 1px solid #DCE7EE;
border-radius: 999px;
padding: .42rem 1rem;
font: 600 .82rem 'Inter', sans-serif;
color: #1F3A4D;
margin-bottom: 1.1rem;
box-shadow: 0 4px 12px -4px rgba(11,34,49,.08);
}
.loc-head h2 {
font: 800 clamp(1.8rem, 3.5vw, 2.6rem)/1.1 'Inter', sans-serif;
letter-spacing: -.025em;
color: #0B2231;
margin: 0 0 .7rem;
text-wrap: balance;
}
.loc-head p {
color: #5A7384;
font: 400 1.02rem/1.55 'Inter', sans-serif;
max-width: 640px; margin: 0 auto;
}
.loc-grid {
display: grid;
grid-template-columns: 1.7fr 1fr;
gap: 1.25rem;
}
.loc-card {
background: #fff;
border: 1px solid #DCE7EE;
border-radius: 22px;
padding: 2.25rem 2.25rem 2rem;
box-shadow: 0 12px 28px -16px rgba(11,34,49,.08);
transition: .2s;
}
.loc-card:hover {
border-color: #BFEAFB;
box-shadow: 0 20px 40px -16px rgba(1,171,234,.15);
}
.loc-card h3 {
font: 700 1.25rem 'Inter', sans-serif;
letter-spacing: -.015em;
color: #0B2231;
margin: 0 0 .85rem;
}
.loc-card p {
color: #5A7384;
font: 400 .96rem/1.6 'Inter', sans-serif;
margin: 0;
}
.loc-card--global .loc-flags {
margin-top: 1.5rem;
display: flex;
flex-wrap: wrap;
gap: .55rem;
}
.loc-list {
margin-top: 1.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: .65rem 1.25rem;
}
.loc-list-item {
display: flex; align-items: center; gap: .65rem;
font: 600 .94rem 'Inter', sans-serif;
color: #0B2231;
letter-spacing: -.005em;
}
.loc-list-item .flag-chip {
width: 28px; height: 20px;
border-radius: 4px;
box-shadow: 0 0 0 1px rgba(11,34,49,.08);
}
.loc-list-item .flag-chip:hover { transform: none; box-shadow: 0 0 0 1px rgba(11,34,49,.08); }
@media (max-width: 600px) {
.loc-list { grid-template-columns: 1fr; gap: .55rem; }
}
.loc-card--reverse {
background: linear-gradient(160deg, #F2FAFD 0%, #fff 100%);
display: flex; flex-direction: column;
}
.loc-card--reverse .flag-chip--lg { margin-bottom: 1.1rem; }
.flag-chip {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 32px;
border-radius: 6px;
flex: none;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(11,34,49,.08), 0 4px 10px -4px rgba(11,34,49,.12);
transition: .15s;
background: #fff;
}
.flag-chip img { width: 100%; height: 100%; display: block; object-fit: cover; }
.flag-chip:hover {
transform: translateY(-2px);
box-shadow: 0 0 0 1px rgba(1,171,234,.25), 0 8px 18px -6px rgba(1,171,234,.35);
}
.flag-chip--lg {
width: 64px; height: 46px;
border-radius: 8px;
box-shadow: 0 0 0 1px rgba(11,34,49,.08), 0 8px 20px -6px rgba(11,34,49,.18);
}
@media (max-width: 900px) {
.loc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.locations-section { margin: 3rem auto 4rem; padding: 0 1rem; }
.loc-card { padding: 1.5rem 1.5rem 1.25rem; }
.flag-chip { width: 40px; height: 28px; }
.flag-chip--lg { width: 56px; height: 40px; }
}
/* ═══════════════════════════════════════════════════════
BYPASS THROTTLING & WHITELISTS section — landing
═══════════════════════════════════════════════════════ */
.bypass-section {
max-width: 1240px;
margin: 1rem auto 5rem;
padding: 0 2rem;
}
.bypass-head { text-align: center; margin-bottom: 2.5rem; }
.bypass-pill {
display: inline-flex; align-items: center;
background: #fff; border: 1px solid #DCE7EE;
border-radius: 999px;
padding: .42rem 1rem;
font: 600 .82rem 'Inter', sans-serif;
color: #1F3A4D;
margin-bottom: 1.1rem;
box-shadow: 0 4px 12px -4px rgba(11,34,49,.08);
}
.bypass-head h2 {
font: 800 clamp(1.8rem, 3.5vw, 2.6rem)/1.1 'Inter', sans-serif;
letter-spacing: -.025em;
color: #0B2231;
margin: 0 0 .7rem;
text-wrap: balance;
}
.bypass-head p {
color: #5A7384;
font: 400 1.02rem/1.55 'Inter', sans-serif;
max-width: 640px; margin: 0 auto;
}
.bypass-grid {
display: grid;
grid-template-columns: 1.7fr 1fr;
gap: 1.25rem;
}
.bypass-card {
background: #fff;
border: 1px solid #DCE7EE;
border-radius: 22px;
padding: 2.25rem;
box-shadow: 0 12px 28px -16px rgba(11,34,49,.08);
transition: .2s;
}
.bypass-card:hover {
border-color: #BFEAFB;
box-shadow: 0 20px 40px -16px rgba(1,171,234,.15);
}
.bypass-icon {
width: 48px; height: 48px;
border-radius: 12px;
background: #E6F7FE;
display: grid; place-items: center;
margin-bottom: 1.1rem;
color: #01ABEA;
}
.bypass-icon svg { width: 24px; height: 24px; }
.bypass-card h3 {
font: 700 1.25rem 'Inter', sans-serif;
letter-spacing: -.015em;
color: #0B2231;
margin: 0 0 .65rem;
}
.bypass-card p {
color: #5A7384;
font: 400 .96rem/1.6 'Inter', sans-serif;
margin: 0;
}
.bypass-list {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.bypass-item {
display: flex; align-items: flex-start; gap: .85rem;
}
.bypass-item strong {
display: block;
font: 600 .98rem 'Inter', sans-serif;
color: #0B2231;
margin-bottom: .15rem;
letter-spacing: -.01em;
}
.bypass-item small {
font: 400 .88rem/1.45 'Inter', sans-serif;
color: #5A7384;
}
.bypass-check {
flex: none;
width: 26px; height: 26px;
border-radius: 8px;
background: #E6F8EF;
color: #18A957;
display: grid; place-items: center;
margin-top: .12rem;
}
.bypass-check svg { width: 14px; height: 14px; }
.bypass-card--compare {
background: linear-gradient(160deg, #F2FAFD 0%, #fff 100%);
display: flex; flex-direction: column;
}
.bypass-compare {
margin-bottom: 1.5rem;
display: flex; flex-direction: column;
gap: .55rem;
}
.compare-row {
display: flex; align-items: center; justify-content: space-between;
padding: .85rem 1.1rem;
border-radius: 12px;
font: 600 .96rem 'Inter', sans-serif;
}
.compare-row--bad {
background: #FFF1F0;
color: #94363A;
}
.compare-row--good {
background: #E6F8EF;
color: #126C3A;
}
.compare-icon {
width: 26px; height: 26px;
border-radius: 7px;
display: grid; place-items: center;
flex: none;
}
.compare-row--bad .compare-icon { background: #FFD9D6; color: #DC3F45; }
.compare-row--good .compare-icon { background: #BFEFD3; color: #18A957; }
.compare-icon svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
.bypass-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.bypass-section { margin: 0 auto 4rem; padding: 0 1rem; }
.bypass-card { padding: 1.5rem 1.5rem 1.25rem; }
}
/* ═══════════════════════════════════════════════════════
PRIVACY & SECURITY section — landing
═══════════════════════════════════════════════════════ */
.privacy-section {
max-width: 1240px;
margin: 1rem auto 5rem;
padding: 0 2rem;
}
.priv-head { text-align: center; margin-bottom: 2.5rem; }
.priv-pill {
display: inline-flex; align-items: center;
background: #fff; border: 1px solid #DCE7EE;
border-radius: 999px;
padding: .42rem 1rem;
font: 600 .82rem 'Inter', sans-serif;
color: #1F3A4D;
margin-bottom: 1.1rem;
box-shadow: 0 4px 12px -4px rgba(11,34,49,.08);
}
.priv-head h2 {
font: 800 clamp(1.8rem, 3.5vw, 2.6rem)/1.1 'Inter', sans-serif;
letter-spacing: -.025em;
color: #0B2231;
margin: 0 0 .7rem;
text-wrap: balance;
}
.priv-head p {
color: #5A7384;
font: 400 1.02rem/1.55 'Inter', sans-serif;
max-width: 640px; margin: 0 auto;
}
.priv-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
margin-bottom: 1.25rem;
}
.priv-card {
background: #fff;
border: 1px solid #DCE7EE;
border-radius: 22px;
padding: 2rem 2rem 1.85rem;
box-shadow: 0 12px 28px -16px rgba(11,34,49,.08);
transition: .2s;
}
.priv-card:hover {
border-color: #BFEAFB;
box-shadow: 0 20px 40px -16px rgba(1,171,234,.15);
}
.priv-icon {
width: 48px; height: 48px;
border-radius: 12px;
background: #E6F7FE;
display: grid; place-items: center;
margin-bottom: 1.1rem;
color: #01ABEA;
}
.priv-icon svg { width: 24px; height: 24px; }
.priv-card h3 {
font: 700 1.2rem 'Inter', sans-serif;
letter-spacing: -.015em;
color: #0B2231;
margin: 0 0 .65rem;
}
.priv-card p {
color: #5A7384;
font: 400 .96rem/1.6 'Inter', sans-serif;
margin: 0;
}
/* Wide card for "Registration without phone" */
.priv-card--wide {
display: flex; align-items: center; gap: 2.5rem;
padding: 2rem 2.25rem;
background: linear-gradient(160deg, #F2FAFD 0%, #fff 100%);
}
.priv-wide-l { flex: 1; min-width: 0; }
.priv-wide-r {
display: flex; flex-direction: column; gap: .75rem;
flex: none;
}
.priv-method {
display: inline-flex; align-items: center; gap: .65rem;
padding: .85rem 1.4rem;
background: #fff;
border: 1.5px solid #DCE7EE;
border-radius: 999px;
font: 600 .94rem 'Inter', sans-serif;
color: #0B2231;
min-width: 180px;
box-shadow: 0 4px 14px -6px rgba(11,34,49,.1);
transition: .15s;
}
.priv-method:hover {
border-color: #01ABEA;
transform: translateY(-1px);
box-shadow: 0 8px 20px -6px rgba(1,171,234,.2);
}
.priv-method svg {
width: 18px; height: 18px;
color: #01ABEA;
flex: none;
}
@media (max-width: 900px) {
.priv-grid { grid-template-columns: 1fr; }
.priv-card--wide { flex-direction: column; align-items: stretch; gap: 1.5rem; }
.priv-wide-r { flex-direction: row; flex-wrap: wrap; }
.priv-method { min-width: 0; flex: 1; justify-content: center; }
}
@media (max-width: 600px) {
.privacy-section { margin: 0 auto 4rem; padding: 0 1rem; }
.priv-card { padding: 1.5rem 1.5rem 1.25rem; }
.priv-card--wide { padding: 1.5rem; }
}
/* ═══════════════════════════════════════════════════════
MOBILE HAMBURGER + SLIDE-DOWN MENU
═══════════════════════════════════════════════════════ */
.nav-hamburger {
display: none;
background: transparent;
border: none;
padding: .4rem;
cursor: pointer;
color: #0B2231;
border-radius: 10px;
place-items: center;
transition: .15s;
}
.nav-hamburger:hover { background: #F2FAFD; }
.nav-hamburger svg { width: 26px; height: 26px; transition: opacity .15s; }
.nav-hamburger .ico-close { display: none; }
.nav-hamburger.is-open .ico-burger { display: none; }
.nav-hamburger.is-open .ico-close { display: block; }
.mobile-menu {
position: fixed;
top: 60px;
left: 0; right: 0;
bottom: 0;
background: #fff;
z-index: 40;
padding: 1.5rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
overflow-y: auto;
transform: translateY(-8px);
opacity: 0;
pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}
.mobile-menu.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.mobile-menu-main {
display: flex;
flex-direction: column;
}
.mobile-menu-foot { margin-top: auto; }
.mobile-menu-link {
display: flex; align-items: center; justify-content: space-between;
padding: 1rem 0;
font: 700 1.15rem 'Inter', sans-serif;
letter-spacing: .02em;
color: #0B2231;
text-decoration: none;
border-bottom: 1px solid #EDF2F6;
transition: color .15s;
}
.mobile-menu-link:hover { color: #01ABEA; }
.mobile-menu-link[hidden] { display: none; }
.mobile-menu-pro {
color: #01ABEA;
letter-spacing: .08em;
}
.mobile-menu-pro:hover { color: #0193C8; }
.mobile-menu-group {
border-bottom: 1px solid #EDF2F6;
}
.mobile-menu-group:last-child { border-bottom: none; }
.mobile-menu-group > summary {
display: flex; align-items: center; justify-content: space-between;
padding: 1rem 0;
font: 600 1.15rem 'Inter', sans-serif;
letter-spacing: -.015em;
color: #0B2231;
cursor: pointer;
list-style: none;
transition: color .15s;
}
.mobile-menu-group > summary::-webkit-details-marker { display: none; }
.mobile-menu-group > summary:hover { color: #01ABEA; }
.mobile-menu-group > summary svg {
width: 18px; height: 18px;
color: #5A7384;
transition: transform .2s, color .15s;
}
.mobile-menu-group[open] > summary svg {
transform: rotate(180deg);
color: #01ABEA;
}
.mobile-menu-group[open] > summary { color: #01ABEA; }
.mobile-menu-sub {
display: flex;
flex-direction: column;
padding: 0 0 .65rem .25rem;
}
.mobile-menu-sub a {
display: flex; align-items: center; gap: .65rem;
padding: .65rem .25rem;
font: 500 .96rem 'Inter', sans-serif;
color: #5A7384;
border-radius: 8px;
transition: color .15s, background .15s;
}
.mobile-menu-sub a:hover { color: #01ABEA; background: #F2FAFD; }
.mobile-menu-sub .flag-chip {
width: 26px; height: 18px;
border-radius: 4px;
flex: none;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(11,34,49,.08);
}
.mobile-menu-sub .flag-chip img {
width: 100%; height: 100%; display: block; object-fit: cover;
}
.mobile-menu-foot {
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid #EDF2F6;
}
.mobile-menu-row {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
.mobile-menu-pill {
display: inline-flex; align-items: center; justify-content: center;
gap: .55rem;
padding: .85rem;
background: transparent;
border: none;
font: 600 .98rem 'Inter', sans-serif;
color: #0B2231;
cursor: pointer;
transition: color .15s;
}
.mobile-menu-pill + .mobile-menu-pill { border-left: 1px solid #EDF2F6; }
.mobile-menu-pill:hover { color: #01ABEA; }
.mobile-menu-pill.is-active { color: #01ABEA; }
.mobile-menu-pill svg {
width: 18px; height: 18px;
color: #5A7384;
}
.mobile-menu-pill:hover svg, .mobile-menu-pill.is-active svg { color: #01ABEA; }
.mobile-menu-langs {
display: flex;
gap: .5rem;
flex-wrap: wrap;
}
.mobile-menu-langs[hidden] { display: none; }
.mobile-menu-langs .lang-btn {
flex: 1;
min-width: 78px;
padding: .65rem .9rem;
background: #fff;
border: 1px solid #DCE7EE;
border-radius: 999px;
font: 500 .88rem 'Inter', sans-serif;
color: #5A7384;
cursor: pointer;
transition: .15s;
}
.mobile-menu-langs .lang-btn:hover {
border-color: #BFEAFB;
color: #01ABEA;
background: #F2FAFD;
}
.mobile-menu-langs .lang-btn.active {
border-color: #01ABEA;
color: #01ABEA;
background: #E6F7FE;
}
.mobile-menu-cta {
padding: 1.05rem;
font: 700 1rem 'Inter', sans-serif;
border-radius: 14px;
}
/* Lock body scroll when menu open */
body.menu-open { overflow: hidden; }
@media (max-width: 600px) {
.nav-hamburger { display: grid; }
}
/* ==========================================================
Dashboard — Apple-like (.vd-*)
Brand cyan as the only accent. White, light, generous.
========================================================== */
.vd {
--vd-cyan: #01ABEA;
--vd-cyan-hv: #0193C8;
--vd-cyan-9: #053D52;
--vd-ink: #0B2231;
--vd-ink-2: #1F3A4D;
--vd-ink-3: #5A7384;
--vd-ink-4: #8AA0AE;
--vd-line: #DCE7EE;
--vd-line-2: #EDF2F6;
--vd-cream: #FAFCFE;
max-width: 980px;
margin: 0 auto;
padding: 6rem 2rem 6rem;
display: flex; flex-direction: column; gap: 3rem;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--vd-ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.vd [hidden] { display: none !important; }
/* Free / PRO branches must inherit the same flex/gap layout as `.vd`,
otherwise inner s collapse onto each other (no margins). */
.vd > #vd-free,
.vd > #vd-pro { display: flex; flex-direction: column; gap: 3rem; }
.vd-hero.is-no-limit .vd-hero-track,
.vd-hero.is-no-limit .vd-hero-foot,
.vd-hero.is-no-limit .vd-hero-meta { display: none; }
@media (max-width: 880px) {
.vd > #vd-free,
.vd > #vd-pro { gap: 2.4rem; }
}
/* Header */
.vd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.vd-greet { color: var(--vd-ink-3); font: 400 1.05rem/1 'Inter',sans-serif; letter-spacing: -.01em; margin-bottom: .55rem; }
.vd-name-h { margin: 0; font: 600 2.6rem/1 'Inter',sans-serif; letter-spacing: -.035em; color: var(--vd-ink); text-transform: capitalize; word-break: break-word; }
.vd-pill {
display: inline-flex; align-items: center;
padding: .5rem .9rem;
font: 500 .82rem/1 'Inter',sans-serif; letter-spacing: -.005em;
color: var(--vd-ink-3);
background: transparent;
border: 1px solid var(--vd-line);
border-radius: 99px;
white-space: nowrap;
}
.vd-pill.is-pro { color: #fff; background: var(--vd-cyan); border-color: var(--vd-cyan); font-weight: 700; letter-spacing: .04em; }
/* HERO — the one number */
.vd-hero { text-align: center; padding: 1.5rem 0 0; }
.vd-hero-eyebrow { font: 500 .82rem/1 'Inter',sans-serif; letter-spacing: .02em; color: var(--vd-ink-3); margin-bottom: 1.4rem; }
.vd-hero-number { display: inline-flex; align-items: baseline; letter-spacing: -.055em; color: var(--vd-ink); font-variant-numeric: tabular-nums; margin-bottom: .6rem; }
.vd-hero-int { font: 200 8.5rem/.92 'Inter',sans-serif; }
.vd-hero-dec { font: 200 8.5rem/.92 'Inter',sans-serif; color: var(--vd-ink-3); }
.vd-hero-unit { font: 300 2.4rem/1 'Inter',sans-serif; color: var(--vd-ink-3); letter-spacing: -.02em; margin-left: .6rem; align-self: flex-end; padding-bottom: .9rem; }
.vd-hero-meta { font: 400 .98rem/1.5 'Inter',sans-serif; letter-spacing: -.005em; color: var(--vd-ink-3); margin-bottom: 2rem; }
.vd-hero-track { position: relative; max-width: 540px; margin: 0 auto; height: 5px; border-radius: 99px; background: #EAEFF3; overflow: hidden; }
.vd-hero-track-fill { position: absolute; inset: 0; width: 0; background: var(--vd-cyan); border-radius: 99px; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.vd-hero-foot { max-width: 540px; margin: .85rem auto 0; display: flex; justify-content: space-between; font: 500 .82rem/1 'Inter',sans-serif; color: var(--vd-ink-3); letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
/* Quiet stats row */
.vd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--vd-line); border-bottom: 1px solid var(--vd-line); padding: 1.6rem 0; }
.vd-stat { text-align: center; padding: .4rem 1rem; position: relative; }
.vd-stat + .vd-stat::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 48%; background: var(--vd-line); }
.vd-stat-k { font: 500 1.7rem/1 'Inter',sans-serif; letter-spacing: -.025em; color: var(--vd-ink); font-variant-numeric: tabular-nums; margin-bottom: .4rem; }
.vd-stat-k small { font: 400 .95rem/1 'Inter',sans-serif; color: var(--vd-ink-3); letter-spacing: -.01em; margin-left: .25rem; }
.vd-stat-l { font: 400 .82rem/1 'Inter',sans-serif; letter-spacing: -.005em; color: var(--vd-ink-3); }
/* Action — clear single CTA (subscription page) */
.vd-action {
display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem;
align-items: center;
background: #fff;
border: 1px solid var(--vd-line);
border-radius: 22px;
padding: 2.2rem 2.4rem;
box-shadow: 0 1px 0 rgba(11,34,49,.02);
}
.vd-action-eyebrow { font: 500 .78rem/1 'Inter',sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--vd-cyan); margin-bottom: .7rem; }
.vd-action-title { margin: 0 0 .5rem; font: 600 1.55rem/1.15 'Inter',sans-serif; letter-spacing: -.025em; color: var(--vd-ink); }
.vd-action-desc { margin: 0; font: 400 .98rem/1.5 'Inter',sans-serif; letter-spacing: -.005em; color: var(--vd-ink-3); max-width: 42ch; }
.vd-action-r { display: flex; flex-direction: column; align-items: flex-end; gap: .7rem; }
.vd-action-cta {
display: inline-flex; align-items: center; gap: .55rem;
padding: .85rem 1.5rem;
background: var(--vd-cyan); color: #fff;
border-radius: 99px;
font: 600 .98rem/1 'Inter',sans-serif; letter-spacing: -.005em;
text-decoration: none;
transition: background .15s ease, transform .15s ease;
}
.vd-action-cta:hover { background: var(--vd-cyan-hv); color: #fff; transform: translateY(-1px); }
.vd-action-copy { border: none; background: none; cursor: pointer; padding: .4rem .2rem; font: 500 .88rem/1 'Inter',sans-serif; letter-spacing: -.005em; color: var(--vd-ink-3); transition: color .15s ease; }
.vd-action-copy:hover { color: var(--vd-cyan); }
.vd-action-copy.is-copied { color: var(--vd-cyan); }
/* Section title */
.vd-section-title { margin: 0; font: 600 1.35rem/1 'Inter',sans-serif; letter-spacing: -.025em; color: var(--vd-ink); }
.vd-section-meta { font: 400 .9rem/1 'Inter',sans-serif; letter-spacing: -.005em; color: var(--vd-ink-3); }
/* Locations rail */
.vd-locations-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.vd-locations-rail {
display: flex; gap: .7rem; overflow-x: auto;
padding-bottom: .6rem;
margin: 0 -2rem; padding-left: 2rem; padding-right: 2rem;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.vd-locations-rail::-webkit-scrollbar { display: none; }
.vd-loc-card {
flex: 0 0 152px;
scroll-snap-align: start;
background: #fff; border: 1px solid var(--vd-line);
border-radius: 18px;
padding: 1.1rem 1.1rem 1rem;
display: flex; flex-direction: column; gap: .7rem;
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
text-decoration: none;
}
.vd-loc-card.is-free, .vd-loc-pro.is-active { border-color: var(--vd-cyan); box-shadow: 0 0 0 3px rgba(1,171,234,.1); }
.vd-loc-card.is-locked { background: var(--vd-cream); }
.vd-loc-flag { font-size: 1.7rem; line-height: 1; display: block; }
.vd-loc-name { font: 600 .98rem/1.2 'Inter',sans-serif; letter-spacing: -.015em; color: var(--vd-ink); }
.vd-loc-card.is-locked .vd-loc-name { color: var(--vd-ink-3); }
.vd-loc-state { display: inline-flex; align-items: center; gap: .4rem; font: 500 .78rem/1 'Inter',sans-serif; letter-spacing: -.005em; color: var(--vd-ink-3); }
.vd-loc-card.is-free .vd-loc-state, .vd-loc-pro.is-active .vd-loc-state { color: var(--vd-cyan-9); }
.vd-loc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vd-cyan); box-shadow: 0 0 0 3px rgba(1,171,234,.18); }
.vd-loc-state svg { color: var(--vd-ink-3); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; width: 11px; height: 11px; stroke-width: 2.2; }
.vd-loc-pro { appearance: none; font: inherit; text-align: left; cursor: pointer; background: #fff; }
.vd-loc-pro:not(.is-active):hover { border-color: var(--vd-ink); }
/* PRO upgrade — single accent block */
.vd-upgrade {
position: relative;
display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem;
background: linear-gradient(170deg, #0193C8 0%, #01ABEA 60%, #29B7EE 110%);
border-radius: 28px;
padding: 3rem 3rem;
color: #fff;
overflow: hidden;
box-shadow: 0 30px 60px -24px rgba(1,107,160,.45);
}
.vd-upgrade::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 100% 0%, rgba(255,255,255,.22) 0%, transparent 55%); }
.vd-upgrade-l, .vd-upgrade-r { position: relative; z-index: 2; min-width: 0; }
.vd-upgrade-eyebrow { font: 500 .78rem/1 'Inter',sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 1.1rem; }
.vd-upgrade-title { margin: 0 0 1.6rem; font: 600 2.4rem/1.1 'Inter',sans-serif; letter-spacing: -.035em; color: #fff; }
.vd-upgrade-quiet { display: block; font: 300 1.55rem/1.25 'Inter',sans-serif; letter-spacing: -.02em; color: rgba(255,255,255,.78); margin-top: .4rem; }
.vd-upgrade-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.vd-upgrade-feats li { font: 400 .98rem/1.5 'Inter',sans-serif; letter-spacing: -.005em; color: rgba(255,255,255,.92); position: relative; padding-left: 1.2rem; }
.vd-upgrade-feats li::before { content: ""; position: absolute; left: 0; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.7); }
.vd-upgrade-r { display: flex; flex-direction: column; gap: 1.1rem; }
.vd-upgrade-plans { display: flex; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: .3rem; gap: .2rem; }
.vd-upgrade-plan {
flex: 1; background: transparent; border: none; cursor: pointer;
padding: .7rem .4rem; border-radius: 10px;
color: rgba(255,255,255,.78);
font: 500 .92rem/1.2 'Inter',sans-serif; letter-spacing: -.01em;
display: flex; flex-direction: column; align-items: center; gap: .18rem;
white-space: nowrap; min-width: 0;
transition: all .15s ease;
}
.vd-upgrade-plan:hover { color: #fff; }
.vd-upgrade-plan.sel { background: #fff; color: var(--vd-cyan-9); box-shadow: 0 4px 10px rgba(0,40,68,.15); }
.vd-upgrade-plan .nm { font-weight: 600; }
.vd-upgrade-plan .hint { font: 600 .68rem/1 'Inter',sans-serif; letter-spacing: .04em; color: inherit; opacity: .85; }
.vd-upgrade-plan.sel .hint { color: var(--vd-cyan); opacity: 1; }
.vd-upgrade-price { display: flex; align-items: baseline; gap: .7rem; padding: .4rem 0; flex-wrap: wrap; }
.vd-upgrade-price .big { font: 500 2.6rem/1 'Inter',sans-serif; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.vd-upgrade-price .meta { font: 400 .9rem/1 'Inter',sans-serif; letter-spacing: -.005em; color: rgba(255,255,255,.78); }
.vd-upgrade-buy {
border: none; cursor: pointer;
background: #fff; color: var(--vd-cyan-9);
padding: 1rem 1.2rem; border-radius: 99px;
font: 600 1.02rem/1 'Inter',sans-serif; letter-spacing: -.005em;
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
box-shadow: 0 12px 24px -10px rgba(0,40,68,.35);
transition: transform .15s ease, box-shadow .15s ease;
}
.vd-upgrade-buy:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(0,40,68,.45); }
.vd-upgrade-buy:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.vd-upgrade-buy svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.vd-upgrade-fine { margin: 0; text-align: center; font: 400 .8rem/1.4 'Inter',sans-serif; letter-spacing: -.005em; color: rgba(255,255,255,.75); }
/* Pair: Slots / Devices / Telegram cards */
.vd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.vd-pair-card { background: #fff; border: 1px solid var(--vd-line); border-radius: 22px; padding: 1.7rem 1.8rem; display: flex; flex-direction: column; gap: 1.1rem; }
.vd-pair-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.vd-pair-title { margin: 0; font: 600 1.15rem/1 'Inter',sans-serif; letter-spacing: -.02em; color: var(--vd-ink); }
.vd-pair-meta { font: 400 .85rem/1 'Inter',sans-serif; letter-spacing: -.005em; color: var(--vd-ink-3); }
/* Slots */
.vd-slots { display: flex; flex-direction: column; gap: .55rem; }
.vd-slot { display: flex; align-items: center; gap: .85rem; padding: .95rem 1.05rem; border: 1px solid var(--vd-line-2); border-radius: 14px; background: var(--vd-cream); }
.vd-slot-on { background: #fff; border-color: var(--vd-cyan); box-shadow: 0 0 0 3px rgba(1,171,234,.1); }
.vd-slot-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--vd-cyan); box-shadow: 0 0 0 3px rgba(1,171,234,.18); }
.vd-slot-lock { width: 22px; height: 22px; border-radius: 7px; flex: none; display: grid; place-items: center; background: #fff; border: 1px solid var(--vd-line); color: var(--vd-ink-3); }
.vd-slot-lock svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.vd-slot-l { min-width: 0; }
.vd-slot-name { font: 600 .92rem/1.2 'Inter',sans-serif; letter-spacing: -.015em; color: var(--vd-ink); }
.vd-slot-locked .vd-slot-name { color: var(--vd-ink-3); }
.vd-slot-sub { margin-top: .25rem; font: 400 .8rem/1 'Inter',sans-serif; letter-spacing: -.005em; color: var(--vd-ink-3); }
.vd-slots-foot { margin: 0; font: 400 .82rem/1.4 'Inter',sans-serif; letter-spacing: -.005em; color: var(--vd-ink-3); }
/* Telegram card */
.vd-tg-desc { margin: 0; font: 400 .92rem/1.55 'Inter',sans-serif; letter-spacing: -.005em; color: var(--vd-ink-3); flex: 1; }
.vd-tg-btn {
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--vd-cyan);
background: #fff; color: var(--vd-cyan);
padding: .75rem 1rem; border-radius: 99px;
font: 600 .9rem/1 'Inter',sans-serif; letter-spacing: -.005em;
cursor: pointer; text-decoration: none;
transition: background .15s ease, color .15s ease;
}
.vd-tg-btn:hover { background: var(--vd-cyan); color: #fff; }
.vd-tg-btn.is-linked { border-color: var(--vd-line); color: var(--vd-ink-3); }
.vd-tg-btn.is-linked:hover { background: var(--vd-cream); color: var(--vd-ink); border-color: var(--vd-ink-4); }
/* PRO hero */
.vd-pro-hero {
display: grid; grid-template-columns: 1fr auto; gap: 2.4rem; align-items: center;
padding: 2.6rem 2.4rem;
background: linear-gradient(135deg, #E6F7FE 0%, #CCEEFC 55%, #A8DFF7 100%);
color: var(--vd-ink);
border-radius: 24px;
position: relative; overflow: hidden;
}
.vd-pro-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 85% 20%, rgba(1,171,234,.25), transparent 70%); pointer-events: none; }
.vd-pro-hero-l { position: relative; z-index: 1; }
.vd-pro-hero .vd-hero-eyebrow { color: var(--vd-ink-3); }
.vd-pro-hero-title { display: flex; align-items: center; gap: .7rem; font: 300 2.2rem/1 'Inter',sans-serif; letter-spacing: -.025em; margin: .6rem 0 .8rem; color: var(--vd-ink); }
.vd-pro-badge { display: inline-flex; align-items: center; padding: .3rem .65rem; border-radius: 6px; background: var(--vd-cyan); color: #fff; font: 700 .85rem/1 'Inter',sans-serif; letter-spacing: .08em; }
.vd-pro-hero-meta { color: var(--vd-ink-3); font-size: .95rem; margin-bottom: 1.6rem; }
.vd-pro-hero-renew { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.1rem; background: rgba(255,255,255,.55); border: 1px solid rgba(1,171,234,.18); border-radius: 12px; font-size: .88rem; flex-wrap: wrap; }
.vd-pro-renew-l { color: var(--vd-ink-3); }
.vd-pro-renew-r { color: var(--vd-ink); font-weight: 550; }
.vd-pro-hero-r { position: relative; z-index: 1; text-align: center; }
.vd-pro-infinity { font: 200 7rem/1 'Inter',sans-serif; color: var(--vd-cyan); letter-spacing: -.05em; }
.vd-pro-infinity-l { color: var(--vd-ink-3); font-size: .85rem; letter-spacing: .04em; margin-top: .4rem; }
/* PRO devices summary */
.vd-devices-pro { display: flex; align-items: center; gap: 1.4rem; padding: 1.2rem 0 .4rem; }
.vd-devices-pro-num { font: 200 4.5rem/1 'Inter',sans-serif; color: var(--vd-cyan); letter-spacing: -.05em; }
.vd-devices-pro-text { color: var(--vd-ink-3); font-size: .92rem; line-height: 1.5; }
/* Manage subscription */
.vd-manage { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.4rem; padding: 2.4rem; background: #fff; border: 1px solid var(--vd-line); border-radius: 20px; }
.vd-manage-title { font: 400 1.6rem/1.1 'Inter',sans-serif; letter-spacing: -.02em; margin: .5rem 0 1.4rem; color: var(--vd-ink); }
.vd-manage-rows { display: flex; flex-direction: column; }
.vd-manage-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--vd-line); font-size: .92rem; }
.vd-manage-row:last-child { border-bottom: 0; }
.vd-manage-row .k { color: var(--vd-ink-3); }
.vd-manage-row .v { color: var(--vd-ink); font-weight: 550; text-align: right; }
.vd-manage-r { display: flex; flex-direction: column; gap: .6rem; justify-content: center; }
.vd-manage-btn {
display: inline-flex; align-items: center; justify-content: center;
appearance: none; font: 550 .92rem/1 'Inter',sans-serif; cursor: pointer;
padding: .95rem 1.2rem; border-radius: 999px;
background: #fff; border: 1px solid var(--vd-line);
color: var(--vd-ink); text-decoration: none;
transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.vd-manage-btn:hover { border-color: var(--vd-ink); color: var(--vd-ink); }
.vd-manage-primary { background: var(--vd-cyan); border-color: var(--vd-cyan); color: #fff; }
.vd-manage-primary:hover { background: var(--vd-cyan-hv); border-color: var(--vd-cyan-hv); color: #fff; }
.vd-manage .vd-upgrade-fine { color: var(--vd-ink-3); }
/* Responsive */
@media (max-width: 880px) {
.vd { padding: 3.5rem 1.4rem 4rem; gap: 2.4rem; }
.vd-name-h { font-size: 2rem; }
.vd-hero-int, .vd-hero-dec { font-size: 6rem; }
.vd-hero-unit { font-size: 1.7rem; padding-bottom: .5rem; }
.vd-stats { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 0; align-items: stretch; }
/* Hide all vertical dividers — they look broken in a 2x2 grid */
.vd-stat::before { display: none !important; }
.vd-stat:nth-child(3),
.vd-stat:nth-child(4) { padding-top: 1.2rem; }
/* Force each stat to a consistent box: same height, content vertically centered.
Without this, "∞" sits below "11" because their optical centers differ. */
.vd-stat { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.vd-stat-k {
min-height: 1.7em;
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: .25rem;
}
.vd-action { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.7rem; text-align: left; }
.vd-action-r { align-items: stretch; }
.vd-upgrade { grid-template-columns: 1fr; gap: 1.8rem; padding: 2rem 1.7rem; }
.vd-upgrade-title { font-size: 1.85rem; }
.vd-upgrade-quiet { font-size: 1.2rem; }
.vd-pair { grid-template-columns: 1fr; gap: 1rem; }
.vd-locations-rail { margin: 0 -1.4rem; padding: 0 1.4rem .6rem; }
.vd-pro-hero { grid-template-columns: 1fr; gap: 1.6rem; padding: 2rem 1.7rem; }
/* The right-side block (∞ + "трафика") is redundant on narrow screens —
same info appears in the stats row right below. Hide it. */
.vd-pro-hero-r { display: none; }
.vd-pro-hero-title { font-size: 1.8rem; }
.vd-pro-hero-meta { margin-bottom: 1.2rem; }
.vd-pro-hero-renew { padding: .85rem 1rem; }
.vd-manage { grid-template-columns: 1fr; gap: 1.8rem; padding: 2rem 1.7rem; }
.vd-manage-title { font-size: 1.4rem; }
}
/* Phones — true mobile layout */
@media (max-width: 600px) {
/* Kill any horizontal overflow at the root — otherwise negative margins
on the locations rail (or anything else) can push content off-screen,
making the user think it's "not adapted". */
html, body { overflow-x: hidden; }
.vd { padding: 5rem 1rem 3rem; gap: 1.8rem; max-width: 100%; }
.vd > #vd-free,
.vd > #vd-pro { gap: 1.8rem; min-width: 0; }
.vd-head, .vd-head-l, .vd-head-r { min-width: 0; }
.vd-name-h { max-width: 100%; word-break: break-word; }
/* Header: greet/name take full row, pill underneath */
.vd-head { gap: .9rem; }
.vd-head-l { width: 100%; }
.vd-greet { font-size: .95rem; margin-bottom: .35rem; }
.vd-name-h { font-size: 1.7rem; letter-spacing: -.03em; }
.vd-pill { font-size: .78rem; padding: .4rem .75rem; }
/* Hero: shrink the monster number */
.vd-hero { padding: .5rem 0 0; }
.vd-hero-eyebrow { margin-bottom: 1rem; }
.vd-hero-int, .vd-hero-dec { font-size: 4.5rem; }
.vd-hero-unit { font-size: 1.25rem; padding-bottom: .35rem; margin-left: .35rem; }
.vd-hero-meta { font-size: .88rem; margin-bottom: 1.4rem; }
.vd-hero-foot { font-size: .75rem; }
/* Stats — readable on narrow screens */
.vd-stats { padding: 1.1rem 0; gap: 1rem 0; }
.vd-stat { padding: .3rem .4rem; }
.vd-stat-k { font-size: 1.3rem; margin-bottom: .3rem; }
.vd-stat-k small { font-size: .8rem; }
.vd-stat-l { font-size: .74rem; }
/* Cards: tighter padding and stretched CTAs */
.vd-action { padding: 1.3rem 1.2rem; gap: 1rem; border-radius: 18px; }
.vd-action-title { font-size: 1.3rem; }
.vd-action-desc { font-size: .9rem; }
.vd-action-cta { width: 100%; padding: .9rem 1.2rem; font-size: .95rem; }
.vd-action-copy { text-align: center; padding: .5rem; }
.vd-section-title { font-size: 1.15rem; }
.vd-section-meta { font-size: .82rem; }
.vd-locations-head { margin-bottom: .8rem; gap: .4rem; }
.vd-locations-rail { margin: 0 -1rem; padding: 0 1rem .5rem; gap: .55rem; }
.vd-loc-card { flex: 0 0 130px; padding: .9rem .9rem .85rem; border-radius: 14px; }
.vd-loc-flag { font-size: 1.5rem; }
.vd-loc-name { font-size: .9rem; }
.vd-loc-state { font-size: .72rem; }
/* PRO upgrade block */
.vd-upgrade { padding: 1.6rem 1.3rem; gap: 1.4rem; border-radius: 20px; }
.vd-upgrade-eyebrow { margin-bottom: .8rem; }
.vd-upgrade-title { font-size: 1.45rem; margin-bottom: 1.1rem; }
.vd-upgrade-quiet { font-size: 1rem; }
.vd-upgrade-feats li { font-size: .9rem; padding-left: 1rem; }
.vd-upgrade-plans { padding: .25rem; }
.vd-upgrade-plan { padding: .55rem .25rem; font-size: .82rem; }
.vd-upgrade-plan .hint { font-size: .62rem; }
.vd-upgrade-price .big { font-size: 2rem; }
.vd-upgrade-price .meta { font-size: .82rem; }
.vd-upgrade-buy { padding: .85rem 1rem; font-size: .95rem; }
/* Pair cards (Telegram, Devices) */
.vd-pair-card { padding: 1.25rem 1.2rem; border-radius: 18px; gap: .9rem; }
.vd-pair-title { font-size: 1.05rem; }
.vd-pair-meta { font-size: .78rem; }
.vd-tg-desc { font-size: .88rem; }
.vd-tg-btn { padding: .75rem 1rem; font-size: .88rem; width: 100%; }
/* PRO hero */
.vd-pro-hero { padding: 1.6rem 1.3rem; gap: 1.2rem; border-radius: 20px; }
.vd-pro-hero-title { font-size: 1.55rem; gap: .5rem; }
.vd-pro-badge { padding: .25rem .55rem; font-size: .78rem; }
.vd-pro-hero-meta { font-size: .88rem; margin-bottom: 1.2rem; }
.vd-pro-hero-renew { padding: .75rem .9rem; font-size: .82rem; gap: .5rem; }
.vd-pro-infinity { font-size: 4rem; }
.vd-pro-infinity-l { font-size: .78rem; }
/* PRO devices summary */
.vd-devices-pro { gap: 1rem; padding: .8rem 0 .2rem; }
.vd-devices-pro-num { font-size: 3.4rem; }
.vd-devices-pro-text { font-size: .85rem; }
/* Manage subscription */
.vd-manage { padding: 1.6rem 1.3rem; gap: 1.4rem; border-radius: 18px; }
.vd-manage-title { font-size: 1.25rem; margin: .4rem 0 1rem; }
.vd-manage-row { padding: .7rem 0; font-size: .85rem; }
.vd-manage-btn { padding: .85rem 1rem; font-size: .88rem; }
}
/* Very small phones (≤ 380px) */
@media (max-width: 380px) {
.vd { padding: 4.5rem .8rem 2.5rem; }
.vd-name-h { font-size: 1.45rem; }
.vd-hero-int, .vd-hero-dec { font-size: 3.8rem; }
.vd-hero-unit { font-size: 1.1rem; padding-bottom: .25rem; }
.vd-loc-card { flex: 0 0 118px; }
.vd-upgrade-title { font-size: 1.3rem; }
.vd-upgrade-quiet { font-size: .92rem; }
.vd-upgrade-plan .nm { font-size: .78rem; }
}
[dir="rtl"] .vd-action-r { align-items: flex-start; }
[dir="rtl"] .vd-locations-rail { direction: ltr; }