/* ============================================================
   BAUMANN PROPERTY (BPI) — Concept Funnels
   Shared design system — REAL BRAND: NAVY x WHITE x GLASS
   (palette lifted live from baumannproperty.com.au, Jun 2026)
   ui-ux-pro-max intelligence:
     Brand voice : "Engineering Wealth · No BS — Just Data, Facts and Deals"
     Audience    : High-income Spanish-speaking (Latino) investors, AU
                   (QLD: Gold Coast / Brisbane / SE QLD + Sydney)
     Positioning : Christian as the trusted, data-driven authority who
                   speaks your language. Trust > hard-sell. "Slow burn".
     Style       : His Swiss/minimal navy + white (monochrome), elevated with
                   scalus.io-grade motion — glowing orbs, blueprint mesh,
                   liquid glass, fluid reveals, glow-on-hover.
     Type        : Helvetica Now stack (his) → Inter fallback, light weights
   REAL palette (computed from his live site):
     Navy   #081F2F (bg) · #122837 / #152A3A (sections)
     Accent WHITE (his CTAs are white pills, navy text) — NO gold
     White  #FFFFFF · Glass rgba(255,255,255,.05 / .10)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  /* EXACT Webflow vars from baumannproperty.com.au (Jun 2026):
     --blue #081f2f · blue-5 #152a3a · blue-10 #2c3f4e · blue-15 #374957 ·
     blue-20 #435461 · white at 5/10/15/20/30/40/50 opacity steps.
     Accent = WHITE (his CTAs are white pills w/ navy text). NO gold. */
  --teal:#FFFFFF; --teal-hi:#FFFFFF; --teal-lo:#D7DDE2; --teal-deep:#435461;
  --gold:#FFFFFF; --gold-hi:#FFFFFF; --gold-lo:#D7DDE2;
  --blue-5:#152A3A; --blue-10:#2C3F4E; --blue-15:#374957; --blue-20:#435461;
  /* Surface — his deep navy */
  --bg:#081F2F; --bg-2:#0B2434; --bg-3:#152A3A;
  --ink:#FFFFFF; --ink-soft:rgba(255,255,255,.62); --ink-mute:rgba(255,255,255,.40);
  --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.07);
  --line-gold:rgba(255,255,255,.26);
  /* Glass — clean white (his look) */
  --glass:rgba(255,255,255,.05); --glass-strong:rgba(255,255,255,.10);
  --glass-gold:rgba(255,255,255,.07);
  --blur:18px; --radius:18px; --radius-sm:12px;
  --shadow:0 30px 90px -34px rgba(0,0,0,.94);
  --ring:0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.08);
  --glow:0 0 0 1px rgba(255,255,255,.28), 0 20px 70px -18px rgba(255,255,255,.25);
  --grad-teal:linear-gradient(100deg,#FFFFFF,#F0F3F5 48%,#D7DDE2);
  --grad-gold:linear-gradient(100deg,#FFFFFF,#F0F3F5 48%,#D7DDE2);
  --maxw:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
section[id]{scroll-margin-top:84px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Helvetica Now Text","Helvetica Neue",'Inter',-apple-system,system-ui,Arial,sans-serif;
  font-weight:400; line-height:1.62; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 50% at 84% -8%, rgba(255,255,255,.07), transparent 62%),
    radial-gradient(50% 44% at -4% 8%, rgba(67,84,97,.40), transparent 60%),
    radial-gradient(48% 42% at 50% 116%, rgba(44,63,78,.55), transparent 60%),
    radial-gradient(40% 36% at 18% 60%, rgba(255,255,255,.03), transparent 70%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
/* blueprint engineering grid — his concentric-line motif, slowly panning */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(74% 62% at 50% 26%, #000 38%, transparent 92%);
  -webkit-mask-image:radial-gradient(74% 62% at 50% 26%, #000 38%, transparent 92%);
  animation:meshpan 48s linear infinite;
}
@keyframes meshpan{from{background-position:0 0,0 0} to{background-position:64px 64px,64px 64px}}

/* Floating steel-blue/white orbs — soft, slow, on-palette (behind content) */
.bg-orbs{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.bg-orbs i{position:absolute; border-radius:50%; filter:blur(78px); opacity:.5;
  animation:float 18s ease-in-out infinite; mix-blend-mode:screen}
.bg-orbs i.a{width:560px; height:560px; background:radial-gradient(circle,var(--blue-20),transparent 70%); top:-150px; right:-110px}
.bg-orbs i.b{width:460px; height:460px; background:radial-gradient(circle,var(--blue-15),transparent 70%); bottom:-150px; left:-90px; animation-delay:-6s; opacity:.45}
.bg-orbs i.c{width:400px; height:400px; background:radial-gradient(circle,rgba(255,255,255,.5),transparent 70%); top:42%; left:54%; opacity:.12; animation-delay:-11s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-60px,44px) scale(1.12)} 66%{transform:translate(44px,-34px) scale(.92)}}

h1,h2,h3,.display{font-family:"Helvetica Now Display","Helvetica Neue",'Inter',Arial,sans-serif;
  font-weight:500; line-height:1.06; letter-spacing:-.018em; margin:0}
h1{font-size:clamp(2.6rem,6.4vw,5rem); line-height:1.0; font-weight:500}
h2{font-size:clamp(2rem,4.6vw,3.4rem); font-weight:500}
h3{font-size:clamp(1.2rem,2.1vw,1.5rem); font-weight:500}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.05rem,1.5vw,1.26rem); color:var(--ink-soft); font-weight:400}
.eyebrow{font-family:'Inter',sans-serif; text-transform:uppercase;
  letter-spacing:.26em; font-weight:600; font-size:.74rem; color:var(--gold-hi)}
.grad{background:linear-gradient(110deg,#FFFFFF 6%,rgba(255,255,255,.55) 46%,#FFFFFF 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% auto; animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% center}}

/* Live pulse dot (for "campaign live" / eyebrow accents) */
.pulse-dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--teal);
  box-shadow:0 0 10px var(--teal); animation:pulse 2s infinite; vertical-align:middle; margin-right:.55em}
@keyframes pulse{0%,100%{box-shadow:0 0 12px var(--teal); opacity:1} 50%{box-shadow:0 0 24px var(--teal); opacity:.65}}

/* Hero entrance — staggered rise (independent of scroll-reveal) */
@keyframes rise{to{opacity:1; transform:translateY(0)}}
.hero .rise{opacity:0; transform:translateY(20px); animation:rise .9s forwards cubic-bezier(.2,.7,.2,1)}
.hero .rise.d1{animation-delay:.10s} .hero .rise.d2{animation-delay:.22s}
.hero .rise.d3{animation-delay:.34s} .hero .rise.d4{animation-delay:.46s}

/* Scroll cue */
.cue{display:inline-flex; flex-direction:column; align-items:center; gap:8px; margin-top:42px;
  color:var(--ink-mute); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  opacity:0; animation:rise .9s .6s forwards; text-decoration:none}
.cue .mouse{width:24px; height:38px; border:2px solid var(--line); border-radius:14px; position:relative}
.cue .mouse::after{content:""; position:absolute; left:50%; top:7px; width:4px; height:8px; border-radius:3px;
  background:var(--teal); transform:translateX(-50%); animation:scroll 1.8s ease-in-out infinite}
@keyframes scroll{0%{opacity:0; transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0; transform:translate(-50%,12px)} 100%{opacity:0}}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
section{padding:clamp(54px,8.5vw,114px) 0}
.es{font-style:italic; color:rgba(255,255,255,.8)} /* inline Spanish phrase accent */

.glass{background:var(--glass); backdrop-filter:blur(var(--blur)) saturate(130%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(130%);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--ring),var(--shadow)}
.glass-soft{background:var(--glass); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px); border:1px solid var(--line-soft); border-radius:var(--radius-sm)}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.55em; cursor:pointer;
  font-family:"Helvetica Now Display","Helvetica Neue",'Inter',Arial,sans-serif; letter-spacing:.005em; font-weight:600;
  font-size:1.04rem; padding:.95rem 1.9rem; border-radius:999px; border:0; text-decoration:none;
  transition:transform .2s ease, box-shadow .25s ease, filter .25s ease}
