/* ==========================================================
   VIAONE REDESIGN V3
   Material / Architectural
   + Editorial typography
   + Brand atmosphere
   ========================================================== */


/* ==========================================================
   01. GLOBAL ATMOSPHERE
   ========================================================== */

body.theme-material{
  --v3-bg-0:#07090D;
  --v3-bg-1:#0A0D12;
  --v3-bg-2:#10141A;

  --v3-title:#CDD2D9;
  --v3-heading:#C5CBD3;
  --v3-body:#858F9D;
  --v3-muted:#687381;

  --v3-line:rgba(222,228,238,.068);
  --v3-line-soft:rgba(222,228,238,.040);

  background:var(--v3-bg-0) !important;
  color:var(--v3-body) !important;
}


/* Main ash / graphite environment */

body.theme-material .bg{
  background:
    radial-gradient(
      ellipse at 76% 7%,
      rgba(59,87,128,.11) 0%,
      rgba(31,47,70,.055) 24%,
      transparent 46%
    ),
    radial-gradient(
      ellipse at 87% 55%,
      rgba(90,72,132,.055) 0%,
      transparent 38%
    ),
    radial-gradient(
      ellipse at 18% 72%,
      rgba(42,59,81,.05) 0%,
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #07090D 0%,
      #0A0D12 30%,
      #10141A 61%,
      #0A0D12 82%,
      #07090D 100%
    ) !important;
}


/* Large slow tonal depth */

body.theme-material .bg::before{
  content:"" !important;
  position:absolute !important;
  inset:-15% !important;

  background:
    radial-gradient(
      ellipse at 72% 28%,
      rgba(58,83,123,.095),
      transparent 36%
    ),
    radial-gradient(
      ellipse at 41% 61%,
      rgba(82,73,116,.045),
      transparent 42%
    ) !important;

  opacity:1 !important;
  filter:blur(115px) !important;
  animation:none !important;
}


/* Very subtle material grain / lines */

body.theme-material .bg::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;

  background:
    repeating-linear-gradient(
      117deg,
      rgba(255,255,255,.012) 0px,
      rgba(255,255,255,.012) 1px,
      transparent 1px,
      transparent 9px
    ),
    radial-gradient(
      circle at 1px 1px,
      rgba(255,255,255,.06) .55px,
      transparent .75px
    ) !important;

  background-size:auto, 7px 7px !important;
  opacity:.14 !important;
}


/* ==========================================================
   02. TYPOGRAPHY — softer, calmer
   ========================================================== */

body.theme-material .viaone-hero-title{
  color:var(--v3-title) !important;

  max-width:680px !important;

  font-size:
    clamp(43px,4.55vw,68px) !important;

  line-height:1.025 !important;
  letter-spacing:-.043em !important;

  font-weight:560 !important;

  text-shadow:none !important;
}


body.theme-material .title{
  color:var(--v3-heading) !important;

  font-weight:560 !important;

  letter-spacing:-.045em !important;

  text-shadow:none !important;
}


body.theme-material .viaone-hero-text,
body.theme-material .desc,
body.theme-material .card p,
body.theme-material .route-step p,
body.theme-material .product-caption,
body.theme-material .faq-answer p,
body.theme-material .guide-note{
  color:var(--v3-body) !important;
}


body.theme-material .kicker{
  color:#778395 !important;
}


body.theme-material .viaone-hero-kicker{
  color:#7E8998 !important;
}


/* ==========================================================
   03. HERO ART — no more pasted rectangle
   ========================================================== */

body.theme-material .viaone-hero-v1{
  grid-template-columns:
    minmax(0,.94fr)
    minmax(520px,1.06fr) !important;

  gap:40px !important;
}


body.theme-material .viaone-hero-art{
  min-height:670px !important;

  overflow:visible !important;

  isolation:isolate !important;
}


/*
  Original banner becomes raw material,
  not an obvious rectangular picture.
*/

body.theme-material .viaone-hero-art-image{
  inset:-7% -13% -8% -9% !important;

  opacity:.78 !important;

  background-size:auto 116% !important;
  background-position:94% center !important;

  filter:
    saturate(.61)
    brightness(.67)
    contrast(1.10) !important;

  /*
    Radial mask kills all four visible rectangular edges.
  */

  -webkit-mask-image:
    radial-gradient(
      ellipse at 68% 50%,
      #000 0%,
      #000 35%,
      rgba(0,0,0,.90) 51%,
      rgba(0,0,0,.48) 66%,
      transparent 83%
    ) !important;

  mask-image:
    radial-gradient(
      ellipse at 68% 50%,
      #000 0%,
      #000 35%,
      rgba(0,0,0,.90) 51%,
      rgba(0,0,0,.48) 66%,
      transparent 83%
    ) !important;
}


/* Ash atmosphere over the image */

body.theme-material .viaone-hero-art::before{
  z-index:2 !important;

  inset:-8% -8% !important;

  background:
    radial-gradient(
      ellipse at 70% 45%,
      transparent 0%,
      transparent 37%,
      rgba(8,11,15,.20) 56%,
      rgba(8,11,15,.82) 84%,
      #080B0F 100%
    ),
    linear-gradient(
      90deg,
      #090C11 0%,
      rgba(9,12,17,.74) 10%,
      rgba(9,12,17,.22) 32%,
      transparent 56%
    ) !important;

  pointer-events:none !important;
}


/*
  Architectural shadow below the composition.
  Makes it feel embedded into a surface.
*/

body.theme-material .viaone-hero-art::after{
  content:"" !important;

  position:absolute !important;

  z-index:-1 !important;

  width:78% !important;
  height:34% !important;

  right:1% !important;
  bottom:10% !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,.48),
      rgba(14,18,25,.16) 48%,
      transparent 72%
    ) !important;

  filter:blur(36px) !important;
}


/* Old extra neon line stays dead */

body.theme-material .viaone-hero-accent{
  display:none !important;
}


/* ==========================================================
   04. ARCHITECTURAL SURFACES
   ========================================================== */

body.theme-material .card,
body.theme-material .platform,
body.theme-material .faq-item,
body.theme-material .experience-card,
body.theme-material .eco-tab,
body.theme-material .route-step,
body.theme-material .how-nav div{
  background:
    linear-gradient(
      145deg,
      rgba(25,30,37,.73) 0%,
      rgba(15,19,25,.83) 52%,
      rgba(11,14,19,.91) 100%
    ) !important;

  border:
    1px solid var(--v3-line) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.020),
    inset 0 -1px 0 rgba(0,0,0,.38),
    0 16px 46px rgba(0,0,0,.105) !important;

  backdrop-filter:none !important;
}


body.theme-material .panel,
body.theme-material .route-panel,
body.theme-material .eco-preview{
  background:
    linear-gradient(
      145deg,
      rgba(18,22,28,.64),
      rgba(8,11,15,.75)
    ) !important;

  border:
    1px solid rgba(222,228,238,.055) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.017),
    0 24px 70px rgba(0,0,0,.12) !important;

  backdrop-filter:none !important;
}


/* Kill every remaining decorative pink pool */

body.theme-material .card::before,
body.theme-material .panel::before,
body.theme-material .final-box::before,
body.theme-material .experience-card-glow,
body.theme-material .route-glow{
  display:none !important;
}


/* ==========================================================
   05. STEP SECTION — quieter numbers and arrows
   ========================================================== */

body.theme-material .how-nav span{
  color:#8B8FA9 !important;

  font-size:11px !important;

  font-weight:650 !important;

  letter-spacing:.12em !important;
}


body.theme-material .route-step small{
  color:#737F91 !important;

  font-size:10px !important;

  letter-spacing:.14em !important;

  font-weight:650 !important;
}


body.theme-material .route-arrow::before{
  background:
    linear-gradient(
      to bottom,
      rgba(89,107,143,.38),
      rgba(105,90,143,.24)
    ) !important;
}


body.theme-material .route-arrow::after{
  border-right:
    1px solid rgba(101,110,139,.44) !important;

  border-bottom:
    1px solid rgba(101,110,139,.44) !important;
}


/* icon surfaces */

body.theme-material .route-icon,
body.theme-material .icon,
body.theme-material .flow-icon,
body.theme-material .chain-icon{
  color:#9DA5B5 !important;

  border-color:
    rgba(255,255,255,.075) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.018)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}


/* remove double-frame feeling */

body.theme-material .route-panel::before{
  display:none !important;
}


body.theme-material .route-panel{
  padding:28px !important;

  border-radius:38px !important;
}


body.theme-material .route-step{
  border-radius:22px !important;
}


/* ==========================================================
   06. ECOSYSTEM SHOWCASE — screenshot becomes module
   ========================================================== */

body.theme-material .eco-preview{
  border-radius:38px !important;

  padding:28px !important;

  overflow:hidden !important;

  position:relative !important;
}


/*
  One huge atmospheric field behind the entire product module,
  instead of glow around screenshot.
*/

body.theme-material .eco-preview::after{
  content:"" !important;

  position:absolute !important;

  inset:auto -10% -34% 22% !important;

  height:56% !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(62,78,114,.095),
      rgba(77,65,109,.045) 44%,
      transparent 73%
    ) !important;

  filter:blur(55px) !important;

  pointer-events:none !important;
}


body.theme-material .eco-preview::before{
  display:none !important;
}


/* Screenshot frame no longer "picture frame" */

body.theme-material .real-shot-frame{
  position:relative !important;

  padding:0 !important;

  border-radius:30px !important;

  border:
    1px solid rgba(226,231,238,.070) !important;

  background:
    linear-gradient(
      155deg,
      rgba(30,35,43,.72),
      rgba(10,13,18,.90)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.020),
    0 30px 70px rgba(0,0,0,.19) !important;

  overflow:hidden !important;
}


/*
  Tone down the old screenshot so it belongs to
  the current graphite system.
*/

body.theme-material .real-shot{
  border-radius:29px !important;

  filter:
    brightness(.76)
    saturate(.70)
    contrast(.96) !important;

  opacity:.94 !important;
}


body.theme-material .real-shot-frame::before{
  content:"" !important;

  position:absolute !important;

  z-index:3 !important;

  inset:0 !important;

  border-radius:inherit !important;

  background:
    linear-gradient(
      180deg,
      rgba(12,16,22,.10),
      transparent 28%,
      transparent 68%,
      rgba(6,8,11,.22)
    ) !important;

  pointer-events:none !important;
}


/* less "device screenshot" perspective */

body.theme-material
.eco-screen[data-screen="bot"]
.real-shot-frame,

body.theme-material
.eco-screen[data-screen="cabinet"]
.real-shot-frame,

body.theme-material
.eco-screen[data-screen="sublink"]
.real-shot-frame{
  transform:none !important;
}


