/* CYRIUS LANDING HERO V2 — visual only */

.hero-grid{
  grid-template-columns:minmax(0,.93fr) minmax(520px,1.07fr)!important;
  gap:56px!important;
  align-items:center!important;
}

.hero-tv-wrap{
  position:relative!important;
  min-width:0!important;
}

.hero-photo-frame{
  position:relative!important;
  min-height:535px!important;
  border-radius:26px!important;
  overflow:hidden!important;
  background:#090909!important;
  border:1px solid rgba(255,142,34,.17)!important;
  box-shadow:
    0 34px 95px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,122,0,.035),
    0 0 54px rgba(255,102,0,.07)!important;
  isolation:isolate!important;
}

.hero-photo-frame>.hero-tv-photo,
.hero-photo-frame img.hero-tv-photo{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:58% center!important;
  transform:none!important;
  filter:saturate(.98) contrast(1.03) brightness(.84)!important;
}

.hero-photo-frame:before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,rgba(5,5,5,.18) 0%,rgba(5,5,5,.025) 30%,transparent 60%),
    linear-gradient(0deg,rgba(5,5,5,.16),transparent 28%,transparent 88%,rgba(5,5,5,.05))!important;
}

.hero-photo-frame:after{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  background:none!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,160,66,.05),
    inset 0 -70px 95px rgba(0,0,0,.14)!important;
}

html[data-theme='light'] .hero-photo-frame{
  background:#15100d!important;
  border-color:rgba(233,107,0,.18)!important;
  box-shadow:
    0 28px 72px rgba(70,42,20,.14),
    0 0 0 1px rgba(233,107,0,.035)!important;
}

html[data-theme='light'] .hero-photo-frame>.hero-tv-photo,
html[data-theme='light'] .hero-photo-frame img.hero-tv-photo{
  filter:saturate(1) contrast(1.02) brightness(.91)!important;
}

html[data-theme='light'] .hero-photo-frame:before{
  background:
    linear-gradient(90deg,rgba(8,6,5,.08) 0%,rgba(8,6,5,.01) 30%,transparent 60%),
    linear-gradient(0deg,rgba(8,6,5,.08),transparent 30%,transparent 90%,rgba(8,6,5,.025))!important;
}

@media(min-width:1180px){
  .hero-grid>div:first-child{
    position:relative!important;
    z-index:5!important;
  }

  .hero-modern h1{
    max-width:680px!important;
  }

  .hero-lead{
    max-width:610px!important;
  }
}

@media(max-width:1179px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(420px,.95fr)!important;
    gap:34px!important;
  }

  .hero-photo-frame{
    min-height:465px!important;
  }

  .hero-photo-frame>.hero-tv-photo,
  .hero-photo-frame img.hero-tv-photo{
    object-position:60% center!important;
  }
}

@media(max-width:920px){
  .hero-grid{
    grid-template-columns:1fr!important;
    gap:34px!important;
  }

  .hero-tv-wrap{
    width:100%!important;
    max-width:820px!important;
    margin:0 auto!important;
  }

  .hero-photo-frame{
    min-height:430px!important;
    aspect-ratio:16/9!important;
  }

  .hero-photo-frame>.hero-tv-photo,
  .hero-photo-frame img.hero-tv-photo{
    object-position:center center!important;
  }
}

@media(max-width:600px){
  .hero-photo-frame{
    min-height:290px!important;
    border-radius:20px!important;
  }

  .hero-photo-frame>.hero-tv-photo,
  .hero-photo-frame img.hero-tv-photo{
    object-position:61% center!important;
  }
}

/* CYRIUS HERO POSITION FIX V3
   Desktop/tablet-wide: text LEFT, photo RIGHT.
   Only narrow screens stack vertically.
*/

@media (min-width: 960px) {
  .hero-modern .hero-grid{
    display:grid!important;
    grid-template-columns:minmax(390px,.82fr) minmax(500px,1.18fr)!important;
    grid-template-rows:1fr!important;
    gap:42px!important;
    align-items:center!important;
  }

  .hero-modern .hero-grid > div:first-child{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    align-self:center!important;
  }

  .hero-modern .hero-tv-wrap{
    display:block!important;
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    align-self:center!important;
  }

  .hero-modern .hero-photo-frame{
    width:100%!important;
    min-height:470px!important;
    margin:0!important;
  }

  .hero-modern .hero-modern h1{
    max-width:620px!important;
  }
}

/* Typical laptop width: keep two columns, just tighter. */
@media (min-width:960px) and (max-width:1250px){
  .hero-modern .landing-shell{
    max-width:1180px!important;
  }

  .hero-modern .hero-grid{
    grid-template-columns:minmax(350px,.78fr) minmax(470px,1.22fr)!important;
    gap:28px!important;
  }

  .hero-modern .hero-photo-frame{
    min-height:430px!important;
  }

  .hero-modern h1{
    font-size:clamp(2.8rem,4.7vw,4.5rem)!important;
  }

  .hero-modern .hero-proof{
    gap:12px 16px!important;
  }
}