/* white pill + navy text — exactly his "Let's Chat" CTA */
.btn-primary{position:relative; overflow:hidden; background:#FFFFFF; color:#081F2F; box-shadow:var(--glow)}
.btn-primary::after{content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(8,31,47,.10), transparent);
  transform:skewX(-18deg); animation:sweep 4.5s ease-in-out infinite}
@keyframes sweep{0%,72%{left:-120%} 100%{left:130%}}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);
  box-shadow:0 0 0 1px rgba(255,255,255,.45), 0 26px 80px -20px rgba(255,255,255,.35)}
.btn-ghost{background:var(--glass-strong); color:var(--ink); border:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.btn-ghost:hover{transform:translateY(-2px); background:rgba(255,255,255,.16)}
.btn svg{width:1.05em; height:1.05em}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}

/* Sticky bar */
.topbar{position:sticky; top:0; z-index:50; backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px); background:rgba(8,31,47,.66); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:13px; padding-bottom:13px}
.brand{display:flex; flex-direction:column; font-family:"Helvetica Now Display","Helvetica Neue",'Inter',Arial,sans-serif;
  letter-spacing:.02em; font-size:1.18rem; font-weight:600; color:var(--ink); text-decoration:none; line-height:1.05}
.brand span{font-family:'Inter',sans-serif; font-size:.54rem; letter-spacing:.32em; font-weight:600; color:var(--gold-hi); margin-top:4px; text-transform:uppercase}
/* his real white logo lockup */
.brand-logo{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-logo img{height:30px; width:auto; display:block}
.topbar .btn{padding:.6rem 1.25rem; font-size:.95rem}
.nav-links{display:flex; align-items:center; gap:26px}
.nav-links a{color:var(--ink-soft); text-decoration:none; font-size:.92rem; transition:color .18s}
.nav-links a:hover{color:#fff}
@media(max-width:760px){ .nav-links{display:none} }

/* HERO */
.hero{position:relative; padding-top:clamp(46px,7vw,82px)}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,4vw,56px); align-items:center}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 26px}
.chip{display:inline-flex; align-items:center; gap:.5em; font-size:.84rem; color:var(--ink-soft);
  padding:.48rem .9rem; border-radius:999px; background:var(--glass); border:1px solid var(--line)}