/* caption becomes quiet metadata */

body.theme-material .product-caption{
  color:#737E8D !important;

  max-width:650px !important;

  margin-top:17px !important;

  font-size:13px !important;

  line-height:1.65 !important;
}


/* ==========================================================
   07. ACTIVE / HOVER — micro accent only
   ========================================================== */

body.theme-material .eco-tab.active,
body.theme-material .faq-item.active,
body.theme-material .guide-card.active{
  border-color:
    rgba(107,116,145,.17) !important;

  background:
    linear-gradient(
      145deg,
      rgba(28,33,42,.76),
      rgba(15,19,25,.88)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.022) !important;
}


body.theme-material .card:hover,
body.theme-material .platform:hover,
body.theme-material .step:hover,
body.theme-material .faq-item:hover,
body.theme-material .eco-tab:hover,
body.theme-material .how-nav div:hover{
  transform:translateY(-2px) !important;

  border-color:
    rgba(126,137,158,.14) !important;

  background:
    linear-gradient(
      145deg,
      rgba(29,34,42,.78),
      rgba(15,19,25,.89)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 18px 44px rgba(0,0,0,.13) !important;
}


/* ==========================================================
   08. BUTTONS
   ========================================================== */

body.theme-material .viaone-btn-primary{
  background:
    linear-gradient(
      100deg,
      #416FC0 0%,
      #6860BD 58%,
      #93578A 100%
    ) !important;

  box-shadow:
    0 14px 34px rgba(54,62,111,.15) !important;
}


body.theme-material .viaone-btn-secondary,
body.theme-material .header-btn{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    ) !important;

  border:
    1px solid rgba(255,255,255,.08) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018) !important;
}


/* ==========================================================
   09. OLD MAGENTA ACCENTS
   ========================================================== */

body.theme-material .faq-plus,
body.theme-material .guide-step span{
  color:#8D98A9 !important;

  background:
    rgba(255,255,255,.025) !important;

  border-color:
    rgba(255,255,255,.07) !important;
}


body.theme-material .guide-card .guide-btn{
  border-color:
    rgba(255,255,255,.07) !important;

  background:
    rgba(255,255,255,.022) !important;

  color:#AAB2BE !important;
}


body.theme-material .sublink-line{
  background:
    linear-gradient(
      90deg,
      #466EAD,
      #6D62AD,
      #895B85
    ) !important;

  box-shadow:none !important;
}


/* ==========================================================
   10. MOBILE
   ========================================================== */

@media(max-width:1100px){

  body.theme-material .viaone-hero-v1{
    grid-template-columns:1fr !important;
  }

  body.theme-material .viaone-hero-art{
    min-height:500px !important;
  }

  body.theme-material .viaone-hero-art-image{
    inset:-4% -17% !important;
    background-size:auto 112% !important;
    background-position:88% center !important;
  }
}


@media(max-width:620px){

  body.theme-material .viaone-hero-title{
    font-size:
      clamp(36px,10.4vw,48px) !important;

    line-height:1.025 !important;
  }

  body.theme-material .viaone-hero-art{
    min-height:320px !important;

    margin-top:10px !important;
  }

  body.theme-material .viaone-hero-art-image{
    inset:-4% -24% !important;

    background-size:auto 123% !important;

    background-position:86% center !important;
  }

  body.theme-material .route-panel{
    padding:15px !important;

    border-radius:28px !important;
  }

  body.theme-material .eco-preview{
    padding:14px !important;

    border-radius:28px !important;
  }

  body.theme-material .real-shot-frame{
    border-radius:22px !important;
  }

  body.theme-material .real-shot{
    border-radius:21px !important;
  }
}


/* ==========================================================
   VIAONE HERO V5
   Native web artwork — one complete scene
   ========================================================== */


/* Surrounding page tone follows the artwork */

body.theme-material{
  background:#030509 !important;
}

body.theme-material .bg{
  background:
    linear-gradient(
      180deg,
      #030509 0%,
      #070A0F 34%,
      #0A0D12 72%,
      #080B10 100%
    ) !important;
}


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

body.theme-material .viaone-hero-v1{
  position:relative !important;

  width:100vw !important;
  max-width:none !important;

  min-height:760px !important;

  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;

  padding:
    78px
    max(28px, calc((100vw - 1380px) / 2 + 32px))
    88px !important;

  display:flex !important;
  align-items:center !important;

  overflow:hidden !important;

  background-color:#020307 !important;

  background-image:
    url("/hero_web2026.png") !important;

  background-repeat:no-repeat !important;

  background-size:cover !important;

  background-position:center center !important;
}


/*
  The artwork already contains the object,
  lighting and empty space.

  Old separate right-side art is completely removed.
*/

body.theme-material .viaone-hero-art{
  display:none !important;
}


/* No masks, fake shadows or extra neon */

body.theme-material .viaone-hero-art-image,
body.theme-material .viaone-hero-accent{
  display:none !important;
}


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

body.theme-material .viaone-hero-copy{
  position:relative !important;
  z-index:3 !important;

  width:min(640px,46vw) !important;
  max-width:640px !important;

  padding:0 !important;
}


body.theme-material .viaone-hero-kicker{
  margin-bottom:23px !important;

  color:#7E8998 !important;

  font-size:11px !important;
  font-weight:650 !important;

  letter-spacing:.31em !important;
}


body.theme-material .viaone-hero-title{
  margin:0 !important;

  max-width:640px !important;

  color:#CDD1D7 !important;

  font-size:
    clamp(46px,4.15vw,64px) !important;

  line-height:1.035 !important;

  letter-spacing:-.042em !important;

  font-weight:560 !important;

  text-shadow:none !important;
}


body.theme-material .viaone-hero-text{
  max-width:555px !important;

  margin-top:27px !important;

  color:#858F9D !important;

  font-size:17px !important;

  line-height:1.72 !important;
}


/* ==========================================================
   ACTIONS
   ========================================================== */

body.theme-material .viaone-hero-actions{
  margin-top:34px !important;

  gap:12px !important;
}


body.theme-material .viaone-btn{
  min-height:50px !important;

  padding:0 22px !important;

  border-radius:13px !important;

  font-size:13px !important;
}


body.theme-material .viaone-btn-primary{
  background:
    linear-gradient(
      100deg,
      #426FC0 0%,
      #6860BD 59%,
      #95588C 100%
    ) !important;

  border:
    1px solid rgba(112,101,191,.26) !important;

  box-shadow:
    0 13px 34px rgba(50,57,104,.14) !important;
}


body.theme-material .viaone-btn-secondary{
  background:
    rgba(10,13,18,.48) !important;

  border:
    1px solid rgba(255,255,255,.085) !important;

  color:#BEC5CF !important;

  backdrop-filter:blur(8px) !important;
}


/* ==========================================================
   PRINCIPLES
   ========================================================== */

body.theme-material .viaone-hero-principles{
  margin-top:35px !important;

  color:#687382 !important;

  font-size:11px !important;

  gap:12px 23px !important;
}


body.theme-material
.viaone-hero-principles
span::before{
  width:4px !important;
  height:4px !important;

  background:
    linear-gradient(
      135deg,
      #477ACB,
      #7665C5,
      #A15991
    ) !important;

  box-shadow:none !important;
}


/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media(min-width:1700px){

  body.theme-material .viaone-hero-v1{
    min-height:790px !important;
  }

  body.theme-material .viaone-hero-copy{
    max-width:660px !important;
  }

  body.theme-material .viaone-hero-title{
    max-width:660px !important;

    font-size:66px !important;
  }
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1100px){

  body.theme-material .viaone-hero-v1{
    width:100% !important;

    min-height:680px !important;

    margin:0 !important;

    padding:
      64px
      24px
      64px !important;

    background-position:
      62% center !important;
  }

  body.theme-material .viaone-hero-copy{
    width:min(590px,62vw) !important;
  }

  body.theme-material .viaone-hero-title{
    font-size:
      clamp(42px,6vw,58px) !important;
  }
}


/* ==========================================================
   MOBILE — temporary composition adaptation
   ========================================================== */

@media(max-width:620px){

  body.theme-material .viaone-hero-v1{
    min-height:720px !important;

    padding:
      48px
      18px
      46px !important;

    align-items:flex-start !important;

    background-size:auto 100% !important;

    background-position:67% center !important;
  }

  body.theme-material .viaone-hero-copy{
    width:100% !important;
    max-width:100% !important;
  }

  body.theme-material .viaone-hero-title{
    max-width:350px !important;

    font-size:
      clamp(36px,10.2vw,46px) !important;

    line-height:1.035 !important;
  }

  body.theme-material .viaone-hero-text{
    max-width:340px !important;

    font-size:15px !important;
  }

  body.theme-material .viaone-hero-actions{
    max-width:330px !important;

    flex-direction:column !important;
  }

  body.theme-material .viaone-btn{
    width:100% !important;
  }

  body.theme-material .viaone-hero-principles{
    max-width:330px !important;
  }
}


/* ==========================================================
   VIAONE HERO V5.2
   CLEAN SEAMLESS EDGES
   ========================================================== */


/* ----------------------------------------------------------
   HEADER
   Completely transparent.
   It simply floats over the native hero artwork.
   ---------------------------------------------------------- */

body.theme-material .viaone-header-v1{
  position:absolute !important;

  top:0 !important;
  left:50% !important;

  transform:translateX(-50%) !important;

  z-index:20 !important;

  width:min(1380px,100%) !important;

  margin:0 !important;

  background:transparent !important;

  border:0 !important;
  border-bottom:0 !important;

  box-shadow:none !important;

  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}


/* ----------------------------------------------------------
   HERO
   Artwork starts from the actual top of viewport.
   Extra top padding only reserves visual room for navigation.
   ---------------------------------------------------------- */

body.theme-material .viaone-hero-v1{
  position:relative !important;

  margin-top:0 !important;

  padding-top:136px !important;

  background-color:#030509 !important;
}


/* ----------------------------------------------------------
   BOTTOM BLEND
   ONE fade only.
   Final colour == surrounding page colour.
   ---------------------------------------------------------- */

body.theme-material .viaone-hero-v1::after{
  content:"" !important;

  position:absolute !important;

  z-index:2 !important;

  left:0 !important;
  right:0 !important;
  bottom:-1px !important;

  height:140px !important;

  pointer-events:none !important;

  background:
    linear-gradient(
      180deg,
      rgba(3,5,9,0) 0%,
      rgba(3,5,9,.08) 25%,
      rgba(3,5,9,.26) 48%,
      rgba(3,5,9,.60) 73%,
      rgba(3,5,9,.88) 90%,
      #030509 100%
    ) !important;
}


/* HTML content remains above the bottom fade */

