/* ========================================
   NOXEGEN INDEX — Apple × Stripe hybrid
   Base: Apple Vision — alternating sections, huge type, squircle, pill buttons
   Overlay: Stripe mesh-gradient — cyan→violet→pink→amber on Hero + Final CTA
   Star-field: subtle canvas particles on dark sections
   Philosophy: MAX SMOOTHNESS (60s mesh, 120s stars, linear easing)
======================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  /* Apple palette */
  --bg-black:#000000;
  --bg-white:#FFFFFF;
  --bg-grey:#F5F5F7;
  --bg-grey-dark:#1D1D1F;
  --text-on-dark:#F5F5F7;
  --text-on-light:#1D1D1F;
  --text-sec-dark:rgba(255,255,255,0.72);
  --text-sec-light:#6E6E73;
  --divider-dark:rgba(255,255,255,0.12);
  --divider-light:rgba(0,0,0,0.10);
  --accent-blue:#0066CC;
  --accent-blue-hover:#0077ED;
  --accent-blue-light:#2997FF;

  /* Stripe palette */
  --stripe-cyan:#11EFE3;
  --stripe-violet:#635BFF;
  --stripe-pink:#FF80FF;
  --stripe-amber:#FFD166;

  /* Premium shadows */
  --shadow-stripe-1:0 7px 14px rgba(50,50,93,0.10),0 3px 6px rgba(0,0,0,0.08);
  --shadow-stripe-2:0 15px 35px rgba(50,50,93,0.12),0 5px 15px rgba(0,0,0,0.10);
  --shadow-stripe-3:0 30px 60px rgba(50,50,93,0.14),0 18px 36px rgba(0,0,0,0.12);

  /* Smoothness */
  --ease-premium:cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-expo-out:cubic-bezier(0.19, 1, 0.22, 1);
  --ease-smooth:cubic-bezier(0.45, 0.05, 0.55, 0.95);

  --dur-fast:0.4s;
  --dur-base:0.6s;
  --dur-long:1.0s;
  --dur-slow:1.4s;
  --dur-gradient:60s;
  --dur-gradient-text:12s;
  --dur-price-shimmer:15s;
  --dur-stars:120s;

  --font:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif;
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-family:var(--font);background:#000;color:var(--text-on-dark);overflow-x:hidden;line-height:1.47;font-size:17px;font-weight:400;letter-spacing:-0.022em;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
::selection{background:rgba(99,91,255,.35);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--stripe-violet);outline-offset:3px;border-radius:4px}