.chip svg{width:1em; height:1em; color:var(--teal)}
.flag{font-size:.95em; filter:saturate(1.1)}

/* VSL */
.vsl{position:relative; aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(160deg,#0e2a32,#08151f); border:1px solid var(--line); box-shadow:var(--ring),var(--shadow)}
.vsl .ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center}
.vsl .play{position:relative; width:78px; height:78px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad-teal); box-shadow:var(--glow); cursor:pointer; transition:transform .2s; animation:bob 3.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}
.vsl .play::before{content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{transform:scale(1); opacity:.7} 100%{transform:scale(1.5); opacity:0}}
.vsl .play:hover{transform:scale(1.06)}
.vsl .play svg{width:30px; height:30px; color:#0a1822; margin-left:4px}
.vsl .tag{font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute)}
.vsl .frame-note{position:absolute; left:14px; bottom:12px; font-size:.72rem; color:var(--ink-mute);
  background:rgba(0,0,0,.45); padding:.3rem .6rem; border-radius:8px}

/* Stats */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px}
.stat{padding:18px; text-align:center}
.stat b{font-family:"Helvetica Now Display","Helvetica Neue",'Inter',Arial,sans-serif; font-weight:800; font-size:2.4rem; line-height:1; display:block; color:var(--teal)}
.stat span{font-size:.78rem; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.1em}

.shead{max-width:760px; margin:0 auto clamp(34px,5vw,58px); text-align:center}
.shead p{margin-top:14px}