body.theme-material .viaone-hero-copy{
  position:relative !important;
  z-index:5 !important;
}


/* ----------------------------------------------------------
   FIRST SECTION
   Absolutely no bounded background panel.
   This was the main V5.1 mistake.
   ---------------------------------------------------------- */

body.theme-material .viaone-hero-v1 + .section{
  background:transparent !important;

  box-shadow:none !important;

  border-top:0 !important;
}


/* Make the surrounding page tone identical at the seam */

body.theme-material{
  background:#030509 !important;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media(max-width:1100px){

  body.theme-material .viaone-header-v1{
    width:100% !important;
  }

  body.theme-material .viaone-hero-v1{
    padding-top:125px !important;
  }

  body.theme-material .viaone-hero-v1::after{
    height:125px !important;
  }
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:620px){

  body.theme-material .viaone-hero-v1{
    padding-top:105px !important;
  }

  body.theme-material .viaone-hero-v1::after{
    height:110px !important;
  }
}


/* ==========================================================
   VIAONE HERO V5.3
   FINAL VISUAL POLISH CANDIDATE
   ========================================================== */

:root{
  --viaone-accent-blue:#2563FF;
  --viaone-accent-violet:#5B35F5;
  --viaone-accent-purple:#8B2BE2;
  --viaone-accent-magenta:#E11DBB;

  --viaone-accent-gradient:
    linear-gradient(
      90deg,
      #2563FF 0%,
      #5B35F5 35%,
      #8B2BE2 65%,
      #E11DBB 100%
    );
}


/* ==========================================================
   01 — TITLE
   Slightly less visual mass.
   Size, line-height and composition stay untouched.
   ========================================================== */

body.theme-material .viaone-hero-title{
  font-weight:540 !important;
}


/* ==========================================================
   02 — FINAL BOTTOM BLEND
   Image must disappear BEFORE the physical end of Hero.
   Last part is already pure page background.
   ========================================================== */

body.theme-material .viaone-hero-v1{
  background-color:#030509 !important;
}


body.theme-material .viaone-hero-v1::after{
  content:"" !important;

  position:absolute !important;

  z-index:4 !important;

  left:0 !important;
  right:0 !important;
  bottom:-2px !important;

  height:260px !important;

  pointer-events:none !important;

  background:
    linear-gradient(
      180deg,

      rgba(3,5,9,0) 0%,

      rgba(3,5,9,.025) 10%,

      rgba(3,5,9,.10) 23%,

      rgba(3,5,9,.25) 38%,

      rgba(3,5,9,.47) 53%,

      rgba(3,5,9,.70) 67%,

      rgba(3,5,9,.87) 78%,

      rgba(3,5,9,.96) 87%,

      #030509 94%,

      #030509 100%
    ) !important;
}


/*
  The following section inherits the exact same environment.
  No panel, no stripe, no transition background.
*/

body.theme-material .viaone-hero-v1 + .section{
  background:transparent !important;

  border-top:0 !important;

  box-shadow:none !important;
}


body.theme-material{
  background:#030509 !important;
}


/* Hero content always stays above the fade */

body.theme-material .viaone-hero-copy{
  z-index:6 !important;
}


/* ==========================================================
   03 — VIAONE ACCENT LANGUAGE
   Exact approved blue → violet → magenta palette.
   Used only for micro accents.
   ========================================================== */

body.theme-material
.viaone-hero-principles
span::before{
  width:4px !important;
  height:4px !important;

  background:
    var(--viaone-accent-gradient) !important;

  box-shadow:
    0 0 8px rgba(91,53,245,.18) !important;
}


/*
  Primary CTA uses the SAME hues,
  but deliberately with transparency so the button
  remains calm and premium.
*/

body.theme-material .viaone-btn-primary{
  background:
    linear-gradient(
      90deg,
      rgba(37,99,255,.82) 0%,
      rgba(91,53,245,.80) 35%,
      rgba(139,43,226,.78) 65%,
      rgba(225,29,187,.72) 100%
    ) !important;

  border:
    1px solid rgba(113,82,220,.24) !important;

  box-shadow:
    0 12px 30px rgba(67,52,143,.13) !important;
}


/* Hover remains restrained */

body.theme-material .viaone-btn-primary:hover{
  box-shadow:
    0 15px 34px rgba(75,58,155,.17) !important;
}


/* ==========================================================
   04 — TABLET
   ========================================================== */

@media(max-width:1100px){

  body.theme-material .viaone-hero-v1::after{
    height:220px !important;
  }
}


/* ==========================================================
   05 — MOBILE
   ========================================================== */

@media(max-width:620px){

  body.theme-material .viaone-hero-v1::after{
    height:180px !important;
  }

  body.theme-material .viaone-hero-title{
    font-weight:540 !important;
  }
}


/* ==========================================================
   VIAONE HERO V5.4
   PRIMARY CTA — GRAPHITE + BRAND EDGE
   ========================================================== */

body.theme-material .viaone-btn-primary{
  color:#D7DCE5 !important;

  /*
    First layer = graphite interior.
    Second layer = ViaOne gradient border.
  */
  background:
    linear-gradient(
      145deg,
      rgba(15,18,25,.96),
      rgba(8,11,16,.98)
    ) padding-box,

    linear-gradient(
      90deg,
      #2563FF 0%,
      #5B35F5 35%,
      #8B2BE2 65%,
      #E11DBB 100%
    ) border-box !important;

  border:
    1px solid transparent !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 10px 28px rgba(0,0,0,.17) !important;

  font-weight:650 !important;
}


/* Quiet inner brand light on hover — no RGB fill */

body.theme-material .viaone-btn-primary:hover{
  color:#E2E6ED !important;

  background:
    linear-gradient(
      145deg,
      rgba(22,25,34,.97),
      rgba(10,13,19,.98)
    ) padding-box,

    linear-gradient(
      90deg,
      #2563FF 0%,
      #5B35F5 35%,
      #8B2BE2 65%,
      #E11DBB 100%
    ) border-box !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 12px 30px rgba(63,52,127,.10) !important;

  transform:translateY(-1px) !important;
}


/* Secondary CTA stays deliberately quieter */

body.theme-material .viaone-btn-secondary{
  color:#AEB6C2 !important;

  background:
    rgba(7,10,15,.48) !important;

  border:
    1px solid rgba(255,255,255,.075) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015) !important;
}


body.theme-material .viaone-btn-secondary:hover{
  color:#CBD1DA !important;

  border-color:
    rgba(255,255,255,.11) !important;

  background:
    rgba(13,16,22,.62) !important;

  box-shadow:none !important;

  transform:translateY(-1px) !important;
}


/* ==========================================================
   VIAONE REDESIGN V6
   HERO FINAL SEAM + FIRST CONTENT SYSTEM
   ========================================================== */


/* ==========================================================
   BRAND TOKENS
   ========================================================== */

:root{
  --viaone-blue:#2563FF;
  --viaone-violet:#5B35F5;
  --viaone-purple:#8B2BE2;
  --viaone-magenta:#E11DBB;

  --viaone-gradient:
    linear-gradient(
      90deg,
      #2563FF 0%,
      #5B35F5 35%,
      #8B2BE2 65%,
      #E11DBB 100%
    );
}


/* ==========================================================
   01 — HERO BOTTOM SEAM
   Fade physically continues BELOW the PNG boundary.
   ========================================================== */

body.theme-material .viaone-hero-v1{
  position:relative !important;

  overflow:visible !important;

  z-index:2 !important;
}


body.theme-material .viaone-hero-v1::after{
  content:"" !important;

  position:absolute !important;

  z-index:4 !important;

  left:0 !important;
  right:0 !important;

  /*
    Fade continues inside the next section.
  */
  bottom:-110px !important;

  height:420px !important;

  pointer-events:none !important;

  background:
    linear-gradient(
      180deg,

      rgba(3,5,9,0) 0%,

      rgba(3,5,9,.025) 12%,

      rgba(3,5,9,.11) 27%,

      rgba(3,5,9,.32) 43%,

      rgba(3,5,9,.58) 57%,

      rgba(3,5,9,.79) 68%,

      rgba(3,5,9,.94) 76%,

      #030509 82%,

      #030509 100%
    ) !important;
}


body.theme-material .viaone-hero-copy{
  position:relative !important;
  z-index:6 !important;
}


/* ==========================================================
   02 — HEADER / HERO BUTTON LIFE
   ========================================================== */

body.theme-material .viaone-btn-primary{
  transition:
    transform .24s ease,
    box-shadow .28s ease,
    filter .28s ease !important;
}


body.theme-material .viaone-btn-primary:hover{
  transform:translateY(-2px) !important;

  filter:brightness(1.06) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 13px 34px rgba(0,0,0,.20),
    0 0 28px rgba(37,99,255,.075),
    0 0 42px rgba(91,53,245,.060),
    0 0 55px rgba(225,29,187,.035) !important;
}


body.theme-material .viaone-btn-secondary{
  position:relative !important;

  transition:
    transform .24s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    color .28s ease !important;
}


body.theme-material .viaone-btn-secondary:hover{
  transform:translateY(-2px) !important;

  color:#D5DAE2 !important;

  border-color:rgba(111,94,208,.26) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 0 28px rgba(91,53,245,.055) !important;
}


/* Header CTA gets only a whisper of the brand light */

body.theme-material .viaone-header-v1 .header-btn{
  transition:
    transform .24s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    color .28s ease !important;
}


body.theme-material .viaone-header-v1 .header-btn:hover{
  transform:translateY(-1px) !important;

  color:#D9DEE6 !important;

  border-color:rgba(108,94,200,.22) !important;

  box-shadow:
    0 0 24px rgba(91,53,245,.050),
    0 0 38px rgba(225,29,187,.020) !important;
}


/* Nav gets a small ViaOne line on hover */

body.theme-material .viaone-header-v1 .nav a{
  position:relative !important;
}


body.theme-material .viaone-header-v1 .nav a::after{
  content:"" !important;

  position:absolute !important;

  left:50% !important;
  bottom:1px !important;

  width:0 !important;
  height:1px !important;

  transform:translateX(-50%) !important;

  background:var(--viaone-gradient) !important;

  opacity:.72 !important;

  transition:width .26s ease !important;
}


body.theme-material .viaone-header-v1 .nav a:hover::after{
  width:72% !important;
}


/* ==========================================================
   03 — IDEA SECTION ATMOSPHERE
   ========================================================== */

body.theme-material #idea{
  position:relative !important;

  isolation:isolate !important;

  z-index:5 !important;
}


