/* path: zultalk/css/redesign.css */
/* Redesign is opt-in: enabled only when html[data-design="redesign"] */

html[data-design="redesign"]{
  --bg: #060814;
  --bg2: #0b1020;
  --ink: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.86);

  --card: rgba(255,255,255,.08);
  --card2: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.14);

  --shadow: 0 28px 90px rgba(0,0,0,.55);
  --shadow2: 0 16px 44px rgba(0,0,0,.32);

  --r: 18px;
  --r2: 32px;

  --accent: #ff7a18;
  --accent2: #ffb648;
  --accent3: #7c5cff;

  color-scheme: dark;
}

html[data-design="redesign"] body{
  color: var(--ink);
  background:
    radial-gradient(1100px 740px at 16% -10%, rgba(255,122,24,.20), transparent 56%),
    radial-gradient(980px 680px at 92% 8%, rgba(124,92,255,.22), transparent 58%),
    radial-gradient(980px 700px at 52% 118%, rgba(255,182,72,.14), transparent 62%),
    linear-gradient(180deg, #050713, var(--bg));
}

/* Film grain (subtle) */
html[data-design="redesign"] body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  transform: translateZ(0);
}

html[data-design="redesign"] .section{ padding: 72px 0; }
html[data-design="redesign"] .h2{
  font-weight: 900;
  letter-spacing: -0.03em;
  text-shadow: 0 14px 60px rgba(0,0,0,.35);
}

/* Cards */
html[data-design="redesign"] .brand__card,
html[data-design="redesign"] .info__card,
html[data-design="redesign"] .tcar__shell{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}

html[data-design="redesign"] .info__item{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

html[data-design="redesign"] .muted{ color: var(--muted); }

/* Buttons */
html[data-design="redesign"] .btn{
  background: rgba(12,14,22,.58);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
}

html[data-design="redesign"] .btn__sub{ color: rgba(255,255,255,.86); }
html[data-design="redesign"] .btn__icon{
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.90);
  background: linear-gradient(135deg, rgba(255,122,24,.38), rgba(124,92,255,.20));
}

html[data-design="redesign"] .btn--glow::after{
  background: rgba(12,14,22,.58);
}
html[data-design="redesign"] .btn--glow::before{
  filter: blur(14px) saturate(1.55);
  opacity: .92;
}

@media (hover:hover) and (pointer:fine){
  html[data-design="redesign"] .btn:hover{
    transform: translateY(-2px) scale(1.035);
    box-shadow: var(--shadow);
  }
}

/* Brand logo glow re-tuned for dark */
html[data-design="redesign"] .brand__logoLink::after{
  background: rgba(12,14,22,.68);
  border: 1px solid rgba(255,255,255,.12);
}
html[data-design="redesign"] .brand__logoLink::before{ opacity: .72; }

/* Hero: keep “phone-like” vertical preview on desktop (like original) */
html[data-design="redesign"] .hero{
  padding: 44px 0 28px;
}

html[data-design="redesign"] .hero__tapes{ opacity: .55; }

html[data-design="redesign"] .hero__videoWrap{
  position: relative;
  width: min(750px, 100%);
  margin-inline: auto;

  border-radius: 44px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  overflow: hidden;
  isolation: isolate;
}

html[data-design="redesign"] .hero__videoWrap::before{
  content:"";
  position: absolute;
  inset: -2px;
  border-radius: 48px;
  background: conic-gradient(from 20deg,
    rgba(255,122,24,.55),
    rgba(124,92,255,.50),
    rgba(255,182,72,.55),
    rgba(255,122,24,.55));
  filter: blur(18px);
  opacity: .55;
  z-index: -1;
}

html[data-design="redesign"] .hero__video{
  display: block;
  width: min(700px, 100%);
  height: auto;
  margin-inline: auto;

  border-radius: 42px;
  background: #000;
  object-fit: contain;
  box-shadow: 0 30px 110px rgba(0,0,0,.62);
}

html[data-design="redesign"] .hero__hint{
  color: rgba(255,255,255,.78);
}
@media (max-width: 720px){
  html[data-design="redesign"] .section{ padding: 60px 0; }
  html[data-design="redesign"] .hero{ padding: 28px 0 18px; }
  html[data-design="redesign"] .hero__video{ border-radius: 26px; }
  html[data-design="redesign"] .hero__videoWrap{ padding: 12px; border-radius: 34px; }
}

