/* IMAGI777 LANDING V2 */

.site-header{
  width:min(1220px,calc(100% - 48px))!important;
  height:92px!important;
  margin:0 auto!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  position:relative!important;
  z-index:50!important;
}

.brand{
  display:flex!important;
  align-items:center!important;
  flex-shrink:0!important;
  text-decoration:none!important;
}

.brand img{
  display:block!important;
  width:150px!important;
  max-width:150px!important;
  height:auto!important;
  max-height:48px!important;
  object-fit:contain!important;
}

.desktop-nav{
  display:flex!important;
  align-items:center!important;
  gap:30px!important;
  margin-left:auto!important;
}

.desktop-nav a{
  color:#9699a5!important;
  text-decoration:none!important;
  font-size:14px!important;
  font-weight:600!important;
}

.desktop-nav a:hover{
  color:#fff!important;
}

.nav-actions{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin-left:28px!important;
}

.nav-signin{
  padding:11px 18px!important;
  border:1px solid #2c2f3a!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.025)!important;
  color:#dddfe4!important;
  text-decoration:none!important;
  font-size:13px!important;
  font-weight:800!important;
}

.nav-create{
  padding:11px 18px!important;
  border:1px solid rgba(162,127,255,.55)!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#9865ff,#6547ef)!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:800!important;
  box-shadow:0 10px 35px rgba(113,72,240,.25)!important;
}

.hero{
  width:min(1500px,100%)!important;
  max-width:none!important;
  margin:72px auto 0!important;
  padding:0 55px!important;
  text-align:center!important;
}

.hero-kicker{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:10px 19px!important;
  border:1px solid rgba(145,96,255,.37)!important;
  border-radius:999px!important;
  background:rgba(120,76,240,.08)!important;
  color:#aa90ef!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.17em!important;
}

.hero-kicker span{
  width:8px!important;
  height:8px!important;
  display:block!important;
  margin-right:10px!important;
  border-radius:50%!important;
  background:#9c6cff!important;
  box-shadow:0 0 14px #9c6cff!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
}

.hero h1.hero-title{
  width:100%!important;
  max-width:1420px!important;
  margin:46px auto 0!important;
  padding:0 80px!important;
  overflow:visible!important;
  line-height:.95!important;
  letter-spacing:-.058em!important;
}

.hero h1 .hero-title-line{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  overflow:visible!important;
  white-space:nowrap!important;
  text-align:center!important;
  font-size:clamp(55px,6.35vw,99px)!important;
  line-height:1!important;
  font-weight:900!important;
}

.hero h1 .hero-title-white{
  background:none!important;
  background-image:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  -webkit-text-fill-color:#fafafd!important;
  color:#fafafd!important;
}

.hero h1 .hero-title-white em{
  font-style:normal!important;
  color:#9569ff!important;
  -webkit-text-fill-color:#9569ff!important;
}

.hero h1 .hero-title-gradient{
  padding:7px 45px 13px!important;
  background:linear-gradient(
    90deg,
    #9168ff 7%,
    #6091ff 48%,
    #54d7bd 91%
  )!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
}

.hero h1 .headline-period{
  display:inline!important;
  padding-right:.12em!important;
}

.hero-subtitle{
  margin:42px auto 0!important;
  color:#858894!important;
  font-size:20px!important;
  line-height:1.6!important;
}

.hero-subtitle strong{
  color:#dddfe5!important;
}

.hero-support{
  display:block!important;
  max-width:680px!important;
  margin:12px auto 34px!important;
  color:#747884!important;
  font-size:15px!important;
  line-height:1.7!important;
}

.creator-shell{
  width:min(880px,100%)!important;
  max-width:880px!important;
  margin:0 auto!important;
}

.studio-sidebar img,
.flow-core img,
.language-center img,
.footer-brand img{
  height:auto!important;
  object-fit:contain!important;
}

.studio-sidebar img{
  width:110px!important;
  max-width:110px!important;
}

.flow-core img{
  width:105px!important;
  max-width:105px!important;
}

.language-center img{
  width:125px!important;
  max-width:125px!important;
}

.footer-brand img{
  width:125px!important;
  max-width:125px!important;
}

@media(max-width:900px){
  .desktop-nav{
    display:none!important;
  }

  .nav-actions{
    margin-left:auto!important;
  }

  .hero{
    padding:0 22px!important;
  }

  .hero h1.hero-title{
    padding:0 20px!important;
  }

  .hero h1 .hero-title-line{
    white-space:normal!important;
    font-size:clamp(46px,10vw,70px)!important;
  }
}

@media(max-width:620px){
  .site-header{
    width:calc(100% - 28px)!important;
    height:76px!important;
  }

  .brand img{
    width:120px!important;
    max-width:120px!important;
  }

  .nav-signin{
    display:none!important;
  }

  .hero{
    margin-top:42px!important;
    padding:0 12px!important;
  }

  .hero h1.hero-title{
    padding:0 8px!important;
  }
}


/* ============================================================
   IMAGI777 FULL SALES PAGE — DESIGN PASS 2
   ============================================================ */


/* ---------------------------
   BIGGER NAV LOGO
--------------------------- */

.site-header .brand{
  width:205px!important;
  height:70px!important;
  display:flex!important;
  align-items:center!important;
  overflow:visible!important;
}

.site-header .brand img{
  width:150px!important;
  max-width:150px!important;
  height:auto!important;
  transform:scale(1.55)!important;
  transform-origin:left center!important;
}


/* ---------------------------
   GLOBAL SECTION DESIGN
--------------------------- */

.section{
  width:min(1120px,calc(100% - 48px))!important;
  margin:0 auto!important;
  padding:120px 0!important;
}

.section-centered{
  text-align:center!important;
}

.section-heading{
  max-width:820px!important;
}

.section-heading.centered{
  margin:0 auto!important;
  text-align:center!important;
}

.section-pill{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:9px 16px!important;
  border:1px solid rgba(145,96,255,.34)!important;
  border-radius:999px!important;
  background:rgba(127,78,255,.07)!important;
  color:#a58af1!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.15em!important;
}

.section h2,
.final-section h2{
  margin:18px 0 0!important;
  color:#f5f5f8!important;
  font-size:clamp(40px,5vw,64px)!important;
  line-height:1.04!important;
  letter-spacing:-.048em!important;
}

.section h2 span,
.final-section h2 span{
  display:block!important;
  background:linear-gradient(
    90deg,
    #9669ff,
    #6394ff,
    #55d6bc
  )!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
}

.section-heading p,
.section-lead{
  max-width:700px!important;
  color:#777b88!important;
  font-size:15px!important;
  line-height:1.75!important;
}

.section-heading.centered p{
  margin-left:auto!important;
  margin-right:auto!important;
}

.section-lead{
  margin:20px auto 0!important;
}

.section-cta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:14px 22px!important;
  margin-top:35px!important;
  border:1px solid rgba(155,112,255,.45)!important;
  border-radius:12px!important;
  background:linear-gradient(
    135deg,
    #9763ff,
    #6646ee
  )!important;
  color:white!important;
  font-size:13px!important;
  font-weight:850!important;
  box-shadow:0 12px 35px rgba(112,72,238,.22)!important;
}


/* ============================================================
   STUDIO PRODUCT MOCKUP
============================================================ */

.product-showcase{
  width:min(1160px,calc(100% - 48px))!important;
  margin:95px auto 80px!important;
}

.studio-window{
  overflow:hidden!important;
  border:1px solid #292c38!important;
  border-radius:20px!important;
  background:#090b11!important;
  box-shadow:
    0 55px 150px rgba(0,0,0,.58),
    0 0 100px rgba(86,58,207,.08)!important;
}

.studio-browser{
  height:50px!important;
  padding:0 18px!important;
  display:grid!important;
  grid-template-columns:1fr auto 1fr!important;
  align-items:center!important;
  border-bottom:1px solid #242731!important;
  background:#10121a!important;
  color:#5d616e!important;
  font-size:9px!important;
  font-weight:850!important;
  letter-spacing:.14em!important;
}

.browser-dots{
  display:flex!important;
  gap:7px!important;
}

.browser-dots i{
  display:block!important;
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  background:#373a45!important;
}

.studio-ui{
  display:grid!important;
  grid-template-columns:205px 1fr!important;
  min-height:510px!important;
}

.studio-sidebar{
  padding:26px 19px!important;
  border-right:1px solid #242731!important;
  background:#0d0f15!important;
}

.studio-sidebar img{
  margin:0 0 28px!important;
}

.fake-new-film{
  padding:12px!important;
  margin-bottom:27px!important;
  border-radius:9px!important;
  background:#6846e9!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:800!important;
}

.studio-sidebar small{
  color:#555965!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.15em!important;
}

.fake-project{
  margin-top:10px!important;
  padding:11px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
  border-radius:8px!important;
  color:#6a6e7a!important;
  font-size:9px!important;
}

.fake-project strong{
  color:#989ba6!important;
  font-size:10px!important;
}

.fake-project.active{
  background:#171923!important;
}

.fake-project.active strong{
  color:#fff!important;
}

.studio-main{
  padding:40px!important;
}

.studio-main-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:25px!important;
}

.studio-main-head small{
  color:#876ce5!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.15em!important;
}