body.theme-material #idea::before{
  content:"" !important;

  position:absolute !important;

  z-index:0 !important;

  pointer-events:none !important;

  left:50% !important;
  top:-170px !important;

  transform:translateX(-50%) !important;

  width:100vw !important;
  height:calc(100% + 320px) !important;

  background:
    radial-gradient(
      ellipse at 15% 42%,
      rgba(37,99,255,.050),
      transparent 36%
    ),

    radial-gradient(
      ellipse at 88% 58%,
      rgba(91,53,245,.050),
      transparent 35%
    ),

    linear-gradient(
      180deg,
      #030509 0%,
      #070A10 48%,
      #05080D 100%
    ) !important;
}


body.theme-material #idea > *{
  position:relative !important;
  z-index:1 !important;
}


/* ==========================================================
   IDEA CARDS
   ========================================================== */

body.theme-material #idea .cards{
  gap:20px !important;
}


body.theme-material #idea .card{
  position:relative !important;

  overflow:hidden !important;

  min-height:250px !important;

  border:
    1px solid rgba(224,229,237,.070) !important;

  background:
    linear-gradient(
      150deg,
      rgba(25,30,38,.70) 0%,
      rgba(13,17,23,.86) 68%,
      rgba(9,12,17,.92) 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.020),
    0 18px 48px rgba(0,0,0,.10) !important;

  transition:
    transform .30s ease,
    border-color .30s ease,
    box-shadow .30s ease,
    background .30s ease !important;
}


/*
  Soft internal brand light.
  Invisible until hover.
*/

body.theme-material #idea .card::before{
  content:"" !important;

  display:block !important;

  position:absolute !important;

  inset:0 !important;

  opacity:0 !important;

  pointer-events:none !important;

  background:
    radial-gradient(
      circle at 18% 8%,
      rgba(37,99,255,.095),
      transparent 34%
    ),

    radial-gradient(
      circle at 88% 92%,
      rgba(139,43,226,.065),
      transparent 38%
    ) !important;

  transition:opacity .30s ease !important;
}


/* A tiny fragment of the ViaOne gradient, not a full RGB border */

body.theme-material #idea .card::after{
  content:"" !important;

  position:absolute !important;

  top:0 !important;
  left:28px !important;

  width:0 !important;
  height:1px !important;

  opacity:0 !important;

  background:var(--viaone-gradient) !important;

  box-shadow:
    0 0 16px rgba(91,53,245,.11) !important;

  transition:
    width .34s ease,
    opacity .28s ease !important;
}


body.theme-material #idea .card > *{
  position:relative !important;
  z-index:2 !important;
}


body.theme-material #idea .card:hover{
  transform:translateY(-4px) !important;

  border-color:
    rgba(107,103,168,.20) !important;

  background:
    linear-gradient(
      150deg,
      rgba(29,34,43,.76),
      rgba(14,18,25,.90)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.030),
    0 24px 64px rgba(0,0,0,.20),
    0 0 38px rgba(91,53,245,.035) !important;
}


body.theme-material #idea .card:hover::before{
  opacity:1 !important;
}


body.theme-material #idea .card:hover::after{
  width:42% !important;
  opacity:.82 !important;
}


/* Numbers become part of the identity */

body.theme-material #idea .card .num{
  display:inline-block !important;

  background:var(--viaone-gradient) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;

  opacity:.68 !important;

  font-weight:700 !important;

  transition:opacity .28s ease !important;
}


body.theme-material #idea .card:hover .num{
  opacity:1 !important;
}


/* Icon quietly responds too */

body.theme-material #idea .card .icon{
  transition:
    border-color .28s ease,
    color .28s ease,
    box-shadow .28s ease,
    transform .28s ease !important;
}


body.theme-material #idea .card:hover .icon{
  transform:translateY(-2px) !important;

  color:#AEB7C8 !important;

  border-color:
    rgba(105,103,170,.20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 0 24px rgba(91,53,245,.04) !important;
}


/* ==========================================================
   04 — HOW SECTION ATMOSPHERE
   ========================================================== */

body.theme-material #how{
  position:relative !important;

  isolation:isolate !important;

  z-index:3 !important;
}


body.theme-material #how::before{
  content:"" !important;

  position:absolute !important;

  z-index:0 !important;

  pointer-events:none !important;

  left:50% !important;
  top:-140px !important;

  transform:translateX(-50%) !important;

  width:100vw !important;
  height:calc(100% + 280px) !important;

  background:
    radial-gradient(
      ellipse at 78% 48%,
      rgba(61,74,126,.065),
      transparent 36%
    ),

    radial-gradient(
      ellipse at 26% 72%,
      rgba(91,53,245,.032),
      transparent 35%
    ),

    linear-gradient(
      180deg,
      #05080D 0%,
      #080B11 48%,
      #05080D 100%
    ) !important;
}


body.theme-material #how > *{
  position:relative !important;
  z-index:1 !important;
}


/* ==========================================================
   HOW — LEFT NAV
   ========================================================== */

body.theme-material #how .how-nav > div{
  position:relative !important;

  overflow:hidden !important;

  transition:
    transform .26s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease !important;
}


body.theme-material #how .how-nav > div::before{
  content:"" !important;

  position:absolute !important;

  left:0 !important;
  top:20% !important;
  bottom:20% !important;

  width:2px !important;

  border-radius:99px !important;

  background:
    var(--viaone-gradient) !important;

  opacity:0 !important;

  transition:opacity .26s ease !important;
}


body.theme-material #how .how-nav > div:hover{
  transform:translateX(4px) !important;

  border-color:
    rgba(106,102,167,.19) !important;

  background:
    linear-gradient(
      145deg,
      rgba(28,33,41,.74),
      rgba(14,18,24,.88)
    ) !important;

  box-shadow:
    0 12px 32px rgba(0,0,0,.12) !important;
}


body.theme-material #how .how-nav > div:hover::before{
  opacity:.8 !important;
}


body.theme-material #how .how-nav span{
  display:inline-block !important;

  background:
    var(--viaone-gradient) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;

  opacity:.70 !important;

  font-weight:750 !important;
}


body.theme-material #how .how-nav > div:hover span{
  opacity:1 !important;
}


/* ==========================================================
   HOW — ROUTE PANEL
   ========================================================== */

body.theme-material #how .route-panel{
  position:relative !important;

  overflow:hidden !important;

  background:
    linear-gradient(
      150deg,
      rgba(19,24,31,.74),
      rgba(9,12,17,.86)
    ) !important;

  border:
    1px solid rgba(225,230,238,.060) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 28px 80px rgba(0,0,0,.14) !important;
}


/*
  One atmospheric field behind all four steps.
  Not four individual pink glows.
*/

body.theme-material #how .route-panel::after{
  content:"" !important;

  position:absolute !important;

  z-index:0 !important;

  width:70% !important;
  height:55% !important;

  right:-20% !important;
  bottom:-26% !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(37,99,255,.055),
      rgba(91,53,245,.032) 44%,
      transparent 72%
    ) !important;

  filter:blur(35px) !important;

  pointer-events:none !important;
}


body.theme-material #how .route-step,
body.theme-material #how .route-arrow{
  position:relative !important;
  z-index:1 !important;
}


/* ==========================================================
   HOW — STEPS
   ========================================================== */

body.theme-material #how .route-step{
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease !important;
}


body.theme-material #how .route-step:hover{
  transform:translateX(4px) !important;

  border-color:
    rgba(106,102,167,.18) !important;

  background:
    linear-gradient(
      145deg,
      rgba(29,34,42,.76),
      rgba(15,19,25,.89)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.027),
    0 18px 44px rgba(0,0,0,.15),
    0 0 32px rgba(91,53,245,.028) !important;
}


/* Step label stays quiet until interaction */

body.theme-material #how .route-step small{
  transition:color .26s ease !important;
}


body.theme-material #how .route-step:hover small{
  display:inline-block !important;

  background:
    var(--viaone-gradient) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;
}


/* Icon gets a very subtle response */

body.theme-material #how .route-icon{
  transition:
    transform .26s ease,
    border-color .26s ease,
    box-shadow .26s ease,
    color .26s ease !important;
}


body.theme-material #how .route-step:hover .route-icon{
  transform:scale(1.035) !important;

  color:#AEB6C6 !important;

  border-color:
    rgba(106,103,170,.20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 0 22px rgba(91,53,245,.040) !important;
}


/* Connecting route gets ViaOne colour,
   but intentionally very faint. */

body.theme-material #how .route-arrow::before{
  background:
    linear-gradient(
      180deg,
      rgba(37,99,255,.30),
      rgba(91,53,245,.28),
      rgba(139,43,226,.24),
      rgba(225,29,187,.18)
    ) !important;
}


body.theme-material #how .route-arrow::after{
  border-right:
    1px solid rgba(139,43,226,.38) !important;

  border-bottom:
    1px solid rgba(139,43,226,.38) !important;
}


/* ==========================================================
   05 — SECTION TYPOGRAPHY
   ========================================================== */

body.theme-material #idea .title,
body.theme-material #how .title{
  color:#C9CED6 !important;

  font-weight:550 !important;
}


body.theme-material #idea .desc,
body.theme-material #how .desc{
  color:#858F9D !important;

  max-width:760px !important;
}


body.theme-material #idea .kicker,
body.theme-material #how .kicker{
  color:#788598 !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1100px){

  body.theme-material .viaone-hero-v1::after{
    bottom:-80px !important;

    height:340px !important;
  }
}


@media(max-width:620px){

  body.theme-material .viaone-hero-v1::after{
    bottom:-55px !important;

    height:260px !important;
  }


  body.theme-material #idea .card:hover,
  body.theme-material #how .route-step:hover,
  body.theme-material #how .how-nav > div:hover{
    transform:none !important;
  }
}


@media(prefers-reduced-motion:reduce){

  body.theme-material #idea .card,
  body.theme-material #how .route-step,
  body.theme-material #how .how-nav > div,
  body.theme-material .viaone-btn{
    transition:none !important;
  }
}


/* ==========================================================
   VIAONE V6.1
   SEAM CORRECTION
   ========================================================== */


/* ==========================================================
   01 — REMOVE SECTION RECTANGLES

   Old .section has contain:layout paint.
   Full-screen pseudo backgrounds attached to #idea/#how
   therefore become visibly clipped panels.

   Atmosphere must not live on bounded sections.
   ========================================================== */

body.theme-material #idea::before,
body.theme-material #how::before{
  display:none !important;
}


body.theme-material #idea,
body.theme-material #how{
  background:transparent !important;

  box-shadow:none !important;

  contain:none !important;

  isolation:auto !important;

  z-index:auto !important;
}


/* ==========================================================
   02 — GLOBAL PAGE ATMOSPHERE

   One continuous environment behind the whole site.
   No section borders, no separate tonal rectangles.
   ========================================================== */