/* Only mobile / narrow tablet stacks the image below. */
@media (max-width:959px){
  .hero-modern .hero-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    gap:30px!important;
  }

  .hero-modern .hero-grid > div:first-child{
    grid-column:1!important;
    grid-row:1!important;
  }

  .hero-modern .hero-tv-wrap{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    max-width:820px!important;
    margin:0 auto!important;
  }
}


/* CYRIUS HERO LAYER MODE V4
   Restores the old visual concept:
   image is a background layer inside HERO, not a separate card/column.
*/

.hero-modern{
  position:relative!important;
  overflow:hidden!important;
  min-height:620px!important;
  padding:0!important;
  background:#050505!important;
}

.hero-modern .landing-shell{
  position:relative!important;
  z-index:5!important;
  max-width:1240px!important;
  min-height:620px!important;
}

.hero-modern .hero-grid{
  position:relative!important;
  display:block!important;
  min-height:620px!important;
  width:100%!important;
}

.hero-modern .hero-grid > div:first-child{
  position:relative!important;
  z-index:8!important;
  width:min(620px,52%)!important;
  max-width:620px!important;
  padding:84px 0 76px!important;
  margin:0!important;
}

/* photo becomes a layer */
.hero-modern .hero-tv-wrap{
  position:absolute!important;
  z-index:1!important;
  top:0!important;
  right:calc((100vw - min(1240px,100vw))/ -2)!important;
  bottom:0!important;
  width:min(72vw,1040px)!important;
  max-width:none!important;
  height:100%!important;
  margin:0!important;
  pointer-events:none!important;
}

.hero-modern .hero-photo-frame{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  box-shadow:none!important;
  background:#050505!important;
}

.hero-modern .hero-photo-frame > .hero-tv-photo,
.hero-modern .hero-photo-frame img.hero-tv-photo{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:58% center!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
  filter:saturate(.96) contrast(1.03) brightness(.73)!important;
}

/* This is the actual layer blend */
.hero-modern .hero-photo-frame:before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  background:
    linear-gradient(
      90deg,
      #050505 0%,
      rgba(5,5,5,.99) 9%,
      rgba(5,5,5,.93) 18%,
      rgba(5,5,5,.72) 31%,
      rgba(5,5,5,.34) 45%,
      rgba(5,5,5,.10) 59%,
      transparent 72%
    ),
    linear-gradient(
      0deg,
      rgba(5,5,5,.52) 0%,
      transparent 24%,
      transparent 76%,
      rgba(5,5,5,.18) 100%
    )!important;
}

.hero-modern .hero-photo-frame:after{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  z-index:4!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 68% 48%,transparent 0%,transparent 48%,rgba(5,5,5,.10) 82%,rgba(5,5,5,.34) 100%)!important;
  box-shadow:none!important;
}

/* remove old framed-picture look completely */
.hero-modern .hero-tv-wrap,
.hero-modern .hero-photo-frame{
  border:none!important;
  outline:none!important;
}

/* copy stays clean on top */
.hero-modern h1,
.hero-modern .hero-lead,
.hero-modern .hero-actions,
.hero-modern .hero-proof,
.hero-modern .hero-badge{
  position:relative!important;
  z-index:10!important;
}

.hero-modern h1{
  max-width:610px!important;
  text-shadow:0 3px 22px rgba(0,0,0,.28)!important;
}

.hero-modern .hero-lead{
  max-width:570px!important;
}

/* Light mode: same layer concept, lighter blend */
html[data-theme='light'] .hero-modern{
  background:#f8f5f1!important;
}

html[data-theme='light'] .hero-modern .hero-photo-frame > .hero-tv-photo,
html[data-theme='light'] .hero-modern .hero-photo-frame img.hero-tv-photo{
  filter:saturate(.98) contrast(1.02) brightness(.88)!important;
}

html[data-theme='light'] .hero-modern .hero-photo-frame:before{
  background:
    linear-gradient(
      90deg,
      #f8f5f1 0%,
      rgba(248,245,241,.99) 10%,
      rgba(248,245,241,.95) 20%,
      rgba(248,245,241,.76) 33%,
      rgba(248,245,241,.38) 47%,
      rgba(248,245,241,.12) 60%,
      transparent 74%
    ),
    linear-gradient(
      0deg,
      rgba(248,245,241,.50) 0%,
      transparent 24%,
      transparent 78%,
      rgba(248,245,241,.18) 100%
    )!important;
}

html[data-theme='light'] .hero-modern .hero-photo-frame:after{
  background:
    radial-gradient(circle at 68% 48%,transparent 0%,transparent 50%,rgba(248,245,241,.08) 83%,rgba(248,245,241,.25) 100%)!important;
}

/* laptop */
@media(max-width:1180px) and (min-width:821px){
  .hero-modern,
  .hero-modern .landing-shell,
  .hero-modern .hero-grid{
    min-height:590px!important;
  }

  .hero-modern .hero-grid > div:first-child{
    width:54%!important;
    padding:72px 0 64px!important;
  }

  .hero-modern .hero-tv-wrap{
    width:76vw!important;
    right:-18vw!important;
  }

  .hero-modern .hero-photo-frame > .hero-tv-photo,
  .hero-modern .hero-photo-frame img.hero-tv-photo{
    object-position:55% center!important;
  }
}

