:root { --bg:#020b19; --surface:#071c33; --text:#f7fbff; --muted:#a6c6e7; --cyan:#18dcf5; --violet:#a85cff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 75% 20%,rgba(0,119,221,.18),transparent 34rem),var(--bg); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
.product-header { width:min(1160px,calc(100% - 32px)); height:78px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(65,181,255,.23); }
.product-header .brand { display:inline-flex; align-items:baseline; font-size:1.5rem; font-weight:820; letter-spacing:-.05em; line-height:1.12; }
.product-header .brand-i { display:inline-block; flex:0 0 auto; width:.42em; height:.72em; height:1cap; margin:0 .08em 0 0; border-radius:.11em; vertical-align:baseline; background:linear-gradient(180deg,#25f4ff,#05a6eb); box-shadow:0 0 12px rgba(24,220,245,.38); }
.product-header .brand-j { background:linear-gradient(150deg,#b890ff 14%,#e85de9 52%,#55e6ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 18px rgba(205,105,255,.28); }
.back { padding:9px 16px; border:1px solid rgba(24,220,245,.45); border-radius:999px; color:var(--cyan); font-size:.85rem; }
.detail { width:min(1160px,calc(100% - 32px)); min-height:calc(100vh - 78px); margin:auto; display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:80px; padding:70px 0 90px; }
.eyebrow { color:var(--cyan); font-size:.76rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
h1 { margin:16px 0 25px; font-size:clamp(3.6rem,7vw,7rem); line-height:.92; letter-spacing:-.07em; }
.lead { max-width:620px; color:var(--muted); font-size:1.2rem; line-height:1.65; }
.player-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:28px; }
.player-choice { min-height:118px; display:flex; align-items:center; gap:16px; padding:18px; border:1px solid rgba(24,220,245,.28); border-radius:18px; background:linear-gradient(145deg,rgba(8,36,64,.82),rgba(6,17,38,.68)); box-shadow:inset 0 1px rgba(255,255,255,.04); }
.player-choice-link { color:inherit; text-decoration:none; cursor:pointer; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.player-choice-link:hover,.player-choice-link:focus-visible { transform:translateY(-3px); border-color:rgba(24,220,245,.82); box-shadow:0 0 28px rgba(24,220,245,.22),inset 0 1px rgba(255,255,255,.08); outline:none; }
.player-choice:last-child { border-color:rgba(168,92,255,.4); background:linear-gradient(145deg,rgba(31,21,70,.78),rgba(7,18,40,.68)); }
.device-mark { flex:0 0 46px; height:46px; display:grid; place-items:center; border:1px solid rgba(24,220,245,.58); border-radius:13px; color:var(--cyan); font-size:.83rem; font-weight:850; box-shadow:0 0 22px rgba(24,220,245,.14); }
.player-choice:last-child .device-mark { color:#d0a7ff; border-color:rgba(168,92,255,.62); box-shadow:0 0 22px rgba(168,92,255,.16); }
.player-choice div { min-width:0; display:grid; gap:3px; }
.player-choice small { color:var(--cyan); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.player-choice:last-child small { color:#d0a7ff; }
.player-choice strong { font-size:1rem; }
.player-choice div span { color:var(--muted); font-size:.76rem; line-height:1.35; }
.player-choice div b { margin-top:7px; color:var(--cyan); font-size:.78rem; letter-spacing:.04em; }
.status { display:inline-flex; align-items:center; gap:9px; margin-top:26px; padding:10px 15px; border:1px solid rgba(24,220,245,.2); border-radius:12px; color:#c8dcee; font-size:.84rem; }
.status i { width:8px; height:8px; border-radius:50%; background:#f4bd46; box-shadow:0 0 12px #f4bd46; }
.visual { min-height:530px; display:grid; place-items:center; position:relative; }
.visual::before,.visual::after { content:""; position:absolute; border:1px solid rgba(24,220,245,.2); border-radius:50%; }
.visual::before { width:480px; height:300px; transform:rotate(-12deg); }
.visual::after { width:360px; height:440px; border-color:rgba(168,92,255,.2); transform:rotate(18deg); }
.product-icon { position:relative; z-index:2; width:255px; height:250px; background-image:url("assets/ecosystem.png"); background-size:1680px 944px; background-repeat:no-repeat; border:1px solid rgba(62,206,255,.42); border-radius:34px; box-shadow:0 30px 100px rgba(0,0,0,.45),0 0 48px rgba(24,220,245,.18); }
[data-product="player"] .product-icon { height:270px; background-position:-30px -332px; }
[data-product="vpn"] .product-icon { background-position:-580px -330px; }
[data-product="navigator"] .product-icon { background-position:-820px -325px; }
[data-product="radar"] .product-icon { background-position:-1095px -325px; }
[data-product="games"] .product-icon { background-position:-1360px -325px; }
.mini-features { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); margin-top:25px; border-top:1px solid rgba(65,181,255,.18); }
.mini-features div { padding:30px 28px; border-right:1px solid rgba(65,181,255,.18); }
.mini-features div:last-child { border:0; }
.mini-features strong { display:block; margin-bottom:7px; }
.mini-features span { color:var(--muted); font-size:.9rem; }
@media(max-width:760px){.detail{grid-template-columns:1fr;gap:25px;padding-top:55px}.player-choices{grid-template-columns:1fr}.visual{min-height:420px}.product-icon{transform:scale(.86)}.mini-features{grid-template-columns:1fr}.mini-features div{border-right:0;border-bottom:1px solid rgba(65,181,255,.18)}h1{font-size:3.6rem}}