body.theme-material .bg{
  background:
    radial-gradient(
      ellipse at 18% 24%,
      rgba(37,99,255,.030),
      transparent 35%
    ),

    radial-gradient(
      ellipse at 82% 62%,
      rgba(91,53,245,.025),
      transparent 37%
    ),

    radial-gradient(
      ellipse at 54% 88%,
      rgba(139,43,226,.014),
      transparent 38%
    ),

    linear-gradient(
      180deg,
      #030509 0%,
      #05080D 42%,
      #070A10 68%,
      #04070B 100%
    ) !important;
}


/* ==========================================================
   03 — HERO BACKGROUND FADES ITSELF

   This is the important change.

   The fade is now part of the background stack itself,
   so there is no physical PNG edge to cover later.
   ========================================================== */

body.theme-material .viaone-hero-v1{
  overflow:hidden !important;

  background-color:#030509 !important;

  background-image:

    linear-gradient(
      180deg,

      rgba(3,5,9,0) 0%,
      rgba(3,5,9,0) 58%,

      rgba(3,5,9,.035) 65%,
      rgba(3,5,9,.11) 71%,
      rgba(3,5,9,.24) 77%,
      rgba(3,5,9,.43) 83%,
      rgba(3,5,9,.65) 88%,
      rgba(3,5,9,.82) 92%,
      rgba(3,5,9,.94) 96%,

      #030509 99%,
      #030509 100%
    ),

    url("/hero_web2026.png") !important;

  background-repeat:
    no-repeat,
    no-repeat !important;

  background-position:
    center center,
    center center !important;

  background-size:
    100% 100%,
    cover !important;
}


/* ==========================================================
   04 — REAL SOFT BLUR

   Unlike V6, this actually uses backdrop-filter.
   It stays INSIDE Hero, so stacking with #idea is irrelevant.
   ========================================================== */

body.theme-material .viaone-hero-v1::after{
  content:"" !important;

  position:absolute !important;

  z-index:4 !important;

  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  height:190px !important;

  pointer-events:none !important;

  background:
    linear-gradient(
      180deg,

      rgba(3,5,9,0) 0%,
      rgba(3,5,9,.02) 18%,
      rgba(3,5,9,.10) 38%,
      rgba(3,5,9,.28) 58%,
      rgba(3,5,9,.58) 77%,
      rgba(3,5,9,.88) 92%,
      #030509 100%
    ) !important;

  -webkit-backdrop-filter:
    blur(10px) !important;

  backdrop-filter:
    blur(10px) !important;

  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0,0,0,.18) 22%,
      rgba(0,0,0,.65) 48%,
      #000 72%,
      #000 100%
    ) !important;

  mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0,0,0,.18) 22%,
      rgba(0,0,0,.65) 48%,
      #000 72%,
      #000 100%
    ) !important;
}


/* Text / buttons stay over the fade */

body.theme-material .viaone-hero-copy{
  position:relative !important;
  z-index:6 !important;
}


/* ==========================================================
   05 — FIRST SECTION

   Exact same base as the finished Hero.
   No background panel whatsoever.
   ========================================================== */

body.theme-material .viaone-hero-v1 + #idea,
body.theme-material #idea{
  background:transparent !important;

  border-top:0 !important;

  box-shadow:none !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1100px){

  body.theme-material .viaone-hero-v1::after{
    height:165px !important;

    -webkit-backdrop-filter:
      blur(8px) !important;

    backdrop-filter:
      blur(8px) !important;
  }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:620px){

  body.theme-material .viaone-hero-v1::after{
    height:135px !important;

    -webkit-backdrop-filter:
      blur(6px) !important;

    backdrop-filter:
      blur(6px) !important;
  }
}


/* ==========================================================
   VIAONE V6.2
   Seamless Hero + Smooth Interaction Pass
   ========================================================== */


/* ==========================================================
   01 — HERO: TRUE ALPHA FADE

   Stop painting the image as the element background.
   The image becomes its own layer and literally fades
   to transparent, exposing the SAME page background below.
   ========================================================== */

body.theme-material .viaone-hero-v1{
  position:relative !important;

  isolation:isolate !important;

  overflow:hidden !important;

  background:
    transparent !important;
}


/* Actual Hero artwork */

body.theme-material .viaone-hero-v1::before{
  content:"" !important;

  position:absolute !important;

  z-index:0 !important;

  inset:0 !important;

  pointer-events:none !important;

  background:
    url("/hero_web2026.png")
    center center /
    cover
    no-repeat !important;


  /*
    This is the important part:
    actual alpha of the IMAGE disappears.
  */

  -webkit-mask-image:
    linear-gradient(
      180deg,

      #000 0%,
      #000 65%,

      rgba(0,0,0,.98) 70%,
      rgba(0,0,0,.90) 76%,
      rgba(0,0,0,.72) 82%,
      rgba(0,0,0,.48) 88%,
      rgba(0,0,0,.24) 94%,

      transparent 100%
    ) !important;

  mask-image:
    linear-gradient(
      180deg,

      #000 0%,
      #000 65%,

      rgba(0,0,0,.98) 70%,
      rgba(0,0,0,.90) 76%,
      rgba(0,0,0,.72) 82%,
      rgba(0,0,0,.48) 88%,
      rgba(0,0,0,.24) 94%,

      transparent 100%
    ) !important;
}


/*
  Very soft optical blur near the end.
  It no longer tries to hide a colour seam.
*/

body.theme-material .viaone-hero-v1::after{
  content:"" !important;

  position:absolute !important;

  z-index:1 !important;

  left:0 !important;
  right:0 !important;
  bottom:0 !important;

  height:170px !important;

  pointer-events:none !important;

  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(3,5,9,.015) 30%,
      rgba(3,5,9,.055) 58%,
      rgba(3,5,9,.12) 82%,
      rgba(3,5,9,.18) 100%
    ) !important;

  -webkit-backdrop-filter:
    blur(7px) !important;

  backdrop-filter:
    blur(7px) !important;

  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent,
      rgba(0,0,0,.18) 28%,
      #000 75%
    ) !important;

  mask-image:
    linear-gradient(
      180deg,
      transparent,
      rgba(0,0,0,.18) 28%,
      #000 75%
    ) !important;
}


body.theme-material .viaone-hero-copy{
  position:relative !important;
  z-index:5 !important;
}


/* ==========================================================
   02 — REMOVE GRADIENT SNAP FROM HOVER

   Do NOT animate gradient backgrounds.
   Surface stays constant.
   Only interpolatable properties move.
   ========================================================== */

body.theme-material #idea .card,
body.theme-material #how .route-step,
body.theme-material #how .how-nav > div,
body.theme-material .tech-grid .card,
body.theme-material .experience-actions div,
body.theme-material .guide-card{

  transition:
    transform .34s cubic-bezier(.2,.7,.2,1),
    border-color .34s ease,
    box-shadow .34s ease,
    color .28s ease,
    opacity .28s ease !important;
}


/* ==========================================================
   03 — IDEA CARDS
   ========================================================== */

body.theme-material #idea .card:hover{

  /*
    Keep exactly the same surface.
    No gradient swap = no snap.
  */

  background:
    linear-gradient(
      150deg,
      rgba(25,30,38,.70) 0%,
      rgba(13,17,23,.86) 68%,
      rgba(9,12,17,.92) 100%
    ) !important;

  transform:
    translateY(-3px) !important;

  border-color:
    rgba(101,101,164,.22) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.028),
    0 22px 55px rgba(0,0,0,.18),
    0 0 30px rgba(91,53,245,.035) !important;
}


/* Existing overlay now does all the colour animation */

body.theme-material #idea .card::before{
  transition:
    opacity .38s ease !important;
}


body.theme-material #idea .card::after{
  transition:
    width .42s cubic-bezier(.2,.7,.2,1),
    opacity .32s ease !important;
}


/* ==========================================================
   04 — HOW NAV
   ========================================================== */

body.theme-material #how .how-nav > div:hover{

  background:
    linear-gradient(
      145deg,
      rgba(25,30,37,.73),
      rgba(15,19,25,.83)
    ) !important;

  transform:
    translateX(3px) !important;

  border-color:
    rgba(103,102,166,.20) !important;

  box-shadow:
    0 12px 30px rgba(0,0,0,.12),
    0 0 24px rgba(91,53,245,.025) !important;
}


body.theme-material #how .how-nav > div::before{
  transition:
    opacity .34s ease !important;
}


/* ==========================================================
   05 — HOW ROUTE STEPS
   ========================================================== */

body.theme-material #how .route-step:hover{

  background:
    linear-gradient(
      145deg,
      rgba(25,30,37,.73),
      rgba(15,19,25,.83)
    ) !important;

  transform:
    translateX(3px) !important;

  border-color:
    rgba(103,102,166,.19) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 16px 40px rgba(0,0,0,.14),
    0 0 28px rgba(91,53,245,.025) !important;
}


/* ==========================================================
   06 — TECHNOLOGY CARDS
   Smooth response for Modern Stack.
   ========================================================== */

body.theme-material .tech-grid .card{
  position:relative !important;

  overflow:hidden !important;
}


body.theme-material .tech-grid .card::after{
  content:"" !important;

  position:absolute !important;

  left:24px !important;
  top:0 !important;

  width:0 !important;
  height:1px !important;

  opacity:0 !important;

  background:
    var(--viaone-gradient) !important;

  box-shadow:
    0 0 14px rgba(91,53,245,.10) !important;

  transition:
    width .42s cubic-bezier(.2,.7,.2,1),
    opacity .30s ease !important;
}


body.theme-material .tech-grid .card:hover{

  /*
    Keep static material surface.
  */

  background:
    linear-gradient(
      145deg,
      rgba(25,30,37,.73),
      rgba(15,19,25,.83)
    ) !important;

  transform:
    translateY(-3px) !important;

  border-color:
    rgba(103,102,166,.20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.026),
    0 20px 50px rgba(0,0,0,.16),
    0 0 28px rgba(91,53,245,.028) !important;
}


body.theme-material .tech-grid .card:hover::after{
  width:44% !important;
  opacity:.78 !important;
}


/* ==========================================================
   07 — EXPERIENCE / VIAONE BOT ACTIONS
   Previously absolutely static.
   ========================================================== */

body.theme-material .experience-actions div{
  position:relative !important;

  overflow:hidden !important;

  cursor:default !important;

  background:
    rgba(8,11,16,.58) !important;
}


body.theme-material .experience-actions div::before{
  content:"" !important;

  position:absolute !important;

  left:0 !important;
  top:18% !important;
  bottom:18% !important;

  width:2px !important;

  border-radius:99px !important;

  opacity:0 !important;

  background:
    var(--viaone-gradient) !important;

  transition:
    opacity .30s ease !important;
}


