/* ============================================================
   ecomarguru.ru — общие стили сайта
   Вынесено из index.html 16.09.2026 (инлайн-CSS занимал 46 КБ).
   Подключается: index.html (assets/site.css), cases/*.html (../assets/site.css).
   ВАЖНО:blog/ и reviews/ имеют собственные темы и этот файл не подключают.
   ============================================================ */
/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --ink:            #0b0d17;
  --ink-2:          #1b2030;
  --slate:          #5b6478;
  --slate-2:        #8a93a6;
  --line:           #e6e4e0;
  --paper:          #fbfaf7;
  --paper-2:        #f3f1ec;
  --white:          #ffffff;

  --brand:          #5b4bff;
  --brand-2:        #b23cff;
  --brand-3:        #ff7a45;
  --mint:           #14c8a0;
  --gold:           #f5b301;

  --grad:           linear-gradient(120deg,#5b4bff 0%,#b23cff 45%,#ff7a45 100%);
  --grad-soft:      linear-gradient(120deg,rgba(91,75,255,.10),rgba(178,60,255,.10),rgba(255,122,69,.10));

  --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-xl: 30px; --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(11,13,23,.05), 0 2px 8px rgba(11,13,23,.04);
  --sh-md: 0 4px 12px rgba(11,13,23,.06), 0 12px 32px rgba(11,13,23,.06);
  --sh-lg: 0 18px 60px rgba(11,13,23,.10), 0 4px 16px rgba(11,13,23,.05);
  --sh-brand: 0 14px 38px rgba(91,75,255,.28);

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --max: 1200px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; line-height:1.06; letter-spacing:-.03em; font-weight:800; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:#ded9ff; color:var(--ink); }
.skip{
  position:absolute; top:8px; left:8px; z-index:200;
  padding:10px 16px; border-radius:var(--r-pill);
  background:var(--ink); color:#fff; font-size:14px; font-weight:600;
  transform:translateY(-160%); transition:transform .2s var(--ease);
}
.skip:focus{ transform:translateY(0); outline:none; box-shadow:0 0 0 3px #fff, 0 0 0 5px #5b4bff; }
.visually-hidden{
  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;
}
:focus-visible{ outline:3px solid #b9afff; outline-offset:3px; border-radius:8px; }
a:focus-visible, button:focus-visible, .btn:focus-visible{ outline-offset:4px; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:24px; }
.section{ padding:clamp(76px,9.5vw,132px) 0; position:relative; scroll-margin-top:88px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand);
}
.eyebrow::before{ content:""; width:26px; height:2px; border-radius:2px; background:var(--grad); }
.h2{ font-size:clamp(30px,4.2vw,52px); letter-spacing:-.04em; }
.h3{ font-size:clamp(18px,1.9vw,22px); letter-spacing:-.02em; }
.lead{ font-size:clamp(16px,1.6vw,19px); color:var(--slate); max-width:62ch; }
.muted{ color:var(--slate); }
.grad-text{
  background:var(--grad); background-size:220% 220%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 9s var(--ease-io) infinite;
}
@keyframes gradShift{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.head{ max-width:70ch; margin-bottom:clamp(40px,5vw,64px); }
.head .h2{ margin:18px 0 20px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --bg:var(--ink); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 28px; border:0; border-radius:var(--r-pill);
  font:inherit; font-size:15px; font-weight:600; letter-spacing:-.01em;
  background:var(--bg); color:var(--fg); cursor:pointer;
  box-shadow:var(--sh-md);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  overflow:hidden; isolation:isolate;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:var(--grad); transition:opacity .4s var(--ease);
}
.btn:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg); }
.btn:hover::after{ opacity:1; }
.btn:active{ transform:translateY(-1px) scale(.99); }
.btn--primary{ background:var(--ink); }
.btn--primary:hover{ box-shadow:var(--sh-brand); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover{ --fg:#fff; box-shadow:none; }
.btn--sm{ padding:11px 20px; font-size:14px; }
.btn__arrow{ transition:transform .35s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(14px) saturate(160%);
  background:rgba(251,250,247,.78);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
/* Бренд строго по центру: links | brand | cta */
.nav__in{
  display:grid; grid-template-columns:1fr auto 1fr;
  grid-template-areas:"links brand cta";
  align-items:center; gap:20px; height:74px;
}
.brand{
  grid-area:brand; justify-self:center;
  display:flex; align-items:center; gap:11px;
  font-weight:800; letter-spacing:-.03em; font-size:16px;
}
.brand__mark{
  position:relative; width:38px; height:38px; border-radius:12px; background:var(--grad);
  display:grid; place-items:center; color:#fff; font-size:14px; font-weight:900;
  box-shadow:0 6px 18px rgba(91,75,255,.35);
}
.brand__mark::after{
  content:""; position:absolute; left:0; top:0; width:38px; height:38px; border-radius:12px;
  border:2px solid rgba(91,75,255,.35); animation:ringPulse 2.8s var(--ease-io) infinite;
}
@keyframes ringPulse{ 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.55);opacity:0} }
.nav__links{ grid-area:links; justify-self:start; display:flex; gap:2px; margin-left:-13px; }
.nav__links a{
  position:relative; padding:9px 13px; border-radius:var(--r-pill);
  font-size:14.5px; font-weight:500; color:var(--slate);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:13px; right:13px; bottom:4px; height:2px;
  background:var(--grad); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__links a:hover{ color:var(--ink); background:rgba(91,75,255,.06); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__cta{ grid-area:cta; justify-self:end; margin-left:0; }
@media (max-width:1040px){ .nav__links{ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding:clamp(60px,7.5vw,104px) 0 clamp(64px,7vw,96px); overflow:hidden; }
.hero__bg{ position:absolute; inset:-10% -5% auto -5%; height:120%; z-index:-1; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.42; mix-blend-mode:multiply; }
.blob--1{ width:520px; height:520px; top:-140px; left:-90px; background:radial-gradient(circle at 30% 30%,#8f7bff,#b23cff00 70%); animation:blob1 18s var(--ease-io) infinite; }
.blob--2{ width:460px; height:460px; top:70px; right:-110px; background:radial-gradient(circle at 60% 40%,#ffb27a,#ff7a4500 70%); animation:blob2 22s var(--ease-io) infinite; }
@keyframes blob1{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(60px,50px) scale(1.12)} 66%{transform:translate(-30px,20px) scale(.94)} }
@keyframes blob2{ 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(-70px,40px) scale(1.15)} 75%{transform:translate(30px,-30px) scale(.9)} }
.grid-lines{
  position:absolute; inset:0; z-index:-1; opacity:.3;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 20%,transparent 75%);
}

.hero__grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(36px,5vw,72px); align-items:center; }
@media (max-width:1000px){ .hero__grid{ grid-template-columns:1fr; } }

.dot{ width:8px; height:8px; border-radius:50%; background:var(--mint); position:relative; flex:0 0 auto; }
.dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--mint); animation:ping 1.8s var(--ease-io) infinite; }
@keyframes ping{ 0%{transform:scale(1);opacity:.8} 100%{transform:scale(3.2);opacity:0} }

.hero h1{ font-size:clamp(40px,6.4vw,78px); font-weight:900; letter-spacing:-.05em; margin-bottom:14px; }
.hero h1 span{ display:block; }
.hero__kicker{
  font-size:clamp(13px,1.3vw,15px); font-weight:700; letter-spacing:.02em;
  color:var(--slate); margin-bottom:22px;
}
.hero__sub{ font-size:clamp(16px,1.7vw,20px); color:var(--slate); max-width:54ch; margin-bottom:34px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:34px; }
.hero__facts{ display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13.5px; color:var(--slate-2); }
.hero__facts b{ color:var(--ink); font-weight:700; }

/* hero metric cards */
.hcards{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:34px; max-width:620px; }
@media (max-width:620px){ .hcards{ grid-template-columns:repeat(2,1fr); } }
.hcard{
  padding:16px 15px 15px; border-radius:var(--r-md); background:var(--white);
  border:1px solid var(--line); box-shadow:var(--sh-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.hcard:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:transparent; }
.hcard b{
  display:block; font-size:clamp(17px,2vw,21px); font-weight:900; letter-spacing:-.035em; line-height:1.1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:5px;
}
.hcard span{ display:block; font-size:11.5px; line-height:1.35; color:var(--slate-2); }

/* hero visual — orbit */
.hero__visual{ position:relative; }
.orbit{ position:relative; width:100%; max-width:420px; margin:0 auto; aspect-ratio:1/1; perspective:1100px; }
.orbit__halo{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:104%; aspect-ratio:1/1; border-radius:50%;
  background:conic-gradient(from 0deg,#5b4bff,#b23cff,#ff7a45,#14c8a0,#5b4bff);
  filter:blur(60px); opacity:.32;
  animation:spin 22s linear infinite;
}
.orbit__ring{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  border-radius:50%; border:1.5px dashed transparent; pointer-events:none;
}
.orbit__ring--1{ width:94%; aspect-ratio:1/1; border-color:rgba(91,75,255,.4); animation:spin 28s linear infinite; }
.orbit__ring--2{ width:76%; aspect-ratio:1/1; border-style:dotted; border-color:rgba(178,60,255,.3); animation:spin 18s linear infinite reverse; }
.orbit__label{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:86%; aspect-ratio:1/1; pointer-events:none;
  animation:spin 34s linear infinite;
}
.orbit__label text{ font:800 14px/1 "Inter",sans-serif; letter-spacing:3.4px; fill:url(#orbitGrad); text-transform:uppercase; }
.orbit__ring--grad{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:68%; aspect-ratio:1/1; border-radius:50%;
  background:conic-gradient(from 0deg,#5b4bff 0%,#b23cff 25%,#ff7a45 50%,#14c8a0 75%,#5b4bff 100%);
  animation:spin 9s linear infinite;
  -webkit-mask:radial-gradient(circle,transparent calc(50% - 7px),#000 calc(50% - 6px),#000 calc(50% - 3px),transparent calc(50% - 2px));
          mask:radial-gradient(circle,transparent calc(50% - 7px),#000 calc(50% - 6px),#000 calc(50% - 3px),transparent calc(50% - 2px));
  filter:drop-shadow(0 0 10px rgba(91,75,255,.4));
}
.orbit__pulse{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:62%; aspect-ratio:1/1; border-radius:50%;
  border:2px solid rgba(91,75,255,.5);
  animation:pulseOut 3.6s var(--ease-io) infinite;
}
.orbit__pulse--d{ animation-delay:1.8s; border-color:rgba(255,122,69,.4); }
@keyframes pulseOut{ 0%{transform:scale(1);opacity:.55} 100%{transform:scale(1.55);opacity:0} }

.orbit__stack{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:62%; aspect-ratio:1/1; transform-style:preserve-3d;
  transition:transform .9s var(--ease);
}
.orbit:hover .orbit__stack{ transform:rotateY(10deg) rotateX(-6deg) scale(1.04); }
.orbit__photo{
  position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden;
  isolation:isolate; box-shadow:0 22px 50px rgba(11,13,23,.22);
  animation:photoIn 1.1s var(--ease) .2s both;
}
.orbit__photo picture{ display:block; width:100%; height:100%; }
.orbit__photo .ph{ width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; }
.orbit__photo .ph--base{ filter:grayscale(1) contrast(1.08) brightness(1.02); }
.orbit__photo .ph--r, .orbit__photo .ph--b{
  position:absolute; inset:0; opacity:0; mix-blend-mode:screen;
  filter:grayscale(1) sepia(1) hue-rotate(-45deg) saturate(6);
  transition:opacity .25s var(--ease);
}
.orbit__photo .ph--b{ filter:grayscale(1) sepia(1) hue-rotate(150deg) saturate(6); }
.orbit:hover .ph--r{ opacity:.5; animation:glitchR .55s steps(3) infinite; }
.orbit:hover .ph--b{ opacity:.5; animation:glitchB .55s steps(3) infinite; }
@keyframes glitchR{ 0%{transform:translate(0,0)} 33%{transform:translate(3px,-1px)} 66%{transform:translate(-2px,1px)} 100%{transform:translate(1px,0)} }
@keyframes glitchB{ 0%{transform:translate(0,0)} 33%{transform:translate(-3px,1px)} 66%{transform:translate(2px,-1px)} 100%{transform:translate(-1px,0)} }
.orbit__tint{
  position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(120deg,#5b4bff 0%,#b23cff 30%,#ff7a45 60%,#14c8a0 85%,#5b4bff 100%);
  background-size:280% 280%;
  mix-blend-mode:color; opacity:.8; pointer-events:none;
  animation:tintShift 14s var(--ease-io) infinite;
}
@keyframes tintShift{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.orbit__scan{
  position:absolute; inset:0; border-radius:50%;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.07) 0 1px, transparent 1px 4px);
  background-size:100% 4px; mix-blend-mode:overlay; opacity:.5; pointer-events:none;
  animation:scanMove 6s linear infinite;
}
@keyframes scanMove{ to{ background-position:0 40px } }
.orbit__shimmer{ position:absolute; inset:0; border-radius:50%; overflow:hidden; pointer-events:none; }
.orbit__shimmer::before{
  content:""; position:absolute; left:-40%; top:-60%; width:55%; bottom:-60%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
  transform:rotate(20deg) translateX(-180%);
  animation:shimmer 5.5s var(--ease-io) infinite; filter:blur(4px);
}
@keyframes shimmer{ 0%{transform:rotate(20deg) translateX(-180%)} 55%,100%{transform:rotate(20deg) translateX(420%)} }
.orbit__photo::after{
  content:""; position:absolute; inset:0; border-radius:50%; z-index:6; pointer-events:none;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.92), inset 0 0 36px rgba(11,13,23,.18);
}
.orbit__badge{
  position:absolute; left:50%; bottom:-2%; translate:-50% 0; z-index:7;
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 20px; border-radius:var(--r-pill); background:var(--ink); color:#fff;
  font-size:13.5px; font-weight:700; white-space:nowrap;
  box-shadow:0 18px 38px rgba(11,13,23,.34);
  animation:photoIn .9s var(--ease) .8s both;
  transition:transform .35s var(--ease);
}
.orbit:hover .orbit__badge{ transform:scale(1.05); }
.orbit:hover .orbit__ring--grad{ animation-duration:3s; }
.orbit:hover .orbit__label{ animation-duration:16s; }
@keyframes photoIn{ from{ opacity:0; transform:scale(.9) } to{ opacity:1; transform:scale(1) } }

/* ============================================================
   PROFILE
   ============================================================ */
.profile{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(32px,5vw,72px); align-items:start; }
@media (max-width:940px){ .profile{ grid-template-columns:1fr; } }
.profile__body p{ font-size:clamp(15.5px,1.5vw,17.5px); color:var(--slate); max-width:62ch; }
.profile__body p + p{ margin-top:16px; }
.profile__body b{ color:var(--ink); }
.scale{
  padding:26px 26px 24px; border-radius:var(--r-lg);
  background:var(--white); border:1px solid var(--line); box-shadow:var(--sh-sm);
}
.scale__cap{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--slate-2); margin-bottom:18px; }
.scale li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline;
  padding:12px 0; border-top:1px solid var(--line);
}
.scale li:first-of-type{ border-top:0; padding-top:0; }
.scale b{ font-size:19px; font-weight:900; letter-spacing:-.03em; color:var(--brand); white-space:nowrap; }
.scale span{ font-size:14px; color:var(--slate); }

/* ============================================================
   FLOW / CHAIN
   ============================================================ */
.flow{ display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; }
.flow__node{
  flex:1 1 180px; padding:22px 20px; border-radius:var(--r-md);
  background:var(--white); border:1px solid var(--line); box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.flow__node:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:transparent; }
.flow__i{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.14em;
  color:var(--brand); margin-bottom:10px;
}
.flow__node b{
  display:block; font-size:14.5px; font-weight:800; letter-spacing:.02em;
  text-transform:uppercase; line-height:1.3; margin-bottom:8px;
}
.flow__node small{ display:block; font-size:13px; color:var(--slate); line-height:1.5; }
.flow__arw{
  flex:0 0 auto; display:grid; place-items:center; width:26px;
  font-size:22px; font-weight:700; color:var(--brand); opacity:.5;
}
.flow__arw::before{ content:"→"; }
@media (max-width:900px){
  .flow{ flex-direction:column; }
  .flow__arw{ width:auto; height:22px; transform:rotate(90deg); }
}
/* compact variant for the marketing→business band */
.flow--tight .flow__node{ padding:18px 16px; }
.flow--tight .flow__node b{ font-size:13.5px; }
.flow--tight .flow__node small{ font-size:12px; }

/* ============================================================
   COMPETENCIES
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:940px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .cards{ grid-template-columns:1fr; } }
@media (max-width:1080px){ .fcards{ grid-template-columns:1fr; } .fmt{ padding:26px 24px 24px; } }
@media (max-width:820px){ .cmp__hint{ display:block; } }
.cards--5{ grid-template-columns:repeat(6,1fr); }
.cards--5 .cardx{ grid-column:span 2; }
.cards--5 .cardx:nth-child(4), .cards--5 .cardx:nth-child(5){ grid-column:span 3; }
@media (max-width:940px){
  .cards--5{ grid-template-columns:repeat(2,1fr); }
  .cards--5 .cardx, .cards--5 .cardx:nth-child(4), .cards--5 .cardx:nth-child(5){ grid-column:span 1; }
}
@media (max-width:620px){ .cards--5{ grid-template-columns:1fr; } }
.cardx{
  position:relative; padding:30px 28px 32px; border-radius:var(--r-lg);
  background:var(--white); border:1px solid var(--line); box-shadow:var(--sh-sm);
  overflow:hidden; isolation:isolate;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.cardx::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:var(--grad-soft); transition:opacity .45s var(--ease);
}
.cardx::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--grad);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.cardx:hover{ transform:translateY(-8px); box-shadow:var(--sh-lg); border-color:transparent; }
.cardx:hover::before{ opacity:1; }
.cardx:hover::after{ transform:scaleX(1); }
.cardx__ico{
  width:50px; height:50px; border-radius:14px; display:grid; place-items:center; margin-bottom:20px;
  background:var(--grad); color:#fff; box-shadow:0 8px 22px rgba(91,75,255,.26);
  transition:transform .5s var(--ease);
}
.cardx:hover .cardx__ico{ transform:rotate(-8deg) scale(1.08); }
.cardx__ico svg{ width:24px; height:24px; }
.cardx h3{ margin-bottom:6px; }
.cardx__en{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--slate-2); margin-bottom:14px; }
.cardx p{ font-size:14.5px; color:var(--slate); }

/* AI + stack row */
.side2{ display:grid; grid-template-columns:1.15fr .85fr; gap:18px; margin-top:22px; }
@media (max-width:880px){ .side2{ grid-template-columns:1fr; } }
.panel{
  padding:28px 28px 26px; border-radius:var(--r-lg);
  background:var(--white); border:1px solid var(--line); box-shadow:var(--sh-sm);
}
.panel h3{ margin-bottom:6px; }
.panel__sub{ font-size:13.5px; color:var(--slate-2); margin-bottom:16px; }
.panel ul{ display:grid; gap:12px; }
.panel li{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; font-size:14.5px; color:var(--slate); }
.panel li::before{
  content:""; width:7px; height:7px; border-radius:50%; margin-top:9px;
  background:var(--grad); flex:0 0 auto;
}
.panel li b{ color:var(--ink); }
.pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.pills li{
  list-style:none; font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:var(--r-pill);
  background:var(--paper-2); color:var(--slate); border:1px solid var(--line);
}

/* ============================================================
   DASHBOARD (dark metrics)
   ============================================================ */
.metrics{ background:var(--ink); color:#fff; border-radius:var(--r-xl); padding:clamp(38px,5vw,60px); position:relative; overflow:hidden; }
.metrics::before{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(91,75,255,.5),transparent 65%);
  top:-260px; right:-120px; filter:blur(20px); animation:blob1 20s var(--ease-io) infinite;
}
.metrics::after{
  content:""; position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,69,.35),transparent 65%);
  bottom:-220px; left:-100px; filter:blur(20px); animation:blob2 24s var(--ease-io) infinite;
}
.metrics__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px 30px; position:relative; z-index:1; }
@media (max-width:880px){ .metrics__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .metrics__grid{ grid-template-columns:1fr; } }
.metric__val{
  font-size:clamp(34px,4.4vw,52px); font-weight:900; letter-spacing:-.05em; line-height:1;
  display:flex; align-items:baseline; gap:6px; margin-bottom:10px;
}
.metric__val .suffix{ font-size:.4em; font-weight:800; color:var(--brand-3); letter-spacing:-.01em; }
.metric__lbl{ font-size:14px; color:rgba(255,255,255,.62); max-width:24ch; }
.metric{ position:relative; padding-left:22px; }
.metric::before{ content:""; position:absolute; left:0; top:8px; width:3px; height:34px; border-radius:3px; background:var(--grad); }
.dash__cap{
  position:relative; z-index:1; font-size:12px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:30px;
}

/* ============================================================
   BARS / FUNNEL / BIG NUMBERS
   ============================================================ */
.bar{ margin-bottom:18px; }
.bar__top{ display:flex; justify-content:space-between; gap:12px; font-size:13px; font-weight:600; margin-bottom:8px; }
.bar__top span:last-child{ color:var(--brand); font-weight:800; white-space:nowrap; }
.bar__track{ height:8px; border-radius:var(--r-pill); background:var(--paper-2); overflow:hidden; }
.bar__fill{
  height:100%; border-radius:var(--r-pill); background:var(--grad);
  width:var(--w,60%); transform-origin:left;
  box-shadow:0 2px 10px rgba(91,75,255,.25);
}
.derived{ margin-top:30px; display:grid; gap:18px; max-width:800px; }
.derived__cap{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--slate-2); margin-bottom:-4px; }

.funnel{ display:flex; align-items:stretch; gap:14px; flex-wrap:wrap; }
.fstage{
  flex:1 1 210px; padding:26px 24px; border-radius:var(--r-lg); text-align:left;
  background:var(--white); border:1px solid var(--line); box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.fstage:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); }
.fstage__n{
  display:block; font-size:clamp(26px,3.4vw,38px); font-weight:900; letter-spacing:-.04em; line-height:1.05;
  background:var(--grad); background-size:200% 200%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 9s var(--ease-io) infinite; margin-bottom:6px;
}
.fstage__l{ font-size:14px; color:var(--slate); }
.farrow{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0 4px; }
.farrow b{ font-size:12.5px; font-weight:800; color:var(--brand); }
.farrow span{ font-size:11px; color:var(--slate-2); text-align:center; max-width:74px; line-height:1.3; }
.farrow::after{ content:""; width:2px; height:24px; border-radius:2px; background:linear-gradient(180deg,var(--brand),var(--brand-3)); }
@media (max-width:880px){
  .funnel{ flex-direction:column; }
  .farrow{ flex-direction:row; gap:10px; }
  .farrow span{ max-width:none; }
  .farrow::after{ width:28px; height:2px; background:linear-gradient(90deg,var(--brand),var(--brand-3)); }
}

.bignums{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
@media (max-width:860px){ .bignums{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .bignums{ grid-template-columns:1fr; } }
.bignum{
  padding:22px; border-radius:var(--r-lg); background:var(--white);
  border:1px solid var(--line); box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.bignum:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:transparent; }
.bignum b{ display:block; font-size:clamp(19px,2.3vw,26px); font-weight:900; letter-spacing:-.03em; margin-bottom:6px; }
.bignum span{ display:block; font-size:13px; color:var(--slate); }
.bignum small{ display:block; margin-top:8px; font-size:11.5px; color:var(--slate-2); }
.bignum--accent{ background:var(--ink); border-color:transparent; }
.bignum--accent b{ color:#fff; }
.bignum--accent span{ color:rgba(255,255,255,.66); }
.bignum--accent small{ color:rgba(255,255,255,.45); }
.bignums--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .bignums--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .bignums--4{ grid-template-columns:1fr; } }

/* ============================================================
   CASE (SEB)
   ============================================================ */
.sebmeta{ display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 4px; padding:0; }
.sebmeta li{
  list-style:none; font-size:12px; font-weight:700; letter-spacing:.01em;
  padding:7px 13px; border-radius:var(--r-pill);
  background:var(--white); border:1px solid var(--line); color:var(--slate);
}
.steps{ position:relative; display:grid; gap:0; }
.steps::before{
  content:""; position:absolute; left:23px; top:16px; bottom:16px; width:2px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2),var(--brand-3));
  opacity:.26;
}
.step{ position:relative; display:grid; grid-template-columns:48px 1fr; gap:24px; padding-bottom:30px; }
.step:last-child{ padding-bottom:0; }
.step__num{
  width:48px; height:48px; border-radius:50%; background:var(--white); border:2px solid var(--line);
  display:grid; place-items:center; font-weight:800; font-size:15px; z-index:1;
  transition:transform .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
.step:hover .step__num{ transform:scale(1.12); border-color:transparent; background:var(--grad); color:#fff; }
.step h3{ margin-bottom:8px; font-size:19px; padding-top:10px; }
.step p{ color:var(--slate); font-size:15px; max-width:74ch; }
.step__tag{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); margin-bottom:6px;
}
.step ul{ margin-top:12px; display:grid; gap:7px; }
.step ul li{ position:relative; padding-left:18px; font-size:14.5px; color:var(--slate); }
.step ul li::before{
  content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--grad);
}

/* ======================= FORMATS ======================= */
.fcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.fmt{
  position:relative; display:flex; flex-direction:column;
  padding:30px 28px 28px; border-radius:var(--r-lg);
  background:var(--white); border:1px solid var(--line); box-shadow:var(--sh-sm);
  overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.fmt::before{
  content:""; position:absolute; inset:0; background:var(--grad-soft); opacity:0;
  transition:opacity .5s var(--ease); z-index:-1;
}
.fmt::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--grad);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.fmt:hover{ transform:translateY(-8px); box-shadow:var(--sh-lg); border-color:transparent; }
.fmt:hover::before{ opacity:1; }
.fmt:hover::after{ transform:scaleX(1); }
.fmt__n{
  display:block; font-size:11.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate-2);
}
.fmt h3{ font-size:clamp(19px,2vw,23px); letter-spacing:-.02em; margin:8px 0 12px; }
.fmt__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.fmt__meta span{
  font-size:12px; font-weight:700; padding:6px 11px; border-radius:var(--r-pill);
  background:var(--paper-2); border:1px solid var(--line); color:var(--slate);
}
.fmt__dl{ display:grid; gap:15px; margin:0 0 24px; }
.fmt__dl dt{
  font-size:11.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--brand); margin-bottom:4px;
}
.fmt__dl dd{ margin:0; font-size:14.5px; color:var(--slate); line-height:1.55; }
.fmt__dl dd b{ color:var(--ink); font-weight:650; }
.fmt__cta{ margin-top:auto; }
.fmt--hero h3{ font-size:clamp(21px,2.2vw,25px); }

