:root {
    --navy: #082c55;
    --navy-2: #061f3e;
    --teal: #0db8b0;
    --teal-2: #13c8be;
    --orange: #ffb21a;
    --cream: #fbfbf6;
    --white: #ffffff;
    --ink: #122b4b;
    --muted: #60728a;
    --line: #dce7e8;
    --shadow: 0 22px 60px rgba(8, 44, 85, .12);
    --radius: 26px;
    --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--cream);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, a { -webkit-tap-highlight-color: transparent; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.skip-link { position: fixed; left: 12px; top: -100px; z-index: 9999; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { top: 12px; }

.site-header {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(251,251,246,.90);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(8,44,85,.07);
}
.nav-wrap { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.brand img { width: 48px; height: 58px; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-size: 22px; letter-spacing: -.9px; color: var(--navy); }
.brand-name span { color: var(--teal); }
.brand-copy small { margin-top: 6px; color: #50647d; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: 27px; font-size: 14px; font-weight: 700; color: #35516f; }
.site-nav a { transition: color .2s ease, transform .2s ease; }
.site-nav a:hover { color: var(--teal); }
.nav-cta { background: var(--navy); color: #fff !important; padding: 12px 17px; border-radius: 999px; box-shadow: 0 10px 24px rgba(8,44,85,.18); }
.nav-cta:hover { transform: translateY(-2px); }
.menu-toggle { display: none; border: 0; background: transparent; padding: 9px; }
.menu-toggle span { display: block; width: 25px; height: 2px; margin: 5px; background: var(--navy); border-radius: 10px; transition: .25s; }

.hero { position: relative; overflow: hidden; padding: 74px 0 105px; background: linear-gradient(180deg,#fbfbf6 0%,#f5faf7 100%); }
.hero-grid { display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: 54px; position: relative; z-index: 2; }
.hero-copy { padding: 25px 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font-size: 12px; font-weight: 800; letter-spacing: 1.7px; text-transform: uppercase; }
.eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(255,178,26,.13); }
h1 { margin: 17px 0 18px; color: var(--navy); font-size: clamp(46px, 6vw, 78px); line-height: .98; letter-spacing: -4px; max-width: 680px; }
h1 span, h2 span { color: var(--teal); }
h1 em { color: var(--navy); font-style: normal; position: relative; }
h1 em::after { content: ""; position: absolute; height: 8px; left: 0; right: 7%; bottom: -8px; background: var(--orange); border-radius: 999px; transform: rotate(-1.5deg); }
.hero-lead { max-width: 620px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 19px; border-radius: 12px; font-size: 14px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-3px); }
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 14px 30px rgba(8,44,85,.2); }
.btn-primary:hover { box-shadow: 0 18px 36px rgba(8,44,85,.28); }
.btn-ghost { border: 1px solid #cbd9dc; background: rgba(255,255,255,.72); }
.trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 32px; color: #698099; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.trust-row b { width: 4px; height: 4px; border-radius: 50%; background: var(--teal); }
.hero-art { position: relative; min-width: 0; }
.hero-card { border: 9px solid rgba(255,255,255,.85); border-radius: 29px; overflow: hidden; box-shadow: 0 35px 70px rgba(8,44,85,.18); transform: rotate(1deg); background: #fff; }
.hero-card img { width: 100%; height: auto; aspect-ratio: 1983/793; object-fit: contain; }
.floating-badge { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 13px; background: rgba(255,255,255,.94); border: 1px solid rgba(8,44,85,.08); box-shadow: 0 15px 35px rgba(8,44,85,.15); border-radius: 15px; }
.badge-safe { left: -28px; bottom: 22px; }
.badge-hook { right: -22px; top: 26px; }
.badge-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--navy); background: #e0f6f3; font-weight: 900; }
.badge-hook .badge-icon { background: #fff2d1; color: #a46700; }
.floating-badge strong, .floating-badge small { display: block; }
.floating-badge strong { font-size: 11px; }
.floating-badge small { color: var(--muted); font-size: 9px; margin-top: 1px; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(5px); opacity: .55; pointer-events: none; }
.hero-glow-one { width: 480px; height: 480px; background: rgba(13,184,176,.11); right: -190px; top: 20px; }
.hero-glow-two { width: 330px; height: 330px; background: rgba(255,178,26,.10); left: -170px; bottom: 40px; }
.hero-wave { position: absolute; left: -5%; right: -5%; bottom: -115px; height: 170px; background: var(--navy); border-radius: 50% 50% 0 0 / 40% 40% 0 0; }

.section { padding: 105px 0; }
.intro { background: #fff; }
.section-heading { max-width: 750px; margin-bottom: 48px; }
.section-heading.centered { text-align: center; margin-inline: auto; }
.section-heading h2 { margin: 11px 0 12px; font-size: clamp(34px,4.5vw,54px); line-height: 1.06; letter-spacing: -2.3px; color: var(--navy); }
.section-heading p { margin: 0; color: var(--muted); font-size: 16px; }
.topic-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
.topic-card { position: relative; padding: 25px 22px 23px; min-height: 290px; border: 1px solid var(--line); border-radius: 21px; background: #fff; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.topic-card::after { content:""; position:absolute; right:-35px; bottom:-55px; width:130px; height:130px; border-radius:50%; background:#effaf8; }
.topic-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); border-color: #c3e5e2; }
.topic-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; font-weight: 900; font-size: 23px; color: var(--navy); background: #e3f6f3; margin-bottom: 20px; }
.mail-icon { background:#e8f5f7; }.shield-icon { background:#e4f7f0; }.lock-icon { background:#fff2d4; }.laptop-icon { background:#e9eef9; }
.topic-number { position: absolute; right: 20px; top: 27px; color: #9db0bf; font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.topic-card h3 { margin: 0 0 9px; color: var(--navy); font-size: 18px; line-height: 1.25; }
.topic-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.topic-card a { position:absolute; bottom:22px; color: var(--teal); font-size: 12px; font-weight: 800; z-index:2; }
.topic-card a span { margin-left: 5px; }

.featured { background: #f3f8f7; }
.featured-grid { display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 75px; }
.featured-image { position: relative; }
.featured-image img { width: 100%; height: auto; border-radius: 26px; box-shadow: var(--shadow); object-fit: contain; }
.image-label { position:absolute; left: 18px; bottom: 18px; display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:999px; background:rgba(8,44,85,.92); color:#fff; font-size:10px; font-weight:800; letter-spacing:.5px; }
.pulse { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 5px rgba(13,184,176,.2); }
.featured-copy h2 { margin: 12px 0 15px; font-size: clamp(34px,4vw,50px); line-height: 1.05; letter-spacing: -2px; color:var(--navy); }
.featured-copy > p { color:var(--muted); font-size:15px; }
.rule-list { margin: 26px 0; display: grid; gap: 11px; }
.rule-list > div { display:grid; grid-template-columns: 35px 1fr; align-items:center; gap:11px; padding: 9px 0; border-bottom:1px solid #dce8e5; }
.rule-list > div:last-child { border-bottom:0; }
.rule-list span { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; background:#fff; color:var(--teal); font-size:10px; font-weight:900; }
.rule-list p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }.rule-list strong { color:var(--navy); font-size:13px; }
.text-link { color:var(--navy); font-size:13px; font-weight:900; }.text-link span { color:var(--teal); margin-left:5px; }

.social { background:#fff; }
.social-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.social-card { min-height:250px; padding:27px; border-radius:25px; position:relative; overflow:hidden; color:#fff; transition: transform .25s ease, box-shadow .25s ease; }
.social-card:hover { transform:translateY(-6px); box-shadow:0 25px 55px rgba(8,44,85,.18); }
.youtube-card { background:linear-gradient(135deg,#082c55 0%,#0c3c6d 100%); }.instagram-card { background:linear-gradient(135deg,#0c4b61 0%,#0eaaa1 100%); }
.social-card::after { content:""; position:absolute; width:230px; height:230px; border:1px solid rgba(255,255,255,.12); border-radius:50%; right:-75px; bottom:-120px; }
.social-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }.social-logo { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; font-weight:900; font-size:19px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.16); }.external { font-size:21px; opacity:.75; }
.social-label { font-size:10px; font-weight:900; letter-spacing:2px; text-transform:uppercase; opacity:.72; }.social-card h3 { max-width:430px; margin:5px 0 8px; font-size:24px; line-height:1.18; letter-spacing:-.7px; }.social-card p { max-width:500px; margin:0; color:rgba(255,255,255,.76); font-size:13px; }.social-action { display:inline-block; margin-top:22px; font-size:12px; font-weight:900; }.social-action span { margin-left:5px; color:var(--orange); }
.video-placeholder { margin-top:22px; min-height:100px; display:flex; align-items:center; gap:18px; padding:20px 24px; border:1px dashed #b9cecf; border-radius:18px; background:#f7fbfa; color:var(--navy); }.play-ring { width:54px; height:54px; flex:0 0 54px; display:grid; place-items:center; border-radius:50%; background:#e0f6f3; color:var(--teal); font-size:16px; }.video-placeholder strong,.video-placeholder span { display:block; }.video-placeholder strong{font-size:13px}.video-placeholder span{font-size:11px;color:var(--muted);margin-top:2px}.video-placeholder code{background:#e9efef;padding:2px 5px;border-radius:5px}.video-wrap{margin-top:30px}.video-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:var(--navy);font-size:12px;font-weight:900}.video-heading a{color:var(--teal)}.video-frame{aspect-ratio:16/9;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:#061f3e}.video-frame iframe{width:100%;height:100%;border:0}

.library { background: #f3f8f7; }
.library-box { position:relative; min-height:340px; display:grid; grid-template-columns:1.25fr .75fr; align-items:center; overflow:hidden; padding:55px 60px; border-radius:32px; background:linear-gradient(125deg,#061f3e,#0b4269); color:#fff; box-shadow:0 30px 70px rgba(8,44,85,.19); }
.library-box::before { content:""; position:absolute; width:560px; height:560px; border-radius:50%; right:-250px; top:-290px; border:90px solid rgba(13,184,176,.13); }
.library-box::after { content:""; position:absolute; width:260px; height:260px; border-radius:50%; left:-160px; bottom:-170px; background:rgba(255,178,26,.08); }
.eyebrow.light { color:#69e3db; }.library-copy{position:relative;z-index:2}.library-copy h2{max-width:650px;margin:10px 0 13px;font-size:clamp(35px,4vw,52px);line-height:1.05;letter-spacing:-2px}.library-copy h2 span{color:#31d3c9}.library-copy p{max-width:650px;color:rgba(255,255,255,.73);font-size:14px}.future-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:23px}.future-pills span{padding:7px 10px;border:1px solid rgba(255,255,255,.17);border-radius:999px;color:#d6e6f0;font-size:10px;font-weight:800}.lock-visual{position:relative;z-index:2;display:grid;place-items:center;min-height:260px}.lock-circle{width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;position:relative}.lock-shackle{position:absolute;width:55px;height:57px;top:33px;border:9px solid #66ddd5;border-bottom:0;border-radius:35px 35px 0 0}.lock-body{width:77px;height:65px;margin-top:42px;border-radius:13px;background:#fff;display:grid;place-items:center;color:var(--navy);font-weight:900;font-size:27px;box-shadow:0 15px 30px rgba(0,0,0,.18)}.orbit{position:absolute;border:1px solid rgba(255,255,255,.11);border-radius:50%}.orbit-one{width:220px;height:220px}.orbit-two{width:270px;height:270px;border-style:dashed;opacity:.5}

.manifesto { background:#fff; padding:85px 0; }.manifesto-inner{text-align:center;position:relative;max-width:850px}.quote-mark{font-family:Georgia,serif;font-size:100px;line-height:.6;color:var(--orange);opacity:.8}.manifesto p{margin:10px 0 18px;color:var(--navy);font-size:clamp(24px,3.5vw,38px);line-height:1.25;letter-spacing:-1.2px}.manifesto p span{color:var(--teal)}.signature{color:#72869b;font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:800}.signature i{display:inline-block;width:24px;height:2px;margin:0 8px 3px;background:var(--orange)}

.site-footer{background:var(--navy-2);color:#fff;padding:42px 0 22px}.footer-main{display:flex;align-items:center;gap:25px;justify-content:space-between}.footer-brand{display:flex;align-items:center;gap:10px}.footer-brand img{width:43px;height:51px;object-fit:contain}.footer-brand strong{display:block;font-size:18px}.footer-brand strong span{color:var(--teal)}.footer-brand small{display:block;margin-top:2px;color:#8fa7bb;font-size:8px;letter-spacing:1.5px;text-transform:uppercase}.footer-links{display:flex;gap:22px;color:#a9bbca;font-size:11px;font-weight:700}.footer-links a:hover{color:#fff}.footer-social{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:12px;color:#fff}.footer-bottom{margin-top:28px;padding-top:17px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;color:#718ba1;font-size:9px;letter-spacing:.2px}
.back-top{position:fixed;right:20px;bottom:20px;width:42px;height:42px;border:0;border-radius:13px;background:var(--teal);color:#fff;font-size:18px;box-shadow:0 12px 30px rgba(13,184,176,.28);opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;z-index:900}.back-top.show{opacity:1;visibility:visible;transform:none}.back-top:hover{background:var(--navy)}

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }.reveal.is-visible{opacity:1;transform:none}.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}

@media (max-width: 980px) {
    .container{width:min(calc(100% - 32px),var(--max));}
    .site-nav{gap:16px}.nav-cta{padding:10px 13px}
    .hero{padding-top:50px}.hero-grid{grid-template-columns:1fr;gap:42px}.hero-copy{max-width:780px}.hero-art{max-width:800px;margin-inline:auto;width:100%}.floating-badge{display:none}
    .topic-grid{grid-template-columns:repeat(2,1fr)}
    .featured-grid{grid-template-columns:1fr;gap:45px}.featured-copy{max-width:780px}
    .library-box{grid-template-columns:1fr;padding:48px}.lock-visual{position:absolute;right:-40px;bottom:-25px;opacity:.55}
}

@media (max-width: 700px) {
    .site-header{background:rgba(251,251,246,.96)}.nav-wrap{min-height:70px}.brand img{width:42px;height:51px}.brand-name{font-size:19px}.brand-copy small{font-size:7px;letter-spacing:1.3px}.menu-toggle{display:block;z-index:1002}
    .site-nav{position:absolute;left:12px;right:12px;top:64px;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:10px;background:rgba(255,255,255,.98);border:1px solid #dbe6e7;border-radius:18px;box-shadow:0 20px 45px rgba(8,44,85,.16);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.22s}.site-nav.open{opacity:1;visibility:visible;transform:none}.site-nav a{padding:12px 13px;border-radius:10px}.site-nav a:hover{background:#f2f8f7}.nav-cta{text-align:center;margin-top:4px}
    .hero{padding:35px 0 82px}.hero-grid{gap:30px}h1{font-size:clamp(43px,13vw,65px);letter-spacing:-3px}.hero-lead{font-size:15px;line-height:1.7}.hero-actions{display:grid;grid-template-columns:1fr}.btn{justify-content:center}.trust-row{gap:7px;font-size:8px;letter-spacing:1px}.hero-card{border-width:5px;border-radius:19px}.hero-wave{height:110px;bottom:-80px}
    .section{padding:76px 0}.section-heading{margin-bottom:32px}.section-heading h2{font-size:36px}.section-heading p{font-size:14px}.topic-grid{grid-template-columns:1fr}.topic-card{min-height:245px}.topic-card a{bottom:20px}
    .featured-copy h2{font-size:37px}.featured-image img{border-radius:18px}.image-label{left:10px;bottom:10px}
    .social-grid{grid-template-columns:1fr}.social-card{min-height:245px;padding:24px}.social-card h3{font-size:22px}.video-placeholder{align-items:flex-start}.video-placeholder .play-ring{margin-top:2px}
    .library-box{padding:38px 27px;min-height:410px;border-radius:25px}.lock-visual{right:-60px;bottom:-45px}.library-copy p{font-size:13px}.future-pills{max-width:420px}
    .manifesto{padding:70px 0}.manifesto p{font-size:25px}.footer-main{flex-wrap:wrap}.footer-links{order:3;width:100%;justify-content:flex-start;flex-wrap:wrap;gap:10px 18px}.footer-bottom{flex-direction:column;gap:6px}.back-top{right:14px;bottom:14px}
}

@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.topic-card,.social-card,.btn{transition:none} }