/* 3-step */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.step{padding:30px; position:relative; overflow:hidden}
.step .n{font-family:"Helvetica Now Display","Helvetica Neue",'Inter',Arial,sans-serif; font-weight:800; font-size:3rem; line-height:1; color:#fff; opacity:.22}
.step h3{margin:.45rem 0 .5rem} .step p{color:var(--ink-soft); margin:0}

/* Feature grids */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.feat{padding:28px}
.feat .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:16px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.20)}
.feat .ic svg{width:24px; height:24px; color:#fff}
.feat h3{margin-bottom:.4rem} .feat p{color:var(--ink-soft); margin:0; font-size:.97rem}

/* Deal proof row */
.deals{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.deal{padding:24px; position:relative}
.deal .roi{font-family:"Helvetica Now Display","Helvetica Neue",'Inter',Arial,sans-serif; font-weight:800; font-size:1.9rem; color:var(--teal); line-height:1}
.deal .loc{font-size:.82rem; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.1em; margin:.5rem 0 .8rem}
.deal ul{list-style:none; margin:0; padding:0; font-size:.92rem; color:var(--ink-soft)}
.deal li{display:flex; justify-content:space-between; padding:.32rem 0; border-bottom:1px solid var(--line-soft)}
.deal li:last-child{border-bottom:0}
.deal li b{color:var(--ink); font-weight:600}

/* Testimonials */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.quote{padding:26px} .quote p{font-size:1.0rem; color:var(--ink)}
.quote .who{display:flex; align-items:center; gap:.7rem; margin-top:16px}
.quote .av{width:40px; height:40px; border-radius:50%; background:var(--grad-teal); display:grid; place-items:center; color:#0a1822; font-weight:700; font-family:"Helvetica Now Display","Helvetica Neue",'Inter',Arial,sans-serif}
.quote .who b{display:block; font-size:.95rem} .quote .who span{font-size:.8rem; color:var(--ink-mute)}
.stars{color:var(--teal); letter-spacing:2px; font-size:.95rem}

/* Coach / authority */
.coach{display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(24px,4vw,48px); align-items:center}
.coach .photo{aspect-ratio:4/5; border-radius:var(--radius); background:linear-gradient(160deg,#0e2a32,#08151f);
  border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-mute); font-size:.82rem; box-shadow:var(--ring),var(--shadow)}
.cred{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.cred span{font-size:.8rem; padding:.4rem .8rem; border-radius:999px; background:var(--glass); border:1px solid var(--line); color:var(--ink-soft)}

/* Guarantee badge */
.guarantee{display:flex; gap:18px; align-items:center; max-width:720px; margin:0 auto; padding:26px 30px}
.guarantee .seal{flex:none; width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad-teal); color:#0a1822; box-shadow:var(--glow)}
.guarantee .seal svg{width:34px; height:34px}
.guarantee h3{margin:0 0 4px} .guarantee p{margin:0; color:var(--ink-soft); font-size:.96rem}

/* CTA */
.cta{position:relative; text-align:center; padding:clamp(44px,7vw,82px) 28px; overflow:hidden}
.cta::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 50% 0%, rgba(255,255,255,.08), transparent 70%)}
.cta>*{position:relative}
.cta h2{max-width:780px; margin:0 auto 14px}
.cta .lead{max-width:580px; margin:0 auto 26px}

/* Forms (concept — POST wired later) */
.lead-form{max-width:460px; margin:0 auto; text-align:left}
.lead-form .field{margin-bottom:14px}
.lead-form label{display:block; font-size:.82rem; color:var(--ink-soft); margin-bottom:6px; font-weight:500}
.lead-form input, .lead-form select{width:100%; padding:.9rem 1rem; border-radius:12px; font:inherit;
  background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink); outline:none; transition:border-color .2s, box-shadow .2s}
.lead-form input:focus, .lead-form select:focus{border-color:var(--teal); box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.lead-form input::placeholder{color:var(--ink-mute)}
.lead-form select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%2374899a' viewBox='0 0 16 16'%3E%3Cpath d='M8 11 3 6h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center}
.lead-form .btn{width:100%; justify-content:center; margin-top:6px}
.form-note{text-align:center; font-size:.78rem; color:var(--ink-mute); margin-top:14px}
.thanks{text-align:center; padding:30px}
.thanks .seal{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;background:var(--grad-teal);color:#0a1822}
.thanks .seal svg{width:30px;height:30px}

/* QUIZ (Variation 2) */
.quiz{max-width:620px; margin:0 auto}
.quiz-card{padding:clamp(28px,4vw,44px); position:relative; overflow:hidden}
.progress{height:6px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; margin-bottom:26px}
.progress > i{display:block; height:100%; width:20%; border-radius:999px; background:var(--grad-teal); transition:width .4s cubic-bezier(.2,.7,.2,1)}
.q-step{display:none; animation:qin .45s ease both}
.q-step.active{display:block}
@keyframes qin{from{opacity:0; transform:translateX(16px)} to{opacity:1; transform:none}}
.q-kicker{font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); font-weight:600}
.q-step h3{font-size:clamp(1.4rem,3vw,2rem); margin:.5rem 0 1.4rem}
.opts{display:grid; gap:12px}
.opt{display:flex; align-items:center; gap:.85rem; width:100%; text-align:left; cursor:pointer;
  padding:1rem 1.15rem; border-radius:14px; background:rgba(255,255,255,.035); border:1px solid var(--line);
  color:var(--ink); font:inherit; font-size:1.02rem; transition:border-color .18s, background .18s, transform .12s}
.opt:hover{border-color:var(--teal); background:rgba(255,255,255,.1); transform:translateY(-1px)}
.opt .dot{flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--ink-mute); display:grid; place-items:center; transition:.18s}
.opt .dot svg{width:12px; height:12px; color:#0a1822; opacity:0; transition:.18s}
.opt.sel{border-color:var(--teal); background:rgba(255,255,255,.14)}
.opt.sel .dot{background:var(--teal); border-color:var(--teal)} .opt.sel .dot svg{opacity:1}
.q-nav{display:flex; justify-content:space-between; align-items:center; margin-top:24px}
.q-back{background:none; border:0; color:var(--ink-mute); font:inherit; cursor:pointer; font-size:.92rem; padding:.4rem}
.q-back:hover{color:var(--ink-soft)}
.q-back[disabled]{opacity:0; pointer-events:none}

footer{padding:48px 0; border-top:1px solid var(--line); color:var(--ink-mute); font-size:.86rem; text-align:center}
footer a{color:var(--teal); text-decoration:none}
.disclaimer{max-width:700px; margin:14px auto 0; font-size:.74rem; color:var(--ink-mute); opacity:.82}

/* Fail-safe reveal: visible by default; JS opts in. Cinematic rise + blur,
   with per-element stagger via --rd (set by JS on grid children). */
.reveal{opacity:1; transform:none}
.js-anim .reveal{opacity:0; transform:translateY(38px) scale(.98); filter:blur(10px);
  transition:opacity .95s cubic-bezier(.16,.84,.3,1), transform .95s cubic-bezier(.16,.84,.3,1), filter .9s ease;
  transition-delay:var(--rd,0s); will-change:opacity,transform,filter}
.js-anim .reveal.in{opacity:1; transform:none; filter:none}
/* directional variants */
.js-anim .reveal.rv-l{transform:translateX(-46px) scale(.99)}
.js-anim .reveal.rv-r{transform:translateX(46px) scale(.99)}
.js-anim .reveal.rv-z{transform:scale(.88)}
.js-anim .reveal.in.rv-l, .js-anim .reveal.in.rv-r, .js-anim .reveal.in.rv-z{transform:none}

@media(max-width:900px){
  .hero-grid,.coach{grid-template-columns:1fr}
  .steps,.grid3,.quotes,.deals{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .hero .vsl{order:-1}
}
@media(max-width:560px){ .stats{grid-template-columns:1fr} .guarantee{flex-direction:column; text-align:center} }
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .reveal{opacity:1; transform:none}
}

/* ============================================================
   scalus.io-GRADE ENHANCEMENT LAYER
   Glowing, fluid, interactive — kept on-brand (navy + gold + glass)
   ============================================================ */

/* Liquid-glass: faint gold top-edge sheen + interactive glow-on-hover */
.glass{position:relative; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .3s ease}
.glass::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.45), rgba(255,255,255,.05) 30%, transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.6; transition:opacity .35s}
.feat.glass:hover, .deal.glass:hover, .step.glass:hover, .quote.glass:hover, .pcard.glass:hover{
  transform:translateY(-6px);
  border-color:var(--line-gold);
  box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 34px 90px -30px rgba(255,255,255,.20), var(--shadow)}
