/* Approved D45 design. Sources: docs/design/site-redesign/src/. */
@font-face{font-family:gilroyFont;src:url("/content/admin/fonts/gilroy-400.woff2?v=8e78c2c8c012") format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:gilroyFont;src:url("/content/admin/fonts/gilroy-500.woff2?v=ee68ee26d544") format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:gilroyFont;src:url("/content/admin/fonts/gilroy-600.woff2?v=a009b007bbe6") format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:gilroyFont;src:url("/content/admin/fonts/gilroy-700.woff2?v=8da03ac3ff1a") format('woff2');font-weight:700;font-style:normal;font-display:swap}

/*GILROY*/
/* Sharavoz brand world: blue-violet gradient stages (hero, devices, price) alternate with glossy pearl panels; orange is the only action colour. */
:root{
  --bg:#D9DAE7; --ink:#1E1650; --ink-2:#4F4C70; --line:#D2D2E0; --white:#FFFFFF;
  --brand:#4B52C8; --brand-2:#6E75EE; --brand-3:#8C93F4; --brand-deep:#3B41A8; --brand-soft:#E8E9FC; --brand-ink:#3A40A8;
  --accent:#FF8A1F; --accent-2:#FFA54A; --accent-soft:#FFF1E3; --accent-ink:#9A4A00;
  --err-bg:#FDECEC; --err:#A3231C; --ok-bg:#E6F6EC; --ok:#1C7A43;
  --font:'gilroyFont','Helvetica Neue',Arial,sans-serif;
  /* D45 semantic type scale; display and artwork numerals keep their own sizes. */
  --type-page:40px; --type-section:27px; --type-help-section:34px; --type-body:17px; --type-small:13px;
  --type-label:14px; --type-button:16px; --type-table:15px; --type-pager:14px;
  --type-leading-body:1.55; --type-leading-heading:1.06; --type-leading-control:1.4;
  --type-weight-body:400; --type-weight-label:600; --type-weight-strong:700;
  --r-xl:36px; --r-lg:26px; --r-md:18px;
  --shadow:0 1px 2px rgba(30,22,80,.05),0 14px 36px rgba(30,22,80,.08);
  --shadow-lg:0 2px 6px rgba(30,22,80,.06),0 30px 70px rgba(43,40,140,.22);
  --stage:radial-gradient(900px 520px at 22% -10%,rgba(150,158,250,.26),transparent 60%),radial-gradient(700px 500px at 100% 100%,rgba(40,30,140,.45),transparent 60%),linear-gradient(135deg,#6C73E6 0%,#4B52C8 48%,#3C42AE 100%);
  --pearl:linear-gradient(135deg,#F1F1F6 0%,#E6E6EE 55%,#DCDCE6 100%);
  color-scheme:light;
}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--type-body);line-height:var(--type-leading-body);font-weight:var(--type-weight-body);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
button,input{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--brand-ink)}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.025em;line-height:var(--type-leading-heading)}
p{margin:0}
img{display:block;max-width:100%;height:auto}
:focus,:focus-visible{outline:none!important}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--bg)}
.page{padding-block:14px calc(14px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:20px}

/* surfaces */
.stage{position:relative;overflow:clip;border-radius:var(--r-xl);background:var(--stage);color:#fff;box-shadow:var(--shadow-lg);isolation:isolate}
.stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%)}
.pearl{position:relative;overflow:clip;border-radius:var(--r-xl);background:var(--pearl);border:1px solid rgba(255,255,255,.6);box-shadow:var(--shadow);isolation:isolate}
.pearl::before,.pearl::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%}
.pearl::before{width:140%;height:120%;left:-30%;top:38%;background:rgba(255,255,255,.35);transform:rotate(-8deg)}
.pearl::after{width:90%;height:90%;right:-35%;top:-45%;background:radial-gradient(closest-side,rgba(255,255,255,.6),rgba(255,255,255,0));}
.sec,.world-sec{padding:60px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.stage .eyebrow{color:#FFC48C}
.h2{font-size:var(--type-page);font-weight:var(--type-weight-strong)}
.lead{font-size:18px;color:var(--ink-2);max-width:60ch}
.stage .lead{color:#E3E5FF}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 40px;margin-bottom:34px}
.sec-head>div{display:flex;flex-direction:column;gap:12px;max-width:720px}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--brand-ink);text-decoration:none;font-size:15px}
.ico{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff;color:var(--brand);box-shadow:0 6px 16px rgba(75,82,200,.14)}
.ico svg{width:26px;height:26px}
.ico.or{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;box-shadow:0 8px 18px rgba(255,138,31,.35)}
.ico.in{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;box-shadow:0 8px 18px rgba(75,82,200,.35)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 24px;border-radius:16px;border:0;font-weight:var(--type-weight-strong);font-size:var(--type-button);line-height:normal;text-decoration:none;white-space:nowrap;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-accent{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:var(--ink);box-shadow:0 10px 24px rgba(255,138,31,.38),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-brand{background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#fff;box-shadow:0 10px 24px rgba(75,82,200,.32),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-ghost{background:linear-gradient(180deg,#fff,#FAFAFD);color:var(--ink);border:1px solid var(--line);box-shadow:0 4px 12px rgba(31,27,74,.06),inset 0 1px 0 #fff}
/* Every button is alive like the orange one: 1px lift, a stronger soft shadow and an accent border on hover; it settles back when pressed. */
.btn-ghost:hover{border-color:#FFC48A;box-shadow:0 10px 22px rgba(31,27,74,.10),inset 0 1px 0 #fff}
.btn:active{transform:translateY(0)}
.btn-glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px)}
.btn-lg{height:54px;padding:0 26px;font-size:16px;border-radius:16px}

/* header */
.hdr{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:30;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 18px;border-radius:24px;background:rgba(244,244,249,.88);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow)}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex-shrink:0}
.logo-mark{display:block;flex:none;width:52px;height:52px}
.logo-word{font-size:23px;display:block;flex:none;height:.765em;width:auto;aspect-ratio:5586/765}
.logo-tv{font-size:12px;font-weight:700;letter-spacing:.06em;color:#fff;background:linear-gradient(180deg,var(--accent-2),var(--accent));padding:4px 7px 3px;border-radius:7px;line-height:1}
.nav{display:flex;gap:2px;margin:0 auto}
.nav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;padding:10px 13px;border-radius:12px;transition:background .15s}
.nav a:hover{background:var(--brand-soft)}
.hdr-auth{display:flex;gap:8px}
.burger{display:none;width:48px;height:48px;border-radius:14px;border:1px solid var(--line);background:#fff;align-items:center;justify-content:center;margin-left:auto}
.mmenu{background:#fff;border:1px solid var(--line);border-radius:24px;padding:12px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow);margin-top:-8px}
.mmenu a{color:var(--ink);text-decoration:none;font-weight:600;padding:13px 14px;border-radius:12px}
.mmenu a:hover{background:var(--brand-soft)}
.mmenu .row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
@media (max-width:1100px){.nav,.hdr-auth{display:none}.burger{display:inline-flex}}

/* hero */
.hero{padding:64px 0 0 64px}
.hero-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.3fr);gap:24px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:26px;padding-bottom:40px}
.tag{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#FFD1A6}
.tag::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}
.h1{font-size:52px;font-weight:700;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
.h1 em{font-style:normal;color:#FFB36B}
.hero .lead{font-size:18px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-img{position:relative;align-self:end;margin-right:-2%}
.hero-img img{width:108%;max-width:none;height:auto;mask-image:radial-gradient(ellipse 62% 60% at 52% 50%,#000 62%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 62% 60% at 52% 50%,#000 62%,transparent 100%)}
.pill{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:16px;background:rgba(255,255,255,.95);color:var(--ink);box-shadow:var(--shadow-lg);font-size:14px;font-weight:700;white-space:nowrap}
.pill small{display:block;font-size:12px;font-weight:500;color:var(--ink-2)}
.pill .ico{width:38px;height:38px;border-radius:12px}
.pill .ico svg{width:20px;height:20px}
.p1{left:2%;top:14%}.p2{right:0;bottom:16%}
@media (prefers-reduced-motion: no-preference){.pill{animation:bob 6s ease-in-out infinite}.p2{animation-delay:-3s}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hero-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 64px 0 0;transform:translateY(0);background:rgba(255,255,255,.18);border-radius:20px 20px 0 0;overflow:clip;border:1px solid rgba(255,255,255,.22);border-bottom:0}
.hb{display:flex;gap:12px;align-items:center;padding:18px 20px;background:rgba(40,36,140,.35);backdrop-filter:blur(10px);font-size:15px;font-weight:600;color:#fff}
.hb svg{width:24px;height:24px;flex-shrink:0;color:#FFB36B}

/* numbers */
.nums{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:30px 20px}
.num{text-align:center;padding:4px 10px;border-left:1px solid #D6D6E2}
.num:first-child{border-left:0}
.num b{display:block;font-size:36px;font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#2A2170,#4B52C8);-webkit-background-clip:text;background-clip:text;color:transparent}
.num span{font-size:15px;color:var(--ink-2)}

/* genres */
.genres{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.genre{position:relative;overflow:clip;border-radius:22px;aspect-ratio:3/4.1;display:flex;align-items:flex-end;padding:16px;color:#fff;font-weight:700;font-size:20px;letter-spacing:-.02em;box-shadow:0 12px 26px rgba(30,22,80,.16);transition:transform .25s}
.genre:hover{transform:translateY(-4px)}
.genre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.genre:hover img{transform:scale(1.06)}
.genre::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,60,0) 45%,rgba(20,14,60,.78) 100%)}
.genre span{position:relative;z-index:1;overflow-wrap:anywhere;min-width:0}

/* devices */
.devices{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;align-items:center;padding:56px 0 56px 60px}
.devices-copy{display:flex;flex-direction:column;gap:22px}
.dev-icons{display:flex;flex-wrap:wrap;gap:12px}
.dev{display:flex;flex-direction:column;align-items:center;gap:8px;width:92px;padding:14px 8px;border-radius:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:13px;font-weight:600}
.dev svg{width:28px;height:28px}
.devices-img img{width:100%;border-radius:26px 0 0 26px;box-shadow:var(--shadow-lg)}

/* countries */
.world{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:center}
.world-copy{display:flex;flex-direction:column;gap:16px}
.flags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.flag{min-width:0;display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:16px;background:rgba(255,255,255,.62);border:1px solid #fff;box-shadow:0 4px 12px rgba(30,22,80,.05);font-weight:600;font-size:15.5px}
.fl{display:block;width:32px;height:32px;border-radius:50%;overflow:clip;flex-shrink:0;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(30,22,80,.2)}
.fl svg{display:block;width:100%;height:100%}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:stretch}
.about-copy{display:flex;flex-direction:column;gap:22px;justify-content:center}
.about-copy p{font-size:20px;color:var(--ink-2)}
.about-copy strong{color:var(--ink)}
.about-side{display:grid;grid-template-rows:auto auto;gap:14px}
.photo-card{position:relative;overflow:clip;border-radius:var(--r-lg);min-height:230px;display:flex;align-items:flex-end;padding:24px;color:#fff;box-shadow:var(--shadow)}
.photo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,24,110,.05) 20%,rgba(30,24,110,.82) 100%)}
.photo-card>div{position:relative;z-index:1}
.photo-card h3{font-size:24px}
.photo-card p{color:#E3E5FF;margin-top:6px}
.feat{display:flex;gap:18px;align-items:center;padding:22px 24px;border-radius:var(--r-lg);background:rgba(255,255,255,.62);border:1px solid #fff;box-shadow:0 6px 18px rgba(30,22,80,.06)}
/* The ticket note in the contacts card is information, not a link: flat, no pointer. */
.contact-main .feat{box-shadow:none;cursor:default}
.feat h3{font-size:22px;letter-spacing:-.015em}
.feat p{color:var(--ink-2);margin-top:4px}

/* cost */
.cost{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:20px}
.price{padding:56px;display:flex;flex-direction:column;gap:24px}
.price-num{display:flex;align-items:flex-end;gap:16px}
.price-num b{font-size:112px;line-height:1;padding:.04em .1em 0 0;margin-right:-.1em;font-weight:700;letter-spacing:-.05em;background:linear-gradient(180deg,#fff 30%,#C9CCFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.price-num span{font-size:22px;font-weight:600;color:#E3E5FF;padding-bottom:12px;line-height:1.25}
.note{padding:18px 20px;border-radius:var(--r-md);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);font-size:15.5px;color:#E9EAFF;backdrop-filter:blur(8px)}
.note a{color:#FFC48C;font-weight:700}
.note strong{color:#fff}
.gets{padding:56px;display:flex;flex-direction:column;gap:20px}
.get{display:flex;gap:16px;align-items:center;padding:14px 16px;border-radius:var(--r-md);background:rgba(255,255,255,.62);border:1px solid #fff}
.get b{font-size:18px;display:block}
.get span{color:var(--ink-2);font-size:15px}
.editor{border-radius:var(--r-md);background:#fff;overflow:clip;box-shadow:var(--shadow);border:1px solid var(--line)}
.editor-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px;font-weight:700}
.editor-h span{color:var(--accent-ink);font-size:13px}
.ed-row{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:14px;font-weight:600;border-bottom:1px solid var(--line)}
.ed-row:last-child{border-bottom:0}
.ed-row.sel{background:#FFFBF6}
.cb{width:18px;height:18px;border-radius:5px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cb.off{background:#fff;border:1.5px solid #C9C7DB}
.ed-row .fl{width:20px;height:20px;box-shadow:none}
.ed-row em{margin-left:auto;font-style:normal;color:var(--ink-2);font-weight:500;font-variant-numeric:tabular-nums}
.grip{color:#B9B7CF;letter-spacing:-2px}

/* test band */
.band{position:relative;overflow:clip;border-radius:var(--r-xl);min-height:520px;display:flex;align-items:center;padding:64px;color:#fff;box-shadow:var(--shadow-lg);isolation:isolate}
.band>img,.band>picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band>picture img{width:100%;height:100%;object-fit:cover}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(40,30,120,.86) 0%,rgba(60,50,160,.6) 45%,rgba(60,50,160,.05) 80%)}
.band-copy{max-width:560px;display:flex;flex-direction:column;gap:22px}
.band-copy p{font-size:19px;color:#ECEDFF}
.band-copy p a{color:inherit}
.band-copy strong{color:#fff}
.timer{display:flex;gap:12px;flex-wrap:wrap}
.tcard{padding:16px 20px;border-radius:18px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px)}
.tcard b{display:block;font-size:34px;line-height:1;font-weight:700;letter-spacing:-.03em}
.tcard span{font-size:14px;color:#E3E5FF}
.tcard.hot{background:linear-gradient(180deg,var(--accent-2),var(--accent));border-color:transparent;color:var(--ink)}
.tcard.hot span{color:#4A2A00}

/* referral */
.refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ref{position:relative;overflow:clip;border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,.62);border:1px solid #fff;box-shadow:0 8px 22px rgba(30,22,80,.06)}
.ref .who{align-self:flex-start;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand-ink)}
.ref b{font-size:52px;line-height:1;font-weight:700;letter-spacing:-.04em;background:linear-gradient(180deg,#2A2170,#4B52C8);-webkit-background-clip:text;background-clip:text;color:transparent}
.ref p{color:var(--ink-2)}
.ref.you{background:var(--stage);color:#fff;border-color:transparent;box-shadow:var(--shadow-lg)}
.ref.you b{background:linear-gradient(180deg,#fff 30%,#FFD1A6);-webkit-background-clip:text;background-clip:text}
.ref.you p{color:#E3E5FF}
.ref.you .who{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:var(--ink)}
.ref .ring{position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;border:22px solid rgba(75,82,200,.07)}
.ref.you .ring{border-color:rgba(255,255,255,.1)}

/* ddos */
.ddos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:56px 56px 56px 60px}
.ddos-copy{display:flex;flex-direction:column;gap:20px}
.ddos-copy .sub{font-size:22px;font-weight:700;letter-spacing:-.015em}
.ddos-copy p{font-size:18px;color:#E3E5FF}
.ddos-copy strong{color:#fff}
.ddos-img{position:relative}
.ddos-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:26px;box-shadow:var(--shadow-lg)}
.shield{position:absolute;left:-26px;bottom:26px;display:flex;align-items:center;gap:12px;padding:14px 18px 14px 14px;border-radius:18px;background:#fff;color:var(--ink);box-shadow:var(--shadow-lg);font-weight:700}
.shield small{display:block;font-weight:500;color:var(--ink-2);font-size:13px}

/* contacts */
.contacts{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:20px}
.contact-main{padding:56px;display:flex;flex-direction:column;gap:22px}
.mail{font-size:38px;font-weight:700;letter-spacing:-.03em;color:var(--ink);text-decoration:none;word-break:break-all;line-height:1.1}
.mail:hover{color:var(--brand)}
.tg{align-self:flex-start;display:inline-flex;align-items:center;gap:12px;height:58px;padding:0 24px 0 10px;border-radius:18px;background:linear-gradient(180deg,#37B6F2,#229ED9);color:#fff;text-decoration:none;font-weight:700;box-shadow:0 10px 24px rgba(34,158,217,.35)}
.tg i{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.addr{padding:56px;display:flex;flex-direction:column;gap:18px}
.addr address{font-style:normal;font-size:18px;line-height:1.65;color:#E9EAFF}
.addr strong{color:#fff}

/* footer */
.foot{padding:48px 56px 28px;display:flex;flex-direction:column;gap:32px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:32px}
.foot h4{margin:0 0 14px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.foot .col,.fbody{display:flex;flex-direction:column;gap:10px}
.fcol summary{list-style:none;pointer-events:none}
.fcol summary::-webkit-details-marker{display:none}
.fcol .chev,.fcol summary .ic{display:none}
.foot a,.linkbtn{color:var(--ink);text-decoration:none;font-size:15.5px;font-weight:500}
.foot a:hover,.linkbtn:hover{color:var(--brand)}
.linkbtn{background:none;border:0;padding:0;text-align:left;text-decoration:underline;text-underline-offset:4px}
.foot small{color:var(--ink-2);font-size:13.5px}
.foot-btns{display:flex;flex-direction:column;gap:8px;max-width:260px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;border-top:1px solid #D9D9E4;font-size:14px;color:var(--ink-2)}
.foot-bottom a{font-size:14px;font-weight:700}

/* floating */
.totop{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px));width:52px;height:52px;border-radius:50%;background:linear-gradient(180deg,var(--brand-2),var(--brand));box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;color:#fff;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s}
.totop.show{opacity:1;pointer-events:auto}
/* Low by default (owner 09.11); BackToTop lifts it above a bottom bar by the bar's measured height. */
@media (max-width:720px){.totop{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));width:48px;height:48px}}
.cookies{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:780px;margin:0 auto;display:flex;gap:16px;align-items:center;padding:14px 14px 14px 22px;border-radius:20px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:var(--shadow-lg);z-index:35}
.cookies p{flex:1;font-size:14px;color:var(--ink-2)}
.cookies .linkbtn{font-size:14px;color:var(--brand-ink)}
.toast{position:fixed;top:calc(env(safe-area-inset-top,0px) + 96px);left:50%;transform:translateX(-50%);padding:14px 20px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);font-weight:700;z-index:70}

/* modal */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(40,37,110,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:flex-start;padding:calc(env(safe-area-inset-top,0px) + 56px) 16px 40px;overflow-y:auto}
.dlg{position:relative;width:480px;max-width:100%;background:#fff;border-radius:30px;padding:32px;display:flex;flex-direction:column;gap:20px;box-shadow:0 40px 90px rgba(23,19,58,.3)}
.x{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:14px;border:0;background:var(--bg);display:flex;align-items:center;justify-content:center}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:16px;background:var(--bg);margin-right:56px}
.tabs button{height:44px;border:0;border-radius:12px;background:transparent;font-weight:700;font-size:16px}
.tabs button[aria-selected="true"]{background:#fff;box-shadow:0 2px 8px rgba(23,19,58,.1)}
.dlg h2{font-size:var(--type-section);margin-right:56px}
.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:8px;font-size:var(--type-label);font-weight:var(--type-weight-label)}
.field small{font-weight:500;color:var(--ink-2)}
.inp{position:relative}
.inp input{width:100%;height:54px;border-radius:15px;border:1px solid #D6D4E6;background:#fff;padding:0 16px;font-size:16px;color:var(--ink)}
.inp input:focus{outline:none;outline-offset:0;border-color:var(--brand)}
.inp.pw input{padding-right:52px}
/* Gilroy's bullet is a 0.2em dot sitting 0.08em above the middle: scale it up and drop the line so the mask dots are readable and centred. */
.inp input[type=password]{font-size:28px;letter-spacing:.02em;padding-top:4.5px}
.eye{position:absolute;right:5px;top:5px;width:44px;height:44px;border:0;background:transparent;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.alert{padding:12px 14px;border-radius:14px;background:var(--err-bg);color:var(--err);font-size:14px;font-weight:600}
.hint{font-size:13px;color:var(--ink-2)}
.hint strong{color:var(--ink)}
.hint .linkbtn{font-size:inherit;font-weight:600;color:var(--brand-ink)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.bonus{padding:14px 16px;border-radius:16px;background:#FFFBF6;border:1px solid #FFE3C7;display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:700}
.bonus div{display:flex;flex-wrap:wrap;gap:8px}
.bonus span{background:#fff;color:var(--ink);padding:6px 10px;border-radius:10px;font-weight:600}
.between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.check{display:flex;align-items:center;gap:10px;font-size:15px;min-height:44px;font-weight:500}
.check input{flex:none}
.tlink{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;padding:0;min-height:44px;color:var(--brand-ink);font-weight:700;font-size:15px;line-height:normal}
.form>.tlink,.done>.tlink,fieldset>.tlink,.privacy>.tlink{align-self:center}
.acc{display:flex;gap:14px;align-items:center;padding:16px;border-radius:16px;border:1px solid #D6D4E6;cursor:pointer}
.acc:has(input:checked){border:2px solid var(--brand);background:#F6F6FE}
.acc input{width:20px;height:20px;accent-color:var(--brand)}
.acc b{display:block;font-size:17px}
.acc span{font-size:14px;color:var(--ink-2)}
.done{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;padding-top:6px}
.done .big{width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.done p{color:var(--ink-2)}
.done h2{margin-right:0}
.login-box{padding:14px 18px;border-radius:16px;background:var(--bg);width:100%}
.privacy{display:flex;flex-direction:column;gap:12px;font-size:15px;color:var(--ink-2)}
.privacy h3{font-size:18px;color:var(--ink);margin-top:6px;letter-spacing:-.01em}
.w100{width:100%}

/* responsive */
@media (max-width:1100px){
  .hero{padding:48px 0 0 40px}
  .hero-grid,.about,.cost,.ddos,.contacts,.world,.devices{grid-template-columns:minmax(0,1fr)}
  .hero-copy{padding-right:40px}
  .hero-bar{grid-template-columns:repeat(2,minmax(0,1fr));margin-right:40px}
  .devices{padding:48px 0 48px 40px}.devices-copy{padding-right:40px}
  .genres{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}.num:nth-child(odd){border-left:0}.num:last-child{grid-column:1/-1}
  .foot-grid{grid-template-columns:1fr 1fr}
  .shield{left:16px}
}
@media (max-width:720px){
  .hero{padding:32px 0 0 22px}.hero-copy{padding-right:22px}
  .hero-bar{margin-right:22px}.hb{padding:14px;font-size:13.5px}
  .sec,.gets,.price,.contact-main,.addr,.foot,.ddos,.world-sec{padding:34px 22px}
  .hero-bar{grid-template-columns:minmax(0,1fr)}.hb{padding:12px 16px}
  .flags{gap:8px}.flag{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 10px;font-size:13.5px;overflow-wrap:anywhere}
  .devices{padding:34px 0 34px 22px}.devices-copy{padding-right:22px}
  .band{padding:34px 22px;min-height:0}.band::before{background:linear-gradient(180deg,rgba(40,30,120,.88),rgba(60,50,160,.72))}
  :root{--type-page:28px;--type-help-section:27px}
  .h1{font-size:34px}.h2{font-size:var(--type-page)}.lead,.hero .lead{font-size:16px}
  .p1,.p2{display:none}
  .genres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flags{grid-template-columns:repeat(2,minmax(0,1fr))}
  .refs{grid-template-columns:minmax(0,1fr)}
  .num b{font-size:28px}
  .price-num b{font-size:84px}.mail{font-size:28px}
  .two{grid-template-columns:minmax(0,1fr)}
  .cookies{flex-direction:column;align-items:stretch}
  .dlg{padding:24px}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .foot{gap:20px}.foot .col{padding-bottom:18px}
  .foot-btns{flex-direction:row;max-width:none}.foot-btns .btn{flex:1}
  .fcol{border-top:1px solid #D9D9E4}
  .fcol summary{pointer-events:auto;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:56px}
  .fcol summary .footer-title{margin:0}
  .fcol .chev,.fcol summary .ic{display:block;color:var(--ink-2);transition:transform .2s}
  .fcol[open] .chev,.fcol[open] summary .ic{transform:rotate(180deg)}
  .fcol .fbody{padding-bottom:18px}
  .foot-bottom{flex-direction:column;gap:6px;font-size:13px;padding-top:18px}
}


.stage .flag{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);box-shadow:none;color:#fff;backdrop-filter:blur(6px)}
.flag small{display:block;font-size:12.5px;font-weight:500;opacity:.75;line-height:1.2}
.flag>span:last-child{min-width:0}

.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ico .ic{width:26px;height:26px}
.cnt{font-variant-numeric:tabular-nums}
.stage-cta{display:flex;flex-wrap:wrap;gap:12px}
.feat-list{display:flex;flex-direction:column;gap:12px}
.media{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:center;padding:56px 0 56px 60px}
.media-copy{display:flex;flex-direction:column;gap:22px}
.media-copy .h2{font-size:54px}
.media-tags{display:flex;gap:10px;flex-wrap:wrap}
.media-tags span{cursor:default;user-select:none;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);font-weight:600;font-size:15px}
.media-img img{width:100%;border-radius:26px 0 0 26px;mask-image:linear-gradient(90deg,transparent 0%,#000 18%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%)}
@media (max-width:1100px){.media{grid-template-columns:minmax(0,1fr);padding:48px 0 0 40px}.media-copy{padding-right:40px}}
@media (max-width:720px){.media{padding:34px 0 0 22px}.media-copy{padding-right:22px}.media-copy .h2{font-size:34px}}


/* language switcher */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:50px;padding:0 14px;border-radius:16px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.16);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.lang-btn .ic{width:19px;height:19px}
.lang-btn .chev{width:16px;height:16px;transition:transform .15s}
.lang-btn[aria-expanded=true] .chev{transform:rotate(180deg)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:170px;padding:6px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);display:flex;flex-direction:column}
.lang-menu button{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 12px;border:0;border-radius:11px;background:none;color:var(--ink);font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.lang-menu button small{font-weight:500;color:var(--ink-2)}
.lang-menu button:hover{background:var(--brand-soft)}
.lang-menu button[aria-selected=true]{background:var(--brand-soft);color:var(--brand-ink)}
.lang-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:8px;padding:4px;border-radius:14px;background:var(--bg)}
.lang-seg button{height:42px;border:0;border-radius:11px;background:none;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.lang-seg button[aria-selected=true]{background:#fff;box-shadow:0 2px 8px rgba(30,22,80,.12)}
.lang-menu a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 12px;border-radius:11px;color:var(--ink);font-size:15px;font-weight:700;text-decoration:none}
.lang-menu a small{font-weight:500;color:var(--ink-2)}
.lang-menu a:hover,.lang-menu a[aria-current=page]{background:var(--brand-soft);color:var(--brand-ink)}
.lang-seg a{display:grid;place-items:center;height:42px;border-radius:11px;color:var(--ink);font-weight:700;text-decoration:none}
.lang-seg a[aria-current=page]{background:#fff;box-shadow:0 2px 8px rgba(30,22,80,.12)}
@media (max-width:1100px){
  .hdr .lang{margin-left:auto}
  .hdr .lang+.burger{margin-left:0}
}
@media (max-width:720px){
  .hdr .lang{display:none}
}


/* auth additions: social sign-in, account list, invitation code */
.socials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.soc{display:flex;align-items:center;justify-content:center;gap:8px;height:50px;border-radius:14px;border:1px solid var(--line);background:var(--field);font-weight:700;font-size:15px;color:var(--ink);transition:border-color .15s,transform .15s}
.soc:hover{border-color:var(--brand-2);transform:translateY(-1px)}
.soc svg{flex-shrink:0}
.or{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink-2);font-weight:600}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.inv input{padding-left:46px;padding-right:48px}
.inv-ic{position:absolute;left:15px;top:17px;color:var(--accent);pointer-events:none}
.clr{position:absolute;right:7px;top:7px;width:40px;height:40px;border:0;border-radius:12px;background:var(--chip);color:var(--ink-2);display:flex;align-items:center;justify-content:center}
.clr:hover{color:var(--ink)}
.inv-note{color:var(--ok)!important;font-weight:600!important}
.bonus-ref{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px dashed rgba(255,138,31,.35)}
.accs{display:flex;flex-direction:column;gap:8px}
.acc{width:100%;text-align:left;background:var(--field);border:1px solid var(--line);color:var(--ink);font:inherit}
.acc:hover{border-color:var(--brand-2)}
.acc:first-child:has(em){border:2px solid var(--brand);background:var(--brand-soft)}
.acc-av{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--brand-2),var(--brand))}
.acc-t{flex:1;min-width:0}
.acc em{font-style:normal;font-size:12px;font-weight:700;padding:5px 9px;border-radius:999px;background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#1E1650;white-space:nowrap}
.acc>svg{color:var(--ink-2);flex-shrink:0}
@media (max-width:420px){.soc{font-size:13px;gap:6px}.acc em{display:none}}

:root{--field:#fff;--chip:var(--bg)}

/* violet header in the same brand gradient as the hero and price blocks */
.hdr{background:linear-gradient(135deg,rgba(78,84,204,.97) 0%,rgba(53,58,160,.97) 100%);border-color:rgba(255,255,255,.22);box-shadow:0 10px 28px rgba(75,82,200,.3)}
.hdr .logo{color:#fff}
.hdr .nav a{color:#fff}
.hdr .nav a:hover{background:rgba(255,255,255,.14)}
.hdr .btn-ghost,.hdr .burger{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
/* logo on violet: white screen, lighter orange «TV» */
.hdr .logo,.auth-side .logo{--logo-screen:#fff;--logo-tv:#FFB36B}
.hdr .logo-mark{width:52px;height:52px}

/* auth as full pages instead of a popup */
.overlay.auth{position:fixed;inset:0;z-index:60;display:block;padding:0;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;overflow-y:auto}
.auth-grid{box-sizing:content-box;max-width:1240px;margin-inline:auto;min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:16px;padding-block:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.auth-side{display:flex;flex-direction:column;gap:36px;padding:36px 0 0 44px;min-height:calc(100vh - 32px);position:sticky;top:16px;align-self:start}
.auth-side .logo,.auth-logo-m{color:#fff}
.auth-side .logo-mark,.auth-logo-m .logo-mark{width:52px;height:52px}
.auth-logo-m{color:var(--ink)}
.auth-side-copy{display:flex;flex-direction:column;gap:24px;max-width:500px;padding-right:44px}
.auth-side .h2{font-size:36px}
.auth-side em{font-style:normal;color:#FFB36B}
.auth-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.auth-facts li{display:flex;gap:12px;align-items:center;font-weight:600;font-size:17px;color:#E9EAFF}
.auth-facts .ic{color:#FFB36B}
.auth-lead{font-size:18px;color:#E3E5FF;max-width:44ch}
.auth-img{margin-top:auto;width:108%;max-width:none;mask-image:radial-gradient(ellipse 62% 60% at 50% 55%,#000 60%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 55%,#000 60%,transparent 100%)}
.auth-main{display:flex;flex-direction:column;align-items:center;gap:14px;padding-bottom:32px;min-width:0}
.auth-main h1{font-size:var(--type-section);line-height:var(--type-leading-heading);font-weight:var(--type-weight-strong)}
.auth-top{width:100%;display:flex;justify-content:flex-end;align-items:center;padding-top:6px}
.auth-logo-m{display:none}
.back{display:inline-flex;align-items:center;gap:6px;padding:4px 2px;border:0;background:none;font-weight:600;font-size:15px;color:var(--brand-2);cursor:pointer}
.back svg{width:16px;height:16px}
.back:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.auth .dlg{width:100%;max-width:520px;margin-top:0;box-shadow:var(--shadow)}
.auth .tabs,.auth .dlg h2{margin-right:0}
@media (max-width:960px){
  .auth-grid{grid-template-columns:minmax(0,1fr)}
  .auth-side{display:none}
  .auth-top{width:100%;justify-content:space-between;min-height:52px;padding-top:0}
  .auth-logo-m{display:flex}
  .auth .dlg{margin-top:0;max-width:none;padding-inline:max(24px,calc((100% - 520px) / 2))}
}
@media (max-width:720px){.auth-logo-m .logo-word{font-size:22px}.back{font-size:14px}}

/* logo word in caps */
.logo-word{font-size:26px;font-weight:600;letter-spacing:-.03em;gap:7px}
/* invitation code collapsed by default */
.inv-toggle{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0;border:0;background:none;color:var(--accent-ink);font-weight:600;font-size:15px;cursor:pointer}
.inv-toggle svg{color:var(--accent)}
.inv-toggle:hover{text-decoration:underline;text-underline-offset:3px}
/* errors: under the field for input checks, above the submit button for server answers */
.field.bad .inp input,.cf-slot.bad .cf{border-color:var(--err);background:#FFF8F8}
.field.bad .inp input:focus{outline-color:var(--err)}
.ferr{display:flex;align-items:center;gap:6px;color:var(--err)!important;font-size:13.5px;font-weight:600!important}
.ferr::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--err) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.6' r='1.1' fill='%23fff'/%3E%3C/svg%3E") center/16px no-repeat}
.alert{display:flex;align-items:flex-start;gap:10px;border:1px solid #F4C5C2}
.alert::before{content:"";flex:none;width:20px;height:20px;margin-top:-1px;border-radius:50%;background:var(--err) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.6' r='1.1' fill='%23fff'/%3E%3C/svg%3E") center/20px no-repeat}
/* CAPTCHA slot: Cloudflare check in production (D34), 65px high like the widget */
.cf-slot{display:flex;flex-direction:column;gap:8px}
.cf{display:flex;align-items:center;gap:12px;width:100%;height:65px;padding:0 16px;border:1px solid #D6D4E6;border-radius:15px;background:#FAFAFD;font:inherit;font-size:15px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
.cf:hover{border-color:var(--brand-2)}
.cf-box{flex:none;width:26px;height:26px;border:2px solid #B9B6CF;border-radius:7px;background:#fff;display:grid;place-items:center}
.cf.busy .cf-box{border-color:var(--brand);border-top-color:transparent;border-radius:50%;animation:cfspin .7s linear infinite}
.cf[aria-pressed=true] .cf-box{border-color:var(--ok);background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/18px no-repeat}
.cf[aria-pressed=true]{cursor:default}
.cf[aria-pressed=true] .cf-txt{color:var(--ok)}
.cf-txt{flex:1;min-width:0}
.cf-by{font-size:12px;font-weight:600;color:var(--ink-2);text-align:right}
@keyframes cfspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cf.busy .cf-box{animation:none}}
/* auth side panel is exactly one screen tall, so it never shifts when the form grows (errors, bonus, invite code) */
.overlay.auth{scrollbar-gutter:stable}
.auth-side{height:calc(100vh - 32px);height:calc(100dvh - 32px);min-height:0;overflow:clip}
.auth-img{flex:1 1 0;min-height:0;margin-top:0;object-fit:contain;object-position:50% 100%}
.auth-img{display:flex;justify-content:center;mask-image:none;-webkit-mask-image:none}
.auth-img img{display:block;width:auto;max-width:100%;height:100%;object-fit:contain;object-position:50% 100%;mask-image:radial-gradient(ellipse 62% 60% at 50% 55%,#000 60%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 55%,#000 60%,transparent 100%)}
/* logo: TV in orange */
.logo-word{font-weight:700}
/* header with language switcher: links never wrap */
.nav a{white-space:nowrap;padding:10px 11px}
.hdr .lang-btn{height:48px;padding:0 12px}
.nav{gap:4px}.nav a{padding:10px 12px}
.hdr .lang-btn>.ic:first-child{display:none}
@media (max-width:1180px){.nav,.hdr-auth{display:none}.burger{display:inline-flex}.hdr .lang{margin-left:auto}.hdr .lang+.burger{margin-left:0}}
/* language switcher reads as a setting, not as a third button: no box, globe icon, divider before the auth buttons */
.hdr .lang{display:flex;align-items:center;padding-right:10px;border-right:1px solid rgba(255,255,255,.28)}
.hdr .lang-btn{height:40px;padding:0 8px;gap:5px;border:0;background:none;border-radius:12px;font-weight:600}
.hdr .lang-btn:hover,.hdr .lang-btn[aria-expanded=true]{background:rgba(255,255,255,.14)}
.hdr .lang-btn>.ic:first-child{display:block;opacity:.9}
/* phones: the language moves into the burger menu (mockup) */
@media (max-width:720px){.hdr .lang{display:none}}

/* cards with decorative overflow must not be scrollable by scrollIntoView/focus (content was shifting up inside the card) */
.stage,.pearl{overflow:clip}

body{margin:0}html{scroll-padding-top:112px}.site-home{display:contents}.stage,.pearl{overflow:clip}.site-root :where(a,button,span,p){overflow-wrap:break-word}.hdr{min-width:0}.hdr .nav{min-width:0}.site-root main{min-width:0}.site-root .btn{max-width:100%}.site-root .foot .logo-word{font-size:26px}.site-root .foot .logo{font-size:inherit}.site-root .foot-btns .btn{font-weight:700}.site-root section[id]{scroll-margin-top:112px}.overlay.auth{position:relative;inset:auto;min-height:100dvh;overflow:visible}.auth-side{overflow:clip}.auth .dlg{max-width:100%}.site-root .mmenu{position:relative;z-index:29}@media(min-width:1181px){.mmenu{display:none!important}}@media(max-width:720px){.hdr .burger{flex-shrink:0}.site-root .foot .logo{align-self:flex-start}}

/* Short footer on login/registration, same as the cabinet .cb-foot. */
.foot-short{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding:22px 28px;border-radius:24px;font-size:14px;color:var(--ink-2)}.foot-short nav{display:flex;gap:18px;flex-wrap:wrap}.foot-short a{color:var(--ink-2);font-weight:600;text-decoration:none}.foot-short a:hover{color:var(--ink)}
@media(max-width:720px){.foot-short{padding:20px 18px}}

/* D71: brand checkbox, one look for the site, the help checklists and the cabinet (.cb-cb): 22px, radius 7, orange when checked. */
.check input[type=checkbox],.ui-check{appearance:none;-webkit-appearance:none;flex:none;display:inline-grid;place-items:center;width:22px;height:22px;margin:0;padding:0;border:1.5px solid #C9C7DE;border-radius:7px;background:#fff;cursor:pointer;transition:background-color .15s,border-color .15s}
.check input[type=checkbox]:hover,.ui-check:hover{border-color:var(--accent-2)}
.check input[type=checkbox]:checked,.ui-check:checked{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.check input[type=checkbox]:focus-visible,.ui-check:focus-visible{outline:none;outline-offset:2px;border-radius:7px}
.check{cursor:pointer}

/* footer: buttons under the logo; on phones the columns are collapsed (mockup), on wider screens always open */
.foot .foot-btns{margin-top:12px}
@media (min-width:721px){.fcol::details-content{content-visibility:visible;display:block}}

/* confirmation screens */
.done .big svg{display:block}
.done .btn{width:100%}
.done>.login-box+.tlink{align-self:center}

/* error pages (404, 500, /Errors/*) */
.site-error{min-height:50vh;padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px}
.site-error .tag{color:var(--accent-ink)}
.site-error p{color:var(--ink-2);max-width:60ch}

/* legal documents (/Doc/*, payment agreement) */
.doc{padding:56px 64px;display:flex;flex-direction:column;gap:20px}
.doc-col{max-width:760px;display:flex;flex-direction:column}
.doc .h2{font-size:var(--type-page);letter-spacing:-.025em;line-height:1.06;color:var(--ink);margin:12px 0 20px}
.doc h2:not(.h2){font-size:24px;font-weight:700;line-height:1.2;letter-spacing:-.02em;margin:36px 0 12px;color:var(--ink)}
.doc h3{font-size:19px;font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:24px 0 8px;color:var(--ink)}
.doc p{font-size:17px;line-height:1.55;color:var(--ink-2);margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 14px;padding-left:22px;color:var(--ink-2)}
.doc li{margin:0 0 6px;line-height:1.55}
.doc li::marker{color:var(--brand)}
.doc a{color:var(--brand-ink);font-weight:600;text-decoration:none}
.doc a:hover{text-decoration:underline;text-underline-offset:3px}
.doc-date{font-size:13px;color:var(--ink-2)}
.doc pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:17px;line-height:1.55;color:var(--ink-2);margin:0}
@media (max-width:720px){.doc{padding:28px 20px}.doc h2:not(.h2){font-size:22px}}

/* header on the auth pages: Вход and Регистрация look the same on every page (owner, 2026-11-05: no ring on the current one) */
.privacy h2{font-size:24px}
.doc-label{color:var(--ink-2);margin-bottom:8px}

.fcol summary .footer-title{font-size:18px;font-weight:700}
/* Live controls (owner 2026-11-07): every button, tab and clickable tile lifts 1px with a soft shadow on hover, like the orange button. */
:is(.soc,.clr,.cf,.hdr .lang-btn,.lang-seg button,.lang-menu button,.hp-find,.hp-rail button,.hp-sym button,.hp-topics button){transition:transform .15s,box-shadow .15s,background-color .15s,border-color .15s,color .15s}
:is(.soc,.clr,.cf,.hdr .lang-btn,.hp-find,.hp-sym button):not(:disabled):hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(30,22,80,.10)}
:is(.lang-seg button:not([aria-selected=true]),.hp-rail button,.hp-topics button):not(:disabled):hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(30,22,80,.08)}
.hp-pl:hover{box-shadow:0 14px 30px rgba(30,22,80,.12)}
:is(.btn,.soc,.clr,.cf,.hdr .lang-btn,.lang-seg button,.hp-find,.hp-rail button,.hp-sym button,.hp-topics button,.hp-dev,.hp-pl):not(:disabled):active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){:is(.btn,.soc,.clr,.cf,.hdr .lang-btn,.lang-seg button,.hp-find,.hp-rail button,.hp-sym button,.hp-topics button,.hp-dev,.hp-pl):hover{transform:none}}

/* One «eye» per password field: hide the browser's own reveal/clear buttons (Edge/IE). */
input::-ms-reveal,input::-ms-clear{display:none}