@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/space-grotesk-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/space-grotesk-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/barlow-condensed-700-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Sans';
font-style: normal;
font-weight: 400 700;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/ibm-plex-sans-variable-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--bg:            #08080c;
--bg-2:          #0c0c13;
--surface:       #12121b;
--surface-2:     #171722;
--surface-3:     #1e1e2b;
--border:        rgba(255,255,255,.08);
--border-strong: rgba(255,255,255,.14);
--text:          #f4f4f8;
--text-soft:     #c3c3d2;
--text-muted:    #8b8b9e;
--violet:        #8b5cf6;
--violet-2:      #7c3aed;
--pink:          #ec4899;
--gold:          #e8b84b;
--green:         #34d399;
--grad:          linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
--grad-soft:     linear-gradient(135deg, rgba(139,92,246,.16), rgba(236,72,153,.16));
--glow:          0 0 60px rgba(139,92,246,.35);
--radius:        18px;
--radius-sm:     12px;
--radius-lg:     26px;
--maxw:          1180px;
--shadow:        0 20px 50px -20px rgba(0,0,0,.7);
--shadow-card:   0 12px 34px -18px rgba(0,0,0,.75);
--font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--text);
line-height: 1.65;
font-size: 17px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
::selection { background: rgba(236,72,153,.35); color: #fff; }
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -2;
background:
radial-gradient(60rem 40rem at 78% -8%, rgba(139,92,246,.16), transparent 60%),
radial-gradient(50rem 40rem at 8% 8%, rgba(236,72,153,.10), transparent 55%),
var(--bg);
}
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background-image:
linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
background-size: 54px 54px;
mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
-webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
pointer-events: none;
}
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding: 96px 0; position: relative; }
.section-sm { padding: 64px 0; }
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-display);
font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
color: var(--text-muted);
padding: 7px 14px;
border: 1px solid var(--border);
border-radius: 999px;
background: rgba(255,255,255,.02);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 12px var(--pink); }
.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(28px, 4vw, 44px); margin: 20px 0 14px; }
.section-head p { color: var(--text-soft); font-size: 18px; }
.grad-text {
background: var(--grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.gold { color: var(--gold); }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font-family: var(--font-display); font-weight: 600; font-size: 15.5px;
padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
transition: transform .18s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 30px -10px rgba(236,72,153,.6); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px rgba(236,72,153,.7); }
.btn-ghost { background: rgba(255,255,255,.04); border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); }
.btn-gold { background: linear-gradient(135deg,#f2ca63,#d99b2b); color: #241a05; box-shadow: 0 10px 30px -12px rgba(232,184,75,.6); }
.btn-gold:hover { transform: translateY(-2px); }
.btn-lg { padding: 17px 34px; font-size: 16.5px; }
.btn-block { width: 100%; }
.site-header {
position: sticky; top: 0; z-index: 60;
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
background: rgba(8,8,12,.72);
border-bottom: 1px solid transparent;
transition: border-color .3s ease, background .3s ease;
}
.site-header.scrolled { border-bottom-color: var(--border); background: rgba(8,8,12,.9); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.brand .mark {
width: 34px; height: 34px; border-radius: 10px; background: var(--grad);
display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px;
box-shadow: 0 6px 18px -6px rgba(236,72,153,.7);
}
.brand .mark svg { width: 20px; height: 20px; }
.brand b { font-weight: 700; }
.brand-logo { height: 40px; width: auto; display: block; -webkit-user-drag: none; user-select: none; }
.site-footer .brand-logo { height: 38px; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { color: var(--text-soft); font-size: 15px; font-weight: 500; transition: color .18s; }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.03); place-items: center; }
.nav-toggle svg { width: 22px; height: 22px; }
.hero { padding: 84px 0 72px; position: relative; text-align: center; }
.hero .container { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(34px, 6.2vw, 68px); letter-spacing: -.03em; margin: 26px auto 22px; max-width: 15ch; }
.hero .lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--text-soft); max-width: 640px; margin: 0 auto 34px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 22px; font-size: 13.5px; color: var(--text-muted); }
.hero-note b { color: var(--text-soft); }
.trust-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 46px; }
.trust {
display: flex; align-items: center; gap: 10px;
padding: 12px 18px; border: 1px solid var(--border); border-radius: 14px;
background: rgba(255,255,255,.02); font-size: 14px; color: var(--text-soft);
}
.trust svg { width: 18px; height: 18px; color: var(--green); flex: none; }
.trust b { color: var(--text); font-weight: 600; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
position: relative;
background: linear-gradient(180deg, var(--surface), var(--bg-2));
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 30px;
box-shadow: var(--shadow-card);
transition: transform .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.card .num { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--pink); }
.card .ico {
width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center;
background: var(--grad-soft); border: 1px solid var(--border); margin-bottom: 20px; color: var(--violet);
}
.card .ico svg { width: 25px; height: 25px; }
.card h3 { font-size: 20px; margin-bottom: 10px; }
.card p { color: var(--text-muted); font-size: 15.5px; }
.value { text-align: left; }
.value .k { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; display:flex; align-items:center; gap:9px; }
.value .k span { width: 30px; height: 30px; border-radius: 9px; background: var(--grad-soft); display: grid; place-items: center; color: var(--pink); }
.value .k span svg { width: 17px; height: 17px; }
.price-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.price {
position: relative;
background: linear-gradient(180deg, var(--surface-2), var(--bg-2));
border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: 34px; display: flex; flex-direction: column;
}
.price.featured { border-color: rgba(236,72,153,.4); box-shadow: 0 0 0 1px rgba(236,72,153,.18), 0 30px 60px -30px rgba(236,72,153,.4); }
.price .badge {
position: absolute; top: 22px; right: 22px; font-family: var(--font-display);
font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
padding: 6px 12px; border-radius: 999px; background: var(--grad-soft); color: var(--pink); border: 1px solid rgba(236,72,153,.3);
}
.price .badge.gold { background: rgba(232,184,75,.12); color: var(--gold); border-color: rgba(232,184,75,.35); }
.price h3 { font-size: 22px; margin-bottom: 6px; }
.price .tag { color: var(--text-muted); font-size: 14.5px; margin-bottom: 22px; }
.price .amount { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.price .amount .now { font-family: var(--font-display); font-size: 44px; font-weight: 700; }
.price .amount .was { font-size: 19px; color: var(--text-muted); text-decoration: line-through; }
.price .save { display: inline-block; font-size: 13px; color: var(--green); font-weight: 600; margin-bottom: 20px; }
.price p.desc { color: var(--text-soft); font-size: 15px; margin-bottom: 26px; flex: 1; }
.price .btn { margin-top: auto; }
.promo-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.promo {
background: linear-gradient(180deg, var(--surface), var(--bg-2));
border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; text-align: left;
transition: transform .2s, border-color .2s;
}
.promo:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.promo .pill { display:inline-block; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--violet); background: var(--grad-soft); border:1px solid var(--border); padding: 5px 12px; border-radius: 999px; margin-bottom: 16px; }
.promo .rate { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; }
.promo .rate .big { font-family: var(--font-display); font-size: 30px; font-weight: 700; }
.promo .rate .old { font-size: 15px; color: var(--text-muted); text-decoration: line-through; }
.promo h3 { font-size: 16.5px; margin: 14px 0 8px; }
.promo p { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; min-height: 40px; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; counter-reset: step; }
.step { position: relative; padding: 30px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,.015); }
.step::before {
counter-increment: step; content: counter(step);
font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff;
width: 40px; height: 40px; border-radius: 12px; background: var(--grad);
display: grid; place-items: center; margin-bottom: 18px;
box-shadow: 0 8px 20px -8px rgba(236,72,153,.6);
}
.step h3 { font-size: 18px; margin-bottom: 9px; }
.step p { color: var(--text-muted); font-size: 15px; }
.safe {
border: 1px solid var(--border); border-radius: var(--radius-lg);
background: linear-gradient(135deg, rgba(52,211,153,.06), rgba(139,92,246,.06));
padding: 46px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
}
.safe-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.safe-list .item { display: flex; align-items: center; gap: 11px; font-size: 15px; color: var(--text-soft); font-weight: 500; }
.safe-list .item svg { width: 20px; height: 20px; color: var(--green); flex: none; }
.faq { max-width: 820px; margin-inline: auto; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255,255,255,.015); margin-bottom: 12px; overflow: hidden; }
.faq-q {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 20px 24px; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 17px; background: none; border: none;
}
.faq-q .chev { width: 22px; height: 22px; flex: none; transition: transform .25s ease; color: var(--pink); }
.faq-item.open .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a .inner { padding: 0 24px 22px; color: var(--text-muted); font-size: 15.5px; }
.faq-item.open .faq-a { max-height: 420px; }
.cta-band {
position: relative; overflow: hidden;
border-radius: var(--radius-lg); border: 1px solid rgba(236,72,153,.28);
background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(236,72,153,.14));
padding: 64px 40px; text-align: center;
}
.cta-band h2 { font-size: clamp(26px, 4vw, 40px); margin-bottom: 14px; }
.cta-band p { color: var(--text-soft); font-size: 18px; margin-bottom: 30px; }
.site-footer { border-top: 1px solid var(--border); padding: 60px 0 34px; margin-top: 30px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; margin-bottom: 46px; }
.footer-brand p { color: var(--text-muted); font-size: 14.5px; max-width: 340px; margin-top: 16px; }
.footer-col h2 { font-family: var(--font-display); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }
.footer-col a { display: block; color: var(--text-soft); font-size: 15px; margin-bottom: 11px; transition: color .18s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 13.5px; }
.footer-bottom .disclaimer { max-width: 620px; }
.article-hero { padding: 60px 0 20px; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--text-muted); margin-bottom: 22px; flex-wrap: wrap; }
.breadcrumb a { color: var(--text-soft); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .sep { opacity: .5; }
.article-hero h1 { font-size: clamp(30px, 5vw, 50px); max-width: 20ch; margin-bottom: 18px; }
.article-meta { display: flex; gap: 16px; align-items: center; color: var(--text-muted); font-size: 14px; }
.article-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); }
.prose { max-width: 760px; margin-inline: auto; font-size: 17.5px; }
.prose > * + * { margin-top: 22px; }
.prose h2 { font-size: clamp(24px, 3.4vw, 32px); margin-top: 52px; margin-bottom: 4px; }
.prose h3 { font-size: 21px; margin-top: 34px; }
.prose p { color: var(--text-soft); }
.prose strong { color: var(--text); }
.prose a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(236,72,153,.4); }
.prose a:hover { text-decoration-color: var(--pink); }
.prose ul, .prose ol { padding-left: 4px; color: var(--text-soft); list-style: none; }
.prose ul li, .prose ol li { position: relative; padding-left: 30px; margin-top: 12px; }
.prose ul li::before { content: ""; position: absolute; left: 6px; top: .68em; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.prose ol { counter-reset: li; }
.prose ol li { counter-increment: li; }
.prose ol li::before { content: counter(li); position: absolute; left: 0; top: 0; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--pink); width: 22px; height: 22px; border-radius: 7px; background: var(--grad-soft); display: grid; place-items: center; margin-top: 2px; }
.prose blockquote { border-left: 3px solid var(--pink); padding: 6px 0 6px 22px; color: var(--text); font-size: 20px; font-family: var(--font-display); }
.callout {
border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 28px;
background: linear-gradient(135deg, rgba(139,92,246,.08), rgba(236,72,153,.08));
margin-top: 40px;
}
.callout h3 { margin-top: 0; }
.prose .lead-p { font-size: 20px; color: var(--text); }
.post-nav { max-width: 760px; margin: 60px auto 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 30px; }
.post-nav a { color: var(--text-soft); font-size: 15px; max-width: 46%; }
.post-nav a:hover { color: var(--text); }
.post-nav a small { display: block; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; }
.post-card {
display: flex; flex-direction: column; overflow: hidden;
border: 1px solid var(--border); border-radius: var(--radius);
background: linear-gradient(180deg, var(--surface), var(--bg-2)); transition: transform .22s, border-color .22s;
}
.post-card:hover { transform: translateY(-5px); border-color: var(--border-strong); }
.post-card .thumb { aspect-ratio: 16/9; background: var(--grad-soft); position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.post-card .thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.post-card .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card .body { padding: 26px; }
.post-card .kw { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); }
.post-card h2 { font-size: 21px; margin: 12px 0 10px; }
.post-card p { color: var(--text-muted); font-size: 15px; margin-bottom: 18px; }
.post-card .read { color: var(--text-soft); font-size: 14px; font-weight: 600; font-family: var(--font-display); display:inline-flex; align-items:center; gap:7px; }
.post-card .read svg { width: 16px; height: 16px; }
.legal { max-width: 780px; margin-inline: auto; }
.legal h1 { font-size: clamp(30px,4vw,44px); margin-bottom: 10px; }
.legal .updated { color: var(--text-muted); font-size: 14px; margin-bottom: 40px; }
.legal h2 { font-size: 22px; margin: 38px 0 12px; }
.legal p, .legal li { color: var(--text-soft); font-size: 16.5px; }
.legal ul { padding-left: 4px; list-style: none; margin-top: 14px; }
.legal ul li { position: relative; padding-left: 26px; margin-bottom: 12px; }
.legal ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }
.legal strong { color: var(--text); }
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (max-width: 960px) {
.grid-4 { grid-template-columns: repeat(2,1fr); }
.promo-grid { grid-template-columns: repeat(2,1fr); }
.steps { grid-template-columns: 1fr; }
.safe { grid-template-columns: 1fr; padding: 34px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
body { font-size: 16px; }
.section { padding: 68px 0; }
.container { padding-inline: 18px; }
.nav-links, .nav-cta .btn-ghost { display: none; }
.nav-toggle { display: grid; }
.nav-cta { gap: 8px; }
.nav-cta .btn-primary { padding: 10px 16px; font-size: 14.5px; }
.brand { font-size: 17px; }
.brand-logo { height: 34px; }
.nav.open .nav-links {
display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0;
background: rgba(10,10,16,.98); border-bottom: 1px solid var(--border); padding: 10px 24px 20px;
backdrop-filter: blur(14px);
}
.nav.open .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--border); width: 100%; }
.grid-2, .grid-3, .grid-4, .price-grid, .promo-grid { grid-template-columns: 1fr; }
.value.grid-4 { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.cta-band { padding: 44px 22px; }
.prose ol li, .prose ul li { padding-left: 28px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; scroll-behavior: auto !important; }
.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}
.xb-section, .xb-landing { --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; }
.xb-nav { display: inline-flex; align-items: center; gap: 6px; }
.xb-nav span { color: #d9c8ff; background: #8b5cf627; border: 1px solid #8b5cf644; border-radius: 4px; padding: 2px 4px; font-size: 9px; text-transform: uppercase; }
.home .nav-links { gap: 20px; }
.xb-section { padding-top: 0; scroll-margin-top: 96px; }
.xb-section [hidden] { display: none !important; }
.xb-section .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.xb-shell { position: relative; isolation: isolate; padding: 32px 40px 24px; border: 1px solid #ffffff20; border-radius: 28px; background: radial-gradient(ellipse at 100% 0%, #6d36b524, transparent 40%), linear-gradient(160deg, #14131c, #0a0a10 55%); box-shadow: 0 24px 100px #0005; }
.xb-shell::before { content: ''; position: absolute; top: -1px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, #bba0ff, #ec4899, transparent); }
.xb-topline { display: flex; justify-content: space-between; gap: 12px; color: #b0a9be; font: 10px/1.5 var(--font-mono); letter-spacing: .14em; }
.xb-topline > span:first-child { display: flex; align-items: center; gap: 9px; }
.xb-topline i { width: 6px; height: 6px; border-radius: 50%; background: #b99cff; box-shadow: 0 0 12px #a980ff; }
.xb-edition { color: #888094; }
.xb-intro { display: grid; grid-template-columns: 1.06fr 1fr; gap: 20px; align-items: center; padding: 50px 0 38px; }
.xb-copy, .xb-stage, .xb-features, .xb-offer { min-width: 0; }
.xb-label { color: #bda3ef; font: 10px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; }
.xb-copy :is(h1,h2) { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 4.2vw, 57px); line-height: 1.07; letter-spacing: -.055em; margin: 18px 0 22px; }
.xb-copy :is(h1,h2) > span { color: #cbb7ff; background: linear-gradient(110deg, #e2d5ff 5%, #ad87ff 50%, #f082bd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.xb-lead { max-width: 450px; color: #d0cbd9; font-size: 16px; line-height: 1.8; }
.xb-audience { max-width: 380px; margin: 14px 0 0; font-size: 12px; color: #a9a1b7; line-height: 1.7; }
.xb-intro-actions { display: flex; align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 28px; }
.xb-intro-actions .btn { font-size: 13px; gap: 22px; padding: 14px 20px; }
.xb-intro-actions > span { font-size: 11px; color: #a9a1b7; }
.xb-stage { height: 434px; position: relative; background: radial-gradient(ellipse at 52% 48%, #9c6bff1b, transparent 65%); }
.xb-stage-meta { position: absolute; top: 0; left: 12px; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #a69bba; font: 8px/1.4 var(--font-mono); letter-spacing: .1em; }
.xb-stage-meta button { color: #bfb5ce; border: 1px solid #ffffff20; background: #13111d; border-radius: 20px; padding: 7px 10px; font: 10px/1.2 var(--font-body); cursor: pointer; letter-spacing: 0; }
.xb-stage-meta button:hover { border-color: #ac83f9; color: white; }
.xb-stage-meta button:disabled { cursor: default; }
.xb-orbit { position: absolute; width: 340px; height: 340px; left: 50%; top: 50%; margin: -170px; border: 1px solid #c2a1ff15; border-radius: 50%; transform: rotate(-25deg) scaleY(.8); }
.xb-orbit-one::after { content: ''; position: absolute; width: 7px; height: 7px; background: #dbbaff; box-shadow: 0 0 18px #bb88ff; border-radius: 50%; top: 58px; left: 32px; }
.xb-orbit-two { width: 420px; height: 420px; margin: -210px; border-style: dashed; border-color: #c2a1ff12; transform: rotate(25deg) scaleY(.8); }
.xb-mark { position: absolute; z-index: 2; top: 43px; right: 23px; width: 122px; height: 122px; display: grid; place-items: center; border: 1px solid #ffffff32; border-radius: 29px; background: linear-gradient(150deg, #2b2735, #0d0c11 70%); box-shadow: 0 20px 45px #0009, inset 0 1px 0 #ffffff25; transform: rotate(10deg); }
.xb-mark svg { width: 65px; height: 65px; color: #f6f4f9; }
.xb-scan-card { width: 249px; position: absolute; z-index: 1; top: 77px; left: 18px; padding: 16px; background: linear-gradient(130deg, #25222f, #17141f); border: 1px solid #d0b5ff38; border-radius: 16px; transform: rotate(-6deg); box-shadow: 0 25px 45px #0007; }
.xb-card-heading { display: flex; align-items: center; gap: 8px; }
.xb-avatar { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle at 34% 25%, #efc4d9, #ac80ca 38%, #684887 70%); border: 2px solid #e9cdfa3b; }
.xb-card-heading strong { display: block; font-size: 11px; font-weight: 600; }
.xb-card-heading div > span { display: block; color: #b9aec9; font-size: 8px; margin-top: 2px; }
.xb-check { color: #c7aff8; margin-left: auto; font-size: 12px; }
.xb-media { height: 106px; margin: 13px 0; position: relative; border-radius: 8px; overflow: hidden; background: radial-gradient(ellipse at 70% 20%, #a784af 0%, transparent 48%), radial-gradient(ellipse at 24% 95%, #baa8de 0%, transparent 45%), linear-gradient(135deg, #332c54, #70436b 55%, #252035); }
.xb-media-lines { position: absolute; width: 170px; height: 170px; border: 1px solid #e6c9ff40; border-radius: 50%; top: -110px; right: -30px; box-shadow: 0 0 0 18px #ffffff08, 0 0 0 38px #ffffff06, 0 0 0 60px #ffffff04; }
.xb-media > span { position: absolute; left: 9px; bottom: 8px; background: #15101d99; border-radius: 3px; padding: 3px 5px; color: #f1e6fc; font: 7px/1.5 var(--font-mono); letter-spacing: .12em; }
.xb-media > i { position: absolute; left: 0; right: 0; height: 2px; top: 35%; background: linear-gradient(90deg, transparent, #e5d6ff, transparent); box-shadow: 0 0 20px 8px #c6a4ff55; }
.xb-card-tags { display: flex; gap: 5px; }
.xb-card-tags span { font-size: 8px; padding: 4px 6px; border-radius: 4px; background: #9a73d61c; color: #d2baf5; border: 1px solid #b996ed20; }
.xb-reply-card { position: absolute; z-index: 3; top: 239px; right: 4px; display: flex; gap: 12px; width: 234px; padding: 17px; background: linear-gradient(135deg, #282034, #1a1623); border: 1px solid #cba9ff45; border-radius: 13px; box-shadow: 0 15px 45px #0006; transform: rotate(4deg); }
.xb-reply-icon { display: grid; place-items: center; width: 31px; height: 31px; flex-shrink: 0; color: #e0d1ff; font-size: 24px; border: 1px solid #b294d85c; border-radius: 8px; background: #a277ff1a; }
.xb-reply-card strong, .xb-queue-card strong { display: block; font-weight: 500; font-size: 11px; }
.xb-reply-card div > span, .xb-queue-card div > span { display: block; color: #bdb1cc; font-size: 9px; margin-top: 4px; }
.xb-typing { display: flex; gap: 4px; margin-top: 11px; }
.xb-typing i { width: 4px; height: 4px; background: #c2a4f5; border-radius: 50%; }
.xb-queue-card { position: absolute; z-index: 3; top: 347px; left: 31px; right: 28px; display: flex; align-items: center; gap: 10px; padding: 13px 15px; background: linear-gradient(100deg, #151a20, #16131f); border: 1px solid #ffffff20; border-radius: 10px; box-shadow: 0 10px 35px #0004; }
.xb-queue-icon { color: #9edac4; font-size: 22px; font-weight: 300; }
.xb-queue-check { color: #98d8bd; font-size: 14px; margin-left: auto; }
.xb-stage-caption { position: absolute; bottom: 0; width: 100%; text-align: center; color: #a297b2; font-size: 8px; }
.xb-mark { animation: xb-logo-float 7s ease-in-out infinite; }
.xb-scan-card { animation: xb-card-float 7s ease-in-out infinite; }
.xb-reply-card { animation: xb-reply-float 7s ease-in-out infinite; }
.xb-media > i { animation: xb-scan 5s ease-in-out infinite; }
.xb-typing i { animation: xb-type 1.4s ease-in-out infinite; }
.xb-typing i:nth-child(2) { animation-delay: .18s; }.xb-typing i:nth-child(3) { animation-delay: .36s; }
.xb-stage * { animation-play-state: paused; }
.xb-stage.is-playing * { animation-play-state: running; }
@keyframes xb-logo-float { 0%,100% { transform: translateY(0) rotate(10deg); } 50% { transform: translateY(-10px) rotate(5deg); } }
@keyframes xb-card-float { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(6px) rotate(-3deg); } }
@keyframes xb-reply-float { 0%,100% { transform: translateY(0) rotate(4deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes xb-scan { 0%,100% { transform: translateY(-30px); opacity: .1; } 50% { transform: translateY(55px); opacity: .9; } }
@keyframes xb-type { 0%,70%,100% { transform: translateY(0); opacity: .4; } 35% { transform: translateY(-3px); opacity: 1; } }
.xb-spec-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 25px 0; border-top: 1px solid #ffffff12; border-bottom: 1px solid #ffffff12; gap: 15px; }
.xb-spec-strip > div { padding-left: 22px; border-left: 1px solid #ffffff12; }
.xb-spec-strip > div:first-child { padding-left: 0; border-left: 0; }
.xb-spec-strip strong { display: block; font: 500 32px/1.2 var(--font-display); letter-spacing: -.04em; color: #eee9f7; }
.xb-spec-strip strong span { font-size: 14px; color: #ad9cbe; padding-left: 4px; letter-spacing: 0; }
.xb-spec-strip > div > span { font-size: 10px; color: #b4a9c1; display: block; margin-top: 7px; }
.xb-details-grid { display: grid; grid-template-columns: minmax(0,1fr) 314px; gap: 40px; align-items: start; padding: 42px 0; }
.xb-feature-heading :is(h2,h3) { margin: 9px 0 25px; font: 500 25px/1.3 var(--font-display); letter-spacing: -.03em; }
.xb-feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 25px; }
.xb-feature-no { font: 9px/1.5 var(--font-mono); letter-spacing: .12em; color: #b19ccd; }
.xb-feature :is(h3,h4), .xb-control :is(h3,h4) { font: 500 16px/1.4 var(--font-display); margin: 9px 0 9px; letter-spacing: -.02em; }
.xb-feature p, .xb-control p, .xb-more p { color: #bcb3c9; font-size: 12px; line-height: 1.85; margin: 0; }
.xb-control { display: flex; align-items: flex-start; gap: 16px; margin-top: 30px; padding: 20px; background: #a67cff08; border: 1px solid #c9acff1c; border-radius: 12px; }
.xb-control-symbol { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: #ae86ff15; color: #ceb4fa; font-size: 21px; }
.xb-control :is(h3,h4) { margin-top: 0; }
.xb-more { margin-top: 18px; border-bottom: 1px solid #ffffff12; }
.xb-more summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 0; color: #dfd5ed; font-size: 12px; cursor: pointer; list-style: none; }
.xb-more summary::-webkit-details-marker { display: none; }
.xb-more summary > span { font-size: 20px; color: #bea4e7; }
.xb-more[open] summary > span { transform: rotate(45deg); }
.xb-more > div { padding-bottom: 20px; }
.xb-more p + p { margin-top: 12px; }
.xb-offer { scroll-margin-top: 96px; padding: 25px 23px 22px; border: 1px solid #bd95ff65; border-radius: 18px; background: radial-gradient(ellipse at 100% 0, #b487ff23, transparent 60%), #16111f; box-shadow: 0 0 60px -25px #9d6ce955, inset 0 1px 0 #ffffff17; }
.xb-offer-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; color: #d1bced; }
.xb-saving { font: 10px/1.5 var(--font-mono); font-weight: 600; color: #e9dbff; background: #a475e32a; border: 1px solid #b997ed40; padding: 4px 8px; border-radius: 5px; }
.xb-offer :is(h2,h3) { font: 500 28px/1.2 var(--font-display); margin: 24px 0 6px; letter-spacing: -.04em; }
.xb-licence { color: #bbaccb; font-size: 12px; margin: 0 0 19px; }
.xb-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.xb-price strong { font: 500 49px/1.15 var(--font-display); letter-spacing: -.05em; color: #f5f0ff; }
.xb-price s { color: #b5a6c5; font-size: 17px; text-decoration-thickness: 1px; }
.xb-save-line { color: #cdb2f7; font-size: 11px; margin: 8px 0 24px; }
.xb-deadline { margin-top: 20px; padding-top: 20px; border-top: 1px solid #ffffff14; }
.xb-deadline .xb-label { font-size: 9px; }
.xb-deadline p { font-size: 13px; line-height: 1.6; margin: 6px 0 0; color: #e8dff3; }
.xb-deadline p span { font-size: 10px; color: #b4a3c7; }
.xb-countdown { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 20px 0; padding: 13px 14px; background: #08060d66; border: 1px solid #ffffff0d; border-radius: 9px; }
.xb-countdown > div { text-align: center; }
.xb-countdown strong { display: block; font: 400 23px/1.2 var(--font-mono); color: #f3e9ff; }
.xb-countdown span { display: block; font: 7px/1.4 var(--font-mono); color: #bbadca; letter-spacing: .12em; margin-top: 6px; }
.xb-countdown > i { font-style: normal; color: #8d709d; }
.xb-buy { display: flex; width: 100%; padding: 15px 10px; font-size: 13px; white-space: normal; text-align: center; margin-top: 20px; }
.xb-contact { font-size: 10px; text-align: center; line-height: 1.7; color: #b9aaca; margin: 13px 0 22px; }
.xb-contact a { color: #e8dafa; font-size: 12px; }
.xb-included { list-style: none; padding: 19px 0 0; margin: 0; border-top: 1px solid #ffffff14; }
.xb-included li { font-size: 11px; color: #c9bdd8; line-height: 1.7; padding-left: 15px; position: relative; margin: 0 0 10px; }
.xb-included li::before { content: ''; position: absolute; left: 0; top: 6px; width: 4px; height: 4px; border: 1px solid #bc9fe2; border-radius: 1px; }
.xb-cost-note { font-size: 10px; line-height: 1.7; color: #ad9ebd; margin: 18px 0 0; }
.xb-next { display: flex; align-items: center; gap: 20px; border: 1px solid #ffffff15; border-radius: 12px; padding: 22px; background: linear-gradient(90deg, #aa70ed0d, transparent); }
.xb-next-icon { font: 300 28px/1 var(--font-display); color: #ba97ed; }
.xb-next p { font: 500 16px/1.4 var(--font-display); color: #e8dff2; margin: 6px 0 0; }
.xb-next a { margin-left: auto; flex-shrink: 0; font-size: 12px; color: #cbb3ec; }
.xb-next a span { margin-left: 16px; }
.xb-independent { text-align: center; font-size: 9px; color: #a193b1; margin: 21px 0 0; }
.xb-section :is(a,button,summary):focus-visible { outline: 2px solid #c9afff; outline-offset: 5px; border-radius: 5px; }
@media (min-width: 721px) and (max-width: 1080px) { .home .nav-links { gap: 13px; }.home .nav-links a { font-size: 12px; }.home .nav-cta .btn { font-size: 12px; padding: 10px 14px; }.xb-nav span { display: none; } }
@media (max-width: 980px) {
.xb-shell { padding-inline: 28px; }.xb-intro { gap: 0; }.xb-copy :is(h1,h2) { font-size: 41px; }.xb-lead { font-size: 14px; }.xb-mark { right: 3px; width: 100px; height: 100px; }.xb-mark svg { width: 52px; height: 52px; }.xb-scan-card { left: 0; width: 224px; }.xb-reply-card { right: 0; width: 215px; }.xb-queue-card { left: 10px; right: 0; }.xb-orbit-two { width: 320px; height: 320px; margin: -160px; }.xb-details-grid { grid-template-columns: minmax(0,1fr) 290px; gap: 25px; }.xb-feature-grid { gap: 23px 17px; }.xb-feature :is(h3,h4) { font-size: 15px; }.xb-offer { padding-inline: 20px; }.xb-price strong { font-size: 44px; }.xb-price s { font-size: 16px; }
}
@media (max-width: 780px) {
.xb-intro { grid-template-columns: 1fr; padding-top: 36px; }.xb-copy { text-align: center; }.xb-copy :is(h1,h2) { font-size: clamp(37px,7.5vw,54px); }.xb-lead, .xb-audience { margin-left: auto; margin-right: auto; }.xb-intro-actions { align-items: center; }.xb-stage { width: min(100%,440px); margin: 38px auto 0; }.xb-mark { right: 23px; width: 122px; height: 122px; }.xb-mark svg { width: 65px; height: 65px; }.xb-scan-card { left: 18px; width: 249px; }.xb-reply-card { right: 4px; width: 234px; }.xb-queue-card { left: 31px; right: 28px; }.xb-details-grid { grid-template-columns: 1fr; gap: 30px; }.xb-offer { display: block; max-width: 440px; width: 100%; margin: 0 auto; padding: 28px; }.xb-price strong { font-size: 54px; }.xb-offer :is(h2,h3) { margin-top: 20px; }.xb-feature p, .xb-control p, .xb-more p { font-size: 13px; }.xb-feature :is(h3,h4) { font-size: 17px; }.xb-next { flex-wrap: wrap; }.xb-next a { margin-left: 48px; }.xb-edition { display: none; }
}
@media (max-width: 480px) {
.xb-section > .container { padding-inline: 12px; }.xb-shell { padding: 24px 19px 20px; border-radius: 20px; }.xb-topline { font-size: 8px; }.xb-copy :is(h1,h2) { font-size: clamp(32px,9vw,41px); }.xb-intro-actions .btn { white-space: normal; text-align: center; font-size: 12px; gap: 10px; }.xb-stage { height: 408px; }.xb-stage-meta { left: 0; font-size: 7px; }.xb-stage-meta button { font-size: 9px; }.xb-mark { width: 89px; height: 89px; top: 50px; right: 4px; border-radius: 22px; }.xb-mark svg { width: 46px; height: 46px; }.xb-scan-card { width: 215px; top: 84px; left: 2px; padding: 13px; }.xb-reply-card { width: 207px; top: 239px; right: 0; padding: 14px; }.xb-reply-card strong, .xb-queue-card strong { font-size: 10px; }.xb-queue-card { left: 0; right: 0; top: 336px; padding: 12px; }.xb-stage-caption { font-size: 7px; }.xb-orbit { width: 245px; height: 245px; margin: -122.5px; }.xb-orbit-two { width: 265px; height: 265px; margin: -132.5px; }.xb-spec-strip { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 12px; }.xb-spec-strip > div { padding-left: 15px; }.xb-spec-strip > div:nth-child(3) { padding-left: 0; border-left: 0; }.xb-spec-strip strong { font-size: 30px; }.xb-spec-strip > div > span { font-size: 9px; }.xb-feature-grid { grid-template-columns: 1fr; gap: 25px; }.xb-feature-heading :is(h2,h3) { font-size: 26px; }.xb-feature :is(h3,h4) { margin-top: 7px; }.xb-control { padding: 16px; gap: 12px; }.xb-control-symbol { display: none; }.xb-offer { padding: 22px 19px; }.xb-price strong { font-size: 47px; }.xb-next { padding: 19px 16px; gap: 12px; }.xb-next-icon { display: none; }.xb-next p { font-size: 15px; }.xb-next a { margin-left: 0; }.xb-independent { font-size: 8px; }
}
@media (max-width: 360px) { .xb-orbit-two { width: 235px; height: 235px; margin: -117.5px; } }
.xb-product-link { color: #c4ade8; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.xb-breadcrumb { display: flex; gap: 12px; padding-top: 30px; padding-bottom: 22px; font-size: 12px; color: #a99fb8; }
.xb-breadcrumb a { color: #cfb5f5; }
.xb-landing .xb-section { padding-bottom: 64px; }
.xb-landing .xb-copy :is(h1,h2) { font-size: clamp(36px,4.1vw,53px); }
.xb-skip { position: fixed; z-index: 100; left: 18px; top: 12px; transform: translateY(-150%); color: #fff; background: #412269; padding: 12px 18px; border: 2px solid #dac4ff; border-radius: 8px; }
.xb-skip:focus { transform: none; }
.xb-faq-section { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 70px; scroll-margin-top: 100px; padding-bottom: 52px; }
.xb-faq-intro h2 { font-size: clamp(26px,3vw,38px); line-height: 1.2; font-weight: 500; letter-spacing: -.04em; margin: 15px 0 20px; }
.xb-faq-intro p { color: #bdb2c9; font-size: 14px; line-height: 1.8; }
.xb-faq-intro .btn { margin-top: 22px; font-size: 13px; }
.xb-faq-item { border-bottom: 1px solid #ffffff17; }
.xb-faq-item:first-child { border-top: 1px solid #ffffff17; }
.xb-faq-item summary { display: flex; justify-content: space-between; gap: 18px; align-items: center; cursor: pointer; padding: 20px 0; font-size: 14px; font-weight: 500; line-height: 1.6; color: #e2d9ed; list-style: none; }
.xb-faq-item summary::-webkit-details-marker { display: none; }
.xb-faq-item summary span { font-size: 23px; color: #c4a3f2; flex-shrink: 0; }
.xb-faq-item[open] summary span { transform: rotate(45deg); }
.xb-faq-item p { color: #bdb2c9; font-size: 13px; line-height: 1.9; padding: 0 22px 24px 0; margin: 0; }
.xb-faq-item summary:focus-visible { outline: 2px solid #c9afff; outline-offset: 4px; }
.xb-related { padding-bottom: 64px; }
.xb-related p { padding: 22px 25px; border: 1px solid #ffffff15; border-radius: 10px; color: #bdb2c9; font-size: 13px; line-height: 1.8; }
.xb-related a { color: #d2b9f8; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 780px) { .xb-faq-section { grid-template-columns: 1fr; gap: 28px; }.xb-landing .xb-section { padding-bottom: 42px; }.xb-faq-intro h2 { max-width: 450px; } }
@media (max-width: 360px) { .xb-landing .xb-copy h1 { font-size: 31px; } }
@media (prefers-reduced-motion: reduce) { .xb-stage * { animation: none !important; }.xb-section * { scroll-behavior: auto !important; } }
.xb-section, .xb-landing {
--xb-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
--xb-body: 'IBM Plex Sans', Arial, sans-serif;
--font-display: var(--xb-display);
--font-body: var(--xb-body);
font-family: var(--xb-body);
}
.xb-shell { padding: 36px 40px 28px; }
.xb-topline { align-items: center; gap: 22px; padding-bottom: 25px; border-bottom: 1px solid #c9a5ff28; font-family: var(--xb-body); letter-spacing: 0; }
.xb-brand-lockup { display: flex; align-items: center; gap: 15px; }
.xb-brand-x { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 auto; border: 1px solid #d6c0fb66; border-radius: 12px; color: #f8f5ff; background: linear-gradient(140deg,#3d2f53,#121017); }
.xb-brand-x svg { width: 29px; height: 29px; }
.xb-brand-name { display: block; color: #d8c9ed; font-size: 15px; line-height: 1.3; font-weight: 500; }
.xb-wordmark { display: block; color: #fff; font: 700 39px/.95 var(--xb-display); letter-spacing: .025em; margin-top: 3px; }
.xb-edition { display: inline-flex; align-items: center; color: #e7d5ff; border-left: 2px solid #bd85ff; padding: 6px 0 6px 16px; font: 700 23px/1.1 var(--xb-display); text-transform: uppercase; letter-spacing: .055em; }
.xb-intro { padding-top: 36px; padding-bottom: 40px; gap: 24px; }
.xb-label { color: #d5b7fc; font: 600 14px/1.45 var(--xb-body); letter-spacing: .055em; }
.xb-copy :is(h1,h2), .xb-landing .xb-copy :is(h1,h2) { font: 700 clamp(58px,6.3vw,82px)/.96 var(--xb-display); text-transform: uppercase; letter-spacing: -.015em; margin: 21px 0 25px; }
.xb-copy :is(h1,h2) > span { background-image: linear-gradient(110deg,#d7c3ff,#c896ff 48%,#ff84c2); }
.xb-lead { font-size: 18px; line-height: 1.65; color: #e0d9e9; max-width: 500px; }
.xb-audience { max-width: 470px; font-size: 16px; line-height: 1.55; color: #c5b9d3; margin-top: 18px; }
.xb-intro-actions { gap: 16px; margin-top: 28px; }
.xb-intro-actions .btn { font: 600 16px/1.4 var(--xb-body); padding: 16px 23px; border-radius: 10px; gap: 20px; }
.xb-intro-actions .btn > span { font-size: 24px; line-height: 1; }
.xb-intro-actions > span, .xb-product-link { font-size: 14px; line-height: 1.5; color: #d3bbed; }
.xb-stage { height: 520px; }
.xb-stage-meta { left: 0; color: #c9bad8; font: 500 12px/1.4 var(--xb-body); letter-spacing: .06em; }
.xb-stage-meta button { padding: 10px 12px; font: 500 13px/1.3 var(--xb-body); }
.xb-mark { width: 130px; height: 130px; right: 7px; top: 55px; }
.xb-scan-card { width: 280px; top: 89px; left: 8px; }
.xb-card-heading strong { font-size: 15px; }
.xb-card-heading div > span { font-size: 12px; line-height: 1.35; }
.xb-avatar { width: 34px; height: 34px; }
.xb-media { height: 117px; }
.xb-media > span { font: 500 10px/1.4 var(--xb-body); letter-spacing: .04em; }
.xb-card-tags { flex-wrap: wrap; gap: 6px; }
.xb-card-tags span { font-size: 11px; line-height: 1.2; }
.xb-reply-card { top: 279px; right: 0; width: 254px; padding: 17px; }
.xb-reply-card strong, .xb-queue-card strong { font-size: 14px; line-height: 1.3; font-weight: 600; }
.xb-reply-card div > span, .xb-queue-card div > span { font-size: 12px; line-height: 1.35; }
.xb-queue-card { top: 398px; left: 10px; right: 0; padding: 14px; }
.xb-stage-caption { font-size: 11px; line-height: 1.5; color: #b9a9c8; }
.xb-spec-strip { gap: 18px; padding: 27px 0; }
.xb-spec-strip strong { font: 700 52px/1 var(--xb-display); letter-spacing: -.01em; }
.xb-spec-strip strong span { font: 500 17px/1.2 var(--xb-body); color: #c7b5d7; }
.xb-spec-strip > div > span { font-size: 14px; line-height: 1.4; color: #c5b6d3; }
.xb-details-grid { grid-template-columns: minmax(0,1fr) 334px; gap: 35px; padding-top: 44px; }
.xb-feature-heading :is(h2,h3) { font: 700 40px/1.05 var(--xb-display); letter-spacing: 0; margin: 13px 0 30px; }
.xb-feature-grid { gap: 30px 25px; }
.xb-feature-no { color: #ceb0f3; font: 600 13px/1.4 var(--xb-body); letter-spacing: .055em; }
.xb-feature :is(h3,h4), .xb-control :is(h3,h4) { font: 700 28px/1.12 var(--xb-display); letter-spacing: 0; margin-top: 10px; }
.xb-feature p, .xb-control p, .xb-more p { font-size: 16px; line-height: 1.7; color: #c9c0d4; }
.xb-control { padding: 23px; margin-top: 33px; }
.xb-control :is(h3,h4) { margin-top: 0; }
.xb-more summary { font-size: 16px; padding: 19px 0; }
.xb-offer { padding: 28px 25px; }
.xb-offer-top { font-size: 14px; color: #ddc4fa; }
.xb-saving { font: 600 13px/1.4 var(--xb-body); padding: 6px 8px; }
.xb-offer :is(h2,h3) { font: 700 45px/1 var(--xb-display); letter-spacing: 0; margin-top: 27px; }
.xb-licence { font-size: 16px; margin: 10px 0 22px; }
.xb-price { column-gap: 13px; }
.xb-price strong { font: 700 80px/1 var(--xb-display); letter-spacing: -.02em; }
.xb-price s { font-size: 23px; }
.xb-save-line { font-size: 14px; margin-top: 12px; }
.xb-deadline .xb-label { font-size: 13px; }
.xb-deadline p { font-size: 16px; line-height: 1.5; margin-top: 10px; }
.xb-deadline p span { font-size: 13px; }
.xb-countdown { padding: 17px 13px; }
.xb-countdown strong { font: 700 40px/1 var(--xb-display); }
.xb-countdown span { font: 600 11px/1.4 var(--xb-body); letter-spacing: .03em; }
.xb-buy { font: 600 17px/1.4 var(--xb-body); border-radius: 10px; padding: 17px 12px; }
.xb-contact { font-size: 13px; margin-top: 16px; }
.xb-contact a { font-size: 16px; }
.xb-included li { font-size: 14px; line-height: 1.6; margin-bottom: 13px; }
.xb-included li::before { top: 9px; }
.xb-cost-note { font-size: 13px; line-height: 1.6; }
.xb-next { padding: 26px; }
.xb-next .xb-label { font-size: 13px; }
.xb-next p { font: 700 28px/1.15 var(--xb-display); }
.xb-next a { font-size: 15px; }
.xb-independent { font-size: 12px; line-height: 1.5; margin-top: 25px; }
.xb-faq-intro h2 { font: 700 46px/1.04 var(--xb-display); letter-spacing: 0; }
.xb-faq-intro p, .xb-faq-item p, .xb-related p { font-size: 16px; line-height: 1.7; }
.xb-faq-intro .btn { font: 600 16px/1.4 var(--xb-body); border-radius: 10px; }
.xb-faq-item summary { font-size: 17px; }
.xb-breadcrumb { font-size: 14px; }
.xb-landing .nav-links a { font-size: 14px; }
.xb-landing .nav-cta .btn { font-family: var(--xb-body); font-size: 15px; font-weight: 600; }
@media (min-width: 721px) and (max-width: 980px) {
.xb-landing .nav-links { display: none; }
.xb-landing .nav-toggle { display: grid; }
.xb-landing .nav.open .nav-links { display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; background: #0a0a10fa; border-bottom: 1px solid var(--border); padding: 10px 24px 20px; }
.xb-landing .nav.open .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--border); width: 100%; }
}
@media (max-width: 1100px) and (min-width: 981px) {
.xb-copy :is(h1,h2), .xb-landing .xb-copy :is(h1,h2) { font-size: 65px; }
.xb-scan-card { width: 260px; left: 0; }.xb-mark { width: 110px; height: 110px; }
.xb-details-grid { grid-template-columns: minmax(0,1fr) 314px; gap: 28px; }
}
@media (max-width: 980px) {
.xb-shell { padding-inline: 28px; }
.xb-intro { grid-template-columns: 1fr; gap: 0; }
.xb-copy { text-align: center; }
.xb-copy :is(h1,h2), .xb-landing .xb-copy :is(h1,h2) { font-size: clamp(64px,8vw,82px); }
.xb-lead, .xb-audience { margin-left: auto; margin-right: auto; }
.xb-intro-actions { align-items: center; }
.xb-stage { width: min(100%,480px); margin: 40px auto 0; }
.xb-details-grid { grid-template-columns: 1fr; gap: 35px; }
.xb-offer { width: 100%; max-width: 520px; margin: 0 auto; }
.xb-edition { display: inline-flex; }
.xb-next { flex-wrap: wrap; }.xb-next a { margin-left: 0; }
}
@media (max-width: 600px) {
.xb-shell { padding: 25px 22px; }
.xb-brand-lockup { gap: 12px; }.xb-brand-x { width: 48px; height: 48px; }.xb-brand-name { font-size: 14px; }.xb-wordmark { font-size: 35px; }
.xb-edition { font-size: 19px; letter-spacing: .025em; max-width: 100px; padding-left: 12px; }
.xb-topline { gap: 12px; padding-bottom: 22px; }
.xb-copy :is(h1,h2), .xb-landing .xb-copy :is(h1,h2) { font-size: clamp(49px,11.4vw,68px); line-height: .98; }
.xb-lead { font-size: 17px; }.xb-audience { font-size: 16px; }
.xb-spec-strip { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 15px; }
.xb-spec-strip > div:nth-child(3) { border-left: 0; padding-left: 0; }
.xb-spec-strip strong { font-size: 48px; }.xb-spec-strip > div > span { font-size: 13px; }
.xb-feature-grid { grid-template-columns: 1fr; gap: 28px; }
.xb-feature-heading :is(h2,h3) { font-size: 37px; }
.xb-feature :is(h3,h4) { font-size: 29px; }
.xb-offer { padding: 25px 21px; }.xb-price strong { font-size: 78px; }
.xb-stage { height: 560px; }
.xb-stage-meta { font-size: 11px; }.xb-stage-meta button { font-size: 12px; }
.xb-mark { width: 97px; height: 97px; top: 55px; right: 4px; }
.xb-scan-card { width: min(260px,calc(100% - 20px)); top: 95px; left: 5px; }
.xb-reply-card { width: min(250px,calc(100% - 12px)); top: 295px; right: 0; padding: 15px; }
.xb-queue-card { left: 0; top: 412px; padding: 12px; gap: 8px; }
.xb-reply-card strong, .xb-queue-card strong { font-size: 13px; }
.xb-reply-card div > span, .xb-queue-card div > span { font-size: 12px; }
.xb-stage-caption { font-size: 11px; bottom: 6px; }
.xb-next p { font-size: 28px; }.xb-next { padding: 22px; }
.xb-faq-intro h2 { font-size: 40px; }
}
@media (max-width: 360px) {
.xb-shell { padding-inline: 17px; }
.xb-brand-name { font-size: 13px; }.xb-brand-x { width: 42px; height: 46px; }.xb-brand-x svg { width: 24px; }.xb-brand-lockup { gap: 9px; }
.xb-wordmark { font-size: 33px; }.xb-edition { font-size: 18px; max-width: 88px; padding-left: 10px; }
.xb-label { font-size: 13px; }.xb-intro-actions .btn { padding-inline: 14px; font-size: 16px; gap: 10px; }
.xb-stage { height: 590px; }.xb-reply-card { top: 307px; }.xb-queue-card { top: 428px; }.xb-stage-caption { bottom: 6px; }
.xb-price strong { font-size: 72px; }.xb-price s { font-size: 21px; }.xb-offer { padding-inline: 18px; }
}