:root{color-scheme:dark;--ink:#f7fbff;--muted:#91a4b9;--line:rgba(255,255,255,.1);--panel:rgba(12,35,61,.78);font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{background:#061526}
body{margin:0;min-height:100svh;color:var(--ink);background:radial-gradient(circle at 92% 5%,rgba(32,121,213,.22),transparent 32%),radial-gradient(circle at 7% 72%,rgba(113,53,255,.12),transparent 30%),linear-gradient(160deg,#071a30 0%,#061321 58%,#090d1c 100%);-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,#000,transparent 65%)}
.shell{width:min(100%,760px);margin:auto;padding:max(24px,env(safe-area-inset-top)) 18px max(28px,env(safe-area-inset-bottom))}
.hero{padding:4px 4px 29px}
.brand{width:156px;height:62px;display:flex;align-items:center;margin-bottom:26px}
.brand img{display:block;width:100%;height:auto;filter:brightness(0) invert(1);opacity:.96}
.eyebrow{display:flex;align-items:center;gap:9px;color:#8fb5d8;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:11px}
.eyebrow span{width:24px;height:2px;background:#32a8ff;border-radius:2px;box-shadow:0 0 13px #32a8ff}
h1{font-size:clamp(2.1rem,9vw,4.25rem);line-height:1.03;letter-spacing:-.055em;margin:0;font-weight:800}
h1 em{font-style:normal;color:#68bfff;background:linear-gradient(92deg,#57aff7,#7ad7ff 52%,#a582ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:.94rem;line-height:1.65;color:var(--muted);max-width:530px;margin:17px 0 0}
.section-head{display:flex;align-items:end;justify-content:space-between;padding:0 3px 13px}
.section-head h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;margin:0;color:#c2d2e1}
.section-head span{font-size:.68rem;color:#668097}
.service-grid{display:grid;gap:11px}
.service-card{--accent:#259cf2;position:relative;display:grid;grid-template-columns:64px 1fr 34px;align-items:center;min-height:105px;padding:14px 14px 14px 13px;border:1px solid var(--line);border-radius:22px;color:inherit;text-decoration:none;background:linear-gradient(125deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 50%),var(--panel);box-shadow:0 12px 35px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.035);backdrop-filter:blur(12px);-webkit-tap-highlight-color:transparent;overflow:hidden;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.service-card:before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:2px;border-radius:0 3px 3px 0;background:var(--accent);box-shadow:0 0 15px var(--accent)}
.service-card:hover,.service-card:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 44%,transparent);outline:none}
.service-card:active{transform:scale(.985)}
.vtel{--accent:#2da7ff}.hosting{--accent:#00c7e8}.speedtest{--accent:#a843ff}.esim{--accent:#20d6d0}.vpn{--accent:#3f7eff}
.icon{width:51px;height:51px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 11%,#091727);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.05)}
.image-icon img{width:100%;height:100%;object-fit:cover}
.esim-icon img{object-fit:contain;padding:7px;filter:drop-shadow(0 3px 7px rgba(0,0,0,.35))}
.vip-mark span{font-size:1.45rem;font-style:italic;font-weight:900;color:#73c5ff;letter-spacing:-.1em;transform:skew(-8deg)}
.hosting-mark{display:flex;flex-direction:column;gap:4px;padding:11px}
.hosting-mark span{height:6px;width:28px;border-radius:4px;background:linear-gradient(90deg,#09d3ed,#1677dc);position:relative}
.hosting-mark span:after{content:"";position:absolute;right:3px;top:2px;width:2px;height:2px;border-radius:50%;background:white}
.card-copy{min-width:0}
.card-copy small{display:block;color:color-mix(in srgb,var(--accent) 75%,#fff);font-size:.61rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800;margin-bottom:3px}
.card-copy h3{font-size:1.05rem;line-height:1.2;margin:0 0 4px;letter-spacing:-.025em}
.card-copy p{font-size:.72rem;color:#8fa4b7;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arrow{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;justify-self:end;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);color:#d7e9f7;font-size:.95rem}
footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#61788e;font-size:.64rem;padding:23px 5px 2px}
footer b{font-weight:600;margin-left:auto;color:#587087}
.status-dot{width:7px;height:7px;border-radius:50%;background:#35d79a;box-shadow:0 0 10px #35d79a}
@media(min-width:680px){.shell{padding-top:45px}.service-grid{grid-template-columns:1fr 1fr}.service-card:last-child{grid-column:1/-1}.hero{padding-bottom:40px}.brand{margin-bottom:33px}}
@media(prefers-reduced-motion:reduce){.service-card{transition:none}}