/* ============================================================ AI OPERATOR BOOT CAMP — sales page Redesign build. Palette + type per approved design system. ============================================================ */ /* ---------- Fonts (self-hosted, extracted from source) ---------- */ @font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap; src:url('assets/fonts/Inter-300-700.woff2') format('woff2');} @font-face{font-family:'Montserrat';font-style:normal;font-weight:400 900;font-display:swap; src:url('assets/fonts/Montserrat-400-900.woff2') format('woff2');} @font-face{font-family:'Satoshi';font-style:normal;font-weight:700;font-display:swap; src:url('assets/fonts/Satoshi-700.woff2') format('woff2');} @font-face{font-family:'Satoshi';font-style:normal;font-weight:900;font-display:swap; src:url('assets/fonts/Satoshi-900.woff2') format('woff2');} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap; src:url('assets/fonts/JetBrainsMono-400-500.woff2') format('woff2');} /* ---------- Design tokens (brand-exact) ---------- */ :root{ --gold:#F2AB29; /* Signature Gold — primary accent */ --gold-hover:#d99516; --gold-soft:rgba(242,171,41,.12); --gold-line:rgba(242,171,41,.38); --navy:#000E2B; /* Deep Navy — primary dark bg */ --midnight:#010717; /* Midnight — deepest sections */ --steel:#2F4366; /* Steel Blue — cards / secondary dark surfaces */ --cobalt:#2D61EB; /* Cobalt — SIGNAL ONLY */ --grey:#E9EBF1; /* Cool Grey — light bg / body on dark */ --paper:#F4F5F8; /* light section bg */ --paper-2:#ECEEF4; --ink:#0A1327; /* dark text on light */ --ink-soft:#4A5570; /* muted text on light */ --line-dark:rgba(233,235,241,.10); --line-light:#E1E4EC; --f-display:'Montserrat',system-ui,sans-serif; --f-head:'Satoshi','Manrope','Plus Jakarta Sans',system-ui,sans-serif; --f-body:'Inter',system-ui,-apple-system,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,monospace; --wrap:1200px; --narrow:820px; --pad:clamp(20px,5vw,24px); --sec-y:clamp(64px,9vw,128px); --radius:14px; --radius-sm:10px; } /* ---------- Reset / base ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;font-family:var(--f-body);color:var(--ink); background:var(--paper);line-height:1.65; font-size:clamp(16px,1.05vw,17px); /* NOTE: no overflow-x:hidden — on it blanks the cross-origin video player in Safari/WebKit (the live page doesn't use it either). Horizontal overflow is prevented at the source instead. */ } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0;font-family:var(--f-head);font-weight:700;line-height:1.08;letter-spacing:-.01em} p{margin:0 0 1.05em} p:last-child{margin-bottom:0} em{font-style:normal;color:var(--gold)} .g{color:var(--gold)} strong{font-weight:700} ul{margin:0;padding:0;list-style:none} /* ---------- Layout helpers ---------- */ .wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} .narrow{max-width:var(--narrow);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} section{padding-top:var(--sec-y);padding-bottom:var(--sec-y);position:relative} /* halve vertical padding to tighten the gap between specific adjacent sections */ .sec-pb-half{padding-bottom:clamp(32px,4.5vw,64px)} .sec-pt-half{padding-top:clamp(32px,4.5vw,64px)} /* dark / light section skins */ .dark{background:var(--navy);color:var(--grey)} .dark.midnight{background:var(--midnight)} .light{background:var(--paper);color:var(--ink)} .dark h1,.dark h2,.dark h3,.dark h4{color:#fff} /* ---------- Eyebrow / section label ---------- */ .eyebrow{ display:flex;align-items:center;gap:12px; font-family:var(--f-body);font-weight:600;font-size:.74rem; letter-spacing:.2em;text-transform:uppercase;color:var(--gold); margin-bottom:22px; } .eyebrow.center{justify-content:center} .eyebrow .ln{width:34px;height:1px;background:var(--gold);opacity:.8;display:inline-block} .eyebrow.center .ln.r{} /* ---------- Headlines ---------- */ .h2{font-size:clamp(2.05rem,4.8vw,3.5rem);line-height:1.05} .h3{font-family:var(--f-head);font-weight:700;font-size:1.22rem} .lede{font-size:clamp(1.08rem,1.6vw,1.28rem);color:var(--ink-soft);line-height:1.6;max-width:640px} .dark .lede{color:var(--grey)} .center{text-align:center} .center .lede,.center.narrow .lede{margin-left:auto;margin-right:auto} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:10px;justify-content:center; font-family:var(--f-head);font-weight:700;font-size:1rem; padding:16px 30px;border-radius:10px;cursor:pointer;border:1px solid transparent; transition:background .18s ease,transform .18s ease,border-color .18s ease,color .18s ease; letter-spacing:.01em; } .btn .arr{transition:transform .18s ease} .btn:hover .arr{transform:translateX(4px)} .btn-gold{background:var(--gold);color:#0A1327} .btn-gold:hover{background:var(--gold-hover)} .btn-gold:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px} .btn-lg{padding:19px 40px;font-size:1.08rem} .btn-ghost{background:transparent;border-color:var(--gold-line);color:var(--gold)} .btn-ghost:hover{border-color:var(--cobalt);color:#fff} .btn-topbar{padding:11px 22px;font-size:.85rem;border-radius:8px} .text-jump{display:inline-block;margin-top:16px;font-size:.9rem;color:rgba(233,235,241,.6)} .text-jump:hover{color:var(--gold)} /* ============================================================ STICKY TOP BAR ============================================================ */ .topbar{ /* static: scrolls away with the page (matches the design) */ position:static;background:#010811; border-bottom:1px solid var(--line-dark); color:var(--grey); } /* centered as one group, matching the mockup */ .topbar .wrap{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap; padding-top:15px;padding-bottom:15px} .topbar-status{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap; font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600} .topbar-status .dot{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.55} .topbar-status .amber{color:var(--gold)} /* transparent PNG — no mix-blend-mode (it blanks the video player in Safari/WebKit) */ .topbar-status .spots-ic{height:20px;width:auto} .topbar-status .item{display:inline-flex;align-items:center;gap:8px} .topbar-status .date-chip{background:rgba(24,45,86,.35);padding:4px 11px;border-radius:6px} @media(max-width:720px){ .topbar-status .hide-sm{display:none} .topbar-status{font-size:.74rem;gap:11px;letter-spacing:.08em} .topbar .wrap{gap:16px} .topbar-status .spots-ic{height:17px} } /* ============================================================ HERO ============================================================ */ .hero{ /* keep the circuitry bright — light top scrim for legibility, fade to midnight only at the base */ background: linear-gradient(180deg,rgba(1,7,23,.30) 0%,rgba(1,7,23,0) 20%,rgba(1,7,23,0) 66%,var(--midnight) 100%), url('assets/hero-bg.webp') center top/cover no-repeat, var(--midnight); color:var(--grey);text-align:center;padding-top:clamp(48px,7vw,86px); padding-bottom:clamp(56px,8vw,96px); position:relative; } /* keep hero content (incl. the video player) above the background layer — matches live */ .hero .wrap{position:relative;z-index:1} /* text-only lock-up: Satoshi Bold caps, cool grey, tracked, single gold dot separator */ .logo-lock{ display:inline-flex;align-items:center;justify-content:center;gap:16px;margin-bottom:38px; font-family:var(--f-head);font-weight:700;text-transform:uppercase;color:var(--grey); font-size:clamp(.82rem,1.5vw,1.02rem);letter-spacing:.3em; /* nudge for the trailing letter-spacing so the block stays visually centred */ padding-left:.3em; } .logo-lock .gdot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto} .hero h1{ font-family:var(--f-display);font-weight:900;letter-spacing:-.02em; font-size:clamp(2.7rem,8.2vw,5.6rem);line-height:.98;color:#fff; margin:0 auto 26px;max-width:16ch; } .hero h1 .g{color:var(--gold)} .hero-sub{font-size:clamp(1.05rem,1.7vw,1.32rem);max-width:44ch;margin:0 auto 18px; color:var(--grey);line-height:1.55} .hero-sub .g{color:var(--gold);font-weight:500} .hero-strap{font-family:var(--f-head);font-weight:700;font-size:clamp(1.15rem,2vw,1.5rem); color:#fff;margin:0 auto 40px} .hero-strap .g{color:var(--gold)} /* video frame — reproduced VERBATIM from live-original.html. Do not change. */ .vturb-frame { border:3px solid rgba(245,194,107,0.76); border-radius:12px; overflow:hidden; background:#050b17; box-shadow:0 28px 80px -34px rgba(245,194,107,0.7), 0 14px 42px -28px rgba(0,0,0,0.95); } /* Safari fix: pin the player to its own GPU compositing layer so WebKit doesn't drop it (blank video) on this long/complex page. Invisible; no visual change. */ .vturb-frame { transform:translateZ(0); -webkit-transform:translateZ(0); } .hero-videolabel{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase; font-weight:600;color:var(--gold);margin-top:30px} .hero-cta{margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:6px} .hero-note{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey); opacity:.75;margin-top:26px;font-weight:500} .hero-note .amber{color:var(--gold);opacity:1} /* ============================================================ MEET ROCKY ============================================================ */ .rocky-head{text-align:center;max-width:760px;margin:0 auto} .rocky-head h2{margin-bottom:0} .section-h2-black{font-family:var(--f-head);font-weight:700; font-size:clamp(2.05rem,5vw,3.5rem);line-height:1.06} .rocky-lead{max-width:640px;margin:28px auto 0;color:var(--ink-soft);font-size:1.08rem} .rocky-lead .g{color:var(--gold);font-weight:600} .rocky-cards{max-width:760px;margin:38px auto 0;display:flex;flex-direction:column;gap:14px} .rocky-card{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line-light); border-radius:12px;padding:18px 22px;box-shadow:0 1px 2px rgba(10,19,39,.04)} .rocky-card .ic{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--gold-line); display:flex;align-items:center;justify-content:center} .rocky-card .ic svg{width:22px;height:22px;stroke:var(--gold);fill:none} .rocky-card p{margin:0;font-size:1.02rem} .rocky-photo{max-width:760px;margin:44px auto 0;border-radius:12px;overflow:hidden; border:1px solid var(--line-light)} .pullquote{ max-width:760px;margin:44px auto 0;background:#fff;border-left:3px solid var(--gold); border-radius:0 12px 12px 0;padding:30px 34px;box-shadow:0 20px 50px -30px rgba(10,19,39,.25); } .pullquote .qt{font-size:clamp(1.15rem,1.9vw,1.42rem);line-height:1.5;font-family:var(--f-head); font-weight:700;color:var(--ink)} .pullquote .qt .g{color:var(--gold)} .pullquote .by{margin-top:16px;font-weight:700;color:var(--ink)} .pullquote .role{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft); margin-top:3px} .pullquote .mk{font-family:Georgia,serif;color:var(--gold);font-size:2.4rem;line-height:.1; display:block;height:.5em} /* ============================================================ THE PROBLEM (dark) ============================================================ */ .problem-grid{display:grid;grid-template-columns:0.72fr 1.3fr;gap:clamp(36px,4.5vw,76px);align-items:start} .problem-copy h2{margin-bottom:30px;font-size:clamp(2rem,4.3vw,3.15rem);line-height:1.04} .problem-copy p{color:var(--grey);opacity:.9;line-height:1.55;margin:0} /* four separated groups with breathing room */ .pgroup + .pgroup{margin-top:26px} .phair{height:1px;background:var(--line-dark);margin:26px 0} .staccato p{margin:0 0 .3em;line-height:1.45} .staccato p:last-child{margin-bottom:0} .problem-copy .strong-line{color:#fff;font-weight:700;font-family:var(--f-head);font-size:1.3rem;line-height:1.28} /* pull-quote anchored to the bottom of the left column */ .pquote{margin:0;display:flex;gap:16px;align-items:flex-start} .pquote .mk{font-family:Georgia,serif;color:var(--gold);font-size:3.1rem;line-height:.78;flex:0 0 auto} .pquote p{color:var(--grey);opacity:.85;font-size:1.02rem;line-height:1.5} /* right column: cards -> stuck divider -> callout, all contained here */ .problem-right{display:flex;flex-direction:column} .pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .pain{border:1px solid var(--gold-line);border-radius:14px;padding:28px 24px; background:rgba(47,67,102,.14);display:flex;flex-direction:column} .pain .ic{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--gold-line); display:flex;align-items:center;justify-content:center;margin-bottom:22px} .pain .ic svg{width:26px;height:26px;stroke:var(--gold);fill:none} .pain h4{font-size:1.18rem;color:#fff;margin-bottom:12px;font-family:var(--f-head);font-weight:700;line-height:1.2} .pain p{font-size:.95rem;color:var(--grey);opacity:.8;margin:0;line-height:1.5} .problem-mid{text-align:center;margin:44px 0 0} .problem-mid .eyebrow{justify-content:center;color:var(--gold);margin-bottom:16px} .problem-mid p{font-size:1.15rem;color:var(--grey);max-width:620px;margin:0 auto;line-height:1.5} .problem-mid p strong{color:#fff} .callout{ margin:28px 0 0;display:flex;gap:24px;align-items:center; border:1.5px solid rgba(242,171,41,.6);border-radius:16px;padding:28px 32px; background:linear-gradient(180deg,rgba(47,67,102,.25),rgba(47,67,102,.08)); box-shadow:0 0 0 1px rgba(242,171,41,.08),0 16px 50px -20px rgba(242,171,41,.2); } .callout .cic{flex:0 0 auto;width:60px;height:60px} .callout .cic svg{width:100%;height:100%} .callout h4{color:var(--gold);font-family:var(--f-head);font-weight:700;font-size:1.32rem;margin-bottom:8px} .callout p{margin:0;color:var(--grey);line-height:1.5} /* ============================================================ FOUR LEVELS (light) ============================================================ */ .levels-head{max-width:680px} .levels-lead{color:var(--ink-soft);margin-top:22px;line-height:1.6} .levels-lead .g{color:var(--gold);font-weight:600} .mini-strap{display:flex;align-items:center;gap:15px;margin:44px 0 64px; font-family:var(--f-head);font-weight:700;font-size:1.2rem;color:var(--ink)} .mini-strap .g{color:var(--gold)} .mini-strap .spark{width:42px;height:42px;border-radius:50%;border:2px solid var(--gold); display:flex;align-items:center;justify-content:center;flex:0 0 auto} .mini-strap .spark svg{width:24px;height:24px;fill:var(--gold)} /* generous cards; align-items:stretch so 1-3 match; card 4 breaks the row */ .levels{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch} .level{background:#fff;border:1px solid var(--line-light);border-radius:16px;padding:30px 28px 34px; position:relative;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(10,19,39,.04)} .level .num{width:54px;height:54px;border-radius:13px;background:var(--paper-2);color:var(--ink); font-family:var(--f-head);font-weight:900;font-size:1.6rem;display:flex;align-items:center; justify-content:center;margin-bottom:26px} .level .lic{position:absolute;top:36px;right:28px;width:30px;height:30px;color:var(--gold)} .level .lic svg{width:100%;height:100%;stroke:var(--gold);fill:none} .level h3{font-size:1.6rem;margin-bottom:16px} .level p{font-size:1rem;color:var(--ink-soft);margin:0;line-height:1.55} .level p + p{margin-top:.85em} /* level 4 — the destination: taller (breaks the row), forward, gold-keylined */ .level.op{background:var(--navy);border:1px solid var(--gold-line);color:var(--grey); align-self:stretch;margin-top:-36px;margin-bottom:-36px;overflow:visible;justify-content:center; box-shadow:0 34px 70px -26px rgba(1,7,23,.7),0 12px 34px -18px rgba(1,7,23,.55)} .level.op .num{background:var(--gold);color:#0A1327} .level.op h3{color:#fff} .level.op p{color:var(--grey);opacity:.9} .level.op p .g{color:var(--gold);opacity:1;font-weight:500} .level.op .lic{color:var(--gold)} .level.op .op-tab{position:absolute;top:-13px;left:28px;background:var(--gold);color:#0A1327; font-family:var(--f-body);font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; padding:6px 13px;border-radius:7px;white-space:nowrap;box-shadow:0 6px 16px -6px rgba(0,0,0,.5)} .levels-foot{max-width:760px;margin:56px 0 0;border-left:2px solid var(--gold);padding:8px 0 8px 24px} .levels-foot p{color:var(--ink-soft);margin:0;line-height:1.7;font-size:1.05rem} .levels-foot .strong{color:var(--ink);font-weight:700;font-family:var(--f-head)} .levels-foot .g{color:var(--gold)} /* ============================================================ THE RESULT (light) + chat mockup ============================================================ */ .result-head{text-align:center;max-width:760px;margin:0 auto} .result-body{max-width:680px;margin:30px auto 0;color:var(--ink-soft)} .result-body p{margin-bottom:1em} .result-body .last{color:var(--ink);font-weight:600} /* chat device */ .chat{max-width:900px;margin:52px auto 0;background:#0d1526;border:1px solid rgba(255,255,255,.08); border-radius:18px;overflow:hidden;display:grid;grid-template-columns:300px 1fr; box-shadow:0 40px 90px -40px rgba(10,19,39,.5);color:#cfd6e6;font-size:.86rem} .chat-side{background:#0a111f;border-right:1px solid rgba(255,255,255,.06);padding:16px 0} .chat-side .ch-head{display:flex;align-items:center;gap:8px;padding:4px 18px 14px; border-bottom:1px solid rgba(255,255,255,.06);color:#8b95ab} .chat-side .ch-head .back{color:#8b95ab} .chat-side .ch-head .nm{color:#fff;font-weight:600;font-size:.95rem} .chat-side .ch-head .sub{font-size:.72rem;color:#8b95ab} .chrow{display:flex;gap:11px;padding:10px 18px;align-items:center} .chrow.active{background:rgba(45,97,235,.16)} .chrow .av{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center; justify-content:center;font-size:.8rem;color:#fff;font-weight:700} .chrow .meta{min-width:0;flex:1} .chrow .top{display:flex;justify-content:space-between;gap:8px} .chrow .top .t{color:#fff;font-weight:600;font-size:.82rem} .chrow .top .ti{font-size:.68rem;color:#78839b} .chrow .prev{color:#98a2b8;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chrow .badge{background:var(--cobalt);color:#fff;border-radius:20px;font-size:.66rem; padding:1px 7px;font-weight:700;margin-left:6px} .chat-main{padding:16px 20px 22px} .chat-main .cm-head{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06); padding-bottom:12px;margin-bottom:16px} .chat-main .cm-head .t{color:#fff;font-weight:600} .chat-main .cm-head .s{font-size:.72rem;color:#8b95ab} .brief{background:#0f1a2e;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:16px 18px; line-height:1.55} .brief h5{color:#fff;margin:0 0 10px;font-size:.92rem;font-family:var(--f-head)} .brief .lbl{color:#fff;font-weight:700} .brief .grp{margin:12px 0} .brief .sug{color:#8b95ab;font-style:italic} .brief .bolt{color:var(--gold)} .brief .stamp{text-align:right;color:#6f7a92;font-size:.7rem;margin-top:10px} .brief ul{margin:4px 0 0} .brief li{margin:2px 0} /* ============================================================ WHAT YOU BUILD (dark) ============================================================ */ .build-head{max-width:640px} .build-lead{color:var(--grey);opacity:.9;margin-top:20px;max-width:600px} .build-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px} .bcard{border:1px solid var(--gold-line);border-radius:16px;padding:32px 30px; background:rgba(47,67,102,.14)} .bcard .bic{width:58px;height:58px;color:var(--gold);margin-bottom:22px;display:flex;align-items:center;justify-content:center} .bcard .bic svg{width:100%;height:100%;stroke:var(--gold);fill:none} .bcard .knum{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold); font-weight:600;margin-bottom:6px} .bcard h3{color:#fff;font-size:1.45rem;margin-bottom:14px} .bcard p{font-size:1rem;color:var(--grey);opacity:.82;margin:0;line-height:1.55} .bcard .rule{height:1px;background:var(--gold-line);margin-top:20px;opacity:.5} /* ============================================================ TESTIMONIALS (light) ============================================================ */ .testi-head{text-align:center;max-width:820px;margin:0 auto} .testi-head .lede{margin-top:24px} .testimonials{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin:52px auto 0; max-width:1000px} .vcard{background:#fff;border:1px solid var(--line-light);border-radius:14px;overflow:hidden; box-shadow:0 20px 50px -34px rgba(10,19,39,.3);display:flex;flex-direction:column} .vmedia{position:relative;aspect-ratio:16/10;background:#0d1526;cursor:pointer;overflow:hidden} .vmedia img{width:100%;height:100%;object-fit:cover} .vmedia .play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%; background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center; transition:transform .18s ease,background .18s ease} .vmedia:hover .play{transform:scale(1.06)} .vmedia .play svg{width:24px;height:24px;fill:#0A1327;margin-left:3px} .vmedia:focus-visible{outline:3px solid var(--cobalt);outline-offset:-3px} /* placeholder for the 4th (to-be-embedded) video — poster shown, label overlaid */ .vmedia.placeholder{background:var(--steel);cursor:default} .vmedia.placeholder::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(1,7,23,.28),rgba(1,7,23,.55))} .vmedia.placeholder .ph-label{position:absolute;inset:0;margin:auto;z-index:2; width:max-content;height:max-content;max-width:82%; color:var(--grey);font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-align:center; text-transform:uppercase;padding:9px 16px;border:1px solid var(--gold-line);border-radius:8px; background:rgba(1,7,23,.8)} /* no pull-quote — attribution + description only */ .vbody{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1} .vbody .vname{font-weight:700;color:var(--ink);font-family:var(--f-head);font-size:1.2rem} .vbody .vcohort{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft); margin-top:5px} .vbody .vdesc{font-size:.98rem;color:var(--ink-soft);margin:18px 0 0;padding-top:18px;line-height:1.55; border-top:1px solid var(--line-light)} .testi-cta{text-align:center;margin-top:46px} /* ============================================================ WHAT YOUR OPERATOR DOES (light) ============================================================ */ .does-head{max-width:720px;margin:0 auto;text-align:center} .does-list{max-width:820px;margin:40px auto 0} .does-row{display:flex;align-items:center;gap:20px;padding:24px 4px;border-bottom:1px solid var(--line-light)} .does-row:first-child{border-top:1px solid var(--line-light)} .does-row .ic{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:#fff; border:1px solid var(--line-light);display:flex;align-items:center;justify-content:center} .does-row .ic svg{width:24px;height:24px;stroke:var(--gold);fill:none} .does-row .plus{color:var(--gold);font-weight:700;font-size:1.2rem;flex:0 0 auto} .does-row p{margin:0;font-size:1.12rem} .does-row p strong{color:var(--ink)} .does-callout{max-width:820px;margin:26px auto 0;background:var(--gold-soft);border:1px solid var(--gold-line); border-radius:12px;padding:20px 24px;display:flex;gap:16px;align-items:center} .does-callout .aic{width:30px;height:30px;color:var(--gold);flex:0 0 auto} .does-callout .aic svg{width:100%;height:100%;stroke:var(--gold);fill:none} .does-callout p{margin:0} .does-callout p strong{color:var(--ink)} .ops-photo{max-width:900px;margin:50px auto 0;border-radius:16px;overflow:hidden; border:1px solid var(--line-light);box-shadow:0 30px 70px -40px rgba(10,19,39,.4)} /* ============================================================ YOU BRING JUDGMENT (dark) ============================================================ */ .judg-head{max-width:640px} .judg-head h2{line-height:1.02} .judg-head h2 .g{color:var(--gold)} .judg-lead{color:var(--grey);opacity:.9;margin-top:22px;max-width:520px} .judg-cols{display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(28px,4vw,56px);margin-top:46px} .judg-cols .vr{background:var(--gold-line)} .judg-col h3{color:#fff;font-size:1.35rem;margin-bottom:22px;font-family:var(--f-head);font-weight:700} .jitem{display:flex;gap:14px;margin-bottom:24px} .jitem .jd{flex:0 0 auto;width:16px;height:16px;border-radius:50%;border:2px solid var(--gold); margin-top:4px} .jitem p{margin:0;color:var(--grey);opacity:.9} .jitem p b{color:#fff;font-weight:700} .judg-callout{max-width:900px;margin:36px auto 0;border:1px solid var(--gold-line);border-radius:14px; padding:24px 30px;display:flex;gap:20px;align-items:flex-start;background:rgba(47,67,102,.12)} .judg-callout .fic{flex:0 0 auto;width:30px;height:30px;color:var(--gold);margin-top:2px} .judg-callout .fic svg{width:100%;height:100%;stroke:var(--gold);fill:none} .judg-callout p{margin:0;color:var(--grey)} .judg-callout p b{color:#fff} .judg-quote{max-width:900px;margin:30px auto 0;background:var(--midnight);border-radius:14px; padding:34px 40px;display:flex;gap:20px;align-items:flex-start} .judg-quote .mk{font-family:Georgia,serif;color:var(--gold);font-size:3rem;line-height:.1;height:.6em} .judg-quote .qt{font-family:var(--f-head);font-weight:700;color:#fff;font-size:clamp(1.3rem,2.4vw,1.8rem); line-height:1.3;margin:0} .judg-quote .by{margin-top:16px;color:var(--grey)} .judg-quote .by b{color:var(--gold)} /* ============================================================ WHY ME (light, editorial) — reinstated from live page ============================================================ */ .why-grid{display:grid;grid-template-columns:1fr;gap:0;max-width:820px;margin:0 auto} .why-head{max-width:640px} .why-head h2 .g{color:var(--gold)} .why-body{margin-top:28px} .why-body p{color:var(--ink-soft);margin-bottom:1.1em} .why-quote{border-left:3px solid var(--gold);padding:6px 0 6px 22px;margin:26px 0; font-family:var(--f-head);font-weight:700;font-size:1.2rem;color:var(--ink);line-height:1.45} .why-quote + .why-answer{font-weight:700;color:var(--gold);font-family:var(--f-head);margin-bottom:1.1em} /* ============================================================ INCLUDED (light) ============================================================ */ .incl-head{max-width:640px} .incl-list{margin-top:44px;display:flex;flex-direction:column;gap:16px} .incl{background:#fff;border:1px solid var(--line-light);border-radius:16px;padding:30px 32px; display:grid;grid-template-columns:1fr 96px;gap:20px;align-items:start} .incl.core{background:#FBF7EE;border-color:var(--gold-line)} .incl .tag{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold); font-weight:700;margin-bottom:10px} .incl h3{font-size:1.5rem;margin-bottom:14px;line-height:1.15} .incl p{color:var(--ink-soft);font-size:1.02rem;line-height:1.55} .incl .checks{margin-top:14px;display:flex;flex-direction:column;gap:9px} .incl .checks li{display:flex;gap:11px;align-items:flex-start;font-size:.96rem;color:var(--ink)} .incl .checks li svg{flex:0 0 auto;width:20px;height:20px;margin-top:2px} .incl .visual{width:88px;height:88px;border-radius:50%;justify-self:end;display:flex; align-items:center;justify-content:center} .incl.core .visual{background:var(--navy)} .incl .visual.soft{background:var(--paper-2)} .incl .visual svg{width:40px;height:40px} .incl.core .visual svg{stroke:var(--gold);fill:none} .incl .visual.soft svg{stroke:var(--navy);fill:none} /* ============================================================ GUARANTEE (dark) ============================================================ */ .guar{max-width:1060px;margin:0 auto;border:1px solid var(--gold-line);border-radius:22px; padding:clamp(38px,5vw,64px);background:linear-gradient(160deg,rgba(47,67,102,.18),rgba(1,7,23,.2)); display:grid;grid-template-columns:auto 1fr auto;gap:clamp(32px,4.5vw,60px);align-items:center} /* seal badge — solid outer ring + dashed inner ring */ .guar-badge{width:216px;height:216px;border-radius:50%;border:1.5px solid rgba(233,235,241,.28); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px; margin:0 auto;position:relative;flex:0 0 auto} .guar-badge::before{content:"";position:absolute;inset:13px;border-radius:50%; border:1.5px dashed var(--gold-line)} .guar-badge .handshake{width:56px;height:56px;color:var(--gold)} .guar-badge .bt{font-family:var(--f-head);font-weight:700;color:var(--gold);text-align:center; text-transform:uppercase;font-size:1.28rem;line-height:1.08;letter-spacing:.02em} .guar-badge .bs{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--grey);opacity:.75} /* main column */ .guar-main{min-width:0} .guar-main h2{margin-bottom:0;line-height:1.1;font-size:clamp(1.7rem,3vw,2.5rem)} .guar-main h2 .g,.guar-main h2 em{color:var(--gold)} .guar-rule{display:block;width:56px;height:3px;background:var(--gold);border-radius:2px;margin:20px 0 24px} .guar-main p{color:var(--grey);line-height:1.62;max-width:470px} .guar-sign{margin-top:30px} /* gold is baked into the PNG — no CSS filter (avoids a Safari video-compositing trigger) */ .guar-sign .sig{display:block;height:66px;width:auto} .guar-sign .who{display:block;margin-top:8px;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase; color:var(--grey);font-weight:600} /* large headshot with gold ring */ .guar-headshot{flex:0 0 auto} .guar-headshot img{width:200px;height:200px;border-radius:50%;object-fit:cover;border:3px solid var(--gold);display:block} /* ============================================================ INVESTMENT / PRICING (light, calm) ============================================================ */ .invest{background:var(--paper)} .invest-card{max-width:900px;margin:0 auto;text-align:center} .invest-card h2{margin-bottom:0} .invest-card h2 .g{color:var(--gold)} .invest-body{max-width:660px;margin:28px auto 0;text-align:left;color:var(--ink-soft)} .invest-body p{margin-bottom:1em} .invest-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:40px auto 0;max-width:820px} .i3{background:#fff;border:1px solid var(--line-light);border-radius:16px;padding:34px 26px;text-align:center} .i3 .ic{width:62px;height:62px;border-radius:50%;background:var(--gold-soft);margin:0 auto 20px; display:flex;align-items:center;justify-content:center} .i3 .ic svg{width:26px;height:26px;stroke:var(--ink);fill:none} .i3 h4{font-size:1.28rem;margin-bottom:10px;font-family:var(--f-head);font-weight:700} .i3 p{font-size:.98rem;color:var(--ink-soft);margin:0;line-height:1.5} .invest-foot{font-size:.78rem;color:var(--ink-soft);text-align:center;margin:18px auto 0;opacity:.8} /* price box — the calmest moment; gold only on figure + CTA */ .pricebox{max-width:560px;margin:44px auto 0;background:#fff;border:1px solid var(--line-light); border-radius:18px;padding:44px 40px;text-align:center;box-shadow:0 20px 60px -40px rgba(10,19,39,.25)} .pricebox .fig{font-family:var(--f-head);font-weight:900;font-size:clamp(3.6rem,9vw,5.2rem); color:var(--gold);line-height:1;letter-spacing:-.02em} .pricebox .figlabel{color:var(--ink-soft);font-size:1rem;margin-top:8px} .pricebox .split{height:1px;width:70px;background:var(--line-light);margin:22px auto} .pricebox .plan{color:var(--ink);font-weight:600} .invest-rationale{max-width:660px;margin:34px auto 0;text-align:center;color:var(--ink-soft)} .invest-cta{text-align:center;margin-top:34px} .invest-cta .note{display:block;margin-top:14px;font-size:.86rem;color:var(--ink-soft)} /* ============================================================ FAQ (light) ============================================================ */ .faq-head{max-width:640px} .faq-head h2 .g{color:var(--gold)} .faqs{max-width:900px;margin:44px auto 0;display:flex;flex-direction:column;gap:12px} .faq{background:#fff;border:1px solid var(--line-light);border-radius:12px;overflow:hidden} .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between; align-items:center;gap:20px;padding:22px 26px;font-family:var(--f-head);font-weight:700; font-size:1.08rem;color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary:focus-visible{outline:2px solid var(--cobalt);outline-offset:-2px} .faq summary .pm{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform .2s ease} .faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--gold); border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)} .faq summary .pm::before{width:16px;height:2px} .faq summary .pm::after{width:2px;height:16px;transition:opacity .2s ease} .faq[open] summary .pm::after{opacity:0} .faq[open] summary{color:var(--gold)} .faq .fa{padding:0 26px 24px;color:var(--ink-soft);font-size:1rem;line-height:1.7} .faq .fa p{margin:0 0 .9em} .faq .fa ol{margin:.4em 0;padding-left:1.3em} .faq .fa li{margin:.2em 0} /* ============================================================ FINAL CTA (dark + circuit bookend) ============================================================ */ .final{ background: linear-gradient(180deg,rgba(0,8,26,.9),rgba(1,7,23,.94)), url('assets/hero-bg.webp') center/cover no-repeat, var(--navy); color:var(--grey);text-align:center;overflow:hidden; } .final .pill{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--gold-line); border-radius:40px;padding:8px 20px;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase; color:var(--gold);font-weight:600;margin-bottom:30px} .final .pill .dot{width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.7} .final h2{font-family:var(--f-display);font-weight:900;font-size:clamp(2.6rem,8vw,5rem);line-height:.98; color:#fff;margin-bottom:24px} .final h2 .g{color:var(--gold)} .final .lede{margin:0 auto 40px;color:var(--grey);max-width:620px} .final-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:900px;margin:46px auto 0; border:1px solid var(--gold-line);border-radius:14px;overflow:hidden} .fstat{padding:26px 18px;border-right:1px solid var(--gold-line)} .fstat:last-child{border-right:none} .fstat .ic{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--gold-line);margin:0 auto 12px; display:flex;align-items:center;justify-content:center} .fstat .ic svg{width:20px;height:20px;stroke:var(--gold);fill:none} .fstat .big{font-family:var(--f-head);font-weight:700;color:#fff;font-size:1.15rem} .fstat .sm{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);opacity:.7; margin-top:4px} .colophon{text-align:center;padding:26px 20px;background:var(--paper);color:var(--ink-soft); font-size:.92rem} /* ============================================================ VIDEO LIGHTBOX ============================================================ */ .lightbox{position:fixed;inset:0;z-index:100;background:rgba(1,7,23,.9);display:none; align-items:center;justify-content:center;padding:20px} .lightbox.open{display:flex} .lightbox .lb-inner{width:min(960px,100%);aspect-ratio:16/9;position:relative} .lightbox iframe{width:100%;height:100%;border:0;border-radius:12px;background:#000} .lightbox .lb-close{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.12);border:1px solid var(--gold-line);color:#fff;font-size:1.3rem; cursor:pointer;display:flex;align-items:center;justify-content:center} .lightbox .lb-close:hover{background:var(--gold);color:#0A1327} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:960px){ .problem-grid{grid-template-columns:1fr} .pain-grid{grid-template-columns:repeat(2,1fr)} .levels{grid-template-columns:repeat(2,1fr)} /* stacked grid: don't let card 4 break the row (it would overlap neighbours) */ .level.op{margin-top:0;margin-bottom:0} .build-grid{grid-template-columns:repeat(2,1fr)} .invest-3{grid-template-columns:repeat(3,1fr)} .chat{grid-template-columns:1fr} .chat-side{display:none} .guar{grid-template-columns:1fr;text-align:center;justify-items:center} .guar-main{order:2} .guar-headshot{order:3} .guar-main p{margin-left:auto;margin-right:auto} .guar-rule{margin-left:auto;margin-right:auto} .guar-sign .sig{margin-left:auto;margin-right:auto} .guar-main h2{text-align:center} } @media(max-width:760px){ .testimonials{grid-template-columns:1fr} .judg-cols{grid-template-columns:1fr} .judg-cols .vr{display:none} .final-stats{grid-template-columns:repeat(2,1fr)} .fstat:nth-child(2){border-right:none} .fstat:nth-child(1),.fstat:nth-child(2){border-bottom:1px solid var(--gold-line)} .incl{grid-template-columns:1fr} .incl .visual{justify-self:start} } @media(max-width:560px){ .pain-grid{grid-template-columns:1fr} .levels{grid-template-columns:1fr} .build-grid{grid-template-columns:1fr} .invest-3{grid-template-columns:1fr} .logo-lock{flex-direction:column;gap:12px} .rocky-card{align-items:flex-start} .does-row{align-items:flex-start} } @media(prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important} .btn,.vmedia .play{transition:none} }