/* ============================================================================ MantaOS — Landing page Aesthetic: "Deep water / calm control." The page descends from surface chaos (drowning in ops) to calm deep control. All brand color/type/space pulled from mantaos.tokens.css (--mos-*). Mobile-first. Flawless at 390px. Motion honors prefers-reduced-motion. ============================================================================ */ /* ----- page-local derived tokens (compose from --mos-*, never new hexes) --- */ :root{ /* deep-water atmosphere, built from the canonical dark "ground" tokens */ --deep-0:#091020; /* darkest, slightly below --mos-ground */ --deep-1:var(--mos-ground); /* #0f1728 */ --deep-2:var(--mos-ground-raise); /* #15203a */ --deep-line:var(--mos-ground-line); --deep-text:var(--mos-ground-text); --deep-muted:var(--mos-ground-muted); --deep-accent:var(--mos-ground-accent); /* lifted brand blue #5b8bff */ --maxw:1120px; --gutter:var(--mos-s-5); --header-h:60px; } /* ----- reset-ish --------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} /* Horizontal-overflow guard at the ROOT. `overflow-x:hidden` on ALONE is a known footgun — in several engines it doesn't actually constrain the scrollport, so a sub-pixel/over-extended child (e.g. the hero wave's right overhang under its translateX animation) can still make the document scrollable to the right, which paints the dark hero band in a thin strip on the right edge while the white bands stop at the viewport width. Clamping BOTH html + body (with max-width:100%) makes every full-width band — hero, wave divider, white sections, footer — bleed truly edge-to-edge with no dark gap on the right at any width, and kills any horizontal scroll. */ html{ -webkit-text-size-adjust:100%;scroll-behavior:smooth; overflow-x:hidden; max-width:100%; } @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}} body{ margin:0; font-family:var(--mos-sans); font-weight:400; color:var(--mos-ink); background:var(--mos-paper); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; max-width:100%; width:100%; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3,p,ul,figure{margin:0} ul{list-style:none;padding:0} button{font:inherit} /* ----- layout primitives -------------------------------------------------- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:clamp(56px,11vw,108px);position:relative} .section__head{max-width:40ch;margin-bottom:var(--mos-s-10)} .section__sub{color:var(--mos-muted);font-size:1.05rem;margin-top:var(--mos-s-3)} /* ----- typography scale --------------------------------------------------- */ h1{ font-family:var(--mos-sans); font-weight:800; font-size:clamp(2.1rem,8.4vw,4rem); line-height:1.04; letter-spacing:-.02em; } h2{ font-weight:800; font-size:clamp(1.6rem,5.6vw,2.6rem); line-height:1.1; letter-spacing:-.018em; } h3{font-weight:700;font-size:1.06rem;letter-spacing:-.01em} .eyebrow{ font-family:var(--mos-mono); font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--mos-blue-600); margin:0 0 var(--mos-s-4); } .eyebrow--light{color:var(--deep-accent)} .accent{color:var(--mos-brand)} [data-theme="deep"] .accent{color:var(--deep-accent)} .dot{ display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--mos-n-400);flex:0 0 auto; } .dot--ok{background:var(--mos-ok);box-shadow:0 0 0 3px var(--mos-ok-bg)} .dot--warn{background:var(--mos-warn);box-shadow:0 0 0 3px var(--mos-warn-bg)} /* ----- buttons ------------------------------------------------------------ */ .btn{ --b:var(--mos-brand); display:inline-flex;align-items:center;justify-content:center;gap:.5em; background:var(--b);color:#fff; font-weight:700;font-size:.95rem;letter-spacing:-.005em; padding:.78em 1.3em;border:0;border-radius:var(--mos-r-pill); cursor:pointer;white-space:nowrap; box-shadow:var(--mos-sh-sm), inset 0 1px 0 rgba(255,255,255,.18); transition:background var(--mos-base) var(--mos-ease), transform var(--mos-fast) var(--mos-ease), box-shadow var(--mos-base) var(--mos-ease); } .btn:hover{--b:var(--mos-brand-hover);transform:translateY(-1px);box-shadow:var(--mos-sh-md), inset 0 1px 0 rgba(255,255,255,.2)} .btn:active{transform:translateY(0)} .btn:focus-visible{outline:none;box-shadow:var(--mos-ring), var(--mos-sh-sm)} .btn--lg{padding:.92em 1.5em;font-size:1rem} .btn--sm{padding:.55em 1em;font-size:.86rem} .btn--block{width:100%} /* ============================================================================ HEADER ============================================================================ */ .site-header{ position:sticky;top:0;z-index:50; background:transparent; transition:background var(--mos-slow) var(--mos-ease), box-shadow var(--mos-slow) var(--mos-ease), border-color var(--mos-slow) var(--mos-ease); border-bottom:1px solid transparent; } .site-header[data-scrolled="true"]{ background:rgba(9,16,32,.82); -webkit-backdrop-filter:saturate(140%) blur(12px); backdrop-filter:saturate(140%) blur(12px); border-bottom-color:var(--deep-line); } .site-header__inner{ height:var(--header-h); display:flex;align-items:center;justify-content:space-between;gap:var(--mos-s-4); } /* brand lockup: manta glyph (left) + wordmark (right) */ .brand{display:inline-flex;align-items:center} .brand__mark{height:22px;width:auto} .brand--lockup{gap:.62em} .brand__glyph{ display:grid;place-items:center;flex:0 0 auto; color:var(--mos-white); /* glyph paths use currentColor — WHITE on the dark header */ /* subtle blue glow so the white mark stays crisp on the deep-water header */ filter:drop-shadow(0 1px 6px rgba(47,109,246,.45)); } .brand__glyph img{ height:26px;width:auto;color:inherit; transition:transform var(--mos-base) var(--mos-ease); } .brand:hover .brand__glyph img{transform:translateY(-1px) rotate(-4deg)} .site-footer .brand__mark{height:20px} .header-cta{box-shadow:var(--mos-sh-sm)} /* ============================================================================ 1 · HERO — deep-water surface, manta gliding ============================================================================ */ .hero{ position:relative;isolation:isolate; color:var(--deep-text); /* deep-ocean vertical gradient + a brand-blue light shaft from top */ background: radial-gradient(120% 80% at 70% -10%, rgba(91,139,255,.22) 0%, rgba(91,139,255,0) 55%), radial-gradient(90% 60% at 12% 8%, rgba(47,109,246,.18) 0%, rgba(47,109,246,0) 50%), linear-gradient(180deg, var(--deep-1) 0%, var(--deep-0) 64%, #060b16 100%); padding-top:calc(var(--header-h) + clamp(28px,8vw,64px)); /* extra bottom room gives the breaching manta a clean band to live in, below the signup form and above the wave divider (never overlapping) */ padding-bottom:clamp(104px,22vw,140px); overflow:hidden; margin-top:calc(var(--header-h) * -1); /* header overlays the hero */ } .hero__inner{position:relative;z-index:3} .hero .eyebrow--light{margin-bottom:var(--mos-s-5)} .hero h1{color:#fff;text-shadow:0 2px 30px rgba(6,11,22,.5)} .hero h1 .nb{display:none} .hero__lede{ max-width:34ch;margin-top:var(--mos-s-5); font-size:clamp(1.05rem,4vw,1.28rem); color:var(--deep-text);font-weight:400; } /* depth layers (decorative) */ .hero__depth{position:absolute;inset:0;z-index:1;pointer-events:none} /* faint moving caustics (light through water) */ .caustics{ position:absolute;inset:-20% -10%; background: radial-gradient(40% 30% at 30% 20%, rgba(147,180,255,.10), transparent 60%), radial-gradient(35% 28% at 75% 35%, rgba(91,139,255,.10), transparent 60%), radial-gradient(30% 24% at 50% 70%, rgba(47,109,246,.08), transparent 60%); filter:blur(8px); animation:caustic-drift 22s ease-in-out infinite alternate; } @keyframes caustic-drift{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(-3%,2%,0) scale(1.06)} } /* drifting plankton motes */ .motes span{ position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%; background:rgba(180,205,255,.5); filter:blur(.3px); animation:rise linear infinite; } .motes span:nth-child(1){left:8%;animation-duration:17s;animation-delay:0s;opacity:.5} .motes span:nth-child(2){left:20%;width:3px;height:3px;animation-duration:22s;animation-delay:3s;opacity:.4} .motes span:nth-child(3){left:33%;animation-duration:19s;animation-delay:6s;opacity:.55} .motes span:nth-child(4){left:46%;width:2px;height:2px;animation-duration:25s;animation-delay:1s;opacity:.35} .motes span:nth-child(5){left:57%;animation-duration:16s;animation-delay:8s;opacity:.5} .motes span:nth-child(6){left:68%;width:5px;height:5px;animation-duration:24s;animation-delay:4s;opacity:.45} .motes span:nth-child(7){left:78%;animation-duration:20s;animation-delay:7s;opacity:.5} .motes span:nth-child(8){left:88%;width:3px;height:3px;animation-duration:18s;animation-delay:2s;opacity:.4} .motes span:nth-child(9){left:95%;animation-duration:23s;animation-delay:9s;opacity:.45} .motes span:nth-child(10){left:14%;width:2px;height:2px;animation-duration:27s;animation-delay:5s;opacity:.3} @keyframes rise{ 0%{transform:translateY(0)} 100%{transform:translateY(-115vh)} } /* surface: the wave divider + the breaching manta, anchored to the hero base */ .surface{position:absolute;left:0;right:0;bottom:0;height:200px;z-index:2;pointer-events:none} /* surface waves at the bottom edge. The paper-fill wave is given a GENEROUS overhang on BOTH sides (-60px / +120px) so that even at its animated extreme (translateX(-24px)) the right edge still over-extends the hero by ~36px — the white surface is guaranteed to bleed past the viewport's right edge, so the dark hero band can never peek out as a strip on the right. The whole overhang is clipped by `.hero{overflow:hidden}`, so this is purely belt-and-braces coverage and adds no page overflow. */ .hero__waves{ /* full-bleed to the viewport, with ~30px overhang each side so the subtle wave-shift (translateX -24px) can never expose a right-edge gap. The containing block's left edge is at viewport 0, so left:-30px anchors it. */ position:absolute;left:-30px;bottom:-1px; width:calc(100vw + 60px);max-width:none;height:90px;z-index:2; } .hero__waves .wave--1{fill:var(--mos-paper);animation:wave-shift 14s ease-in-out infinite alternate} .hero__waves .wave--2{fill:rgba(91,139,255,.10);animation:wave-shift 18s ease-in-out infinite alternate-reverse} @keyframes wave-shift{from{transform:translateX(0)}to{transform:translateX(-24px)}} /* ---- BREACH: a manta caught mid-jump, arcing out of a wave crest ---- Robustness first: a tasteful STATIC breach, kept entirely inside the bottom wave band and OFF TO ONE SIDE, so it never overlaps the hero copy or the signup form/button at any width. The manta gently bobs up-and-down in place (a small loop that stays within the band) — no big arc that could rise into the CTA. The wave crest itself reads as the surface it broke through. Mobile: tucked into the bottom-LEFT corner, clear of the centered form. Desktop: moves to the bottom-RIGHT, clear of the left-aligned copy column. */ .breach{ position:absolute; left:4%; /* bottom-left corner on mobile, away from the form */ bottom:-52px; /* low — its base sits right on the wave line */ width:70px;height:82px; /* small + low so its top stays inside the breach band */ z-index:1; /* behind wave--1 (paper fill) so it emerges from the water */ } .breach__manta{ position:absolute;left:0;bottom:0;width:100%;height:auto; color:var(--mos-blue-300); /* sky manta on deep water (kept for any currentColor fallbacks) */ filter:drop-shadow(0 10px 20px rgba(20,40,90,.5)); transform-origin:50% 92%; opacity:1; --jump:100px; /* small breach: peeks out of the white surface, never into the copy */ /* a real breach: submerged rest → rises out of the crest with a lean → apex twist → falls back → brief rest, looping. Lives behind the wave fill + hero copy (z-index), so the big arc reads as a manta breaching in the background water (depth), not a collision with the foreground content. */ /* linear timing: the dense keyframe points below trace a smooth gravity arc themselves, so easing must NOT be re-applied per-segment (that's what made it staccato). */ /* Re-animated 2026-07-08 (right-edge gap fixed via full-bleed waves): breaches on a loop — jump 1 is a natural arc, jump 2 adds a full 360° flip, repeat. */ animation:breach-jump 10s linear infinite; } /* Smooth parabolic breach: fast off the surface, hangs at the apex, accelerates back down — gravity-like. Dense points = continuous arc, not steps. The submerged rest (and the rotation reset) happen behind the wave, out of sight. */ @keyframes breach-jump{ /* rest, submerged behind the wave (hidden) */ 0%, 5% {transform:translateY(14px) rotate(-12deg)} /* JUMP 1 — a natural breach: fast off the surface, hang at the apex, accelerate down */ 9% {transform:translateY(0) rotate(-8deg)} 14% {transform:translateY(calc(var(--jump) * -.60)) rotate(-3deg)} 20% {transform:translateY(calc(var(--jump) * -.94)) rotate(4deg)} 24% {transform:translateY(calc(var(--jump) * -1)) rotate(8deg)} /* apex — hangs */ 28% {transform:translateY(calc(var(--jump) * -.94)) rotate(12deg)} 35% {transform:translateY(calc(var(--jump) * -.55)) rotate(20deg)} 41% {transform:translateY(0) rotate(28deg)} /* re-enters */ 45% {transform:translateY(14px) rotate(32deg)} /* under, hidden */ /* rest */ 50%, 55% {transform:translateY(14px) rotate(-12deg)} /* JUMP 2 — same arc, but a full 360° flip over the top */ 59% {transform:translateY(0) rotate(-8deg)} 64% {transform:translateY(calc(var(--jump) * -.62)) rotate(70deg)} 71% {transform:translateY(calc(var(--jump) * -1)) rotate(180deg)} /* apex, inverted */ 78% {transform:translateY(calc(var(--jump) * -.60)) rotate(300deg)} 85% {transform:translateY(0) rotate(352deg)} /* re-enters, nearly round */ 89% {transform:translateY(14px) rotate(360deg)} /* under — flip complete */ /* rest (upright, hidden) */ 95%, 100%{transform:translateY(14px) rotate(360deg)} } /* a calm gliding drift for the deep-water mantas (transform/after-panel + final watermark). Subtle: gentle vertical sway with a faint lean, loops smoothly. */ @keyframes glide{ 0%,100%{transform:translateY(0) rotate(0deg)} 50% {transform:translateY(-10px) rotate(-2deg)} } /* the manta's lower body sits behind the opaque wave fill (it's "in the water"), so a separate splash/ripple at the base would be hidden behind the wave — the wave crest itself reads as the surface it broke through. Hidden, kept in the DOM so the markup is untouched. */ .breach__splash, .breach__ripple{display:none} @media (min-width:560px){ .breach{left:5%;width:80px;height:93px;bottom:-66px} .breach__manta{--jump:120px} } @media (min-width:860px){ /* on wide screens it breaches on the RIGHT, in the empty area beside the left-aligned copy column + form — a larger, freer arc reads cleanly here */ .breach{left:auto;right:7%;width:124px;height:142px;bottom:-120px} .breach__manta{--jump:150px} } /* hero signup */ .signup{margin-top:var(--mos-s-8)} .signup--hero{max-width:520px} .signup__row{display:flex;flex-direction:column;gap:var(--mos-s-3)} .signup__input{ flex:1 1 auto;width:100%; font-family:var(--mos-sans);font-size:1rem;color:var(--mos-ink); background:#fff; border:1px solid var(--mos-line); border-radius:var(--mos-r-pill); padding:.9em 1.2em; box-shadow:var(--mos-sh-sm); transition:border-color var(--mos-base) var(--mos-ease),box-shadow var(--mos-base) var(--mos-ease); } .signup__input::placeholder{color:var(--mos-n-400)} .signup__input:focus{outline:none;border-color:var(--mos-brand);box-shadow:var(--mos-ring)} .signup__note{ display:flex;align-items:center;gap:.55em; margin-top:var(--mos-s-3); font-size:.82rem;color:var(--deep-muted); } /* on light sections the note is darker */ .section:not([data-theme="deep"]) .signup__note{color:var(--mos-muted)} /* risk-reversal line right under the hero CTA — the offer's strength, up front */ .signup__guarantee{ display:flex;align-items:center;gap:.55em; margin-top:var(--mos-s-4); font-family:var(--mos-mono);font-size:.78rem;font-weight:500; letter-spacing:.01em;color:var(--deep-text); } .signup__guarantee .dot--ok{flex:0 0 auto} /* soft pointer down to the full offer (which now sits right below the hero) */ .hero__offerlink{ margin-top:var(--mos-s-6); font-size:.88rem;color:var(--deep-muted); } .hero__offerlink a{ color:var(--deep-accent);font-weight:700; border-bottom:1px solid rgba(91,139,255,.4); transition:border-color var(--mos-base) var(--mos-ease),color var(--mos-base) var(--mos-ease); } .hero__offerlink a:hover{color:#fff;border-bottom-color:#fff} @media (min-width:560px){ .signup__row{flex-direction:row;align-items:center} .signup__row .btn{flex:0 0 auto} } /* ============================================================================ 2 · A MORNING WITH MANTAOS — iPhone mockup + animated Telegram chat ============================================================================ */ .morning{background:var(--mos-paper)} .morning__grid{display:grid;gap:var(--mos-s-10);align-items:center} .morning__intro{max-width:42ch} .morning__sub{color:var(--mos-muted);font-size:1.08rem;margin-top:var(--mos-s-4)} .morning__caption{ margin-top:var(--mos-s-5); font-family:var(--mos-mono);font-size:.72rem;letter-spacing:.04em; color:var(--mos-n-500); /* was n-400 (2.4:1 on paper) — n-500 meets AA on the light section */ } /* ---- iPhone mockup + animated Telegram conversation -------------------- */ .phone-stage{display:flex;justify-content:center} /* device frame: titanium rail + matte back, tasteful (not skeuomorphic) */ .phone{ position:relative; width:min(300px,86vw); aspect-ratio:300 / 620; border-radius:46px; padding:11px; background: linear-gradient(160deg,#3a4254,#1b2230 38%,#0d1320 100%); box-shadow: 0 0 0 1.5px rgba(255,255,255,.06) inset, 0 2px 2px rgba(255,255,255,.10) inset, var(--mos-sh-lg), 0 40px 80px -28px rgba(20,40,90,.5); } /* side buttons */ .phone__btn{position:absolute;background:linear-gradient(180deg,#39414f,#222a38);border-radius:3px} .phone__btn--silent{left:-2px;top:108px;width:3px;height:26px} .phone__btn--vol-up{left:-2px;top:150px;width:3px;height:46px} .phone__btn--vol-dn{left:-2px;top:206px;width:3px;height:46px} .phone__btn--power{right:-2px;top:168px;width:3px;height:64px} /* screen */ .phone__screen{ position:relative;height:100%;width:100%; border-radius:36px;overflow:hidden; background:linear-gradient(180deg,#f3f6fb,#eef2f8); display:flex;flex-direction:column; box-shadow:0 0 0 2px #05080f; } /* dynamic island */ .phone__island{ position:absolute;top:9px;left:50%;transform:translateX(-50%); width:78px;height:22px;border-radius:var(--mos-r-pill); background:#05080f;z-index:5; } /* chat header */ .chat__bar{ display:flex;align-items:center;gap:var(--mos-s-3); padding:34px var(--mos-s-3) var(--mos-s-3); background:linear-gradient(180deg,var(--mos-blue-50),#fff); border-bottom:1px solid var(--mos-line); flex:0 0 auto; } /* round PHOTO avatar — the real Freddy badge (freddy.png already carries its own blue circle), so NO colored background behind it; just clip to a circle. */ .chat__avatar{ width:30px;height:30px;border-radius:50%;overflow:hidden; display:block;flex:0 0 auto; box-shadow:var(--mos-sh-xs), 0 0 0 2px #fff; } .chat__avatar img{width:100%;height:100%;object-fit:cover;display:block} .chat__id{display:flex;flex-direction:column;line-height:1.2;min-width:0} .chat__name{font-weight:700;font-size:.82rem;color:var(--mos-ink);letter-spacing:-.01em} .chat__status{ display:flex;align-items:center;gap:.4em; font-family:var(--mos-mono);font-size:.62rem;color:var(--mos-ok); } .chat__typing-dot{width:6px;height:6px;border-radius:50%;background:var(--mos-ok);box-shadow:0 0 0 3px var(--mos-ok-bg)} .chat__tg{ margin-left:auto;flex:0 0 auto; font-family:var(--mos-mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase; color:var(--mos-n-400); border:1px solid var(--mos-line);border-radius:var(--mos-r-pill); padding:.25em .55em; } /* the conversation — a complete static thread inside a fixed-height SCROLL area (flex:1, overflow-y:auto). Content is justified to the end so at rest it reads as a real Telegram thread scrolled to the bottom: the tail — decision → your tap → confirmation → adventure — stays in view, and any taller-than-screen overflow can be scrolled. During the animation the JS smoothly drives scrollTop so the newest bubble stays in view. No JS: every message + the decision buttons are present and pinned to the bottom at rest. */ .chat{ flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; /* tidy: hide the scrollbar (Firefox) */ padding:var(--mos-s-3) var(--mos-s-3) var(--mos-s-4); display:flex;flex-direction:column;justify-content:flex-end;gap:10px; /* subtle telegram-ish "paper" tint */ background: radial-gradient(120% 60% at 50% 0%, rgba(91,139,255,.05), transparent 50%), #eef2f8; } .chat::-webkit-scrollbar{width:0;height:0} /* hide the scrollbar (WebKit) */ .chat__day{ align-self:center;flex:0 0 auto; font-family:var(--mos-mono);font-size:.58rem;letter-spacing:.08em; color:var(--mos-n-500); background:rgba(255,255,255,.7); border-radius:var(--mos-r-pill);padding:.25em .7em; margin-bottom:2px; } /* a message row (incoming = avatar left) — fully visible at rest, no JS */ .msg{ display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:flex-end; flex:0 0 auto; /* don't compress under the flex-end justified column */ } /* ONE avatar for every incoming chat message: the real Freddy badge as a round PHOTO (freddy.png) — same treatment as .chat__avatar in the header. The image already includes its own blue circle, so no background tint here. */ .msg__av{ width:30px;height:30px;border-radius:50%;overflow:hidden;flex:0 0 auto; display:block; box-shadow:0 0 0 1.5px #fff, var(--mos-sh-xs); } .msg__av img{width:100%;height:100%;object-fit:cover;display:block} .msg__col{display:flex;flex-direction:column;gap:2px;min-width:0;align-items:flex-start} .msg__name{ font-size:.62rem;font-weight:700;letter-spacing:-.005em; color:var(--mos-blue-700);padding-left:2px; } /* chat bubble */ .bubble{ position:relative; background:#fff;color:var(--mos-n-800); font-size:.78rem;line-height:1.4; border-radius:14px 14px 14px 4px; padding:8px 10px 9px; box-shadow:var(--mos-sh-xs); max-width:215px; } .msg__time{ display:inline-block; font-family:var(--mos-mono);font-size:.52rem;color:var(--mos-n-400); margin-left:.4em;vertical-align:baseline;white-space:nowrap; } .msg__read{color:var(--mos-blue-400)} /* outgoing (you) — right aligned, brand-blue bubble */ .msg--me{grid-template-columns:1fr;justify-items:end} .msg--me .msg__col{align-items:flex-end} .bubble--me{ background:linear-gradient(180deg,var(--mos-blue-500),var(--mos-blue-600)); color:#fff; border-radius:14px 14px 4px 14px; box-shadow:0 4px 12px -4px rgba(47,109,246,.5); } .bubble--me .msg__time{color:rgba(255,255,255,.78)} /* the DECISION bubble — visually distinct (warm highlight + actions) */ .bubble--decision{ background:linear-gradient(180deg,#fff,var(--mos-warn-bg)); border:1px solid #f4d9ad; box-shadow:0 6px 18px -8px rgba(217,119,6,.4); } .bubble__flag{ display:inline-flex;align-items:center;gap:.4em; font-family:var(--mos-mono);font-size:.55rem;font-weight:500; letter-spacing:.06em;text-transform:uppercase; color:var(--mos-warn); margin-bottom:5px; } .bubble__actions{ display:flex;gap:6px;margin-top:9px; } .reply-btn{ flex:1 1 0; font-family:var(--mos-sans);font-size:.72rem;font-weight:700; color:var(--mos-n-700);background:#fff; border:1px solid var(--mos-line);border-radius:10px; padding:7px 8px;cursor:default; transition:transform var(--mos-fast) var(--mos-ease), background var(--mos-base) var(--mos-ease), border-color var(--mos-base) var(--mos-ease), color var(--mos-base) var(--mos-ease), box-shadow var(--mos-base) var(--mos-ease); } .reply-btn--primary{background:var(--mos-blue-50);color:var(--mos-blue-700);border-color:var(--mos-blue-200)} /* the picked reply lights up; the other dims, once chosen */ .reply-btn.is-picked{ background:linear-gradient(180deg,var(--mos-blue-500),var(--mos-blue-600)); color:#fff;border-color:var(--mos-blue-600); box-shadow:0 4px 12px -3px rgba(47,109,246,.5); transform:translateY(-1px); } .bubble__actions.is-chosen .reply-btn:not(.is-picked){opacity:.45} /* compose bar (decorative) */ .chat__compose{ display:flex;align-items:center;gap:var(--mos-s-2); padding:8px 10px;flex:0 0 auto; border-top:1px solid var(--mos-line); background:#fff; } .chat__field{ flex:1;font-size:.72rem;color:var(--mos-n-400); background:var(--mos-n-50);border:1px solid var(--mos-line); border-radius:var(--mos-r-pill);padding:6px 12px; } .chat__send{ width:28px;height:28px;border-radius:50%;flex:0 0 auto; background:var(--mos-brand);display:grid;place-items:center; } .chat__send img{width:13px;height:auto} /* ---- ANIMATION (progressive enhancement) ------------------------------------ DEFAULT (no JS, or JS failed): everything above is fully visible. The ONLY thing that hides a message for the entrance sequence is the `chat--anim` class, which the JS adds to the .chat root before it starts playing. Removing that class (the JS safety paths do this) instantly restores the full thread. While `chat--anim` is on, the chat fills TOP→BOTTOM (justify-content:flex-start) so each new bubble appends at the end like a live thread, and the JS drives scrollTop to keep the newest one in view. Un-revealed messages are collapsed out of layout (display:none) so the thread visibly grows. The moment the class is removed the resting rule (justify-content:flex-end, all msgs visible) wins, so the abort/final state is always the full thread pinned to the bottom. */ .typing{display:none} /* decorative; only shown while animating */ .chat--anim{justify-content:flex-start;scroll-behavior:smooth} .chat--anim .msg{display:none} /* collapsed out of layout until revealed */ /* a revealed incoming bubble: gentle pop + slide-up */ .chat--anim .msg.is-shown{ display:grid; animation:msg-in .42s var(--mos-ease) both; } /* the YOU reply slides up from the bottom on the right, as if just sent */ .chat--anim .msg--me.is-shown{ animation:msg-in-me .44s var(--mos-ease) both; } @keyframes msg-in{ from{opacity:0;transform:translateY(10px) scale(.97)} to {opacity:1;transform:none} } @keyframes msg-in-me{ from{opacity:0;transform:translateY(16px) scale(.98)} to {opacity:1;transform:none} } /* decision buttons: stay NEUTRAL during the live sequence; the resolved state (Hold pressed, Approve dimmed) is held back until JS adds `chat--resolved` after the you-reply lands. (In the static/no-JS DOM the actions already carry is-chosen/is-picked, so the resting thread shows the decision resolved.) */ .chat--anim:not(.chat--resolved) .bubble__actions.is-chosen .reply-btn:not(.is-picked){opacity:1} .chat--anim:not(.chat--resolved) .reply-btn.is-picked{ background:var(--mos-blue-50);color:var(--mos-blue-700);border-color:var(--mos-blue-200); box-shadow:none;transform:none; } /* the quick pressed/selected pop when Hold is chosen */ .chat--anim.chat--resolved .reply-btn.is-picked{animation:btn-press .28s var(--mos-ease) both} @keyframes btn-press{ 0% {transform:scale(.94)} 55% {transform:scale(1.04) translateY(-1px)} 100%{transform:translateY(-1px)} } /* typing indicator (bouncing dots) — shown only during the animated sequence */ .chat--anim .typing.is-on{ display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:flex-end; flex:0 0 auto; animation:msg-in .3s var(--mos-ease) both; } .typing__bubble{ display:inline-flex;align-items:center;gap:5px; background:#fff;box-shadow:var(--mos-sh-sm); border-radius:14px 14px 14px 4px; padding:11px 13px;width:max-content; } .typing__bubble span{ width:8px;height:8px;border-radius:50%;background:var(--mos-blue-400); /* prominent, noticeable bounce — bigger dots, larger travel, staggered */ animation:chat-dot 1.3s var(--mos-ease, ease-in-out) infinite; } .typing__bubble span:nth-child(2){animation-delay:.18s} .typing__bubble span:nth-child(3){animation-delay:.36s} @keyframes chat-dot{ 0%,70%,100%{transform:translateY(0) scale(1);opacity:.45} 35%{transform:translateY(-7px) scale(1.12);opacity:1} } @media (min-width:860px){ .morning__grid{grid-template-columns:1.05fr .95fr;gap:var(--mos-s-12)} .phone-stage{justify-content:flex-end} } /* ============================================================================ 3 · THE FLEET THAT RUNS IT — constellation of agent roles ============================================================================ */ .fleet-sec{ background: radial-gradient(120% 60% at 50% -8%, var(--mos-blue-50), transparent 60%), var(--mos-n-50); border-block:1px solid var(--mos-line); } .fleet{display:grid;grid-template-columns:1fr;gap:var(--mos-s-4)} .agent{ position:relative; background:#fff; border:1px solid var(--mos-line); border-radius:var(--mos-r-xl); padding:var(--mos-s-8) var(--mos-s-6); box-shadow:var(--mos-sh-xs); text-align:center; transition:transform var(--mos-base) var(--mos-ease), box-shadow var(--mos-base) var(--mos-ease), border-color var(--mos-base) var(--mos-ease); } .agent:hover{transform:translateY(-3px);box-shadow:var(--mos-sh-md);border-color:var(--mos-blue-200)} /* round avatar — real agent, with a subtle brand-blue ring */ .agent__avatar{ display:grid;place-items:center; width:84px;height:84px;border-radius:50%; margin:0 auto var(--mos-s-5); background:var(--mos-blue-50); /* tidy double-ring: white gap, then brand-blue halo */ box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--mos-blue-200), var(--mos-sh-sm); transition:box-shadow var(--mos-base) var(--mos-ease); } .agent__avatar img{ width:72px;height:72px;border-radius:50%; object-fit:cover;display:block; } .agent:hover .agent__avatar{ box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--mos-brand), var(--mos-sh-md); } .agent h3{margin-bottom:var(--mos-s-2)} .agent p{color:var(--mos-muted);font-size:.94rem;max-width:30ch;margin-inline:auto} .fleet__foot{ display:flex;align-items:center;justify-content:center;gap:.6em; margin-top:var(--mos-s-8); font-family:var(--mos-mono);font-size:.74rem;color:var(--mos-n-600); /* was muted/n-500 (4.4:1 on the tinted fleet band) — n-600 clears AA */ text-align:center; } @media (min-width:560px){ .fleet{grid-template-columns:repeat(2,1fr)} } @media (min-width:860px){ .fleet{grid-template-columns:repeat(3,1fr);gap:var(--mos-s-6)} } /* ============================================================================ 4 · FOUNDER TRANSFORMATION — drowning → owning it ============================================================================ */ .transform{ color:var(--deep-text); background: radial-gradient(90% 70% at 80% 0%, rgba(91,139,255,.16), transparent 55%), linear-gradient(180deg, var(--deep-0) 0%, var(--deep-1) 100%); text-align:center; } .transform .eyebrow--light{display:inline-block} .transform__line{ color:#fff;max-width:22ch;margin-inline:auto; font-size:clamp(1.5rem,5.4vw,2.5rem); } .transform__body{ max-width:46ch;margin:var(--mos-s-5) auto 0; font-size:clamp(1.02rem,3.6vw,1.18rem); line-height:1.6;color:var(--deep-text); } .transform__body strong{color:#fff;font-weight:700} .ba{ display:grid;grid-template-columns:1fr;gap:var(--mos-s-4); align-items:stretch; margin:var(--mos-s-10) auto 0; max-width:760px; text-align:left; } .ba__panel{ background:rgba(255,255,255,.04); border:1px solid var(--deep-line); border-radius:var(--mos-r-xl); padding:var(--mos-s-5); overflow:hidden; } .ba__panel--after{ background: radial-gradient(120% 90% at 50% 0%, rgba(91,139,255,.18), transparent 60%), rgba(91,139,255,.06); border-color:rgba(91,139,255,.3); } .ba__art{ position:relative;height:150px;border-radius:var(--mos-r-lg); margin-bottom:var(--mos-s-4);overflow:hidden; display:grid;place-items:center; } .ba__art--chaos{ background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px), linear-gradient(180deg,#1a2236,#0d1424); } .ba__silhouette{ font-size:3rem;color:rgba(229,72,77,.7);font-weight:700; position:relative;z-index:2;line-height:1; } /* decorative rising air-bubbles in the "before/chaos" panel. SCOPED to .ba__art--chaos so this never collides with the chat .bubble (same class name, different component) — keeping chat bubbles solid + square. */ .ba__art--chaos .bubble{ position:absolute;border-radius:50%; border:1.5px solid rgba(180,205,255,.4); background:rgba(180,205,255,.06); box-shadow:none;max-width:none;padding:0; animation:bubble-up linear infinite; } .ba__art--chaos .bubble:nth-child(1){left:14%;bottom:-12px;width:10px;height:10px;animation-duration:5s;animation-delay:0s} .ba__art--chaos .bubble:nth-child(2){left:30%;bottom:-12px;width:6px;height:6px;animation-duration:4s;animation-delay:1.2s} .ba__art--chaos .bubble:nth-child(3){left:52%;bottom:-12px;width:14px;height:14px;animation-duration:6s;animation-delay:.5s} .ba__art--chaos .bubble:nth-child(4){left:68%;bottom:-12px;width:7px;height:7px;animation-duration:4.6s;animation-delay:2s} .ba__art--chaos .bubble:nth-child(5){left:82%;bottom:-12px;width:11px;height:11px;animation-duration:5.4s;animation-delay:.8s} .ba__art--chaos .bubble:nth-child(6){left:44%;bottom:-12px;width:5px;height:5px;animation-duration:3.8s;animation-delay:2.6s} @keyframes bubble-up{ 0%{transform:translateY(0);opacity:0} 15%{opacity:1} 100%{transform:translateY(-160px);opacity:0} } .ba__art--calm{ background: radial-gradient(80% 120% at 50% 120%, rgba(9,16,32,.7), transparent 60%), linear-gradient(180deg,#16223e,#0c1530); } .ba__manta{ width:96px;height:auto;color:var(--mos-blue-300); /* light-blue manta, crisp on the dark calm panel */ filter:drop-shadow(0 12px 24px rgba(20,40,90,.5)); animation:glide 16s ease-in-out infinite; } .ba figcaption{ display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em; font-size:.96rem;color:var(--deep-text);line-height:1.45; } .ba__tag{ font-family:var(--mos-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase; padding:.25em .6em;border-radius:var(--mos-r-pill);font-weight:500;flex:0 0 auto; } .ba__tag--before{background:var(--mos-err-bg);color:var(--mos-err)} .ba__tag--after{background:rgba(91,139,255,.16);color:var(--deep-accent)} .ba__arrow{ display:grid;place-items:center;color:var(--deep-accent); transform:rotate(90deg); } .transform__sig{ margin-top:var(--mos-s-8); font-family:var(--mos-mono);font-size:.78rem;letter-spacing:.02em; color:var(--deep-muted); } @media (min-width:760px){ .ba{grid-template-columns:1fr auto 1fr;align-items:center} .ba__arrow{transform:none} } /* ============================================================================ 5 · ICP FILTER — the one-liner ============================================================================ */ .filter{ background:var(--mos-ink); text-align:center; padding-block:clamp(64px,13vw,120px); } .filter__statement{ max-width:18ch;margin-inline:auto; font-weight:800;letter-spacing:-.02em;line-height:1.12; font-size:clamp(1.6rem,6.4vw,2.7rem); color:#fff; } .filter .yes{display:block;color:var(--deep-accent);margin-top:.15em} .filter .no{display:block;color:var(--mos-n-400);font-weight:700;margin-top:.35em;font-size:.62em} /* ============================================================================ 6 · THE OFFER — the Grand Slam offer ============================================================================ */ .offer{background:var(--mos-paper)} .offer .section__head{max-width:46ch;margin-inline:auto;text-align:center} .offer__grid{display:grid;grid-template-columns:1fr;gap:var(--mos-s-6);align-items:start} /* value stack */ .stack{ background:#fff;border:1px solid var(--mos-line); border-radius:var(--mos-r-xl); padding:var(--mos-s-6);box-shadow:var(--mos-sh-sm); } .stack__head{ font-family:var(--mos-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase; color:var(--mos-muted);margin-bottom:var(--mos-s-5); } .stack__list{display:flex;flex-direction:column} .stack__item{ display:grid;grid-template-columns:auto 1fr;column-gap:var(--mos-s-3); align-items:start; padding:var(--mos-s-4) 0; border-bottom:1px dashed var(--mos-line); } .stack__item:last-child{border-bottom:0;padding-bottom:0} .stack__check{ display:grid;place-items:center; width:24px;height:24px;border-radius:50%; background:var(--mos-ok-bg);color:var(--mos-ok); font-size:.78rem;font-weight:700;flex:0 0 auto;margin-top:.1em; } .stack__txt{display:flex;flex-direction:column;gap:.15em} .stack__txt strong{font-weight:700;font-size:1rem;color:var(--mos-ink);letter-spacing:-.01em} .stack__desc{color:var(--mos-muted);font-size:.9rem;line-height:1.45} .stack__item--core{ background:linear-gradient(180deg,var(--mos-blue-50),transparent); margin:0 calc(var(--mos-s-3) * -1); padding:var(--mos-s-4) var(--mos-s-3); border-radius:var(--mos-r-md); border-bottom:1px solid var(--mos-blue-100); } .stack__item--core .stack__check{background:var(--mos-blue-100);color:var(--mos-brand);font-size:.7rem} .stack__item--core .stack__txt strong{color:var(--mos-blue-800)} /* anchor block */ .anchor{margin-top:var(--mos-s-6);padding-top:var(--mos-s-5);border-top:1px solid var(--mos-line)} .anchor__lead{font-size:.9rem;color:var(--mos-muted);margin-bottom:var(--mos-s-3)} .anchor__rows{display:flex;flex-direction:column;gap:var(--mos-s-2)} .anchor__rows li{ display:flex;justify-content:space-between;align-items:baseline;gap:var(--mos-s-4); font-size:.94rem;color:var(--mos-n-700); } .anchor__rows b{font-family:var(--mos-mono);font-weight:500;color:var(--mos-n-500);white-space:nowrap} /* price card */ .price-card{ position:relative;overflow:hidden; color:var(--deep-text); background: radial-gradient(120% 80% at 100% 0%, rgba(91,139,255,.22), transparent 55%), linear-gradient(180deg,var(--deep-2),var(--deep-1)); border:1px solid rgba(91,139,255,.25); border-radius:var(--mos-r-xl); padding:var(--mos-s-6); box-shadow:var(--mos-sh-lg); } .price-card__kicker{ display:inline-block; font-family:var(--mos-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase; color:var(--deep-accent); background:rgba(91,139,255,.12);border:1px solid rgba(91,139,255,.25); border-radius:var(--mos-r-pill);padding:.3em .8em; margin-bottom:var(--mos-s-4); } .price-card__price{display:flex;align-items:baseline;gap:.35em;color:#fff} .price-card__amt{font-size:clamp(2.6rem,11vw,3.4rem);font-weight:800;letter-spacing:-.03em;line-height:1} .price-card__per{font-size:1rem;color:var(--deep-muted);font-weight:500} .price-card__note{margin-top:var(--mos-s-3);font-size:.92rem;color:var(--deep-text)} /* founder-offer card (repurposed price card — no number, value framing only) */ .founder-card__title{ color:#fff;font-weight:800;letter-spacing:-.02em;line-height:1.15; font-size:clamp(1.4rem,5.4vw,1.7rem); } .founder-card__note{margin-top:var(--mos-s-3);font-size:.94rem;color:var(--deep-text);line-height:1.5} /* price-card header — pricing left, guarantee seal right */ .price-card__top{ display:flex;justify-content:space-between;align-items:center; gap:var(--mos-s-5); } .price-card__pricing{min-width:0} @media (max-width:559px){ .seal__badge svg{width:84px;height:84px} } /* guarantee seal */ .seal{ display:flex;gap:var(--mos-s-4);align-items:center; margin-top:var(--mos-s-5);padding-top:var(--mos-s-5); border-top:1px solid var(--deep-line); } .seal__badge{flex:0 0 auto} /* only the arc text rotates — the 90/DAYS core stays upright */ .seal__spin{transform-box:view-box;transform-origin:center;animation:seal-spin 44s linear infinite} .seal__ring-out{fill:none;stroke:var(--deep-accent);stroke-width:1.5;opacity:.5} .seal__ring-in{fill:rgba(91,139,255,.08);stroke:var(--deep-accent);stroke-width:1;opacity:.7} .seal__arc-text{fill:var(--deep-accent);font-family:var(--mos-mono);font-size:7.4px;letter-spacing:.22em;font-weight:500} .seal__big{fill:#fff;font-family:var(--mos-sans);font-weight:800;font-size:30px;letter-spacing:-.02em} .seal__sub{fill:var(--deep-accent);font-family:var(--mos-mono);font-size:8px;letter-spacing:.24em} .seal__sub2{fill:var(--deep-muted);font-family:var(--mos-mono);font-size:6.6px;letter-spacing:.16em} /* legacy seals in s1–s4 drafts */ @keyframes seal-spin{to{transform:rotate(360deg)}} .seal__title{font-weight:700;color:#fff;font-size:1rem;letter-spacing:-.01em} .seal__body{margin-top:.3em;font-size:.88rem;color:var(--deep-text);line-height:1.5} /* scarcity */ .scarcity{display:flex;flex-direction:column;gap:var(--mos-s-3);margin-top:var(--mos-s-6)} .scarcity li{ display:grid;grid-template-columns:auto 1fr;column-gap:.7em;align-items:start; font-size:.9rem;color:var(--deep-text);line-height:1.45; } .scarcity__dot{margin-top:.45em} .price-card .btn{margin-top:var(--mos-s-5)} .price-card__cta-note{ margin-top:var(--mos-s-3);text-align:center; font-size:.85rem;line-height:1.5;color:var(--deep-muted); max-width:38ch;margin-inline:auto; } @media (min-width:880px){ .offer__grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto;gap:var(--mos-s-8)} } /* ============================================================================ 7 · FINAL CTA — back in deep water ============================================================================ */ .final{ position:relative;isolation:isolate;overflow:hidden; color:var(--deep-text);text-align:center; background: radial-gradient(100% 80% at 50% 120%, rgba(91,139,255,.2), transparent 55%), linear-gradient(180deg, var(--deep-1) 0%, var(--deep-0) 100%); } .final__depth{position:absolute;inset:0;z-index:0;pointer-events:none;display:grid;place-items:center} .final__manta{ width:min(70vw,260px);opacity:.14;color:var(--mos-blue-300); /* faint light-blue watermark, never a dark shape */ animation:glide 18s ease-in-out infinite; } .final__inner{position:relative;z-index:1} .final h2{color:#fff} .final__lede{ max-width:40ch;margin:var(--mos-s-4) auto 0; font-size:1.1rem;color:var(--deep-text); } .final .signup{margin-inline:auto} .final .signup__note{justify-content:center} /* ============================================================================ FOOTER ============================================================================ */ .site-footer{ background:var(--deep-0);color:var(--deep-muted); border-top:1px solid var(--deep-line); padding-block:var(--mos-s-8); } .site-footer__inner{ display:flex;flex-direction:column;gap:var(--mos-s-4); align-items:flex-start; } .site-footer__meta{font-size:.85rem;color:var(--deep-muted)} .site-footer__meta a{color:var(--deep-accent)} .site-footer__meta a:hover{text-decoration:underline} @media (min-width:560px){ .site-footer__inner{flex-direction:row;justify-content:space-between;align-items:center} } /* ============================================================================ SCROLL REVEAL (progressive enhancement) ============================================================================ */ .reveal{opacity:0;transition:opacity .5s var(--mos-ease)} .reveal.is-in{opacity:1} /* ============================================================================ REDUCED MOTION — kill all ambient/scroll motion ============================================================================ */ @media (prefers-reduced-motion: reduce){ .caustics,.motes span,.hero__waves .wave--1,.hero__waves .wave--2, .breach__splash,.breach__ripple, .bubble,.ba__manta,.seal__spin,.final__manta,.typing__bubble span{animation:none !important} .reveal{opacity:1;transform:none;transition:none} /* defense-in-depth: even if chat--anim were applied, the thread shows in full, pinned to the bottom, with no motion; the typing decoration stays hidden. */ .chat--anim{justify-content:flex-end !important;scroll-behavior:auto !important} .chat--anim .msg{display:grid !important;opacity:1 !important;transform:none !important;animation:none !important} .chat--anim .typing,.typing{display:none !important} .reply-btn,.reply-btn.is-picked{animation:none !important} .btn,.agent,.signup__input{transition:none} .motes,.caustics{display:none} /* hide the splash/ripple decoration; show a single static breaching pose */ .breach__splash,.breach__ripple{display:none} .breach__manta{ animation:none !important;opacity:1; /* a single clean static breaching pose, mid-arc: risen out of the crest with a twist (no loop). Uses --jump so it scales with the breakpoint, matching the live apex it would otherwise reach. */ transform:translateY(calc(var(--jump) * -.62)) rotate(18deg); } } /* ============================================================= */ /* PIT — 23:47 night section (working IN the business) */ /* Dark mirror of the light 06:42 morning section. */ /* ============================================================= */ .pit{ color:var(--deep-text); background: radial-gradient(90% 70% at 15% -10%, rgba(91,139,255,.10), transparent 60%), linear-gradient(180deg, var(--deep-0) 0%, var(--deep-1) 100%); } .pit__grid{display:grid;gap:var(--mos-s-10);align-items:center} .pit__intro{max-width:42ch} .pit__intro h2{color:var(--deep-text)} .pit__sub{color:var(--deep-muted);font-size:1.08rem;margin-top:var(--mos-s-4)} .pit__sub em{font-style:italic;color:var(--deep-text)} @media (min-width:860px){ .pit__grid{grid-template-columns:.95fr 1.05fr;gap:var(--mos-s-12)} .phone-stage--pit{justify-content:flex-start} } /* On mobile, copy first, phone second (phone is first in DOM for desktop) */ @media (max-width:859.98px){ .pit__grid{display:flex;flex-direction:column} .pit__intro{order:-1} } /* --- the 23:47 lockscreen --- */ .phone__screen--lock{ background: radial-gradient(120% 60% at 50% -10%, rgba(47,109,246,.16), transparent 55%), linear-gradient(180deg,#0c1526 0%,#080d18 62%,#05080f 100%); justify-content:flex-start; padding:16px 12px 14px; } .lock__manta{position:absolute;right:-34px;bottom:-24px;width:180px;height:auto;opacity:.07;pointer-events:none} .lock__clock{ margin-top:36px;text-align:center; font-size:54px;font-weight:800;letter-spacing:.01em;line-height:1; color:#e8eefb; } .lock__date{ text-align:center;margin-top:6px; font-family:var(--mos-mono);font-size:.68rem;letter-spacing:.06em; color:#8fa0bd; } .lock__stack{display:flex;flex-direction:column;gap:7px;margin-top:16px;position:relative;z-index:1} .notif{ display:flex;gap:8px;align-items:flex-start; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09); border-radius:13px;padding:8px 10px; font-size:.66rem;line-height:1.35;color:#cfd9ec; backdrop-filter:blur(6px); } .notif__dot{flex:none;width:7px;height:7px;border-radius:50%;margin-top:4px} .notif__txt{min-width:0} .notif__txt b{display:block;font-size:.66rem;font-weight:700;color:#fff} .notif time{margin-left:auto;flex:none;font-family:var(--mos-mono);font-size:.56rem;color:#8fa0bd;padding-top:1px} .notif--personal{border-color:rgba(255,118,118,.4);background:rgba(255,118,118,.08)} .lock__more{ margin-top:10px;text-align:center; font-family:var(--mos-mono);font-size:.62rem;letter-spacing:.05em; color:#8fa0bd; } /* --- the flow: bottleneck vs CEO --- */ .flow{display:grid;gap:var(--mos-s-6);margin-top:var(--mos-s-12);align-items:stretch} @media (min-width:860px){.flow{grid-template-columns:1fr auto 1fr;gap:var(--mos-s-8)}} .flow__panel{ background:rgba(255,255,255,.04); border:1px solid var(--deep-line); border-radius:18px; padding:var(--mos-s-6); } .flow__label{ font-family:var(--mos-mono);font-size:.7rem;font-weight:600; letter-spacing:.1em;text-transform:uppercase; } .flow__label--warn{color:#ffb020} .flow__label--ok{color:var(--deep-accent)} .flow__cap{font-size:.88rem;color:var(--deep-muted);margin-top:var(--mos-s-3)} .flow__arrow{display:none;align-self:center;font-size:30px;color:var(--deep-accent)} @media (min-width:860px){.flow__arrow{display:block}} .flow svg{width:100%;height:auto;display:block;margin-top:var(--mos-s-4)} .flow svg text{font-family:var(--mos-sans);font-size:11px;fill:#c7d2e8} .flow__chips rect{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.14)} .flow__you{font-weight:800;font-size:14px;fill:#fff} .flow__small{font-size:9px;fill:#8fa0bd} .flow__small--hl{fill:#9fc0ff} .flow__brand{font-weight:800;font-size:15px;fill:#fff} /* ============================================================= */ /* $699 REFACTOR — price conversion line + ledger "you pay" row */ /* ============================================================= */ .price-card__conv{ margin-top:var(--mos-s-2); font-size:.92rem;line-height:1.45; color:var(--deep-muted); } /* offer ledger: the highlighted MantaOS "you pay" row (light section) */ .anchor__rows--pay{margin-bottom:6px} .anchor__rows li.anchor__pay{ background:rgba(47,109,246,.07); border:1px solid rgba(47,109,246,.28); border-radius:var(--mos-r-md); padding:.6em .8em; font-weight:700;color:var(--mos-ink); } .anchor__rows--pay b{color:var(--mos-brand);font-weight:700} .anchor__paynote{ font-family:var(--mos-mono);font-size:.76rem;color:var(--mos-muted); margin:0 0 var(--mos-s-5); } /* ============================================================= */ /* THE QUESTION — priceless time-worth section (deep, centered) */ /* ============================================================= */ .question{ color:var(--deep-text);text-align:center; background: radial-gradient(90% 70% at 50% 0%, rgba(91,139,255,.13), transparent 60%), linear-gradient(180deg,var(--deep-1),var(--deep-0)); } .question .wrap{max-width:36rem} .question__title{ color:#fff;font-weight:800;letter-spacing:-.02em;line-height:1.12; font-size:clamp(1.7rem,6vw,2.5rem);margin-top:var(--mos-s-3); } .question__body{ margin-top:var(--mos-s-5);font-size:1.08rem;line-height:1.6;color:var(--deep-text); } .question__body strong{display:block;margin-top:1.15em;color:#5b8bff;font-weight:700} /* ============================================================= */ /* PIT as a LIGHT section (2026-07-08 — background alternation). */ /* The dark 23:47 phone + flow diagram stay dark elements on the */ /* lighter section, keeping the "pain" weight. */ /* ============================================================= */ .pit{ color:var(--mos-ink); background: radial-gradient(90% 60% at 15% -12%, var(--mos-blue-100), transparent 62%), var(--mos-n-100); border-block:1px solid var(--mos-line); } .pit .eyebrow--light{color:var(--mos-blue-600)} .pit__intro h2{color:var(--mos-ink)} .pit__sub{color:var(--mos-muted)} .pit__sub em{color:var(--mos-ink);font-style:italic} /* flow diagram, restyled for a light background */ .pit .flow__panel{background:#fff;border:1px solid var(--mos-line)} .pit .flow__cap{color:var(--mos-muted)} .pit .flow svg text{fill:var(--mos-n-700)} .pit .flow__chips rect{fill:var(--mos-n-100);stroke:var(--mos-n-200)} .pit .flow__you{fill:var(--mos-ink)} .pit .flow__small{fill:var(--mos-n-500)} .pit .flow__small--hl{fill:var(--mos-brand)} .pit .flow__brand{fill:var(--mos-ink)} /* ── PIT lockscreen: live-arrival animation ────────────────────────────── Progressive enhancement. JS confirms motion is allowed, then adds .phone--lockanim (hide notifs for the cascade) → .lock-live (cascade in) → .lock-shown (guaranteed final visible floor). With no JS or prefers-reduced-motion none of these classes exist and the lockscreen stays in its default static, fully-visible state. */ .pit .phone--lockanim .notif{opacity:0;transform:translateY(-12px) scale(.985)} .pit .phone--lockanim.lock-live .notif{animation:lock-notif-in .52s cubic-bezier(.22,1,.36,1) forwards} .pit .phone--lockanim.lock-live .notif:nth-child(1){animation-delay:.10s} .pit .phone--lockanim.lock-live .notif:nth-child(2){animation-delay:.30s} .pit .phone--lockanim.lock-live .notif:nth-child(3){animation-delay:.50s} .pit .phone--lockanim.lock-live .notif:nth-child(4){animation-delay:.70s} .pit .phone--lockanim.lock-live .notif:nth-child(5){animation-delay:.90s} .pit .phone--lockanim.lock-live .notif:nth-child(6){animation-delay:1.10s} .pit .phone--lockanim.lock-shown .notif:not(.notif--new){opacity:1;transform:none} @keyframes lock-notif-in{0%{opacity:0;transform:translateY(-12px) scale(.985)}60%{opacity:1}100%{opacity:1;transform:none}} .pit .notif.is-fresh{animation:lock-fresh 1.1s ease} @keyframes lock-fresh{0%{box-shadow:0 0 0 1.5px rgba(120,150,255,.6)}100%{box-shadow:0 0 0 1.5px rgba(120,150,255,0)}} .pit .lock__clock.is-tick,.pit .lock__more.is-tick{animation:lock-tick .45s ease} @keyframes lock-tick{0%{opacity:.5}100%{opacity:1}} /* PIT lockscreen: the endless incoming feed — new notifs prepend at the top and cycle; the oldest slides out the bottom (screen clips overflow). */ .pit .notif--new{opacity:0;transform:translateY(-12px) scale(.98)} .pit .notif--new.play{animation:lock-notif-in .5s cubic-bezier(.22,1,.36,1) forwards, lock-fresh 1.2s ease} .pit .notif.leaving{animation:lock-leave .34s ease forwards;pointer-events:none} @keyframes lock-leave{to{opacity:0;transform:translateY(8px) scale(.97)}} /* "From the founder" quote: brighten the keyword pops for the dark bg + give the longer quote a comfortable measure. */ .transform .accent{color:var(--deep-accent)} .transform__line{max-width:26ch;font-size:clamp(1.45rem,4.8vw,2.3rem);line-height:1.28}