*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#02090d;color:#f5f8f8;font-family:Inter,Arial,sans-serif;line-height:1.45;overflow-x:hidden}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");z-index:99}
.container{width:min(1220px,calc(100% - 48px));margin:auto}
.header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(2,9,13,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(74,239,222,.08)}
.nav{height:82px;display:flex;align-items:center;gap:42px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:20px;font-weight:700;white-space:nowrap}
.brand b{font-weight:500;color:#a9b8ba}
.brand-mark{width:42px;height:42px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#071419;border:1px solid #13d6c2;box-shadow:0 0 24px rgba(0,220,205,.2)}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.desktop-nav{display:flex;gap:31px;margin-left:auto}
.desktop-nav a,.lang{color:#9da9ab;text-decoration:none;font-size:14px;font-weight:500;transition:.2s}
.desktop-nav a:hover{color:#fff}
.nav-actions{display:flex;align-items:center;gap:24px}
.lang{background:none;border:0;color:#dce6e6;cursor:pointer}
.lang span{margin-left:6px}
.login{display:none!important}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:linear-gradient(90deg,#43b884 0%,#12e7c9 55%,#11dccd 100%);color:#06251f;font-weight:800;text-decoration:none;padding:15px 24px;cursor:pointer;box-shadow:0 10px 30px rgba(18,231,201,.14);transition:.2s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-small{padding:11px 25px;border-radius:999px}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:25px}
.mobile-nav{display:none}

/* The hero is space now: a near-black ground, a cold haze where the planet sits, and a
   vignette pulling the corners down so the middle reads as lit. The stars are a canvas
   behind it (starfield.js) - drawn once, since only the planet is meant to move. */
.hero{height:100vh;display:grid;place-items:center;padding-top:82px;position:relative;overflow:hidden;background:radial-gradient(circle at 76% 43%,rgba(0,190,205,.13),transparent 27%),radial-gradient(circle at 20% 40%,rgba(40,150,240,.05),transparent 32%),radial-gradient(120% 90% at 70% 45%,transparent 38%,rgba(0,0,0,.55) 100%),#01060a}
.starfield{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.hero>.container,.hero-grid{position:relative;z-index:2}
.hero-grid{min-height:738px;display:grid;grid-template-columns:48% 52%;align-items:center}
.hero-copy{position:relative;z-index:5}
.trust-row{display:flex;gap:32px;color:#17d6c0;font-size:14px;margin-bottom:26px}
.hero h1{font-size:clamp(48px,5.1vw,76px);line-height:1.03;letter-spacing:-3px;margin:0 0 25px;font-weight:800}
.hero h1 em,.section h2 em,.center-head h2 em,.cta h2 em{font-style:normal;color:#0ad3bd}
.lead{font-size:18px;color:#9aa8aa;max-width:520px;margin-bottom:24px}
.checks{list-style:none;padding:0;margin:0 0 28px;color:#dce4e4}
.checks li{margin:10px 0;font-size:14px;color:#aebbbb}
.checks li:before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;margin-right:10px;border:1px solid #08d4b6;border-radius:50%;color:#08d4b6;font-size:12px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-actions .btn{min-width:190px}
.btn-outline{background:transparent;border:1px solid #18bfae;color:#d9f8f4;box-shadow:none}
.platforms{margin-top:20px;color:#728184;font-size:13px}
.platform-pills{display:flex!important;gap:8px!important;margin-top:9px!important}
.platform-pills b{font-size:11px!important;font-weight:600!important;color:#c5d4d5!important;border:1px solid rgba(25,216,194,.22);padding:7px 10px;border-radius:999px;background:rgba(10,35,39,.55)}

.hero-art{--glow-r:340px;height:700px;position:relative;display:grid;place-items:center}
.hero-ring{display:none}
.orb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;filter:blur(55px);width:var(--glow-r);height:var(--glow-r);background:#00cfc4;opacity:.12}
.hero-photo{position:relative;z-index:4;height:650px;width:365px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 35px 50px rgba(0,0,0,.6))}
.hero-photo img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal}
.hero-badge,.hero-server{position:absolute;z-index:7;border:1px solid rgba(18,218,199,.22);background:rgba(4,18,22,.86);backdrop-filter:blur(12px);box-shadow:0 20px 50px rgba(0,0,0,.3);border-radius:12px}
.hero-badge{right:2%;top:18%;padding:12px 16px}
.hero-badge strong,.hero-badge span{display:block}
.hero-badge strong{font-size:13px}
.hero-badge span{font-size:10px;color:#7f9294;margin-top:3px}
.hero-server{left:1%;bottom:17%;display:flex;gap:10px;align-items:center;padding:10px 13px}
.hero-server>span{font-size:22px}
.hero-server small,.hero-server b{display:block}
.hero-server small{font-size:9px;color:#728486}
.hero-server b{font-size:11px}
.hero-server i{font-size:9px;color:#14d9bf}

.feature-strip{position:relative;z-index:8;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(50,205,192,.12);background:rgba(5,19,24,.92);border-radius:17px;margin-top:-1px;overflow:hidden}
.feature-strip article{display:flex;gap:18px;padding:28px 25px;border-right:1px solid rgba(60,100,103,.22)}
.feature-strip article:last-child{border:0}
.feature-strip i{font-style:normal;font-size:30px;color:#0dd9c0}
.feature-strip h3{font-size:15px;margin:2px 0 7px}
.feature-strip p{margin:0;color:#819092;font-size:12px}

.section{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:90px 0}
.section>.container{width:min(1220px,calc(100% - 48px))}
/* FAQ: top-align so opening an answer expands into the slack below WITHOUT re-centring or
   pushing the footer (the section stays 100vh as long as the open state fits). */
.faq{justify-content:center}
.section-head{display:flex;justify-content:space-between;gap:60px;align-items:end;margin-bottom:55px}
.eyebrow{color:#0ed7c0;font-size:12px;font-weight:800;letter-spacing:2px}
.section h2,.center-head h2,.cta h2{font-size:54px;line-height:1.05;letter-spacing:-2px;margin:12px 0 0}
.section-head>p{max-width:420px;color:#849294;margin:0;font-size:15px}

.about-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px}
.about-copy>p{max-width:520px;color:#8b9b9d;font-size:16px;line-height:1.7}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:35px}
.mini-stats div{padding:17px;border:1px solid rgba(54,100,101,.2);background:#071216;border-radius:13px}
.mini-stats strong{display:block;font-size:25px;color:#0ed9c0}
.mini-stats span{display:block;font-size:10px;color:#7f9092;margin-top:4px}
.app-shot{height:520px;position:relative;display:flex;justify-content:center;overflow:hidden;border-radius:24px;background:radial-gradient(circle at 50% 45%,rgba(10,219,202,.12),transparent 48%),#050f13;border:1px solid rgba(50,120,119,.18)}
.app-shot img{height:100%;width:auto;max-width:100%;object-fit:contain;position:relative;z-index:2}
.shot-glow{position:absolute;width:260px;height:260px;border-radius:50%;background:#00d9c0;filter:blur(100px);opacity:.1;top:30%;left:50%;transform:translate(-50%,-50%)}

.server-layout{display:grid;grid-template-columns:360px 1fr;gap:18px}
.server-list{display:flex;flex-direction:column;gap:9px}
.server-card{border:1px solid rgba(61,107,108,.2);background:#071216;color:#eaf0ef;border-radius:13px;padding:17px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;text-align:left;cursor:pointer;transition:.2s}
.server-card:hover,.server-card.active{border-color:#08d9c0;background:#0a1b20;box-shadow:0 0 25px rgba(0,215,198,.07)}
.server-card>span{font-size:25px}
.server-card b,.server-card small{display:block}
.server-card small{font-size:12px;color:#718082;margin-top:3px}
.server-card strong{font-size:12px;color:#16d6bf}
.server-note{margin-top:7px;padding:17px;color:#637779;font-size:11px;border-left:2px solid #0ed4bd;background:rgba(7,18,22,.45)}
.map-card{min-height:400px;border:1px solid rgba(61,107,108,.2);border-radius:17px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(9,200,191,.14),transparent 45%),#061116}
.map-grid{position:absolute;inset:0;opacity:.4;background-image:linear-gradient(rgba(34,139,139,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(34,139,139,.12) 1px,transparent 1px);background-size:35px 35px;transform:perspective(400px) rotateX(55deg) scale(1.4);transform-origin:center}
.map-glow{position:absolute;width:480px;height:480px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(18,218,200,.3);box-shadow:inset 0 0 80px rgba(0,221,205,.1)}
.map-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;padding:30px 45px;border:1px solid rgba(18,218,200,.35);border-radius:18px;background:rgba(2,13,16,.75);backdrop-filter:blur(10px);box-shadow:0 0 60px rgba(0,221,205,.1)}
.map-center span{display:block;color:#13dfc5;font-size:26px}
.map-center b{display:block;margin-top:6px}
.map-center small{color:#7f9294}
.country-shape{position:absolute;border:1px solid rgba(20,221,199,.28);color:#0fd9c0;font-size:10px;padding:8px;border-radius:7px;background:rgba(5,25,28,.6);box-shadow:0 0 25px rgba(0,220,200,.08)}
.germany{left:38%;top:45%}
.finland{left:58%;top:25%}

.pricing{background:linear-gradient(180deg,transparent,#041014 50%,transparent)}
.center-head{text-align:center;max-width:720px;margin:0 auto 50px}
.center-head>p{color:#849294}
.plan-switch{display:flex;gap:4px;padding:4px;border-radius:999px;background:#1b202c;margin:25px auto 0;width:310px}
.plan-switch button{flex:1;border:0;border-radius:999px;background:transparent;color:#8795ad;padding:12px;font-weight:700;cursor:pointer}
.plan-switch .active{background:#0ed9c0;color:#00120f}
.premium-layout{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}
.premium-copy{border:1px solid rgba(55,104,105,.22);border-radius:20px;background:linear-gradient(145deg,#071519,#071014);padding:40px}
.premium-label{font-size:11px;letter-spacing:2px;color:#0ed9c0;font-weight:800}
.premium-copy h3{font-size:35px;line-height:1.1;margin:14px 0 25px}
.premium-copy ul{list-style:none;margin:0;padding:0}
.premium-copy li{padding:16px 0;border-bottom:1px solid rgba(55,85,88,.18);color:#d6e0e0}
.premium-copy li:last-child{border-bottom:0}
.premium-copy li b{display:inline-grid;place-items:center;width:28px;color:#0dd9c0;font-size:18px}
.premium-card{border:1px solid rgba(17,218,194,.22);border-radius:20px;background:#1b202c;overflow:hidden;padding-bottom:20px;box-shadow:0 25px 70px rgba(0,0,0,.25)}
.premium-row{display:grid;grid-template-columns:1fr auto 30px;align-items:center;gap:15px;padding:20px 28px;border-bottom:1px solid rgba(4,9,16,.6);color:#f1f4f4}
.premium-row span{font-size:16px}
.premium-row strong{font-size:17px}
.premium-row b{color:#12dfc6;font-size:23px}
.premium-row small{color:#7c8c90}
.premium-row.selected{background:rgba(13,218,194,.05)}
.premium-card>p{color:#869699;text-align:center;font-size:11px;margin:18px 10px}
.premium-card .btn{width:calc(100% - 40px);margin:0 20px}
.telegram-btn{width:calc(100% - 40px);margin:10px 20px 0;border:0;border-radius:12px;padding:15px;background:linear-gradient(100deg,#4b9bf2,#a7dcff);color:#0a1620;font-weight:800;cursor:pointer}
.premium-preview{margin-top:35px;display:grid;grid-template-columns:1fr 330px;align-items:center;gap:35px;border:1px solid rgba(55,104,105,.2);border-radius:20px;padding:28px 35px;background:#061116;overflow:hidden}
.premium-preview h3{font-size:26px;margin:9px 0}
.premium-preview p{color:#809092;max-width:480px;font-size:13px}
.premium-preview img{display:none!important}

.faq-layout{display:grid;grid-template-columns:40% 1fr;gap:80px;align-items:center}
.faq .section-head{flex-direction:column;align-items:start;gap:8px;margin-bottom:0}
.faq .section-head h2{margin:0}
.faq .section-head>p{max-width:none;margin:0}
.faq-title{white-space:nowrap}
.support-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.support-actions .btn{padding:13px 22px;min-width:0;gap:8px}
.support-actions .btn svg{width:18px;height:18px}
.btn-tg{background:linear-gradient(115deg,#2AABEE,#229ED9);color:#fff;box-shadow:0 10px 30px rgba(34,158,217,.2)}
.accordion{display:flex;flex-direction:column;gap:10px}
.faq-item{position:relative;text-align:left;border:1px solid rgba(54,100,101,.22);background:#071216;color:#edf2f2;border-radius:12px;padding:21px 50px 21px 22px;cursor:pointer;font-size:15px}
.faq-item b{position:absolute;right:20px;top:19px;color:#12d9c0;font-size:20px;font-weight:400}
.faq-item div{max-height:0;overflow:hidden;color:#829294;font-size:13px;line-height:1.7;padding-top:14px;transition:max-height .16s ease}
.faq-item.open div{max-height:600px;transition:max-height .3s ease}
.faq-item.open b{transform:rotate(45deg)}

.reviews{padding-top:80px}
.play-card{display:flex;align-items:center;gap:18px;border:1px solid rgba(55,104,105,.22);background:#071216;border-radius:18px;padding:18px 20px}
.play-icon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:#0bd5b9;color:#00140f;font-size:18px}
.play-card div:nth-child(2){flex:1}
.play-card strong,.play-card span{display:block}
.play-card strong{font-size:15px}
.play-card span{font-size:11px;color:#78898b;margin-top:4px}

.cta{margin-top:80px;margin-bottom:80px;border:1px solid rgba(30,221,201,.18);border-radius:22px;padding:60px 65px;background:radial-gradient(circle at 75% 50%,rgba(7,215,196,.16),transparent 30%),linear-gradient(120deg,#07171b,#071014);display:flex;justify-content:space-between;align-items:center}
.cta h2{font-size:50px}
.cta p{color:#829294}
.btn-large{padding:17px 30px}

.footer{border-top:1px solid rgba(56,95,96,.2);padding:65px 0 25px;background:#02080b}
.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:50px}
.footer-grid>div{display:flex;flex-direction:column;gap:10px}
.footer-grid p,.footer-grid a{font-size:12px;color:#758587;text-decoration:none}
.footer-grid b{font-size:12px;color:#e2eaea;margin-bottom:7px}
.copyright{border-top:1px solid rgba(56,95,96,.16);margin-top:45px;padding-top:18px;color:#56686a;font-size:11px}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,120px);background:#0f292d;border:1px solid #12d9c0;color:#dff9f5;padding:12px 18px;border-radius:10px;z-index:100;transition:.3s;box-shadow:0 15px 40px rgba(0,0,0,.35)}
.toast.show{transform:translate(-50%,0)}
.reveal{opacity:0;transform:translateY(20px);transition:.7s}
.reveal.visible{opacity:1;transform:none}

@media(max-width:980px){
  .desktop-nav{display:none}
  .menu-toggle{display:block}
  .nav{gap:15px}
  .nav-actions{margin-left:auto}
  .mobile-nav{display:none;flex-direction:column;padding:15px 24px 25px;background:#030b0e}
  .mobile-nav.open{display:flex}
  .mobile-nav a{color:#dbe5e5;text-decoration:none;padding:12px 0;border-bottom:1px solid rgba(70,110,110,.12)}
  /* Stacked, the hero is the text AND the planet under it - taller than a phone screen. It
     kept the desktop's fixed 100vh with overflow hidden, which cut the planet off; let the
     content set the height instead. */
  .hero{height:auto}
  /* Measured, not guessed: the hero ends at its own bottom edge and clips everything
     there, while .hero-art overhangs it by 20px - so a fade anchored to .hero-art was
     itself clipped and changed nothing. The glow is a 340px disc under a 55px blur whose
     tail reaches exactly that edge, and the straight cut across it is what read as a
     change of background. .hero-grid ends ON the edge, and z-index 3 puts the fade above
     the glow (auto) but below the planet (4), whose own bottom stops 83px higher. */
  .hero-grid::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100vw;height:110px;background:linear-gradient(to bottom,rgba(2,9,13,0),#02090d);pointer-events:none;z-index:3}
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding-top:70px}
  .hero-art{height:570px}
  .feature-strip{grid-template-columns:repeat(2,1fr)}
  .feature-strip article:nth-child(2){border-right:0}
  .feature-strip article:nth-child(-n+2){border-bottom:1px solid rgba(60,100,103,.22)}
  .server-layout,.faq-layout{grid-template-columns:1fr}
  .about-grid,.premium-layout{grid-template-columns:1fr}
  .about-copy{order:1}
  .app-shot{height:500px}
  .premium-preview{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .articles{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cta{gap:30px}
  .section-head{align-items:start;flex-direction:column;gap:20px}
}

@media(max-width:620px){
  .container{width:min(100% - 28px,1220px)}
  .nav{height:70px}
  .brand{font-size:17px}
  .brand-mark{width:35px;height:35px}
  .nav-actions{gap:10px}
  .lang{display:none}
  .btn-small{padding:9px 15px}
  .hero{min-height:0;padding-top:70px}
  .hero-copy{padding-top:50px}
  .trust-row{gap:15px;font-size:11px}
  .hero h1{font-size:42px;letter-spacing:-2px}
  .lead{font-size:15px}
  .hero-actions{display:grid;grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
  .hero-art{height:490px;margin-top:5px}
  .hero-photo{height:490px;width:285px}
  .hero-ring{width:360px;height:360px}
  .hero-badge{right:0;top:15%}
  .hero-server{left:0;bottom:11%}
  .feature-strip{grid-template-columns:1fr}
  .feature-strip article{border-right:0!important;border-bottom:1px solid rgba(60,100,103,.22)!important}
  .feature-strip article:last-child{border-bottom:0!important}
  .section{padding:85px 0}
  .section h2,.center-head h2{font-size:40px}
  .about-grid{gap:25px}
  .about h2{font-size:40px}
  .app-shot{height:470px}
  .mini-stats{gap:7px}
  .mini-stats div{padding:12px}
  .mini-stats strong{font-size:20px}
  .server-card{padding:13px}
  .map-card{min-height:320px}
  .premium-copy{padding:25px}
  .premium-copy h3{font-size:29px}
  .premium-row{padding:18px 16px}
  .premium-preview{padding:24px 18px}
  .play-card{align-items:flex-start;flex-wrap:wrap}
  .play-card .btn{width:100%}
  .plan-switch{width:100%;max-width:310px}
  .cta{padding:35px 28px;display:block}
  .cta h2{font-size:40px}
  .cta .btn{margin-top:20px;width:100%}
  .footer-grid{grid-template-columns:1fr 1fr;gap:35px}
}
/* =========================================================
   NEEDLE — landing rework (spinning globe, why, features)
   ========================================================= */

/* ---- 1. Hero: canvas globe rotating around the fixed Needle axis ---- */
.planet-wrap{
  --planet-size:495px;
  --needle-angle:33.4deg;
  position:relative;
  z-index:4;
  width:645px;
  height:645px;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.planet-fallback,
.planet-globe{
  position:absolute;
  width:var(--planet-size);
  height:var(--planet-size);
  border-radius:50%;
  display:block;
}
.planet-fallback{
  z-index:2;
  object-fit:cover;
  opacity:1;
  transition:opacity .25s ease;
  filter:contrast(1.16) saturate(1.05) drop-shadow(0 30px 60px rgba(0,0,0,.55));
}
.planet-globe{
  z-index:3;
  filter:contrast(1.22) saturate(1.08) drop-shadow(0 30px 60px rgba(0,0,0,.55));
}
.planet-wrap.texture-ready .planet-fallback{
  display:none;
}
.planet-atmo{
  position:absolute;
  width:var(--planet-size);
  height:var(--planet-size);
  border-radius:50%;
  pointer-events:none;
  z-index:5;
  background:
    radial-gradient(circle at 68% 22%,rgba(214,248,255,.30),transparent 18%),
    /* the dark side: deeper than before and reaching further around the disc */
    radial-gradient(circle at 30% 80%,rgba(0,0,0,.55),rgba(0,0,0,.22) 38%,transparent 62%),
    /* a cold cast over the whole sphere, tipping the teal toward the logo's blue */
    radial-gradient(circle at 50% 50%,rgba(30,120,190,.10),transparent 70%);
  mix-blend-mode:screen;
}
/* Halo. Tight to the planet on purpose: it starts AT the rim (50% of this box) and is
   gone by 57%, so it hugs the sphere instead of hanging around it. Two stops rather than
   one - the band nearest the surface is the softer of the two, so there is no hot line
   drawn round the edge. --halo-alpha is the one knob worth turning. */
.planet-halo{
  position:absolute;
  width:calc(var(--planet-size) * 1.16);
  height:calc(var(--planet-size) * 1.16);
  border-radius:50%;
  pointer-events:none;
  z-index:2;
  background:radial-gradient(circle at 50% 50%,
    transparent 0 49.6%,
    rgba(150,235,245,calc(var(--halo-alpha,.30) * .55)) 50.4%,
    rgba(120,220,240,calc(var(--halo-alpha,.30) * .85)) 51.6%,
    rgba(90,200,230,calc(var(--halo-alpha,.30) * .40)) 53.6%,
    transparent 57%);
}
/* Needle = two separate SVG parts. TUNE size/position with width + left/top.
   North pole sits at ~66% / 35% of the wrap; the tip's base should land there. */
.needle{position:absolute;pointer-events:none}
/* Tip — its base enters at the North pole (upper-right); point pokes out beyond. On top. */
.needle-front{
  z-index:6;
  /* 252 not 218: the SVG gained a margin for its glow, so the same blade needs a wider
     box to stay the same size on screen. left/top come from the axis (planet-rotate.js).
     Tied to the planet (252 at the desktop's 495) rather than fixed: the phone shrinks the
     planet to 280 and a fixed needle stayed desktop-sized, running off both screen edges. */
  width:calc(var(--planet-size) * 252 / 495);
  left:64.5%;
  top:5%;
}
/* Eye/handle — pokes out from the lower-left EDGE of the planet, behind it.
   No brightness filter any more: it dimmed the whole part to 40%, which was fine while
   the colour was being judged by eye but swallowed the exact values once they were
   given — #CEF0F4 next to the planet came out dark grey. The SVG's own gradient is the
   final colour now. left/top are set from the axis in planet-rotate.js. */
.needle-back{
  z-index:1;
  /* 214: a shaft of ~11.7px against the tip's 13.2px base. Sized down by eye from the
     matched pair — the handle sits further from the viewer, so reading it slightly
     thinner than the blade is what makes the needle look like one object. Scales with the
     planet for the same reason as the tip. */
  width:calc(var(--planet-size) * 214 / 495);
  left:-4%;
  top:67.5%;
}

/* ---- 2. Почему Needle ---- */
.why-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.why-copy h2{font-size:46px}
.why-copy>p{color:#93a2a4;font-size:17px;line-height:1.75;max-width:520px;margin:18px 0 0}
.why-copy sup{color:#8a9a9c}
.why-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{aspect-ratio:1;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:1px solid rgba(54,100,101,.22);background:#071216;color:#b9c6c7;font-size:12.5px;font-weight:600;text-align:center;padding:10px;transition:.25s}
.tile svg{width:30px;height:30px;fill:none;stroke:#0dd9c0;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile:nth-child(odd){background:linear-gradient(150deg,rgba(13,217,192,.15),rgba(13,217,192,.04));border-color:rgba(19,214,194,.32)}
.tile:nth-child(odd) svg{stroke:#28e3c9}
.tile:hover{transform:translateY(-3px);border-color:rgba(19,214,194,.4)}

/* ---- 3. Возможности Needle ---- */
.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fcard{border:1px solid rgba(54,100,101,.2);background:#071216;border-radius:18px;padding:30px 26px;transition:.25s}
.fcard:hover{transform:translateY(-4px);border-color:rgba(19,214,194,.3);background:#08181d}
.fic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(150deg,rgba(13,217,192,.18),rgba(13,217,192,.05));border:1px solid rgba(19,214,194,.25)}
.fic svg{width:28px;height:28px;fill:none;stroke:#12e0c6;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fcard h3{font-size:17px;margin:0 0 8px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fcard p{margin:0;color:#849294;font-size:14px;line-height:1.6}
.pill-prem{font-size:10px;font-weight:700;letter-spacing:.3px;color:#06231f;background:linear-gradient(90deg,#43b884,#12e7c9);padding:2px 8px;border-radius:999px}

/* ---- 4. FAQ list ---- */
.faq-list{margin:10px 0 0;padding-left:18px}
.faq-list li{margin:5px 0}

/* ---- responsive ---- */
@media (max-width:900px){
  .why-grid{grid-template-columns:1fr;gap:34px}
  .feature-cards{grid-template-columns:1fr}
  .planet-wrap{width:340px;height:340px;--planet-size:280px}
  .hero-art{height:520px}
}
@media (max-width:560px){
  .why-tiles{grid-template-columns:repeat(2,1fr)}
}

/* ---- planet: appears with its first frame ---- */
/* Nothing of the planet shows until the renderer has drawn it. The placeholder that used to
   stand in was an old, different globe - people saw it for a second, then watched it swap
   for the real one. Atmosphere, halo and needle wait too, or they hang around an empty disc. */
.planet-globe,.planet-atmo,.planet-halo,.planet-wrap .needle{opacity:0;transition:opacity .7s ease}
.planet-wrap.texture-ready .planet-globe,
.planet-wrap.texture-ready .planet-atmo,
.planet-wrap.texture-ready .planet-halo,
.planet-wrap.texture-ready .needle{opacity:1}

/* ---- Windows download hint ---- */
/* Space is reserved even while hidden, so the page does not jump when it appears. */
.win-hint{margin:12px 0 0;max-width:440px;font-size:13px;line-height:1.5;color:#8fa3a5;opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease}
.win-hint.show{opacity:1;transform:none}
.dl-hints{display:grid}
.dl-hints>.win-hint{grid-area:1/1}
/* Кнопка, которая появится позже: видна, но не нажимается; на наведение - подсказка «Скоро». */
.btn.is-soon{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn.is-soon:hover{transform:none;filter:none}