body.theme-material .experience-actions div:hover{

  transform:
    translateX(4px) !important;

  border-color:
    rgba(104,102,169,.20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.020),
    0 12px 30px rgba(0,0,0,.12),
    0 0 25px rgba(91,53,245,.030) !important;

  color:#D5DAE2 !important;
}


body.theme-material .experience-actions div:hover::before{
  opacity:.78 !important;
}


/* Give the whole ViaOne Bot card a calmer hover */

body.theme-material .experience-card{
  transition:
    transform .36s cubic-bezier(.2,.7,.2,1),
    border-color .34s ease,
    box-shadow .34s ease !important;
}


body.theme-material .experience-card:hover{
  transform:
    translateY(-2px) !important;

  border-color:
    rgba(103,102,166,.17) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.022),
    0 25px 65px rgba(0,0,0,.16),
    0 0 34px rgba(91,53,245,.025) !important;
}


/* ==========================================================
   08 — DEVICE GUIDES
   Fix the screenshot problem:
   opening ONE card must not stretch the other three.
   ========================================================== */

body.theme-material .platforms{
  align-items:start !important;
}


body.theme-material .guide-card{
  align-self:start !important;

  height:auto !important;

  min-height:0 !important;

  cursor:default !important;
}


/*
  Don't jump the platform card aggressively on hover.
*/

body.theme-material .guide-card:hover{
  transform:
    translateY(-2px) !important;

  border-color:
    rgba(103,102,166,.17) !important;

  box-shadow:
    0 16px 40px rgba(0,0,0,.13),
    0 0 26px rgba(91,53,245,.025) !important;
}


/*
  Active card no longer swaps to an instant pink background.
*/

body.theme-material .guide-card.active{

  background:
    linear-gradient(
      145deg,
      rgba(25,30,37,.73),
      rgba(15,19,25,.83)
    ) !important;

  border-color:
    rgba(104,101,169,.22) !important;

  box-shadow:
    0 18px 48px rgba(0,0,0,.15),
    0 0 30px rgba(91,53,245,.030) !important;
}


/* ==========================================================
   GUIDE ACCORDION MOTION
   ========================================================== */

body.theme-material .guide-content{

  max-height:0;

  margin-top:0 !important;

  opacity:0;

  overflow:hidden;

  transition:
    max-height .48s cubic-bezier(.22,.72,.18,1),
    margin-top .34s ease,
    opacity .25s ease !important;
}


body.theme-material .guide-card.active .guide-content{

  margin-top:20px !important;

  opacity:1 !important;
}


/* Button itself also feels alive */

body.theme-material .guide-card .guide-btn{

  transition:
    transform .28s ease,
    border-color .30s ease,
    color .30s ease,
    box-shadow .30s ease,
    background-color .30s ease !important;
}


body.theme-material .guide-card .guide-btn:hover{

  transform:
    translateY(-1px) !important;

  color:#D5DAE3 !important;

  background:
    rgba(15,18,25,.72) !important;

  border-color:
    rgba(105,99,176,.25) !important;

  box-shadow:
    0 0 24px rgba(91,53,245,.045) !important;
}


/* Instruction steps */

body.theme-material .guide-step{

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease !important;
}


body.theme-material .guide-step:hover{

  transform:
    translateX(2px) !important;

  border-color:
    rgba(104,102,166,.17) !important;

  box-shadow:
    0 8px 22px rgba(0,0,0,.10) !important;
}


/* Step numbers use ViaOne colour intelligently */

body.theme-material .guide-step span{

  background:
    linear-gradient(
      145deg,
      rgba(37,99,255,.10),
      rgba(91,53,245,.08),
      rgba(225,29,187,.06)
    ) !important;

  color:#ABB3C3 !important;

  border:
    1px solid rgba(109,98,182,.11) !important;
}


/* ==========================================================
   09 — REDUCED MOTION
   ========================================================== */

@media(prefers-reduced-motion:reduce){

  body.theme-material #idea .card,
  body.theme-material #how .route-step,
  body.theme-material #how .how-nav > div,
  body.theme-material .tech-grid .card,
  body.theme-material .experience-actions div,
  body.theme-material .experience-card,
  body.theme-material .guide-card,
  body.theme-material .guide-content,
  body.theme-material .guide-step{

    transition:none !important;
  }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:620px){

  body.theme-material .viaone-hero-v1::after{
    height:120px !important;

    -webkit-backdrop-filter:
      blur(5px) !important;

    backdrop-filter:
      blur(5px) !important;
  }


  /*
    No unnecessary translation on touch layouts.
  */

  body.theme-material #idea .card:hover,
  body.theme-material #how .route-step:hover,
  body.theme-material #how .how-nav > div:hover,
  body.theme-material .tech-grid .card:hover,
  body.theme-material .experience-actions div:hover,
  body.theme-material .guide-card:hover,
  body.theme-material .guide-step:hover{

    transform:none !important;
  }
}


/* ==========================================================
   VIAONE V6.3 — FINAL MOTION / HEADER POLISH
   ========================================================== */


/* ==========================================================
   01 — NEW ASH / METAL HEADER MARK
   Source image has a large canvas.
   Crop optically through the wrapper.
   ========================================================== */

body.theme-material .landing-nav-mark{
  position:relative !important;

  width:30px !important;
  height:32px !important;

  overflow:hidden !important;

  flex:0 0 30px !important;

  background:transparent !important;

  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}


body.theme-material .landing-nav-mark img{
  position:absolute !important;

  left:50% !important;
  top:50% !important;

  width:52px !important;
  max-width:none !important;
  height:auto !important;

  transform:
    translate(-50%,-50%) !important;

  /*
    Black source background visually disappears
    into the dark Hero/header environment.
  */

  mix-blend-mode:screen !important;

  opacity:.78 !important;

  filter:
    grayscale(1)
    brightness(.72)
    contrast(1.08) !important;
}


/* ==========================================================
   02 — MOTION STANDARD
   Never animate gradient backgrounds.
   ========================================================== */

body.theme-material .eco-tab,
body.theme-material .faq-item,
body.theme-material .platform,
body.theme-material .guide-card,
body.theme-material .viaone-btn-primary{

  transition:
    transform .34s cubic-bezier(.2,.7,.2,1),
    border-color .34s ease,
    box-shadow .34s ease,
    opacity .30s ease,
    color .30s ease,
    filter .30s ease !important;
}


/* ==========================================================
   03 — PRIMARY HERO CTA
   Same material at rest and hover.
   Only light / motion changes.
   ========================================================== */

body.theme-material .viaone-btn-primary,
body.theme-material .viaone-btn-primary:hover{

  background:
    linear-gradient(
      145deg,
      rgba(15,18,25,.96),
      rgba(8,11,16,.98)
    ) padding-box,

    linear-gradient(
      90deg,
      #2563FF 0%,
      #5B35F5 35%,
      #8B2BE2 65%,
      #E11DBB 100%
    ) border-box !important;

  border:
    1px solid transparent !important;
}


body.theme-material .viaone-btn-primary:hover{
  transform:
    translateY(-2px) !important;

  filter:
    brightness(1.07) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 30px rgba(0,0,0,.20),
    0 0 26px rgba(37,99,255,.07),
    0 0 38px rgba(91,53,245,.055),
    0 0 48px rgba(225,29,187,.025) !important;
}


/* ==========================================================
   04 — ECOSYSTEM TABS
   Fix active-gradient snap.
   ========================================================== */

body.theme-material .eco-tab{
  position:relative !important;

  overflow:hidden !important;

  background:
    linear-gradient(
      145deg,
      rgba(22,27,34,.70),
      rgba(11,15,20,.86)
    ) !important;

  border:
    1px solid rgba(255,255,255,.065) !important;
}


body.theme-material .eco-tab::before{
  content:"" !important;

  position:absolute !important;

  inset:0 !important;

  opacity:0 !important;

  pointer-events:none !important;

  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(37,99,255,.085),
      transparent 34%
    ),

    radial-gradient(
      circle at 88% 88%,
      rgba(139,43,226,.050),
      transparent 38%
    ) !important;

  transition:
    opacity .36s ease !important;
}


body.theme-material .eco-tab::after{
  content:"" !important;

  position:absolute !important;

  left:0 !important;
  top:22% !important;
  bottom:22% !important;

  width:2px !important;

  border-radius:99px !important;

  opacity:0 !important;

  background:
    linear-gradient(
      180deg,
      #2563FF,
      #5B35F5,
      #8B2BE2,
      #E11DBB
    ) !important;

  transition:
    opacity .34s ease !important;
}


body.theme-material .eco-tab strong,
body.theme-material .eco-tab span{
  position:relative !important;
  z-index:2 !important;
}


body.theme-material .eco-tab:hover{
  transform:
    translateX(3px) !important;

  border-color:
    rgba(104,102,168,.18) !important;

  box-shadow:
    0 12px 32px rgba(0,0,0,.12),
    0 0 24px rgba(91,53,245,.025) !important;
}


body.theme-material .eco-tab:hover::before{
  opacity:.55 !important;
}


body.theme-material .eco-tab.active{
  /*
    Same base background as idle.
    No gradient replacement.
  */
  background:
    linear-gradient(
      145deg,
      rgba(22,27,34,.70),
      rgba(11,15,20,.86)
    ) !important;

  border-color:
    rgba(105,101,171,.22) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.020),
    0 12px 34px rgba(0,0,0,.13) !important;
}


body.theme-material .eco-tab.active::before{
  opacity:.72 !important;
}


body.theme-material .eco-tab.active::after{
  opacity:.88 !important;
}


/* ==========================================================
   05 — FAQ
   Fix active background snap + improve opening motion.
   ========================================================== */

body.theme-material .faq-item{
  position:relative !important;

  overflow:hidden !important;

  background:
    linear-gradient(
      145deg,
      rgba(22,27,34,.66),
      rgba(11,15,20,.84)
    ) !important;

  border:
    1px solid rgba(255,255,255,.060) !important;
}


body.theme-material .faq-item::before{
  content:"" !important;

  position:absolute !important;

  inset:0 !important;

  opacity:0 !important;

  pointer-events:none !important;

  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(37,99,255,.065),
      transparent 34%
    ),

    radial-gradient(
      circle at 90% 100%,
      rgba(139,43,226,.040),
      transparent 38%
    ) !important;

  transition:
    opacity .38s ease !important;
}


body.theme-material .faq-question,
body.theme-material .faq-answer{
  position:relative !important;

  z-index:2 !important;
}


body.theme-material .faq-item:hover{
  transform:
    translateY(-2px) !important;

  border-color:
    rgba(104,102,168,.16) !important;

  box-shadow:
    0 14px 36px rgba(0,0,0,.12) !important;
}