.feat.glass:hover::before, .deal.glass:hover::before, .step.glass:hover::before,
.quote.glass:hover::before, .pcard.glass:hover::before{opacity:1}

/* Pointer-tracking glow that follows the cursor across glass cards (JS sets --mx/--my) */
.glow-card{position:relative; overflow:hidden}
.glow-card::after{content:""; position:absolute; width:340px; height:340px; left:var(--mx,50%); top:var(--my,50%);
  transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
  opacity:0; transition:opacity .3s; pointer-events:none}
.glow-card:hover::after{opacity:1}

/* White feature icons (his monochrome accent) */
.feat .ic{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.20)}
.feat .ic svg{color:#fff}

/* Hero image (his real seminar / city photography) */
.hero-photo{position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--ring),var(--shadow)}
.hero-photo img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.02) contrast(1.02)}
.hero-photo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(8,31,47,.55) 100%),
             radial-gradient(80% 60% at 70% 10%, rgba(255,255,255,.07), transparent 60%)}
.hero-photo .badge{position:absolute; left:14px; bottom:14px; z-index:2; display:flex; gap:8px; align-items:center;
  font-size:.74rem; color:#fff; background:rgba(8,31,47,.6); backdrop-filter:blur(8px);
  border:1px solid var(--line-gold); padding:.45rem .8rem; border-radius:999px}
.hero-photo .badge b{color:var(--gold-hi); font-weight:600}

/* concentric blueprint rings — his signature engineering motif */
.rings{position:absolute; z-index:0; width:680px; height:680px; pointer-events:none; opacity:.5;
  background:
    radial-gradient(circle, transparent 0 119px, rgba(255,255,255,.12) 120px 121px, transparent 122px) ,
    radial-gradient(circle, transparent 0 199px, rgba(255,255,255,.06) 200px 201px, transparent 202px),
    radial-gradient(circle, transparent 0 289px, rgba(255,255,255,.08) 290px 291px, transparent 292px);
  animation:spin 80s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* gold underline-grow on eyebrows */
.eyebrow.line{display:inline-block; padding-bottom:8px; position:relative}
.eyebrow.line::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:38px; background:var(--grad-gold)}

/* QPIA / credential trust badge */
.qpia{display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; letter-spacing:.06em;
  color:var(--ink-soft); border:1px solid var(--line-gold); border-radius:8px; padding:.4rem .7rem; background:var(--glass-gold)}
.qpia b{color:var(--gold-hi); font-weight:700; letter-spacing:.12em}

/* "Let's Chat" arrow-box (matches his nav CTA exactly) */
.arrow-box{display:inline-grid; place-items:center; width:1.3em; height:1.3em; border-radius:4px;
  background:rgba(8,31,47,.9); margin-left:.1em}
.arrow-box svg{width:.8em; height:.8em}