/* ======================= BREADCRUMBS ======================= */
.crumbs{ margin-bottom:22px; font-size:13px; color:var(--slate-2); }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.crumbs li + li::before{ content:"/"; margin-right:8px; color:var(--line); }
.crumbs a{ color:var(--slate); text-decoration:none; border-bottom:1px solid var(--line); }
.crumbs a:hover{ color:var(--brand); border-color:var(--brand); }
.crumbs [aria-current]{ color:var(--ink); font-weight:600; }

/* ======================= CASES (тизеры) ======================= */
.ccards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.ccard{
  position:relative; display:flex; flex-direction:column;
  padding:28px 26px 26px; border-radius:var(--r-lg);
  background:var(--white); border:1px solid var(--line); box-shadow:var(--sh-sm);
  overflow:hidden; isolation:isolate; color:inherit; text-decoration:none;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
a.ccard::before{
  content:""; position:absolute; inset:0; background:var(--grad-soft); opacity:0;
  transition:opacity .5s var(--ease); z-index:-1;
}
a.ccard::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--grad);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
a.ccard:hover{ transform:translateY(-8px); box-shadow:var(--sh-lg); border-color:transparent; }
a.ccard:hover::before{ opacity:1; }
a.ccard:hover::after{ transform:scaleX(1); }
.ccard--soon{ background:transparent; border-style:dashed; box-shadow:none; }
.ccard:hover .ccard__go span{ transform:translateX(4px); }
.ccard__go span{ transition:transform .35s var(--ease); }
.ccard__tag{
  align-self:flex-start; font-size:10.5px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand);
  padding:5px 10px; border-radius:var(--r-pill); background:var(--grad-soft);
}
.ccard__tag--soon{ color:var(--slate-2); background:var(--paper-2); }
.ccard__brand{
  display:block; margin:16px 0 6px; font-size:12.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--slate-2);
}
.ccard__t{ font-size:19px; letter-spacing:-.02em; line-height:1.28; margin:0 0 14px; }
.ccard__d{ font-size:14.5px; color:var(--slate); line-height:1.55; margin:0; }
.ccard__kpi{ display:flex; flex-wrap:wrap; gap:10px 20px; margin:0 0 16px; padding:0; list-style:none; }
.ccard__kpi li{ display:grid; gap:2px; }
.ccard__kpi b{ font-size:20px; letter-spacing:-.02em; }
.ccard__kpi span{ font-size:12px; color:var(--slate-2); }
.ccard__go{
  margin-top:auto; padding-top:20px; font-size:14px; font-weight:700; color:var(--brand);
  display:inline-flex; align-items:center; gap:8px;
}
.ccard__go--off{ color:var(--slate-2); font-weight:600; }
.ccards--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:1080px){ .ccards, .ccards--2{ grid-template-columns:1fr; } }