/* mobile: image remains a layer behind the content instead of becoming a separate block */
@media(max-width:820px){
  .hero-modern{
    min-height:auto!important;
  }

  .hero-modern .landing-shell,
  .hero-modern .hero-grid{
    min-height:640px!important;
  }

  .hero-modern .hero-grid{
    display:block!important;
  }

  .hero-modern .hero-grid > div:first-child{
    width:100%!important;
    max-width:620px!important;
    padding:64px 0 54px!important;
  }

  .hero-modern .hero-tv-wrap{
    position:absolute!important;
    inset:0!important;
    width:100vw!important;
    height:100%!important;
    right:auto!important;
    left:50%!important;
    transform:translateX(-50%)!important;
  }

  .hero-modern .hero-photo-frame > .hero-tv-photo,
  .hero-modern .hero-photo-frame img.hero-tv-photo{
    object-position:63% center!important;
    filter:saturate(.94) contrast(1.02) brightness(.48)!important;
  }

  .hero-modern .hero-photo-frame:before{
    background:
      linear-gradient(180deg,
        rgba(5,5,5,.88) 0%,
        rgba(5,5,5,.70) 38%,
        rgba(5,5,5,.50) 64%,
        rgba(5,5,5,.82) 100%
      ),
      linear-gradient(90deg,rgba(5,5,5,.45),rgba(5,5,5,.12))!important;
  }

  html[data-theme='light'] .hero-modern .hero-photo-frame > .hero-tv-photo,
  html[data-theme='light'] .hero-modern .hero-photo-frame img.hero-tv-photo{
    filter:saturate(.94) contrast(1.02) brightness(.72)!important;
  }

  html[data-theme='light'] .hero-modern .hero-photo-frame:before{
    background:
      linear-gradient(180deg,
        rgba(248,245,241,.88) 0%,
        rgba(248,245,241,.66) 38%,
        rgba(248,245,241,.45) 64%,
        rgba(248,245,241,.80) 100%
      ),
      linear-gradient(90deg,rgba(248,245,241,.42),rgba(248,245,241,.10))!important;
  }
}


/* CYRIUS FULL HERO BACKGROUND V5
   IMPORTANT:
   - Hero photo covers the WHOLE top hero section.
   - Existing text/buttons stay on top.
   - Old separate hero image block is completely removed from layout.
*/

.hero-modern{
  position:relative!important;
  overflow:hidden!important;
  min-height:690px!important;
  padding:0!important;

  background-image:
    linear-gradient(
      90deg,
      rgba(3,3,3,.98) 0%,
      rgba(3,3,3,.93) 18%,
      rgba(3,3,3,.80) 34%,
      rgba(3,3,3,.48) 52%,
      rgba(3,3,3,.16) 70%,
      rgba(3,3,3,.05) 100%
    ),
    linear-gradient(
      0deg,
      rgba(3,3,3,.42) 0%,
      transparent 30%,
      transparent 78%,
      rgba(3,3,3,.18) 100%
    ),
    url('/assets/images/cyrius-tv-hero.png?v=20260827fullhero1')!important;

  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-color:#050505!important;
}

/* Kill the old separate picture block completely. */
.hero-modern .hero-tv-wrap,
.hero-modern .hero-photo-frame,
.hero-modern .hero-tv-photo{
  display:none!important;
}

/* Hero content becomes one normal text layer over the full photo. */
.hero-modern .landing-shell{
  position:relative!important;
  z-index:5!important;
  min-height:690px!important;
  max-width:1240px!important;
  margin:0 auto!important;
  padding-left:24px!important;
  padding-right:24px!important;
}

.hero-modern .hero-grid{
  display:block!important;
  position:relative!important;
  min-height:690px!important;
  width:100%!important;
}

.hero-modern .hero-grid > div:first-child{
  position:relative!important;
  z-index:10!important;
  width:min(650px,58%)!important;
  max-width:650px!important;
  padding:100px 0 86px!important;
  margin:0!important;
}

.hero-modern .hero-badge,
.hero-modern h1,
.hero-modern .hero-lead,
.hero-modern .hero-actions,
.hero-modern .hero-proof{
  position:relative!important;
  z-index:10!important;
}

.hero-modern h1{
  max-width:640px!important;
  text-shadow:0 3px 24px rgba(0,0,0,.38)!important;
}

.hero-modern .hero-lead{
  max-width:590px!important;
  color:#b8afa8!important;
  text-shadow:0 2px 14px rgba(0,0,0,.30)!important;
}

.hero-modern .hero-proof{
  max-width:620px!important;
}

.hero-modern .hero-proof span{
  color:#d2cac3!important;
}

/* Remove legacy pseudo glow blobs that can cover the full background image. */
.hero-modern:before,
.hero-modern:after{
  content:''!important;
  position:absolute!important;
  pointer-events:none!important;
  z-index:1!important;
}

.hero-modern:before{
  inset:auto auto -260px -220px!important;
  width:620px!important;
  height:620px!important;
  background:radial-gradient(circle,rgba(255,122,0,.09),transparent 68%)!important;
}

.hero-modern:after{
  inset:-230px -260px auto auto!important;
  width:640px!important;
  height:640px!important;
  background:radial-gradient(circle,rgba(255,145,37,.055),transparent 70%)!important;
}