body.theme-material .faq-item:hover::before{
  opacity:.42 !important;
}


body.theme-material .faq-item.active{
  background:
    linear-gradient(
      145deg,
      rgba(22,27,34,.66),
      rgba(11,15,20,.84)
    ) !important;

  border-color:
    rgba(105,101,171,.20) !important;

  box-shadow:
    0 16px 40px rgba(0,0,0,.13) !important;
}


body.theme-material .faq-item.active::before{
  opacity:.64 !important;
}


body.theme-material .faq-answer{
  overflow:hidden !important;

  transition:
    max-height .46s cubic-bezier(.22,.72,.18,1) !important;
}


body.theme-material .faq-plus{
  transition:
    transform .34s cubic-bezier(.2,.7,.2,1),
    border-color .30s ease,
    box-shadow .30s ease,
    color .30s ease !important;
}


body.theme-material .faq-item.active .faq-plus{
  transform:
    rotate(45deg) !important;

  border-color:
    rgba(105,97,180,.24) !important;

  box-shadow:
    0 0 20px rgba(91,53,245,.045) !important;
}


/* ==========================================================
   06 — PLATFORM / GUIDE CARDS
   Kill remaining legacy -8px hover.
   ========================================================== */

body.theme-material .platform,
body.theme-material .guide-card{

  background:
    linear-gradient(
      145deg,
      rgba(25,30,37,.73),
      rgba(15,19,25,.83)
    ) !important;
}


body.theme-material .platform:hover,
body.theme-material .guide-card:hover{

  transform:
    translateY(-2px) !important;

  background:
    linear-gradient(
      145deg,
      rgba(25,30,37,.73),
      rgba(15,19,25,.83)
    ) !important;

  border-color:
    rgba(103,102,166,.17) !important;

  box-shadow:
    0 15px 38px rgba(0,0,0,.13),
    0 0 24px rgba(91,53,245,.022) !important;
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media(prefers-reduced-motion:reduce){

  body.theme-material .eco-tab,
  body.theme-material .faq-item,
  body.theme-material .faq-answer,
  body.theme-material .faq-plus,
  body.theme-material .platform,
  body.theme-material .guide-card,
  body.theme-material .viaone-btn-primary{

    transition:none !important;
  }
}


/* ==========================================================
   VIAONE V6.4 — TRANSPARENT METAL MARK
   ========================================================== */


/* ------------------------------------------
   HEADER MARK
   ------------------------------------------ */

body.theme-material
.viaone-header-v1
.landing-nav-mark{
  width:27px !important;
  height:31px !important;

  flex:0 0 27px !important;

  overflow:hidden !important;

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}


body.theme-material
.viaone-header-v1
.landing-nav-mark img{
  position:absolute !important;

  left:50% !important;
  top:50% !important;

  width:auto !important;
  height:30px !important;

  max-width:none !important;

  object-fit:contain !important;

  transform:
    translate(-50%,-50%) !important;

  opacity:.90 !important;

  mix-blend-mode:normal !important;

  filter:none !important;
}


/* ------------------------------------------
   VIAONE BOT MARK
   Same asset, larger optical size.
   ------------------------------------------ */

body.theme-material
.experience-bot-head
.landing-nav-mark{
  position:relative !important;

  width:38px !important;
  height:42px !important;

  flex:0 0 38px !important;

  overflow:hidden !important;

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
}


body.theme-material
.experience-bot-head
.landing-nav-mark img{
  position:absolute !important;

  left:50% !important;
  top:50% !important;

  width:auto !important;
  height:40px !important;

  max-width:none !important;

  object-fit:contain !important;

  transform:
    translate(-50%,-50%) !important;

  opacity:.82 !important;

  mix-blend-mode:normal !important;

  filter:none !important;
}


/* Metallic asset should stay calm on hover */

body.theme-material
.experience-card:hover
.experience-bot-head
.landing-nav-mark img{
  opacity:.92 !important;

  filter:
    drop-shadow(
      0 0 12px rgba(91,53,245,.055)
    ) !important;

  transition:
    opacity .30s ease,
    filter .30s ease !important;
}


/* Mobile */

@media(max-width:620px){

  body.theme-material
  .viaone-header-v1
  .landing-nav-mark{
    width:25px !important;
    height:29px !important;
    flex-basis:25px !important;
  }

  body.theme-material
  .viaone-header-v1
  .landing-nav-mark img{
    height:28px !important;
  }

  body.theme-material
  .experience-bot-head
  .landing-nav-mark{
    width:35px !important;
    height:39px !important;
    flex-basis:35px !important;
  }

  body.theme-material
  .experience-bot-head
  .landing-nav-mark img{
    height:37px !important;
  }
}


/* ==========================================================
   VIAONE V6.6 — FINAL SMOOTH MOTION
   Base: V6.4

   RULE:
   - same surface in REST and HOVER
   - transforms interpolate from explicit zero state
   - gradients appear through opacity only
   - no background-gradient swaps
   ========================================================== */


/* ==========================================================
   MOTION TOKENS
   ========================================================== */

body.theme-material #idea .card,
body.theme-material #how .how-nav > div,
body.theme-material #how .route-step,
body.theme-material .tech-grid .card,
body.theme-material .experience-actions div,
body.theme-material .eco-tab,
body.theme-material .platform,
body.theme-material .guide-card,
body.theme-material .faq-item {

  transition:
    transform .36s cubic-bezier(.22,.72,.20,1),
    border-color .34s ease,
    box-shadow .36s ease,
    color .30s ease,
    opacity .30s ease,
    filter .30s ease !important;
}


/* ==========================================================
   IDEA
   ========================================================== */

body.theme-material #idea .card,
body.theme-material #idea .card:hover {

  background:
    linear-gradient(
      150deg,
      rgba(25,30,38,.70) 0%,
      rgba(13,17,23,.86) 68%,
      rgba(9,12,17,.92) 100%
    ) !important;
}

body.theme-material #idea .card {
  transform:translateY(0) !important;
}

body.theme-material #idea .card:hover {
  transform:translateY(-3px) !important;
}

body.theme-material #idea .card .icon {
  transform:translateY(0) !important;

  transition:
    transform .34s cubic-bezier(.22,.72,.20,1),
    border-color .30s ease,
    color .30s ease,
    box-shadow .32s ease !important;
}

body.theme-material #idea .card:hover .icon {
  transform:translateY(-2px) !important;
}


/* ==========================================================
   HOW — LEFT NAV

   IMPORTANT:
   Identical material surface at rest and hover.
   ========================================================== */

body.theme-material #how .how-nav > div,
body.theme-material #how .how-nav > div:hover {

  background:
    linear-gradient(
      145deg,
      rgba(25,30,37,.73) 0%,
      rgba(15,19,25,.83) 52%,
      rgba(11,14,19,.91) 100%
    ) !important;
}

body.theme-material #how .how-nav > div {
  transform:translateX(0) !important;
}

body.theme-material #how .how-nav > div:hover {
  transform:translateX(3px) !important;
}

body.theme-material #how .how-nav > div::before {
  transition:
    opacity .36s cubic-bezier(.22,.72,.20,1) !important;
}

body.theme-material #how .how-nav span {
  transition:
    opacity .32s ease !important;
}


/* ==========================================================
   HOW — ROUTE STEPS
   ========================================================== */

body.theme-material #how .route-step,
body.theme-material #how .route-step:hover {

  background:
    linear-gradient(
      145deg,
      rgba(25,30,37,.73) 0%,
      rgba(15,19,25,.83) 52%,
      rgba(11,14,19,.91) 100%
    ) !important;
}

body.theme-material #how .route-step {
  transform:translateX(0) !important;
}

body.theme-material #how .route-step:hover {
  transform:translateX(3px) !important;
}


/*
   Do not switch text rendering mode only on hover.
   Gradient exists permanently and only opacity changes.
*/

body.theme-material #how .route-step small {

  display:inline-block !important;

  background:
    var(--viaone-gradient) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  color:transparent !important;

  opacity:.68 !important;

  transition:
    opacity .32s ease !important;
}

body.theme-material #how .route-step:hover small {
  opacity:1 !important;
}


body.theme-material #how .route-icon {

  transform:scale(1) !important;

  transition:
    transform .36s cubic-bezier(.22,.72,.20,1),
    border-color .32s ease,
    box-shadow .32s ease,
    color .30s ease !important;
}

body.theme-material #how .route-step:hover .route-icon {
  transform:scale(1.035) !important;
}


/* ==========================================================
   TECHNOLOGY
   ========================================================== */

body.theme-material .tech-grid .card,
body.theme-material .tech-grid .card:hover {

  background:
    linear-gradient(
      145deg,
      rgba(25,30,37,.73) 0%,
      rgba(15,19,25,.83) 52%,
      rgba(11,14,19,.91) 100%
    ) !important;
}

body.theme-material .tech-grid .card {
  transform:translateY(0) !important;
}

body.theme-material .tech-grid .card:hover {
  transform:translateY(-3px) !important;
}


/* ==========================================================
   VIAONE BOT ACTIONS
   ========================================================== */

body.theme-material .experience-actions div {
  transform:translateX(0) !important;
}

body.theme-material .experience-actions div:hover {
  transform:translateX(3px) !important;
}

body.theme-material .experience-actions div::before {
  transition:
    opacity .34s ease !important;
}


/* ==========================================================
   ECOSYSTEM
   ========================================================== */

body.theme-material .eco-tab,
body.theme-material .eco-tab:hover,
body.theme-material .eco-tab.active {

  background:
    linear-gradient(
      145deg,
      rgba(22,27,34,.70),
      rgba(11,15,20,.86)
    ) !important;
}

body.theme-material .eco-tab {
  transform:translateX(0) !important;
}

body.theme-material .eco-tab:hover {
  transform:translateX(3px) !important;
}

body.theme-material .eco-tab::before,
body.theme-material .eco-tab::after {

  transition:
    opacity .36s cubic-bezier(.22,.72,.20,1) !important;
}


/* ==========================================================
   INSTRUCTIONS
   ========================================================== */

body.theme-material .platform,
body.theme-material .platform:hover,
body.theme-material .guide-card,
body.theme-material .guide-card:hover,
body.theme-material .guide-card.active {

  background:
    linear-gradient(
      145deg,
      rgba(25,30,37,.73),
      rgba(15,19,25,.83)
    ) !important;
}

body.theme-material .platform,
body.theme-material .guide-card {
  transform:translateY(0) !important;
}

body.theme-material .platform:hover,
body.theme-material .guide-card:hover {
  transform:translateY(-2px) !important;
}