.studio-main-head h3{
  margin:9px 0 6px!important;
  color:#fff!important;
  font-size:26px!important;
}

.studio-main-head p{
  margin:0!important;
  color:#686d79!important;
  font-size:12px!important;
}

.studio-status{
  padding:8px 11px!important;
  border:1px solid rgba(126,92,247,.30)!important;
  border-radius:999px!important;
  background:rgba(106,73,232,.12)!important;
  color:#9b7aff!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.13em!important;
}

.film-scenes{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:11px!important;
  margin-top:38px!important;
}

.film-scene{
  min-height:175px!important;
  position:relative!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:12px!important;
}

.film-scene::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(
    to bottom,
    transparent 42%,
    rgba(0,0,0,.84)
  )!important;
}

.scene-one{
  background:
    radial-gradient(circle at 62% 27%,#de9d5d,transparent 20%),
    linear-gradient(145deg,#29215a,#785335,#17151f)!important;
}

.scene-two{
  background:
    radial-gradient(circle at 42% 22%,#85adef,transparent 20%),
    linear-gradient(145deg,#161b30,#263c57,#11121a)!important;
}

.scene-three{
  background:
    radial-gradient(circle at 60% 24%,#6edbb7,transparent 20%),
    linear-gradient(145deg,#163a31,#284955,#10131b)!important;
}

.scene-four{
  background:
    radial-gradient(circle at 42% 24%,#9b72d8,transparent 20%),
    linear-gradient(145deg,#31214b,#3a294c,#14131b)!important;
}

.scene-number{
  position:absolute!important;
  z-index:3!important;
  left:12px!important;
  bottom:32px!important;
  color:#d7d8dd!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.13em!important;
}

.scene-state{
  position:absolute!important;
  z-index:3!important;
  left:12px!important;
  bottom:12px!important;
  font-size:8px!important;
}

.scene-state.good{
  color:#66dab2!important;
}

.scene-state.motion{
  color:#8c9eff!important;
}

.scene-state.generating{
  color:#ad84ff!important;
}

.studio-progress{
  margin-top:37px!important;
}

.studio-progress-top{
  display:flex!important;
  justify-content:space-between!important;
  color:#696d79!important;
  font-size:10px!important;
}

.studio-progress-top strong{
  color:#aa90ff!important;
}

.studio-progress-track{
  height:6px!important;
  margin-top:10px!important;
  overflow:hidden!important;
  border-radius:999px!important;
  background:#20232c!important;
}

.studio-progress-track div{
  width:68%!important;
  height:100%!important;
  border-radius:999px!important;
  background:linear-gradient(
    90deg,
    #8057f5,
    #608bff,
    #55d4b9
  )!important;
}

.workflow-strip{
  margin-top:40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:15px!important;
  color:#646874!important;
  font-size:10px!important;
  font-weight:850!important;
  letter-spacing:.08em!important;
}

.workflow-strip strong{
  color:#afb2bb!important;
}

.workflow-strip i{
  color:#543d87!important;
  font-style:normal!important;
}


/* ============================================================
   OLD WAY / NEW WAY
============================================================ */

.comparison{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:20px!important;
  margin-top:55px!important;
  text-align:left!important;
}

.comparison article{
  min-height:560px!important;
  padding:31px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:21px!important;
  background:rgba(255,255,255,.02)!important;
}

.comparison-new{
  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(105,68,225,.15),
      transparent 46%
    ),
    rgba(255,255,255,.022)!important;
}

.comparison-label{
  color:#795fd1!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
}

.comparison h3{
  margin:10px 0 30px!important;
  font-size:27px!important;
}

.comparison p{
  color:#6f737f!important;
  font-size:13px!important;
  line-height:1.7!important;
}

.tool-stack{
  min-height:345px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
}

.tool-stack span{
  width:220px!important;
  padding:10px!important;
  text-align:center!important;
  border:1px solid #2c2f39!important;
  border-radius:8px!important;
  background:#12141c!important;
  color:#9699a4!important;
  font-size:11px!important;
}

.tool-stack i{
  color:#4a4d59!important;
  font-style:normal!important;
}

.imagi-flow{
  min-height:345px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}

.flow-idea,
.flow-film{
  min-width:190px!important;
  padding:12px!important;
  text-align:center!important;
  border:1px solid #2d303b!important;
  border-radius:10px!important;
  background:#12141c!important;
  color:#a3a6b0!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.10em!important;
}

.flow-film{
  color:#62d6b8!important;
}

.flow-line{
  width:2px!important;
  height:46px!important;
  background:linear-gradient(#493675,#8c5eff)!important;
}

.flow-core{
  width:150px!important;
  height:90px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #4d397e!important;
  border-radius:22px!important;
  background:radial-gradient(circle,#37275f,#16131f)!important;
  box-shadow:0 0 45px rgba(119,73,244,.20)!important;
}


/* ============================================================
   HOW IT WORKS
============================================================ */

.how-grid{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:18px!important;
  margin-top:55px!important;
}

.how-card{
  padding:26px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.02)!important;
}

.step-index{
  color:#7b5ed4!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
}

.how-card h3{
  margin:24px 0 10px!important;
  font-size:20px!important;
}

.how-card>p{
  color:#727682!important;
  font-size:13px!important;
  line-height:1.65!important;
}

.how-visual{
  height:235px!important;
  margin-top:23px!important;
  border:1px solid #292c37!important;
  border-radius:14px!important;
  background:#0d0f16!important;
}

.prompt-demo{
  padding:24px!important;
}

.prompt-demo small{
  color:#6d56af!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
}

.prompt-demo p{
  margin-top:23px!important;
  color:#bbbcc3!important;
  font-size:14px!important;
  line-height:1.55!important;
}

.prompt-cursor{
  width:2px!important;
  height:18px!important;
  background:#9c73ff!important;
}

.production-demo{
  padding:27px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:13px!important;
}

.production-demo div{
  padding:10px 12px!important;
  border-radius:8px!important;
  background:#141720!important;
  color:#898d99!important;
  font-size:11px!important;
}

.production-demo span{
  display:inline-block!important;
  width:23px!important;
  color:#67d4b1!important;
}

.render-demo{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}

.render-icon{
  width:48px!important;
  height:48px!important;
  display:grid!important;
  place-items:center!important;
  margin-bottom:15px!important;
  border-radius:50%!important;
  background:#211a36!important;
  color:#b69aff!important;
}

.render-track{
  width:72%!important;
  height:5px!important;
  margin:18px 0!important;
  overflow:hidden!important;
  border-radius:99px!important;
  background:#242731!important;
}

.render-track div{
  width:82%!important;
  height:100%!important;
  background:linear-gradient(90deg,#8b5cff,#56ceb9)!important;
}


/* ============================================================
   PRODUCT DEMO
============================================================ */

.demo-player{
  max-width:980px!important;
  margin:55px auto 0!important;
  overflow:hidden!important;
  border:1px solid #2b2e38!important;
  border-radius:20px!important;
  background:#0b0d13!important;
  box-shadow:0 45px 120px rgba(0,0,0,.48)!important;
}

.demo-toolbar{
  height:45px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-bottom:1px solid #242731!important;
  color:#5b5f6b!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
}

.demo-screen{
  min-height:400px!important;
  padding:50px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:45px!important;
  background:radial-gradient(
    circle at 50% 45%,
    rgba(94,66,188,.16),
    transparent 43%
  )!important;
}

.demo-orb{
  width:160px!important;
  height:160px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #463367!important;
  border-radius:38px!important;
  background:radial-gradient(
    circle at 40% 35%,
    #593e87,
    #181421 58%
  )!important;
  box-shadow:0 0 70px rgba(117,73,239,.18)!important;
}

.demo-orb div{
  width:59px!important;
  height:59px!important;
  border:3px solid #aa8bff!important;
  border-right-color:transparent!important;
  border-radius:50%!important;
}

.demo-copy{
  max-width:420px!important;
}

.demo-copy small{
  color:#8765db!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.15em!important;
}

.demo-copy h3{
  margin:11px 0!important;
  font-size:33px!important;
  letter-spacing:-.04em!important;
}

.demo-copy p{
  color:#696d79!important;
  line-height:1.65!important;
}

.demo-timeline{
  min-height:70px!important;
  padding:0 25px!important;
  display:flex!important;
  align-items:center!important;
  gap:17px!important;
  border-top:1px solid #242731!important;
  color:#686c78!important;
  font-size:9px!important;
}

.demo-track{
  flex:1!important;
  height:5px!important;
  overflow:hidden!important;
  border-radius:99px!important;
  background:#20232c!important;
}

.demo-track div{
  width:67%!important;
  height:100%!important;
  background:linear-gradient(90deg,#8659ff,#5ed1bd)!important;
}

.demo-caption{
  margin-top:14px!important;
  text-align:center!important;
  color:#50545f!important;
  font-size:10px!important;
}


/* ============================================================
   FEATURES
============================================================ */

.feature-grid{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:16px!important;
  margin-top:55px!important;
}

.feature-grid article{
  min-height:220px!important;
  padding:29px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.022)!important;
}

.feature-icon{
  width:44px!important;
  height:44px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #3b2e5c!important;
  border-radius:12px!important;
  background:#17131f!important;
  color:#a080ff!important;
  font-size:18px!important;
}

.feature-grid h3{
  margin:24px 0 10px!important;
  font-size:18px!important;
}

.feature-grid p{
  margin:0!important;
  color:#707480!important;
  font-size:13px!important;
  line-height:1.65!important;
}


/* ============================================================
   DIRECTOR
============================================================ */

.director-section{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  align-items:center!important;
  gap:80px!important;
}

.director-copy>p{
  color:#757985!important;
  line-height:1.7!important;
}

.director-list{
  display:grid!important;
  gap:13px!important;
  margin-top:31px!important;
}

.director-list span{
  color:#a0a3ad!important;
  font-size:13px!important;
}

.director-ui{
  display:flex!important;
  justify-content:center!important;
}

.director-card{
  width:min(430px,100%)!important;
  padding:22px!important;
  border:1px solid #2d303b!important;
  border-radius:19px!important;
  background:#0d0f16!important;
  box-shadow:0 40px 90px rgba(0,0,0,.45)!important;
}

.director-card small{
  color:#775dc5!important;
  font-weight:900!important;
}

.director-image{
  height:235px!important;
  margin:13px 0 20px!important;
  border-radius:12px!important;
  background:
    radial-gradient(circle at 55% 25%,rgba(242,176,93,.8),transparent 18%),
    linear-gradient(145deg,#211a42,#745032,#11121a)!important;
}

.director-card label{
  display:block!important;
  color:#575b67!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.13em!important;
}

.director-prompt{
  margin-top:8px!important;
  padding:13px!important;
  border:1px solid #292c36!important;
  border-radius:9px!important;
  background:#12141c!important;
  color:#858994!important;
  font-size:11px!important;
  line-height:1.5!important;
}

.director-buttons{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  margin-top:12px!important;
}

.director-buttons button{
  padding:10px!important;
  border:1px solid #343744!important;
  border-radius:8px!important;
  background:#171923!important;
  color:#9b9da7!important;
}


/* ============================================================
   IDEA / EMOTIONAL SECTION
============================================================ */

.idea-section{
  max-width:900px!important;
  text-align:center!important;
}

.idea-inner{
  padding:80px 70px!important;
  border:1px solid #292c38!important;
  border-radius:30px!important;
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(105,69,216,.15),
      transparent 50%
    ),
    #0a0c12!important;
}

.idea-inner p{
  max-width:680px!important;
  margin:22px auto!important;
  color:#7c808b!important;
  line-height:1.75!important;
}

.idea-emphasis{
  color:#c9cad0!important;
  font-size:18px!important;
}


/* ============================================================
   USE CASES
============================================================ */

.usecase-grid{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:18px!important;
  margin-top:52px!important;
}

.usecase{
  overflow:hidden!important;
  padding-bottom:25px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:19px!important;
  background:#0c0e14!important;
}

.usecase-art{
  height:195px!important;
  margin-bottom:23px!important;
}

.usecase-a .usecase-art{
  background:linear-gradient(145deg,#32244d,#745431,#17151d)!important;
}

.usecase-b .usecase-art{
  background:linear-gradient(145deg,#101b31,#293c59,#13141c)!important;
}

.usecase-c .usecase-art{
  background:linear-gradient(145deg,#3f1735,#552742,#15131b)!important;
}

.usecase-d .usecase-art{
  background:linear-gradient(145deg,#163a35,#254b50,#11131a)!important;
}

.usecase-e .usecase-art{
  background:linear-gradient(145deg,#322450,#322c5b,#13131c)!important;
}

.usecase-f .usecase-art{
  background:linear-gradient(145deg,#403020,#2a344e,#12131a)!important;
}

.usecase small,
.usecase h3,
.usecase p{
  margin-left:24px!important;
  margin-right:24px!important;
}

.usecase small{
  color:#795fc7!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.15em!important;
}

.usecase h3{
  margin-top:8px!important;
  margin-bottom:9px!important;
  font-size:18px!important;
}

.usecase p{
  color:#6e727e!important;
  font-size:12px!important;
  line-height:1.65!important;
}


/* ============================================================
   EXAMPLES
============================================================ */

.examples-grid{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:20px!important;
  margin-top:54px!important;
}

.example-card{
  overflow:hidden!important;
  padding-bottom:18px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:18px!important;
  background:#0d0f15!important;
}

.example-image{
  height:215px!important;
  display:grid!important;
  place-items:center!important;
}

.example-image button{
  width:52px!important;
  height:52px!important;
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:50%!important;
  background:rgba(9,10,14,.65)!important;
  color:white!important;
  backdrop-filter:blur(10px)!important;
}

.example-1 .example-image{
  background:linear-gradient(145deg,#3e2a55,#7b5431,#17131e)!important;
}

.example-2 .example-image{
  background:linear-gradient(145deg,#14372d,#33475d,#111219)!important;
}

.example-3 .example-image{
  background:linear-gradient(145deg,#332045,#243554,#11121a)!important;
}

.example-4 .example-image{
  background:linear-gradient(145deg,#43311f,#5c4034,#14131a)!important;
}

.example-5 .example-image{
  background:linear-gradient(145deg,#12213d,#193955,#10121a)!important;
}

.example-6 .example-image{
  background:linear-gradient(145deg,#401f2e,#4b3441,#13131b)!important;
}

.example-card h3{
  margin:15px 18px 5px!important;
  color:#f1f1f4!important;
  font-size:16px!important;
}

.example-card>span{
  display:block!important;
  margin:0 18px!important;
  color:#626671!important;
  font-size:11px!important;
}


/* ============================================================
   YOUTUBE
============================================================ */

.youtube-section{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  align-items:center!important;
  gap:70px!important;
}

.youtube-copy>p{
  color:#767a86!important;
  line-height:1.7!important;
}

.youtube-flow{
  padding:32px!important;
  border:1px solid #2d303b!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 50% 20%,rgba(104,67,216,.13),transparent 50%),
    #0d0f16!important;
  text-align:center!important;
}

.youtube-flow>div{
  padding:18px!important;
  border:1px solid #282b35!important;
  border-radius:12px!important;
  background:#12141c!important;
}

.youtube-flow small{
  display:block!important;
  margin-bottom:8px!important;
  color:#725abc!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
}

.youtube-flow strong{
  font-size:13px!important;
  line-height:1.5!important;
}

.youtube-flow>i{
  display:block!important;
  padding:11px!important;
  color:#503a83!important;
  font-style:normal!important;
}

.youtube-process{
  color:#a3a6b0!important;
  font-size:10px!important;
  font-weight:900!important;
}

.youtube-upload{
  color:#62d3b5!important;
  font-size:10px!important;
  font-weight:900!important;
}


/* ============================================================
   LANGUAGES
============================================================ */

.language-orbit{
  width:min(790px,100%)!important;
  height:440px!important;
  margin:60px auto 0!important;
  position:relative!important;
}

.language-center{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  width:190px!important;
  height:120px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #47346f!important;
  border-radius:27px!important;
  background:radial-gradient(circle,#38245d,#12121b)!important;
  box-shadow:0 0 90px rgba(115,72,233,.15)!important;
}

.lang{
  position:absolute!important;
  padding:10px 15px!important;
  border:1px solid #2e313c!important;
  border-radius:10px!important;
  background:#10121a!important;
  color:#9699a4!important;
  font-size:11px!important;
}

.lang-1{left:5%!important;top:10%!important}
.lang-2{right:6%!important;top:12%!important}
.lang-3{left:0!important;top:45%!important}
.lang-4{right:0!important;top:45%!important}
.lang-5{left:9%!important;bottom:12%!important}
.lang-6{right:9%!important;bottom:12%!important}
.lang-7{left:35%!important;top:3%!important}
.lang-8{right:38%!important;bottom:3%!important}


/* ============================================================
   SPEED
============================================================ */

.speed-section{
  display:grid!important;
  grid-template-columns:.65fr 1.35fr!important;
  align-items:center!important;
  gap:60px!important;
}

.speed-number{
  font-size:210px!important;
  line-height:1!important;
  font-weight:900!important;
  text-align:center!important;
  background:linear-gradient(
    135deg,
    #9169ff,
    #5d92ff,
    #54d7bc
  )!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
}

.speed-copy p{
  color:#747985!important;
  line-height:1.7!important;
}


/* ============================================================
   PRICING
============================================================ */

.pricing-box{
  max-width:820px!important;
  margin:56px auto 0!important;
  overflow:hidden!important;
  position:relative!important;
  border:1px solid #342d4a!important;
  border-radius:26px!important;
  background:#0d0f16!important;
}

.pricing-glow{
  position:absolute!important;
  width:500px!important;
  height:300px!important;
  left:50%!important;
  top:-230px!important;
  transform:translateX(-50%)!important;
  border-radius:50%!important;
  background:#7848ff!important;
  filter:blur(100px)!important;
  opacity:.28!important;
}

.pricing-content{
  position:relative!important;
  padding:60px!important;
  text-align:center!important;
}

.pricing-content>small{
  color:#8a6ce2!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
}

.pricing-content h3{
  max-width:600px!important;
  margin:14px auto!important;
  color:#fff!important;
  font-size:31px!important;
  letter-spacing:-.035em!important;
}

.pricing-content>p{
  max-width:600px!important;
  margin:0 auto!important;
  color:#737782!important;
  line-height:1.7!important;
}

.pricing-benefits{
  max-width:630px!important;
  margin:32px auto 0!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px 30px!important;
  text-align:left!important;
}

.pricing-benefits span{
  color:#9497a1!important;
  font-size:12px!important;
}

.pricing-login{
  display:block!important;
  margin-top:18px!important;
  color:#777b89!important;
  font-size:11px!important;
}


/* ============================================================
   OBJECTION
============================================================ */

.objection-section{
  max-width:850px!important;
  text-align:center!important;
}

.objection-copy{
  margin-top:43px!important;
}

.objection-copy p{
  color:#747884!important;
  font-size:16px!important;
  line-height:1.7!important;
}

.objection-sequence{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  gap:9px!important;
  margin:30px 0!important;
}

.objection-sequence span{
  padding:10px 14px!important;
  border:1px solid #2b2e38!important;
  border-radius:9px!important;
  background:#10121a!important;
  color:#9699a3!important;
  font-size:11px!important;
}

.objection-final strong{
  color:#d7d8dd!important;
}


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

.faq-list{
  max-width:960px!important;
  margin:55px auto 0!important;
  display:grid!important;
  gap:10px!important;
}

.faq-item{
  overflow:hidden!important;
  border:1px solid #272a34!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.018)!important;
}

.faq-question{
  width:100%!important;
  min-height:69px!important;
  padding:0 21px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
  border:0!important;
  background:transparent!important;
  color:#e6e7eb!important;
  text-align:left!important;
  font-weight:750!important;
}

.faq-question i{
  width:34px!important;
  height:34px!important;
  display:grid!important;
  place-items:center!important;
  flex-shrink:0!important;
  border:1px solid #30333d!important;
  border-radius:50%!important;
  color:#a2a5af!important;
  font-style:normal!important;
  font-size:19px!important;
}

.faq-answer{
  max-height:0!important;
  opacity:0!important;
  overflow:hidden!important;
  transition:max-height .3s ease,opacity .3s ease!important;
}

.faq-answer p{
  margin:0!important;
  padding:0 75px 22px 21px!important;
  color:#747884!important;
  font-size:13px!important;
  line-height:1.65!important;
}

.faq-item.open .faq-answer{
  max-height:250px!important;
  opacity:1!important;
}

.faq-item.open .faq-question i{
  transform:rotate(45deg)!important;
  color:#a37fff!important;
}


/* ============================================================
   FINAL CTA
============================================================ */

.final-section{
  width:min(1180px,calc(100% - 48px))!important;
  min-height:610px!important;
  margin:60px auto 100px!important;
  padding:110px 60px!important;
  position:relative!important;
  overflow:hidden!important;
  border:1px solid #302943!important;
  border-radius:31px!important;
  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(104,66,210,.18),
      transparent 46%
    ),
    #090b11!important;
  text-align:center!important;
}

.final-section h2{
  max-width:850px!important;
  margin:22px auto 0!important;
}

.final-section>p{
  margin:20px 0 38px!important;
  color:#787c87!important;
  font-size:16px!important;
}

.final-prompt{
  width:min(770px,100%)!important;
  margin:0 auto!important;
  padding:9px!important;
  display:flex!important;
  gap:10px!important;
  border:1px solid #383240!important;
  border-radius:16px!important;
  background:#0d0f16!important;
}

#bottomIdea{
  flex:1!important;
  min-height:56px!important;
  padding:13px!important;
  resize:none!important;
  outline:0!important;
  border:0!important;
  background:transparent!important;
  color:#fff!important;
}

.final-prompt button{
  padding:0 20px!important;
  border:0!important;
  border-radius:11px!important;
  background:linear-gradient(135deg,#9965ff,#6546ee)!important;
  color:#fff!important;
  font-weight:850!important;
}

.final-section>small{
  display:block!important;
  margin-top:14px!important;
  color:#50545f!important;
  font-size:10px!important;
}


/* ============================================================
   FOOTER
============================================================ */

.site-footer{
  width:min(1120px,calc(100% - 48px))!important;
  margin:0 auto!important;
}

.footer-main{
  padding:60px 0!important;
  display:grid!important;
  grid-template-columns:2fr 1fr 1fr 1fr!important;
  gap:50px!important;
  border-top:1px solid #1d2028!important;
}

.footer-brand img{
  margin-bottom:10px!important;
}

.footer-brand p{
  color:#565a65!important;
  font-size:12px!important;
}

.footer-column{
  display:flex!important;
  flex-direction:column!important;
  gap:13px!important;
}

.footer-column strong{
  margin-bottom:5px!important;
  color:#d0d2d8!important;
  font-size:11px!important;
}

.footer-column a,
.footer-column span,
.footer-start{
  color:#646874!important;
  text-decoration:none!important;
  font-size:11px!important;
}

.footer-start{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  text-align:left!important;
}

.footer-bottom{
  padding:22px 0 35px!important;
  border-top:1px solid #1d2028!important;
  color:#484c56!important;
  text-align:center!important;
  font-size:10px!important;
}


/* ============================================================
   RESPONSIVE LOWER PAGE
============================================================ */

@media(max-width:900px){

  .site-header .brand{
    width:170px!important;
  }

  .site-header .brand img{
    transform:scale(1.35)!important;
  }

  .studio-ui{
    grid-template-columns:1fr!important;
  }

  .studio-sidebar{
    display:none!important;
  }

  .comparison,
  .director-section,
  .youtube-section,
  .speed-section{
    grid-template-columns:1fr!important;
  }

  .how-grid,
  .feature-grid,
  .usecase-grid,
  .examples-grid{
    grid-template-columns:1fr 1fr!important;
  }

  .speed-number{
    font-size:140px!important;
  }

  .footer-main{
    grid-template-columns:1fr 1fr!important;
  }

}

@media(max-width:620px){

  .site-header .brand{
    width:145px!important;
  }

  .site-header .brand img{
    transform:scale(1.25)!important;
  }

  .section,
  .product-showcase{
    width:calc(100% - 28px)!important;
    padding-top:85px!important;
    padding-bottom:85px!important;
  }

  .film-scenes{
    grid-template-columns:1fr 1fr!important;
  }

  .studio-main{
    padding:22px!important;
  }

  .comparison,
  .how-grid,
  .feature-grid,
  .usecase-grid,
  .examples-grid{
    grid-template-columns:1fr!important;
  }

  .comparison article{
    min-height:auto!important;
  }

  .demo-screen{
    flex-direction:column!important;
    padding:35px 20px!important;
  }

  .idea-inner{
    padding:55px 23px!important;
  }

  .pricing-content{
    padding:44px 22px!important;
  }

  .pricing-benefits{
    grid-template-columns:1fr!important;
  }

  .final-section{
    width:calc(100% - 28px)!important;
    padding:75px 20px!important;
  }

  .final-prompt{
    flex-direction:column!important;
  }

  .final-prompt button{
    min-height:50px!important;
  }

  .footer-main{
    grid-template-columns:1fr!important;
    gap:35px!important;
  }

}


/* ============================================================
   HERO CREATOR BOX — PREMIUM REDESIGN
   ============================================================ */

.creator-shell{
  width:min(900px,100%)!important;
  max-width:900px!important;
  margin:0 auto!important;
  padding:18px 18px 16px!important;
  border:1px solid transparent!important;
  border-radius:22px!important;
  background:
    linear-gradient(#0d1017,#0d1017) padding-box,
    linear-gradient(
      110deg,
      rgba(145,95,255,.95),
      rgba(78,139,255,.55),
      rgba(75,222,192,.72)
    ) border-box!important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.42),
    0 0 60px rgba(106,68,226,.10)!important;
}

.creator-shell:focus-within{
  transform:translateY(-2px)!important;
  box-shadow:
    0 34px 110px rgba(0,0,0,.52),
    0 0 90px rgba(106,68,226,.16)!important;
}


/* HEADER ROW */

.creator-heading{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
  min-height:34px!important;
  margin:0!important;
  padding:0 2px 11px!important;
  border-bottom:1px solid rgba(255,255,255,.065)!important;
}

.creator-heading>div{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  color:#eef0f5!important;
  font-size:13px!important;
  font-weight:800!important;
}

.creator-spark{
  display:inline-grid!important;
  place-items:center!important;
  width:23px!important;
  height:23px!important;
  margin:0!important;
  border:1px solid rgba(158,113,255,.35)!important;
  border-radius:7px!important;
  background:rgba(125,78,240,.10)!important;
  color:#b494ff!important;
  font-size:12px!important;
}

.creator-ai{
  display:inline-flex!important;
  align-items:center!important;
  height:24px!important;
  padding:0 9px!important;
  border:1px solid rgba(107,223,199,.18)!important;
  border-radius:999px!important;
  background:rgba(83,190,168,.06)!important;
  color:#75cdb9!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
  white-space:nowrap!important;
}


/* INPUT */

#heroIdea{
  width:100%!important;
  min-height:126px!important;
  margin:0!important;
  padding:21px 4px 12px!important;
  resize:none!important;
  outline:0!important;
  border:0!important;
  background:transparent!important;
  color:#f4f5f7!important;
  font-size:19px!important;
  line-height:1.55!important;
  font-weight:500!important;
}

#heroIdea::placeholder{
  color:#5d6270!important;
  opacity:1!important;
}


/* FOOTER ROW */

.creator-footer{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
  min-height:58px!important;
  margin:0!important;
  padding:13px 0 0!important;
  border-top:1px solid rgba(255,255,255,.065)!important;
}

.creator-example{
  flex:1!important;
  margin:0!important;
  color:#606572!important;
  font-size:10px!important;
  line-height:1.5!important;
}

.creator-example::first-letter{
  color:#7e8490!important;
}

.creator-example span{
  color:#898e9a!important;
}

.primary-cta{
  flex-shrink:0!important;
  min-width:162px!important;
  min-height:44px!important;
  padding:0 18px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  border:1px solid rgba(177,143,255,.55)!important;
  border-radius:11px!important;
  background:
    linear-gradient(
      135deg,
      #9b67ff 0%,
      #7651f1 52%,
      #5d72ef 100%
    )!important;
  color:white!important;
  font-size:12px!important;
  font-weight:850!important;
  box-shadow:
    0 10px 28px rgba(112,72,241,.30),
    inset 0 1px rgba(255,255,255,.18)!important;
  transition:
    transform .18s ease,
    box-shadow .18s ease!important;
}

.primary-cta:hover{
  transform:translateY(-1px)!important;
  box-shadow:
    0 14px 35px rgba(112,72,241,.38),
    inset 0 1px rgba(255,255,255,.18)!important;
}

.primary-cta span{
  margin:0!important;
  color:#fff!important;
}


/* TRUST ROW BELOW BOX */

.hero-trust{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:0!important;
  margin:15px auto 0!important;
  color:#686d79!important;
  font-size:10px!important;
}

.hero-trust span{
  display:flex!important;
  align-items:center!important;
}

.hero-trust span:not(:last-child)::after{
  content:"•"!important;
  margin:0 11px!important;
  color:#383c47!important;
}

.hero-trust span::first-letter{
  color:#69d5b8!important;
}


/* MOBILE */

@media(max-width:620px){

  .creator-shell{
    padding:15px!important;
    border-radius:18px!important;
  }

  .creator-heading{
    align-items:flex-start!important;
  }

  .creator-heading>div{
    font-size:12px!important;
  }

  #heroIdea{
    min-height:110px!important;
    padding-top:18px!important;
    font-size:17px!important;
  }

  .creator-footer{
    flex-direction:column!important;
    align-items:stretch!important;
  }

  .creator-example{
    text-align:left!important;
  }

  .primary-cta{
    width:100%!important;
  }

  .hero-trust{
    gap:7px 12px!important;
  }

  .hero-trust span:not(:last-child)::after{
    display:none!important;
  }

}


/* ============================================================
   HERO ABOVE-THE-FOLD FIT
   Keep complete creator box visible on desktop
   ============================================================ */

@media(min-width:901px){

  .site-header{
    height:76px!important;
  }

  .hero{
    margin-top:34px!important;
  }

  .hero-kicker{
    padding:8px 16px!important;
    font-size:10px!important;
  }

  .hero h1.hero-title{
    margin-top:30px!important;
  }

  .hero h1 .hero-title-line{
    font-size:clamp(52px,5.85vw,91px)!important;
    line-height:.96!important;
  }

  .hero-subtitle{
    margin-top:28px!important;
    font-size:18px!important;
  }

  .hero-support{
    margin-top:7px!important;
    margin-bottom:23px!important;
    font-size:14px!important;
  }

  .creator-shell{
    min-height:0!important;
    padding:16px 18px 14px!important;
  }

  #heroIdea{
    min-height:92px!important;
    padding:18px 4px 8px!important;
    font-size:18px!important;
  }

  .creator-footer{
    min-height:52px!important;
    padding-top:11px!important;
  }

  .hero-trust{
    margin-top:12px!important;
  }

}


/* Slightly tighter on laptop-height screens */

@media(min-width:901px) and (max-height:850px){

  .site-header{
    height:68px!important;
  }

  .hero{
    margin-top:22px!important;
  }

  .hero-kicker{
    padding:7px 15px!important;
  }

  .hero h1.hero-title{
    margin-top:23px!important;
  }

  .hero h1 .hero-title-line{
    font-size:clamp(50px,5.45vw,84px)!important;
  }

  .hero-subtitle{
    margin-top:21px!important;
    font-size:17px!important;
  }

  .hero-support{
    margin-top:5px!important;
    margin-bottom:17px!important;
  }

  #heroIdea{
    min-height:78px!important;
    padding-top:14px!important;
  }

  .creator-heading{
    min-height:30px!important;
    padding-bottom:8px!important;
  }

  .creator-footer{
    min-height:48px!important;
    padding-top:9px!important;
  }

  .hero-trust{
    margin-top:9px!important;
  }

}


/* ============================================================
   VIDEOTTO-STYLE OVAL CTA / SEARCH BAR
   ============================================================ */

/* main rounded search/cta shells */
.creator-shell,
.hero-cta-shell,
.cta-shell,
.final-cta-shell,
.idea-shell,
.search-shell{
  border-radius:34px !important;
  border:1px solid rgba(115, 133, 255, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(10,12,24,0.96), rgba(5,8,20,0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 18px 50px rgba(8,10,30,0.34) !important;
  overflow:hidden !important;
}

/* input / textarea area */
#heroIdea,
.creator-shell textarea,
.creator-shell input,
.hero-cta-shell input,
.final-cta-shell input,
.final-cta-shell textarea,
.idea-shell input,
.search-shell input{
  border:none !important;
  outline:none !important;
  background:transparent !important;
  color:#f3f5ff !important;
  font-size:19px !important;
  line-height:1.35 !important;
  border-radius:24px !important;
  padding:22px 24px !important;
  box-shadow:none !important;
}

#heroIdea::placeholder,
.creator-shell textarea::placeholder,
.creator-shell input::placeholder,
.hero-cta-shell input::placeholder,
.final-cta-shell input::placeholder,
.final-cta-shell textarea::placeholder,
.idea-shell input::placeholder,
.search-shell input::placeholder{
  color:rgba(230,235,255,0.36) !important;
}

/* footer/button row inside search bar */
.creator-footer,
.hero-cta-actions,
.final-cta-actions,
.idea-actions,
.search-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
}

/* all important buttons: make them oval/pill */
.primary-cta,
.nav-create,
.nav-signin,
.hero-cta-shell button,
.final-cta-shell button,
.idea-shell button,
.search-shell button,
.creator-footer button{
  border-radius:999px !important;
  min-height:58px !important;
  padding:0 28px !important;
  border:1px solid rgba(150, 125, 255, 0.22) !important;
  font-weight:800 !important;
  letter-spacing:-0.02em !important;
  box-shadow:
    0 10px 24px rgba(120,92,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

/* primary purple button */
.primary-cta,
.nav-create,
.hero-cta-shell button.primary,
.final-cta-shell button.primary,
.creator-footer button{
  background:linear-gradient(135deg, #8b5cf6 0%, #7c6cff 40%, #66d3ff 140%) !important;
  color:#ffffff !important;
}

/* sign in button should also be more pill-like */
.nav-signin{
  background:rgba(255,255,255,0.02) !important;
  color:#f3f5ff !important;
}

/* slightly more elegant creator header */
.creator-heading{
  padding:0 2px 14px !important;
  border-bottom:1px solid rgba(255,255,255,0.06) !important;
}

.creator-ai{
  border-radius:999px !important;
  padding:8px 14px !important;
  background:rgba(65, 226, 197, 0.08) !important;
  border:1px solid rgba(65, 226, 197, 0.24) !important;
}

/* example line */
.creator-example{
  font-size:14px !important;
  color:rgba(232,236,255,0.76) !important;
}

.creator-example span{
  color:#ffffff !important;
}

/* laptop tweak */
@media (max-width: 1100px){
  .primary-cta,
  .nav-create,
  .nav-signin,
  .hero-cta-shell button,
  .final-cta-shell button,
  .idea-shell button,
  .search-shell button,
  .creator-footer button{
    min-height:54px !important;
    padding:0 24px !important;
  }

  #heroIdea,
  .creator-shell textarea,
  .creator-shell input,
  .hero-cta-shell input,
  .final-cta-shell input,
  .final-cta-shell textarea,
  .idea-shell input,
  .search-shell input{
    font-size:18px !important;
    padding:20px 20px !important;
  }
}


/* ============================================================
   PREMIUM PILL BUTTONS — VIDEOTTO INSPIRED
   ============================================================ */


/* ------------------------------------------------------------
   NAV BUTTONS
------------------------------------------------------------ */

.nav-actions{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}


/* SIGN IN — elegant ghost pill */

.nav-signin{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:auto!important;
  min-width:88px!important;
  height:46px!important;
  min-height:46px!important;

  padding:0 22px!important;
  margin:0!important;

  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:999px!important;

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

  color:#f3f3f7!important;

  font-size:13px!important;
  font-weight:750!important;
  line-height:1!important;

  text-decoration:none!important;

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

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease!important;
}

.nav-signin:hover{
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.20)!important;
  transform:translateY(-1px)!important;
}


/* START CREATING — premium gradient pill */

.nav-create{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:auto!important;
  min-width:142px!important;
  height:48px!important;
  min-height:48px!important;

  padding:0 25px!important;
  margin:0!important;

  border:1px solid rgba(178,153,255,.42)!important;
  border-radius:999px!important;

  background:
    linear-gradient(
      105deg,
      #a55cff 0%,
      #805cf5 48%,
      #678cff 100%
    )!important;

  color:#fff!important;

  font-size:13px!important;
  font-weight:800!important;
  line-height:1!important;

  box-shadow:
    0 8px 26px rgba(111,79,245,.30),
    inset 0 1px 0 rgba(255,255,255,.25)!important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease!important;
}

.nav-create:hover{
  transform:translateY(-1px)!important;
  filter:brightness(1.08)!important;

  box-shadow:
    0 11px 32px rgba(111,79,245,.38),
    inset 0 1px 0 rgba(255,255,255,.28)!important;
}


/* ------------------------------------------------------------
   HERO CREATE BUTTON
------------------------------------------------------------ */

.creator-footer .primary-cta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;

  width:auto!important;
  min-width:174px!important;

  height:50px!important;
  min-height:50px!important;

  padding:0 25px!important;
  margin:0!important;

  border:1px solid rgba(179,154,255,.43)!important;
  border-radius:999px!important;

  background:
    linear-gradient(
      105deg,
      #9c5cff 0%,
      #7b62f5 48%,
      #6590ff 100%
    )!important;

  color:#fff!important;

  font-size:12px!important;
  font-weight:850!important;
  line-height:1!important;

  box-shadow:
    0 9px 26px rgba(103,76,237,.30),
    inset 0 1px 0 rgba(255,255,255,.25)!important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease!important;
}

.creator-footer .primary-cta:hover{
  transform:translateY(-1px)!important;
  filter:brightness(1.08)!important;

  box-shadow:
    0 12px 32px rgba(103,76,237,.39),
    inset 0 1px 0 rgba(255,255,255,.28)!important;
}

.creator-footer .primary-cta span{
  display:inline-block!important;
  margin:0!important;
  font-size:15px!important;
  line-height:1!important;
  transform:translateY(-1px)!important;
}


/* ------------------------------------------------------------
   CREATOR BOX — MORE LIKE ONE PREMIUM CONTROL
------------------------------------------------------------ */

.creator-shell{
  border-radius:28px!important;

  background:
    linear-gradient(
      180deg,
      rgba(13,16,25,.98),
      rgba(8,11,19,.98)
    ) padding-box,
    linear-gradient(
      110deg,
      rgba(139,91,255,.85),
      rgba(91,117,255,.38),
      rgba(63,210,190,.48)
    ) border-box!important;

  box-shadow:
    0 28px 80px rgba(0,0,0,.38),
    0 0 55px rgba(104,72,224,.08)!important;
}


/* Footer bar should feel integrated, not separate */

.creator-footer{
  min-height:66px!important;
  padding:11px 0 0!important;
  align-items:center!important;
}


/* Example copy slightly quieter */

.creator-example{
  padding-left:2px!important;
  color:#757a87!important;
  font-size:11px!important;
}

.creator-example span{
  color:#c3c6cf!important;
}


/* ------------------------------------------------------------
   FINAL CTA SEARCH BAR
   Make it look like Videotto's integrated input/button
------------------------------------------------------------ */

.final-prompt{
  width:min(800px,100%)!important;
  height:66px!important;
  min-height:66px!important;

  padding:6px 7px 6px 23px!important;

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

  border:1px solid rgba(130,104,220,.42)!important;
  border-radius:999px!important;

  background:
    rgba(8,10,18,.96)!important;

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

#bottomIdea{
  height:52px!important;
  min-height:52px!important;

  padding:0!important;

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

  resize:none!important;
  overflow:hidden!important;

  border:0!important;
  outline:0!important;
  background:transparent!important;

  color:#f1f2f6!important;

  font-size:15px!important;
  line-height:52px!important;
}

#bottomIdea::placeholder{
  color:#686d78!important;
}

.final-prompt button{
  flex-shrink:0!important;

  height:52px!important;
  min-height:52px!important;

  padding:0 27px!important;

  border:1px solid rgba(183,158,255,.42)!important;
  border-radius:999px!important;

  background:
    linear-gradient(
      105deg,
      #9f5cff,
      #7d62f5 48%,
      #668eff
    )!important;

  color:#fff!important;

  font-size:13px!important;
  font-weight:850!important;
  line-height:1!important;

  box-shadow:
    0 8px 24px rgba(105,75,239,.30),
    inset 0 1px 0 rgba(255,255,255,.25)!important;
}


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

@media(max-width:620px){

  .nav-create{
    min-width:126px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 19px!important;
  }

  .creator-footer .primary-cta{
    width:100%!important;
  }

  .final-prompt{
    height:auto!important;
    min-height:0!important;

    padding:8px!important;
    border-radius:25px!important;

    flex-direction:column!important;
  }

  #bottomIdea{
    width:100%!important;
    padding:0 14px!important;
  }

  .final-prompt button{
    width:100%!important;
  }

}


/* ============================================================
   HERO TYPING PLACEHOLDER STYLE
   ============================================================ */

#heroIdea::placeholder{
  color: rgba(255,255,255,.30) !important;
  opacity: 1 !important;
  transition: opacity .2s ease !important;
}

#heroIdea{
  caret-color: #8f7cff !important;
}


/* ============================================================
   SCENE 07 — REAL CINEMATIC IMAGE
   ============================================================ */

.director-image{
  height:245px!important;
  margin:13px 0 20px!important;

  border-radius:14px!important;
  overflow:hidden!important;

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

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0) 65%,
      rgba(0,0,0,.18) 100%
    ),
    url("/assets/b161c0c0-d4c1-443d-8b47-1cd86f835180.png") center center / cover no-repeat!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 30px rgba(0,0,0,.25)!important;
}


/* ============================================================
   WHAT WILL YOU MAKE WITH IT? — REAL CARD IMAGES
   ============================================================ */

.usecase-art{
  width:100%!important;
  height:220px!important;
  margin:0 0 23px!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  border-radius:18px 18px 0 0!important;
}


/* 1 — YOUTUBE DOCUMENTARIES */

.usecase-a .usecase-art{
  background-image:
    url("/assets/228b0613-7af1-4cf9-8e6e-b4abb75791b4.png")!important;
}


/* 2 — FACELESS YOUTUBE CHANNELS */

.usecase-b .usecase-art{
  background-image:
    url("/assets/17c58464-59ef-4397-9d80-a7c612aee960.png")!important;
}


/* 3 — ANIMATED STORIES */

.usecase-c .usecase-art{
  background-image:
    url("/assets/9c083ee1-810d-4b48-a478-53fe9c0c0a42.png")!important;
}


/* 4 — EXPLAINER VIDEOS */

.usecase-d .usecase-art{
  background-image:
    url("/assets/f3ceeb3c-ba9e-4051-a0fe-67e8fceab20c.png")!important;
}


/* 5 — SHORT-FORM CONTENT / THREE PHONES */

.usecase-e .usecase-art{
  background-image:
    url("/assets/be5af3f8-dba2-4dd4-89b8-f8abb7a34154.png")!important;
}


/* 6 — AI STORYTELLING */

.usecase-f .usecase-art{
  background-image:
    url("/assets/147df7d0-660a-459e-86aa-3234704a340b.png")!important;
}


/* subtle cinematic treatment */

.usecase-art{
  position:relative!important;
  overflow:hidden!important;
}

.usecase-art::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;

  background:
    linear-gradient(
      to bottom,
      rgba(4,6,12,0) 55%,
      rgba(4,6,12,.20) 100%
    )!important;
}


/* image cards get a slightly more premium hover */

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

.usecase:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(131,101,242,.30)!important;

  box-shadow:
    0 22px 55px rgba(0,0,0,.30),
    0 0 35px rgba(112,77,230,.07)!important;
}


@media(max-width:620px){

  .usecase-art{
    height:230px!important;
  }

}


/* ============================================================
   USE CASE IMAGES — SHOW COMPLETE IMAGE, NO CROPPING
   ============================================================ */

.usecase-art{
  width:100%!important;
  height:auto!important;
  aspect-ratio:3 / 2!important;

  background-size:contain!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;

  background-color:#090b11!important;

  border-radius:18px 18px 0 0!important;
}


/* Remove dark overlay so the complete artwork stays visible */

.usecase-art::after{
  display:none!important;
}


/* Slight separation between artwork and text area */

.usecase{
  overflow:hidden!important;
}



/* ============================================================
   USE-CASE CARDS — REAL IMAGES, FULL CANVAS
   ============================================================ */

.usecase-art{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:auto!important;

  margin:0!important;
  padding:0!important;

  display:block!important;

  overflow:hidden!important;

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

  background:none!important;
  background-image:none!important;
}


/* Kill all previous background-image assignments */

.usecase-a .usecase-art,
.usecase-b .usecase-art,
.usecase-c .usecase-art,
.usecase-d .usecase-art,
.usecase-e .usecase-art,
.usecase-f .usecase-art{
  background:none!important;
  background-image:none!important;
}


/* Actual uploaded image */

.usecase-art img{
  display:block!important;

  width:100%!important;
  height:auto!important;

  max-width:100%!important;

  object-fit:contain!important;
  object-position:center!important;

  margin:0!important;
  padding:0!important;

  border:0!important;
}


/* no overlay */

.usecase-art::before,
.usecase-art::after{
  display:none!important;
  content:none!important;
}


/* Text area spacing */

.usecase small{
  display:block!important;
  margin-top:28px!important;
}

.usecase{
  height:auto!important;
}


/* ============================================================
   REAL EXAMPLE VIDEO CARDS V1
============================================================ */

.example-card .example-video-wrap{
  position:relative!important;
  width:100%!important;
  aspect-ratio:16 / 9!important;
  overflow:hidden!important;
  background:#0b0d13!important;
}

.example-card .example-video{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  background:#0b0d13!important;
}

.example-card .example-play{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  z-index:4!important;

  width:54px!important;
  height:54px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  padding:0!important;
  border:1px solid rgba(255,255,255,.25)!important;
  border-radius:50%!important;

  background:rgba(8,10,16,.72)!important;
  backdrop-filter:blur(8px)!important;

  color:#fff!important;
  font-size:18px!important;
  line-height:1!important;
  cursor:pointer!important;

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

.example-card .example-play:hover{
  transform:translate(-50%,-50%) scale(1.07)!important;
  background:rgba(15,17,25,.9)!important;
}

.example-card .example-play.playing{
  opacity:0!important;
}

.example-card .example-video-wrap:hover .example-play.playing{
  opacity:1!important;
}



/* ============================================================
   SHOWCASE_AUTOPLAY_VISUALS_V1
============================================================ */

/* Autoplay previews do not need a central play button. */
.example-card .example-play{
  display:none!important;
}

.example-card .example-video{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Small visual polish while the film is playing. */
.example-card .example-video-wrap{
  overflow:hidden!important;
  background:#090b12!important;
}



/* ============================================================
   REAL IMAGI777 DEMO VIDEO V1
============================================================ */

.demo-player-real{
  overflow:hidden!important;
}

.demo-video-screen{
  position:relative!important;
  width:100%!important;
  aspect-ratio:16 / 9!important;
  min-height:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#070a10!important;
  display:block!important;
}

.imagi-demo-video{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  background:#070a10!important;
}

.demo-player-real .demo-toolbar{
  position:relative!important;
  z-index:2!important;
}

.demo-caption{
  margin-top:16px!important;
}

/* ============================================================
   LANGUAGE_ORBIT_SPIN_V1
   Make the language pills orbit around the Imagi777 logo.
============================================================ */

.language-section{
  overflow:hidden!important;
}

.language-orbit{
  position:relative!important;
  width:min(920px,100%)!important;
  max-width:920px!important;
  height:560px!important;
  margin:46px auto 0!important;
  overflow:visible!important;
}

.language-center{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  z-index:3!important;
}

.language-center img{
  width:140px!important;
  max-width:140px!important;
}

.language-orbit .lang{
  --angle:0deg;
  --radius:310px;

  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;

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

  min-width:104px!important;
  height:44px!important;
  padding:0 16px!important;

  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:14px!important;
  background:rgba(12,16,28,.82)!important;
  color:#d7dbe8!important;

  font-size:14px!important;
  font-weight:600!important;
  line-height:1!important;
  white-space:nowrap!important;

  box-shadow:0 10px 30px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;

  transform:
    translate(-50%,-50%)
    rotate(var(--angle))
    translateX(var(--radius))
    rotate(calc(var(--angle) * -1))!important;

  animation:imagiOrbitSpin 26s linear infinite!important;
  z-index:2!important;
}

.language-orbit .lang-1{ --angle:-135deg; } /* English */
.language-orbit .lang-2{ --angle:-90deg; }  /* Русский */
.language-orbit .lang-3{ --angle:-45deg; }  /* Español */
.language-orbit .lang-4{ --angle:0deg; }    /* Français */
.language-orbit .lang-5{ --angle:45deg; }   /* Italiano */
.language-orbit .lang-6{ --angle:90deg; }   /* עברית */
.language-orbit .lang-7{ --angle:135deg; }  /* Deutsch */
.language-orbit .lang-8{ --angle:180deg; }  /* Português */

@keyframes imagiOrbitSpin{
  from{
    transform:
      translate(-50%,-50%)
      rotate(var(--angle))
      translateX(var(--radius))
      rotate(calc(var(--angle) * -1));
  }
  to{
    transform:
      translate(-50%,-50%)
      rotate(calc(var(--angle) + 360deg))
      translateX(var(--radius))
      rotate(calc((var(--angle) + 360deg) * -1));
  }
}

@media (max-width: 1100px){
  .language-orbit{
    height:520px!important;
  }

  .language-orbit .lang{
    --radius:270px;
  }
}

@media (max-width: 820px){
  .language-orbit{
    height:450px!important;
  }

  .language-orbit .lang{
    --radius:220px;
    min-width:96px!important;
    height:40px!important;
    padding:0 14px!important;
    font-size:13px!important;
  }

  .language-center img{
    width:125px!important;
    max-width:125px!important;
  }
}

@media (max-width: 620px){
  .language-orbit{
    height:380px!important;
  }

  .language-orbit .lang{
    --radius:160px;
    min-width:84px!important;
    height:36px!important;
    padding:0 12px!important;
    font-size:12px!important;
    border-radius:12px!important;
  }

  .language-center img{
    width:108px!important;
    max-width:108px!important;
  }
}

@media (prefers-reduced-motion: reduce){
  .language-orbit .lang{
    animation:none!important;
  }
}
/* END_LANGUAGE_ORBIT_SPIN_V1 */

/* ============================================================
   LANGUAGE_ORBIT_LIVE_V3
   Make the language pills move continuously around Imagi777.
============================================================ */

.language-section{
  overflow:hidden!important;
}

.language-orbit{
  --orbit-scale:1;
  position:relative!important;
  width:min(980px,100%)!important;
  max-width:980px!important;
  height:620px!important;
  margin:50px auto 0!important;
  overflow:visible!important;
}

.language-center{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  z-index:10!important;
}

.language-center img{
  width:150px!important;
  max-width:150px!important;
}

.language-orbit .lang{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  margin:0!important;
  right:auto!important;
  bottom:auto!important;

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

  min-width:108px!important;
  height:44px!important;
  padding:0 16px!important;

  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:14px!important;
  background:rgba(10,14,24,.82)!important;
  color:#d7dcea!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1!important;
  white-space:nowrap!important;

  box-shadow:0 12px 30px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;

  will-change:transform!important;
  z-index:5!important;
}

/* Clockwise orbit */
@keyframes imagiOrbitCW{
  from{
    transform:
      translate(-50%,-50%)
      rotate(var(--start-angle))
      translateX(calc(var(--radius) * var(--orbit-scale)))
      rotate(calc(var(--start-angle) * -1));
  }
  to{
    transform:
      translate(-50%,-50%)
      rotate(calc(var(--start-angle) + 360deg))
      translateX(calc(var(--radius) * var(--orbit-scale)))
      rotate(calc((var(--start-angle) + 360deg) * -1));
  }
}

/* Counter-clockwise orbit */
@keyframes imagiOrbitCCW{
  from{
    transform:
      translate(-50%,-50%)
      rotate(var(--start-angle))
      translateX(calc(var(--radius) * var(--orbit-scale)))
      rotate(calc(var(--start-angle) * -1));
  }
  to{
    transform:
      translate(-50%,-50%)
      rotate(calc(var(--start-angle) - 360deg))
      translateX(calc(var(--radius) * var(--orbit-scale)))
      rotate(calc((var(--start-angle) - 360deg) * -1));
  }
}

/* Different speeds, radii, directions so it feels alive */
.language-orbit .lang-1{
  --start-angle:-140deg;
  --radius:305px;
  animation:imagiOrbitCW 20s linear infinite!important;
}

.language-orbit .lang-2{
  --start-angle:-92deg;
  --radius:340px;
  animation:imagiOrbitCCW 24s linear infinite!important;
}

.language-orbit .lang-3{
  --start-angle:-28deg;
  --radius:285px;
  animation:imagiOrbitCW 18s linear infinite!important;
}

.language-orbit .lang-4{
  --start-angle:18deg;
  --radius:330px;
  animation:imagiOrbitCCW 23s linear infinite!important;
}

.language-orbit .lang-5{
  --start-angle:72deg;
  --radius:295px;
  animation:imagiOrbitCW 19s linear infinite!important;
}

.language-orbit .lang-6{
  --start-angle:126deg;
  --radius:345px;
  animation:imagiOrbitCCW 25s linear infinite!important;
}

.language-orbit .lang-7{
  --start-angle:188deg;
  --radius:290px;
  animation:imagiOrbitCW 21s linear infinite!important;
}

.language-orbit .lang-8{
  --start-angle:232deg;
  --radius:325px;
  animation:imagiOrbitCCW 22s linear infinite!important;
}

@media (max-width:1100px){
  .language-orbit{
    --orbit-scale:.88;
    height:570px!important;
  }
}

@media (max-width:820px){
  .language-orbit{
    --orbit-scale:.72;
    height:470px!important;
  }

  .language-orbit .lang{
    min-width:94px!important;
    height:40px!important;
    padding:0 14px!important;
    font-size:13px!important;
  }

  .language-center img{
    width:130px!important;
    max-width:130px!important;
  }
}

@media (max-width:620px){
  .language-orbit{
    --orbit-scale:.55;
    height:390px!important;
  }

  .language-orbit .lang{
    min-width:82px!important;
    height:36px!important;
    padding:0 12px!important;
    font-size:12px!important;
    border-radius:12px!important;
  }

  .language-center img{
    width:110px!important;
    max-width:110px!important;
  }
}

@media (prefers-reduced-motion: reduce){
  .language-orbit .lang{
    animation:none!important;
  }
}
/* END_LANGUAGE_ORBIT_LIVE_V3 */


/* ============================================================
   LANGUAGE_ORBIT_JAVASCRIPT_OVERRIDE_V1
============================================================ */

.language-orbit{
  position:relative!important;
  width:min(980px,100%)!important;
  height:620px!important;
  margin:45px auto 0!important;
  overflow:visible!important;
}

.language-center{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  z-index:10!important;
}

.language-orbit .lang{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  margin:0!important;

  animation:none!important;
  transition:none!important;

  will-change:transform!important;

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

  min-width:105px!important;
  height:44px!important;
  padding:0 16px!important;

  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:14px!important;
  background:rgba(12,16,28,.84)!important;

  color:#e2e5ee!important;
  font-size:14px!important;
  font-weight:600!important;

  box-shadow:
    0 12px 32px rgba(0,0,0,.28),
    0 0 20px rgba(107,92,255,.05)!important;

  z-index:5!important;
}

@media(max-width:820px){
  .language-orbit{
    height:500px!important;
  }
}

@media(max-width:620px){
  .language-orbit{
    height:390px!important;
  }

  .language-orbit .lang{
    min-width:82px!important;
    height:36px!important;
    padding:0 11px!important;
    font-size:12px!important;
  }
}



/* ============================================================
   FAQ ACCORDION V1
============================================================ */

.faq-answer{
  max-height:0;
  overflow:hidden;
  opacity:0;

  padding:0 24px;

  transition:
    max-height .38s ease,
    opacity .25s ease,
    padding .32s ease;
}

.faq-answer p{
  margin:0;
  padding:0;

  max-width:900px;

  color:#969aa8;
  font-size:15px;
  line-height:1.75;
}

.faq-item.open .faq-answer,
.faq-card.open .faq-answer{
  max-height:240px;
  opacity:1;
  padding:0 24px 24px;
}

.faq-item,
.faq-card{
  cursor:pointer;
}

.faq-item button,
.faq-card button{
  cursor:pointer;
}

.faq-item.open button,
.faq-card.open button{
  color:#ffffff;
}



/* ============================================================
   FAQ_ACCORDION_CLEAN_V2
============================================================ */

.faq-item .faq-answer{
  max-height:0!important;
  overflow:hidden!important;
  opacity:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  transition:
    max-height .38s ease,
    opacity .25s ease,
    padding .32s ease!important;
}

.faq-item.open .faq-answer{
  max-height:260px!important;
  opacity:1!important;
  padding-top:4px!important;
  padding-bottom:24px!important;
}

.faq-question{
  width:100%!important;
  cursor:pointer!important;
}

.faq-question i{
  flex:0 0 auto!important;
  transition:transform .25s ease!important;
}

.faq-item.open .faq-question i{
  transform:rotate(180deg)!important;
}


.scenesproject-window{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  overflow:hidden!important;
}

.scenesproject-image{
  width:100%!important;
  max-width:1100px!important;
  height:auto!important;
  display:block!important;
  border-radius:24px!important;
  box-shadow:0 30px 80px rgba(0,0,0,.35)!important;
}



/* ============================================================
   HEADER_LOGO_SCALE_V1
============================================================ */

.header-logo img,
.nav-logo img,
.logo img,
.site-logo img {
    width:130px!important;
    height:auto!important;
    transform:scale(1.15)!important;
    transform-origin:left center!important;
}



/* ============================================================
   HEADER LOGO SIZE BOOST
============================================================ */

.site-header .brand img {
  width: 150px !important;
  height: auto !important;
  max-width: none !important;
}

@media(max-width:820px){
  .site-header .brand img {
    width: 120px !important;
  }
}



/* ============================================================
   FINAL HEADER LOGO OVERRIDE
============================================================ */

.site-header .brand {
  width:180px!important;
  max-width:none!important;
  flex-shrink:0!important;
  display:flex!important;
  align-items:center!important;
}


.site-header .brand img {
  width:180px!important;
  max-width:none!important;
  height:auto!important;
  transform:none!important;
}


@media(max-width:820px){

  .site-header .brand {
    width:140px!important;
  }

  .site-header .brand img {
    width:140px!important;
  }

}



/* ============================================================
   OVERRIDE HEADER BRAND SIZE FINAL
============================================================ */

.site-header .brand {
    display:flex!important;
    align-items:center!important;
    width:auto!important;
    height:auto!important;
    overflow:visible!important;
    transform:none!important;
}


.site-header .brand img {
    display:block!important;
    width:220px!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    transform:none!important;
}


@media(max-width:820px){

.site-header .brand img {
    width:160px!important;
}

}




/* ============================================================
   HEADER LOGO POSITION FIX
============================================================ */

.site-header {
    overflow:visible!important;
    align-items:center!important;
}


.site-header .brand {
    overflow:visible!important;
    position:relative!important;
    top:18px!important;
}


.site-header .brand img {
    width:170px!important;
    height:auto!important;
    transform:none!important;
}


@media(max-width:820px){

.site-header .brand {
    top:10px!important;
}

.site-header .brand img {
    width:130px!important;
}

}


/* ============================================================
   FOOTER TEXT SIZE BOOST
============================================================ */

.footer,
.footer a,
.footer span,
.footer p {
  font-size: 16px !important;
}

.footer h3,
.footer-title,
.footer-heading {
  font-size: 18px !important;
}

.footer-brand p {
  font-size: 16px !important;
}

.footer-bottom {
  font-size: 15px !important;
}

@media(max-width:820px){
  .footer,
  .footer a,
  .footer span,
  .footer p {
    font-size: 15px !important;
  }
}


/* ============================================================
   MOBILE HERO ABOVE-FOLD FIX
   ============================================================ */

@media(max-width:620px){

  .hero{
    margin-top:0!important;
    padding-top:72px!important;
    padding-bottom:10px!important;
    min-height:0!important;
  }

  .hero-kicker{
    margin-bottom:18px!important;
    padding:7px 16px!important;
  }

  .hero h1.hero-title{
    margin-top:0!important;
    margin-bottom:20px!important;
    font-size:28px!important;
    line-height:.93!important;
    letter-spacing:-1.8px!important;
  }

  .hero h1 .hero-title-line{
    margin:0!important;
    font-size:33px!important;
    line-height:.93!important;
  }

  .hero-subtitle{
    margin-top:16px!important;
    font-size:18px!important;
    line-height:1.35!important;
  }

  .hero-support{
    margin-top:10px!important;
    margin-bottom:18px!important;
    font-size:14px!important;
    line-height:1.35!important;
  }

  .creator-shell{
    margin-top:0!important;
    padding:12px 14px 12px!important;
    min-height:0!important;
  }

  .creator-heading{
    min-height:34px!important;
    padding-bottom:6px!important;
  }

  #heroIdea{
    min-height:78px!important;
    padding:14px 4px 6px!important;
    font-size:17px!important;
    line-height:1.35!important;
  }

  .creator-footer{
    min-height:44px!important;
    padding-top:8px!important;
  }

  .hero-trust{
    margin-top:8px!important;
  }

}


/* MOBILE CREATE-MORE HEADLINE SIZE FIX */
@media (max-width: 768px){

  .create-more-section h2,
  .create-more-card h2,
  .create-more h2{
    font-size:32px !important;
    line-height:1.12 !important;
  }

}

/* EXACT_MOBILE_IDEA_HEADLINE_30PX_START */
@media (max-width: 768px) {
  .idea-section .idea-inner > h2 {
    font-size: 30px !important;
    line-height: 1.08 !important;
  }
}
/* EXACT_MOBILE_IDEA_HEADLINE_30PX_END */




/* MOBILE_PRODUCT_SHOWCASE_SPACING_V1 */
@media(max-width:768px){
  .product-showcase{
    padding-top:28px !important;
    padding-bottom:34px !important;
    margin-top:24px !important;
    margin-bottom:32px !important;
  }
}



/* MOBILE_SHOWCASE_TIGHT_SPACING_V2 */
@media (max-width:768px){

  /* Remove wasted vertical space around the studio screenshot only */
  .product-showcase{
    width:calc(100% - 28px) !important;
    margin:18px auto 22px !important;
    padding:0 !important;
  }

  .product-showcase + .idea-section{
    padding-top:32px !important;
  }

  .hero-section:has(+ .product-showcase),
  .hero:has(+ .product-showcase){
    padding-bottom:24px !important;
  }

  .scenesproject-window{
    margin:0 !important;
  }

  .scenesproject-image{
    display:block !important;
    width:100% !important;
    height:auto !important;
    margin:0 !important;
  }
}


/* MOBILE_LANGUAGE_SPACING_FIX_V1 */
@media (max-width: 850px){
  .language-section{
    padding-top:48px !important;
    padding-bottom:42px !important;
  }

  .language-orbit{
    height:390px !important;
    margin-top:24px !important;
  }
}