body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none;background:#080909!important}
nav .logo{font-family:Inter,sans-serif;font-weight:600;font-size:19px;letter-spacing:-.035em}.secTop h2,.plan-card-price{font-family:Inter,sans-serif;font-weight:600}
.secTop.worksTitle h2,.vidCard h2,.socH2{font-family:Inter,sans-serif;font-weight:600;letter-spacing:-.04em;font-size:clamp(30px,3.4vw,42px)}
.plan-card-desc,.vidCard p,.socSub{line-height:1.7;letter-spacing:-.01em}
header{height:100svh;min-height:760px;max-height:1100px;padding:140px 0 140px;justify-content:flex-start;text-align:left;background:transparent!important;position:relative;z-index:2}
header .container{width:100%;max-width:1360px;padding:0 70px;display:flex;align-items:center;justify-content:space-between;gap:40px;position:relative}
header .hero-main{flex:1 1 500px;max-width:560px;min-width:0;z-index:2}
header .hero-stage{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3;user-select:none}
header .h1{font:400 clamp(46px,5.7vw,76px)/1.1 Inter,sans-serif;letter-spacing:-.04em;text-shadow:none;color:#f5f3ee;white-space:normal;background:none;will-change:auto}
header .h1 span{font-size:inherit;letter-spacing:inherit;font-weight:inherit;color:inherit;margin-left:0}
header .h1:hover{transform:none}
header .desc{max-width:460px;margin:30px 0 0;color:#b9bbb6;font:600 16px/1.75 Inter,sans-serif;letter-spacing:-.018em}
header .cta{justify-content:flex-start;gap:16px;margin-top:38px}
header .cta .btnW{
  position:relative;
  display:inline-flex;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  height:50px;
  min-width:176px;
  padding:0 24px;
  border:1px solid rgba(255,255,255,0.06)!important;
  border-radius:10px!important;
  background:#0c0d0f!important;
  backdrop-filter:none!important;
  filter:none!important;
  color:#f4f4f5!important;
  box-shadow:0 2px 6px rgba(0,0,0,0.38)!important;
  font:500 15px/1 Inter,sans-serif;
  text-decoration:none!important;
  text-transform:none;
  letter-spacing:-.012em;
  transform:scale(1)!important;
  transition:transform .24s cubic-bezier(0.16,1,0.3,1)!important;
  will-change:transform;
  overflow:hidden;
  cursor:pointer;
}
header .cta .btnW:hover{
  background:#0c0d0f!important;
  border-color:rgba(255,255,255,0.06)!important;
  color:#f4f4f5!important;
  box-shadow:0 2px 6px rgba(0,0,0,0.38)!important;
  transform:scale(1.035)!important;
}
header .cta .btnW:active{
  background:#0c0d0f!important;
  border-color:rgba(255,255,255,0.06)!important;
  color:#f4f4f5!important;
  box-shadow:0 2px 6px rgba(0,0,0,0.38)!important;
  transform:scale(0.98)!important;
}
header .cta .btnW::before,header .cta .btnW::after,
header .cta .btnW .sheen-shade,
header .cta .btnW .sheen-light,
header .cta .btnW .sheen-rim{display:none!important}
header .cta .btnW .sheen-label{
  position:relative;z-index:2;
  display:inline-flex;height:100%;width:100%;
  align-items:center;justify-content:center;
  gap:9px;padding:0;
  color:#f4f4f5!important;text-shadow:none!important;
  white-space:nowrap;
}
header .cta .btnW:hover .sheen-label{color:#f4f4f5!important}

header .cta .btnW:focus-visible{outline:2px solid #fff;outline-offset:4px}
.heroArt{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:0!important;pointer-events:none!important;background:#080909!important;overflow:hidden!important}
.heroGrad{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;image-rendering:auto}
.heroArt::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#080909 0%,rgba(8,9,9,.88) 24%,rgba(8,9,9,.12) 55%,transparent 75%);pointer-events:none}
.hero-fade-mask{display:none!important}
.wrap{position:relative;z-index:2}
.hero-flow-fallback{position:fixed;inset:0;background:radial-gradient(ellipse at 80% 60%,#8b2be240,transparent 40%),linear-gradient(120deg,transparent 55%,#dfc18422 65%,transparent 78%);pointer-events:none;z-index:0}
@media(min-width:1500px){header .container{max-width:1500px}}

header .cta .hero-btn-icon{width:19px;height:19px;object-fit:contain;flex-shrink:0;filter:none;opacity:0.95}

/* ---------- 3D Skin Character & Info Box ---------- */
.hero-glass-cloud{
  position:relative;
  margin-bottom:0 !important;
  z-index:10;
  max-width:320px;
  padding:15px 22px;
  border:1px solid rgba(255,255,255,0.06)!important;
  outline:none!important;
  border-radius:12px!important;
  background:#0c0d0f!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  box-shadow:0 4px 14px rgba(0,0,0,0.5)!important;
  pointer-events:none;
}
.glass-cloud-text{
  margin:0;
  color:#f4f4f5;
  font:600 14px/1.55 Inter,sans-serif;
  letter-spacing:-.018em;
  text-align:center;
  text-shadow:none!important;
  position:relative;
  z-index:2;
}
.glass-cloud-brand{
  color:#ff7a00!important;
  font-weight:700!important;
  letter-spacing:-.01em;
  text-shadow:none!important;
}
.hero-canvas-wrap{
  position:relative;
  width:340px;
  height:430px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none!important;
  user-select:none;
}
.hero-skin-canvas{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  cursor:default!important;
  pointer-events:none!important;
  touch-action:none;
  filter:drop-shadow(0 -2px 5px rgba(220,225,235,0.75))
         drop-shadow(0 -5px 14px rgba(115,120,130,0.65))
         drop-shadow(0 -10px 28px rgba(20,22,26,0.92))
         drop-shadow(0 -18px 46px rgba(0,0,0,0.85));
  animation:darkFlameAura 3s ease-in-out infinite alternate;
}
@keyframes darkFlameAura{
  0%{
    filter:drop-shadow(0 -2px 4px rgba(220,225,235,0.65))
           drop-shadow(0 -4px 12px rgba(115,120,130,0.55))
           drop-shadow(0 -8px 24px rgba(20,22,26,0.88))
           drop-shadow(0 -15px 40px rgba(0,0,0,0.8));
  }
  100%{
    filter:drop-shadow(0 -3px 7px rgba(220,225,235,0.85))
           drop-shadow(0 -6px 18px rgba(115,120,130,0.75))
           drop-shadow(0 -12px 34px rgba(20,22,26,0.98))
           drop-shadow(0 -22px 54px rgba(0,0,0,0.9));
  }
}

@media(max-width:1100px){
  header .container{gap:24px}
  .hero-canvas-wrap{width:300px;height:390px}
  .hero-pink-wrap{width:175px}
  .hero-pink-img{max-width:175px}
  .hero-ear-arrow{width:48px;height:56px;top:-18px;right:5px}
  
  
  
  .hero-pink-wrap{
  position:relative;
  width:165px;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  z-index:4;
  margin-top:0;
}
  .hero-pink-img{
  width:100%;
  height:auto;
  max-width:165px;
  object-fit:contain;
  display:block;
  user-select:none;
  pointer-events:none;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,0.7)) drop-shadow(0 0 18px rgba(255,122,0,0.14));
}
  
  
  .hero-glass-cloud{max-width:280px;margin-left:0;padding:12px 18px}
  .glass-cloud-text{font-size:12.5px}
}
@media(max-width:880px){
  header{height:auto!important;min-height:100svh;max-height:none;padding:130px 0 70px!important}
  header .container{flex-direction:column;align-items:flex-start;gap:36px}
  header .hero-main{max-width:100%;width:100%}
  header .hero-stage{align-self:center;margin-top:10px}
}
@media(max-width:760px){
  header{height:auto!important;min-height:100svh;max-height:none;align-items:flex-start;padding:130px 0 60px!important}
  header .container{padding:0 26px;flex-direction:column;align-items:flex-start;gap:32px}
  header .h1{font-size:clamp(38px,10.5vw,62px)}
  header .desc{max-width:340px;font-size:15px;line-height:1.75;margin-top:25px}
  header .cta{gap:12px;margin-top:32px;max-width:calc(100% - 32px)}
  header .cta .btnW{width:auto;flex:1;min-width:0;height:48px;padding:0 16px;font-size:14px}
  header .cta .sheen-label{gap:7px;padding:0}
  header .cta .hero-btn-icon{width:17px;height:17px}
  .heroArt::after{background:linear-gradient(180deg,#080909 0%,#080909ee 32%,#08090933 65%,transparent)}
  .hero-canvas-wrap{width:290px;height:370px}
  .hero-pink-wrap{width:155px}
  .hero-pink-img{max-width:155px}
  .hero-ear-arrow{width:42px;height:50px;top:-16px;right:4px}
  
  
  
  
  
  
  
  .hero-glass-cloud{max-width:270px;padding:12px 16px}
}
@media(max-width:360px){
  header .cta .btnW{font-size:13px;padding:0 10px}
  header .cta .sheen-label{gap:5px}
}

/* Disable all H1 hover, glow, backlight and animations */
header .h1, .h1, header .h1:hover, .h1:hover, header .h1 span, .h1 span{
  transform:none !important;
  transition:none !important;
  animation:none !important;
  text-shadow:none !important;
  filter:none !important;
  background:none !important;
  color:#f5f3ee !important;
  -webkit-text-fill-color:#f5f3ee !important;
  cursor:default !important;
  will-change:auto !important;
}


/* ---------- Hero Pink Character & High-Visibility Ear Arrow ---------- */
.hero-character-box{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:24px;
}
.hero-ear-arrow{
  position:absolute;
  top:-20px;
  right:6px;
  width:54px;
  height:62px;
  z-index:15;
  pointer-events:none;
}
.hero-pink-wrap{
  position:relative;
  width:195px;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  z-index:4;
}
.hero-pink-img{
  width:100%;
  height:auto;
  max-width:195px;
  object-fit:contain;
  display:block;
  user-select:none;
  pointer-events:none;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,0.75)) drop-shadow(0 0 20px rgba(255,122,0,0.15));
}
