/* =========================================================
   TravelQ — "Xanh ngọc" luxury theme (visual layer only)
   Loaded after styles.css. Remove this <link> to revert.
   ========================================================= */
:root{
  --tq-950:#063a42; --tq-900:#0a4a53; --tq-850:#0b5560; --tq-800:#0d5f69; --tq-700:#0f6d78; --tq-600:#13a3b0; --tq-fresh:#1bb5c1; --tq-ink:#03252b;
  --tq-glow:#42cad7; --tq-bright:#6fe3ec; --tq-ice:#e8fbfc;
  --gold:#d8b46a; --gold-2:#f9ecc9;
  --on-dark:#eefbfc; --on-dark-2:rgba(236,251,252,.96); --on-dark-3:rgba(226,247,249,.86);
  --glass:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.035)),rgba(4,50,57,.30);
  --glass-line:rgba(160,236,242,.20);
  --pearl:linear-gradient(180deg,#ffffff 0%,#f6fdfd 100%);
  --sh-lux:0 1px 0 rgba(255,255,255,.7) inset,0 24px 60px -12px rgba(0,18,22,.45),0 2px 8px rgba(0,18,22,.18);
}
html{background:var(--tq-900)}
body{background:var(--tq-900);color:var(--text)}
::selection{background:rgba(66,202,215,.35);color:#fff}
:focus-visible{outline-color:var(--tq-glow)}


/* ---------- buttons ---------- */
.btn{background:linear-gradient(135deg,#5bd9e4 0%,#2bb7c6 55%,#1a9fae 100%);color:var(--tq-ink);font-weight:700;box-shadow:0 8px 22px -8px rgba(66,202,215,.65),inset 0 1px 0 rgba(255,255,255,.45)}
.btn:hover{background:linear-gradient(135deg,#7be6ee 0%,#3cc6d4 55%,#22aebd 100%);box-shadow:0 12px 28px -8px rgba(66,202,215,.8),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-2);box-shadow:var(--sh-1)}
.btn-ghost:hover{background:#fff;border-color:var(--teal);color:var(--teal-d);box-shadow:var(--sh-1)}
.btn-light{background:rgba(255,255,255,.95);color:var(--tq-900)}
.btn-light:hover{background:#fff;color:var(--tq-700)}
/* ghost buttons sitting on dark teal */
.hero .btn-ghost,.m-cta .btn-ghost{background:rgba(255,255,255,.07);color:var(--on-dark);border-color:rgba(255,255,255,.28);box-shadow:none}
.hero .btn-ghost:hover,.m-cta .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff}

/* ---------- nav ---------- */
.nav{background:rgba(3,42,48,.78);border-bottom:1px solid rgba(160,236,242,.12);box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.nav-links{color:var(--on-dark-2)}
.nav-links a:not(.btn):hover{color:#fff;background:rgba(255,255,255,.07)}
.btn-present{background:rgba(255,255,255,.06);color:var(--on-dark);border:1px solid rgba(216,180,106,.45);box-shadow:none}
.btn-present:hover{background:rgba(216,180,106,.14);border-color:var(--gold)}
.btn-present .i{color:var(--gold-2)}
.menu-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#fff}
.logo img{box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 18px -6px rgba(66,202,215,.55)}

/* ---------- headings & shared text on dark ---------- */
.section h2,.hero h1,.ladder-story h2{color:#fff}
.section-head h2{text-wrap:balance}
.section-head p{color:var(--on-dark-2)}
.eyebrow{color:var(--gold-2);letter-spacing:.16em}
.eyebrow::before,.section-head .eyebrow::after{background:linear-gradient(90deg,transparent,var(--gold));width:28px;height:1px}
.section-head .eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent)}
.eyebrow-light{color:var(--gold-2)}

/* ---------- hero ---------- */
.hero{background:
  radial-gradient(900px 560px at 88% -12%,rgba(27,181,193,.62),transparent 62%),
  radial-gradient(700px 500px at -10% 112%,rgba(19,163,176,.55),transparent 60%),
  radial-gradient(500px 300px at 40% 40%,rgba(111,227,236,.08),transparent 70%),
  linear-gradient(160deg,var(--tq-950) 0%,var(--tq-850) 45%,var(--tq-700) 100%)}
.hero::before{background-image:linear-gradient(rgba(180,240,245,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(180,240,245,.06) 1px,transparent 1px)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(216,180,106,.5),transparent);pointer-events:none}
.pill{background:rgba(255,255,255,.07);border-color:rgba(216,180,106,.38);color:var(--gold-2);box-shadow:none}
.pill-dot{background:var(--tq-bright);box-shadow:0 0 0 4px rgba(111,227,236,.18),0 0 12px rgba(111,227,236,.8)}
.hl{background:linear-gradient(90deg,#7ff0f6 0%,#42cad7 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.lead{color:var(--on-dark-2)}
.hero-card{background:var(--pearl);border:1px solid rgba(255,255,255,.7);box-shadow:var(--sh-lux),0 0 0 6px rgba(255,255,255,.04),0 0 80px -20px rgba(66,202,215,.55)}
.trust{background:var(--glass);border:1px solid var(--glass-line);box-shadow:0 20px 50px -24px rgba(0,0,0,.55)}
.trust li+li{border-left-color:rgba(160,236,242,.14)}
.trust .i{background:rgba(66,202,215,.14);color:var(--tq-bright)}
.trust b{color:#fff}
.trust span{color:var(--on-dark-3)}

/* ---------- section backgrounds ---------- */
.section{background:
  radial-gradient(800px 420px at 100% 0%,rgba(27,181,193,.34),transparent 60%),
  radial-gradient(600px 360px at 0% 100%,rgba(19,163,176,.18),transparent 62%),
  linear-gradient(180deg,var(--tq-700) 0%,var(--tq-800) 100%)}
.alt{background:
  radial-gradient(760px 420px at 0% 0%,rgba(27,181,193,.30),transparent 60%),
  radial-gradient(600px 380px at 100% 100%,rgba(19,163,176,.30),transparent 60%),
  linear-gradient(180deg,var(--tq-900) 0%,var(--tq-850) 100%);border-top:1px solid rgba(160,236,242,.08);border-bottom:1px solid rgba(160,236,242,.08)}
.ladder-sec{background:
  radial-gradient(700px 460px at 90% 30%,rgba(27,181,193,.30),transparent 62%),
  linear-gradient(180deg,#0f707c 0%,var(--tq-700) 100%)}

/* ---------- glass cards (simple text cards on dark) ---------- */
.card,.steps li,.hook{background:var(--glass);border:1px solid var(--glass-line);box-shadow:0 18px 40px -22px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.card:hover{border-color:rgba(111,227,236,.42);box-shadow:0 24px 50px -22px rgba(0,0,0,.65),0 0 0 1px rgba(111,227,236,.12),inset 0 1px 0 rgba(255,255,255,.1)}
.card h3,.steps h3{color:#fff}
.card p,.steps p{color:var(--on-dark-2)}
.ic,.hook-ic,.card.pain .ic{background:rgba(66,202,215,.14);color:var(--tq-bright);border-color:rgba(111,227,236,.28)}
.num{background:rgba(216,180,106,.12);color:var(--gold-2);border-color:rgba(216,180,106,.35)}
.hook p{color:#fff}
.answer{border-left-color:var(--gold)}
.answer p{color:var(--on-dark-2)}
.answer b{color:#fff}
.big-quote{color:var(--on-dark-2)}
.big-quote b{color:var(--tq-bright)}
.callout{background:var(--glass);border:1px solid var(--glass-line);border-left:3px solid var(--gold);box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.callout h3{color:#fff}
.callout p{color:var(--on-dark-2)}
.callout-icon{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--tq-ink)}

/* ---------- v2: data cards as translucent glass (see block at end of file) ---------- */
.example{border:1px dashed rgba(216,180,106,.55)}
.s4 .lbar{background:var(--tq-900)} .s3 .lbar{background:#0d4a55} .s2 .lbar{background:#2f6b76}
.lbadge,.lbadge::after{background:var(--tq-900)} .lbadge::after{background:none;border-top-color:var(--tq-900)}
.ladder{border-bottom-color:var(--tq-900)}
.combo-plus{background:linear-gradient(135deg,var(--gold-2),var(--gold));border-color:transparent;color:var(--tq-ink);box-shadow:0 8px 20px -8px rgba(216,180,106,.7)}
.combo-result{background:
  radial-gradient(500px 260px at 100% 0%,rgba(66,202,215,.25),transparent 65%),
  linear-gradient(135deg,var(--tq-950) 0%,#06505a 100%);border:1px solid rgba(216,180,106,.32);color:var(--on-dark-2);box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
.combo-eq{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--tq-ink)}
.combo-goals span{background:rgba(255,255,255,.06);border-color:rgba(160,236,242,.2)}
.combo-goals em{background:var(--tq-bright);color:var(--tq-ink)}
.combo-note{color:var(--on-dark-3)}

/* calculator accents (logic untouched) */
.stepno{background:linear-gradient(135deg,var(--tq-700),var(--tq-900));box-shadow:0 0 0 2px rgba(66,202,215,.22)}
.be-tip{background:linear-gradient(135deg,var(--tq-900),var(--tq-700));color:#d7f2f4}
.btn-pdf{background:linear-gradient(135deg,var(--tq-800) 0%,var(--tq-900) 100%);color:#fff;box-shadow:0 12px 26px -10px rgba(3,42,48,.7),inset 0 1px 0 rgba(255,255,255,.12);border:1px solid rgba(216,180,106,.45)}
.btn-pdf:hover{background:linear-gradient(135deg,var(--tq-700) 0%,var(--tq-850) 100%);color:#fff}
.be-export{border-top:3px solid var(--gold)}
.ta-flow li>span{background:var(--tq-800)}


/* dashboard mock */
.dash-top{background:linear-gradient(90deg,var(--tq-950),var(--tq-800))}
.dash-title em{color:var(--tq-bright)}

/* FAQ */


/* ---------- contact ---------- */
.cta{background:
  radial-gradient(800px 480px at 100% 0%,rgba(27,181,193,.50),transparent 60%),
  radial-gradient(600px 420px at 0% 100%,rgba(216,180,106,.10),transparent 60%),
  linear-gradient(160deg,var(--tq-950) 0%,var(--tq-800) 100%);color:var(--on-dark-2)}
.cta-lead{color:var(--on-dark-2)}
.commit{background:rgba(255,255,255,.05);border:1px solid rgba(216,180,106,.3)}
.commit b .i{color:var(--gold-2)}
.company small{color:var(--on-dark-3)}
.company-ic{background:rgba(66,202,215,.16);color:var(--tq-bright)}
.contact-list .i{color:var(--tq-bright)}
.contact-list li{border-bottom-color:rgba(160,236,242,.1)}
.contact-list a{text-decoration-color:rgba(111,227,236,.55)}
.form{box-shadow:var(--sh-lux),0 0 90px -30px rgba(66,202,215,.6)}

/* ---------- footer ---------- */
.footer{background:var(--tq-950);color:var(--on-dark-3);border-top:1px solid rgba(216,180,106,.22)}
.footer .small{color:rgba(214,240,243,.78);border-top-color:rgba(160,236,242,.1)}

/* ---------- promo slots on dark ---------- */
.tqp-banner{background:linear-gradient(90deg,var(--tq-950),var(--tq-700))}
.tqp-promo .tqp-link{border-color:rgba(255,255,255,.6);box-shadow:var(--sh-lux)}

/* ---------- presentation mode ---------- */
body.presenting{background:var(--tq-900)}
body.presenting .pres-bar{background:rgba(2,28,32,.94);border-color:rgba(216,180,106,.3)}
.pres-progress div{background:linear-gradient(90deg,var(--gold),var(--tq-bright))}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav-links{background:var(--tq-900);border-bottom:1px solid rgba(160,236,242,.12);box-shadow:0 24px 40px -10px rgba(0,0,0,.6)}
  .nav-links a:not(.btn){color:var(--on-dark)}
}
@media (max-width:980px){
  .trust li:nth-child(n+3){border-top-color:rgba(160,236,242,.14)}
}
@media (max-width:640px){
  .trust li+li{border-top-color:rgba(160,236,242,.14)}
}
@media (max-width:760px){
  .m-cta{background:rgba(3,42,48,.95);border-top:1px solid rgba(160,236,242,.16);box-shadow:0 -10px 30px rgba(0,0,0,.35)}
}
@media (hover:none){.nav-links a:not(.btn):hover{background:none}}


/* =========================================================
   v2 — "trong" (transparent glass) data cards
   Previous solid-white version: theme-turquoise.v1.css
   ========================================================= */
.hero-card,.ladder-visual,.combo-col,.calc,.example,.dash,.faq-list,.form{
  --ink:#f3fdfe; --text:rgba(236,251,252,.95); --muted:rgba(226,247,249,.94); --subtle:rgba(216,243,246,.84);
  --line:rgba(170,238,244,.16); --line-2:rgba(170,238,244,.30); --alt:rgba(255,255,255,.07);
  --teal:#42cad7; --teal-d:#9af2f7; --teal-50:rgba(66,202,215,.16); --teal-100:rgba(111,227,236,.34);
  --navy:#053f47; --navy-3:#c9f3f6;
  --ok:#6ee7b7; --ok-bg:rgba(52,211,153,.14); --warn:#fdba74; --warn-bg:rgba(251,146,60,.14);
  --bad:#ffc4c4; --bad-bg:rgba(248,113,113,.15); --amber:#f1d9a2; --amber-bg:rgba(216,180,106,.15);
  background:linear-gradient(160deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 100%),rgba(4,46,53,.40);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(180,240,245,.26);
  box-shadow:0 24px 60px -26px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.16);
  color:var(--text)}
.hero-card{box-shadow:0 30px 70px -26px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.18),0 0 80px -24px rgba(66,202,215,.5)}
.form{box-shadow:0 30px 70px -26px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.18),0 0 90px -30px rgba(66,202,215,.55)}
.example{border:1px dashed rgba(216,180,106,.55)}
.calc .calc,.be-after .example{-webkit-backdrop-filter:none;backdrop-filter:none}

/* small tags (MINH HỌA / DEMO) — gold, sparing */
.tag,.tag-demo{background:rgba(216,180,106,.14);color:var(--gold-2);border-color:rgba(216,180,106,.45)}

/* hero card */
.seg-rest{background:rgba(255,255,255,.12);color:#dff8fa}
.seg-be{color:var(--tq-ink)}
.hc-foot{background:rgba(66,202,215,.14);color:#aef4f8;border:1px solid rgba(111,227,236,.22)}

/* ghost button inside glass cards */
.calc .btn-ghost,.dash .btn-ghost,.form .btn-ghost,.example .btn-ghost{background:rgba(255,255,255,.08);color:#effcfd;border-color:rgba(180,240,245,.38);box-shadow:none}
.calc .btn-ghost:hover,.dash .btn-ghost:hover,.form .btn-ghost:hover{background:rgba(255,255,255,.15);border-color:#6fe3ec;color:#fff}

/* inputs / selects / textareas — a bit more opaque so they read as fields */
.calc input,.form input,.form select,.form textarea,.ex-grid select{
  background-color:rgba(2,28,32,.38);color:#fff;border:1px solid rgba(180,240,245,.34);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.calc input::placeholder,.form input::placeholder,.form textarea::placeholder{color:rgba(214,242,245,.55);opacity:1}
.calc input:hover,.form input:hover,.form select:hover,.form textarea:hover{border-color:rgba(180,240,245,.55)}
.calc input:focus,.form input:focus,.form select:focus,.form textarea:focus,.ex-grid select:focus{
  outline:none;background-color:rgba(2,28,32,.5);border-color:#6fe3ec;box-shadow:0 0 0 3px rgba(111,227,236,.35)}
.form select,.ex-grid select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23bff3f7' stroke-width='1.6'/%3E%3C/svg%3E")}
.form select:invalid,.ex-grid select:invalid{color:rgba(214,242,245,.6)}
.form select option,.ex-grid select option{color:#0b1f33;background:#fff}
.calc input:-webkit-autofill,.form input:-webkit-autofill{-webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 1000px #06424a inset;caret-color:#fff}
.form .err,.ex-grid input.err,.ex-grid select.err{border-color:#ff8080;box-shadow:0 0 0 3px rgba(255,128,128,.3)}

/* room-type rows & steppers */
.rt{background:rgba(255,255,255,.05)}
.rt:hover{border-color:rgba(180,240,245,.4)}
.stp{background:rgba(2,28,32,.38);border-color:rgba(180,240,245,.34)}
.be-app .stp input{background:transparent;box-shadow:none;border:0}
.be-app .stp input:focus{box-shadow:inset 0 0 0 2px #6fe3ec}
.stp-b{background:rgba(255,255,255,.10);color:#fff}
.stp-b:hover{background:rgba(111,227,236,.28);color:#fff}
.rt-del:hover{border-color:rgba(255,155,155,.4)}

/* progress / bars */
.pbar,.brk-bar{background:rgba(255,255,255,.14)}
.pbar-seg i{border-right-color:rgba(3,42,48,.85)}
.pbar-mark{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.6)}
.pbar-mark span{background:#fff;color:var(--tq-ink)}
.be-tip{background:rgba(2,28,32,.5);border:1px solid rgba(160,236,242,.18);color:#d7f2f4}
.sq-self{background:rgba(255,255,255,.16)}

/* status chips & messages, recoloured for dark glass */
.st.ok,.ex-msg.ok,.form-msg.ok{background:rgba(52,211,153,.14);color:#a7f3d0;border:1px solid rgba(110,231,183,.38)}
.st.short{background:rgba(251,146,60,.14);color:#fed7aa;border:1px solid rgba(253,186,116,.4)}
.st.bad,.ex-msg.bad,.form-msg.err{background:rgba(248,113,113,.15);color:#fecaca;border:1px solid rgba(255,155,155,.42)}
.cap-badge.bad{background:rgba(248,113,113,.18)}
.be-cap.over{border-color:rgba(255,155,155,.6);box-shadow:0 0 0 4px rgba(248,113,113,.12)}

/* dashboard table */
.dash tbody tr:hover td{background:rgba(255,255,255,.05)}
.qty.muted{background:rgba(255,255,255,.06)}
.qty.zero{border-color:rgba(255,155,155,.42)}

/* FAQ */
summary::after{background:rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6fbfc' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat}
details[open] summary::after{background-color:rgba(66,202,215,.25)}
summary:hover{color:var(--tq-bright)}

/* ladder visual */
.ladder-visual .lc{background:rgba(255,255,255,.06)}
.ladder-visual .lc-tq{background:rgba(66,202,215,.16)}
.ladder{border-bottom-color:rgba(220,247,249,.6);background-image:linear-gradient(to top,rgba(220,247,249,.08) 1px,transparent 1px)}
.s2 .lbar,.s3 .lbar,.s4 .lbar{box-shadow:inset 0 0 0 1px rgba(180,240,245,.18)}
.lbadge{border:1px solid rgba(180,240,245,.25)}

/* browsers without backdrop-filter: slightly denser fill */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-card,.ladder-visual,.combo-col,.calc,.example,.dash,.faq-list,.form{background:rgba(6,72,82,.82)}
}

/* v2b — brighter backgrounds: legibility helpers */
.hero h1,.section h2,.ladder-story h2,.cta h2,.card h3,.steps h3{text-shadow:0 1px 2px rgba(2,30,35,.35),0 0 24px rgba(2,30,35,.18)}
.lead,.section-head p,.cta-lead,.card p,.steps p,.answer p,.callout p{text-shadow:0 1px 1px rgba(2,30,35,.28)}
.hl{text-shadow:none;filter:none}
.hl{background:linear-gradient(90deg,#a6f6fa 0%,#6fe3ec 100%);-webkit-background-clip:text;background-clip:text}
.footer{background:#05343b}
.eyebrow,.num,.tag,.tag-demo{text-shadow:0 1px 1px rgba(2,30,35,.45)}
.num,.tag,.tag-demo{background:rgba(2,30,35,.32)}
.seg-rest{background:rgba(2,30,35,.32)}
.combo-tag,.combo-tag.ta{background:rgba(2,30,35,.38);color:#bff6f9;border:1px solid rgba(111,227,236,.3)}
.s1 .lbar{color:var(--tq-ink)}
.s1 .lbar span{opacity:1}
.cap-badge.ok{background:rgba(2,30,35,.35);color:#b5f5d9}
.cap-badge.bad{color:#ffd0d0}
.btn-light{background:rgba(255,255,255,.10);color:#f3fdfe;border:1px solid rgba(180,240,245,.40);box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn-light:hover{background:rgba(255,255,255,.18);border-color:#6fe3ec;color:#fff}

/* =========================================================
   v3 — hotel room photo as the whole-page backdrop
   Gradient-only version: theme-turquoise.v2.css
   Coastal-photo hero version: theme-turquoise.v3-bien.css
   ========================================================= */
:root{
  --bg-img:url("assets/bg/room-tq-desktop.jpg");
  --bg-img-set:image-set(url("assets/bg/room-tq-desktop.webp") type("image/webp"),url("assets/bg/room-tq-desktop.jpg") type("image/jpeg"));
  --veil:linear-gradient(90deg,rgba(4,46,54,.86) 0%,rgba(5,56,65,.78) 42%,rgba(7,66,76,.62) 72%,rgba(8,72,82,.56) 100%),linear-gradient(0deg,rgba(6,58,66,.22),rgba(6,58,66,.22));
}
@media (max-width:767px){:root{
  --bg-img:url("assets/bg/room-tq-mobile.jpg");
  --bg-img-set:image-set(url("assets/bg/room-tq-mobile.webp") type("image/webp"),url("assets/bg/room-tq-mobile.jpg") type("image/jpeg"));
  --veil:linear-gradient(180deg,rgba(4,44,52,.80) 0%,rgba(5,54,63,.76) 50%,rgba(5,52,60,.80) 100%);
}}
/* fixed full-viewport layer instead of background-attachment:fixed (smooth on iOS/Android) */
html{background:#0a4a53}
body{background:transparent}
body::before{content:"";position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:-1;pointer-events:none;
  background:var(--veil),var(--bg-img) center/cover no-repeat,#0a4a53}
@supports (background-image:image-set(url("x.webp") type("image/webp"))){
  body::before{background:var(--veil),var(--bg-img-set) center/cover no-repeat,#0a4a53}
}
body.presenting{background:#0a4a53}

/* sections: transparent with a light teal tint so the room shows through */
.hero{background:linear-gradient(90deg,rgba(3,38,45,.30) 0%,rgba(3,38,45,0) 60%),linear-gradient(180deg,rgba(3,38,45,0) 70%,rgba(3,38,45,.25) 100%)}
.hero::before{opacity:.25}
.section{background:linear-gradient(180deg,rgba(8,70,80,.26) 0%,rgba(8,70,80,.34) 100%)}
.alt{background:linear-gradient(180deg,rgba(4,46,54,.40) 0%,rgba(4,46,54,.46) 100%);border-top:1px solid rgba(160,236,242,.10);border-bottom:1px solid rgba(160,236,242,.10)}
.ladder-sec{background:linear-gradient(180deg,rgba(9,80,90,.24) 0%,rgba(8,70,80,.32) 100%)}
.cta{background:radial-gradient(800px 480px at 100% 0%,rgba(27,181,193,.18),transparent 60%),linear-gradient(160deg,rgba(3,38,45,.58) 0%,rgba(6,58,66,.48) 100%)}
.footer{background:rgba(3,38,45,.94)}

/* glass a little denser over the photo */
.hero-card,.ladder-visual,.combo-col,.calc,.example,.dash,.faq-list,.form{background:linear-gradient(160deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.035) 100%),rgba(4,44,52,.50)}
.card,.steps li,.hook,.trust,.callout{background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03)),rgba(4,44,52,.40)}
@media (max-width:767px){
  .hero-card,.ladder-visual,.combo-col,.calc,.example,.dash,.faq-list,.form,.card,.steps li,.hook,.trust,.callout,.btn-light{-webkit-backdrop-filter:blur(8px) saturate(130%);backdrop-filter:blur(8px) saturate(130%)}
}

/* CTA anchor lands on the form */
#signupForm{scroll-margin-top:calc(var(--nav-h, 64px) + 16px)}

/* =========================================================
   v4 — brighter room: light turquoise veil, contrast placed behind text
   Previous darker evening version: theme-turquoise.v3-dark.css
   ========================================================= */
:root{
  --veil:linear-gradient(90deg,rgba(8,92,102,.50) 0%,rgba(18,128,138,.30) 48%,rgba(40,160,170,.16) 100%),linear-gradient(0deg,rgba(60,190,200,.10),rgba(60,190,200,.10));
}
@media (max-width:767px){:root{
  --veil:linear-gradient(180deg,rgba(10,96,106,.36) 0%,rgba(22,132,142,.24) 50%,rgba(16,116,126,.32) 100%);
}}
.hero{background:none}
.section{background:linear-gradient(180deg,rgba(30,150,160,.06),rgba(30,150,160,.10))}
.alt{background:linear-gradient(180deg,rgba(10,90,100,.12),rgba(10,90,100,.16))}
.ladder-sec{background:linear-gradient(180deg,rgba(30,150,160,.06),rgba(30,150,160,.10))}
.cta{background:radial-gradient(800px 480px at 100% 0%,rgba(66,202,215,.16),transparent 60%),linear-gradient(160deg,rgba(6,70,80,.22),rgba(10,90,100,.14))}
.footer{background:rgba(4,48,56,.92)}

/* text blocks that sit straight on the photo get their own soft glass */
.hero-copy{position:relative;isolation:isolate}
.hero-copy::before{content:"";position:absolute;z-index:-1;inset:-34px -40px -34px -48px;border-radius:32px;
  background:radial-gradient(120% 100% at 30% 50%,rgba(3,42,50,.74) 0%,rgba(3,42,50,.62) 55%,rgba(3,42,50,0) 100%);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none}
.section-head{position:relative;isolation:isolate}
.section-head::before{content:"";position:absolute;z-index:-1;inset:-22px -30px;border-radius:26px;
  background:radial-gradient(110% 120% at 50% 50%,rgba(3,42,50,.70) 0%,rgba(3,42,50,.58) 60%,rgba(3,42,50,0) 100%);pointer-events:none}
h1,h2,.lead,.section-head p,.eyebrow{text-shadow:0 1px 2px rgba(2,30,35,.55),0 2px 14px rgba(2,30,35,.45)}
.hl{text-shadow:none}

/* denser glass for cards and the calculator/form */
.hero-card,.ladder-visual,.combo-col,.calc,.example,.dash,.faq-list,.form{background:linear-gradient(160deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 100%),rgba(4,46,54,.66)}
.card,.steps li,.hook,.trust,.callout{background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.035)),rgba(4,46,54,.60)}
@media (max-width:767px){
  .hero-copy::before{inset:-18px -14px;border-radius:24px;background:rgba(3,42,50,.62)}
  .section-head::before{inset:-16px -14px;border-radius:22px;background:rgba(3,42,50,.62)}
}
.hero-card{--subtle:rgba(230,249,251,.95)}
/* v4: glass behind free-standing text over the bright photo */
.answer,.big-quote{background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03)),rgba(4,46,54,.66);border:1px solid rgba(160,236,242,.18);border-radius:18px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.answer{padding:16px 20px}
.big-quote{padding:18px 26px}
.cta-inner>div:first-child{background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03)),rgba(4,46,54,.70);border:1px solid rgba(160,236,242,.20);border-radius:22px;padding:30px 30px 28px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-light{background:rgba(4,46,54,.62)}
.btn-light:hover{background:rgba(10,80,90,.72)}
.tag-pdf{background:rgba(2,30,35,.45)}
.calc{background:linear-gradient(160deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 100%),rgba(4,46,54,.72)}
@media (max-width:767px){.cta-inner>div:first-child{padding:22px 18px 20px;border-radius:18px}}
.ladder-sec .eyebrow{background:rgba(3,42,50,.58);padding:5px 14px;border-radius:999px}

/* ===== v5: travelQ runner photo — desktop: place the runner in the gap below the hero card, above the feature strip ===== */
@media (min-width:981px){
  :root{
    --bg-ih:max(1040px,100lvh,56.25vw);
    --bg-iw:calc(var(--bg-ih) * 16 / 9);
    --bg-pos:clamp(calc(100vw - var(--bg-iw)),calc(50vw + 358px - .615 * var(--bg-iw)),0px) clamp(calc(100lvh - var(--bg-ih)),calc(642px - .645 * var(--bg-ih)),0px);
  }
  body::before{background:var(--veil),var(--bg-img) var(--bg-pos)/var(--bg-iw) var(--bg-ih) no-repeat,#0a4a53}
  @supports (background-image:image-set(url("x.webp") type("image/webp"))){
    body::before{background:var(--veil),var(--bg-img-set) var(--bg-pos)/var(--bg-iw) var(--bg-ih) no-repeat,#0a4a53}
  }
}
/* v5 readability: the new photo has a bright white bed, so lift the small text and deepen glass a little where it sits over it */
.dash .lock{color:#ffd6d6!important}
.dash thead th{color:#e8fbfc}
@media (max-width:980px){
  .hero-card,.dash{background:linear-gradient(160deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 100%),rgba(4,42,50,.74)}
  .trust{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),rgba(4,42,50,.70)}
  .trust span{color:rgba(232,250,252,.94)}
}