/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; width:100%; max-width:100%; overflow-x:hidden; }
body,a,div,footer,header,html,img,li,strong,ul{ margin:0; padding:0; border:0; font:inherit; }
ul{ list-style:none; }
footer,header{ display:block; }
img,svg,video,canvas{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; outline:none; }
a:hover,a:focus{ text-decoration:none; }

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root{
  /* Brand Gradient */
  --it-g1:#ff2d7a;
  --it-g2:#ff8a00;
  --it-g1d:#e0005e;
  --it-g2d:#e67800;

  /* Layout */
  --header-gap:0px;

  /* UI */
  --bg:#f5f6f7;
  --panel:#ECEFF3;
  --text:#111;

  --util-h:36px;    /* Utilitybar */
  --main-h:64px;    /* Mainbar    */
  --util-offset: var(--util-h);

  /* Safe-Area mobil */
  --pad-mobile: max(16px, env(safe-area-inset-left));
  --pad-mobile-r: max(16px, env(safe-area-inset-right));

  /* Mega (Desktop) */
  --mega-width:1160px;
  --mega-gutter:24px;
  --mega-surface:#151619;
  --mega-border:rgba(255,255,255,.06);
  --mega-shadow:0 22px 50px rgba(0,0,0,.40);
  --mega-gap:6px;

  /* Drawer */
  --drawer-overlay: rgba(0,0,0,.45);
  --drawer-surface:#0D1220;
  --drawer-w:86vw;

  /* Deal Ribbon */
  --deal-dark-1:#0d0e11;
  --deal-dark-2:#1b1c20;

  /* HERO Banner */
  --hero-desktop:none;
  --hero-mobile:none;
  --hero-x:0%;
  --hero-zoom-desktop:auto;
  --hero-zoom-mobile:auto;
}

body{
  font-family:Lato,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.6; color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  padding-top: calc(var(--util-offset) + var(--main-h));
  transition:padding-top .35s ease;
}