/* Tapes */
html[data-design="redesign"] .tape{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: 0 18px 70px rgba(0,0,0,.38);
  opacity: .62;
}

html[data-design="redesign"] .tape__word{
  color: rgba(255,255,255,.62);
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
}
html[data-design="redesign"] .tape__word strong{ color: rgba(255,182,72,.86); }

/* Footer */
html[data-design="redesign"] .footer__container{
  border-top: 1px solid rgba(255,255,255,.12);
}
html[data-design="redesign"] .footer__link{
  color: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(255,255,255,.20);
}
html[data-design="redesign"] .footer__link:hover{
  color: rgba(255,255,255,.92);
  border-bottom-color: rgba(255,182,72,.48);
}

/* Reduce glare on huge screens */
@media (min-width: 1200px){
  html[data-design="redesign"] body{
    background:
      radial-gradient(1200px 820px at 16% -12%, rgba(255,122,24,.18), transparent 58%),
      radial-gradient(1050px 720px at 92% 8%, rgba(124,92,255,.20), transparent 60%),
      radial-gradient(1050px 760px at 52% 120%, rgba(255,182,72,.12), transparent 64%),
      linear-gradient(180deg, #050713, var(--bg));
  }
}


/* Fix low-contrast text from the base theme */
html[data-design="redesign"] .brand__tagline,
html[data-design="redesign"] .brand__desc{
  color: rgba(255,255,255,.80);
}

html[data-design="redesign"] .info__text{
  color: rgba(255,255,255,.76);
}

html[data-design="redesign"] .footer__link{
  color: rgba(255,255,255,.78);
  border-bottom-color: rgba(255,255,255,.28);
}
html[data-design="redesign"] .footer__link:hover{ color: rgba(255,255,255,.92); }

/* Testimonials: new premium dark palette */
html[data-design="redesign"] .testimonials{
  position: relative;
}
html[data-design="redesign"] .testimonials::before{
  content:"";
  position:absolute;
  inset:-40px 0;
  opacity: .85;
  pointer-events:none;
  z-index: 0;
}
html[data-design="redesign"] .testimonials .container{ position: relative; z-index: 1; }

html[data-design="redesign"] .tcar__stage{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
}

html[data-design="redesign"] .tcardx{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}
html[data-design="redesign"] .tcardx::after{
  border-color: rgba(255,255,255,.12);
}
html[data-design="redesign"] .tcardx__role{ color: rgba(255,255,255,.72); }
html[data-design="redesign"] .tcardx__text{ color: rgba(255,255,255,.86); }

html[data-design="redesign"] .tcar__nav{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
html[data-design="redesign"] .tcar__nav::after{ background: rgba(10,12,20,.55); }
html[data-design="redesign"] .tcar__nav > span{ color: rgba(255,255,255,.92); }


/* === v3 tweaks === */
html[data-design="redesign"] .muted{
  color: rgba(255,255,255,.86);
}

html[data-design="redesign"] .tcar__shell{
  background: rgba(10,12,22,.78);
  border: 1px solid rgba(255,255,255,.12);
}

html[data-design="redesign"] .tcar__shell::before{
  opacity: .80;
}

html[data-design="redesign"] .tcar__nav{
  background: rgba(14,16,28,.76);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 52px rgba(0,0,0,.42);
}

html[data-design="redesign"] .tcar__nav::after{
  background: rgba(14,16,28,.82);
}

html[data-design="redesign"] .tcar__nav > span{
  color: rgba(255,255,255,.92);
}

html[data-design="redesign"] .tcardx{
  background: rgba(14,16,28,.78);
  box-shadow: 0 22px 70px rgba(0,0,0,.44);
}

html[data-design="redesign"] .tcardx::after{
  border: 1px solid rgba(255,255,255,.10);
}

html[data-design="redesign"] .tcardx__text{
  color: rgba(255,255,255,.90);
}

html[data-design="redesign"] .tcardx__avatar{
  box-shadow: 0 18px 44px rgba(0,0,0,.42);
}

@media (max-width: 901px){
html[data-design="redesign"] .links__card{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}
}