/* ============================================================
   Надёжный сервис — одностраничный лендинг
   ============================================================ */

:root{
  --bg:            #04060e;
  --bg-2:          #060b1a;
  --ink:           #e9f1fb;
  --ink-2:         #a9bbd4;
  --ink-3:         #7c8ea9;
  --accent:        #38bdf8;
  --accent-2:      #2563eb;
  --accent-soft:   #7dd3fc;
  --line:          rgba(125,175,235,.14);
  --line-2:        rgba(125,175,235,.09);
  --glass:         rgba(11,19,38,.52);
  --glass-2:       rgba(9,16,33,.62);
  --shadow:        0 34px 90px -30px rgba(0,0,0,.85);
  --r-lg:          28px;
  --r-md:          20px;
  --r-sm:          13px;
  --ease:          cubic-bezier(.22,.68,.24,1);
  --pad-x:         clamp(18px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:Manrope,"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.62;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,ul{ margin:0; }
ul{ padding:0; list-style:none; }

::selection{ background:rgba(56,189,248,.28); color:#fff; }

/* ============================================================
   ФОН — многослойная 3D-сцена
   ============================================================ */

.scene{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  will-change:transform;
}

.scene__base{
  position:absolute; inset:0;
  background:
    radial-gradient(min(1200px,86vw) min(800px,64vh) at 76% -6%,  rgba(37,99,235,.34),  transparent 62%),
    radial-gradient(min(1000px,78vw) min(720px,58vh) at 8%  104%, rgba(14,116,199,.26), transparent 64%),
    radial-gradient(min(760px,60vw)  min(620px,50vh) at 50% 46%,  rgba(56,189,248,.10), transparent 70%),
    linear-gradient(172deg, #060b1c 0%, #050916 44%, #03050d 100%);
}

/* — фотослои с 3D-объектами — */
.scene__img{
  position:absolute;
  background-repeat:no-repeat;
  background-size:cover;
  will-change:transform;
}

/* кластер тёмных сфер — верхний левый угол */
.scene__img--spheres{
  top:-6vh; left:-7vw;
  width:min(46vw,720px); height:min(58vh,620px);
  background-image:url(../img/spheres.jpg);
  background-position:52% 42%;
  background-size:cover;
  opacity:.62;
  mix-blend-mode:screen;
  filter:saturate(1.25) brightness(.95);
  -webkit-mask-image:radial-gradient(54% 56% at 46% 46%, #000 6%, transparent 74%);
          mask-image:radial-gradient(54% 56% at 46% 46%, #000 6%, transparent 74%);
  animation:driftA 26s var(--ease) infinite;
}

/* светящаяся сфера — правый верхний угол (акцент, как «подарок» в референсе) */
/* чёрный фон снимка исчезает благодаря mix-blend-mode:screen —
   остаётся только сама светящаяся сфера */
.scene__img--orb{
  top:clamp(6px,3vh,54px); right:min(2vw,34px);
  width:min(42vw,600px);
  aspect-ratio:1400/931;
  height:auto;
  background-image:url(../img/orb.jpg);
  background-position:50% 46%;
  background-size:contain;
  opacity:.72;
  mix-blend-mode:screen;
  filter:saturate(1.05) contrast(1.02) hue-rotate(-8deg) blur(1.8px);
  -webkit-mask-image:radial-gradient(46% 44% at 50% 48%, #000 55%, transparent 88%);
          mask-image:radial-gradient(46% 44% at 50% 48%, #000 55%, transparent 88%);
  animation:driftB 32s var(--ease) infinite;
}

/* стеклянная форма — нижний правый угол */
.scene__img--glass{
  bottom:-14vh; right:-8vw;
  width:min(50vw,760px); height:min(60vh,660px);
  background-image:url(../img/glass.jpg);
  background-position:30% 50%;
  background-size:cover;
  opacity:.26;
  mix-blend-mode:screen;
  filter:saturate(1.15) blur(3px);
  -webkit-mask-image:radial-gradient(50% 52% at 48% 50%, #000 4%, transparent 72%);
          mask-image:radial-gradient(50% 52% at 48% 50%, #000 4%, transparent 72%);
  animation:driftA 38s var(--ease) infinite reverse;
}

/* складки — нижний левый угол, за блоком контактов */
.scene__img--folds{
  bottom:-6vh; left:-10vw;
  width:min(52vw,780px); height:min(52vh,560px);
  background-image:url(../img/folds.jpg);
  background-position:60% 40%;
  background-size:cover;
  opacity:.44;
  mix-blend-mode:screen;
  filter:saturate(1.25) blur(.6px);
  -webkit-mask-image:radial-gradient(52% 54% at 52% 48%, #000 4%, transparent 74%);
          mask-image:radial-gradient(52% 54% at 52% 48%, #000 4%, transparent 74%);
  animation:driftB 42s var(--ease) infinite;
}

/* — светящиеся сферы-градиенты — */
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(3px);
  will-change:transform;
}
.blob--1{
  top:12%; left:9%;
  width:clamp(120px,15vw,250px); aspect-ratio:1;
  background:radial-gradient(circle at 34% 30%, rgba(186,230,253,.5), rgba(37,99,235,.22) 46%, transparent 72%);
  animation:driftB 19s var(--ease) infinite;
}
.blob--2{
  bottom:14%; left:-4%;
  width:clamp(200px,28vw,470px); aspect-ratio:1;
  background:radial-gradient(circle at 58% 42%, rgba(59,130,246,.34), rgba(8,47,73,.2) 48%, transparent 74%);
  filter:blur(14px);
  animation:driftA 30s var(--ease) infinite;
}
.blob--3{
  top:58%; right:12%;
  width:clamp(90px,11vw,180px); aspect-ratio:1;
  background:radial-gradient(circle at 40% 34%, rgba(125,211,252,.42), rgba(30,64,175,.16) 52%, transparent 74%);
  animation:driftB 23s var(--ease) infinite reverse;
}

/* — тонкие орбитальные кольца — */
.ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(125,211,252,.11);
  will-change:transform;
}
.ring--1{
  top:6%; right:16%;
  width:clamp(240px,34vw,560px); aspect-ratio:1;
  box-shadow:inset 0 0 90px rgba(56,189,248,.07);
  animation:spin 70s linear infinite;
}
.ring--2{
  bottom:2%; left:14%;
  width:clamp(180px,26vw,420px); aspect-ratio:1;
  border-color:rgba(125,211,252,.08);
  animation:spin 96s linear infinite reverse;
}

/* — зерно и виньетка — */
.scene__grain{
  position:absolute; inset:0;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scene__vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 88% at 50% 40%, transparent 40%, rgba(2,4,10,.62) 100%);
}

@keyframes driftA{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%    { transform:translate3d(0,-34px,0) scale(1.045); }
}
@keyframes driftB{
  0%,100%{ transform:translate3d(0,0,0); }
  50%    { transform:translate3d(26px,28px,0); }
}
@keyframes spin{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}

/* ============================================================
   Каркас
   ============================================================ */

.page{
  position:relative;
  z-index:1;
  padding:0 var(--pad-x);
}

/* ============================================================
   Карточки (общий стиль стекла)
   ============================================================ */

.card{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:
    linear-gradient(168deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 42%, rgba(255,255,255,0) 100%),
    var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
          backdrop-filter:blur(22px) saturate(140%);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.07);
  transform-style:preserve-3d;
}

/* верхняя световая линия */
.card::before{
  content:"";
  position:absolute; top:0; left:12%; right:12%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(160,220,255,.5), transparent);
}

/* мягкий блик, следящий за курсором */
.card__sheen{
  position:absolute; inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity .45s var(--ease);
  background:radial-gradient(420px 320px at var(--mx,50%) var(--my,0%), rgba(120,200,255,.13), transparent 68%);
}
.card:hover .card__sheen{ opacity:1; }

/* ============================================================
   HERO
   ============================================================ */

.hero{
  min-height:min(68svh,640px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(17px,2.3vh,28px);
  padding:clamp(38px,4.4vh,58px) 0 clamp(14px,2vh,24px);
}

.card--hero{
  width:100%;
  max-width:880px;
  padding:clamp(24px,3.4vw,42px) clamp(22px,4.4vw,62px) clamp(24px,3.4vw,40px);
  text-align:center;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px 7px 12px;
  border-radius:999px;
  border:1px solid rgba(125,211,252,.24);
  background:linear-gradient(180deg, rgba(56,189,248,.16), rgba(37,99,235,.09));
  color:#cfe8ff;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.03em;
  box-shadow:0 0 30px -8px rgba(56,189,248,.5), inset 0 1px 0 rgba(255,255,255,.1);
}
.badge__dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--accent-soft);
  box-shadow:0 0 0 3px rgba(125,211,252,.18), 0 0 12px rgba(125,211,252,.9);
  animation:blink 2.6s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.42} }

.hero__title{
  margin:clamp(12px,1.8vw,18px) 0 0;
  font-size:clamp(31px,6.1vw,60px);
  line-height:1.09;
  font-weight:800;
  letter-spacing:-.024em;
  text-wrap:balance;
}
.hero__title .grad{
  display:block;
  background:linear-gradient(100deg,#9ad8ff 0%,#4fa9f5 42%,#8fd0ff 76%,#5bb8fb 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  filter:drop-shadow(0 6px 26px rgba(56,189,248,.28));
}

.offer{
  display:inline-flex;
  align-items:center;
  gap:clamp(11px,1.5vw,16px);
  margin-top:clamp(14px,1.9vw,20px);
  padding:clamp(11px,1.5vw,15px) clamp(17px,2.4vw,27px);
  border-radius:17px;
  border:1px solid rgba(125,211,252,.26);
  background:linear-gradient(150deg, rgba(56,189,248,.17), rgba(37,99,235,.09) 62%, rgba(37,99,235,.05));
  box-shadow:0 20px 46px -20px rgba(56,189,248,1),
             inset 0 1px 0 rgba(255,255,255,.13);
  text-align:left;
}
.offer__ico{
  display:grid;
  place-items:center;
  flex:none;
  width:clamp(35px,4vw,43px); aspect-ratio:1;
  border-radius:13px;
  color:var(--accent-soft);
  background:linear-gradient(160deg, rgba(125,211,252,.24), rgba(37,99,235,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.offer__ico svg{ width:60%; height:60%; }
.offer__txt{
  color:#dbeafe;
  font-size:clamp(14px,1.75vw,18px);
  font-weight:600;
  line-height:1.42;
  letter-spacing:-.004em;
  text-wrap:balance;
}
.offer__txt b{
  color:#fff;
  font-weight:800;
  font-size:1.22em;
  white-space:nowrap;
}
.offer__plus{
  display:inline-block;
  margin:0 .48em;
  color:var(--accent-soft);
  font-weight:700;
  opacity:.85;
}

.hero__lead{
  margin:clamp(11px,1.6vw,16px) auto 0;
  max-width:46ch;
  color:var(--ink-2);
  font-size:clamp(14.5px,1.65vw,17px);
  line-height:1.68;
  text-wrap:balance;
}

/* — три пункта — */
.features{
  margin-top:clamp(20px,2.7vw,31px);
  padding-top:clamp(17px,2.3vw,25px);
  border-top:1px solid var(--line-2);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2.6vw,28px);
}

.feature{
  position:relative;
  padding:0 clamp(4px,1.4vw,14px);
}
.feature + .feature::before{
  content:"";
  position:absolute; left:0; top:12%;
  width:1px; height:76%;
  background:linear-gradient(180deg, transparent, var(--line), transparent);
}

.feature__ico{
  display:grid;
  place-items:center;
  width:42px; height:42px;
  margin:0 auto 12px;
  border-radius:13px;
  border:1px solid rgba(125,211,252,.2);
  background:linear-gradient(160deg, rgba(56,189,248,.2), rgba(37,99,235,.08));
  color:var(--accent-soft);
  box-shadow:0 12px 26px -14px rgba(56,189,248,.75), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.feature__ico svg{ width:21px; height:21px; }
.card--hero:hover .feature__ico{ transform:translateY(-2px); }

.feature h3{
  font-size:clamp(13.5px,1.5vw,15.5px);
  font-weight:700;
  letter-spacing:-.008em;
}
.feature p{
  margin-top:5px;
  color:var(--ink-3);
  font-size:clamp(11.5px,1.25vw,13px);
  line-height:1.55;
  text-wrap:balance;
  overflow-wrap:break-word;
}

/* — главная кнопка под блоком — */
.cta{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  padding:15px 32px;
  border-radius:15px;
  background:linear-gradient(180deg, #45baf4 0%, #2b8fe8 52%, #1c6cdd 100%);
  color:#fff;
  font-size:clamp(14px,1.5vw,15.5px);
  font-weight:700;
  letter-spacing:.004em;
  white-space:nowrap;
  animation:ctaRing 3.4s var(--ease) infinite;
  transition:transform .4s var(--ease), filter .4s var(--ease);
}
.cta__arr{
  width:17px; height:17px;
  flex:none;
  transition:transform .4s var(--ease);
}
.cta:hover{
  animation:none;
  transform:translateY(-3px);
  filter:brightness(1.08);
  box-shadow:0 28px 58px -16px rgba(56,189,248,.95),
             0 0 46px -6px rgba(56,189,248,.5),
             inset 0 0 0 1px rgba(255,255,255,.16),
             inset 0 1px 0 rgba(255,255,255,.4);
}
.cta:hover .cta__arr{ transform:translateY(3px); }
.cta:active{ transform:translateY(-1px) scale(.985); }

/* блик, пробегающий по кнопке */
.cta::after{
  content:"";
  position:absolute; top:0; bottom:0;
  left:-70%; width:42%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg);
  opacity:0;
}
.cta:hover::after{
  opacity:1;
  animation:shine .95s var(--ease);
}

/* мягкая пульсация, чтобы кнопку было видно */
@keyframes ctaRing{
  0%{
    box-shadow:0 18px 42px -14px rgba(56,189,248,.8),
               0 0 0 0 rgba(96,196,252,.34),
               inset 0 0 0 1px rgba(255,255,255,.12),
               inset 0 1px 0 rgba(255,255,255,.34);
  }
  62%{
    box-shadow:0 18px 42px -14px rgba(56,189,248,.8),
               0 0 0 15px rgba(96,196,252,0),
               inset 0 0 0 1px rgba(255,255,255,.12),
               inset 0 1px 0 rgba(255,255,255,.34);
  }
  100%{
    box-shadow:0 18px 42px -14px rgba(56,189,248,.8),
               0 0 0 0 rgba(96,196,252,0),
               inset 0 0 0 1px rgba(255,255,255,.12),
               inset 0 1px 0 rgba(255,255,255,.34);
  }
}

/* ============================================================
   КОНТАКТЫ
   ============================================================ */

.contacts{
  padding:clamp(16px,2.6vh,36px) 0 clamp(28px,4.6vh,54px);
  max-width:1120px;
  margin:0 auto;
}

.sec-head{ text-align:center; }
.sec-head h2{
  font-size:clamp(23px,3.7vw,38px);
  font-weight:800;
  letter-spacing:-.022em;
}
.sec-head p{
  margin-top:7px;
  color:var(--ink-3);
  font-size:clamp(13px,1.5vw,15.5px);
}

.contact-grid{
  margin-top:clamp(20px,2.9vw,34px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.7vw,20px);
}

.card--contact{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(20px,2.4vw,27px) clamp(14px,1.9vw,22px) clamp(17px,2.1vw,22px);
  border-radius:var(--r-md);
  background:
    linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.01) 46%, rgba(255,255,255,0)),
    var(--glass-2);
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}

/* цветное свечение под карточкой */
.card__spot{
  position:absolute;
  left:50%; top:-46%;
  width:118%; aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  pointer-events:none;
  opacity:.42;
  transition:opacity .5s var(--ease);
  background:radial-gradient(circle, var(--brand-glow,rgba(56,189,248,.3)), transparent 62%);
}
.card--contact:hover .card__spot{ opacity:.85; }

.card--contact[data-brand="tg"]  { --brand:#37b0e8; --brand-2:#1d8bd1; --brand-glow:rgba(55,176,232,.3); }
.card--contact[data-brand="vk"]  { --brand:#4c8ff0; --brand-2:#2c62d6; --brand-glow:rgba(76,143,240,.3); }
.card--contact[data-brand="mail"]{ --brand:#49b8f2; --brand-2:#2472cf; --brand-glow:rgba(73,184,242,.3); }

.card--contact:hover{
  transform:translateY(-7px);
  border-color:rgba(140,205,255,.34);
  box-shadow:0 42px 90px -34px rgba(0,0,0,.9),
             0 0 46px -18px var(--brand-glow),
             inset 0 1px 0 rgba(255,255,255,.1);
}

.c-ico{
  display:grid;
  place-items:center;
  width:52px; height:52px;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(150deg, var(--brand), var(--brand-2));
  box-shadow:0 16px 34px -14px var(--brand), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.c-ico svg{ width:26px; height:26px; }
.card--contact:hover .c-ico{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 22px 44px -14px var(--brand), inset 0 1px 0 rgba(255,255,255,.45);
}

.card--contact h3{
  margin-top:13px;
  font-size:clamp(15px,1.7vw,17.5px);
  font-weight:700;
  letter-spacing:-.01em;
}
.card--contact > p{
  margin-top:4px;
  color:var(--ink-3);
  font-size:clamp(12px,1.3vw,13.5px);
}

/* — кнопка — */
.btn{
  position:relative;
  overflow:hidden;
  margin-top:clamp(15px,2vw,20px);
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:11px 18px;
  border-radius:11px;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#fff;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.005em;
  white-space:nowrap;
  box-shadow:0 12px 30px -12px var(--brand),
             0 0 0 1px rgba(255,255,255,.09) inset,
             0 1px 0 rgba(255,255,255,.28) inset;
  transition:box-shadow .45s var(--ease), transform .45s var(--ease), filter .45s var(--ease);
}
.btn__arr{
  width:16px; height:16px;
  flex:none;
  transition:transform .45s var(--ease);
}
.card--contact:hover .btn{
  filter:brightness(1.07);
  box-shadow:0 20px 44px -14px var(--brand),
             0 0 34px -6px var(--brand-glow),
             0 0 0 1px rgba(255,255,255,.14) inset,
             0 1px 0 rgba(255,255,255,.34) inset;
}
.card--contact:hover .btn__arr{ transform:translateX(4px); }
.card--contact:active{ transform:translateY(-3px) scale(.992); }

/* блик, пробегающий по кнопке */
.btn::after{
  content:"";
  position:absolute; top:0; bottom:0;
  left:-70%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform:skewX(-18deg);
  opacity:0;
}
.card--contact:hover .btn::after{
  opacity:1;
  animation:shine .95s var(--ease);
}
@keyframes shine{
  from{ left:-70%; }
  to  { left:125%; }
}

/* ============================================================
   ПОДВАЛ
   ============================================================ */

.footer{
  padding:clamp(24px,3.6vh,38px) 0 clamp(26px,4.2vh,44px);
  text-align:center;
  border-top:1px solid var(--line-2);
  max-width:1120px;
  margin:0 auto;
}
.footer__mark{
  display:grid;
  place-items:center;
  width:34px; height:34px;
  margin:0 auto 13px;
  border-radius:11px;
  border:1px solid rgba(125,211,252,.18);
  background:linear-gradient(160deg, rgba(56,189,248,.16), rgba(37,99,235,.06));
  color:var(--accent-soft);
  box-shadow:0 10px 24px -14px rgba(56,189,248,.8);
}
.footer__mark svg{ width:17px; height:17px; }
.footer__copy{ color:var(--ink-2); font-size:13px; }
.footer__sub{ margin-top:3px; color:var(--ink-3); font-size:12px; }

/* ============================================================
   Появление при прокрутке
   ============================================================ */

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal.is-in{
  opacity:1;
  transform:none;
}

/* ============================================================
   Адаптив
   ============================================================ */

@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; max-width:440px; margin-left:auto; margin-right:auto; }
  .card--contact{ padding:26px 22px 24px; }
}

@media (max-width:620px){
  body{ font-size:15px; }

  .hero{
    min-height:auto;
    padding:clamp(52px,11vh,80px) 0 26px;
    gap:24px;
  }
  .card--hero{
    padding:26px 20px 28px;
    border-radius:24px;
  }

  /* полегче для слабых телефонов */
  .card{
    -webkit-backdrop-filter:blur(14px) saturate(130%);
            backdrop-filter:blur(14px) saturate(130%);
  }

  /* пункты — в строки: текста много, три колонки станут нечитаемыми */
  .features{
    grid-template-columns:1fr;
    gap:0;
    margin-top:22px;
    padding-top:14px;
  }
  .feature{
    display:grid;
    grid-template-columns:38px 1fr;
    grid-template-rows:auto auto;
    column-gap:13px;
    align-items:center;
    text-align:left;
    padding:12px 2px;
  }
  .feature + .feature{ border-top:1px solid var(--line-2); }
  .feature + .feature::before{ display:none; }
  .feature__ico{
    grid-row:1 / span 2;
    width:38px; height:38px;
    border-radius:12px;
    margin:0;
  }
  .feature__ico svg{ width:19px; height:19px; }
  .feature h3{ font-size:14px; line-height:1.3; letter-spacing:-.012em; }
  .feature p{ font-size:12px; line-height:1.45; margin-top:3px; }
  .feature p br{ display:none; }

  /* плашка бонуса */
  .offer{
    width:100%;
    gap:12px;
    padding:12px 15px;
    border-radius:15px;
  }
  .offer__txt{ font-size:14px; }

  /* фон — мягче и компактнее на телефоне */
  .scene__base{
    background:
      radial-gradient(74vw 38vh at 84% -4%,  rgba(37,99,235,.24),  transparent 64%),
      radial-gradient(80vw 40vh at 4%  102%, rgba(14,116,199,.18), transparent 66%),
      linear-gradient(172deg, #060b1c 0%, #050916 44%, #03050d 100%);
  }
  .scene__img--spheres{
    top:-3vh; left:-18vw;
    width:70vw; height:30vh;
    opacity:.42;
  }
  .scene__img--orb{
    top:1vh; right:-16vw;
    width:56vw;
    opacity:.5;
  }
  .blob--1{ opacity:.55; }
  .blob--2{ opacity:.6; }
  .cta{
    width:100%;
    max-width:340px;
    padding:14px 24px;
    font-size:14px;
  }
  .scene__img--glass{
    bottom:-6vh; right:-22vw;
    width:82vw; height:34vh;
    opacity:.22;
  }
  .scene__img--folds{
    bottom:-4vh; left:-24vw;
    width:86vw; height:32vh;
    opacity:.34;
  }
  .blob--1{ top:8%; left:4%; }
  .blob--2{ bottom:18%; left:-16%; }
  .blob--3{ top:52%; right:-4%; }
  .ring--1{ top:3%; right:-22%; }
  .ring--2{ bottom:4%; left:-26%; }
  .scene__vignette{
    background:radial-gradient(120% 70% at 50% 38%, transparent 34%, rgba(2,4,10,.7) 100%);
  }

  .contacts{ padding:18px 0 24px; }
  .btn{ padding:13px 18px; }
}

@media (max-width:380px){
  .btn{ font-size:12.5px; gap:7px; }
  .hero__title{ font-size:clamp(23px,7.4vw,30px); }
  .feature h3{ font-size:13px; }
  .feature p{ font-size:11.5px; }
  .feature__ico{ width:34px; height:34px; border-radius:11px; }
  .feature__ico svg{ width:17px; height:17px; }
  .feature{ grid-template-columns:34px 1fr; column-gap:11px; }
  .offer__txt{ font-size:13px; }
  .offer{ padding:11px 13px; gap:10px; }
}

/* высокие экраны — не растягиваем hero сверх меры */
@media (min-height:1100px){
  .hero{ min-height:640px; }
}

/* ============================================================
   Доступность
   ============================================================ */

:where(a,.card--contact):focus-visible{
  outline:2px solid var(--accent-soft);
  outline-offset:4px;
  border-radius:var(--r-md);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}