.container{
  max-width:1200px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.u-end{ justify-content:flex-end; } .u-between{ justify-content:space-between; }
.gap-18{ gap:18px; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (max-width:980px){
  .container{ padding-left:var(--pad-mobile); padding-right:var(--pad-mobile-r); }
}

/* ==========================================================================
   HEADER (Utilitybar + Mainbar)
   ========================================================================== */
.site-header{ position:relative; z-index:10000; }

/* Utilitybar */
.utilitybar{
  position:fixed; inset:0 0 auto; height:var(--util-h);
  background:#0D1220; color:#ddd; font-size:14px; z-index:10020;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:transform .32s ease, opacity .32s ease;
  will-change:transform;
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
}
.utilitybar .utilitybar-inner{
  position:relative; top:5px; display:flex; gap:18px; align-items:center; justify-content:flex-end;
}
.util-link{ color:#fff; opacity:.9; }
.util-link:hover{ opacity:1; text-decoration:underline; }

/* Sprache */
.lang{ position:relative; }
.lang-switch{ background:transparent; border:0; color:#fff; cursor:pointer; border-radius:12px; }
.lang-menu{
  display:none; position:absolute; right:0; top:calc(100% + 6px);
  background:#111; color:#fff; border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:6px 0; min-width:110px;
}
.lang-menu li{ padding:8px 14px; cursor:pointer; }
.lang-menu li:hover{ background:rgba(255,255,255,.08); }
.lang:focus-within .lang-menu{ display:block; }

/* Mainbar (unter Utilitybar) */
.mainbar{
  position:fixed; left:0; right:0; top:var(--util-offset); height:var(--main-h);
  background:#0D1220; color:#fff; box-shadow:0 6px 20px rgba(0,0,0,.16); z-index:10010;
  transition:top .32s ease, box-shadow .25s ease;
  will-change:top;
}
.mainbar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:rgba(255,255,255,.12);
  box-shadow:0 12px 20px rgba(0,0,0,.22);
  opacity:.9;
  pointer-events:none;
}
.site-header.utility-collapsed .utilitybar{
  transform:translateY(-120%);
  opacity:0;
  pointer-events:none;
  visibility:hidden;
}
.site-header.utility-collapsed .mainbar{
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.brand{ display:flex; align-items:center; height:var(--main-h); }
.brand img{ height:48px; position:relative; top:2px; transition:transform .2s ease; }

/* Desktop: Logo etwas nach rechts */
@media (min-width:981px){
  .brand{ margin-left:30px; }
}

/* Navigation */
.mainnav{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:28px; margin:0 auto; text-align:center; }
.site-header a,.mainnav .mega-toggle{ color:#fff; opacity:.92; }
.site-header a:hover,.mainnav .mega-toggle:hover{ opacity:1; }
.mega-toggle{ background:transparent; border:0; font:inherit; cursor:pointer; color:#fff; }
.main-actions{ flex:0 0 auto; display:flex; align-items:center; gap:14px; }

/* Kleine UI-Buttons / Icons */
.icon-btn{ background:transparent; border:0; color:#fff; cursor:pointer; opacity:.92; }
.icon-btn:hover{ opacity:1; }

/* Burger */
.burger{ display:none; width:44px; height:44px; background:transparent; border:0; cursor:pointer; }
.burger span{ display:block; width:24px; height:2px; margin:6px auto; background:#fff; transition:.25s; }
.burger.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* Handy */
@media (max-width:767px){
  :root{ --main-h:84px; }
  .brand{ height:var(--main-h); margin-left:var(--pad-mobile); }
  .brand img{ height:44px; top:-4px; display:block; }
}

/* Utilitybar auf Mobile komplett ausblenden */
@media (max-width:980px){
  :root{ --util-h:0px; --util-offset:0px; }
  .utilitybar{ display:none !important; }
  .burger{ display:block; }
  .mainnav{ display:none; }
}

/* Header-CTA kompakter (Desktop) */
@media (min-width:981px){
  .main-actions .cta{
    background:#F07F00;
    font-size:14px;
    padding:10px 16px;
    line-height:1;
    border-radius:0;
    box-shadow:none;
  }
  .main-actions .cta:hover{ filter:brightness(.95); transform:none; }
}

/* Pfeile in der Mainbar */
.mainnav a.has-caret,
.mainnav .mega-toggle{
  display:inline-flex; align-items:center; gap:6px; position:relative;
}
.mainnav a.has-caret::after,
.mainnav .mega-toggle::after{
  content:""; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor;
  opacity:.9; position:relative; top:-1px; transition:transform .2s ease, opacity .2s ease;
}
.mainnav a.has-caret:hover::after,
.mainnav .mega-toggle:hover::after{ opacity:1; }
.mainnav a.has-caret[aria-expanded="true"]::after,
.mainnav .mega-toggle[aria-expanded="true"]::after{ transform:rotate(180deg); }
.mainnav .mega-toggle{ padding-right:2px; }

/* ==========================================================================
   CTA / Buttons
   ========================================================================== */
.cta,
.btn-gradient,
.deal-cta,
.newsletter button{
  display:inline-block; padding:12px 20px; border-radius:12px;
  font-family:"Inter",sans-serif; font-weight:600; font-size:15px;
  color:#fff; text-decoration:none;
  background:linear-gradient(90deg,#FF6A00 0%,#FFA200 100%);
  box-shadow:0 6px 15px rgba(0,0,0,0.25);
  transition:transform .15s ease, filter .2s ease, box-shadow .2s ease, background-position .2s ease;
}
.cta:hover,.btn-gradient:hover,.deal-cta:hover,.newsletter button:hover{
  background-position:100% 0; transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}
.cta:active,.btn-gradient:active,.deal-cta:active,.newsletter button:active{
  transform:translateY(0); box-shadow:0 6px 16px rgba(0,0,0,.18);
}

/* Kleine UI-Buttons */
.drawer-close,.t-dot{ border-radius:12px; }

/* ==========================================================================
   DRAWER (Mobile Navigation)
   ========================================================================== */
.drawer-overlay{
  position:fixed; inset:0; background:var(--drawer-overlay); z-index:10040;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.drawer-overlay.is-visible{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; top:0; right:0; bottom:0; width:var(--drawer-w); max-width:460px;
  background:var(--drawer-surface); color:#fff; z-index:10050;
  transform:translateX(100%); transition:transform .28s ease;
  display:flex; flex-direction:column; box-shadow:-22px 0 50px rgba(0,0,0,.28); visibility:hidden;
  will-change:transform; touch-action:pan-y;
}
.drawer[aria-hidden="false"]{ transform:translateX(0); visibility:visible; }
.drawer[aria-hidden="true"]{ visibility:hidden; }

.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid rgba(255,255,255,.12); }
.drawer-title{ font-weight:900; color:#fff; }
.drawer-close{ width:36px; height:36px; border:1px solid rgba(255,255,255,.16); background:#131417; color:#fff; cursor:pointer; }

.drawer-nav{ padding:6px 6px 20px; overflow:auto; }
.drawer-item{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px; border:0; background:transparent; cursor:pointer; font-weight:800; font-size:16px;
  color:#fff; border-bottom:1px solid rgba(255,255,255,.08);
}
.drawer-item .chev{ opacity:.8; transition:transform .2s ease; }
.drawer-item[aria-expanded="true"] .chev{ transform:rotate(90deg); }
.drawer-item:hover{ background:rgba(255,255,255,.06); }
.drawer-sub{ padding-left:0; background:#0D1220; }
.drawer-sub li a{
  display:block; color:#fff; font-weight:700; font-size:15px;
  padding:12px 18px; border-bottom:1px solid rgba(255,255,255,.06);
}
.drawer-sub li a:hover{ background:rgba(255,255,255,.05); }
.drawer-sub .drawer-item{ background:#0D1220; padding-left:16px; font-size:15px; }
.drawer-sub .drawer-sub{ background:#0D1220; }
.drawer-sub .drawer-sub li a{ padding-left:28px; }

body.drawer-open{ overflow:hidden; }

/* Swipe-Hint / Teach / Badge (nur mobil sichtbar) */
.swipe-hint,
.swipe-teach,
.swipe-badge{ position:absolute; z-index:2; }
.swipe-hint{
  left:-12px; top:40%; transform:translateY(-50%);
  width:12px; height:64px; border-radius:8px; background:#111827;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 6px 18px rgba(0,0,0,.3);
  display:grid; place-items:center; opacity:.9;
}
.swipe-hint::before{ content:"››"; font-weight:900; color:#cbd5e1; letter-spacing:-2px; animation:swipeNudge 1.25s ease-in-out infinite; }

.swipe-teach{ left:-56px; top:40%; transform:translateY(-50%); width:56px; height:76px; pointer-events:none; opacity:.96; }
.swipe-teach .bubble{
  position:absolute; left:0; top:16px; width:48px; height:44px; border-radius:14px;
  background:#111827; border:1px solid rgba(255,255,255,.10); box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.swipe-teach .finger{
  position:absolute; left:10px; top:28px; width:12px; height:12px; border-radius:50%;
  background:linear-gradient(135deg,var(--it-g1),var(--it-g2));
  box-shadow:0 0 0 6px rgba(255,255,255,.06), 0 8px 16px rgba(0,0,0,.35);
  animation:swipeFinger 1.2s ease-in-out infinite;
}
.swipe-teach .chevs{ position:absolute; right:-2px; top:28px; color:#cbd5e1; font-weight:900; text-shadow:0 2px 8px rgba(0,0,0,.4); animation:chevsPulse 1.2s ease-in-out infinite; }
.swipe-teach .chevs::before{ content:"››"; letter-spacing:-2px; }
.swipe-teach .hint{ position:absolute; left:0; bottom:-6px; width:100%; font-size:10px; text-align:center; color:#cbd5e1; opacity:.85; }

.swipe-badge{
  left:-10px; top:44%; transform:translateY(-50%); display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; background:#111827; color:#e5e7eb; border:1px solid rgba(255,255,255,.12);
  border-radius:999px; box-shadow:0 10px 24px rgba(0,0,0,.35); pointer-events:none; opacity:0; animation:sbFade 2.2s ease forwards;
}
.swipe-badge .sb-chip{ width:18px; height:18px; border-radius:999px; background:linear-gradient(135deg,var(--it-g1),var(--it-g2)); box-shadow:0 0 0 4px rgba(255,255,255,.06), 0 6px 12px rgba(0,0,0,.28); }
.swipe-badge .sb-text{ font-weight:800; font-size:13px; letter-spacing:.2px; white-space:nowrap; }
.swipe-badge .sb-chev{ font-weight:900; letter-spacing:-2px; color:#cbd5e1; animation:sbChev 1.0s ease-in-out infinite; }

/* Drawer Drag State (einmalig deklariert) */
.drawer.is-dragging,
.drawer-overlay.is-dragging{ transition:none !important; }

@media (min-width:981px){
  .drawer, .drawer-overlay, .swipe-hint, .swipe-teach, .swipe-badge{ display:none !important; }
}

/* Animations */
@keyframes swipeNudge{ 0%{transform:translateX(0);opacity:.8;} 50%{transform:translateX(-4px);opacity:1;} 100%{transform:translateX(0);opacity:.8;} }
@keyframes swipeFinger{ 0%{transform:translateX(0);opacity:.9;} 55%{transform:translateX(22px);opacity:1;} 100%{transform:translateX(0);opacity:.9;} }
@keyframes chevsPulse{ 0%{transform:translateX(0);opacity:.8;} 55%{transform:translateX(-3px);opacity:1;} 100%{transform:translateX(0);opacity:.8;} }
@keyframes sbFade{ 0%{opacity:0;transform:translate(-8px,-50%);} 18%{opacity:1;transform:translate(0,-50%);} 55%{opacity:1;transform:translate(10px,-50%);} 100%{opacity:0;transform:translate(0,-50%);} }

/* ==========================================================================
   MEGA-PANEL (Desktop)
   ========================================================================== */
.mega-panel{
  position:fixed; left:0; right:0;
  top: calc(var(--util-h) + var(--main-h) + var(--mega-gap));
  z-index:9997; background:transparent; border:0; box-shadow:none;
}
.mega-panel[hidden]{ display:none; }
.mega-inner{ position:relative; max-width:none; margin:0; padding:0; }
.mega-inner::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:min(var(--mega-width), calc(100% - 2*var(--mega-gutter)));
  background:var(--mega-surface); border-top:1px solid var(--mega-border); box-shadow:var(--mega-shadow);
  pointer-events:none; z-index:0;
}
.mega-tabs,.mega-content{
  position:relative; z-index:0;
  width:min(var(--mega-width), calc(100% - 2*var(--mega-gutter)));
  margin-inline:auto;
}
.mega-tabs{
  display:flex; gap:4px; align-items:center; padding:0 24px; height:48px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.mega-tab{
  background:transparent; border:0; cursor:pointer; color:#d8d8d8;
  padding:12px 18px; font-weight:800; position:relative;
}
.mega-tab:hover{ color:#fff; }
.mega-tab.is-active{ color:#fff; }
.mega-tab.is-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--it-g1),var(--it-g2));
}
.mega-content{
  display:flex; align-items:center; gap:10px 26px;
  padding:12px 24px 10px; justify-content:flex-start;
}
.mega-link{
  display:inline-flex; flex-direction:column; gap:2px; padding:6px 0; color:#f3f4f6;
  text-decoration:none; line-height:1.25; transition:color .12s ease; text-align:left;
}
.mega-title{ font-weight:700; }
.mega-sub{ font-size:.86rem; color:#a1a1aa; }
.mega-link:hover .mega-title{ color:var(--it-g1); text-decoration:underline; }
.mega-panel.is-tabs-only .mega-content{ display:none; }

@media (max-width:980px){
  .mega-inner::before{ left:0; transform:none; width:100%; }
  .mega-tabs,.mega-content{ width:100%; padding-left:16px; padding-right:16px; }
}

/* ==========================================================================
   HERO - Text links, 3D-Illustration rechts
   ========================================================================== */
.promo-split{
  position:relative;
  margin-top:var(--header-gap);
  padding:42px 0 30px;
  background:transparent;
  overflow:hidden;
}
.promo-split.hero{
  background:#0d1220;
  isolation:isolate;
}
.promo-wrap{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:center;
}
.promo-copy{
  position:relative;
  grid-column:1/2;
  color:#fff;
  padding:20px 22px;
  max-width:420px;
  width:100%;

  border-radius:24px;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  overflow:visible;
}

.page-hero{
  display:none;
  flex-direction:column;
  gap:12px;
  position:relative;
  z-index:2;
}
.page-hero__kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.32px;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.page-hero__title{
  margin:0;
  font-size:clamp(28px,4vw,42px);
  line-height:1.05;
  font-weight:800;
  color:#fff;
}
.page-hero__sub{
  margin:0;
  max-width:60ch;
  color:rgba(229,238,255,.78);
  font-size:15.5px;
  line-height:1.6;
}
.page-hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0;
  margin:4px 0 0;
  list-style:none;
}
.page-hero__chips li{
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
}
.page-hero__chips[hidden]{
  display:none;
}

.promo-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  padding:8px 18px;
  border-radius:999px;
  font-family:"Inter",sans-serif;
  font-weight:600;
  letter-spacing:.35px;
  color:#fff;
  background:linear-gradient(135deg,#FF6A00,#FFA845);
  box-shadow:0 16px 32px rgba(255,118,28,.35);
}
.promo-copy h2{
  font-size:clamp(26px,2.6vw,34px);
  max-width:18ch;
  margin:4px 0 6px;
  line-height:1.08;
  font-weight:800;
  color:#fff;
}
.promo-copy p{
  color:rgba(229,238,255,.86);
  margin-bottom:-8px;
  font-size:15px;
  max-width:48ch;
  line-height:1.6;
  font-weight:400;
}

.hero-leds{
  position:absolute;
  inset:22px;
  pointer-events:none;
  z-index:0;
}
.hero-led{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(129,186,255,.95) 0%, rgba(129,186,255,0) 65%);
  opacity:.18;
  animation:heroLedPulse 2.6s ease-in-out infinite;
  filter:saturate(1.2);
}
.hero-led--tl{ top:0; left:0; }
.hero-led--tr{ top:0; right:0; animation-delay:.5s; }
.hero-led--br{ bottom:0; right:0; animation-delay:1s; background:radial-gradient(circle, rgba(255,150,92,.95) 0%, rgba(255,150,92,0) 65%); }
@keyframes heroLedPulse{
  0%,100%{ opacity:.18; filter:saturate(1.1); }
  50%{ opacity:.9; filter:saturate(1.4); }
}

.hero-copy-stack{
  position:relative;
  display:grid;
  gap:0;
  z-index:1;
  min-height:200px;
}
.hero-card{
  grid-area:1/1;
  display:flex;
  flex-direction:column;
  gap:6px;
  opacity:0;
  pointer-events:none;
  transform:translate3d(0,20px,-60px) rotateX(-18deg);
  filter:blur(12px);
  transition:opacity .5s cubic-bezier(.16,.84,.37,1), transform .6s cubic-bezier(.16,.84,.37,1), filter .6s ease;
}
.hero-card.is-active{
  opacity:1;
  pointer-events:auto;
  transform:translate3d(0,0,0) rotateX(0deg);
  filter:none;
}
.hero-card__intro{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
}
.hero-card__intro h2{
  margin:0;
  max-width:18ch;
  font-size:clamp(26px,2.6vw,34px);
  line-height:1.08;
  text-shadow:0 14px 46px rgba(0,0,0,.45);
}
.hero-card__sub{
  margin:0;
  max-width:38ch;
  color:rgba(229,238,255,.85);
  font-size:15px;
  line-height:1.6;
}
.hero-inline-metric{
  display:inline-block;
  padding:0 6px;
  border-radius:6px;
  background:rgba(99,173,255,.18);
  color:#8fbeff;
}

.hero-card.is-active .hero-card__intro,
.hero-card.is-active .hero-card__sub,
.hero-card.is-active .promo-bullets li,
.hero-card.is-active .hero-actions{
  animation:heroCopyFlip .6s cubic-bezier(.19,1,.22,1) forwards;
}
.hero-card.is-active .hero-card__intro{ animation-delay:.05s; }
.hero-card.is-active .hero-card__sub{ animation-delay:.14s; }
.hero-card.is-active .promo-bullets li:nth-child(1){ animation-delay:.22s; }
.hero-card.is-active .promo-bullets li:nth-child(2){ animation-delay:.3s; }
.hero-card.is-active .promo-bullets li:nth-child(3){ animation-delay:.38s; }
.hero-card.is-active .hero-actions{ animation-delay:.46s; }
@keyframes heroCopyFlip{
  0%{ opacity:0; transform:translate3d(0,26px,-60px) rotateX(-26deg); filter:blur(6px); }
  100%{ opacity:1; transform:translate3d(0,0,0) rotateX(0deg); filter:none; }
}

.promo-bullets.with-icons{
  margin:2px 0 10px;
  padding:0;
}
.promo-bullets.with-icons li{
  position:relative;
  padding-left:24px;
  margin:4px 0;
  font-weight:600;
  font-size:15px;
  color:rgba(236,244,255,.9);
}
.promo-bullets.with-icons .bp-ico{
  position:absolute;
  left:0;
  top:0;
  line-height:1;
  font-size:18px;
}

.hero-actions{
  display:flex;
 
  align-items:center;
  gap:8px;
  margin-top:0;
}
.hero-actions .hero-cta, .hero-actions .hero-secondary{ min-width:200px; justify-content:flex-start; text-align:center; line-height:1.1; flex:1 1 0; }
.promo-cta .cta{
  position:relative;
  transform-style:preserve-3d;
  transition:transform .2s ease, box-shadow .25s ease;
}
.hero-cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:11px 22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(135deg,#5d9cff,#7f6bff);
  color:#fff;
  font-weight:700;
  letter-spacing:.3px;
  box-shadow:0 18px 32px rgba(39,91,255,.45);
  transform-style:preserve-3d;
  transition:transform .25s cubic-bezier(.19,1,.22,1), box-shadow .3s ease, filter .3s ease;
}
.hero-cta::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.65), rgba(255,255,255,0) 55%);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .35s ease;
}
.hero-cta:hover{
  transform:translateY(-3px) translateZ(14px);
  box-shadow:0 24px 45px rgba(37,97,255,.55);
}
.hero-cta:hover::after{ opacity:1; }
.hero-cta:active{
  transform:translateY(0) translateZ(0) scale(.98);
}

.hero-secondary{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  padding:11px 22px;
  border-radius:999px;
  border:1px solid rgba(153,186,255,.28);
  background:rgba(9,15,34,.6);
  color:#9cbcff;
  font-weight:600;
  letter-spacing:.25px;
  transition:color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  cursor:pointer;
}
.hero-secondary:hover{
  color:#fff;
  border-color:rgba(153,186,255,.6);
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(9,20,40,.45);
}
.hero-secondary:active{
  transform:translateY(0);
}


.promo-art{
  grid-column:2/3;
  position:relative;
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  perspective:1400px;
}
.hero-stage{
  position:relative;
  width:100%;
  max-width:420px;
  aspect-ratio:5/4;
  transform-style:preserve-3d;
  transform:rotateX(var(--hero-rot-x,0deg)) rotateY(var(--hero-rot-y,0deg));
  transition:transform .8s cubic-bezier(.16,.84,.44,1);
  filter:none;
}
.hero-stage > *:not(.hero-illustration-wrap){ position:relative; z-index:2; }
.hero-illustration-wrap{
  position:absolute;
  pointer-events:none;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:4%;
  z-index:0;
}
.hero-illustration{
  max-width:480px;
  width:95%;
  opacity:.92;
  filter:drop-shadow(0 28px 46px rgba(7,14,28,.45));
  transform:translate(4%, -4%);
}
.hero-layer--sky, .hero-layer--grid, .hero-layer--orb{ display:none !important; }
.hero-stage [data-depth]{
  --shift-x:0px;
  --shift-y:0px;
  --shift-rot:0deg;
}
.hero-layer{
  position:absolute;
  inset:0;
  border-radius:38px;
  transform:translate3d(var(--shift-x), var(--shift-y), 0) rotateZ(var(--shift-rot));
  pointer-events:none;
}
.hero-layer--sky{
  background:linear-gradient(180deg, rgba(45,76,145,.95), rgba(10,18,34,.15));
  box-shadow:0 40px 80px rgba(6,12,24,.55);
  z-index:1;
}
.hero-layer--grid{
  inset:8%;
  border-radius:32px;
  background:radial-gradient(circle at 45% 35%, rgba(120,178,255,.28), rgba(18,30,54,0) 70%);
  opacity:.65;
  z-index:2;
}
.hero-layer--orb{
  border-radius:50%;
  filter:blur(6px);
  opacity:.7;
  transform:translate3d(var(--shift-x), var(--shift-y), 0) scale(1.1);
  z-index:3;
}
.hero-layer--orb-a{
  width:52%;
  height:52%;
  top:12%;
  left:12%;
  background:radial-gradient(circle at 30% 30%, rgba(96,168,255,.65), rgba(96,168,255,0) 70%);
}
.hero-layer--orb-b{
  width:48%;
  height:48%;
  bottom:14%;
  right:10%;
  background:radial-gradient(circle at 70% 70%, rgba(255,140,92,.55), rgba(255,140,92,0) 68%);
}

.hero-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
}
.hero-particle{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 70%);
  box-shadow:0 0 24px rgba(255,255,255,.55);
  opacity:.8;
  animation:heroParticle 10s linear infinite;
}
.hero-particle--a{ top:12%; left:20%; animation-delay:0s; }
.hero-particle--b{ bottom:22%; left:32%; animation-delay:1.6s; }
.hero-particle--c{ top:46%; right:18%; animation-delay:2.8s; }
.hero-particle--d{ bottom:12%; right:24%; animation-delay:4.2s; }
@keyframes heroParticle{
  0%{ transform:translate3d(var(--shift-x), var(--shift-y), 0) scale(.85); opacity:.6; }
  50%{ transform:translate3d(calc(var(--shift-x) + 6px), calc(var(--shift-y) - 12px), 0) scale(1.15); opacity:1; }
  100%{ transform:translate3d(var(--shift-x), var(--shift-y), 0) scale(.85); opacity:.6; }
}

.hero-device{
  position:absolute;
  bottom:6%;
  left:50%;
  width:58%;
  transform:translate3d(-50%,0,140px);
  animation:heroDeviceFloat 12s ease-in-out infinite;
  z-index:5;
}
@keyframes heroDeviceFloat{
  0%,100%{ transform:translate3d(-50%,0,140px); }
  50%{ transform:translate3d(-50%,-10px,160px); }
}
.hero-device__body{
  position:relative;
  border-radius:24px;
  border:1px solid rgba(132,182,255,.35);
  background:linear-gradient(150deg, rgba(18,26,48,.9), rgba(26,44,86,.6));
  padding:16px;
  box-shadow:0 30px 65px rgba(6,12,28,.55);
  overflow:hidden;
  animation:heroDeviceGlow 9s ease-in-out infinite;
}
@keyframes heroDeviceGlow{
  0%,100%{ box-shadow:0 30px 65px rgba(6,12,28,.55); }
  50%{ box-shadow:0 40px 80px rgba(12,26,52,.7); }
}
.hero-device__screen{
  position:relative;
  border-radius:18px;
  background:radial-gradient(circle at 30% 30%, rgba(83,152,255,.65), rgba(16,20,40,0) 72%);
  overflow:hidden;
  aspect-ratio:4/3;
  border:1px solid rgba(132,182,255,.25);
}
.hero-device__screen::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,18,36,.6), rgba(8,14,30,0));
  opacity:.35;
}
.hero-device__screen::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(255,156,92,.25), rgba(255,156,92,0) 65%);
  opacity:.4;
}
.hero-device__scanline{
  position:absolute;
  inset:-60% 0 auto 0;
  height:45%;
  background:linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 65%);
  transform:translateY(var(--scan-y,0));
  animation:heroScanline 6s ease-in-out infinite;
}
.hero-device__graph{
  position:absolute;
  inset:18% 12%;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(14,25,48,.8), rgba(8,14,30,.6));
  overflow:hidden;
}
.hero-device__graph::before{
  content:""; position:absolute; inset:14% 12%;
  border-radius:10px;
  border:1px solid rgba(132,182,255,.25);
  opacity:.6;
}
.hero-device__graph::after{
  content:""; position:absolute; inset:12% 10% 12% 10%;
  background:linear-gradient(90deg, rgba(117,174,255,.65), rgba(255,178,118,.75));
  clip-path:path('M0,70 Q25,10 50,30 T100,20 V100 H0 Z');
  opacity:.85;
  filter:drop-shadow(0 8px 18px rgba(117,174,255,.4));
}
@keyframes heroScanline{
  0%,100%{ transform:translateY(-80%); opacity:0; }
  45%{ opacity:.65; }
  60%{ transform:translateY(110%); opacity:.2; }
}
.hero-device__base{
  width:72%;
  height:20px;
  margin:18px auto 0;
  border-radius:18px 18px 28px 28px;
  background:linear-gradient(180deg, rgba(26,36,70,.9), rgba(12,18,34,.6));
  border:1px solid rgba(102,154,255,.22);
  box-shadow:0 22px 36px rgba(6,12,24,.55);
  position:relative;
}
.hero-device__base::before{
  content:""; position:absolute; inset:-8px 16%; height:12px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(106,160,255,.35), rgba(12,20,36,0) 70%);
  opacity:.75;
}
.hero-device__base::after{
  content:""; position:absolute; inset:4px 28%; height:8px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,177,120,.4), rgba(106,160,255,.35));
  opacity:.6;
}

.hero-cluster{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(.94);
  transition:opacity .5s ease, transform .6s cubic-bezier(.16,.84,.44,1);
  pointer-events:none;
  z-index:6;
}
.hero-cluster.is-active{
  opacity:1;
  transform:scale(1);
  pointer-events:auto;
}

.hero-panel{
  position:absolute;
  width:max-content;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(145deg, rgba(15,26,50,.92), rgba(12,22,42,.6));
  border:1px solid rgba(132,182,255,.28);
  box-shadow:0 18px 48px rgba(5,10,26,.5);
  display:flex;
  gap:14px;
  align-items:center;
  --shift-x:0px;
  --shift-y:0px;
  transform:translate3d(var(--hero-x,0px), var(--hero-y,0px), var(--hero-z,120px)) translate3d(var(--shift-x), var(--shift-y), 0);
  animation:heroPanelFloat 14s ease-in-out infinite;
  overflow:hidden;
  backdrop-filter:blur(8px);
}
.hero-panel--secondary{ width:max-content; }
.hero-panel__icon{
  position:relative;
  width:42px;
  height:42px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  color:#74b3ff;
  border:1px solid rgba(132,182,255,.25);
  box-shadow:0 10px 20px rgba(4,10,24,.42);
}
.hero-panel__body span{
  display:block;
  font-weight:800;
  letter-spacing:.25px;
  color:#e9f2ff;
}
.hero-panel__body small{
  display:block;
  margin-top:3px;
  opacity:.78;
  font-size:12px;
  color:rgba(220,232,255,.78);
.hero-cluster[data-theme="cloud"] .hero-panel--primary{
.hero-cluster[data-theme="cloud"] .hero-panel--primary{
  top:16%;
  left:12%;
  --hero-x:-20px;
  --hero-y:-18px;
  --hero-z:140px;
}
.hero-cluster[data-theme="cloud"] .hero-panel--secondary{
  bottom:18%;
  right:18%;
  --hero-x:10px;
  --hero-y:12px;
  --hero-z:110px;
  animation-delay:.25s;
}
.hero-cluster[data-theme="shield"] .hero-panel--primary{
  top:20%;
  right:8%;
  --hero-x:50px;
  --hero-y:-28px;
  --hero-z:132px;
}
.hero-cluster[data-theme="shield"] .hero-panel--secondary{
  bottom:18%;
  left:8%;
  --hero-x:-32px;
  --hero-y:14px;
  --hero-z:108px;
  animation-delay:.3s;
}

@keyframes heroPanelFloat{
  0%,100%{ transform:translate3d(var(--hero-x), var(--hero-y), var(--hero-z)) translate3d(var(--shift-x), var(--shift-y), 0); }
  50%{ transform:translate3d(var(--hero-x), calc(var(--hero-y) - 10px), calc(var(--hero-z) + 24px)) translate3d(calc(var(--shift-x)*1.6), calc(var(--shift-y)*1.4), 0); }
}
}

@keyframes heroPanelFloat{
  0%,100%{ transform:translate3d(var(--hero-x), var(--hero-y), var(--hero-z)) translate3d(var(--shift-x), var(--shift-y), 0); }
  50%{ transform:translate3d(var(--hero-x), calc(var(--hero-y) - 10px), calc(var(--hero-z) + 24px)) translate3d(calc(var(--shift-x)*1.6), calc(var(--shift-y)*1.4), 0); }
}
@keyframes heroPanelFloat{
  0%,100%{ transform:translate3d(var(--hero-x), var(--hero-y), var(--hero-z)) translate3d(var(--shift-x), var(--shift-y), 0); }
  50%{ transform:translate3d(var(--hero-x), calc(var(--hero-y) - 10px), calc(var(--hero-z) + 24px)) translate3d(calc(var(--shift-x)*1.6), calc(var(--shift-y)*1.4), 0); }
}
body.content-mode .promo-split{
  padding:22px 0 18px;
}
body.content-mode .promo-wrap{
  grid-template-columns:minmax(0,1fr);
  gap:16px;
}
body.content-mode .promo-copy{
  padding:26px 28px 24px;
  max-width:640px;
  background:rgba(17,23,41,.74);
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 18px 48px rgba(5,9,20,.35);
  backdrop-filter:blur(18px);
}
body.content-mode .page-hero{
  display:flex;
}
body.content-mode .hero-actions,
body.content-mode .hero-copy-stack,
body.content-mode .promo-art,
body.content-mode .hero-leds{
  display:none !important;
}
body.content-mode .scroll-down{ display:none !important; }

@media (prefers-reduced-motion:reduce){
  .hero-stage,
  .hero-panel,
  .hero-particle,
  .hero-device,
  .hero-cta,
  .hero-card,
  .hero-led,
  .hero-device__scanline{
    animation:none !important;
    transition:none !important;
  }
}
  .hero-led,
  .hero-device__scanline{
    animation:none !important;
    transition:none !important;
  }
}

@media (max-width:1200px){
  .promo-wrap{ gap:26px; }
  .promo-art{ max-width:480px; margin:0 auto; }
}
@media (max-width:1100px){
  .promo-wrap{ grid-template-columns:1fr; }
  .promo-art{ order:-1; }
  .promo-copy{ padding:20px 22px;
  max-width:420px;
  width:100%;
 }
}
@media (max-width:980px){
  .promo-split{ padding:36px 0 32px; }
  .promo-art{ display:none !important; }
  .hero-copy-stack{ min-height:0; }
}
@media (max-width:640px){
  .promo-copy{ padding:20px; border-radius:20px; }
  .hero-card__intro h2{ font-size:clamp(24px,8vw,32px); }
  .hero-actions{ gap:12px; }
}
@media (max-width:520px){
  .promo-split{ padding:26px 0 24px; }
}


/* ==========================================================================
   QUICK LINKS
   ========================================================================== */
.quick-links{ background:#ECEFF3; padding:24px 0 40px; border-top:1px solid #e6e6e6; }
.quick-grid{ --card-h:190px; display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.ql-card{
  height:var(--card-h); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center;
  padding:26px 14px; background:#fff; border:1px solid #e9e9e9; border-radius:14px;
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.ql-card:hover{ transform:translateY(-3px); border-color:transparent; box-shadow:0 10px 28px rgba(0,0,0,.28); background:#fff; }
.ql-card:hover .ql-icon::after{ transform:scale(1.02); }
.ql-card:hover .ql-icon svg{ color:#fff; }
.ql-icon{ width:40px; height:40px; border-radius:10px; margin-bottom:10px; display:grid; place-items:center; position:relative; background:transparent; box-shadow:none; }
.ql-icon svg{ color:#fff; transition:color .2s ease; position:relative; z-index:1; }
.ql-icon::after{ content:""; position:absolute; inset:-2px; border-radius:12px; background:linear-gradient(135deg,var(--it-g1),var(--it-g2)); opacity:1; transform:scale(.98); transition:transform .25s ease; z-index:0; }
.ql-title{ font-weight:900; margin-bottom:4px; color:inherit; min-height:44px; display:flex; align-items:center; }
.ql-sub{ font-size:14px; color:#555; }
@media (max-width:1100px){ .quick-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .quick-grid{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   VALUE + KPI
   ========================================================================== */
.value-section{ padding:46px 0 24px; }
.value-head{ flex-direction:column; gap:6px; text-align:center; }
.value-head h3{ font-size:clamp(22px,2.6vw,30px); margin:0; }
.value-head p{ margin:0; color:#444; }
.value-grid{ margin-top:18px; display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .value-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .value-grid{ grid-template-columns:1fr; } }
.value-card{
  background:#fff; border:1px solid #e9e9e9; border-radius:14px; padding:18px;
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease; display:flex; flex-direction:column; gap:8px;
  align-items:center; text-align:center;
}
.value-card:hover{ transform:translateY(-3px); border-color:transparent; box-shadow:0 10px 28px rgba(0,0,0,.18); }
.value-card h4{ margin:0; font-size:18px; font-weight:900; }
.value-card p{ margin:0; color:#333; }
.v-icon{ display:flex; align-items:center; justify-content:flex-start; color:var(--it-g1); font-size:26px; }

/* KPI-Band */
.kpi-band{ margin:22px 0; padding:16px 0; background:linear-gradient(90deg,var(--it-g1),var(--it-g2)); color:#fff; border-top:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2); }
.kpi-grid{ gap:16px; justify-content:space-between; display:flex; }
.kpi{ text-align:center; flex:1; }
.kpi strong{ display:block; font-size:24px; line-height:1; }
.kpi span{ opacity:.95; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials-slider.container{ display:block; }
.testimonials-slider{ display:flex; flex-direction:column; align-items:stretch; gap:12px; text-align:center; margin-top:16px; }
.testimonials-slider .t-kicker{ margin:0; font-size:18px; font-weight:900; color:#666; }
.t-viewport{ position:relative; width:100%; max-width:980px; margin:0 auto; overflow:hidden; overflow:clip; }
.t-track{ display:flex; flex-wrap:nowrap; gap:0; transition:transform .45s ease; will-change:transform; width:100%; }
.testimonial-card{ flex:0 0 100%; max-width:100%; margin:0; padding:0 12px 6px; background:transparent; border-radius:0; box-shadow:none; position:relative; }
.t-quote{ margin:0; font-size:19px; line-height:1.75; color:#232323; opacity:.35; transform:translateY(6px); }
.t-author{ margin-top:14px; display:flex; align-items:center; justify-content:flex-start; gap:12px; opacity:0; transform:translateY(8px); }
.t-avatar{ width:60px; height:60px; border-radius:999px; border:0; box-shadow:0 10px 24px rgba(0,0,0,.14); }
.t-avatar.is-fallback{ display:grid; place-items:center; font-weight:900; color:#fff; background:linear-gradient(135deg,var(--it-g1),var(--it-g2)); }
.t-avatar.is-fallback::after{ content:attr(data-initials); font-size:17px; letter-spacing:.5px; }
.t-meta{ text-align:left; } .t-name{ font-weight:900; } .t-role{ font-size:14px; opacity:.85; }
.t-stars{ margin-top:2px; font-size:16px; font-weight:900; background:linear-gradient(90deg,var(--it-g1),var(--it-g2)); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:1px; }
.testimonial-card.is-active .t-quote{ animation:tGlow .9s ease forwards; }
.testimonial-card.is-active .t-author{ animation:tFadeUp .55s ease .08s forwards; }
@keyframes tGlow{ 0%{opacity:.35; filter:blur(.45px); transform:translateY(6px);} 60%{opacity:.85; filter:blur(.15px);} 100%{opacity:1; filter:none; transform:translateY(0);} }
@keyframes tFadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.t-dots{ display:flex; justify-content:flex-start; gap:8px; margin-top:9px; }
.t-dot{ width:10px; height:10px; background:#cfcfcf; border:0; cursor:pointer; }
.t-dot.is-active{ background:linear-gradient(135deg,var(--it-g1),var(--it-g2)); }
@media (max-width:560px){ .t-quote{ font-size:17px; } .t-avatar{ width:52px; height:52px; } }
@media (prefers-reduced-motion:reduce){
  .t-track{ transition:none; }
  .testimonial-card .t-quote,.testimonial-card .t-author{ animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; }
}

/* ==========================================================================
   DEAL RIBBON
   ========================================================================== */
.deal-ribbon{
  width:100%; padding:44px 0; position:relative; color:#fff; background:linear-gradient(135deg,#0D1220 0%,#18263f 55%,#203250 100%); overflow:hidden; }
.deal-ribbon::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 15% 20%, rgba(48,79,254,.28), transparent 55%), radial-gradient(circle at 75% 10%, rgba(111,136,255,.18), transparent 50%); opacity:.65; }
.deal-ribbon::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size:18px 18px; opacity:.6; mix-blend-mode:screen; }
.deal-ribbon .deal-inner{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:0 auto;
  padding:0 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  text-align:center;
}
.deal-fx{
  position:absolute;
  inset:-40px -80px;
  pointer-events:none;
  z-index:0;
}
.deal-spark{
  position:absolute;
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(112,178,255,.38) 0%, rgba(12,40,88,0) 68%);
  opacity:.55;
  mix-blend-mode:screen;
  animation:dealSparkFloat 14s ease-in-out infinite;
  filter:blur(0);
}
.deal-spark--a{
  top:-24px;
  left:-18px;
}
.deal-spark--b{
  bottom:-30px;
  right:-26px;
  width:168px;
  height:168px;
  background:radial-gradient(circle, rgba(124,208,255,.4) 0%, rgba(16,52,110,0) 70%);
  animation-delay:4s;
}
.deal-spark--c{
  top:36%;
  right:18%;
  width:120px;
  height:120px;
  background:radial-gradient(circle, rgba(255,180,120,.36) 0%, rgba(110,54,24,0) 68%);
  animation-delay:8s;
}
@keyframes dealSparkFloat{
  0%,100%{ transform:translate3d(0,0,0) scale(1); opacity:.55; }
  50%{ transform:translate3d(0,-14px,0) scale(1.08); opacity:.85; }
}
.deal-meta{ padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.14); font-weight:700; font-size:11px; letter-spacing:.4px; display:inline-flex; align-items:center; gap:6px; text-transform:uppercase; color:#B9C6FF; }
.deal-title{ margin:0; font-size:clamp(26px,3.2vw,32px); font-weight:900; letter-spacing:.2px; color:#fff; }
.deal-panel{ position:relative; width:100%; display:grid; grid-template-columns:minmax(0,1.35fr) auto; gap:16px; align-items:center; background:rgba(13,18,32,.55); border-radius:18px; padding:18px 20px; box-shadow:0 18px 45px rgba(0,0,0,.26), 0 0 0 1px rgba(255,255,255,.1); backdrop-filter:blur(10px); overflow:hidden; }
.deal-panel::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(140deg, rgba(135,195,255,.28), rgba(39,62,124,.12)); opacity:.55; transition:opacity .3s ease; mix-blend-mode:screen; }
.deal-panel::after{ content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(123,182,255,.22); opacity:.35; pointer-events:none; mix-blend-mode:screen; }
.deal-panel:hover::before{ opacity:.82; }
.deal-benefits{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; text-align:left; }
.deal-benefits li{ display:flex; align-items:flex-start; gap:14px; }
.benefit-icon{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.16); color:#fff; font-size:16px; font-weight:700; box-shadow:none; }
.deal-benefits li:nth-child(2) .benefit-icon{ background:rgba(255,255,255,.18); color:#7bf6de; }
.benefit-copy strong{ display:block; font-size:16px; font-weight:700; color:#fff; }
.benefit-copy span{ display:block; font-size:13px; color:rgba(255,255,255,.75); }
.deal-graphic{ display:flex; align-items:center; justify-content:flex-start; }
.paper-icon{ position:relative; width:76px; height:76px; border-radius:22px; background:rgba(34,48,78,.7); display:grid; place-items:center; box-shadow:0 18px 46px rgba(0,0,0,.28); color:#fff; }
.paper-icon svg{ width:34px; height:34px; opacity:.9; }
.paper-icon .badge{ position:absolute; top:9px; right:9px; width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,#ff5d6c,#ff8a73); display:grid; place-items:center; font-weight:700; color:#fff; font-size:13px; }
.deal-cta{ display:inline-flex; align-items:center; justify-content:flex-start; gap:10px; padding:11px 26px; border-radius:999px; background:linear-gradient(135deg,#66a8ff,#7bd1ff); color:#0d1324; font-weight:700; font-size:15px; text-decoration:none; box-shadow:0 14px 30px rgba(27,52,94,.35); transition:transform .2s ease, box-shadow .2s ease; }
.deal-cta:hover{ transform:translateY(-2px); box-shadow:0 18px 36px rgba(48,79,254,.32); }
.deal-footnote{ margin:0; font-size:12px; opacity:.7; color:rgba(255,255,255,.7); }
@media (max-width:760px){
  .deal-ribbon{ padding:32px 0; }
  .deal-panel{ grid-template-columns:1fr; text-align:left; padding:16px; gap:14px; }
  .deal-graphic{ justify-content:flex-start; }
  .deal-meta{ font-size:10px; }
  .deal-title{ font-size:22px; }
  .benefit-copy strong{ font-size:15px; }
  .deal-cta{ width:100%; }
}

/* ==========================================================================
   CONTENT / DIALOGE / SUPPORT FLOAT
   ========================================================================== */
.content-hero{ background:var(--bg); padding:26px 0 12px; }
.content-hero .container{ align-items:flex-end; }
.content-hero h1{ margin:6px 0 8px; line-height:1.2; }

body.inline-hero-mode .promo-split{ display:none !important; }
body.inline-hero-mode #pageContent{ display:block; }

/* ==========================================================================
   INLINE CONTENT HERO
   ========================================================================== */
.content-hero-neo{
  position:relative;
  background:linear-gradient(140deg,#0d1427 0%,#1a2556 52%,#253a88 100%);
  padding:24px 0 0;
  color:#f8fbff;
  overflow:hidden;
}
.content-hero-neo::before{
  content:"";
  position:absolute;
  inset:-220px -140px -160px -140px;
  background:radial-gradient(circle at 50% 20%, rgba(108,153,255,.4) 0%, rgba(108,153,255,.08) 55%, rgba(108,153,255,0) 90%);
  opacity:.88;
  pointer-events:none;
  filter:blur(12px);
}
.content-hero-neo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(9,12,26,.0) 0%, rgba(9,12,26,.45) 100%);
  pointer-events:none;
  z-index:0;
}
.content-hero-neo__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr);
  gap:28px;
  align-items:center;
}

.content-hero-neo__divider{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-2px;
  width:min(1200px,96vw);
  height:10px;
  background:var(--bg,#eceff3);
  clip-path:polygon(20px 0, calc(100% - 20px) 0, 100% 100%, 0 100%);
  z-index:1;
  pointer-events:none;
}
@media (max-width:640px){
  .content-hero-neo__divider{ width:calc(100% - 24px); height:8px; clip-path:polygon(12px 0, calc(100% - 12px) 0, 100% 100%, 0 100%); bottom:-2px; }
}
.content-hero-neo__copy{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-top:4px;
}
.content-hero-neo__kicker{
  align-self:flex-start;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.86);
  font-size:12px;
  font-weight:700;
  letter-spacing:.32px;
  text-transform:uppercase;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.content-hero-neo__title{
  margin:0;
  font-size:clamp(30px,3.4vw,46px);
  line-height:1.08;
  font-weight:800;
  color:#fff;
}
.content-hero-neo__sub{
  margin:0;
  color:rgba(223,231,255,.82);
  font-size:17px;
  line-height:1.55;
}
.content-hero-neo__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0;
  margin:2px 0 0;
  list-style:none;
}
.content-hero-neo__chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#f8fbff;
  font-weight:700;
  font-size:13px;
  letter-spacing:.25px;
  box-shadow:0 10px 24px rgba(6,12,32,.24);
  backdrop-filter:blur(8px);
}
.content-hero-neo__chip:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.28);
}
.content-hero-neo__chip-ico{
  font-size:16px;
  line-height:1;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));
}
.content-hero-neo__chip-text{
  display:inline-block;
}
.content-hero-neo__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:6px;
}
.content-hero-neo__cta{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  padding:11px 28px;
  border-radius:999px;
  background:linear-gradient(130deg,#4b7bff,#7f5bff);
  color:#fff;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  box-shadow:0 18px 38px rgba(48,98,255,.36);
  transition:transform .22s ease, box-shadow .22s ease;
}
.content-hero-neo__cta:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 42px rgba(48,98,255,.42);
}
.content-hero-neo__ghost{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  padding:10px 20px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  color:rgba(233,240,255,.88);
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  backdrop-filter:blur(6px);
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.content-hero-neo__ghost:hover{
  border-color:rgba(255,255,255,.5);
  color:#fff;
  background:rgba(255,255,255,.08);
}
.content-hero-neo__hint{
  font-size:13px;
  color:rgba(207,219,255,.8);
}
.content-hero-neo__metrics{
  display:none;
  flex-wrap:wrap;
  gap:14px;
  margin-top:6px;
}
.content-hero-neo__metric{
  padding:12px 18px;
  border-radius:18px;
  background:rgba(15,23,42,.45);
  border:1px solid rgba(148,163,184,.32);
  backdrop-filter:blur(12px);
  min-width:120px;
  color:#f8fbff;
}
.content-hero-neo__metric strong{
  display:block;
  font-size:20px;
  font-weight:800;
  letter-spacing:.2px;
}
.content-hero-neo__metric span{
  display:block;
  margin-top:4px;
  font-size:13px;
  opacity:.8;
}


.content-hero-neo__stage{
  position:relative;
  margin-left:120px;
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  perspective:1200px;
  margin-top:70px;
}
@media (max-width:640px){
  .content-hero-neo__metrics{ display:flex; }
  .content-hero-neo__stage{ display:none !important; min-height:0; }
}

.ch-stage{
  position:relative;
  width:100%;
  max-width:360px;
  aspect-ratio:1;
  transform-style:preserve-3d;
}
.ch-stage__glow{
  position:absolute;
  inset:40% -60px -10% -60px;
  background:radial-gradient(circle at 50% 20%, rgba(120,167,255,.45) 0%, rgba(12,20,42,0) 70%);
  transform:translateZ(20px);
  filter:blur(18px);
}
.ch-stage__halo{
  position:absolute;
  inset:24% 18%;
  border-radius:50%;
  border:1px solid rgba(123,182,255,.32);
  box-shadow:0 0 60px rgba(88,150,255,.25);
  transform:translateZ(80px) rotateX(14deg);
  animation:haloPulse 12s ease-in-out infinite;
}
.ch-stage__orb{
  position:absolute;
  top:18%;
  left:50%;
  width:136px;
  height:136px;
  margin-left:-68px;
  border-radius:36px;
  background:linear-gradient(145deg, rgba(93,146,255,.95), rgba(32,58,136,.9));
  box-shadow:0 28px 60px rgba(30,66,170,.45);
  transform:translate3d(0,-26px,var(--depth,120px)) rotateX(12deg) rotateY(-18deg);
  animation:orbFloat 9s ease-in-out infinite;
}
.ch-stage__ring{
  position:absolute;
  width:220px;
  height:220px;
  top:50%;
  left:50%;
  margin:-110px 0 0 -110px;
  border-radius:50%;
  border:1px solid rgba(123,182,255,.18);
  transform:translate3d(0,0,var(--depth,60px)) rotateX(70deg);
  animation:ringSpin 16s linear infinite;
}
.ch-stage__ring--two{
  width:260px;
  height:260px;
  margin:-130px 0 0 -130px;
  animation-duration:20s;
  animation-direction:reverse;
}
.ch-stage__card{
  position:absolute;
  padding:14px 18px;
  border-radius:20px;
  background:linear-gradient(135deg, rgba(19,26,56,.9), rgba(10,14,30,.94));
  border:1px solid rgba(123,182,255,.26);
  box-shadow:0 22px 40px rgba(8,12,28,.55);
  transform:translate3d(var(--tx,0px), var(--ty,0px), var(--tz,120px)) rotateX(-12deg) rotateY(16deg);
  transform-style:preserve-3d;
  min-width:150px;
  animation:cardFloat 9s ease-in-out infinite;
}
.ch-stage__card span{
  display:block;
  font-size:18px;
  font-weight:800;
  color:#fff;
}
.ch-stage__card small{
  display:block;
  margin-top:4px;
  font-size:12px;
  letter-spacing:.24px;
  color:rgba(199,211,255,.82);
}
.ch-stage__card--primary{
  background:linear-gradient(135deg, rgba(86,141,255,.92), rgba(32,60,138,.88));
  border-color:rgba(135,186,255,.58);
  animation-delay:-2s;
}
.ch-stage__card--secondary{
  background:linear-gradient(135deg, rgba(127,98,255,.92), rgba(63,44,155,.88));
  border-color:rgba(164,141,255,.55);
  animation-delay:-3.4s;
}
.ch-stage__card--tertiary{
  background:linear-gradient(135deg, rgba(63,219,173,.78), rgba(28,102,113,.88));
  border-color:rgba(112,222,199,.52);
  animation-delay:-5.1s;
}
.ch-stage__particle{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(160,204,255,.9) 0%, rgba(160,204,255,0) 70%);
  box-shadow:0 0 18px rgba(160,204,255,.6);
  opacity:.8;
  animation:particleFloat 12s ease-in-out infinite;
}
.ch-stage__particle--a{ top:18%; left:20%; animation-delay:-4s; }
.ch-stage__particle--b{ top:62%; left:78%; animation-delay:-7s; }
.ch-stage__particle--c{ top:72%; left:18%; animation-delay:-9s; }

@keyframes cardFloat{
  0%,100%{ transform:translate3d(var(--tx), var(--ty), var(--tz)) rotateX(-12deg) rotateY(16deg); }
  50%{ transform:translate3d(calc(var(--tx) + 8px), calc(var(--ty) - 16px), calc(var(--tz) + 26px)) rotateX(-6deg) rotateY(10deg); }
}
@keyframes orbFloat{
  0%,100%{ transform:translate3d(0,-26px,var(--depth,120px)) rotateX(12deg) rotateY(-18deg); }
  50%{ transform:translate3d(6px,-48px,calc(var(--depth,120px) + 28px)) rotateX(7deg) rotateY(-12deg); }
}
@keyframes haloPulse{
  0%,100%{ opacity:.55; transform:translateZ(80px) rotateX(14deg) scale(1); }
  50%{ opacity:.85; transform:translateZ(80px) rotateX(14deg) scale(1.08); }
}
@keyframes ringSpin{
  0%{ transform:translate3d(0,0,var(--depth,60px)) rotateX(70deg) rotateZ(0deg); }
  100%{ transform:translate3d(0,0,var(--depth,60px)) rotateX(70deg) rotateZ(360deg); }
}
@keyframes particleFloat{
  0%,100%{ transform:translate3d(0,0,120px) scale(1); opacity:.75; }
  50%{ transform:translate3d(6px,-18px,160px) scale(1.2); opacity:1; }
}

@media (max-width:1100px){
  .content-hero-neo__inner{ gap:28px; }
}
@media (max-width:980px){
  .content-hero-neo{
    padding:40px 0 34px;
  }
  .content-hero-neo__inner{
    grid-template-columns:minmax(0,1fr);
    gap:38px;
  }
  .content-hero-neo__stage{
    order:-1;
    margin:0 auto;
    max-width:420px;
  }
  .content-hero-neo__copy{
    align-items:flex-start;
  }
  .content-hero-neo__chips{
    gap:8px;
  }
}
@media (max-width:640px){
  .content-hero-neo{
    padding:34px 0 28px;
  }
  .content-hero-neo__actions{
    flex-direction:column;
    align-items:flex-start;
  }
  .content-hero-neo__ghost,
  .content-hero-neo__cta{
    width:100%;
    justify-content:flex-start;
  }
  .content-hero-neo__hint{
    width:100%;
    text-align:center;
    margin-top:4px;
  }
  .content-hero-neo__metrics{
    width:100%;
    justify-content:space-between;
  }
  .content-hero-neo__metric{
    flex:1;
  }
}



.content-wrap{
  max-width:1200px; margin:0 auto; padding:20px 24px 40px;
  display:grid; grid-template-columns:1.25fr .75fr; gap:28px;
}
@media (max-width:980px){ .content-wrap{ grid-template-columns:1fr; } }

.content-main .lead{ font-size:18px; color:#333; }
.content-main ul.checklist{ margin:14px 0 0; padding:0; list-style:none; }
.content-main ul.checklist li{ padding-left:26px; position:relative; margin:10px 0; }
.content-main ul.checklist li::before{
  content:"?"; position:absolute; left:0; top:0; line-height:1;
  background:linear-gradient(135deg,var(--it-g1),var(--it-g2)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900;
}

.side-sticky{
  position:sticky; top:calc(var(--util-h) + var(--main-h) + 10px);
  background:#fff; border:1px solid #e9e9e9; padding:18px; box-shadow:0 10px 22px rgba(0,0,0,.06); border-radius:14px;
}
.side-sticky .price{ font-size:14px; color:#444; }
.side-sticky .price strong{ font-size:26px; }
.side-sticky .cta{ display:inline-block; margin:10px 0 8px; }
.side-sticky .bullets{ font-size:14px; color:#333; margin:8px 0 0; }
.side-sticky .bullets li{ margin:6px 0; }

.vf-stepper{ margin:20px auto; max-width:1200px; width:100%; padding:0 40px; }
.vf-stepper .line{ height:3px; background:#ccc; position:relative; margin:24px 0 18px; }
.vf-stepper .steps{ display:flex; justify-content:space-between; gap:24px; position:relative; top:-14px; flex-wrap:wrap; }

.vf-step{ flex:1 1 160px; text-align:center; min-width:120px; }
.vf-dot{ width:26px; height:26px; border-radius:50%; border:2px solid #222; background:#fff; margin:0 auto 8px; box-shadow:0 2px 0 rgba(0,0,0,.06); }
.vf-step.active .vf-dot{ border-color:transparent; background:radial-gradient(#fff 0 6px, transparent 7px),linear-gradient(135deg,var(--it-g1),var(--it-g2)); }
.vf-label{ font-size:15px; font-weight:700; color:#222; line-height:1.4; }

.breadcrumbs{ font-size:14px; margin:8px 0 16px; color:#666; }
.breadcrumbs a{ color:#0073e6; text-decoration:none; }
.breadcrumbs a:hover{ text-decoration:underline; }

.dialog-container{ display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.5); justify-content:flex-start; align-items:center; }
.dialog-box{ background:#fff; color:#111; border-radius:12px; max-width:90vw; max-height:80vh; overflow:auto; padding:20px; position:relative; }
.close-button{ position:absolute; top:9px; right:8px; width:32px; height:32px; border:1px solid #e1e1e1; background:#fff; cursor:pointer; font-size:20px; line-height:28px; border-radius:8px; }

/* Support Float */
.support-float{
  position:fixed; right:0; top:38%; z-index:9996; display:flex; flex-direction:column; gap:10px;
  contain:layout paint; will-change:transform;
}
.support-item{
  --tab:50px; width:280px; height:50px; display:flex; align-items:center; overflow:hidden;
  border-radius:12px 0 0 12px; transform:translateX(calc(100% - var(--tab)));
  background:#ECEFF3; color:#111; border:1px solid #e5e7eb; box-shadow:0 8px 18px rgba(0,0,0,.15);
  transition:transform .25s ease, box-shadow .25s ease;
}
.support-item:hover{ transform:translateX(0); background-position:100% 0; box-shadow:0 10px 24px rgba(0,0,0,.35); }
.support-icon{ width:var(--tab); height:50px; display:grid; place-items:center; color:#fff; }
.support-label{ font-weight:700; letter-spacing:.2px; color:#fff; }
#remoteSupport{ background:linear-gradient(90deg,#FF6A00 0%,#FFA200 100%); }
#remoteSupport:hover{ background-position:100% 0; }
@media (max-width:480px){ .support-item{ width:240px; --tab:48px; } }
@media (max-width:980px){ .support-float{ display:none !important; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:#0D1220; color:#cfcfcf; border-top:1px solid rgba(255,255,255,.08); position:relative; margin-top:70px; }
.site-footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:2;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  background:linear-gradient(90deg,var(--it-g1),var(--it-g2));
  box-shadow:0 0 18px rgba(255,162,0,.28), 0 0 12px rgba(255,106,0,.18);
}
.footer-top{ display:grid; grid-template-columns:1.2fr 1fr 1fr 1.2fr; gap:28px; padding:48px 24px; align-items:start; }
.footer-logo img{ height:60px; width:auto; display:block; margin-bottom:12px; }
.footer-col h4{ color:#fff; font-size:16px; margin:0 0 14px; font-weight:900; }
.footer-links a{ display:block; padding:6px 0; color:#cfcfcf; opacity:.9; }
.footer-links a:hover{ opacity:1; }
.footer-tagline{ opacity:.85; margin:8px 0 14px; }
.contact-list{ margin:0 0 18px; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.contact-item{ display:flex; align-items:center; gap:10px; }
.contact-icon{ display:flex; align-items:center; justify-content:flex-start; color:#fff; flex-shrink:0; line-height:0; }
.contact-icon svg{ width:18px; height:18px; display:block; }
.contact-socials{ display:flex; gap:10px; margin:8px 0 0; }
.contact-social{ width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:flex-start; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#fff; transition:transform .2s ease, background .2s ease, border-color .2s ease; }
.contact-social svg{ width:18px; height:18px; display:block; }
.contact-social:hover{ background:linear-gradient(135deg,var(--it-g1),var(--it-g2)); border-color:transparent; transform:translateY(-2px); }

.newsletter{ display:flex; gap:8px; margin-top:4px; }
.newsletter input{
  flex:1; min-width:140px; border:1px solid rgba(255,255,255,.16); background:#121212; color:#fff; border-radius:12px; padding:10px 12px;
}
.newsletter input::placeholder{ color:#9a9aa; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); background:#0D1220; }
.footer-bottom-inner{ align-items:center; padding:14px 24px; display:grid; grid-template-columns:1.2fr 1fr 1fr 1.2fr; gap:24px; }
.legal{ grid-column:1; font-size:14px; opacity:.9; font-weight:400; }
.legal-links{ grid-column:3; display:flex; align-items:center; gap:18px; opacity:.9; justify-self:center; justify-content:flex-start; }
.legal-links a{ color:#cfcfcf; text-decoration:none; font-weight:400; font-size:14px; }
.legal-links a:hover{ color:#fff; }
.to-top{ grid-column:4; justify-self:end; width:32px; height:32px; border:1px solid rgba(255,255,255,.18); background:transparent; color:#fff; cursor:pointer; display:grid; place-items:center; transition:border-color .2s ease; }
.to-top:hover{ border-color:rgba(255,255,255,.35); }

/* Footer responsive */
@media (max-width:900px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:24px; }
  .footer-top .footer-links{ display:none !important; }
}
@media (max-width:600px){
  .footer-top{ grid-template-columns:1fr; }
  .newsletter{ flex-direction:column; }
  .newsletter input{ width:100%; }
  .footer-bottom-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ==========================================================================
   MISC
   ========================================================================== */
/* Scroll-Down Button */
.scroll-down{
  position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:28px; background:transparent; border:0; cursor:pointer; color:#fff; z-index:5;
  opacity:.95; transition:transform .2s ease, opacity .2s ease;
}
.scroll-down:hover{ transform:translateX(-50%) translateY(-2px); opacity:1; }
.scroll-down .label{ font-weight:800; letter-spacing:.4px; text-shadow:0 2px 8px rgba(0,0,0,.35); }
.scroll-down .mouse{
  width:28px; height:44px; border-radius:16px; border:2px solid rgba(255,255,255,.9); position:relative; box-shadow:0 6px 18px rgba(0,0,0,.35) inset;
}
.scroll-down .wheel{
  position:absolute; left:50%; top:9px; width:4px; height:8px; margin-left:-2px; background:#fff; border-radius:2px; opacity:.95;
  animation:wheelSlide 1.8s cubic-bezier(.2,.6,.2,1) infinite;
}
@keyframes wheelSlide{ 0%{ transform:translateY(0); opacity:1;} 60%{ transform:translateY(12px); opacity:.2;} 100%{ transform:translateY(0); opacity:1;} }
.scroll-down.is-hidden{ pointer-events:none; opacity:0; transform:translateX(-50%) translateY(6px); }
@media (max-width:520px){ .scroll-down{ bottom:-6px; } .scroll-down .label{ font-size:14px; } }
@media (prefers-reduced-motion:no-preference){
  .scroll-down .wheel{ animation:wheelSlide 1.8s cubic-bezier(.2,.6,.2,1) infinite; }
}

/* VF Stepper mobile tweaks */
@media (max-width:640px){
  .vf-stepper{ padding:0 12px; }
  .vf-stepper .steps{ justify-content:flex-start; gap:16px 18px; }
  .vf-step{ flex:0 1 calc(50% - 18px); }
}
@media (max-width:400px){ .vf-step{ flex:0 1 100%; } }

/* Scoped Styles (#ds) */
#ds .info-box{
  background:#fff; border:1px solid #e9e9e9; padding:22px;
  box-shadow:0 10px 22px rgba(0,0,0,.06); border-radius:14px;
}
#ds .ibox-head{ margin-bottom:10px; }
#ds .ibox-kicker{
  display:inline-block; font-size:13px; font-weight:900; letter-spacing:.2px;
  background:#f6f6f6; border:1px solid #ececec; padding:6px 8px; color:#444; text-transform:uppercase; border-radius:10px;
}
#ds .info-box h1{ margin:8px 0 8px; line-height:1.2; }
#ds .ibox-underline{
  margin-top:10px; height:3px; position:relative;
  background:linear-gradient(90deg,var(--it-g1),var(--it-g2)) left/220px 3px no-repeat;
}
#ds .ibox-underline::after{ content:""; position:absolute; left:220px; right:0; top:1px; height:1px; background:#eaeaea; }
#ds .lead{ font-size:18px; color:#333; margin:8px 0 6px; }
#ds .ibox-chips{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 6px; padding:0; list-style:none; }
#ds .ibox-chips li{ padding:6px 10px; font-weight:800; font-size:13px; background:#fafafa; border:1px solid #eee; border-radius:10px; }
#ds .ibox-callout{
  margin:14px 0 18px; padding:14px 14px 14px 16px; background:#fff;
  border:1px solid #e9e9e9; box-shadow:0 8px 18px rgba(0,0,0,.04); position:relative; border-radius:12px;
}
#ds .ibox-callout::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background:linear-gradient(180deg,var(--it-g1),var(--it-g2)); border-radius:4px 0 0 4px;
}
#ds .ibox-sec{ margin-top:16px; }
#ds .ibox-sec h3{ margin:18px 0 6px; position:relative; padding-top:4px; }
#ds .ibox-sec h3::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:#eee; }
#ds .checklist{ list-style:none; padding-left:0; margin-top:10px; }
#ds .checklist li{ position:relative; padding-left:26px; margin:10px 0; }
#ds .checklist li::before{
  content:"?"; position:absolute; left:0; top:0; line-height:1.2;
  background:linear-gradient(135deg,var(--it-g1),var(--it-g2));
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900;
}
#ds .cta{ border-radius:14px; }

/* === Content-Hero Strip (Content-Seiten) === */
:root{
  --nav-bg: #0D1220;        /* Hex wie Mainbar */
  --hero-h: 260px;          /* Slider-Höhe */
  --hero-r: 20px;           /* Radius */
}
.content-hero{
  background: var(--nav-bg);       /* gleich wie Mainbar */
  padding: 40px 0;                 /* Abstand oben/unten */
}
.content-hero .hero-inner{
  display: grid;
  align-items: center;
}
.hero-slider{
  position: relative;
  background: #10182b;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--hero-r);
  height: var(--hero-h);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.hero-slider .slide{
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  align-items: center; padding: 28px 36px;
  opacity: 0; transform: translateX(8%); transition: .4s ease;
}
.hero-slider .slide.is-active{ opacity: 1; transform: translateX(0); }
.slide-copy .kicker{
  display:inline-block; font-size: 13px; padding: 6px 10px; border-radius: 10px;
  color:#c7f7d2; background: rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.35);
}
.slide-copy h1{ margin:10px 0 6px; font-size: clamp(22px, 3vw, 32px); color:#F2F6FF; }
.slide-copy p{ margin:0; color:#c9cfe4; font-size: 15px; }

.slide-visual{
  position: relative; height: 100%;
  display:flex; align-items:center; justify-content:flex-end;
}
.slide-visual img{
  max-height: calc(var(--hero-h) - 36px);
  opacity: .92;                    /* transparent */
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

/* Navigation */
.hero-slider .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
}
.hero-slider .nav.prev{ left:12px; }
.hero-slider .nav.next{ right:12px; }
.hero-slider .dots{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; gap:10px;
}
.hero-slider .dots::before,
.hero-slider .dots::after{
  content:""; width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,.45);
}
.hero-slider .dots::after{ width:9px; height:9px; background:#fff; }

/* Responsive */
@media (max-width: 991px){
  :root{ --hero-h: 220px; }
  .hero-slider .slide{ grid-template-columns: 1fr; padding: 22px; }
  .slide-visual{ display:none; }  /* optional: Illustration mobil ausblenden */
}
/* === Content-Hero (zwischen Mainbar und Ribbon) — Swiper, ohne Bild === */
:root{
  --nav-bg: #0B0F1A;   /* gleich wie Mainbar */
  --hero-h: 240px;     /* Höhe Desktop */
  --hero-h-sm: 200px;  /* Höhe Mobile */
  --hero-r: 20px;      /* Radius */
}

/* Strip unter der Mainbar */
.content-hero{
  background: var(--nav-bg);
  padding: 36px 0 28px;   /* Abstand zu Navbar/Ribbon */
}
.content-hero .hero-inner{ display:grid; align-items:center; }

/* Slider-Card */
.content-hero .hero-slider{
  position: relative;
  background: #10182b;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--hero-r);
  min-height: var(--hero-h);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 22px 28px;                   /* Innenabstand für Text-Slides */
}

/* Swiper Grundstruktur */
.content-hero .swiper{ height: 100%; }
.content-hero .swiper-wrapper{ height: 100%; }
.content-hero .swiper-slide{
  height: 100%;
  display: flex; align-items: center;    /* Text vertikal zentriert */
}

/* Typo und kleine UI-Elemente */
.content-hero .kicker{
  display:inline-block; font-size:13px; padding:6px 10px; border-radius:10px;
  color:#c7f7d2; background: rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.35);
  margin-bottom: 6px;
}
.content-hero h1{
  margin: 6px 0 6px; color:#F2F6FF;
  font-size: clamp(22px, 3.2vw, 32px); line-height: 1.2;
}
.content-hero p{
  margin: 0; color:#c9cfe4; font-size: 15px;
}

/* Swiper Navigation + Dots */
.content-hero .swiper-button-prev,
.content-hero .swiper-button-next{
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
}
.content-hero .swiper-button-prev{ left:12px; }
.content-hero .swiper-button-next{ right:12px; }
.content-hero .swiper-button-prev:after,
.content-hero .swiper-button-next:after{ font-size:16px; color:#fff; }

.content-hero .swiper-pagination-bullets{ bottom:12px !important; }
.content-hero .swiper-pagination-bullet{
  background: rgba(255,255,255,.5); opacity: 1;
}
.content-hero .swiper-pagination-bullet-active{ background:#fff; }

/* Ribbon direkt darunter ohne Extra-Spacing */
.content-hero + .deal-ribbon{ margin-top: 0; }

/* Responsive */
@media (max-width: 991px){
  .content-hero{ padding: 26px 0 20px; }
  .content-hero .hero-slider{
    min-height: var(--hero-h-sm);
    padding: 18px;
  }
  /* Mobil nur Dots, Pfeile ausblenden */
  .content-hero .swiper-button-prev,
  .content-hero .swiper-button-next{ display:none !important; }
}

/* Hero unten mit breiter, abgekanter Lasche in #ECEFF3 */
.promo-split.hero{
  position: relative;
}

.promo-split.hero::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  height:15px;                          /* Laschenhöhe */
  width:min(1200px, 96vw);              /* BREITER als vorher */
  background:#ECEFF3;                   /* explizite Farbe */
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
  pointer-events:none;
  z-index:1;
}

/* etwas kompakter auf Mobile */
@media (max-width: 640px){
  .promo-split.hero::after{
    height:14px;
    width:calc(100% - 24px);
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  }
}