/* Final homepage — approved TeamSpeak 6 visual direction */
:root { --container: 1280px; }
body { background:#01050b; }
.main-header { position:relative; background:#020711; }
.header-inner { min-height:64px; grid-template-columns:160px 1fr auto; }
.brand img { width:138px; max-height:40px; }
.main-nav { gap:24px; }
.main-nav a { font-size:11px; }
.header-actions .button { min-height:34px; font-size:10px; padding-inline:13px; }
.promo-bar { background:linear-gradient(90deg,#03111f,#061a31 50%,#03111f); }
.promo-bar__inner { min-height:31px; font-size:10px; gap:7px; }
.promo-flame { font-size:11px; }
.promo-copy { padding:3px 7px; font-size:9px; }

.home-fold { position:relative; overflow:hidden; }
.home-fold--primary { padding:38px 0 34px; background:
    radial-gradient(circle at 69% 19%,rgba(0,112,255,.20),transparent 25rem),
    linear-gradient(180deg,#020814 0%,#030a15 64%,#020711 100%); }
.home-fold--secondary { padding:45px 0 34px; background:
    radial-gradient(circle at 45% 5%,rgba(0,78,170,.10),transparent 28rem),#020711; border-top:1px solid rgba(95,150,220,.12); }
.hero-noise { position:absolute; inset:0; pointer-events:none; opacity:.22; background-image:
    linear-gradient(rgba(64,131,207,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(64,131,207,.06) 1px,transparent 1px); background-size:48px 48px;
    mask-image:linear-gradient(to bottom,#000 0%,transparent 76%); }
.home-hero { position:relative; z-index:2; min-height:355px; display:grid; grid-template-columns:.92fr 1.08fr; gap:44px; align-items:center; }
.hero-copy { max-width:560px; }
.ts6-compatible { width:max-content; min-height:34px; display:flex; align-items:center; gap:8px; border:1px solid rgba(42,146,255,.30); border-radius:7px; padding:5px 8px; background:rgba(4,17,34,.68); margin-bottom:17px; }
.ts6-compatible img { width:90px; height:24px; object-fit:contain; }
.ts6-compatible > span { display:grid; place-items:center; width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,#148bff,#0756e9); font-weight:900; font-family:var(--display); font-size:14px; }
.ts6-compatible small { color:#69b8ff; font-size:8px; font-weight:800; letter-spacing:.08em; }
.hero-copy h1 { margin:0; font-family:var(--display); font-size:clamp(38px,4vw,58px); line-height:1.03; letter-spacing:-.045em; }
.hero-copy h1 span { color:#21a7ff; }
.hero-copy > p { color:#9aabc0; max-width:510px; font-size:13px; line-height:1.65; margin:16px 0 20px; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.hero-actions .button { min-height:43px; font-size:10px; text-transform:uppercase; letter-spacing:.015em; }
.hero-actions b { font-size:20px; line-height:0; }
.hero-checks { display:flex; flex-wrap:wrap; gap:17px; margin-top:14px; color:#7e8fa4; font-size:9px; }
.hero-checks span::first-letter { color:#22d88e; }

.hero-product { min-height:345px; position:relative; display:grid; place-items:center; isolation:isolate; }
.ts6-glow { position:absolute; width:580px; height:250px; border-radius:50%; background:radial-gradient(ellipse,rgba(0,111,255,.34),transparent 65%); filter:blur(18px); bottom:25px; }
.ts6-orb { position:absolute; z-index:4; right:4%; top:0; width:92px; height:92px; display:grid; place-items:center; border-radius:38% 62% 52% 48% / 42% 40% 60% 58%; font-family:var(--display); font-size:67px; font-weight:900; font-style:italic; color:#58c5ff; background:linear-gradient(145deg,#0c4bb9,#04276d); border:2px solid #239dff; box-shadow:0 0 35px rgba(0,139,255,.55),inset 0 0 24px rgba(81,190,255,.34); transform:rotate(-9deg); }
.app-frame { position:relative; z-index:5; width:min(100%,560px); border:1px solid rgba(104,166,235,.32); border-radius:16px; padding:7px; background:linear-gradient(180deg,#0d1727,#040912); box-shadow:0 28px 50px rgba(0,0,0,.48),0 0 40px rgba(0,102,255,.11); transform:perspective(1000px) rotateY(-4deg) rotateX(2deg); }
.app-frame__bar { height:24px; display:flex; align-items:center; gap:5px; color:#5c6d83; font-size:8px; padding:0 5px; }
.app-frame__bar i { width:6px; height:6px; border-radius:50%; background:#ff5d59; }.app-frame__bar i:nth-child(2){background:#ffc14b}.app-frame__bar i:nth-child(3){background:#34d47a}.app-frame__bar span{margin-left:auto;margin-right:5px}
.app-frame img { display:block; width:100%; aspect-ratio:1000/625; object-fit:cover; border-radius:10px; }
.platform-ring { position:absolute; z-index:1; bottom:8px; border:1px solid rgba(26,139,255,.40); border-radius:50%; transform:perspective(600px) rotateX(75deg); box-shadow:0 0 28px rgba(0,105,255,.18); }
.platform-ring--a { width:590px; height:170px; }
.platform-ring--b { width:440px; height:120px; bottom:25px; border-color:rgba(59,185,255,.55); }

.trust-strip--final { margin-top:9px; grid-template-columns:repeat(5,1fr); padding:10px 12px; border-radius:8px; background:rgba(5,14,25,.88); }
.trust-strip--final .trust-item { min-height:49px; gap:10px; }
.trust-strip--final .trust-item svg { width:21px; height:21px; }
.trust-strip--final .trust-item strong { font-size:9px; }
.trust-strip--final .trust-item span { font-size:8px; }

.plans-compact { position:relative; z-index:2; margin-top:28px; }
.compact-heading { margin-bottom:16px!important; }
.compact-heading h2 { font-size:clamp(23px,2.4vw,34px); }
.compact-heading p { margin-top:5px; font-size:10px; }
.compact-heading .section-kicker { font-size:9px; margin-bottom:7px; }
.plan-controls--final { flex-direction:column; align-items:center; justify-content:center; padding-bottom:13px; gap:12px; }
.plan-controls--final .control-label { font-size:8px; margin-bottom:5px; }
.plan-controls--final .control-block { min-width:195px; }
.plan-controls--final .control-block--wide { width:min(100%, 600px); max-width:600px; }
.plan-controls--final .segmented { border-radius:7px; padding:3px; }
.plan-controls--final .segmented--cycles { grid-template-columns:repeat(3,1fr); }
.plan-controls--final .segmented button { min-height:31px; padding:7px 11px; border-radius:5px; font-size:9px; }
.plan-controls--final .cycle-save { font-size:8px; }
.pricing-grid--final { grid-template-columns:minmax(0, 345px); justify-content:center; gap:9px; }
.pricing-grid--final .pricing-card { min-height:252px; border-radius:8px; padding:18px 13px 14px; }
.pricing-grid--final .popular-ribbon { font-size:7px; padding:4px 14px; border-radius:0 0 6px 6px; }
.pricing-grid--final .plan-title { font-size:18px; margin:6px 0 2px; }
.pricing-grid--final .pricing-card.popular .plan-title { margin-top:15px; }
.pricing-grid--final .plan-audience { font-size:8px; min-height:22px; }
.pricing-grid--final .plan-price { margin:12px 0 1px; gap:3px; }
.pricing-grid--final .plan-price .currency { font-size:10px; }
.pricing-grid--final .plan-price strong { font-size:23px; }
.pricing-grid--final .plan-price small { font-size:8px; }
.pricing-grid--final .plan-cycle-total { font-size:7px; margin-bottom:10px; min-height:11px; }
.pricing-grid--final .plan-unavailable { font-size:7px; margin:-2px 0 7px; }
.pricing-grid--final .button { min-height:31px; font-size:8px; text-transform:uppercase; }
.pricing-grid--final .plan-features { gap:6px; margin-top:12px; padding-top:10px; }
.pricing-grid--final .plan-feature { font-size:8px; gap:6px; }
.pricing-grid--final .plan-feature svg { width:10px; height:10px; }
.plans-bottom-line { display:flex; align-items:center; justify-content:center; gap:14px; min-height:30px; margin-top:7px; color:#687a90; font-size:8px; }
.plans-bottom-line p { margin:0; }
.text-button { border:0; background:transparent; color:#5dbaff; cursor:pointer; font-size:8px; font-weight:700; padding:4px 0; }

.ts6-showcase { position:relative; z-index:2; }
.ts6-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 20px; }
.ts6-gallery-card { min-width:0; }
.ts6-gallery-media { height:150px; padding:6px; background:linear-gradient(180deg,#0c1726,#07101c); border:1px solid rgba(101,154,217,.18); border-radius:9px; overflow:hidden; }
.ts6-gallery-media img { width:100%; height:100%; object-fit:cover; object-position:center; border-radius:6px; display:block; transition:transform .35s ease; }
.ts6-gallery-card:hover img { transform:scale(1.025); }
.ts6-gallery-card h3 { margin:9px 0 3px; font-size:11px; }
.ts6-gallery-card p { color:#718399; font-size:8px; line-height:1.5; margin:0; }

.conversion-card--final { min-height:130px; padding:20px 24px; border-radius:10px; margin-top:13px; grid-template-columns:auto 1fr auto; gap:18px; }
.conversion-card--final .conversion-icon { font-size:34px; position:relative; z-index:2; }
.conversion-card--final h2 { font-size:22px; }
.conversion-card--final p { font-size:9px; margin:4px 0; }
.conversion-card--final .mini-benefits { margin-top:10px; gap:5px; }
.conversion-card--final .mini-benefits span { min-height:32px; padding:0 9px; font-size:7px; border-radius:6px; }
.conversion-card--final .mini-benefits svg { width:12px; height:12px; }
.conversion-card--final .button { min-height:39px; font-size:9px; padding-inline:18px; }
.conversion-card--final .conversion-watermark { font-size:130px; top:-28px; right:75px; }
.conversion-card--affiliate.conversion-card--final { grid-template-columns:1fr auto; padding-right:220px; }
.conversion-card--final .affiliate-art { right:35px; bottom:15px; transform:scale(.7); transform-origin:right bottom; }

.payment-panel--final { margin-top:13px; padding:15px 18px; border-radius:9px; }
.payment-panel--final h3 { font-size:9px; margin-bottom:8px; }
.payment-panel--final .payment-logos { gap:5px; }
.payment-panel--final .payment-logos div { min-width:78px; height:36px; padding:4px 7px; border-radius:5px; font-size:7px; }
.payment-panel--final .payment-logos img { width:21px; height:21px; }
.payment-panel--final .policy-block { min-width:170px; }
.payment-panel--final .button { min-height:34px; font-size:8px; }

.site-footer { background:#01050a; }
.footer-top { padding:27px 0 20px; grid-template-columns:1.45fr repeat(3,1fr); gap:32px; }
.footer-brand img { width:115px; }
.footer-brand p { font-size:8px; max-width:230px; }
.footer-column { gap:5px; }
.footer-column h4 { font-size:9px; margin-bottom:4px; }
.footer-column a { font-size:8px; }
.footer-bottom { min-height:42px; font-size:7px; gap:20px; }

@media (max-width:1080px) {
    .home-hero { grid-template-columns:1fr 1fr; gap:25px; }
    .app-frame { width:100%; }
    .ts6-orb { width:72px; height:72px; font-size:52px; }
    .trust-strip--final { grid-template-columns:repeat(3,1fr); }
    .trust-strip--final .trust-item:nth-child(3){border-right:0}.trust-strip--final .trust-item:nth-child(n+4){border-top:1px solid var(--line)}
    .ts6-gallery { grid-template-columns:repeat(2,1fr); }
    .ts6-gallery-media { height:220px; }
}

@media (max-width:820px) {
    .main-header { position:sticky; }
    .home-fold--primary { padding-top:25px; }
    .home-hero { grid-template-columns:1fr; min-height:0; }
    .hero-copy { max-width:none; }
    .hero-product { min-height:310px; }
    .plan-controls--final { flex-direction:column; align-items:stretch; }
    .plan-controls--final .control-block,.plan-controls--final .control-block--wide { max-width:none; min-width:0; }
    .pricing-grid--final { grid-template-columns:minmax(0, 345px); justify-content:center; }
    .conversion-card--final,.conversion-card--affiliate.conversion-card--final { grid-template-columns:1fr; padding:20px; }
    .conversion-card--final .conversion-icon { display:none; }
    .conversion-card--final .affiliate-art { opacity:.25; }
    .payment-panel--final { grid-template-columns:1fr; }
    .footer-top { grid-template-columns:1fr 1fr; }
}

@media (max-width:560px) {
    .container { width:min(calc(100% - 24px),var(--container)); }
    .promo-bar__inner { text-align:center; flex-wrap:wrap; padding:5px 0; }
    .ts6-compatible small { display:none; }
    .hero-copy h1 { font-size:39px; }
    .hero-product { min-height:250px; }
    .app-frame { transform:none; }
    .ts6-orb { width:58px; height:58px; font-size:42px; right:0; }
    .platform-ring--a { width:350px; }.platform-ring--b{width:270px}
    .trust-strip--final { grid-template-columns:1fr 1fr; }
    .trust-strip--final .trust-item { border-right:0; border-bottom:1px solid var(--line); justify-content:flex-start; padding-left:12px; }
    .trust-strip--final .trust-item:last-child { grid-column:1/-1; border-bottom:0; }
    .segmented--cycles { grid-template-columns:1fr 1fr; }
    .pricing-grid--final { grid-template-columns:minmax(0, 345px); justify-content:center; }
    .ts6-gallery { grid-template-columns:1fr; }
    .ts6-gallery-media { height:205px; }
    .plans-bottom-line { flex-direction:column; gap:3px; text-align:center; }
    .footer-top { grid-template-columns:1fr; }
    .footer-bottom { flex-direction:column; justify-content:center; text-align:center; padding:10px 0; }
}