/* LIGHT THEME: same full photo, but readable dark copy on a white left fade. */
html[data-theme='light'] .hero-modern{
  background-image:
    linear-gradient(
      90deg,
      rgba(248,245,241,1) 0%,
      rgba(248,245,241,.98) 18%,
      rgba(248,245,241,.90) 34%,
      rgba(248,245,241,.64) 52%,
      rgba(248,245,241,.22) 70%,
      rgba(248,245,241,.04) 100%
    ),
    linear-gradient(
      0deg,
      rgba(248,245,241,.40) 0%,
      transparent 30%,
      transparent 78%,
      rgba(248,245,241,.18) 100%
    ),
    url('/assets/images/cyrius-tv-hero.png?v=20260827fullhero1')!important;

  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-color:#f8f5f1!important;
}

html[data-theme='light'] .hero-modern h1{
  color:#211a15!important;
  text-shadow:none!important;
}

html[data-theme='light'] .hero-modern .hero-lead{
  color:#685c53!important;
  text-shadow:none!important;
}

html[data-theme='light'] .hero-modern .hero-proof span{
  color:#584c43!important;
}

/* Laptop */
@media(max-width:1180px){
  .hero-modern{
    min-height:640px!important;
    background-position:58% center!important;
  }

  .hero-modern .landing-shell,
  .hero-modern .hero-grid{
    min-height:640px!important;
  }

  .hero-modern .hero-grid > div:first-child{
    width:min(610px,60%)!important;
    padding:82px 0 70px!important;
  }
}

/* Tablet/mobile: same image still fills hero, never becomes a separate block. */
@media(max-width:820px){
  .hero-modern{
    min-height:650px!important;

    background-image:
      linear-gradient(
        180deg,
        rgba(3,3,3,.82) 0%,
        rgba(3,3,3,.68) 38%,
        rgba(3,3,3,.54) 64%,
        rgba(3,3,3,.82) 100%
      ),
      linear-gradient(
        90deg,
        rgba(3,3,3,.54) 0%,
        rgba(3,3,3,.20) 100%
      ),
      url('/assets/images/cyrius-tv-hero.png?v=20260827fullhero1')!important;

    background-size:cover!important;
    background-position:62% center!important;
  }

  .hero-modern .landing-shell,
  .hero-modern .hero-grid{
    min-height:650px!important;
  }

  .hero-modern .hero-grid > div:first-child{
    width:100%!important;
    max-width:620px!important;
    padding:66px 0 58px!important;
  }

  html[data-theme='light'] .hero-modern{
    background-image:
      linear-gradient(
        180deg,
        rgba(248,245,241,.89) 0%,
        rgba(248,245,241,.70) 38%,
        rgba(248,245,241,.55) 64%,
        rgba(248,245,241,.84) 100%
      ),
      linear-gradient(
        90deg,
        rgba(248,245,241,.60) 0%,
        rgba(248,245,241,.18) 100%
      ),
      url('/assets/images/cyrius-tv-hero.png?v=20260827fullhero1')!important;

    background-size:cover!important;
    background-position:62% center!important;
  }
}


/* CYRIUS HERO LAYOUT FIX V6
   Goal:
   - image must stay as one full hero layer
   - no separate right-side card/panel
   - text block must have normal width
   - visible part of the image should shift more to the LEFT
*/

.hero-modern{
  position:relative!important;
  overflow:hidden!important;
  min-height:690px!important;
}

.hero-modern .landing-shell{
  position:relative!important;
  z-index:5!important;
  max-width:1240px!important;
  min-height:690px!important;
  margin:0 auto!important;
  padding-left:28px!important;
  padding-right:28px!important;
}

.hero-modern .hero-grid{
  position:relative!important;
  display:block!important;
  min-height:690px!important;
  width:100%!important;
}

/* normal readable text column */
.hero-modern .hero-grid > div:first-child{
  position:relative!important;
  z-index:10!important;
  width:100%!important;
  max-width:560px!important;
  padding:88px 0 78px!important;
  margin:0!important;
}

.hero-modern h1{
  max-width:520px!important;
  font-size:clamp(3.4rem,5.2vw,5.9rem)!important;
  line-height:.92!important;
  letter-spacing:-.045em!important;
  text-shadow:0 3px 24px rgba(0,0,0,.34)!important;
}

.hero-modern .hero-lead{
  max-width:470px!important;
  margin-top:18px!important;
  line-height:1.62!important;
}

.hero-modern .hero-actions{
  margin-top:26px!important;
}

.hero-modern .hero-proof{
  max-width:470px!important;
  margin-top:26px!important;
  gap:12px 18px!important;
}

.hero-modern .hero-proof span{
  line-height:1.45!important;
}

/* Make the picture a FULL hero layer, not a separate right block */
.hero-modern .hero-tv-wrap{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  margin:0!important;
  transform:none!important;
  pointer-events:none!important;
  z-index:1!important;
  display:block!important;
}

.hero-modern .hero-photo-frame{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  overflow:hidden!important;
  display:block!important;
  isolation:isolate!important;
}

