@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --ink: #092c4e;
  --ink-soft: #315a78;
  --blue: #0875bd;
  --blue-deep: #07538e;
  --cyan: #2fc2c5;
  --mint: #68d8bb;
  --sky: #ebf9ff;
  --mist: #f6fbfd;
  --line: #cce4ef;
  --white: #fff;
  --shadow: 0 18px 50px rgba(17, 91, 133, .12);
  --serif: "Libre Caslon Text", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; top: -100px; left: 18px; z-index: 1000; background: var(--ink); color: white; padding: 12px 18px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.page-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.narrow { max-width: 890px; }
.centered { text-align: center; }
.section { position: relative; padding: 104px 0; overflow: hidden; }
.section-heading { max-width: 760px; margin: 0 auto 46px; }
.section-heading p:last-child, .section-lead { color: var(--ink-soft); font-size: 1.05rem; }
.section-kicker, .eyebrow { margin: 0 0 14px; color: var(--blue); font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.section-kicker.light { color: #98f1eb; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h1, h2 { font-family: var(--serif); }
h2 { margin-bottom: 18px; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.1; letter-spacing: -.035em; }
h3 { line-height: 1.2; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: 78px; transition: background .25s, box-shadow .25s, height .25s; }
.site-header.scrolled { height: 70px; background: rgba(255,255,255,.91); box-shadow: 0 5px 30px rgba(8,66,101,.09); backdrop-filter: blur(18px); }
.nav-shell { width: min(1240px, calc(100% - 40px)); height: 100%; margin: auto; display: flex; align-items: center; gap: 26px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: 700 1.13rem/1 var(--serif); text-decoration: none; white-space: nowrap; }
.brand-mark { width: 40px; height: 40px; flex: none; }
.nav-links { margin-left: auto; display: flex; gap: 30px; align-items: center; }
.nav-links a { position: relative; font-size: .84rem; font-weight: 600; text-decoration: none; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--cyan); transition: right .2s; }
.nav-links a:hover::after, .nav-links a:focus-visible::after { right: 0; }
.nav-cta { margin-left: 10px; padding: 11px 20px; border-radius: 999px; color: white; background: linear-gradient(100deg, var(--blue-deep), var(--cyan)); box-shadow: 0 8px 20px rgba(2,113,171,.24); font-size: .82rem; font-weight: 700; text-decoration: none; }
.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); padding: 12px; }
.menu-toggle span { display: block; height: 2px; margin: 4px 0; background: var(--ink); transition: transform .2s, opacity .2s; }