/* ======================= COMPARE ======================= */
.cmpwrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border-radius:var(--r-lg); background:var(--white);
  border:1px solid var(--line); box-shadow:var(--sh-sm);
}
.cmp{ width:100%; min-width:780px; border-collapse:collapse; font-size:14.5px; }
.cmp th, .cmp td{ text-align:left; padding:16px 18px; border-bottom:1px solid var(--line); vertical-align:top; }
.cmp thead th{
  font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--slate-2); background:var(--paper); white-space:nowrap;
}
.cmp thead th:nth-child(1){ width:22%; }
.cmp thead th:nth-child(2){ width:27%; }
.cmp thead th:nth-child(3){ width:26%; }
.cmp thead th:nth-child(4){ width:25%; }
.cmp tbody th{ font-weight:600; color:var(--ink); }
.cmp td{ color:var(--slate); line-height:1.5; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td{ border-bottom:0; }
.cmp .is-me{ color:var(--ink); background:var(--grad-soft); }
.cmp thead .is-me{ color:var(--brand); background:var(--paper); }
.cmp__hint{ display:none; font-size:13px; color:var(--slate-2); margin-top:10px; }

/* ======================= HOW I WORK ======================= */
.howgrid{ display:grid; grid-template-columns:1fr; gap:0; }
.howout{
  margin-top:clamp(36px,4vw,52px); padding:26px 28px; border-radius:var(--r-md);
  background:var(--paper-2); border:1px solid var(--line);
}
.howout p{ margin:0; font-size:15px; color:var(--slate); max-width:80ch; }
.howout p b{ color:var(--ink); }
.howout p + p{ margin-top:12px; }

.sebcharts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px; }
@media (max-width:860px){ .sebcharts{ grid-template-columns:1fr; } }
.chart{
  padding:26px 24px 20px; border-radius:var(--r-lg); background:var(--white);
  border:1px solid var(--line); box-shadow:var(--sh-sm);
}
.chart__cap{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-2); }
.chart__sub{ font-size:13.5px; color:var(--slate); margin-top:6px; }
.chart__plot{ display:flex; align-items:flex-end; gap:8px; margin-top:26px; }
.chart__col{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; }
.chart__col b{ font-size:12.5px; font-weight:800; color:var(--ink); margin-bottom:8px; white-space:nowrap; }
.chart__bar{ width:100%; height:150px; display:flex; align-items:flex-end; justify-content:center; }
.chart__bar i{
  display:block; width:100%; max-width:52px; height:var(--h,60%);
  border-radius:9px 9px 4px 4px; background:var(--grad); background-size:200% 200%;
  animation:gradShift 9s var(--ease-io) infinite; transform-origin:bottom;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.chart__col:hover .chart__bar i{ transform:scaleY(1.05); box-shadow:0 12px 26px -12px rgba(91,75,255,.6); }
.chart__col span{ margin-top:10px; font-size:11.5px; font-weight:600; color:var(--slate-2); }
.chart__col--part .chart__bar i{ background:linear-gradient(180deg,#cfccdb,#e8e6ef); animation:none; }
.chart__col--part b{ color:var(--slate); }
.chart__note{ margin-top:16px; font-size:12.5px; color:var(--slate-2); line-height:1.55; }
.chart__bars{ margin-top:22px; }
.chart__bars .bar{ margin-bottom:14px; }
.chart__bars .bar:last-child{ margin-bottom:0; }
.chart__bars .bar__top span:first-child{ font-size:12.5px; color:var(--slate); }

.sebnote{
  margin-top:22px; padding:26px 28px; border-radius:var(--r-lg);
  background:var(--white); border:1px solid var(--line); box-shadow:var(--sh-sm);
}
.sebnote h3{ font-size:17px; margin-bottom:12px; }
.sebnote p{ font-size:14.5px; color:var(--slate); max-width:84ch; }
.sebnote p + p{ margin-top:10px; }
.sebnote b{ color:var(--ink); }
.seblink{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-weight:700; font-size:14.5px; color:var(--brand); }
.seblink:hover{ text-decoration:underline; }

/* ============================================================
   TEAM
   ============================================================ */
.team{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start; }
@media (max-width:900px){ .team{ grid-template-columns:1fr; } }
.roles{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.roles li{
  list-style:none; font-size:13px; font-weight:600; padding:8px 14px; border-radius:var(--r-pill);
  background:var(--white); border:1px solid var(--line); color:var(--slate);
}
.factgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }
@media (max-width:520px){ .factgrid{ grid-template-columns:1fr; } }
.fact{
  padding:20px; border-radius:var(--r-md); background:var(--white);
  border:1px solid var(--line); box-shadow:var(--sh-sm);
}
.fact b{ display:block; font-size:clamp(22px,2.6vw,30px); font-weight:900; letter-spacing:-.04em; margin-bottom:4px; }
.fact span{ font-size:12.5px; color:var(--slate-2); }

/* ============================================================
   TRAJECTORY
   ============================================================ */
.traj__outro{
  margin-top:34px; padding:26px 28px; border-radius:var(--r-lg);
  background:linear-gradient(120deg,rgba(91,75,255,.07),rgba(178,60,255,.06),rgba(255,122,69,.07));
  border:1px solid var(--line);
}
.traj__outro h3{ font-size:18px; margin-bottom:10px; }
.traj__outro p{ font-size:15px; color:var(--slate); max-width:80ch; }
.traj__outro b{ color:var(--ink); }
.step__co{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); margin-bottom:7px; }
.step__meta{ margin-top:12px; font-size:12.5px; font-weight:700; color:var(--brand); letter-spacing:.02em; }
.step__shift{
  display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--slate-2);
}
.step__shift b{ color:var(--ink); }

/* ============================================================
   BRANDS
   ============================================================ */
/* flex + justify-content:center — последний ряд с неполным числом карточек centred */
.bgrid{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.bgrid > li{ flex:0 1 calc(25% - 10.5px); display:flex; }
.bcard{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px;
  width:100%; padding:22px 16px 18px; border:1px solid var(--line); border-radius:18px;
  background:#fff; color:var(--ink); text-align:center; overflow:hidden;
  transition:transform .35s var(--ease-io), box-shadow .35s var(--ease-io), border-color .35s var(--ease-io);
}
.bcard::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent,var(--brand));
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-io);
}
.bcard:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -22px var(--accent,rgba(91,75,255,.45)); border-color:transparent; }
.bcard:hover::before{ transform:scaleX(1); }
.bcard__logo{
  width:80px; height:80px; display:grid; place-items:center; border-radius:16px;
  background:linear-gradient(180deg,#fafafd,#eef0f6); border:1px solid var(--line); margin-bottom:4px;
  transition:transform .35s var(--ease-io);
}
.bcard:hover .bcard__logo{ transform:translateY(-2px) scale(1.04); }
.bcard__logo img{ max-width:62px; max-height:62px; object-fit:contain; display:block; }
.bcard__logo img.is-wide{ max-width:74px; max-height:34px; }
/* логотип-тайл с собственным тёмным фоном — скругляем, чтобы не выглядел жёстким квадратом */
.bcard__logo img.is-tile{ border-radius:14px; max-width:62px; max-height:62px; }
.bcard__name{ font-weight:700; font-size:15px; letter-spacing:-.01em; }
.bcard__hint{ font-size:12.5px; color:var(--slate); }
@media (max-width:880px){ .bgrid > li{ flex-basis:calc(33.333% - 9.33px); } }
@media (max-width:600px){
  .bgrid{ gap:10px; }
  .bgrid > li{ flex-basis:calc(50% - 5px); }
  .bcard{ padding:18px 12px 14px; }
  .bcard__logo{ width:68px; height:68px; }
  .bcard__logo img{ max-width:52px; max-height:52px; }
  .bcard__logo img.is-wide{ max-width:58px; max-height:30px; }
}
.bcard--fort{ --accent:#ff993d; }
.bcard--aspro{ --accent:#ff6b1a; }
.bcard--tefal{ --accent:#e40521; }
.bcard--krups{ --accent:#111111; }
.bcard--rowenta{ --accent:#0e2a35; }
.bcard--moulinex{ --accent:#b3131f; }
.bcard--wmf{ --accent:#c8102e; }
.bcard--hansa{ --accent:#d52027; }
.bcard--giper{ --accent:#e8b400; }
.bcard--bf{ --accent:#fe3e1a; }

/* ============================================================
   CTA
   ============================================================ */
.cta{
  position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(46px,6vw,82px);
  background:var(--ink); color:#fff; text-align:center; isolation:isolate; box-shadow:var(--sh-lg);
}
.cta__glow{
  position:absolute; width:700px; height:700px; border-radius:50%; z-index:-1;
  background:conic-gradient(from 0deg,#5b4bff,#b23cff,#ff7a45,#14c8a0,#5b4bff);
  filter:blur(120px); opacity:.4; top:-280px; left:50%; translate:-50% 0;
  animation:spin 22s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.cta h2{ font-size:clamp(28px,4.4vw,50px); margin-bottom:18px; }
.cta p{ color:rgba(255,255,255,.7); max-width:60ch; margin:0 auto 34px; font-size:clamp(15px,1.6vw,18px); }
.cta__row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn--light{ --bg:#fff; --fg:var(--ink); }
.btn--light:hover{ --fg:#fff; }
.btn--outline{ --bg:transparent; --fg:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3); }
.btn--outline:hover{ box-shadow:inset 0 0 0 1.5px transparent; }
.cta__roles{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 auto 30px; max-width:760px;
}
.cta__roles li{
  list-style:none; font-size:13px; font-weight:600; padding:7px 14px; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.72);
}
.cta__contacts{ margin-top:34px; display:flex; gap:26px; justify-content:center; flex-wrap:wrap; font-size:14px; color:rgba(255,255,255,.62); }
.cta__contacts a{ display:inline-flex; align-items:center; gap:8px; transition:color .3s var(--ease); }
.cta__contacts a:hover{ color:#fff; }

/* ============================================================
   FOOTER / BACK-TOP
   ============================================================ */
.foot{ padding:36px 0; border-top:1px solid var(--line); margin-top:64px; }
.foot__in{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:13.5px; color:var(--slate-2); }
.foot__socials{ display:flex; gap:8px; }
.foot__socials a{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--slate); background:var(--white);
  transition:transform .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.foot__socials a:hover{ transform:translateY(-3px); color:#fff; border-color:transparent; background:var(--grad); box-shadow:var(--sh-brand); }
.foot__socials svg{ width:17px; height:17px; }

.back-top{
  position:fixed; right:24px; bottom:24px; z-index:90;
  width:52px; height:52px; border-radius:50%;
  background:var(--ink); color:#fff; display:grid; place-items:center; text-decoration:none;
  box-shadow:0 14px 32px rgba(11,13,23,.28);
  opacity:0; translate:0 16px; pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.back-top::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--grad); opacity:0; transition:opacity .35s var(--ease);
}
.back-top svg{ position:relative; z-index:1; transition:transform .35s var(--ease); }
.back-top:hover{ transform:translateY(-3px); }
.back-top:hover::after{ opacity:1; }
.back-top:hover svg{ transform:translateY(-2px); }
@supports (animation-timeline: scroll()){
  .back-top{ animation:backTopHide linear both; animation-timeline:scroll(root); animation-range:0 35vh; }
  @keyframes backTopHide{
    0%{ opacity:0; translate:0 16px; pointer-events:none; }
    100%{ opacity:1; translate:0 0; pointer-events:auto; }
  }
}
@supports not (animation-timeline: scroll()){
  .back-top{ opacity:1; translate:0 0; pointer-events:auto; }
}
@media (max-width:640px){ .back-top{ right:16px; bottom:16px; width:46px; height:46px; } }

/* ============================================================
   SCROLL REVEAL + MOTION PREFERENCES
   ============================================================ */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{ animation:reveal linear both; animation-timeline:view(); animation-range:entry 8% cover 26%; }
    @keyframes reveal{
      from{ opacity:0; transform:translateY(30px) scale(.99); filter:blur(5px); }
      to  { opacity:1; transform:none; filter:blur(0); }
    }
    .bar__fill{ animation:barGrow linear both; animation-timeline:view(); animation-range:entry 20% cover 40%; }
    @keyframes barGrow{ from{ width:0 } to{ width:var(--w,60%) } }
  }
}
.bar__fill{ width:var(--w,60%); }
@supports not (animation-timeline: view()){
  .bar__fill{ animation:barPop 1.4s var(--ease) both; }
}
@keyframes barPop{ from{ width:0 } }

.rise{ animation:rise .9s var(--ease) both; }
.rise-1{ animation-delay:.05s } .rise-2{ animation-delay:.16s } .rise-3{ animation-delay:.27s }
.rise-4{ animation-delay:.38s } .rise-5{ animation-delay:.49s } .rise-6{ animation-delay:.6s }
@keyframes rise{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .bar__fill{ width:var(--w,60%) !important; }
  .orbit__pulse, .orbit__ring, .orbit__label, .orbit__ring--grad, .orbit__halo{ animation:none !important; }
}

@media print{
  .nav, .cta, .foot, .blob, .grid-lines, .orbit__halo, .orbit__pulse,
  .orbit__ring, .orbit__label, .orbit__ring--grad, .orbit__shimmer,
  .orbit__tint, .orbit__scan, .back-top{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding:24px 0; }
  .hero{ padding-top:0; }
  .metrics{ background:none; color:#000; border:1px solid #ccc; }
  .metric__val, .metric__lbl{ color:#000; }
  .metric::before{ background:#000; }
  a{ color:#000; text-decoration:underline; }
}