body.theme-material .guide-card .guide-btn {

  transform:translateY(0) !important;

  transition:
    transform .32s cubic-bezier(.22,.72,.20,1),
    border-color .30s ease,
    color .30s ease,
    box-shadow .30s ease,
    background-color .30s ease !important;
}

body.theme-material .guide-card .guide-btn:hover {
  transform:translateY(-1px) !important;
}


/* ==========================================================
   FAQ
   ========================================================== */

body.theme-material .faq-item,
body.theme-material .faq-item:hover,
body.theme-material .faq-item.active {

  background:
    linear-gradient(
      145deg,
      rgba(22,27,34,.66),
      rgba(11,15,20,.84)
    ) !important;
}

body.theme-material .faq-item {
  transform:translateY(0) !important;
}

body.theme-material .faq-item:hover {
  transform:translateY(-2px) !important;
}

body.theme-material .faq-item::before {
  transition:
    opacity .38s ease !important;
}


/* ==========================================================
   TOUCH
   No sticky physical hover movement on touch devices.
   Lighting may still transition.
   ========================================================== */

@media (hover:none) {

  body.theme-material #idea .card:hover,
  body.theme-material #how .how-nav > div:hover,
  body.theme-material #how .route-step:hover,
  body.theme-material .tech-grid .card:hover,
  body.theme-material .experience-actions div:hover,
  body.theme-material .eco-tab:hover,
  body.theme-material .platform:hover,
  body.theme-material .guide-card:hover,
  body.theme-material .guide-card .guide-btn:hover,
  body.theme-material .faq-item:hover {

    transform:none !important;
  }
}


/* ==========================================================
   REDUCED MOTION

   Do NOT use transition:none.
   Spatial movement is removed, but lighting remains smooth.
   ========================================================== */

@media (prefers-reduced-motion:reduce) {

  body.theme-material #idea .card,
  body.theme-material #how .how-nav > div,
  body.theme-material #how .route-step,
  body.theme-material .tech-grid .card,
  body.theme-material .experience-actions div,
  body.theme-material .eco-tab,
  body.theme-material .platform,
  body.theme-material .guide-card,
  body.theme-material .guide-card .guide-btn,
  body.theme-material .faq-item {

    transition:
      border-color .20s ease,
      box-shadow .20s ease,
      color .20s ease,
      opacity .20s ease,
      filter .20s ease !important;
  }

  body.theme-material #idea .card:hover,
  body.theme-material #how .how-nav > div:hover,
  body.theme-material #how .route-step:hover,
  body.theme-material .tech-grid .card:hover,
  body.theme-material .experience-actions div:hover,
  body.theme-material .eco-tab:hover,
  body.theme-material .platform:hover,
  body.theme-material .guide-card:hover,
  body.theme-material .guide-card .guide-btn:hover,
  body.theme-material .faq-item:hover {

    transform:none !important;
  }
}



/* ==========================================================
   VIAONE V6.7 — FINAL ECOSYSTEM PRODUCT VISUALS
   ========================================================== */


/*
   The new files are already finished product renders.
   Do not place another glass card/frame behind them.
*/

body.theme-material .eco-screen .real-shot-frame{
  position:relative !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:100% !important;

  margin-left:auto !important;
  margin-right:auto !important;

  padding:0 !important;

  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;

  box-shadow:none !important;
  backdrop-filter:none !important;

  transform:none !important;

  overflow:visible !important;
}


/*
   Transparent PNG itself owns its glow, border and depth.
*/

body.theme-material .eco-screen .real-shot{
  display:block !important;

  width:auto !important;
  height:auto !important;

  max-width:100% !important;

  margin:0 auto !important;

  border:0 !important;
  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;

  object-fit:contain !important;

  filter:none !important;

  transform:none !important;
}


/* ==========================================================
   TELEGRAM
   Vertical product render.
   ========================================================== */

body.theme-material
.eco-screen[data-screen="bot"]
.real-shot-frame{
  margin-top:8px !important;
}

body.theme-material
.eco-screen[data-screen="bot"]
.real-shot{
  width:min(100%, 440px) !important;
}


/* ==========================================================
   VIAONE CONNECT
   Wide desktop render.
   ========================================================== */

body.theme-material
.eco-screen[data-screen="cabinet"]
.real-shot-frame{
  margin-top:18px !important;
}

body.theme-material
.eco-screen[data-screen="cabinet"]
.real-shot{
  width:min(100%, 790px) !important;
}


/* ==========================================================
   SUBLINK
   Slightly vertical product render.
   ========================================================== */

body.theme-material
.eco-screen[data-screen="sublink"]
.real-shot-frame{
  margin-top:12px !important;
}

body.theme-material
.eco-screen[data-screen="sublink"]
.real-shot{
  width:min(100%, 570px) !important;
}


/*
   Keep the preview area visually stable when switching
   between the three differently-shaped renders.
*/

@media (min-width:961px){

  body.theme-material .eco-preview{
    min-height:720px !important;
  }

  body.theme-material .eco-screen{
    width:100% !important;
  }
}


/* Tablet */

@media (max-width:960px){

  body.theme-material .eco-preview{
    min-height:0 !important;
  }

  body.theme-material
  .eco-screen[data-screen="bot"]
  .real-shot{
    width:min(100%, 410px) !important;
  }

  body.theme-material
  .eco-screen[data-screen="cabinet"]
  .real-shot{
    width:min(100%, 760px) !important;
  }

  body.theme-material
  .eco-screen[data-screen="sublink"]
  .real-shot{
    width:min(100%, 540px) !important;
  }
}


/* Mobile */

@media (max-width:560px){

  body.theme-material .eco-screen .real-shot-frame{
    margin-top:10px !important;
  }

  body.theme-material .eco-screen .real-shot{
    width:100% !important;
    max-width:100% !important;
  }

  body.theme-material .eco-preview{
    min-height:0 !important;
  }
}



/* ==========================================================
   VIAONE MOBILE POLISH 8.1
   Surgical pass over V6.7.
   Preserve original mobile composition.
   ========================================================== */

@media (max-width:560px){

  /* Keep original artwork/composition from V6.7.
     Do NOT add a full mobile dark veil. */

  body.theme-material .viaone-hero-v1{
    min-height:650px !important;

    padding-bottom:42px !important;
  }


  /* Very small typography correction only. */

  body.theme-material .viaone-hero-title{
    font-size:clamp(38px, 10.2vw, 41px) !important;
    line-height:1.03 !important;
    letter-spacing:-.035em !important;
  }


  /* Keep text readable without obscuring the artwork. */

  body.theme-material .viaone-hero-text{
    position:relative !important;
    z-index:2 !important;

    max-width:350px !important;

    font-size:15px !important;
    line-height:1.72 !important;

    text-shadow:
      0 1px 14px rgba(2,3,7,.92),
      0 0 26px rgba(2,3,7,.72) !important;
  }


  /* CTA and principles stay exactly in the V6.7 character. */

  body.theme-material .viaone-hero-actions{
    margin-top:28px !important;
  }

  body.theme-material .viaone-hero-principles{
    margin-top:26px !important;
  }

}


/* Slight help only for the narrowest Android class. */

@media (max-width:380px){

  body.theme-material .viaone-hero-title{
    font-size:37px !important;
  }

  body.theme-material .viaone-hero-text{
    max-width:320px !important;
    font-size:14.5px !important;
  }

}



/* ==========================================================
   VIAONE MOBILE POLISH 8.2
   PASS 02 — IDEA
   Hero/Header 8.1 remains frozen.
   ========================================================== */

@media (max-width:560px){


  /* --------------------------------------------------------
     SECTION RHYTHM
     -------------------------------------------------------- */

  body.theme-material #idea{
    padding-left:16px !important;
    padding-right:16px !important;

    padding-top:62px !important;
    padding-bottom:66px !important;
  }


  body.theme-material #idea .kicker{
    margin-bottom:14px !important;

    font-size:10px !important;
    letter-spacing:.24em !important;
  }


  body.theme-material #idea .title{
    max-width:390px !important;

    font-size:clamp(30px, 8.4vw, 34px) !important;
    line-height:1.06 !important;

    letter-spacing:-.032em !important;

    text-wrap:balance !important;
  }


  body.theme-material #idea .desc{
    max-width:390px !important;

    margin-top:16px !important;

    font-size:14.5px !important;
    line-height:1.66 !important;

    color:#858F9D !important;
  }



  /* --------------------------------------------------------
     CARDS

     Critical mobile fix:
     desktop min-height:250px is unnecessary here.
     -------------------------------------------------------- */

  body.theme-material #idea .cards{
    display:grid !important;

    grid-template-columns:1fr !important;

    gap:12px !important;

    margin-top:30px !important;
  }


  body.theme-material #idea .card{
    min-height:0 !important;
    height:auto !important;

    padding:21px 20px 22px !important;

    border-radius:18px !important;

    transform:none !important;
  }


  /* No physical hover movement on touch layout. */

  body.theme-material #idea .card:hover{
    transform:none !important;
  }



  /* --------------------------------------------------------
     CARD CONTENT
     Preserve desktop visual language, reduce mass only.
     -------------------------------------------------------- */

  body.theme-material #idea .card .icon{
    width:40px !important;
    height:40px !important;

    margin-bottom:17px !important;

    transform:none !important;
  }


  body.theme-material #idea .card:hover .icon{
    transform:none !important;
  }


  body.theme-material #idea .card .num{
    margin-bottom:8px !important;

    font-size:11px !important;
    line-height:1 !important;
  }


  body.theme-material #idea .card h3{
    margin:0 !important;

    font-size:18px !important;
    line-height:1.22 !important;

    letter-spacing:-.015em !important;
  }


  body.theme-material #idea .card p{
    margin-top:9px !important;

    font-size:13.5px !important;
    line-height:1.58 !important;
  }


  /* Gradient micro-line stays, but is shorter on phone. */

  body.theme-material #idea .card::after{
    left:20px !important;
  }

  body.theme-material #idea .card:hover::after{
    width:34% !important;
  }

}



/* ==========================================================
   NARROW PHONE — 360 class
   ========================================================== */

@media (max-width:380px){

  body.theme-material #idea{
    padding-left:15px !important;
    padding-right:15px !important;

    padding-top:58px !important;
    padding-bottom:62px !important;
  }


  body.theme-material #idea .title{
    font-size:30px !important;
  }


  body.theme-material #idea .desc{
    font-size:14px !important;
  }


  body.theme-material #idea .cards{
    gap:11px !important;

    margin-top:27px !important;
  }


  body.theme-material #idea .card{
    padding:19px 18px 20px !important;
  }


  body.theme-material #idea .card h3{
    font-size:17.5px !important;
  }


  body.theme-material #idea .card p{
    font-size:13px !important;
  }

}