.hero { position: relative; min-height: 790px; height: 94vh; max-height: 940px; display: grid; align-items: center; overflow: hidden; background: #eaf8ff; }
.hero-image, .hero-shade { position: absolute; inset: 0; }
.hero-image { background: url("assets/letsbalance-hero.webp") center/cover no-repeat; }
.hero-shade { background: linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.94) 23%, rgba(255,255,255,.52) 46%, rgba(255,255,255,.02) 69%), linear-gradient(0deg, rgba(255,255,255,.92) 0%, transparent 22%); }
.hero-content { position: relative; z-index: 2; padding-top: 74px; }
.hero-content > * { max-width: 650px; }
.hero .eyebrow { color: #257aa5; }
.hero h1 { margin: 0 0 20px; font-size: clamp(3.1rem, 5.1vw, 5.45rem); line-height: 1.03; letter-spacing: -.055em; }
.hero h1 em { display: block; color: var(--blue); font-style: normal; }
.hero-lead { margin-bottom: 28px; max-width: 620px; color: #315d7c; font-size: clamp(1rem, 1.4vw, 1.19rem); line-height: 1.6; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { min-height: 50px; padding: 13px 23px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: linear-gradient(100deg, #0563a7, #20c5b8); box-shadow: 0 12px 24px rgba(7,112,166,.2); }
.button-ghost { border: 1px solid #8cbfd8; background: rgba(255,255,255,.75); color: var(--ink); }
.play-dot { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .58rem; padding-left: 1px; }
.hero-proof { margin-top: 34px; display: flex; gap: 26px; flex-wrap: wrap; color: #3d6e89; font-size: .78rem; }
.hero-proof span { display: flex; align-items: center; gap: 7px; }
.hero-proof b { color: var(--blue); font: 700 1.1rem var(--serif); }
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 22px; display: flex; gap: 9px; align-items: center; transform: translateX(-50%); color: #4d7b94; font-size: .67rem; letter-spacing: .15em; text-transform: uppercase; }
.scroll-cue span { display: block; width: 1px; height: 28px; background: #5fa9c9; animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { transform: scaleY(.45); opacity: .35; } }

.intro-section { padding-top: 94px; background: linear-gradient(180deg, #fff, #f9fdff); }
.intro-section h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); }
.section-lead { margin: auto; }
.purpose-line { margin: 33px auto 0; display: flex; align-items: center; gap: 14px; justify-content: center; color: #3a83a5; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.purpose-line span { width: 70px; height: 1px; background: #9ed4e1; }
.botanical { position: absolute; width: 260px; height: 220px; bottom: -65px; opacity: .32; background: radial-gradient(ellipse at 50% 100%, #72ccb1 0 18%, transparent 19%), radial-gradient(ellipse at 20% 55%, #86cbbf 0 17%, transparent 18%), radial-gradient(ellipse at 78% 45%, #59b9c9 0 16%, transparent 17%); filter: blur(.2px); }
.botanical-left { left: -80px; transform: rotate(24deg); }
.botanical-right { right: -80px; transform: rotate(-24deg); }

.facts-section { background: linear-gradient(180deg, #f5fbfe, #eef9fd 82%, #fff); }
.fact-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.fact-card { position: relative; min-height: 220px; padding: 28px 20px 22px; border: 1px solid rgba(118,174,200,.22); border-radius: 16px; background: rgba(255,255,255,.85); box-shadow: 0 8px 30px rgba(25,94,128,.055); text-align: center; transition: transform .22s, box-shadow .22s; }
.fact-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.fact-number { position: absolute; top: 13px; left: 15px; color: var(--blue); font-weight: 700; font-size: .78rem; }
.icon-bubble { width: 54px; height: 54px; margin: 0 auto 15px; display: grid; place-items: center; border-radius: 50%; font: 700 1.55rem var(--serif); }
.icon-bubble.blue { color: #0b6fba; background: #e4f4fd; }.icon-bubble.teal { color: #168d94; background: #e5f8f8; }.icon-bubble.sky { color: #318cb2; background: #e9f7fc; }.icon-bubble.mint { color: #2d9d82; background: #e5f8f2; }.icon-bubble.green { color: #2d9b6b; background: #e9f8ef; }.icon-bubble.sun { color: #e69b29; background: #fff4df; }.icon-bubble.coral { color: #e36568; background: #ffeded; }.icon-bubble.violet { color: #955bc0; background: #f5ecfb; }
.fact-card h3 { margin: 0 0 8px; font-size: 1rem; }
.fact-card p { margin: 0; color: var(--ink-soft); font-size: .84rem; line-height: 1.45; }

.how-section { padding-bottom: 0; background: white; }
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.how-card { position: relative; min-height: 225px; padding: 28px 24px; border: 1px solid #d5e8f0; border-radius: 16px; text-align: center; background: linear-gradient(180deg, white, #f9fcfd); }
.how-card > span { position: absolute; top: 13px; left: 13px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: white; background: #4897b8; font-weight: 700; font-size: .8rem; }
.how-icon { margin: 8px 0 16px; color: #1b91c6; font: 700 2.8rem/1 var(--serif); }
.how-card h3 { margin-bottom: 9px; font-size: 1.04rem; }
.how-card p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.wave-demo { margin-top: 38px; padding: 44px 0 54px; color: white; background: radial-gradient(circle at 78% 5%, rgba(80,224,211,.2), transparent 28%), linear-gradient(145deg, #062f54, #075a80 57%, #07858c); overflow: hidden; }
.wave-demo-head { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 24px; }
.wave-demo-head .section-kicker { margin-bottom: 7px; color: #7ce5df; }
.wave-demo-head h3 { margin: 0; color: white; font: 700 clamp(1.7rem, 3vw, 2.45rem)/1.1 var(--serif); letter-spacing: -.025em; }
.wave-demo-head h3 span { color: #79e3db; }
.wave-demo-head p:last-child { max-width: 650px; margin: 10px 0 0; color: #cae8f0; }
.wave-demo-controls { display: flex; gap: 9px; flex: 0 0 auto; }
.wave-demo-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 100px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: white; background: rgba(255,255,255,.09); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.wave-demo-controls button:hover { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.55); transform: translateY(-1px); }
.wave-demo-controls button:focus-visible { outline: 3px solid #7ce5df; outline-offset: 3px; }
.wave-demo-stage { position: relative; overflow: hidden; border: 1px solid rgba(174,232,241,.28); border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.035)); box-shadow: inset 0 1px rgba(255,255,255,.16), 0 22px 55px rgba(0,25,44,.22); }
.wave-demo-stage::after { content: ""; position: absolute; inset: auto -5% -56% 34%; height: 68%; border-radius: 50%; background: rgba(61,210,195,.1); filter: blur(18px); pointer-events: none; }
.wave-demo-svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.demo-water { fill: rgba(126,226,228,.08); }
.sea-line { fill: none; stroke: #9acada; stroke-width: 2; stroke-dasharray: 9 9; opacity: .75; }
.sea-copy { fill: #b9dce7; font: 700 15px var(--sans); letter-spacing: .12em; text-anchor: middle; }
.wave-shape { transform-box: view-box; transform-origin: 600px 240px; transform: scaleY(.32); }
.is-running .wave-shape { animation: wave-build 12s cubic-bezier(.45,.02,.22,1) infinite; }
.wave-fill { fill: url(#demoWaveFill); }
.wave-edge { fill: none; stroke: #57e0d5; stroke-width: 7; filter: drop-shadow(0 0 9px rgba(84,226,214,.45)); }
.wave-inner { fill: none; stroke: #24a7d2; stroke-width: 4; opacity: .9; }
.demo-label text { fill: white; font: 800 17px var(--sans); letter-spacing: .08em; text-anchor: middle; }
.demo-label .demo-label-small { fill: #afd8e4; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.money-token circle { fill: url(#demoToken); stroke: rgba(255,255,255,.86); stroke-width: 2; filter: url(#demoGlow); }
.money-token text { fill: white; font: 800 17px var(--sans); text-anchor: middle; }
.money-token .token-unit { font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.source-node rect, .community-node rect { fill: rgba(4,37,64,.88); stroke: rgba(141,224,227,.55); stroke-width: 2; }
.source-node text, .community-node text { fill: white; font: 800 14px var(--sans); letter-spacing: .11em; text-anchor: middle; }
.source-node .source-value, .community-node .community-value { fill: #94dcd9; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.gravity-route { fill: none; stroke: #8ce4dc; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 8 10; opacity: 0; }
.is-running .gravity-route { animation: gravity-route 12s linear infinite; }
.gravity-caption, .crest-caption { position: absolute; z-index: 2; pointer-events: none; opacity: 0; }
.gravity-caption { top: 37%; right: 26%; display: flex; flex-direction: column; align-items: center; color: #8ce4dc; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.gravity-caption span { font-size: 1.7rem; line-height: 1; }
.crest-caption { top: 22%; left: 60%; display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid rgba(255,255,255,.26); border-radius: 10px; color: white; background: rgba(4,42,69,.78); font-size: .68rem; }
.crest-caption b { color: #86e4db; letter-spacing: .08em; }
.crest-caption span { color: #c4e3eb; }
.is-running .gravity-caption { animation: gravity-copy 12s ease infinite; }
.is-running .crest-caption { animation: crest-copy 12s ease infinite; }
.wave-demo-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.wave-demo-step { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; min-height: 76px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; color: #d7edf3; background: rgba(255,255,255,.055); transition: border-color .2s, background .2s; }
.wave-demo-step > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #88e3dc; background: rgba(104,224,214,.13); font-size: .78rem; font-weight: 800; }
.wave-demo-step b, .wave-demo-step small { display: block; }
.wave-demo-step b { color: white; font-size: .83rem; line-height: 1.25; }
.wave-demo-step small { margin-top: 3px; color: #acd0db; font-size: .71rem; line-height: 1.3; }
.is-running .step-one { animation: wave-step-one 12s ease infinite; }
.is-running .step-two { animation: wave-step-two 12s ease infinite; }
.is-running .step-three { animation: wave-step-three 12s ease infinite; }
.is-running .step-four { animation: wave-step-four 12s ease infinite; }
.wave-demo.is-paused .wave-shape, .wave-demo.is-paused .gravity-route, .wave-demo.is-paused .gravity-caption, .wave-demo.is-paused .crest-caption, .wave-demo.is-paused .wave-demo-step { animation-play-state: paused; }

@keyframes wave-build {
  0%, 23% { transform: scaleY(.32); }
  45%, 94% { transform: scaleY(1); }
  100% { transform: scaleY(.32); }
}
@keyframes crest-copy { 0%, 48%, 91%, 100% { opacity: 0; transform: translateY(8px); } 54%, 84% { opacity: 1; transform: translateY(0); } }
@keyframes gravity-copy { 0%, 59%, 91%, 100% { opacity: 0; transform: translateY(-7px); } 65%, 84% { opacity: 1; transform: translateY(0); } }
@keyframes gravity-route { 0%, 59% { opacity: 0; stroke-dashoffset: 70; } 64% { opacity: .8; } 87% { opacity: .8; stroke-dashoffset: 0; } 92%, 100% { opacity: 0; } }
@keyframes wave-step-one { 0%, 22% { border-color: #74ddd6; background: rgba(84,218,209,.19); transform: translateY(-2px); } 27%, 100% { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.055); transform: none; } }
@keyframes wave-step-two { 0%, 21%, 49%, 100% { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.055); transform: none; } 26%, 44% { border-color: #74ddd6; background: rgba(84,218,209,.19); transform: translateY(-2px); } }
@keyframes wave-step-three { 0%, 45%, 68%, 100% { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.055); transform: none; } 50%, 63% { border-color: #74ddd6; background: rgba(84,218,209,.19); transform: translateY(-2px); } }
@keyframes wave-step-four { 0%, 64%, 93%, 100% { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.055); transform: none; } 69%, 88% { border-color: #74ddd6; background: rgba(84,218,209,.19); transform: translateY(-2px); } }

.video-section { color: white; background: radial-gradient(circle at 85% 20%, rgba(64,208,196,.22), transparent 27%), linear-gradient(135deg, #07345b, #075e89 55%, #057d8b); }
.video-layout { display: grid; grid-template-columns: .8fr 1.4fr; gap: 64px; align-items: center; }
.video-copy h2 { font-size: clamp(2.2rem, 4vw, 3.7rem); }
.video-copy p { color: #d3edf6; }
.text-link { font-weight: 700; text-underline-offset: 5px; }.text-link.light { color: white; }
.video-frame { position: relative; overflow: hidden; border: 10px solid rgba(255,255,255,.14); border-radius: 24px; box-shadow: 0 30px 70px rgba(0,16,34,.35); aspect-ratio: 16/9; background: #021d31; }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.deep-section { background: linear-gradient(180deg, #f7fcfe, #fff 38%, #f5fbfd); }
.deep-panel { margin: 28px 0; padding: 48px; border: 1px solid #d6eaf1; border-radius: 28px; background: rgba(255,255,255,.94); box-shadow: 0 12px 45px rgba(21,87,122,.07); }
.deep-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 36px; }
.deep-heading > div { position: relative; padding-left: 42px; }
.deep-index { position: absolute; left: 0; top: 2px; color: #9bc9d8; font-weight: 700; }
.deep-heading .section-kicker { margin-bottom: 10px; }
.deep-heading h3 { margin: 0; font: 700 clamp(1.8rem, 3vw, 2.65rem)/1.12 var(--serif); letter-spacing: -.03em; }
.deep-heading > p { margin: 0; color: var(--ink-soft); }
.booking-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.booking-card { padding: 20px 16px; border-radius: 14px; background: #f1f9fc; }
.booking-card > span { display: block; min-height: 34px; color: var(--blue); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.booking-card > div { min-height: 66px; display: flex; flex-direction: column; justify-content: center; gap: 2px; font-size: .82rem; }
.booking-card i { color: var(--cyan); font-style: normal; }
.booking-card p { margin: 10px 0 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.45; }
.balance-equation { margin: 28px 0 0; display: flex; align-items: center; justify-content: center; gap: 13px; flex-wrap: wrap; }
.balance-equation span { padding: 10px 16px; border: 1px solid #c7e1ec; border-radius: 999px; background: white; }
.balance-equation b { color: #6aa8bd; }.balance-equation strong { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: white; background: linear-gradient(135deg, var(--blue), var(--cyan)); font-size: 1.3rem; }
.deep-note { margin: 28px 0 0; padding: 18px 22px; border-left: 3px solid var(--cyan); border-radius: 0 10px 10px 0; background: #edf9f8; color: var(--ink-soft); }

.timeline { position: relative; max-width: 940px; margin: 0 auto; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 22px; top: 25px; bottom: 25px; width: 1px; background: #aad6e1; }
.timeline li { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 24px; padding: 0 0 28px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li > span { position: relative; z-index: 1; width: 46px; height: 46px; display: grid; place-items: center; border: 5px solid white; border-radius: 50%; color: white; background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 0 0 1px #b6dce7; font-weight: 700; }
.timeline h4 { margin: 5px 0 5px; font-size: 1.05rem; }
.timeline p { margin: 0; color: var(--ink-soft); }

.step-picker { position: relative; display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; max-width: 720px; margin: 0 auto 24px; }
.step-picker::before { content: ""; position: absolute; left: 5%; right: 5%; top: 50%; height: 2px; z-index: 0; background: #cce5ed; }
.step-picker button { position: relative; z-index: 1; width: 44px; height: 44px; justify-self: center; border: 1px solid #9ecbd9; border-radius: 50%; color: var(--blue); background: white; font: 700 .86rem var(--sans); cursor: pointer; }
.step-picker button[aria-selected="true"] { color: white; border-color: var(--blue); background: var(--blue); box-shadow: 0 7px 18px rgba(8,117,189,.22); }
.step-summary { max-width: 760px; margin: 0 auto 24px; padding: 20px 24px; border-radius: 14px; background: linear-gradient(110deg, #e9f7fd, #edfaf7); text-align: center; }
.step-summary span { color: var(--blue); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.step-summary h4 { margin: 4px 0 4px; font: 700 1.4rem var(--serif); }
.step-summary p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.ledger-scroll { overflow-x: auto; border: 1px solid #d4e8ef; border-radius: 14px; }
.ledger-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: .78rem; }
.ledger-table th, .ledger-table td { padding: 13px 12px; border-bottom: 1px solid #e2eef2; text-align: center; }
.ledger-table thead th { color: white; background: #0d5f8b; white-space: nowrap; }
.ledger-table thead small { color: #aee5ec; font-size: .62rem; font-weight: 700; letter-spacing: .06em; }
.ledger-table tbody th { width: 220px; text-align: left; }
.ledger-table tbody tr { color: #496d82; transition: background .2s, color .2s; }
.ledger-table tbody tr.active { color: var(--ink); background: #eaf8fb; font-weight: 700; }
.ledger-table tbody tr:last-child > * { border-bottom: 0; }
.ledger-explainers { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ledger-explainers > div { padding: 20px; border-radius: 14px; background: #f4fafc; }
.ledger-explainers h4 { margin-bottom: 7px; color: var(--blue-deep); }
.ledger-explainers p { margin: 0; color: var(--ink-soft); font-size: .84rem; }

.gravity-principle { margin-bottom: 24px; padding: 18px 22px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; border: 1px solid #a9dbe5; border-radius: 18px; background: linear-gradient(100deg, #eaf9fd, #edfaf7); }
.principle-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: white; background: linear-gradient(135deg, var(--blue), var(--cyan)); font-size: 1.55rem; }
.gravity-principle small { display: block; margin-bottom: 2px; color: var(--blue); font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.gravity-principle strong { font-family: var(--serif); font-size: 1.16rem; }
.principle-flow { display: flex; gap: 9px; align-items: center; font-size: .77rem; }
.principle-flow span { padding: 7px 11px; border-radius: 999px; color: var(--blue-deep); background: white; font-weight: 700; box-shadow: 0 4px 12px rgba(10,92,128,.08); }
.principle-flow i { color: #2d90a9; font-style: normal; font-weight: 700; }

.gravity-states { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gravity-state { overflow: hidden; border: 1px solid #cce4ec; border-radius: 20px; background: white; box-shadow: 0 10px 30px rgba(18,87,119,.06); }
.gravity-state > header { min-height: 84px; padding: 17px 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: #f2f9fc; }
.state-number { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: white; background: #488fab; font-weight: 700; }
.gravity-state header small { display: block; margin-bottom: 2px; color: #5c8398; font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.gravity-state header h4 { margin: 0; font: 700 1.32rem var(--serif); }
.gravity-state header em { padding: 7px 10px; border-radius: 999px; color: #367589; background: #dceff4; font-size: .67rem; font-style: normal; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.at-cap-state header em { color: #08745f; background: #d9f4eb; }

.value-route { min-height: 84px; padding: 13px 16px; display: flex; align-items: stretch; justify-content: center; gap: 6px; border-top: 1px solid #e0eef2; border-bottom: 1px solid #d7e9ee; background: white; }
.value-route > span { min-width: 0; flex: 1; padding: 9px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; background: #f2f9fb; text-align: center; }
.value-route small { color: #668899; font-size: .61rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.value-route b { color: var(--blue-deep); font-size: .88rem; }
.value-route > i { display: grid; place-items: center; color: #6aaabd; font-style: normal; font-weight: 700; }
.value-route .route-crest { background: #def6ef; }.value-route .route-crest b { color: #078168; }
.cap-route { gap: 4px; }.cap-route > span { padding-inline: 4px; }.cap-route b { font-size: .8rem; }

.account-graph { height: 330px; display: grid; grid-template-rows: 134px 42px 154px; }
.account-graph .above-area, .account-graph .below-area { position: relative; overflow: hidden; }
.account-graph .above-area { display: flex; align-items: flex-end; justify-content: center; padding: 14px; background: linear-gradient(180deg, #f7fcfe, #edf8fc); }
.account-graph .below-area { background: linear-gradient(180deg, #dff7f5, #cceeed); }
.zero-axis { position: relative; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 0 14px; color: white; background: #1179ac; box-shadow: 0 0 0 1px #1179ac; }
.zero-axis b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: var(--blue-deep); background: white; font-size: .76rem; }
.zero-axis span { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.no-crest { margin-bottom: 21px; padding: 13px 30px; border: 1px dashed #8bbfce; border-radius: 999px; color: #5b8497; text-align: center; font-weight: 700; }
.no-crest small { font-weight: 500; }
.wave-bracket { position: absolute; inset: 14px auto 14px 16px; width: 140px; padding-left: 15px; display: flex; flex-direction: column; justify-content: center; border-left: 3px solid #148aa0; color: #126d7b; }
.wave-bracket::before, .wave-bracket::after { content: ""; position: absolute; left: 0; width: 14px; height: 3px; background: #148aa0; }.wave-bracket::before { top: 0; }.wave-bracket::after { bottom: 0; }
.wave-bracket small, .trough-block small, .crest-block small, .community-target small, .protected-wave small { display: block; font-size: .65rem; font-weight: 500; }
.trough-block { position: absolute; top: 0; right: 24px; width: 42%; height: 48%; padding: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 0 0 18px 18px; color: white; background: linear-gradient(180deg, #0f82ae, #22a8b5); box-shadow: 0 8px 18px rgba(5,109,138,.14); }
.crest-block { width: 125px; height: 82px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 70px 70px 8px 8px; color: white; background: linear-gradient(180deg, #47cdbd, #149ca6); box-shadow: 0 8px 20px rgba(12,133,142,.18); }
.crest-block b { font: 700 1.35rem var(--serif); }
.gravity-arrow { margin: 0 10px 28px; color: #11869a; font-size: .7rem; font-weight: 700; white-space: nowrap; animation: gravity-horizontal 1.8s ease-in-out infinite; }
@keyframes gravity-horizontal { 50% { transform: translateX(7px); } }
.community-target { margin-bottom: 18px; padding: 10px 12px; border: 1px solid #9ed6c9; border-radius: 10px; color: #15715f; background: #e6f8f2; text-align: center; }
.protected-wave { position: absolute; inset: 30px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid #46aab1; border-radius: 14px; color: #146d78; background: rgba(255,255,255,.32); text-align: center; }
.state-result { min-height: 106px; margin: 0; padding: 18px 20px; color: var(--ink-soft); background: #f8fcfd; font-size: .82rem; }
.state-result b { color: var(--ink); }

.gravity-rules { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gravity-rules > div { display: grid; grid-template-columns: 65px 1fr; gap: 14px; align-items: center; padding: 16px; border-radius: 15px; background: #f2f9fc; }
.gravity-rules span { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; color: white; background: linear-gradient(135deg, var(--blue), var(--cyan)); font: 700 1.05rem var(--serif); }
.gravity-rules p { margin: 0; color: var(--ink-soft); font-size: .78rem; }

.impact-section { background: linear-gradient(180deg, #fff, #edf9fd); }
.impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.impact-card { min-height: 125px; display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 16px; padding: 22px; border: 1px solid #d9eaf0; border-radius: 16px; background: rgba(255,255,255,.85); }
.impact-card span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: #e5f5fb; font: 700 1.6rem var(--serif); }
.impact-card:nth-child(2n) span { color: #bd7c18; background: #fff1d8; }.impact-card:nth-child(3n) span { color: #288f71; background: #e3f7ef; }
.impact-card p { margin: 0; font-size: .9rem; font-weight: 600; line-height: 1.35; }

.compare-section { background: #f5fbfd; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare-card { position: relative; min-height: 390px; overflow: hidden; padding: 40px; border-radius: 22px; color: white; }
.compare-card::after { content: ""; position: absolute; inset: 0; opacity: .26; background: radial-gradient(circle at 85% 20%, white, transparent 25%), linear-gradient(150deg, transparent 40%, rgba(255,255,255,.25)); }
.compare-card > * { position: relative; z-index: 1; }
.compare-card.current { background: linear-gradient(145deg, #263846, #71818b); }.compare-card.balanced { background: linear-gradient(145deg, #0b608b, #21ad9b); }
.compare-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; opacity: .8; }
.compare-card h3 { max-width: 420px; margin-bottom: 28px; font: 700 2rem var(--serif); }
.compare-card ul { margin: 0; padding: 0; list-style: none; }
.compare-card li { position: relative; margin: 15px 0; padding-left: 30px; }
.compare-card li::before { content: "×"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: white; background: rgba(255,255,255,.25); font-weight: 700; }
.compare-card.balanced li::before { content: "✓"; }
.closing-quote { max-width: 980px; margin: 38px auto 0; padding: 28px 50px; color: #1e6090; background: white; border-radius: 18px; box-shadow: 0 10px 35px rgba(13,79,117,.06); font: italic 1.25rem/1.6 var(--serif); text-align: center; }

.final-cta { padding: 82px 0; color: white; background: radial-gradient(circle at 82% 25%, rgba(132,240,221,.35), transparent 25%), linear-gradient(115deg, #07355e, #087ca0); }
.final-cta .page-shell { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; }
.final-cta h2 { margin-bottom: 10px; }.final-cta p:not(.section-kicker) { margin: 0; color: #d1edf5; }
.final-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.button-white { color: var(--blue-deep); background: white; }.button-outline { color: white; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.05); }

.site-footer { padding: 42px 0 20px; background: white; }
.footer-top { display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; }
.footer-top p { margin: 0; color: var(--ink-soft); font-size: .82rem; }
.footer-top nav { display: flex; gap: 20px; }
.footer-top nav a { color: var(--ink-soft); font-size: .78rem; text-decoration: none; }
.footer-bottom { margin-top: 30px; padding-top: 18px; border-top: 1px solid #dcecf1; display: flex; justify-content: space-between; gap: 18px; color: #7190a1; font-size: .66rem; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .nav-links { gap: 18px; }
  .fact-grid { grid-template-columns: repeat(3, 1fr); }
  .booking-flow { grid-template-columns: repeat(3, 1fr); }
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .deep-heading { gap: 30px; }
  .wave-demo-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .section { padding: 78px 0; }
  .site-header, .site-header.scrolled { height: 68px; background: rgba(255,255,255,.94); }
  .menu-toggle { display: block; z-index: 2; }
  .nav-cta { display: none; }
  .nav-links { position: fixed; inset: 0; margin: 0; padding: 100px 30px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: rgba(244,251,253,.98); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: .2s; }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; }
  .nav-links a { font: 700 1.7rem var(--serif); }
  .menu-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .hero { min-height: 780px; height: auto; padding: 120px 0 100px; align-items: end; }
  .hero-image { background-position: 66% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.62)), linear-gradient(0deg, white 0, transparent 36%); }
  .hero-content { padding-top: 0; }
  .hero h1 { max-width: 680px; font-size: clamp(3rem, 10vw, 4.6rem); }
  .hero-lead { color: #224d6c; }
  .hero-proof { gap: 14px; }
  .how-grid { grid-template-columns: repeat(2, 1fr); }
  .wave-demo { padding-top: 38px; }
  .wave-demo-head { align-items: flex-start; flex-direction: column; gap: 20px; }
  .wave-demo-controls { align-self: flex-start; }
  .crest-caption { left: 58%; }
  .video-layout, .deep-heading, .final-cta .page-shell { grid-template-columns: 1fr; }
  .video-layout { gap: 36px; }
  .deep-panel { padding: 34px 24px; }
  .deep-heading { gap: 18px; }
  .booking-flow { grid-template-columns: repeat(2, 1fr); }
  .ledger-explainers { grid-template-columns: repeat(2, 1fr); }
  .gravity-principle { grid-template-columns: auto 1fr; }
  .principle-flow { grid-column: 1 / -1; justify-content: center; }
  .gravity-states { grid-template-columns: 1fr; }
  .compare-card { padding: 30px; }
  .final-actions { justify-content: flex-start; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-top nav { flex-wrap: wrap; }
}

@media (max-width: 600px) {
  .page-shell, .nav-shell { width: min(100% - 28px, 1180px); }
  .section { padding: 66px 0; }
  h2 { font-size: 2.25rem; }
  .brand { font-size: 1rem; }.brand-mark { width: 36px; height: 36px; }
  .hero { min-height: 760px; padding-bottom: 72px; }
  .hero-image { background-position: 70% center; }
  .hero-shade { background: linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.94) 56%, white 100%); }
  .hero-content { align-self: end; }
  .hero h1 { font-size: 2.75rem; }
  .hero h1 em { display: inline; }
  .hero-actions .button { width: 100%; }
  .hero-proof, .scroll-cue { display: none; }
  .fact-grid, .how-grid, .booking-flow, .ledger-explainers, .impact-grid, .compare-grid { grid-template-columns: 1fr; }
  .fact-card { min-height: 190px; }
  .how-card { min-height: 205px; }
  .wave-demo { margin-top: 26px; padding: 34px 0 42px; }
  .wave-demo-head h3 { font-size: 1.65rem; }
  .wave-demo-head p:last-child { font-size: .88rem; }
  .wave-demo-controls { width: 100%; }
  .wave-demo-controls button { flex: 1; }
  .wave-demo-stage { border-radius: 16px; }
  .wave-demo-steps { grid-template-columns: 1fr; gap: 7px; }
  .wave-demo-step { min-height: 64px; }
  .crest-caption, .gravity-caption { display: none; }
  .deep-panel { margin-inline: -3px; padding: 30px 18px; border-radius: 20px; }
  .deep-heading > div { padding-left: 0; padding-top: 28px; }.deep-index { top: 0; }
  .balance-equation { gap: 7px; }.balance-equation span { padding: 8px 10px; font-size: .78rem; }
  .timeline li { gap: 15px; }
  .step-picker { gap: 2px; }.step-picker button { width: 33px; height: 33px; font-size: .72rem; }
  .gravity-principle { padding: 15px; }
  .gravity-principle strong { font-size: 1rem; }
  .gravity-state > header { grid-template-columns: auto 1fr; }
  .gravity-state header em { grid-column: 2; justify-self: start; }
  .value-route { overflow-x: auto; justify-content: flex-start; }
  .value-route > span { min-width: 82px; }
  .account-graph { height: 310px; grid-template-rows: 124px 42px 144px; }
  .wave-bracket { width: 112px; font-size: .75rem; }
  .trough-block { right: 14px; width: 40%; }
  .crest-block { width: 94px; }
  .gravity-arrow { margin-inline: 5px; font-size: .62rem; }
  .community-target { padding: 8px; font-size: .7rem; }
  .gravity-rules { grid-template-columns: 1fr; }
  .gravity-rules > div { grid-template-columns: 58px 1fr; gap: 12px; padding: 14px; }.gravity-rules span { width: 54px; height: 54px; font-size: 1rem; }
  .compare-card { min-height: auto; }
  .closing-quote { padding: 24px 20px; font-size: 1.05rem; }
  .final-actions, .final-actions .button { width: 100%; }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .wave-demo-controls { display: none; }
  .money-token { display: none; }
  .wave-shape { transform: scaleY(1); }
  .crest-caption { opacity: 1; transform: none; }
}