/* form success state (interactive mock) */
.lead-form.sent{position:relative}
.form-sent{display:none; text-align:center; padding:18px 6px}
.form-sent .seal{width:60px; height:60px; border-radius:50%; display:grid; place-items:center; margin:0 auto 14px;
  background:var(--grad-gold); color:#0a1822; box-shadow:var(--glow); animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.4); opacity:0} to{transform:scale(1); opacity:1}}
.form-sent .seal svg{width:30px; height:30px}
.lead-form.sent > .field, .lead-form.sent > .grid2, .lead-form.sent > .btn, .lead-form.sent > .form-note{display:none}
.lead-form.sent .form-sent{display:block; animation:qin .5s ease both}

/* result card for quiz (interactive mock) */
.result-card{display:none}
.result-card.show{display:block; animation:qin .5s ease both}
.result-tier{display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-hi); border:1px solid var(--line-gold); border-radius:999px; padding:.4rem .9rem; background:var(--glass-gold); margin-bottom:14px}
.result-tier .pulse-dot{margin-right:.2rem}

/* number count-up + animated stat underglow */
.stat{position:relative}
.stat::after{content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:40%; height:1px; background:var(--grad-gold); opacity:.5}

/* smooth marquee trust strip */
.marquee{overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex; gap:48px; width:max-content; animation:scrollx 28s linear infinite; align-items:center}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{color:var(--ink-soft); font-size:.92rem; white-space:nowrap; display:inline-flex; align-items:center; gap:.5rem}
.marquee span::before{content:"◆"; color:var(--gold); font-size:.6rem}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ============================================================
   MOTION LAYER v2 — "really animated" pass (Jun 2026)
   Monochrome navy/white only. All gated behind .js-anim +
   prefers-reduced-motion kill-switch above.
   ============================================================ */

/* scroll progress hairline (JS injects .scroll-progress) */
.scroll-progress{position:fixed; top:0; left:0; height:2px; width:0; z-index:140;
  background:linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.45));
  box-shadow:0 0 14px rgba(255,255,255,.55)}

/* hero headline word-cascade (JS wraps words in .h-word) */
.js-anim .h-word{display:inline-block; opacity:0; transform:translateY(.55em); filter:blur(8px);
  animation:wordin .85s cubic-bezier(.16,.84,.3,1) forwards; animation-delay:var(--wd,0s)}
@keyframes wordin{to{opacity:1; transform:none; filter:none}}

/* drifting dust motes (JS spawns .dust > i) */
.dust{position:fixed; inset:0; z-index:-1; pointer-events:none}
.dust i{position:absolute; bottom:-2vh; width:3px; height:3px; border-radius:50%;
  background:rgba(255,255,255,.55); filter:blur(.4px); opacity:0;
  animation:drift var(--dur,22s) linear var(--del,0s) infinite}
@keyframes drift{
  0%{opacity:0; transform:translate(0,0) scale(.8)}
  12%{opacity:.55}
  60%{opacity:.3; transform:translate(var(--sway,24px),-58vh) scale(1)}
  100%{opacity:0; transform:translate(calc(var(--sway,24px)*-.6),-112vh) scale(.7)}}

/* topbar: lifts + tightens once you scroll (JS toggles .scrolled) */
.topbar{transition:background .35s ease, box-shadow .35s ease}
.topbar.scrolled{background:rgba(8,31,47,.88); box-shadow:0 18px 50px -28px rgba(0,0,0,.9)}

/* gentle breathing on the hero photo frame */
.hero-photo{animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:var(--ring),var(--shadow)}
  50%{box-shadow:0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.08), 0 40px 110px -34px rgba(0,0,0,.96)}}

/* white underline grows in when a section head reveals */
.js-anim .shead .eyebrow.line::after{width:0; transition:width .8s .35s cubic-bezier(.16,.84,.3,1)}
.js-anim .shead.in .eyebrow.line::after, .js-anim .shead .reveal.in .eyebrow.line::after{width:38px}

/* EN/ES language toggle pill (topbar) */
.lang-switch{display:inline-grid; place-items:center; min-width:42px; height:34px; padding:0 12px; margin-right:12px;
  border-radius:999px; border:1px solid var(--line); background:var(--glass); color:var(--ink-soft);
  font:600 .82rem/1 'Inter',sans-serif; letter-spacing:.08em; text-decoration:none; transition:color .2s,border-color .2s,background .2s}
