/* ═══════════════════════════════════════════════════════════════
   budulai.app v2 layer (Sep 28, 2026): bolder Budulai Blue.
   Loaded after theme.css. Cream canvas, navy used in solid blocks:
   hero demo window, offer, inset navy panels, closing band.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Hero ─── */
#hero.v2{padding:120px 0 40px;text-align:left;background:
  radial-gradient(ellipse 70% 50% at 85% 0%,rgba(212,168,67,.16),transparent 70%),var(--bg)}
#hero.v2 .wrap{max-width:1180px}
.v2-top{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end}
#hero.v2 .eyebrow{margin:0 0 26px;background:#FBF8F1;border-color:var(--line);color:var(--gold-text)}
#hero.v2 h1{margin:0;max-width:none;text-align:left;font-size:clamp(3rem,6.4vw,5.3rem);line-height:1;letter-spacing:-.035em;font-weight:600;color:var(--navy)}
.v2-accent{background:linear-gradient(100deg,#7F5E12 0%,#A2771F 55%,#8A6414 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
#hero.v2 .hero-sub{margin:0;max-width:520px;text-align:left;font-size:1.12rem;color:var(--text2)}
#hero.v2 .hero-offer{margin:22px 0 16px;max-width:520px;text-align:left;background:var(--navy);border:1px solid var(--navy);color:#E8E0CC;box-shadow:0 14px 34px -18px rgba(11,20,38,.55)}
#hero.v2 .hero-offer strong{color:var(--brand-gold)}
#hero.v2 .wl-inline{margin:0;max-width:520px;justify-content:flex-start}
#hero.v2 .hero-note{text-align:left;margin-top:12px}
#hero.v2 .hero-more{text-align:left;margin-top:10px;font-size:.9rem}

/* ─── Hero media: real recording + real screenshots on a navy stage ─── */
.v2-media{margin:64px auto 0;max-width:1100px;background:var(--navy);border-radius:36px;padding:56px 32px 36px;
  display:grid;grid-template-columns:1fr auto 1fr;gap:36px;align-items:center;position:relative;overflow:hidden;
  box-shadow:0 40px 80px -44px rgba(11,20,38,.65)}
.v2-media::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 55% 60% at 50% 30%,rgba(212,168,67,.22),transparent 70%)}
.v2-media figure{position:relative;z-index:1;margin:0;text-align:center}
.v2-media figcaption{margin-top:14px;font-size:.84rem;color:#C9D3E0}
.v2-phone video{display:block;margin:0 auto;width:300px;aspect-ratio:1206/2622;height:auto;object-fit:cover;border-radius:44px;background:#0F2139;
  box-shadow:0 0 0 9px #0B1426,0 0 0 10px rgba(212,168,67,.35),0 30px 60px -20px rgba(0,0,0,.6)}
.v2-side-shot img{width:100%;max-width:230px;margin:0 auto;border-radius:32px;box-shadow:0 0 0 7px #0B1426,0 0 0 8px rgba(232,224,204,.14),0 24px 48px -20px rgba(0,0,0,.55)}
.v2-l{transform:rotate(-3deg) translateY(20px)}.v2-r{transform:rotate(3deg) translateY(20px)}

/* Real screenshots that replace the old recreations in feature sections */
.real-shot{margin:0 auto;max-width:300px;text-align:center}
.real-shot img{width:100%;border-radius:40px;box-shadow:0 0 0 9px #0B1426,0 0 0 10px rgba(212,168,67,.3),0 30px 60px -24px rgba(11,20,38,.55)}
.real-shot figcaption{margin-top:16px;font-size:.84rem;color:var(--text3)}

/* ─── Navy inset panels (Viktor-style colour blocks) ─── */
#plans,.privacy-sec{
  --bg:#14213D; --bg-deep:#0B1426; --text:#F2EBDA; --text2:#C9D3E0; --text3:#9FB0C4;
  --ink:#F2EBDA; --gold:#D4A843; --gold-text:#D4A843; --line:rgba(232,224,204,.12); --border:rgba(232,224,204,.12);
  --card:rgba(255,255,255,.05);
  background:var(--navy)!important;color:#F2EBDA;border:0!important;
  margin:24px max(12px,calc((100vw - 1260px)/2));border-radius:36px;position:relative;overflow:hidden}
.privacy-sec::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(212,168,67,.16),transparent 70%)}
.privacy-sec>*{position:relative;z-index:1}
.privacy-sec h2,#plans h2{color:#F2EBDA}
.privacy-sec .lock{background:rgba(212,168,67,.16);border-color:rgba(212,168,67,.4);color:#D4A843}
#plans .f-point strong,.privacy-sec strong{color:#F2EBDA}
#plans .f-point svg{color:#D4A843}
.privacy-sec a{color:#D4A843}

/* Closing band gets a touch more presence */
.cta-sec{margin:24px max(12px,calc((100vw - 1260px)/2)) 0;border-radius:36px 36px 0 0}

/* ─── Responsive ─── */
@media(max-width:900px){
  .v2-top{grid-template-columns:1fr;gap:26px}
  #hero.v2{padding:104px 0 24px}
  .v2-media{grid-template-columns:1fr;margin-top:44px;padding:40px 16px 28px;border-radius:26px}
  .v2-side-shot{display:none}
  .v2-phone video{width:min(240px,62vw)}
  .real-shot{max-width:250px}
  #plans,.privacy-sec{border-radius:26px}
  .cta-sec{border-radius:26px 26px 0 0}
}
@media(max-width:480px){
  #hero.v2 h1{font-size:clamp(2.7rem,13vw,3.4rem)}
}