:root{
      --bg:#f8fafc;
      --paper:#ffffff;
      --ink:#0d1321;
      --muted:#697386;
      --line:#e5e9f0;
      --violet:#7c5cff;
      --violet-2:#a78bfa;
      --cyan:#49c6e5;
      --mint:#91f2d0;
      --peach:#ffb38a;
      --pink:#ff8fd8;
      --radius:28px;
      --shadow:0 24px 70px rgba(22,34,61,.10);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 10% 0%, rgba(124,92,255,.09), transparent 28%),
        radial-gradient(circle at 95% 12%, rgba(73,198,229,.10), transparent 25%),
        var(--bg);
      color:var(--ink);
      line-height:1.5;
      overflow-x:hidden;
    }

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    .wrap{width:min(1180px, calc(100% - 32px));margin:auto}
    .eyebrow{
      font-size:13px;
      text-transform:uppercase;
      letter-spacing:.18em;
      font-weight:900;
      color:var(--violet);
    }

    header{
      position:sticky;
      top:0;
      z-index:100;
      background:rgba(248,250,252,.78);
      backdrop-filter:blur(20px);
      border-bottom:1px solid rgba(13,19,33,.06);
    }

    .nav{
      min-height:76px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
    }

    .logo{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:950;
      font-size:22px;
      letter-spacing:-.05em;
    }

    .logo-dot{
      width:14px;
      height:14px;
      border-radius:50%;
      background:linear-gradient(135deg,var(--violet),var(--cyan));
      box-shadow:0 0 0 7px rgba(124,92,255,.10);
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap:28px;
      font-size:14px;
      font-weight:750;
    }

    .nav-cta{
      padding:12px 18px;
      border-radius:999px;
      background:var(--ink);
      color:#fff;
    }

    .hero{
      padding:82px 0 44px;
      position:relative;
    }

    .hero-grid{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:54px;
      align-items:center;
    }

    h1{
      font-size:clamp(48px,7vw,92px);
      line-height:.92;
      letter-spacing:-.07em;
      margin:18px 0 24px;
      max-width:760px;
    }

    .gradient-text{
      background:linear-gradient(90deg,var(--violet),var(--cyan),var(--pink));
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
      background-size:200% auto;
      animation:gradientMove 7s linear infinite;
    }

    .hero-copy{
      font-size:20px;
      color:var(--muted);
      max-width:690px;
    }

    .hero-actions{
      margin-top:30px;
      display:flex;
      flex-wrap:wrap;
      gap:14px;
    }

    .btn{
      min-height:54px;
      padding:0 23px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-weight:850;
      border:1px solid var(--ink);
      transition:.25s ease;
    }

    .btn:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(13,19,33,.12)}
    .btn-primary{
      background:linear-gradient(135deg,var(--violet),#5f8cff);
      color:#fff;
      border-color:transparent;
    }

    .btn-secondary{background:rgba(255,255,255,.75)}
    .hero-note{
      margin-top:20px;
      color:var(--muted);
      font-size:14px;
    }

    .hero-visual{
      position:relative;
      min-height:610px;
      border-radius:38px;
      background:
        radial-gradient(circle at 20% 15%, rgba(255,255,255,.88), transparent 22%),
        linear-gradient(145deg,#f1edff 0%,#e8f8ff 48%,#fff1f8 100%);
      border:1px solid rgba(124,92,255,.12);
      box-shadow:var(--shadow);
      overflow:hidden;
    }

    .orb{
      position:absolute;
      border-radius:50%;
      filter:blur(2px);
      opacity:.8;
      animation:float 6s ease-in-out infinite;
    }

    .orb.a{width:180px;height:180px;background:rgba(124,92,255,.20);top:-30px;right:40px}
    .orb.b{width:140px;height:140px;background:rgba(73,198,229,.22);bottom:40px;left:-25px;animation-delay:-2s}
    .orb.c{width:95px;height:95px;background:rgba(255,143,216,.20);right:45px;bottom:70px;animation-delay:-4s}

    .ai-card{
      position:absolute;
      left:50%;
      top:50%;
      width:390px;
      height:470px;
      transform:translate(-50%,-50%);
      background:rgba(255,255,255,.72);
      backdrop-filter:blur(20px);
      border:1px solid rgba(255,255,255,.9);
      border-radius:32px;
      box-shadow:0 28px 70px rgba(64,77,108,.18);
      padding:26px;
      animation:cardFloat 7s ease-in-out infinite;
    }

    .ai-bar{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:24px;
      font-size:13px;
      font-weight:800;
      color:var(--muted);
    }

    .ai-pill{
      padding:8px 12px;
      border-radius:999px;
      background:#eef0ff;
      color:var(--violet);
    }

    .mock-scene{
      height:300px;
      border-radius:24px;
      background:linear-gradient(150deg,#252a49,#5f4ab8 58%,#ff8fd8);
      position:relative;
      overflow:hidden;
    }

    .pack{
      position:absolute;
      width:165px;
      height:240px;
      border-radius:17px;
      padding:20px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      box-shadow:0 22px 48px rgba(0,0,0,.22);
      font-weight:900;
    }

    .pack.one{
      left:45px;top:30px;transform:rotate(-9deg);
      background:linear-gradient(160deg,#fff3cb,#ffba55);
      color:#4a2e18;
    }

    .pack.two{
      right:38px;top:48px;transform:rotate(8deg);
      background:linear-gradient(160deg,#dff9f0,#66ddb7);
      color:#173f32;
    }

    .pack-title{font-size:24px;letter-spacing:-.06em}
    .pack-circle{
      width:70px;height:70px;border-radius:50%;
      display:grid;place-items:center;
      background:rgba(255,255,255,.45);
      margin-left:auto;
      font-size:18px;
    }

    .ai-footer{
      margin-top:18px;
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:center;
    }

    .ai-footer strong{font-size:18px}
    .ai-footer span{color:var(--muted);font-size:13px}

    .trust{
      padding:28px 0 0;
    }

    .trust-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
    }

    .trust-item{
      background:rgba(255,255,255,.75);
      border:1px solid var(--line);
      border-radius:22px;
      padding:23px;
    }

    .trust-item strong{
      display:block;
      font-size:30px;
      letter-spacing:-.05em;
      margin-bottom:5px;
    }

    .trust-item span{color:var(--muted);font-size:14px}

    section{padding:92px 0}
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:34px;
      margin-bottom:36px;
    }

    h2{
      font-size:clamp(38px,5vw,66px);
      line-height:.98;
      letter-spacing:-.06em;
      margin:10px 0 0;
      max-width:820px;
    }

    .section-intro{
      max-width:490px;
      color:var(--muted);
      font-size:17px;
    }

    .service-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:22px;
    }

    .main-service,.express-service{
      border-radius:32px;
      padding:34px;
      min-height:430px;
      position:relative;
      overflow:hidden;
      border:1px solid var(--line);
    }

    .main-service{
      background:var(--paper);
    }

    .express-service{
      background:linear-gradient(145deg,#f4f0ff 0%,#ebfbff 55%,#fff4f8 100%);
      border-color:rgba(124,92,255,.16);
    }

    .service-label{
      display:inline-flex;
      align-items:center;
      gap:9px;
      border-radius:999px;
      padding:9px 13px;
      background:#f4f6fa;
      font-size:12px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.08em;
    }

    .express-service .service-label{
      background:#fff;
      color:var(--violet);
      box-shadow:0 10px 24px rgba(84,74,156,.08);
    }

    .main-service h3,.express-service h3{
      font-size:42px;
      line-height:1;
      letter-spacing:-.055em;
      margin:52px 0 16px;
      max-width:540px;
    }

    .main-service p,.express-service p{
      color:var(--muted);
      font-size:17px;
      max-width:560px;
    }

    .service-list{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:10px 18px;
      margin-top:28px;
    }

    .service-list div{
      padding:12px 0;
      border-bottom:1px solid var(--line);
      font-weight:750;
    }

    .price{
      position:absolute;
      right:28px;
      top:28px;
      font-size:13px;
      font-weight:900;
      color:var(--muted);
    }

    .price strong{
      display:block;
      color:var(--ink);
      font-size:26px;
      letter-spacing:-.04em;
    }

    .comparison{
      display:grid;
      grid-template-columns:1fr 84px 1fr;
      align-items:stretch;
      gap:18px;
    }

    .compare-card{
      background:var(--paper);
      border:1px solid var(--line);
      border-radius:28px;
      padding:28px;
      min-height:380px;
    }

    .compare-card.after{
      box-shadow:var(--shadow);
      border-color:rgba(124,92,255,.18);
    }

    .compare-title{
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:center;
      margin-bottom:24px;
    }

    .compare-title h3{margin:0;font-size:28px;letter-spacing:-.04em}
    .badge{
      font-size:12px;
      font-weight:900;
      padding:8px 11px;
      border-radius:999px;
      background:#f2f4f8;
      color:var(--muted);
    }

    .after .badge{background:#efeaff;color:var(--violet)}

    .compare-visual{
      height:230px;
      border-radius:22px;
      display:grid;
      place-items:center;
      overflow:hidden;
      position:relative;
    }

    .before .compare-visual{
      background:linear-gradient(145deg,#453b70,#c768b7);
    }

    .after .compare-visual{
      background:linear-gradient(145deg,#edf4ff,#e8fff8);
    }

    .rough-pack,.clean-pack{
      width:150px;
      height:200px;
      border-radius:15px;
      padding:18px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      box-shadow:0 22px 40px rgba(0,0,0,.18);
    }

    .rough-pack{
      background:linear-gradient(160deg,#f7c15f,#f2787f);
      transform:rotate(-8deg);
      color:#3d241d;
      filter:saturate(1.2);
    }

    .clean-pack{
      background:#ffffff;
      color:#16304a;
      border:1px solid #cdd7e8;
    }

    .rough-pack .scribble{
      font-size:24px;
      font-weight:900;
      letter-spacing:-.08em;
      transform:skew(-8deg);
    }

    .clean-pack .scribble{
      font-size:24px;
      font-weight:900;
      letter-spacing:-.05em;
    }

    .arrow{
      display:grid;
      place-items:center;
      font-size:34px;
      color:var(--violet);
      font-weight:900;
    }

    .works{
      display:grid;
      grid-template-columns:repeat(12,1fr);
      gap:22px;
    }

    .work{
      background:var(--paper);
      border:1px solid var(--line);
      border-radius:28px;
      overflow:hidden;
    }

    .work.large{grid-column:span 7}
    .work.small{grid-column:span 5}

    .work-image{
      min-height:360px;
      position:relative;
      overflow:hidden;
    }

    .w1{background:linear-gradient(145deg,#31221b,#b9774e)}
    .w2{background:linear-gradient(145deg,#dff6ed,#69b68f)}
    .w3{background:linear-gradient(145deg,#dce7ff,#7597d8)}
    .w4{background:linear-gradient(145deg,#ffe9ef,#d9829d)}

    .work-pack{
      position:absolute;
      left:50%;top:50%;
      transform:translate(-50%,-50%) rotate(-6deg);
      width:190px;height:270px;
      border-radius:17px;
      background:#fff;
      padding:23px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      box-shadow:0 25px 60px rgba(0,0,0,.24);
    }

    .work-pack.alt{transform:translate(-50%,-50%) rotate(8deg)}
    .work-pack strong{font-size:28px;letter-spacing:-.06em}
    .work-pack span{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}

    .work-info{
      padding:23px 25px 26px;
      display:flex;
      justify-content:space-between;
      gap:20px;
    }

    .work-info h3{margin:0 0 5px;font-size:24px;letter-spacing:-.04em}
    .work-info p{margin:0;color:var(--muted)}
    .work-tag{font-size:12px;font-weight:900;color:var(--violet);text-transform:uppercase;letter-spacing:.08em}

    .process{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
      counter-reset:step;
    }

    .step{
      background:var(--paper);
      border:1px solid var(--line);
      border-radius:24px;
      padding:25px;
      min-height:250px;
      transition:.25s ease;
    }

    .step:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
    .step::before{
      counter-increment:step;
      content:"0" counter(step);
      display:block;
      font-size:13px;
      font-weight:900;
      color:var(--violet);
      margin-bottom:48px;
    }

    .step h3{font-size:24px;letter-spacing:-.04em;margin:0 0 10px}
    .step p{margin:0;color:var(--muted)}

    .about{
      background:
        radial-gradient(circle at 20% 20%,rgba(255,255,255,.22),transparent 25%),
        linear-gradient(135deg,#6a5cff,#4f89ff 55%,#54d4d3);
      color:#fff;
      border-radius:38px;
      padding:58px;
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:56px;
    }

    .about h2{color:#fff}
    .about p{color:rgba(255,255,255,.82);font-size:18px}
    .about-list{display:grid;gap:12px;margin-top:24px}
    .about-item{
      border:1px solid rgba(255,255,255,.23);
      background:rgba(255,255,255,.09);
      border-radius:18px;
      padding:17px 19px;
      font-weight:760;
      backdrop-filter:blur(10px);
    }

    .cta{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:34px;
      align-items:center;
      background:var(--paper);
      border:1px solid var(--line);
      border-radius:34px;
      padding:50px;
      box-shadow:var(--shadow);
    }

    .cta p{color:var(--muted);font-size:17px;max-width:620px}
    form{
      display:grid;
      gap:12px;
      background:#f8faff;
      border-radius:24px;
      padding:22px;
    }

    input,textarea{
      width:100%;
      border:1px solid var(--line);
      border-radius:14px;
      padding:15px 16px;
      background:#fff;
      outline:none;
    }

    input:focus,textarea:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(124,92,255,.09)}
    textarea{min-height:110px;resize:vertical}
    form button{
      border:0;
      border-radius:14px;
      min-height:52px;
      font-weight:900;
      color:#fff;
      background:linear-gradient(135deg,var(--violet),#5f8cff);
      cursor:pointer;
    }

    footer{
      padding:40px 0 48px;
      color:var(--muted);
      font-size:14px;
    }

    .footer-grid{
      display:flex;
      justify-content:space-between;
      gap:22px;
      flex-wrap:wrap;
    }

    .reveal{
      opacity:0;
      transform:translateY(24px);
      transition:opacity .7s ease, transform .7s ease;
    }

    .reveal.visible{
      opacity:1;
      transform:none;
    }

    @keyframes float{
      0%,100%{transform:translateY(0)}
      50%{transform:translateY(-16px)}
    }

    @keyframes cardFloat{
      0%,100%{transform:translate(-50%,-50%) rotate(0)}
      50%{transform:translate(-50%,-53%) rotate(.6deg)}
    }

    @keyframes gradientMove{
      to{background-position:200% center}
    }

    @media(max-width:920px){
      .hero-grid,.service-grid,.about,.cta{grid-template-columns:1fr}
      .trust-grid,.process{grid-template-columns:repeat(2,1fr)}
      .comparison{grid-template-columns:1fr}
      .arrow{transform:rotate(90deg)}
      .work.large,.work.small{grid-column:span 12}
      .hero-visual{min-height:560px}
      .nav-links a:not(.nav-cta){display:none}
    }

    @media(max-width:640px){
      .wrap{width:min(100% - 20px,1180px)}
      .hero{padding-top:46px}
      .hero-copy{font-size:17px}
      .hero-visual{min-height:470px}
      .ai-card{width:calc(100% - 34px);height:405px;padding:18px}
      .mock-scene{height:245px}
      .pack{width:125px;height:185px;padding:15px}
      .pack.one{left:24px;top:32px}
      .pack.two{right:22px;top:48px}
      .pack-title{font-size:19px}
      .pack-circle{width:52px;height:52px;font-size:14px}
      .trust-grid,.process,.service-list{grid-template-columns:1fr}
      section{padding:64px 0}
      .section-head{display:block}
      .section-intro{margin-top:16px}
      .main-service,.express-service{padding:24px;min-height:auto}
      .main-service h3,.express-service h3{font-size:34px;margin-top:42px}
      .price{position:static;margin-top:18px}
      .about,.cta{padding:30px 22px;border-radius:26px}
      .work-image{min-height:310px}
      h1{font-size:53px}
    }


/* Image placeholders for portfolio replacement */
.image-placeholder{
  background:
    linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    #ffffff !important;
  border:1px solid rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
}

.placeholder-inner{
  position:relative;
  z-index:1;
  text-align:center;
  padding:24px;
  max-width:340px;
  color:#fff;
}

.placeholder-inner strong{
  display:block;
  font-size:22px;
  line-height:1.15;
  letter-spacing:-.035em;
  margin-top:10px;
}

.placeholder-inner small{
  display:block;
  color:rgba(255,255,255,.54);
  margin-top:10px;
}

.placeholder-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:900;
  color:#9cc7ff;
}

.hero-placeholder{
  min-height:610px;
}

.compare-visual.image-placeholder{
  background:#151922 !important;
}

.work-image.image-placeholder{
  min-height:360px;
}


/* Services overview */
.overview-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.overview-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:30px;
  padding:34px;
  box-shadow:0 18px 50px rgba(22,34,61,.06);
}

.overview-ai{
  background:linear-gradient(145deg,#f4f0ff 0%,#ecfbff 55%,#fff4f8 100%);
  border-color:rgba(124,92,255,.16);
}

.overview-card h3{
  font-size:38px;
  line-height:1;
  letter-spacing:-.05em;
  margin:34px 0 16px;
}

.overview-card p{
  color:var(--muted);
  font-size:17px;
}

.overview-list{
  margin:24px 0 28px;
  padding:0;
  list-style:none;
  display:grid;
  gap:11px;
}

.overview-list li{
  padding-bottom:11px;
  border-bottom:1px solid var(--line);
  font-weight:750;
}

.text-link{
  font-weight:900;
  color:var(--violet);
}

/* Messenger buttons in header */
.messenger-link{
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  border:1px solid var(--line);
  background:rgba(255,255,255,.78);
}

.whatsapp-link{color:#128c4a}
.telegram-link{color:#168acd}

/* Contact section */
.contact-grid{
  display:grid;
  gap:22px;
}

.contact-options{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.contact-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  padding:20px;
  display:flex;
  align-items:center;
  gap:14px;
  transition:.25s ease;
}

.contact-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
}

.contact-icon{
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  font-weight:950;
  color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--cyan));
}

.contact-card strong{
  display:block;
  font-size:18px;
}

.contact-card small{
  color:var(--muted);
}

.contact-arrow{
  margin-left:auto;
  color:var(--violet);
  font-size:22px;
  font-weight:900;
}

.contact-grid .cta{
  margin-top:0;
}

@media(max-width:1000px){
  .nav-links{
    gap:14px;
  }
  .messenger-link{
    display:none;
  }
}

@media(max-width:920px){
  .overview-grid,
  .contact-options{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .overview-card{
    padding:24px;
  }
  .overview-card h3{
    font-size:32px;
  }
}


/* ===== PORTFOLIO V2 ===== */
.portfolio-grid{columns:2;column-gap:12px}
.portfolio-card{position:relative;margin:0 0 12px;break-inside:avoid;border-radius:20px;overflow:hidden;background:#151922;min-height:280px}
.portfolio-card img{width:100%;height:auto;min-height:280px;object-fit:cover;transition:transform .45s ease}
.portfolio-card:hover img{transform:scale(1.035)}
.portfolio-overlay{position:absolute;left:0;right:0;bottom:0;min-height:118px;padding:44px 22px 20px;display:flex;align-items:flex-end;background:linear-gradient(to top,rgba(5,8,14,.9),rgba(5,8,14,.35),transparent);color:#fff}
.portfolio-overlay h3{margin:0;font-size:24px;letter-spacing:-.04em}
.portfolio-fallback{display:none;min-height:340px;place-items:center;color:rgba(255,255,255,.62);text-align:center;padding:20px}
.portfolio-card.image-missing .portfolio-fallback{display:grid}
.portfolio-actions{display:flex;justify-content:center;margin-top:28px}
.hero-real-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
@media(max-width:640px){.portfolio-grid{columns:1}.portfolio-card{margin-bottom:10px;border-radius:17px}}

/* =========================================================
   FORMA FIX: ПРОЗРАЧНЫЕ ИЗОБРАЖЕНИЯ И PNG-КАРУСЕЛЬ
========================================================= */

/* Общая заглушка: светлая только пока изображения нет */
.image-placeholder{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:rgba(124,92,255,.045) !important;
  border:1px dashed rgba(124,92,255,.24) !important;
}
.image-placeholder.has-image{
  background:transparent !important;
  border-color:transparent !important;
}
.image-placeholder.has-image .placeholder-inner{display:none}
.upload-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:transparent;
}

/* Портфолио: никакого темного фона после загрузки */
.portfolio-card{
  background:rgba(124,92,255,.045) !important;
}
.portfolio-card.has-image{
  background:transparent !important;
}
.portfolio-card.image-missing{
  background:rgba(124,92,255,.055) !important;
  border:1px dashed rgba(124,92,255,.22);
}
.portfolio-card img{
  display:block;
  background:transparent;
}
.portfolio-fallback{
  color:var(--muted) !important;
}

/* =========================================================
   HERO PRODUCT SHOWCASE
   Главный продукт расположен впереди, остальные — позади.
========================================================= */

.hero-orbit-shell{
  min-height:610px;
  position:relative;
  overflow:visible;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0;
}

.hero-orbit-stage{
  position:absolute;
  inset:-38% -18% -2% -8%;
  overflow:visible;
  perspective:1200px;
}

.hero-orbit-ring{
  position:absolute;
  inset:0;
  overflow:visible;
}

.hero-orbit-stage::before{
  content:"";
  position:absolute;
  left:52%;
  top:55%;
  width:66%;
  height:64%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(
    ellipse at center,
    rgba(124,92,255,.12) 0%,
    rgba(73,198,229,.06) 38%,
    rgba(255,255,255,0) 72%
  );
  filter:blur(18px);
  pointer-events:none;
  transition:background .8s ease;
}

.hero-product{
  position:absolute;
  left:50%;
  top:50%;
  width:34%;
  height:62%;
  display:grid;
  place-items:center;
  transform:
    translate(-50%,-50%)
    translate(var(--x),var(--y))
    scale(var(--scale))
    rotate(var(--rotate));
  transform-origin:center bottom;
  opacity:var(--opacity);
  z-index:var(--z);
  transition:
    transform 1.05s cubic-bezier(.2,.78,.2,1),
    opacity .8s ease,
    filter .8s ease;
  filter:
    blur(var(--blur))
    drop-shadow(0 22px 24px rgba(28,36,70,var(--shadow)));
  will-change:transform,opacity;
}

.hero-product img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:transparent;
  user-select:none;
  -webkit-user-drag:none;
}

.hero-product.is-main{
  width:47%;
  height:80%;
}

.hero-product.is-entering{
  animation:formaPackEntrance .85s cubic-bezier(.18,.82,.24,1) both;
  animation-delay:var(--delay);
}

.hero-orbit-empty{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--ink);
  z-index:20;
}

.hero-orbit-empty strong{
  display:block;
  margin-top:8px;
}

@keyframes formaPackEntrance{
  from{
    opacity:0;
    transform:
      translate(-50%,-50%)
      translate(calc(var(--x) * 1.15),calc(var(--y) - 28px))
      scale(calc(var(--scale) * .82))
      rotate(var(--rotate));
  }
  to{
    opacity:var(--opacity);
    transform:
      translate(-50%,-50%)
      translate(var(--x),var(--y))
      scale(var(--scale))
      rotate(var(--rotate));
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-product{
    transition:none;
    animation:none !important;
  }
}

@media(max-width:920px){
  .hero-orbit-shell{
    min-height:540px;
  }
  .hero-orbit-stage{
    inset:-2% -4% -4% -4%;
  }
  .hero-product{
    width:29%;
    height:50%;
  }
  .hero-product.is-main{
    width:38%;
    height:66%;
  }
}

@media(max-width:640px){
  .hero-orbit-shell{
    min-height:430px;
  }

  .hero-orbit-stage{
    inset:0 -4% -3% -4%;
  }

  .hero-product{
    width:31%;
    height:46%;
  }

  .hero-product.is-main{
    width:43%;
    height:64%;
  }
}

/* Оранжевый анимированный градиент */
.gradient-ai{
  background:linear-gradient(
    90deg,
    #FFE7B3,
    #FFC34D,
    #FF9A2F,
    #FF6B00,
    #FFC34D,
    #FFE7B3
  );

  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;

  background-size:300% auto;
  animation:gradientMove 7s linear infinite;
}