.lang-switch:hover{color:#fff; border-color:rgba(255,255,255,.3); background:var(--glass-strong)}
@media(max-width:760px){ .lang-switch{margin-right:8px} }

/* Lenis smooth scroll (desktop only — see bpi.js) */
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ============================================================
   LIVE HOTSPOT RADAR (concept mock) — dotted AU map + live feed
   ============================================================ */
.hotmap{display:grid; grid-template-columns:1.22fr .78fr; overflow:hidden; padding:0}
.hotmap-map{position:relative; min-height:480px; padding:30px}
.hotmap-map::before{content:""; position:absolute; inset:0;
  background:radial-gradient(70% 60% at 60% 45%, rgba(67,84,97,.35), transparent 70%)}
.au-dots{position:absolute; inset:26px;
  background-image:radial-gradient(circle, rgba(255,255,255,.34) 1.3px, transparent 1.9px);
  background-size:13px 13px;
  -webkit-mask:url('/assets/img/au.svg') center/contain no-repeat;
  mask:url('/assets/img/au.svg') center/contain no-repeat; opacity:.85}
.hs{position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  width:14px; height:14px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:#fff; box-shadow:0 0 12px rgba(255,255,255,.75); transition:transform .25s, box-shadow .25s; z-index:2}
.hs::before{content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55); animation:ring 2.4s ease-out infinite}
.hs::after{content:attr(data-name); position:absolute; left:50%; bottom:140%; transform:translateX(-50%);
  white-space:nowrap; font:600 .68rem/1 'Inter',sans-serif; letter-spacing:.06em; color:#fff;
  background:rgba(8,31,47,.92); border:1px solid var(--line); border-radius:8px; padding:.4rem .6rem;
  opacity:0; pointer-events:none; transition:opacity .25s}
.hs:hover::after, .hs.on::after{opacity:1}
.hs.on{transform:translate(-50%,-50%) scale(1.45); box-shadow:0 0 0 5px rgba(255,255,255,.18), 0 0 26px rgba(255,255,255,.95); z-index:3}
.hotmap-feed{border-left:1px solid var(--line); background:rgba(255,255,255,.03);
  padding:26px; display:flex; flex-direction:column; gap:14px; min-width:0}
.feed-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.live-pill{display:inline-flex; align-items:center; gap:.45em; font:700 .7rem/1 'Inter',sans-serif;
  letter-spacing:.18em; color:#081F2F; background:#fff; border-radius:999px; padding:.42rem .75rem}
.live-pill .pulse-dot{background:#081F2F; box-shadow:none; margin-right:0}
.feed-ago{font-size:.76rem; color:var(--ink-mute); font-variant-numeric:tabular-nums}
.feed-now{padding:16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.04)}
.feed-name{font-family:"Helvetica Now Display","Helvetica Neue",'Inter',Arial,sans-serif; font-weight:600; font-size:1.12rem; margin-bottom:8px}
.feed-stats{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:baseline; margin-bottom:8px}
.feed-stats b{font-size:1.5rem; font-family:"Helvetica Now Display","Helvetica Neue",'Inter',Arial,sans-serif}
.feed-stats span{font-size:.84rem; color:var(--ink-soft)}
.feed-note{margin:0; font-size:.86rem; color:var(--ink-soft)}
.feed-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.feed-list li{font-size:.8rem; color:var(--ink-mute); padding:.55rem .7rem; border-radius:10px;
  background:rgba(255,255,255,.03); border:1px solid var(--line-soft); animation:qin .45s ease both}
.feed-list li b{color:var(--ink-soft); font-weight:600}
.demo-note{margin:auto 0 0; font-size:.72rem; color:var(--ink-mute); opacity:.8}
@media(max-width:900px){
  .hotmap{grid-template-columns:1fr}
  .hotmap-map{min-height:340px}
  .hotmap-feed{border-left:0; border-top:1px solid var(--line)}
}

/* ============================================================
   MARKET INTELLIGENCE INSTRUMENTS — private-bank panel:
   hairlines, tabular numerals, draw-in charts (CSS-only, keyed
   off .reveal.in), market-pulse ticker.
   ============================================================ */
.chartcard{padding:26px; font-variant-numeric:tabular-nums}
.chart-title{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:18px}
.chart-title b{font:600 .78rem/1.3 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.chart-title span{font-size:.72rem; color:var(--ink-mute); white-space:nowrap}
.chartcard svg{width:100%; height:auto; display:block}
.chartline{fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:780; stroke-dashoffset:780; transition:stroke-dashoffset 1.9s cubic-bezier(.2,.7,.2,1) .3s}
.chartline.nat{stroke:rgba(255,255,255,.38); stroke-width:1.6; stroke-dasharray:6 7, 780; transition-delay:.65s}
.reveal.in .chartline{stroke-dashoffset:0}
.chart-dot{fill:#fff; opacity:0; transition:opacity .4s 1.9s} .reveal.in .chart-dot{opacity:1}
.chart-badge{opacity:0; transition:opacity .5s 2s} .reveal.in .chart-badge{opacity:1}
.chart-legend{display:flex; gap:18px; margin-top:14px; font-size:.74rem; color:var(--ink-mute)}
.chart-legend i{display:inline-block; width:18px; height:2px; background:#fff; vertical-align:middle; margin-right:.45em; border-radius:2px}
.chart-legend .nat i{background:rgba(255,255,255,.38)}
/* yield bars */
.bars{display:flex; gap:14px; align-items:flex-end; height:150px; padding-top:6px}
.bars .bar{flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; text-align:center; min-width:0}
.bars .bar i{display:block; height:6px; border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.5));
  transition:height 1.15s cubic-bezier(.2,.7,.2,1) var(--bd,0s)}
.reveal.in .bars .bar i{height:var(--v)}
.bars .bar b{font-size:.74rem; font-weight:700}
.bars .bar span{font-size:.62rem; color:var(--ink-mute); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* model-run status (terminal-calm, Swiss) */
.term{list-style:none; margin:0; padding:0; font-variant-numeric:tabular-nums}
.term li{display:flex; align-items:center; gap:.7rem; padding:.72rem 0; border-bottom:1px solid var(--line-soft);
  font-size:.88rem; color:var(--ink-soft)}
.term li:last-child{border-bottom:0}
.term li b{color:var(--ink); font-weight:600}
.term .ok{flex:none; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 8px rgba(255,255,255,.7)}
.istack{display:grid; gap:18px; align-content:start}
/* market pulse ticker */
.tickbar{margin-top:26px}
.tickbar .lab{font:600 .64rem/1 'Inter',sans-serif; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:10px; display:flex; align-items:center; gap:.5em}
.tickbar .marquee{border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:12px 0}
.tickbar .marquee b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}

/* ============================================================
   EN/ES iPHONE-STYLE LANGUAGE SWITCH (replaces .lang-switch pill)
   OFF (grey, knob left) = English · ON (green, knob right) = Español
   ============================================================ */
.lang-toggle{display:inline-flex; align-items:center; gap:9px; margin-right:14px; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent}
.lang-toggle .lt-lab{font:700 .72rem/1 'Inter',sans-serif; letter-spacing:.14em; color:var(--ink-mute); transition:color .25s}
.lang-toggle:not(.on) .lt-lab.en-lab{color:#fff}
.lang-toggle.on .lt-lab.es-lab{color:#fff}
.lt-track{position:relative; flex:none; width:47px; height:28px; border-radius:999px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease}
.lang-toggle.on .lt-track{background:#34C759; border-color:#34C759;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.15), 0 0 16px rgba(52,199,89,.45)}
.lt-knob{position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.45), 0 0 1px rgba(0,0,0,.2);
  transition:transform .32s cubic-bezier(.22,.9,.3,1.15)}
.lang-toggle.on .lt-knob{transform:translateX(19px)}
.lang-toggle:hover .lt-track{filter:brightness(1.12)}
.lang-toggle:active .lt-knob{width:25px}
.lang-toggle.on:active .lt-knob{transform:translateX(16px)}

/* ============================================================
   LIVE DASHBOARD ENGINE — everything ticks, sweeps & breathes
   ============================================================ */
.chartcard{position:relative; overflow:hidden}
/* vertical scanline sweeping the growth chart */
.chart-scan{position:absolute; top:54px; bottom:46px; width:1px; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.45), transparent);
  animation:scanx 7s linear infinite}
@keyframes scanx{0%{left:6%; opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{left:94%; opacity:0}}
/* pulsing live end-point on the line chart */
.reveal.in .chart-dot{opacity:1; transform-box:fill-box; transform-origin:center;
  animation:dotpulse 2.2s ease-in-out 2.2s infinite}
@keyframes dotpulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.7)}}
/* radar sweep rotating over the AU map */
.au-radar{position:absolute; inset:26px; pointer-events:none; overflow:hidden;
  -webkit-mask:url('/assets/img/au.svg') center/contain no-repeat;
  mask:url('/assets/img/au.svg') center/contain no-repeat}
.au-radar::after{content:""; position:absolute; left:50%; top:50%; width:240%; height:240%;
  margin:-120% 0 0 -120%; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,255,255,.15), transparent 16%);
  animation:spin 8s linear infinite}
/* value flash when a live number updates */
.tick-flash{animation:tickflash .7s ease}
@keyframes tickflash{0%{color:#fff; text-shadow:0 0 14px rgba(255,255,255,.9)} 100%{text-shadow:none}}
/* live clock + status log line */
.live-clock{font-variant-numeric:tabular-nums}
.term .cur{color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.term .cur::after{content:"▌"; margin-left:2px; color:var(--ink-mute); animation:blinkc 1.1s steps(1) infinite}
@keyframes blinkc{50%{opacity:0}}
.live-mini{display:inline-flex; align-items:center; gap:.4em}
.live-mini .pulse-dot{width:5px; height:5px}

/* ---- built by Scalus footer badge ---- */
.built-by{display:inline-flex; align-items:center; gap:.55em; margin-top:26px;
  font-size:.7rem; font-weight:600; line-height:1; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); text-decoration:none; opacity:.85; transition:opacity .3s}
.built-by img{height:13px; width:auto; display:block}
.built-by b{color:var(--ink-soft); font-weight:700; letter-spacing:.22em}
.built-by:hover{opacity:1}