/* ================================
   NAV — Apple frosted bar
================================ */
nav{position:fixed;top:0;left:0;right:0;z-index:102;padding:0;display:flex;align-items:center;justify-content:center;height:44px;background:rgba(0,0,0,0.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:0.5px solid rgba(255,255,255,0.08);transition:background var(--dur-base) var(--ease-premium)}
.nav-inner{width:100%;max-width:1024px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;height:100%}
.nav-logo{font-size:20px;font-weight:500;letter-spacing:-0.02em;color:#fff;cursor:pointer;transition:opacity var(--dur-fast) var(--ease-premium);display:inline-flex;align-items:center;gap:8px}
.nav-logo:hover{opacity:.85}
.nav-logo svg{width:22px;height:22px}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:12px;color:rgba(255,255,255,0.72);transition:color var(--dur-fast) var(--ease-premium);letter-spacing:0}
.nav-links a:hover{color:#fff}
.nav-links a.nav-cta{background:var(--accent-blue);color:#fff;padding:7px 15px;border-radius:980px;font-size:12px;font-weight:500;letter-spacing:0;transition:background var(--dur-fast) var(--ease-premium)}
.nav-links a.nav-cta:hover{background:var(--accent-blue-hover);color:#fff}
.burger{display:none;background:none;border:none;color:#fff;cursor:pointer;font-size:20px;padding:4px 8px}
@media(max-width:760px){.nav-links a:not(.nav-cta){display:none}.burger{display:inline-flex}}

/* ================================
/* ================================
   SECTION SYSTEM — alternating
================================ */
section{padding:clamp(80px,11vw,140px) 0;position:relative;overflow:hidden}
.sec-dark{background:#000;color:var(--text-on-dark)}
.sec-light{background:var(--bg-white);color:var(--text-on-light)}
.sec-grey{background:var(--bg-grey);color:var(--text-on-light)}
.sec-charcoal{background:var(--bg-grey-dark);color:var(--text-on-dark)}

.container{max-width:980px;margin:0 auto;padding:0 22px;position:relative;z-index:2}
.container-wide{max-width:1200px;margin:0 auto;padding:0 22px;position:relative;z-index:2}
.container-narrow{max-width:720px;margin:0 auto;padding:0 22px;position:relative;z-index:2}

.eyebrow{display:inline-block;font-size:12px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-blue);margin-bottom:18px}
.sec-dark .eyebrow,.sec-charcoal .eyebrow{color:var(--accent-blue-light)}
.sec-h2{font-size:clamp(40px,6.5vw,80px);font-weight:600;letter-spacing:-0.035em;line-height:1.05;margin-bottom:24px}
.sec-lead{font-size:clamp(19px,2.2vw,24px);font-weight:400;letter-spacing:-0.01em;line-height:1.33;max-width:640px;margin-bottom:56px}
.sec-dark .sec-lead,.sec-charcoal .sec-lead{color:var(--text-sec-dark)}
.sec-light .sec-lead,.sec-grey .sec-lead{color:var(--text-sec-light)}
.center{text-align:center}
.center .sec-lead{margin-left:auto;margin-right:auto}

/* ================================
   HERO — Apple viewport + Stripe mesh + stars
================================ */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:140px 22px 80px;
  position:relative;
  background:#000;color:#fff;
  overflow:hidden;
  isolation:isolate;
}
/* Mesh-gradient layer */
.hero::before{
  content:'';
  position:absolute;inset:-20%;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, var(--stripe-cyan)   0%, transparent 40%),
    radial-gradient(circle at 75% 70%, var(--stripe-violet) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, var(--stripe-pink)   0%, transparent 35%),
    radial-gradient(circle at 80% 20%, var(--stripe-amber)  0%, transparent 30%);
  filter:blur(80px);
  opacity:0.55;
  animation:meshFloat var(--dur-gradient) linear infinite;
  will-change:transform;
  transform:translateZ(0);
}
/* Vignette */
.hero::after{
  content:'';
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 0%, transparent 55%, rgba(0,0,0,0.55) 85%, #000 100%),
    linear-gradient(180deg, transparent 0%, transparent 60%, #000 100%);
}
@keyframes meshFloat{
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%  { transform: translate3d(-3%, 2%, 0) rotate(90deg); }
  50%  { transform: translate3d(2%, -3%, 0) rotate(180deg); }
  75%  { transform: translate3d(-2%, 3%, 0) rotate(270deg); }
  100% { transform: translate3d(0, 0, 0) rotate(360deg); }
}
.hero-inner{position:relative;z-index:2;max-width:980px;width:100%;will-change:transform}
.hero-status{display:inline-block;font-size:12px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-blue-light);margin-bottom:20px}
.hero h1{font-size:clamp(56px,11vw,120px);font-weight:600;letter-spacing:-0.04em;line-height:1.0;margin-bottom:28px;color:#fff}
.hero h1 .line{display:block}
/* Word "мы создаём" — shimmering gradient (LOCKED per feedback_noxegen_glow_locked.md) */
.hero h1 .glow{
  background:linear-gradient(90deg,
    var(--stripe-cyan) 0%,
    var(--stripe-violet) 25%,
    var(--stripe-pink) 50%,
    var(--stripe-amber) 75%,
    var(--stripe-cyan) 100%);
  background-size:400% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:textShimmer var(--dur-gradient-text) linear infinite;
  will-change:background-position;
}
@keyframes textShimmer{
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}
.hero-sub{font-size:clamp(22px,2.6vw,28px);font-weight:400;letter-spacing:-0.015em;line-height:1.25;color:rgba(255,255,255,0.88);max-width:720px;margin:0 auto 18px}
.hero-sub strong{color:#fff;font-weight:500}
.hero-meta{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  font-size:13px;letter-spacing:0;color:rgba(255,255,255,0.7);
  margin:18px 0 40px;
  padding:8px 18px;border-radius:980px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.hero-meta .sep{opacity:.3}
.hero-meta strong{color:#fff;font-weight:500}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-bottom:28px}

/* Pill buttons */
.btn-primary{
  background:var(--accent-blue);color:#fff;
  padding:12px 22px;border-radius:980px;
  font-size:17px;font-weight:400;letter-spacing:-0.022em;
  border:none;cursor:pointer;
  transition:background var(--dur-base) var(--ease-premium),box-shadow var(--dur-base) var(--ease-premium),transform var(--dur-base) var(--ease-premium);
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;min-height:44px;line-height:1;
  position:relative;overflow:hidden;
  isolation:isolate;
}
.btn-primary:hover{background:var(--accent-blue-hover);box-shadow:var(--shadow-stripe-2);transform:translateY(-1px)}
.btn-primary .arrow{font-size:15px;font-weight:400;transition:transform var(--dur-base) var(--ease-premium)}
.btn-primary:hover .arrow{transform:translateX(3px)}
/* AUTO Shine Sweep — блик проходит каждые 5 сек сам, привлекает внимание */
.btn-primary::before{
  content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  animation:btnShineSweep 5s ease-in-out infinite;
  pointer-events:none;z-index:1;
}
.btn-primary > *{position:relative;z-index:2}
@keyframes btnShineSweep{
  0%,80%{left:-75%}
  100%{left:125%}
}
@media(prefers-reduced-motion:reduce){.btn-primary::before{animation:none}}

.btn-secondary{
  background:rgba(255,255,255,0.08);color:#fff;
  padding:12px 22px;border-radius:980px;
  font-size:17px;font-weight:400;letter-spacing:-0.022em;
  border:1px solid rgba(255,255,255,0.18);cursor:pointer;
  transition:background var(--dur-base) var(--ease-premium),border-color var(--dur-base) var(--ease-premium);
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;min-height:44px;line-height:1;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.btn-secondary:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.32)}

.btn-gradient{
  background:linear-gradient(135deg, var(--stripe-violet) 0%, var(--stripe-cyan) 100%);
  background-size:200% 100%;background-position:0% 50%;
  color:#fff;
  padding:14px 28px;border-radius:980px;
  font-size:17px;font-weight:500;letter-spacing:-0.022em;
  border:none;cursor:pointer;
  transition:background-position var(--dur-long) var(--ease-premium),box-shadow var(--dur-base) var(--ease-premium);
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;min-height:48px;line-height:1;
  box-shadow:var(--shadow-stripe-1);
}
.btn-gradient:hover{background-position:100% 50%;box-shadow:var(--shadow-stripe-3)}
.btn-gradient .arrow{transition:transform var(--dur-base) var(--ease-premium)}
.btn-gradient:hover .arrow{transform:translateX(3px)}

.btn-link{
  color:var(--accent-blue);
  padding:12px 16px;
  font-size:17px;font-weight:400;letter-spacing:-0.022em;
  display:inline-flex;align-items:center;gap:4px;
  text-decoration:none;
  transition:opacity var(--dur-base) var(--ease-premium);
  min-height:44px;line-height:1;
}
.sec-dark .btn-link,.sec-charcoal .btn-link,.hero .btn-link{color:var(--accent-blue-light)}
.btn-link:hover{opacity:.75}
.btn-link .arrow{transition:transform var(--dur-base) var(--ease-premium);font-size:15px}
.btn-link:hover .arrow{transform:translateX(3px)}

.hero-micro{font-size:13px;color:rgba(255,255,255,0.55);letter-spacing:0;line-height:1.8;margin-top:12px}
.hero-micro .dot{opacity:.5;margin:0 8px}

/* Scroll hint */
.scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:3;opacity:.6;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.6);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint svg{animation:bounce 2.2s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ================================
   MARQUEE (ниши) — subtle Apple ticker
================================ */
.marquee-wrap{background:#000;padding:48px 0;border-top:0.5px solid rgba(255,255,255,0.06);border-bottom:0.5px solid rgba(255,255,255,0.06);position:relative;z-index:2}
.marquee-eyebrow{text-align:center;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:24px;font-weight:500;
  color:rgba(255,255,255,0.55);
  background:linear-gradient(90deg,rgba(255,255,255,0.55) 0%,rgba(255,255,255,0.55) 40%,#fff 50%,rgba(255,255,255,0.55) 60%,rgba(255,255,255,0.55) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shimmerSweep 5s linear infinite}
@keyframes shimmerSweep{
  0%{background-position:200% 0}
  100%{background-position:-100% 0}
}
@media(prefers-reduced-motion:reduce){
  .marquee-eyebrow{animation:none;color:rgba(255,255,255,0.55);-webkit-text-fill-color:initial;background:none}
}
.niche-marquee{position:relative;width:100%;height:44px;overflow:hidden;mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.niche-ticker{display:flex;align-items:center;gap:0;animation:tickerScroll 42s linear infinite;width:max-content;height:100%;will-change:transform}
.niche-item{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;font-weight:500;white-space:nowrap;padding:0 14px;line-height:44px;color:rgba(255,255,255,0.62)}
.niche-dot{color:rgba(255,255,255,0.18);font-size:6px;padding:0 3px}
@keyframes tickerScroll{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.niche-ticker{animation:none}}

/* ================================
   PAIN / SOLUTION bento
================================ */
.bento-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:56px}
.bento-card{
  background:#fff;
  border-radius:22px;
  padding:44px 36px;
  border:1px solid rgba(0,0,0,0.04);
  transition:border-color var(--dur-base) var(--ease-premium),box-shadow var(--dur-base) var(--ease-premium),transform var(--dur-base) var(--ease-premium);
  box-shadow:var(--shadow-stripe-1);
}
.sec-dark .bento-card,.sec-charcoal .bento-card{background:#1D1D1F;border-color:rgba(255,255,255,0.06)}
.bento-card:hover{border-color:rgba(99,91,255,0.18);box-shadow:var(--shadow-stripe-2);transform:translateY(-2px)}
.bento-num{
  font-size:44px;font-weight:300;letter-spacing:-0.03em;line-height:1;margin-bottom:18px;display:block;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg, var(--stripe-cyan), var(--stripe-violet));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.bento-card h4{font-size:22px;font-weight:600;letter-spacing:-0.02em;line-height:1.22;margin-bottom:14px}
.sec-light .bento-card h4,.sec-grey .bento-card h4{color:#1D1D1F}
.sec-dark .bento-card h4,.sec-charcoal .bento-card h4{color:#fff}
.bento-card p{font-size:15px;line-height:1.55;letter-spacing:-0.01em}
.sec-light .bento-card p,.sec-grey .bento-card p{color:#6E6E73}
.sec-dark .bento-card p,.sec-charcoal .bento-card p{color:rgba(255,255,255,0.72)}
@media(max-width:760px){.bento-grid{grid-template-columns:1fr}}

/* ================================
   HOW / STEPS
================================ */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.step-card{
  background:#1D1D1F;
  border-radius:22px;
  padding:48px 36px;
  border:1px solid rgba(255,255,255,0.06);
  transition:border-color var(--dur-base) var(--ease-premium),background var(--dur-base) var(--ease-premium);
}
.step-card:hover{border-color:rgba(99,91,255,0.35);background:#222224}
.step-num{
  font-size:14px;font-weight:600;color:var(--accent-blue-light);
  letter-spacing:0.16em;text-transform:uppercase;margin-bottom:18px;
  font-variant-numeric:tabular-nums;display:block;
}
.step-card h3{font-size:23px;font-weight:600;letter-spacing:-0.02em;line-height:1.2;color:#fff;margin-bottom:12px}
.step-card p{font-size:15px;color:rgba(255,255,255,0.72);line-height:1.55;letter-spacing:-0.01em;margin-bottom:14px}
.step-time{display:inline-block;font-size:12px;font-weight:500;color:var(--stripe-cyan);letter-spacing:0.08em;text-transform:uppercase;padding:4px 12px;border-radius:980px;border:1px solid rgba(17,239,227,0.28);background:rgba(17,239,227,0.06)}
@media(max-width:860px){.steps-grid{grid-template-columns:1fr}}

/* ================================
   PRICING — 4 tariff cards
================================ */
.tariff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;max-width:1100px;margin-left:auto;margin-right:auto}
.tariff-card{
  position:relative;
  perspective:1400px;
  background:transparent;
  border-radius:22px;
  min-height:780px;
  transition:transform var(--dur-base) var(--ease-premium);
  cursor:pointer;
}
.tariff-card:hover{transform:translateY(-2px)}
.tariff-card.flipped:hover{transform:none}
.tariff-card.featured::before{
  content:'';position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;
  background:linear-gradient(135deg, var(--stripe-violet), var(--stripe-cyan), var(--stripe-violet));
  background-size:200% 200%;
  animation:borderShimmer 8s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:-1;
}
@keyframes borderShimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.tariff-badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
  padding:7px 16px;border-radius:980px;
  background:linear-gradient(135deg, var(--stripe-violet), var(--accent-blue));
  color:#fff;z-index:10;white-space:nowrap;
  box-shadow:0 4px 14px rgba(99,91,255,0.4);
}
.tariff-name{font-size:13px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent-blue);margin-bottom:10px;position:relative;z-index:1}
.tariff-card.featured .tariff-name{color:var(--stripe-cyan)}
.tariff-title{font-size:20px;font-weight:600;letter-spacing:-0.02em;line-height:1.22;margin-bottom:10px;position:relative;z-index:1;overflow-wrap:break-word;word-break:normal;hyphens:auto}
.tariff-card.featured .tariff-title{color:#fff}
.tariff-card:not(.featured) .tariff-title{color:#1D1D1F}
.tariff-desc{font-size:14px;line-height:1.5;margin-bottom:24px;letter-spacing:-0.01em;position:relative;z-index:1}
.tariff-card:not(.featured) .tariff-desc{color:#6E6E73}
.tariff-card.featured .tariff-desc{color:rgba(255,255,255,0.7)}
.tariff-price{font-size:40px;font-weight:600;letter-spacing:-0.03em;line-height:1;margin-bottom:6px;font-variant-numeric:tabular-nums;position:relative;z-index:1}
.tariff-card:not(.featured) .tariff-price{color:#1D1D1F}
.tariff-card.featured .tariff-price{color:#fff}
.tariff-price .cur{font-weight:400;font-size:0.6em;margin-left:4px;opacity:.85}
.tariff-old{font-size:14px;text-decoration:line-through;margin-bottom:6px;font-variant-numeric:tabular-nums;position:relative;z-index:1}
.tariff-card:not(.featured) .tariff-old{color:#86868B}
.tariff-card.featured .tariff-old{color:rgba(255,255,255,0.45)}
.tariff-time{font-size:13px;font-weight:500;margin-bottom:22px;position:relative;z-index:1}
.tariff-card:not(.featured) .tariff-time{color:var(--accent-blue)}
.tariff-card.featured .tariff-time{color:var(--stripe-cyan)}
.tariff-features{list-style:none;margin:0 0 24px;padding:0;position:relative;z-index:1;flex:1}
.tariff-features li{font-size:14px;line-height:1.5;padding:6px 0 6px 24px;position:relative;letter-spacing:-0.01em}
.tariff-card:not(.featured) .tariff-features li{color:#424245}
.tariff-card.featured .tariff-features li{color:rgba(255,255,255,0.82)}
.tariff-features li::before{
  content:'';position:absolute;left:0;top:11px;
  width:14px;height:14px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%230066CC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
.tariff-card.featured .tariff-features li::before{
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' stroke='%2311EFE3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}
.tariff-bonus{
  font-size:13px;font-weight:600;letter-spacing:-0.01em;
  margin-bottom:10px;padding:8px 12px;border-radius:10px;
  position:relative;z-index:1;
  background:rgba(99,91,255,0.08);
  color:var(--stripe-violet);
  border:1px solid rgba(99,91,255,0.15);
}
.tariff-card.featured .tariff-bonus{
  background:rgba(17,239,227,0.08);
  color:var(--stripe-cyan);
  border-color:rgba(17,239,227,0.2);
}
.tariff-cta{
  margin-top:auto;display:block;text-align:center;
  padding:13px 20px;border-radius:980px;
  font-size:15px;font-weight:500;letter-spacing:-0.015em;
  transition:background var(--dur-base) var(--ease-premium),box-shadow var(--dur-base) var(--ease-premium);
  position:relative;z-index:1;cursor:pointer;border:none;width:100%;
  font-family:var(--font);
}
.tariff-card:not(.featured) .tariff-cta{background:var(--accent-blue);color:#fff}
.tariff-card:not(.featured) .tariff-cta:hover{background:var(--accent-blue-hover);box-shadow:var(--shadow-stripe-2)}
.tariff-card.featured .tariff-cta{background:linear-gradient(135deg, var(--stripe-violet) 0%, var(--accent-blue) 100%);background-size:200% 100%;background-position:0% 50%;color:#fff;transition:background-position var(--dur-long) var(--ease-premium),box-shadow var(--dur-base) var(--ease-premium),transform var(--dur-base) var(--ease-premium);position:relative;overflow:hidden;isolation:isolate}
.tariff-card.featured .tariff-cta:hover{background-position:100% 50%;box-shadow:0 14px 30px rgba(99,91,255,0.4);transform:translateY(-1px)}
.tariff-card.featured .tariff-cta::before{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);animation:btnShineSweep 5.5s ease-in-out infinite;pointer-events:none;z-index:1}
.tariff-card.featured .tariff-cta > *{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.tariff-card.featured .tariff-cta::before{animation:none}}
@media(max-width:1100px){.tariff-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:760px){
  /* Мобильная карусель: горизонтальный свайп вместо грид */
  .tariff-grid{
    display:flex;overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:14px;padding:20px 20px 28px;margin:20px -24px 0;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .tariff-grid::-webkit-scrollbar{display:none}
  .tariff-card{min-width:82vw;max-width:82vw;min-height:700px;scroll-snap-align:center;flex-shrink:0}
  .tariff-inner{min-height:700px}
  .tariff-face{padding:26px 22px;border-radius:20px}
  .tariff-name{font-size:11px;margin-bottom:8px;letter-spacing:0.06em}
  .tariff-title{font-size:15px;line-height:1.22;margin-bottom:8px}
  .tariff-desc{font-size:12px;line-height:1.4;margin-bottom:14px}
  .tariff-price{font-size:28px;margin-bottom:4px}
  .tariff-price .cur{font-size:0.55em}
  .tariff-time{font-size:11px;margin-bottom:14px}
  .tariff-features{margin-bottom:14px}
  .tariff-features li{font-size:12px;line-height:1.4;padding:3px 0 3px 20px}
  .tariff-features li::before{top:7px;width:12px;height:12px}
  .tariff-bonus{font-size:11.5px;margin-bottom:8px}
  .tariff-cta{padding:10px 14px;font-size:13px}
  .tariff-flip-hint{font-size:10px;margin-top:8px}
  .tariff-badge{font-size:9px;padding:4px 10px;top:-10px;letter-spacing:0.1em}
  .tariff-back-title{font-size:15px;margin-bottom:10px}
  .tariff-back-section{margin-bottom:10px}
  .tariff-back-section h4{font-size:10px;margin-bottom:4px}
  .tariff-back-section li{font-size:11.5px;line-height:1.4;padding:2px 0 2px 14px}
  .tariff-back-section li::before{top:7px;width:4px;height:4px}
  .tariff-back-close{width:26px;height:26px;font-size:17px;top:10px;right:10px}
}
@media(max-width:440px){
  .tariff-card{min-width:86vw;max-width:86vw}
  .tariff-face{padding:22px 18px}
  .tariff-title{font-size:16px}
  .tariff-desc{font-size:12.5px;margin-bottom:12px}
  .tariff-price{font-size:30px}
  .tariff-features li{font-size:11.5px;padding:2px 0 2px 18px}
  .tariff-features li::before{top:6px;width:11px;height:11px}
  .tariff-cta{padding:9px 10px;font-size:12px}
  .tariff-back-section li{font-size:11px}
}

.pricing-foot{text-align:center;margin-top:32px;font-size:14px;color:#6E6E73;letter-spacing:-0.01em}

/* ================================
   3D EFFECTS — CSS layer
================================ */

/* 1. HERO — orb disabled for clean hero */
#hero-orb{display:none !important}

/* Hero 3D — полностью отключено пока не выберем финальный вариант */
#hero-3d-n{display:none !important}

/* 2. PAIN glitch — УБРАН 19.04 (выглядел как «мерцание»), bento-num скрыт */

/* 3. SOLUTION pulse-ring — УБРАН 19.04 (Сейфудин увидел «круглые штуки», убраны) */

/* 4. HOW — timeline beam between steps */
.steps-grid{position:relative}
.timeline-beam{
  position:absolute;left:50%;top:0;width:2px;height:100%;
  transform:translateX(-50%);z-index:0;pointer-events:none;
  display:none; /* show only on desktop */
}
.timeline-beam-bg{position:absolute;inset:0;background:rgba(255,255,255,0.06);border-radius:2px}
.timeline-beam-fill{position:absolute;top:0;left:0;width:100%;height:0%;background:linear-gradient(180deg,var(--stripe-cyan),var(--stripe-violet));border-radius:2px;transition:height 0.1s linear}
@media(min-width:861px){
  .timeline-beam{display:block}
}

/* 5. PRICING — stable hover (3D tilt убран 19.04, перспектива на карточку задаётся во flip-CSS) */

/* 6. HALL — статичные слоты без мерцания (убрано 19.04) */
.slot.free{border-color:rgba(255,255,255,0.16)}
.slot.taken{box-shadow:0 0 12px rgba(245,194,107,0.10)}

/* 8. FINAL CTA — aurora wave */
.final-cta-wrap{position:relative;overflow:hidden}
.final-cta-wrap::before{
  content:'';position:absolute;bottom:-40%;left:-20%;right:-20%;height:80%;
  background:radial-gradient(ellipse at 50% 100%, var(--stripe-violet) 0%, transparent 50%),
              radial-gradient(ellipse at 30% 80%, var(--stripe-cyan) 0%, transparent 40%),
              radial-gradient(ellipse at 70% 90%, var(--stripe-pink) 0%, transparent 35%);
  filter:blur(60px);opacity:0.3;
  animation:auroraWave 8s ease-in-out infinite;
  pointer-events:none;z-index:0;
}
@keyframes auroraWave{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(-3%,2%,0) scale(1.05)}
  66%{transform:translate3d(3%,-1%,0) scale(0.97)}
}

/* Reduce motion — disable all 3D */
@media(prefers-reduced-motion:reduce){
  .glitch-active .bento-num{animation:none}
  .sec-grey .bento-card.visible::before{animation:none}
  .slot.free,.slot.taken{animation:none}
  .final-cta-wrap::before{animation:none}
  .timeline-beam-fill{transition:none}
  #hero-orb{display:none}
}

/* ================================
   HALL teaser — dark with mesh
================================ */
.hall-teaser{
  margin-top:56px;padding:64px 48px;
  border-radius:28px;
  background:#000;color:#fff;
  text-align:center;position:relative;overflow:hidden;
  isolation:isolate;
}
.hall-teaser::before{
  content:'';position:absolute;inset:-10%;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 30% 35%, var(--stripe-violet) 0%, transparent 45%),
    radial-gradient(circle at 70% 65%, var(--stripe-cyan) 0%, transparent 40%),
    radial-gradient(circle at 55% 20%, var(--stripe-amber) 0%, transparent 32%);
  filter:blur(70px);opacity:0.4;
  animation:meshFloat var(--dur-gradient) linear infinite;
  will-change:transform;
}
.hall-teaser-inner{position:relative;z-index:1}
.hall-teaser .eyebrow{color:var(--stripe-cyan);margin-bottom:14px}
.hall-teaser h3{font-size:clamp(32px,4.6vw,48px);font-weight:600;letter-spacing:-0.03em;line-height:1.08;margin-bottom:14px;color:#fff}
.hall-teaser p{font-size:17px;color:rgba(255,255,255,0.72);line-height:1.47;max-width:540px;margin:0 auto 28px;letter-spacing:-0.015em}
.slots-row{display:flex;gap:8px;justify-content:center;margin:28px auto 32px;flex-wrap:wrap;max-width:560px}
.slot{
  width:54px;height:54px;border-radius:22%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}
.slot.taken{
  background:#000;color:#fff;border:1px solid transparent;
  background-image:linear-gradient(#000,#000),linear-gradient(135deg, var(--stripe-violet), var(--stripe-cyan));
  background-origin:border-box;background-clip:padding-box,border-box;
}
.slot.free{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.55);border:1px solid rgba(255,255,255,0.14)}
@media(max-width:540px){.slot{width:44px;height:44px;font-size:11px}}

/* ================================
   NOX section — dark
================================ */
.nox-card{
  display:grid;grid-template-columns:1fr 1.6fr;gap:56px;align-items:center;
  max-width:980px;margin:56px auto 0;
  padding:56px;
  background:#1D1D1F;
  border-radius:28px;
  border:1px solid rgba(255,255,255,0.06);
}
/* NOX 3D BLOB — WebGL raymarched dark matte sphere */
/* Nox visual — статичный premium (redesigned 19.04) */
.nox-visual-wrap{display:flex;flex-direction:column;align-items:center;gap:28px}
.nox-visual{
  width:220px;height:220px;border-radius:42px;
  background:radial-gradient(circle at 35% 30%, #635BFF 0%, #0A0615 75%);
  position:relative;isolation:isolate;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 30px 80px rgba(99,91,255,0.35),0 0 120px rgba(17,239,227,0.08);
}
.nox-visual::before{
  content:'';position:absolute;inset:-20%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle, rgba(17,239,227,0.22) 0%, transparent 55%);
  filter:blur(30px);
  animation:noxAura 5s ease-in-out infinite;
}
.nox-visual svg{filter:drop-shadow(0 0 18px rgba(17,239,227,0.65));position:relative;z-index:2}
@keyframes noxAura{0%,100%{opacity:0.7;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.nox-visual::before{animation:none}}
.nox-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;max-width:280px}
.nox-stat{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.nox-stat-num{font-size:28px;font-weight:600;letter-spacing:-0.03em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.nox-stat-unit{font-size:13px;font-weight:400;color:rgba(255,255,255,0.55);margin-left:2px}
.nox-stat-label{font-size:11px;color:rgba(255,255,255,0.55);letter-spacing:0.02em;line-height:1.3}
@media(max-width:760px){.nox-visual{width:180px;height:180px}.nox-visual svg{width:110px;height:110px}}
.nox-body h3{font-size:40px;font-weight:600;letter-spacing:-0.03em;margin-bottom:8px;color:#fff}
.nox-body .role{font-size:12px;color:var(--stripe-cyan);text-transform:uppercase;letter-spacing:0.14em;margin-bottom:22px;font-weight:600}
.nox-body p{font-size:17px;color:rgba(255,255,255,0.72);line-height:1.55;margin-bottom:16px;letter-spacing:-0.015em}
.nox-body p strong{color:#fff;font-weight:500}
@media(max-width:760px){.nox-card{grid-template-columns:1fr;padding:36px 24px;gap:32px;text-align:center}.nox-avatar{width:140px;height:140px}}

/* ================================
   CASES — 3 cards, light
================================ */
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.case-card{
  background:#fff;border-radius:22px;
  padding:40px 32px;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:var(--shadow-stripe-1);
  transition:transform var(--dur-base) var(--ease-premium),box-shadow var(--dur-base) var(--ease-premium),border-color var(--dur-base) var(--ease-premium);
  display:flex;flex-direction:column;
}
.case-card:hover{transform:translateY(-4px);border-color:rgba(99,91,255,0.2);box-shadow:var(--shadow-stripe-3)}
.case-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.case-logo{
  width:48px;height:48px;border-radius:22%;
  background:linear-gradient(135deg, var(--stripe-violet), var(--accent-blue));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:600;letter-spacing:-0.02em;
}
.case-logo.g2{background:linear-gradient(135deg, #11EFE3, #0066CC)}
.case-logo.g3{background:linear-gradient(135deg, #FFD166, #FF80FF)}
.case-meta{flex:1;min-width:0}
.case-name{font-size:18px;font-weight:600;color:#1D1D1F;letter-spacing:-0.02em;line-height:1.2;margin-bottom:2px}
.case-niche{font-size:12px;color:#6E6E73;letter-spacing:0}
.case-card p{font-size:14px;color:#424245;line-height:1.55;margin-bottom:12px;letter-spacing:-0.01em}
.case-card p strong{color:#1D1D1F;font-weight:500}
.case-stats{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:#F5F5F7;border-radius:12px;margin:16px 0}
.case-stat{display:flex;justify-content:space-between;align-items:baseline;font-size:12px}
.case-stat .lbl{color:#6E6E73}
.case-stat .val{font-size:16px;font-weight:600;color:#1D1D1F;font-variant-numeric:tabular-nums}
.case-quote{font-size:14px;font-style:italic;color:#424245;line-height:1.5;padding:14px 0 14px 14px;border-left:2px solid var(--stripe-violet);margin-bottom:20px;letter-spacing:-0.01em}
.case-quote .who{display:block;font-style:normal;font-size:12px;color:#6E6E73;margin-top:6px;letter-spacing:0}
.case-link{margin-top:auto;align-self:flex-start;font-size:14px;color:var(--stripe-violet);font-weight:500;display:inline-flex;align-items:center;gap:4px;letter-spacing:-0.01em;transition:opacity var(--dur-base) var(--ease-premium)}
.case-link:hover{opacity:.75}
.case-link .arrow{transition:transform var(--dur-base) var(--ease-premium)}
.case-link:hover .arrow{transform:translateX(3px)}
@media(max-width:980px){.cases-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}}

/* ================================
   REASONS — dark, 3 cards
================================ */
.reasons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.reason-card{
  padding:48px 36px;
  background:#1D1D1F;
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.06);
  transition:border-color var(--dur-base) var(--ease-premium),background var(--dur-base) var(--ease-premium);
}
.reason-card:hover{border-color:rgba(99,91,255,0.35);background:#222224}
.reason-num{
  font-size:48px;font-weight:200;letter-spacing:-0.03em;line-height:1;margin-bottom:24px;display:block;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg, var(--stripe-cyan), var(--stripe-violet));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.reason-head{font-size:23px;font-weight:600;letter-spacing:-0.02em;line-height:1.2;color:#fff;margin-bottom:14px}
.reason-body{font-size:15px;color:rgba(255,255,255,0.72);line-height:1.55;font-weight:400;letter-spacing:-0.01em}
@media(max-width:860px){.reasons-grid{grid-template-columns:1fr}}

/* ================================
   ABOUT (Сейфудин) — light
================================ */
.about-card{
  display:grid;grid-template-columns:1fr 1.8fr;gap:56px;align-items:center;
  max-width:960px;margin:56px auto 0;
  padding:56px;
  background:#fff;border-radius:28px;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:var(--shadow-stripe-2);
}
.about-photo{
  width:100%;aspect-ratio:1;border-radius:22%;
  background:#0A0A0A;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 20px 44px rgba(0,0,0,0.28);
}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.about-photo .initials{font-size:96px;font-weight:500;color:#fff;letter-spacing:-0.03em}
.about-body h3{font-size:40px;font-weight:600;letter-spacing:-0.03em;margin-bottom:8px;color:#1D1D1F}
.about-body .role{font-size:13px;color:var(--stripe-violet);text-transform:uppercase;letter-spacing:0.12em;margin-bottom:24px;font-weight:600}
.about-body p{font-size:17px;color:#424245;line-height:1.55;margin-bottom:18px;letter-spacing:-0.015em}
.about-body p strong{color:#1D1D1F;font-weight:500}
.about-body p:last-of-type{margin-bottom:28px}
@media(max-width:760px){.about-card{grid-template-columns:1fr;padding:36px 24px;gap:32px;text-align:center}.about-photo{max-width:200px;margin:0 auto}}

/* ================================
   FAQ — light, smooth accordion
================================ */
.faq-wrap{max-width:760px;margin:56px auto 0}
.faq-item{border:none;border-bottom:1px solid rgba(0,0,0,0.10);padding:0;background:transparent;overflow:hidden;transition:border-color var(--dur-base) var(--ease-premium)}
.faq-item[open]{border-bottom-color:rgba(99,91,255,0.24)}
.faq-item summary{
  padding:28px 4px;
  font-size:21px;font-weight:500;letter-spacing:-0.02em;
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  line-height:1.3;color:#1D1D1F;
  transition:color var(--dur-base) var(--ease-premium);
}
.faq-item summary:hover{color:var(--stripe-violet)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:28px;font-weight:300;color:var(--stripe-violet);transition:transform var(--dur-long) var(--ease-premium);flex-shrink:0;line-height:1}
.faq-item[open] summary::after{content:'−'}
.faq-item[open] summary{color:var(--stripe-violet)}
.faq-item .faq-body{padding:0 4px 32px;font-size:16px;color:#424245;line-height:1.55;max-width:680px;letter-spacing:-0.015em;animation:faqOpen var(--dur-long) var(--ease-expo-out)}
.faq-item .faq-body strong{color:#1D1D1F;font-weight:500}
@keyframes faqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ================================
   FINAL CTA — black + MESH + stars
================================ */
.final-cta-wrap{padding:clamp(100px,14vw,180px) 22px;position:relative;overflow:hidden;isolation:isolate;background:#000;color:#fff;z-index:1}
.final-cta-wrap::before{
  content:'';position:absolute;inset:-20%;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, var(--stripe-cyan)   0%, transparent 40%),
    radial-gradient(circle at 75% 70%, var(--stripe-violet) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, var(--stripe-pink)   0%, transparent 35%),
    radial-gradient(circle at 80% 20%, var(--stripe-amber)  0%, transparent 30%);
  filter:blur(80px);opacity:0.55;
  animation:meshFloat var(--dur-gradient) linear infinite;
  will-change:transform;transform:translateZ(0);
}
.final-cta-wrap::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 90% 70% at 50% 50%, transparent 0%, transparent 55%, rgba(0,0,0,0.55) 85%, #000 100%);
}
.final-cta{text-align:center;max-width:900px;margin:0 auto;position:relative;z-index:2}
.final-cta .eyebrow{color:var(--stripe-cyan);margin-bottom:22px}
.final-cta h2{
  font-size:clamp(44px,7vw,88px);
  font-weight:600;letter-spacing:-0.04em;line-height:1.05;
  margin-bottom:28px;color:#fff;
}
.final-cta h2 em{
  font-style:normal;
  background:linear-gradient(90deg, var(--stripe-cyan), var(--stripe-violet), var(--stripe-pink), var(--stripe-cyan));
  background-size:400% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:textShimmer var(--dur-gradient-text) linear infinite;
}
.final-cta p{font-size:clamp(18px,2.2vw,21px);color:rgba(255,255,255,0.82);line-height:1.4;max-width:640px;margin:0 auto 36px;letter-spacing:-0.015em}
.final-cta .big-btn-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.btn-final{
  background:linear-gradient(135deg, var(--stripe-violet) 0%, var(--accent-blue) 100%);
  background-size:200% 100%;background-position:0% 50%;
  color:#fff;
  padding:18px 44px;border-radius:980px;
  font-size:18px;font-weight:500;letter-spacing:-0.02em;
  border:none;cursor:pointer;
  transition:background-position var(--dur-long) var(--ease-premium),box-shadow var(--dur-base) var(--ease-premium),transform var(--dur-base) var(--ease-premium);
  display:inline-flex;align-items:center;gap:8px;
  min-height:56px;line-height:1;
  box-shadow:0 10px 30px rgba(99,91,255,0.35);
  position:relative;overflow:hidden;isolation:isolate;
  animation:btnGlowPulse 3.5s ease-in-out infinite;
}
.btn-final:hover{background-position:100% 50%;box-shadow:0 14px 40px rgba(99,91,255,0.5);transform:translateY(-2px)}
.btn-final .arrow{transition:transform var(--dur-base) var(--ease-premium)}
.btn-final:hover .arrow{transform:translateX(4px)}
/* AUTO Glow Pulse — свечение пульсирует само */
@keyframes btnGlowPulse{
  0%,100%{box-shadow:0 10px 30px rgba(99,91,255,0.35),0 0 0 rgba(17,239,227,0)}
  50%{box-shadow:0 14px 42px rgba(99,91,255,0.55),0 0 30px rgba(17,239,227,0.25)}
}
/* AUTO Shine Sweep on btn-final */
.btn-final::before{
  content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  animation:btnShineSweep 4.5s ease-in-out infinite;
  pointer-events:none;z-index:1;
}
.btn-final > *{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){
  .btn-final{animation:none}
  .btn-final::before{animation:none}
}
.final-micro{font-size:13px;color:rgba(255,255,255,0.55);letter-spacing:0;margin-top:14px;line-height:1.7}
.final-micro .dot{opacity:.5;margin:0 8px}

/* ================================
   FOOTER — minimal dark
================================ */
footer{background:#000;color:rgba(255,255,255,0.55);padding:56px 22px 32px;border-top:0.5px solid rgba(255,255,255,0.08);position:relative;z-index:2}
.footer-inner{max-width:1024px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand{font-size:18px;font-weight:500;color:#fff;letter-spacing:-0.02em;display:inline-flex;align-items:center;gap:8px;margin-bottom:10px}
.footer-desc{font-size:13px;line-height:1.6;color:rgba(255,255,255,0.5);max-width:280px}
.footer-col h5{font-size:12px;font-weight:600;color:#fff;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:14px}
.footer-col a{display:block;font-size:13px;color:rgba(255,255,255,0.55);padding:4px 0;transition:color var(--dur-fast) var(--ease-premium)}
.footer-col a:hover{color:#fff}
.footer-bottom{max-width:1024px;margin:0 auto;padding-top:28px;border-top:0.5px solid rgba(255,255,255,0.08);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:rgba(255,255,255,0.4)}
@media(max-width:760px){.footer-inner{grid-template-columns:1fr 1fr;gap:32px}.footer-brand{font-size:16px}}
@media(max-width:480px){.footer-inner{grid-template-columns:1fr}}

/* ================================
   REVEAL (scroll animation)
================================ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--dur-long) var(--ease-expo-out),transform var(--dur-long) var(--ease-expo-out)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ================================
   PHASE 2 — Flip / Blur-reveal
================================ */

/* ─── 1. FLIP CARD на тарифах (opacity-swap + rotate — надёжный cross-browser) ─── */
.tariff-inner{
  position:relative;
  width:100%;
  min-height:780px;
}
.tariff-face{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  padding:34px 26px;
  border-radius:22px;
  display:flex;
  flex-direction:column;
  overflow:visible;
  transition:opacity 0.5s cubic-bezier(0.4,0,0.2,1),transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.tariff-face-front{
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:var(--shadow-stripe-1);
  opacity:1;
  transform:rotateY(0) scale(1);
  z-index:2;
  pointer-events:auto;
}
.tariff-face-back{
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:var(--shadow-stripe-2);
  opacity:0;
  transform:rotateY(180deg) scale(0.95);
  z-index:1;
  pointer-events:none;
}
.tariff-card.flipped .tariff-face-front{
  opacity:0;
  transform:rotateY(-180deg) scale(0.95);
  pointer-events:none;
  z-index:1;
}
.tariff-card.flipped .tariff-face-back{
  opacity:1;
  transform:rotateY(0) scale(1);
  pointer-events:auto;
  z-index:2;
}
.tariff-card:hover .tariff-face-front{
  box-shadow:var(--shadow-stripe-3);
  border-color:rgba(99,91,255,0.2);
}
.tariff-card.featured .tariff-face-front{
  background:#1D1D1F;
  color:#fff;
  border-color:rgba(99,91,255,0.4);
  box-shadow:0 20px 50px rgba(99,91,255,0.22);
}
.tariff-card.featured .tariff-face-back{
  background:#1D1D1F;
  color:#fff;
  border-color:rgba(99,91,255,0.4);
  box-shadow:0 20px 50px rgba(99,91,255,0.22);
}

/* Подсказка с SVG-иконкой "глаз" */
.tariff-flip-hint{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11px;font-weight:500;letter-spacing:0.04em;
  margin-top:10px;opacity:0.55;text-align:center;
  transition:opacity var(--dur-base) var(--ease-premium);
  pointer-events:none;
}
.tariff-flip-hint svg{width:14px;height:14px;flex-shrink:0;opacity:0.9}
.tariff-card:hover .tariff-flip-hint{opacity:0.9}
.tariff-card:not(.featured) .tariff-flip-hint{color:#6E6E73}
.tariff-card.featured .tariff-flip-hint{color:rgba(255,255,255,0.7)}

/* Задняя сторона — контент */
.tariff-back-title{
  font-size:18px;font-weight:600;letter-spacing:-0.02em;
  margin:0 0 14px;line-height:1.25;padding-right:32px;
}
.tariff-card:not(.featured) .tariff-back-title{color:#1D1D1F}
.tariff-card.featured .tariff-back-title{color:#fff}
.tariff-back-section{margin-bottom:14px}
.tariff-back-section:last-child{margin-bottom:0}
.tariff-back-section h4{
  font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  margin:0 0 6px;
}
.tariff-card:not(.featured) .tariff-back-section h4{color:var(--accent-blue)}
.tariff-card.featured .tariff-back-section h4{color:var(--stripe-cyan)}
.tariff-back-section ul{list-style:none;padding:0;margin:0}
.tariff-back-section li{
  font-size:13px;line-height:1.45;padding:3px 0 3px 16px;
  position:relative;letter-spacing:-0.01em;
}
.tariff-back-section li::before{
  content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;
  background:var(--accent-blue);
}
.tariff-card.featured .tariff-back-section li::before{background:var(--stripe-cyan)}
.tariff-card:not(.featured) .tariff-back-section li{color:#424245}
.tariff-card.featured .tariff-back-section li{color:rgba(255,255,255,0.82)}

/* Крестик закрытия на задней стороне */
.tariff-back-close{
  position:absolute;top:14px;right:14px;
  width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(0,0,0,0.06);color:#1D1D1F;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;padding:0;font-weight:300;
  transition:background var(--dur-base) var(--ease-premium),transform var(--dur-base) var(--ease-premium);
  z-index:4;
}
.tariff-back-close:hover{background:rgba(0,0,0,0.12);transform:rotate(90deg)}
.tariff-card.featured .tariff-back-close{background:rgba(255,255,255,0.1);color:#fff}
.tariff-card.featured .tariff-back-close:hover{background:rgba(255,255,255,0.2)}

/* ─── 3. BLUR REVEAL на заголовках ─── */
.blur-reveal{
  opacity:0.3;filter:blur(8px);
  transform:translateY(12px);
  transition:opacity 1.2s var(--ease-expo-out),filter 1.2s var(--ease-expo-out),transform 1.2s var(--ease-expo-out);
  will-change:filter,opacity,transform;
}
.blur-reveal.visible{opacity:1;filter:blur(0);transform:translateY(0)}

@media(prefers-reduced-motion:reduce){
  .hero::before,.final-cta-wrap::before,.hall-teaser::before{animation:none}
  .hero h1 .glow,.final-cta h2 em{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .niche-ticker{animation:none}
  .tariff-card.featured::before{animation:none}
  .tariff-inner{transition:none}
  .case-card::after,.reason-card::after,.step-card::after,.bento-card::after{display:none}
  .blur-reveal{opacity:1;filter:none;transform:none;transition:none}
}
</style>
<style>
  @media (max-width: 860px) {
    .value-anchor-grid { grid-template-columns: 1fr !important; }
  }
</style>
<style>
  @media (max-width: 540px) {
    .timeline-list .reason-card {
      grid-template-columns: 1fr !important;
      gap: 8px !important;
    }
  }