/* Shift the visible image more LEFT so the composition feels balanced */
.hero-modern .hero-photo-frame > .hero-tv-photo,
.hero-modern .hero-photo-frame img.hero-tv-photo{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  opacity:1!important;
  visibility:visible!important;
  object-fit:cover!important;
  object-position:43% center!important;
  transform:none!important;
  z-index:1!important;
  filter:saturate(.97) contrast(1.03) brightness(.76)!important;
}

/* left readable overlay */
.hero-modern .hero-photo-frame:before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background:
    linear-gradient(
      90deg,
      rgba(4,4,4,.99) 0%,
      rgba(4,4,4,.96) 13%,
      rgba(4,4,4,.87) 26%,
      rgba(4,4,4,.60) 41%,
      rgba(4,4,4,.25) 57%,
      rgba(4,4,4,.07) 73%,
      transparent 86%
    ),
    linear-gradient(
      0deg,
      rgba(4,4,4,.36) 0%,
      transparent 28%,
      transparent 82%,
      rgba(4,4,4,.14) 100%
    )!important;
}

/* remove panel feeling */
.hero-modern .hero-photo-frame:after{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 70% 45%,transparent 0%,transparent 56%,rgba(0,0,0,.08) 82%,rgba(0,0,0,.22) 100%)!important;
  box-shadow:none!important;
}

/* kill any residual framed/right-card look from older patches */
.hero-modern .hero-tv-wrap,
.hero-modern .hero-photo-frame,
.hero-modern .hero-photo-frame img.hero-tv-photo{
  outline:none!important;
}

/* Light theme */
html[data-theme='light'] .hero-modern .hero-photo-frame > .hero-tv-photo,
html[data-theme='light'] .hero-modern .hero-photo-frame img.hero-tv-photo{
  object-position:43% center!important;
  filter:saturate(.99) contrast(1.02) brightness(.90)!important;
}

html[data-theme='light'] .hero-modern .hero-photo-frame:before{
  background:
    linear-gradient(
      90deg,
      rgba(248,245,241,1) 0%,
      rgba(248,245,241,.985) 13%,
      rgba(248,245,241,.93) 26%,
      rgba(248,245,241,.69) 41%,
      rgba(248,245,241,.33) 57%,
      rgba(248,245,241,.09) 73%,
      transparent 86%
    ),
    linear-gradient(
      0deg,
      rgba(248,245,241,.32) 0%,
      transparent 28%,
      transparent 82%,
      rgba(248,245,241,.12) 100%
    )!important;
}

/* Laptop */
@media (max-width:1180px){
  .hero-modern,
  .hero-modern .landing-shell,
  .hero-modern .hero-grid{
    min-height:640px!important;
  }

  .hero-modern .hero-grid > div:first-child{
    max-width:520px!important;
    padding:76px 0 66px!important;
  }

  .hero-modern h1{
    max-width:490px!important;
    font-size:clamp(3.1rem,5vw,5.2rem)!important;
  }

  .hero-modern .hero-photo-frame > .hero-tv-photo,
  .hero-modern .hero-photo-frame img.hero-tv-photo{
    object-position:39% center!important;
  }
}

/* Tablet/mobile: still one layer, just darker for readability */
@media (max-width:820px){
  .hero-modern,
  .hero-modern .landing-shell,
  .hero-modern .hero-grid{
    min-height:650px!important;
  }

  .hero-modern .hero-grid > div:first-child{
    max-width:100%!important;
    width:100%!important;
    padding:64px 0 56px!important;
  }

  .hero-modern h1{
    max-width:380px!important;
    font-size:clamp(2.8rem,10vw,4.3rem)!important;
    line-height:.94!important;
  }

  .hero-modern .hero-lead,
  .hero-modern .hero-proof{
    max-width:340px!important;
  }

  .hero-modern .hero-photo-frame > .hero-tv-photo,
  .hero-modern .hero-photo-frame img.hero-tv-photo{
    object-position:52% center!important;
    filter:saturate(.95) contrast(1.02) brightness(.56)!important;
  }

  .hero-modern .hero-photo-frame:before{
    background:
      linear-gradient(
        180deg,
        rgba(4,4,4,.85) 0%,
        rgba(4,4,4,.71) 38%,
        rgba(4,4,4,.56) 64%,
        rgba(4,4,4,.84) 100%
      ),
      linear-gradient(
        90deg,
        rgba(4,4,4,.52) 0%,
        rgba(4,4,4,.18) 100%
      )!important;
  }

  html[data-theme='light'] .hero-modern .hero-photo-frame > .hero-tv-photo,
  html[data-theme='light'] .hero-modern .hero-photo-frame img.hero-tv-photo{
    filter:saturate(.96) contrast(1.02) brightness(.76)!important;
  }

  html[data-theme='light'] .hero-modern .hero-photo-frame:before{
    background:
      linear-gradient(
        180deg,
        rgba(248,245,241,.88) 0%,
        rgba(248,245,241,.71) 38%,
        rgba(248,245,241,.56) 64%,
        rgba(248,245,241,.84) 100%
      ),
      linear-gradient(
        90deg,
        rgba(248,245,241,.56) 0%,
        rgba(248,245,241,.18) 100%
      )!important;
  }
}


