/* speedtest-online.ru — мир «Циклорама»: тест начинается в ночи, светает по мере замера.
   Небо — задник (4 слоя, opacity), сцена под ним всегда светлая. Акцент один: кобальт. */
:root{
  --night:#0b0e1a; --cobalt:#1747b8; --cobalt-hi:#1d52d0; --rose:#e88a8f;
  --day:#f4f1ec; --stage:#f4f1ec; --ink:#20242e; --mute:#6a7080;
  --line:#d9d3ca; --panel:#fbf9f6;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;caret-color:var(--cobalt);scrollbar-color:#9aa3b8 var(--stage)}
::selection{background:var(--cobalt);color:#fff}
body{font-family:Manrope,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--stage)}

@font-face{font-family:Manrope;src:url(/assets/manrope-cyr.woff2) format('woff2');
  font-weight:200 800;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url(/assets/manrope-lat.woff2) format('woff2');
  font-weight:200 800;font-display:swap;
  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}

/* ── циклорама ─────────────────────────────────────────────── */
.cyc{position:relative;overflow:hidden;color:#fff;
  display:flex;flex-direction:column;min-height:82svh}
.cyc.compact{min-height:66svh}
.cyc .sky{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 2.6s ease-in-out}
.cyc[data-sky="day"] .sky{transition-duration:4.5s}
@media (prefers-reduced-motion:reduce){.cyc .sky{transition:none}}
.sky-night{background:linear-gradient(180deg,#07090f 0%,#0b0e1a 55%,#122252 82%,#1747b8 94%,#0f2f7a 100%)}
.sky-dawn{background:linear-gradient(180deg,#101322 0%,#1d2140 44%,#4b3f7e 68%,#b06a92 84%,#1747b8 96%,#0f2f7a 100%)}
.sky-morning{background:linear-gradient(180deg,#8290c0 0%,#ab9fc6 40%,#eba795 68%,#f5ddc8 84%,#2a55b0 96%,#16388c 100%)}
.sky-day{background:linear-gradient(180deg,#fafaf7 0%,#f7f5f0 40%,#f3e4da 62%,#e88a8f 78%,#7a63b5 89%,#1747b8 96%,#0f2f7a 100%)}
.cyc[data-sky="night"] .sky-night,.cyc[data-sky="dawn"] .sky-dawn,
.cyc[data-sky="morning"] .sky-morning,.cyc[data-sky="day"] .sky-day{opacity:1}
.stars{position:absolute;left:0;right:0;top:0;height:64%;z-index:0;opacity:0;
  transition:opacity 2.6s ease-in-out;pointer-events:none;background-image:
  radial-gradient(2.2px 2.2px at 11% 22%,rgba(255,255,255,.95),transparent 60%),
  radial-gradient(1.6px 1.6px at 24% 9%,rgba(255,255,255,.8),transparent 60%),
  radial-gradient(2px 2px at 31% 33%,rgba(255,255,255,.9),transparent 60%),
  radial-gradient(1.5px 1.5px at 42% 15%,rgba(255,255,255,.75),transparent 60%),
  radial-gradient(2.4px 2.4px at 55% 27%,rgba(255,255,255,.95),transparent 60%),
  radial-gradient(1.5px 1.5px at 63% 7%,rgba(255,255,255,.7),transparent 60%),
  radial-gradient(2px 2px at 71% 38%,rgba(255,255,255,.85),transparent 60%),
  radial-gradient(1.6px 1.6px at 79% 18%,rgba(255,255,255,.8),transparent 60%),
  radial-gradient(2.2px 2.2px at 87% 30%,rgba(255,255,255,.9),transparent 60%),
  radial-gradient(1.5px 1.5px at 93% 10%,rgba(255,255,255,.7),transparent 60%),
  radial-gradient(1.6px 1.6px at 17% 48%,rgba(255,255,255,.65),transparent 60%),
  radial-gradient(2px 2px at 48% 44%,rgba(255,255,255,.8),transparent 60%),
  radial-gradient(1.5px 1.5px at 68% 55%,rgba(255,255,255,.6),transparent 60%),
  radial-gradient(2.1px 2.1px at 90% 50%,rgba(255,255,255,.75),transparent 60%),
  radial-gradient(1.6px 1.6px at 6% 36%,rgba(255,255,255,.7),transparent 60%),
  radial-gradient(1.8px 1.8px at 37% 52%,rgba(255,255,255,.6),transparent 60%),
  radial-gradient(2.2px 2.2px at 59% 12%,rgba(255,255,255,.85),transparent 60%),
  radial-gradient(1.5px 1.5px at 83% 6%,rgba(255,255,255,.7),transparent 60%),
  radial-gradient(1.8px 1.8px at 14% 8%,rgba(255,255,255,.75),transparent 60%),
  radial-gradient(2px 2px at 96% 40%,rgba(255,255,255,.7),transparent 60%),
  radial-gradient(1.5px 1.5px at 51% 58%,rgba(255,255,255,.55),transparent 60%),
  radial-gradient(1.8px 1.8px at 27% 60%,rgba(255,255,255,.5),transparent 60%),
  radial-gradient(2px 2px at 75% 62%,rgba(255,255,255,.55),transparent 60%),
  radial-gradient(1.5px 1.5px at 3% 55%,rgba(255,255,255,.5),transparent 60%)}
.cyc[data-sky="night"] .stars{opacity:1}
.cyc[data-sky="dawn"] .stars{opacity:.3}
@media (prefers-reduced-motion:reduce){.stars{transition:none}}
.cyc .glow{position:absolute;left:0;right:0;bottom:-6%;height:52%;z-index:0;opacity:0;
  transition:opacity 2.6s ease-in-out;pointer-events:none}
.glow-cool{background:radial-gradient(60% 85% at 50% 100%,rgba(64,116,232,.5),transparent 72%)}
.glow-warm{background:radial-gradient(62% 90% at 50% 100%,rgba(238,160,150,.55),transparent 72%)}
.cyc[data-sky="night"] .glow-cool{opacity:.45}
.cyc[data-sky="dawn"] .glow-cool{opacity:.2}.cyc[data-sky="dawn"] .glow-warm{opacity:.55}
.cyc[data-sky="morning"] .glow-warm{opacity:.5}
@media (prefers-reduced-motion:reduce){.cyc .glow{transition:none}}
.cyc>header,.cyc>.hero,.cyc>.horizon{position:relative;z-index:1}

/* день: тёмный текст поверх светлой части неба */
.cyc[data-sky="day"]{color:var(--ink)}
.cyc .fades{transition:color 2.5s ease}

/* ── шапка ─────────────────────────────────────────────────── */
header{display:flex;align-items:center;gap:28px;padding:0 clamp(20px,4vw,48px);height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;
  letter-spacing:.02em;color:inherit;text-decoration:none}
.brand svg{display:block}
nav{margin-left:auto;display:flex;gap:24px}
nav a{color:inherit;opacity:.75;text-decoration:none;font-size:14.5px;font-weight:600}
nav a:hover{opacity:1}
.nav-burger{display:none}

/* ── герой с инструментом ──────────────────────────────────── */
.hero{flex:1;display:flex;flex-direction:column;width:100%;
  padding:36px clamp(20px,4vw,64px) 0}
h1{font-size:clamp(27px,3.2vw,40px);font-weight:800;letter-spacing:-.025em;line-height:1.08}
.sub{margin-top:8px;font-size:16.5px;font-weight:500;opacity:.82;max-width:54ch}

.tool{margin-top:clamp(28px,5vh,52px)}
/* стартовое состояние */
.tool .start{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.btn{font-family:inherit;font-size:18px;font-weight:800;color:#fff;background:var(--cobalt);
  border:0;border-radius:999px;padding:19px 48px;cursor:pointer;letter-spacing:.01em;
  box-shadow:0 10px 26px rgba(23,71,184,.35);transition:transform .12s,background .15s}
.btn:hover{background:var(--cobalt-hi)}
a.btn{text-decoration:none;display:inline-block}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.cyc[data-sky="day"] .btn:focus-visible{outline-color:var(--cobalt)}
.start .p{font-size:15px;font-weight:500;opacity:.75;max-width:44ch}

/* идёт замер / результат */
.live{display:none}
.tool.running .start,.tool.done .start{display:none}
.tool.running .live,.tool.done .live{display:block}
.phase{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;opacity:.75;
  min-height:20px}
.reading{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:6px}
.big{font-size:clamp(84px,14vw,176px);font-weight:800;letter-spacing:-.04em;line-height:.9;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.big-unit{font-size:clamp(18px,2vw,26px);font-weight:700;opacity:.75}
.big-unit b{display:block;font-size:1.15em;opacity:1}
.row{margin-top:24px;display:flex;gap:clamp(22px,4vw,44px);flex-wrap:wrap}
.cell{border-top:3px solid currentColor;padding-top:9px;min-width:132px}
.cell .k{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;opacity:.7}
.cell .v{font-size:28px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cell .v small{font-size:15px;font-weight:700;opacity:.7;letter-spacing:0}
.again{margin-top:30px;display:none;align-items:center;gap:20px;flex-wrap:wrap}
.tool.done .again{display:flex}
.again .hint{font-size:15px;font-weight:500;opacity:.8;max-width:44ch}
.share{font:inherit;font-size:15px;font-weight:700;background:none;border:0;cursor:pointer;
  color:inherit;text-decoration:underline;text-underline-offset:4px;padding:4px 0}

/* горизонт-строка */
.horizon{margin-top:auto;padding:22px clamp(20px,4vw,48px) 26px;font-size:14.5px;font-weight:600;
  color:#fff;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.horizon .ip{opacity:.85;font-weight:500}
.h-track{position:absolute;left:0;right:0;top:0;height:3px;opacity:0;transition:opacity .6s}
.h-track.on{opacity:1}
.h-track i{display:block;height:100%;width:100%;background:rgba(255,255,255,.9);transition:width .9s linear}
.horizon{position:relative}

/* ── сцена (контент под циклорамой) ────────────────────────── */
.stage-c{padding:0 clamp(20px,4vw,64px)}
section{padding:clamp(44px,7vh,72px) 0 0}
section:last-of-type{padding-bottom:clamp(48px,8vh,80px)}
h2{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.15;max-width:26ch}
h3{font-size:18.5px;font-weight:800;letter-spacing:-.01em;margin-top:26px}
.prose{max-width:68ch}
.prose p{margin-top:14px;font-size:16.5px;line-height:1.65;color:#3a3f4a}
.prose p:first-of-type{margin-top:16px}
.prose a{color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
.prose b{color:var(--ink)}
.prose ul,.prose ol{margin:14px 0 0 22px;font-size:16.5px;line-height:1.65;color:#3a3f4a}
.prose li{margin-top:8px}
.prose li::marker{color:var(--cobalt);font-weight:700}

/* таблица скоростей */
.spd{margin-top:20px;width:100%;max-width:760px;border-collapse:collapse;font-size:15.5px}
.spd th{text-align:left;font-size:13px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--mute);font-weight:700;padding:0 14px 10px 0}
.spd td{padding:11px 14px 11px 0;border-top:1px solid var(--line);line-height:1.45;vertical-align:top}
.spd td:first-child{font-weight:700;white-space:nowrap}
.spd td b{color:var(--cobalt)}

/* FAQ */
.faq{margin-top:8px;max-width:760px}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-size:16.5px;font-weight:700;cursor:pointer;list-style:none;position:relative;padding-right:34px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:5px;width:10px;height:10px;
  border-right:2.5px solid var(--cobalt);border-bottom:2.5px solid var(--cobalt);
  transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg);top:10px}
.faq details p{margin-top:12px;font-size:16px;line-height:1.6;color:#3a3f4a;max-width:64ch}

/* перелинковка */
.also{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;max-width:820px}
.also a{font-size:14.5px;font-weight:700;color:var(--ink);text-decoration:none;
  border:1.5px solid var(--line);border-radius:999px;padding:10px 18px;background:var(--panel);
  transition:border-color .15s,color .15s}
.also a:hover{border-color:var(--cobalt);color:var(--cobalt)}

/* широкий экран: редакционная сетка секций, контент доезжает до правого края */
@media(min-width:1100px){
  section{display:grid;grid-template-columns:minmax(280px,30%) minmax(0,1fr);
    gap:18px 72px;align-items:start}
  section h2{position:sticky;top:28px}
  .prose{max-width:none}
  .prose p{max-width:68ch}
  .prose ul,.prose ol{max-width:68ch}
  .spd{max-width:none}
  .faq{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:0 64px;align-content:start}
  .faq details:nth-last-child(1),.faq details:nth-last-child(2){border-bottom:1px solid var(--line)}
  .also{max-width:none}
}

/* ── подвал ────────────────────────────────────────────────── */
footer{background:var(--night);color:#c7ccdd;margin-top:0}
.foot{padding:40px clamp(20px,4vw,64px) 44px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:#8b93ad;font-weight:700}
.foot ul{list-style:none;margin-top:12px}
.foot li{margin-top:9px}
.foot a{color:#c7ccdd;text-decoration:none;font-size:15px}
.foot a:hover{color:#fff}
.foot .about{font-size:14.5px;line-height:1.6;color:#8b93ad;margin-top:12px;max-width:36ch}
.foot .brand{color:#fff}
.copy{margin-top:34px;padding-top:18px;border-top:1px solid #232a44;font-size:13.5px;color:#8b93ad;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ── 404 ───────────────────────────────────────────────────── */
.nf .big{font-size:clamp(96px,18vw,220px)}
.nf .sub{max-width:44ch}

/* ── мобайл ────────────────────────────────────────────────── */
@media(max-width:900px){
  header{flex-wrap:wrap;height:auto;padding-top:12px;row-gap:0}
  nav{order:3;width:100%;overflow-x:auto;gap:18px;padding:8px 0 12px;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav a{white-space:nowrap}
  .cyc{min-height:88svh}
  .hero{padding-top:22px}
  .btn{width:100%;text-align:center}
  .row{gap:20px}.cell{min-width:118px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .spd{font-size:14.5px}
  .spd td:first-child{white-space:normal}
}
@media(max-width:520px){
  .foot-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .spd{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}