/* CYRIUS HERO NO PHOTO FINAL V7
   Final override: no hero image anywhere.
*/

.hero-modern{
  position:relative!important;
  overflow:hidden!important;
  min-height:auto!important;
  padding:82px 0 72px!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(255,122,0,.09),transparent 33%),
    radial-gradient(circle at 86% 20%,rgba(255,154,50,.035),transparent 34%),
    linear-gradient(145deg,#070707,#050505 68%,#080604)!important;
  background-image:
    radial-gradient(circle at 12% 0%,rgba(255,122,0,.09),transparent 33%),
    radial-gradient(circle at 86% 20%,rgba(255,154,50,.035),transparent 34%),
    linear-gradient(145deg,#070707,#050505 68%,#080604)!important;
}

.hero-modern .hero-tv-wrap,
.hero-modern .hero-photo-frame,
.hero-modern .hero-tv-photo{
  display:none!important;
  visibility:hidden!important;
  width:0!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  overflow:hidden!important;
  position:absolute!important;
  pointer-events:none!important;
}

.hero-modern .landing-shell{
  position:relative!important;
  z-index:5!important;
  min-height:0!important;
  max-width:1240px!important;
  margin:0 auto!important;
  padding-left:28px!important;
  padding-right:28px!important;
}

.hero-modern .hero-grid{
  display:block!important;
  min-height:0!important;
  width:100%!important;
}

.hero-modern .hero-grid > div:first-child{
  position:relative!important;
  z-index:10!important;
  width:100%!important;
  max-width:760px!important;
  padding:0!important;
  margin:0!important;
}

.hero-modern h1{
  max-width:720px!important;
  font-size:clamp(3.5rem,6vw,6.4rem)!important;
  line-height:.92!important;
  letter-spacing:-.05em!important;
  margin-top:22px!important;
  margin-bottom:22px!important;
}

.hero-modern .hero-lead{
  max-width:600px!important;
  font-size:1.08rem!important;
  line-height:1.68!important;
}

.hero-modern .hero-actions{
  margin-top:28px!important;
}

.hero-modern .hero-proof{
  max-width:720px!important;
  margin-top:30px!important;
  gap:14px 20px!important;
}

.hero-modern:before{
  content:''!important;
  position:absolute!important;
  width:620px!important;
  height:620px!important;
  left:-260px!important;
  top:-320px!important;
  background:radial-gradient(circle,rgba(255,122,0,.11),transparent 68%)!important;
  pointer-events:none!important;
}

.hero-modern:after{
  content:''!important;
  position:absolute!important;
  width:560px!important;
  height:560px!important;
  right:-280px!important;
  top:-140px!important;
  background:radial-gradient(circle,rgba(255,165,62,.055),transparent 70%)!important;
  pointer-events:none!important;
}

/* Light theme */
html[data-theme='light'] .hero-modern{
  background:
    radial-gradient(circle at 12% 0%,rgba(233,107,0,.075),transparent 34%),
    radial-gradient(circle at 88% 16%,rgba(255,171,65,.045),transparent 35%),
    linear-gradient(145deg,#f8f5f1,#f4f0eb 70%,#fbf7f2)!important;
  background-image:
    radial-gradient(circle at 12% 0%,rgba(233,107,0,.075),transparent 34%),
    radial-gradient(circle at 88% 16%,rgba(255,171,65,.045),transparent 35%),
    linear-gradient(145deg,#f8f5f1,#f4f0eb 70%,#fbf7f2)!important;
}

/* Remove all old image-based background URLs from final computed style. */
.hero-modern[style]{
  background-image:none;
}

@media(max-width:820px){
  .hero-modern{
    padding:62px 0 56px!important;
  }

  .hero-modern .landing-shell{
    padding-left:20px!important;
    padding-right:20px!important;
  }

  .hero-modern .hero-grid > div:first-child{
    max-width:100%!important;
  }

  .hero-modern h1{
    max-width:520px!important;
    font-size:clamp(3rem,12vw,4.8rem)!important;
  }

  .hero-modern .hero-lead{
    max-width:500px!important;
  }

  .hero-modern .hero-proof{
    max-width:520px!important;
  }
}


/* CYRIUS HERO LAYOUT FIX V6
   Goal:
   - image must stay as one full hero layer
   - no separate right-side card/panel
   - text block must have normal width
   - visible part of the image should shift more to the LEFT
*/

.hero-modern{
  position:relative!important;
  overflow:hidden!important;
  min-height:690px!important;
}

.hero-modern .landing-shell{
  position:relative!important;
  z-index:5!important;
  max-width:1240px!important;
  min-height:690px!important;
  margin:0 auto!important;
  padding-left:28px!important;
  padding-right:28px!important;
}

.hero-modern .hero-grid{
  position:relative!important;
  display:block!important;
  min-height:690px!important;
  width:100%!important;
}

/* normal readable text column */
.hero-modern .hero-grid > div:first-child{
  position:relative!important;
  z-index:10!important;
  width:100%!important;
  max-width:560px!important;
  padding:88px 0 78px!important;
  margin:0!important;
}

.hero-modern h1{
  max-width:520px!important;
  font-size:clamp(3.4rem,5.2vw,5.9rem)!important;
  line-height:.92!important;
  letter-spacing:-.045em!important;
  text-shadow:0 3px 24px rgba(0,0,0,.34)!important;
}

.hero-modern .hero-lead{
  max-width:470px!important;
  margin-top:18px!important;
  line-height:1.62!important;
}

.hero-modern .hero-actions{
  margin-top:26px!important;
}

.hero-modern .hero-proof{
  max-width:470px!important;
  margin-top:26px!important;
  gap:12px 18px!important;
}

.hero-modern .hero-proof span{
  line-height:1.45!important;
}

/* Make the picture a FULL hero layer, not a separate right block */
.hero-modern .hero-tv-wrap{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  margin:0!important;
  transform:none!important;
  pointer-events:none!important;
  z-index:1!important;
  display:block!important;
}

.hero-modern .hero-photo-frame{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  overflow:hidden!important;
  display:block!important;
  isolation:isolate!important;
}

/* Shift the visible image more LEFT so the composition feels balanced */
.hero-modern .hero-photo-frame > .hero-tv-photo,
.hero-modern .hero-photo-frame img.hero-tv-photo{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  opacity:1!important;
  visibility:visible!important;
  object-fit:cover!important;
  object-position:43% center!important;
  transform:none!important;
  z-index:1!important;
  filter:saturate(.97) contrast(1.03) brightness(.76)!important;
}

/* left readable overlay */
.hero-modern .hero-photo-frame:before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background:
    linear-gradient(
      90deg,
      rgba(4,4,4,.99) 0%,
      rgba(4,4,4,.96) 13%,
      rgba(4,4,4,.87) 26%,
      rgba(4,4,4,.60) 41%,
      rgba(4,4,4,.25) 57%,
      rgba(4,4,4,.07) 73%,
      transparent 86%
    ),
    linear-gradient(
      0deg,
      rgba(4,4,4,.36) 0%,
      transparent 28%,
      transparent 82%,
      rgba(4,4,4,.14) 100%
    )!important;
}

/* remove panel feeling */
.hero-modern .hero-photo-frame:after{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 70% 45%,transparent 0%,transparent 56%,rgba(0,0,0,.08) 82%,rgba(0,0,0,.22) 100%)!important;
  box-shadow:none!important;
}

/* kill any residual framed/right-card look from older patches */
.hero-modern .hero-tv-wrap,
.hero-modern .hero-photo-frame,
.hero-modern .hero-photo-frame img.hero-tv-photo{
  outline:none!important;
}

/* Light theme */
html[data-theme='light'] .hero-modern .hero-photo-frame > .hero-tv-photo,
html[data-theme='light'] .hero-modern .hero-photo-frame img.hero-tv-photo{
  object-position:43% center!important;
  filter:saturate(.99) contrast(1.02) brightness(.90)!important;
}

html[data-theme='light'] .hero-modern .hero-photo-frame:before{
  background:
    linear-gradient(
      90deg,
      rgba(248,245,241,1) 0%,
      rgba(248,245,241,.985) 13%,
      rgba(248,245,241,.93) 26%,
      rgba(248,245,241,.69) 41%,
      rgba(248,245,241,.33) 57%,
      rgba(248,245,241,.09) 73%,
      transparent 86%
    ),
    linear-gradient(
      0deg,
      rgba(248,245,241,.32) 0%,
      transparent 28%,
      transparent 82%,
      rgba(248,245,241,.12) 100%
    )!important;
}

/* Laptop */
@media (max-width:1180px){
  .hero-modern,
  .hero-modern .landing-shell,
  .hero-modern .hero-grid{
    min-height:640px!important;
  }

  .hero-modern .hero-grid > div:first-child{
    max-width:520px!important;
    padding:76px 0 66px!important;
  }

  .hero-modern h1{
    max-width:490px!important;
    font-size:clamp(3.1rem,5vw,5.2rem)!important;
  }

  .hero-modern .hero-photo-frame > .hero-tv-photo,
  .hero-modern .hero-photo-frame img.hero-tv-photo{
    object-position:39% center!important;
  }
}

/* Tablet/mobile: still one layer, just darker for readability */
@media (max-width:820px){
  .hero-modern,
  .hero-modern .landing-shell,
  .hero-modern .hero-grid{
    min-height:650px!important;
  }

  .hero-modern .hero-grid > div:first-child{
    max-width:100%!important;
    width:100%!important;
    padding:64px 0 56px!important;
  }

  .hero-modern h1{
    max-width:380px!important;
    font-size:clamp(2.8rem,10vw,4.3rem)!important;
    line-height:.94!important;
  }

  .hero-modern .hero-lead,
  .hero-modern .hero-proof{
    max-width:340px!important;
  }

  .hero-modern .hero-photo-frame > .hero-tv-photo,
  .hero-modern .hero-photo-frame img.hero-tv-photo{
    object-position:52% center!important;
    filter:saturate(.95) contrast(1.02) brightness(.56)!important;
  }

  .hero-modern .hero-photo-frame:before{
    background:
      linear-gradient(
        180deg,
        rgba(4,4,4,.85) 0%,
        rgba(4,4,4,.71) 38%,
        rgba(4,4,4,.56) 64%,
        rgba(4,4,4,.84) 100%
      ),
      linear-gradient(
        90deg,
        rgba(4,4,4,.52) 0%,
        rgba(4,4,4,.18) 100%
      )!important;
  }

  html[data-theme='light'] .hero-modern .hero-photo-frame > .hero-tv-photo,
  html[data-theme='light'] .hero-modern .hero-photo-frame img.hero-tv-photo{
    filter:saturate(.96) contrast(1.02) brightness(.76)!important;
  }

  html[data-theme='light'] .hero-modern .hero-photo-frame:before{
    background:
      linear-gradient(
        180deg,
        rgba(248,245,241,.88) 0%,
        rgba(248,245,241,.71) 38%,
        rgba(248,245,241,.56) 64%,
        rgba(248,245,241,.84) 100%
      ),
      linear-gradient(
        90deg,
        rgba(248,245,241,.56) 0%,
        rgba(248,245,241,.18) 100%
      )!important;
  }
}


/* CYRIUS HERO NO PHOTO FINAL V7
   Final override: no hero image anywhere.
*/

.hero-modern{
  position:relative!important;
  overflow:hidden!important;
  min-height:auto!important;
  padding:82px 0 72px!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(255,122,0,.09),transparent 33%),
    radial-gradient(circle at 86% 20%,rgba(255,154,50,.035),transparent 34%),
    linear-gradient(145deg,#070707,#050505 68%,#080604)!important;
  background-image:
    radial-gradient(circle at 12% 0%,rgba(255,122,0,.09),transparent 33%),
    radial-gradient(circle at 86% 20%,rgba(255,154,50,.035),transparent 34%),
    linear-gradient(145deg,#070707,#050505 68%,#080604)!important;
}

.hero-modern .hero-tv-wrap,
.hero-modern .hero-photo-frame,
.hero-modern .hero-tv-photo{
  display:none!important;
  visibility:hidden!important;
  width:0!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  overflow:hidden!important;
  position:absolute!important;
  pointer-events:none!important;
}

.hero-modern .landing-shell{
  position:relative!important;
  z-index:5!important;
  min-height:0!important;
  max-width:1240px!important;
  margin:0 auto!important;
  padding-left:28px!important;
  padding-right:28px!important;
}

.hero-modern .hero-grid{
  display:block!important;
  min-height:0!important;
  width:100%!important;
}

.hero-modern .hero-grid > div:first-child{
  position:relative!important;
  z-index:10!important;
  width:100%!important;
  max-width:760px!important;
  padding:0!important;
  margin:0!important;
}

.hero-modern h1{
  max-width:720px!important;
  font-size:clamp(3.5rem,6vw,6.4rem)!important;
  line-height:.92!important;
  letter-spacing:-.05em!important;
  margin-top:22px!important;
  margin-bottom:22px!important;
}

.hero-modern .hero-lead{
  max-width:600px!important;
  font-size:1.08rem!important;
  line-height:1.68!important;
}

.hero-modern .hero-actions{
  margin-top:28px!important;
}

.hero-modern .hero-proof{
  max-width:720px!important;
  margin-top:30px!important;
  gap:14px 20px!important;
}

.hero-modern:before{
  content:''!important;
  position:absolute!important;
  width:620px!important;
  height:620px!important;
  left:-260px!important;
  top:-320px!important;
  background:radial-gradient(circle,rgba(255,122,0,.11),transparent 68%)!important;
  pointer-events:none!important;
}

.hero-modern:after{
  content:''!important;
  position:absolute!important;
  width:560px!important;
  height:560px!important;
  right:-280px!important;
  top:-140px!important;
  background:radial-gradient(circle,rgba(255,165,62,.055),transparent 70%)!important;
  pointer-events:none!important;
}

/* Light theme */
html[data-theme='light'] .hero-modern{
  background:
    radial-gradient(circle at 12% 0%,rgba(233,107,0,.075),transparent 34%),
    radial-gradient(circle at 88% 16%,rgba(255,171,65,.045),transparent 35%),
    linear-gradient(145deg,#f8f5f1,#f4f0eb 70%,#fbf7f2)!important;
  background-image:
    radial-gradient(circle at 12% 0%,rgba(233,107,0,.075),transparent 34%),
    radial-gradient(circle at 88% 16%,rgba(255,171,65,.045),transparent 35%),
    linear-gradient(145deg,#f8f5f1,#f4f0eb 70%,#fbf7f2)!important;
}

/* Remove all old image-based background URLs from final computed style. */
.hero-modern[style]{
  background-image:none;
}

@media(max-width:820px){
  .hero-modern{
    padding:62px 0 56px!important;
  }

  .hero-modern .landing-shell{
    padding-left:20px!important;
    padding-right:20px!important;
  }

  .hero-modern .hero-grid > div:first-child{
    max-width:100%!important;
  }

  .hero-modern h1{
    max-width:520px!important;
    font-size:clamp(3rem,12vw,4.8rem)!important;
  }

  .hero-modern .hero-lead{
    max-width:500px!important;
  }

  .hero-modern .hero-proof{
    max-width:520px!important;
  }
}