/* ==========================================================================
JS TradVentures — AI X Trading Landing Page
FOUNDATION LAYER (see DESIGN.md for the full system)
Order: 1) Tokens 2) Responsive spacing 3) Reset 4) Base elements
5) Layout primitives 6) Typography helpers 7) Utilities
========================================================================== */
/* ==========================================================================
1. TOKEN CONFIG — define values once; reference by name everywhere
========================================================================== */
:root {
/* ---- Primitive: blue ---- */
--blue-50:#EAF1FC; --blue-100:#D6E3FA; --blue-200:#B9CDEE; --blue-300:#7FB0FF;
--blue-400:#3D78DB; --blue-500:#1C56C9; --blue-600:#054EBD; --blue-700:#1C45AC;
--blue-800:#0B3880; --blue-900:#093883;
/* ---- Primitive: red (CTA) ---- */
--red-500:#DD0E10; --red-600:#BE0B0D;
/* ---- Primitive: dark navies ---- */
--dark-900:#010916; --dark-850:#010B1A; --dark-800:#0A0E18;
/* ---- Primitive: neutrals ---- */
--white:#FFFFFF; --paper:#FDFDFD; --grey-50:#F5F6F8; --grey-75:#EAEEF4; --grey-100:#F3F6F6;
--grey-200:#E1E1E2; --grey-300:#CBD2DC; --grey-500:#5B6677; --grey-700:#334155;
/* ---- Primitive: text ---- */
--ink:#0F0F10; --ink-navy:#12213E; --text-body:#334155;
--on-dark:#FFFFFF; --on-dark-muted:#AEBFD6;
/* ---- Primitive: status ---- */
--gold:#F9C334; --gold-d:#E9B924; --green:#3CC655;
/* ---- Semantic: background ---- */
--bg-page:var(--grey-50);
--bg-surface:var(--white);
--bg-subtle:var(--grey-75); /* card fill slightly darker than the page bg */
--bg-band-dark:var(--dark-900);
--bg-band-chart:var(--dark-850);
--bg-band-stats:var(--dark-800);
--bg-tint:var(--blue-50);
--bg-promo:var(--blue-800);
/* ---- Semantic: text ---- */
--text-primary:var(--ink);
--text-title:var(--ink-navy);
--text-secondary:var(--text-body);
--text-muted:var(--grey-500);
--text-on-dark:var(--on-dark);
--text-on-dark-muted:var(--on-dark-muted);
/* ---- Semantic: lines & accents ---- */
--border-default:var(--grey-200);
--border-tint:var(--blue-200);
--accent:var(--blue-600);
--accent-on-dark:var(--blue-300);
--accent-highlight:var(--blue-700);
/* ---- Semantic: action / status ---- */
--action-primary:var(--red-500);
--action-primary-h:var(--red-600);
--star:var(--gold);
--star-on-dark:var(--gold-d);
--success:var(--green);
/* ---- Gradients ---- */
--grad-hero-fade:linear-gradient(180deg,var(--bg-page) 0%,rgba(245,246,248,0) 22%);
--grad-promo:linear-gradient(135deg,var(--blue-800),var(--dark-900));
--grad-chart:linear-gradient(135deg,var(--dark-850),#0B2348);
/* ---- Typography ---- */
--font-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
/* Fluid type scale (auto-scales mobile -> desktop, no breakpoints needed) */
--fs-display:clamp(1.9rem, 1.3rem + 3.2vw, 3.4rem);
--fs-h2: clamp(1.4rem, 1.15rem + 1.25vw, 1.85rem);
--fs-h3: clamp(1.05rem, 1rem + .25vw, 1.15rem);
--fs-promise:clamp(1.1rem, 1.02rem + .4vw, 1.3rem);
--fs-lede: clamp(1rem, .97rem + .15vw, 1.1rem);
--fs-body: clamp(.93rem, .9rem + .15vw, 1rem);
--fs-stat: clamp(1.55rem, 1.3rem + 1.1vw, 2rem);
--fs-kicker: .72rem;
--fs-caption:.8rem;
--lh-tight:1.1; --lh-heading:1.22; --lh-body:1.6;
/* ---- Radius ---- */
--r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px; --r-full:50%;
/* ---- Elevation ---- */
--shadow-card:0 4px 16px rgba(16,24,40,.07);
--shadow-form:0 16px 40px -20px rgba(10,14,20,.35);
--shadow-cta:0 6px 18px -5px rgba(221,14,16,.45);
--shadow-sticky:0 -6px 20px -8px rgba(10,14,20,.25);
/* ---- Motion ---- */
--dur-fast:.15s; --dur-base:.25s; --ease:ease;
/* ---- Static spacing ramp (4px base) — for fixed/internal gaps ---- */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
--space-6:32px; --space-7:48px; --space-8:64px; --space-9:80px;
/* ======================================================================
2. RESPONSIVE SPACING — these tokens change per breakpoint below.
Components consume THESE, so layout breathes correctly on every device.
MOBILE baseline = deliberately TIGHT (short, fast, continuous reading).
====================================================================== */
--content-max:560px; /* reading column for the funnel */
--content-max-wide:1140px;/* reserved for future 2-col desktop rows */
--wrap-pad:16px; /* horizontal gutter — tight on mobile */
--section-py:34px; /* section top/bottom padding */
--section-gap:18px; /* gap between heading block and content */
--card-pad:18px; /* inner padding of cards/form */
--grid-gap:10px; /* gap inside grids (stats, events, collage) */
--stack-gap:11px; /* vertical gap between stacked items */
--chip-gap:7px; /* gap between inline chips/pills */
--sticky-h:70px; /* reserved space for fixed bottom CTA */
}
/* ---- Tablet ---- */
@media (min-width:640px){
:root{
--wrap-pad:28px;
--section-py:52px;
--section-gap:22px;
--card-pad:22px;
--grid-gap:14px;
--stack-gap:12px;
--chip-gap:9px;
}
}
/* ---- Desktop ---- */
@media (min-width:1024px){
:root{
--wrap-pad:32px;
--section-py:76px;
--section-gap:26px;
--card-pad:26px;
--grid-gap:20px;
--stack-gap:14px;
--chip-gap:10px;
}
}
/* ==========================================================================
3. RESET (modern, minimal)
========================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root,html,body{overflow-x:clip;} /* kill horizontal scroll WITHOUT breaking position:sticky (clip ≠ scroll container) */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
img,picture,svg,video{display:block;max-width:100%;height:auto}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
/* ==========================================================================
4. BASE ELEMENTS
========================================================================== */
body{
font-family:var(--font-sans);
font-size:var(--fs-body);
line-height:var(--lh-body);
color:var(--text-primary);
background:var(--bg-page);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
text-wrap:balance; /* global — inherited by all text */
}
/* Reserve space for the fixed bottom CTA only on pages that actually have one,
so a page without .sticky doesn't end in a stray strip below the footer. */
body:has(.sticky){padding-bottom:var(--sticky-h)}
h1,h2,h3,h4{
font-weight:900;
line-height:var(--lh-heading);
letter-spacing:-.01em;
color:var(--text-primary);
text-wrap:balance;
}
h1{font-size:var(--fs-display);line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{text-wrap:balance}
strong,b{font-weight:800}
/* ==========================================================================
5. LAYOUT PRIMITIVES
========================================================================== */
/* Centered reading column — the spine of every section */
.wrap{
width:100%;
max-width:var(--content-max);
margin-inline:auto;
padding-inline:var(--wrap-pad);
}
/* Section: vertical rhythm + light/dark banding.
Sections are full-bleed; .wrap constrains the inner content. */
.section{padding-block:var(--section-py)}
.section + .section{border-top:1px solid var(--border-default)}
/* Banding variants (remove the divider; the bg change is the separator) */
.section--dark,
.section--stats,
.section--chart{color:var(--text-on-dark);border-top:0}
.section--dark{background:var(--bg-band-dark)}
.section--stats{background:var(--bg-band-stats);padding-top:0} /* form (first child) overlaps up onto the photo; dark bg meets the photo's bottom fade */
.section--chart{background:var(--bg-band-chart)}
.section--dark + .section,
.section--stats + .section,
.section--chart + .section{border-top:0}
/* a dark band following any section must not get the light 1px divider */
.section + .section--dark,
.section + .section--stats,
.section + .section--chart{border-top:0}
/* Headings/text auto-adapt inside dark bands */
.section--dark h2,.section--stats h2,.section--chart h2,
.section--dark h1,.section--stats h1,.section--chart h1{color:var(--text-on-dark)}
/* Section heading block spacing */
.section__head{margin-bottom:var(--section-gap)}
/* ==========================================================================
6. TYPOGRAPHY HELPERS
========================================================================== */
.kicker{
display:block;
font-size:var(--fs-kicker);
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--accent);
margin-bottom:var(--space-3);
}
.section--dark .kicker,
.section--stats .kicker,
.section--chart .kicker{color:var(--accent-on-dark)}
.lede{font-size:var(--fs-lede);font-weight:500;color:var(--text-muted)}
.muted{color:var(--text-muted)}
.accent{color:var(--accent)}
.highlight{color:var(--accent-highlight)}
/* ==========================================================================
7. UTILITIES
========================================================================== */
.stack{display:flex;flex-direction:column;gap:var(--stack-gap)}
.center{text-align:center}
.hide{display:none !important}
.full-bleed{width:100vw;margin-inline:calc(50% - 50vw)} /* escape .wrap when needed */
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.001ms !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
.js .reveal{opacity:1 !important}
}
/* ==========================================================================
8. COMPONENTS (all values reference semantic tokens / responsive spacing)
========================================================================== */
/* ---- Branded image placeholder (until optimized photos are dropped in) ---- */
.ph{
display:flex;align-items:center;justify-content:center;text-align:center;
background:linear-gradient(135deg,var(--blue-800),var(--dark-900));
color:var(--blue-300);border:1px solid rgba(127,176,255,.16);
border-radius:var(--r-md);padding:14px;font-size:.78rem;font-weight:600;line-height:1.4;
}
.ph--lite{background:var(--grey-50);color:var(--accent);border:1px dashed var(--border-tint)}
img.media{width:100%;height:100%;object-fit:cover;border-radius:var(--r-md)}
/* ---- Trust bar ---- */
.topbar{
background:var(--bg-band-dark);color:var(--text-on-dark);
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
font-size:var(--fs-caption);font-weight:500;
padding:9px var(--wrap-pad);letter-spacing:.02em;
}
.topbar b{color:var(--text-on-dark);font-weight:800} /* labels white */
.tb-item{display:inline-flex;align-items:center;gap:5px}
.tb-ico{width:14px;height:14px;flex-shrink:0;color:var(--star-on-dark)} /* star + people filled yellow */
.gi-box{fill:var(--star-on-dark)} /* gift body — yellow */
.gi-lid,.gi-ribbon,.gi-bow{fill:var(--action-primary)} /* gift cover/ribbon/bow — red */
.topbar .dot{opacity:.4;margin:0}
/* ---- HERO ---- */
.hero{position:relative;padding-top:10px;padding-bottom:0} /* tight top gap (mobile); form bridges into next section */
@media(min-width:640px){.hero{padding-top:var(--section-py)}}
.eyebrow{
display:inline-block;font-size:var(--fs-kicker);font-weight:800;letter-spacing:.1em;
color:#fff;background:var(--accent);padding:6px 14px;border-radius:var(--r-pill);
margin-bottom:var(--space-4);
}
/* Brand lockup (replaces the date eyebrow): white logo mark on a blue badge + wordmark */
.brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:var(--space-4)}
.brand-mark{display:inline-flex;align-items:center;flex-shrink:0}
/* logo recolored to brand blue via mask (no background, no border) */
.brand-logo{
width:28px;height:28px;background-color:var(--accent);
-webkit-mask:url("asset/img/brand/logo.svg") center / contain no-repeat;
mask:url("asset/img/brand/logo.svg") center / contain no-repeat;
}
.brand-name{font-size:1.1rem;font-weight:900;letter-spacing:-.01em;color:var(--text-primary)}
.hero h1{font-size:clamp(1.9rem, 1.15rem + 4.4vw, 2.9rem);line-height:1.16;margin-bottom:var(--space-3)}
.hero h1 .hl{color:var(--accent)}
.hero .promise{font-size:var(--fs-promise);font-weight:800;margin-bottom:var(--space-2)}
/* subtitle: blue box, white words */
.hero .lede{
display:inline-block;margin-bottom:var(--space-2);
background:var(--accent);color:#fff;
font-size:clamp(1rem, .82rem + .9vw, 1.15rem);font-weight:800;
padding:6px 14px;border-radius:var(--r-sm);
text-shadow:none;
}
/* supporting line under the blue box */
.hero .lede-note{
display:flex;align-items:center;gap:8px;
font-size:1rem;font-weight:700;color:var(--text-title);
margin-bottom:var(--space-3);
text-shadow:0 1px 2px rgba(255,255,255,.95), 0 0 8px rgba(255,255,255,.85);
}
.hero .lede-note__ic{flex:none;display:block}
/* Hero copy is left-aligned (the speaker occupies the right side), layered above the bg */
.hero .wrap{text-align:left;position:relative;z-index:0}
/* Sign-up form lives in the dark band, floating up to overlap the hero photo */
.section--stats .formcard{
position:relative;z-index:3;
margin-top:-112px; /* pull up over the hero photo */
margin-bottom:var(--space-7); /* gap before the social-proof stats */
text-align:left;
}
.hero-photo{
position:relative;z-index:-1;aspect-ratio:4/3;
width:100vw;margin-left:50%;transform:translateX(-50%); /* full-bleed + always centered (survives max-height) */
margin-top:-4rem;margin-bottom:0; /* pull up behind the title + subtitle */
}
@media(min-width:640px){.hero-photo{aspect-ratio:16/9;max-height:560px}}
.hero-photo img{
width:100%;height:100%;object-fit:cover;object-position:center top;
/* top edge fades into the light page bg */
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);
mask-image:linear-gradient(180deg,transparent 0,#000 22%);
}
/* bottom edge fades into the dark band so photo + form + stats read as one piece */
.hero-photo::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:45%;pointer-events:none;
background:linear-gradient(to bottom,transparent,var(--bg-band-stats));
}
/* Layered speaker cutout — lives in the hero (moves with it), floats above the form.
Tune these three knobs: --spk-h (size + how high it rises), --spk-right (horizontal),
--spk-bottom (how far it dips onto the form). */
.hero-speaker{
--spk-h:clamp(340px, 92vw, 520px);
--spk-right:max(-8px, calc(50% - 295px));
--spk-bottom:-10px;
position:absolute;z-index:2; /* above the background + title, BELOW the form */
right:var(--spk-right);bottom:var(--spk-bottom);
height:var(--spk-h);width:auto;
pointer-events:none; /* never blocks the form inputs underneath */
filter:drop-shadow(0 16px 30px rgba(1,9,22,.45)); /* lift it off the background */
}
.chips{display:flex;flex-wrap:wrap;gap:var(--chip-gap);margin-bottom:var(--space-5)}
.chip{
display:inline-flex;align-items:center;gap:6px;background:var(--bg-surface);
border:1px solid var(--border-default);border-radius:var(--r-pill);
padding:7px 13px;font-size:var(--fs-caption);font-weight:700;
}
.chip .ico{width:14px;height:14px;color:var(--accent);flex-shrink:0}
/* ---- Form card ---- */
.formcard{
background:var(--bg-surface);border:1px solid var(--border-default);
padding:var(--card-pad);box-shadow:var(--shadow-form);
/* concentric radius: inner card radius (--r-md) + the padding gap = harmonious nested corners */
border-radius:calc(var(--r-md) + var(--card-pad));
color:var(--text-primary); /* keep card text dark even inside dark sections */
}
.formcard h3{font-size:var(--fs-h3);margin-bottom:4px}
.formcard .fsub{font-size:var(--fs-caption);color:var(--text-muted);margin-bottom:var(--space-3)}
/* Compact one-line event strip inside the form: date · time · Zoom */
.event-meta{
display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;
gap:8px;margin-bottom:var(--space-3);
background:var(--bg-tint);border:1px solid var(--border-tint);
border-radius:var(--r-sm);padding:7px 10px;
}
.em{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:700;color:var(--text-primary);white-space:nowrap}
.em svg{width:13px;height:13px;flex-shrink:0;color:var(--accent)}
.em b{font-weight:800}
.zoom-logo{height:18px;width:auto;flex-shrink:0;display:block}
.field{margin-bottom:var(--space-3)}
.field label{display:block;font-size:var(--fs-caption);font-weight:700;margin-bottom:5px}
.field input{
width:100%;padding:10px 13px;background:#fafbfd;color:var(--text-primary);
border:1.5px solid var(--border-default);border-radius:var(--r-sm);font-size:1rem;
transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.field input::placeholder{color:var(--grey-300)}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(5,78,189,.12)}
/* ---- Invalid-field state: red border + inline message + shake ---- */
.field input.invalid,.field input.invalid:focus{
border-color:#e02424;box-shadow:0 0 0 3px rgba(224,36,36,.14)
}
.field-error{display:block;margin-top:5px;font-size:var(--fs-caption);font-weight:700;color:#e02424}
.field-error:empty{display:none}
@keyframes fieldShake{
10%,90%{transform:translateX(-1px)}
20%,80%{transform:translateX(2px)}
30%,50%,70%{transform:translateX(-4px)}
40%,60%{transform:translateX(4px)}
}
.field input.shake{animation:fieldShake .4s cubic-bezier(.36,.07,.19,.97) both}
@media (prefers-reduced-motion: reduce){.field input.shake{animation:none}}
/* ---- Primary CTA ---- */
.cta{
width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
background:var(--action-primary);color:#fff;border-radius:var(--r-sm);
padding:12px 16px;font-size:1.2rem;font-weight:900;letter-spacing:.01em;margin-top:var(--space-1);
box-shadow:var(--shadow-cta);transition:background var(--dur-fast),transform var(--dur-fast);
}
.cta .arr{transition:transform var(--dur-fast)}
.cta:hover{background:var(--action-primary-h)}
.cta:hover .arr{transform:translateX(3px)}
.cta:active{transform:translateY(1px)}
/* ---- Timed lead popup modal ---- */
.modal{position:fixed;inset:0;z-index:100;display:flex;padding:18px;overflow:auto}
.modal[hidden]{display:none}
.modal__backdrop{position:fixed;inset:0;background:rgba(1,9,22,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal__card{
position:relative;z-index:1;width:100%;max-width:380px;margin:auto; /* centers, scrolls when tall */
animation:modalIn .3s var(--ease);
}
/* Countdown bar + close button on one row. The bar takes the slack so the
button keeps a fixed square footprint at any width. */
.modal__top{
display:flex;align-items:stretch;gap:var(--space-2);
margin-bottom:var(--space-3);
}
.modal__top .cd{flex:1;min-width:0;margin-bottom:0}
/* Icon button styled as a peer of the bar beside it — same radius and border
language, square, sized off the bar's own height rather than a fixed px. */
.modal__x{
flex:none;display:inline-flex;align-items:center;justify-content:center;
width:40px;align-self:stretch;
font-size:1.5rem;line-height:1;color:var(--text-muted);
background:var(--bg-subtle);border:1px solid var(--border-default);
border-radius:var(--r-sm);
}
.modal__x:hover{background:var(--grey-50);color:var(--text-primary)}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
/* Phone: the popup stops being a centred 380px card and becomes a full-width
sheet pinned to the top of the viewport. The form is taller than a phone
screen, so centring it clipped both ends at once with nothing to indicate
which way to scroll; anchored at the top it opens where the eye already is
and simply scrolls down. It slides in from above rather than fading up,
which matches where it is now anchored. */
@media (max-width:639px){
.modal{padding:0;align-items:flex-start}
.modal__card{
max-width:none;margin:0;
animation:modalSlideDown .34s var(--ease);
}
/* Square off against the screen edges; the bottom stays rounded so it still
reads as a sheet hanging from the top, not a full-page takeover. */
.modal__card .formcard{
border-radius:0 0 var(--r-lg) var(--r-lg);
border-top:0;border-left:0;border-right:0;
}
}
@keyframes modalSlideDown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
.formnote{font-size:var(--fs-caption);color:var(--text-muted);text-align:center;margin-top:9px}
/* Benefit cards under the CTA (replaces hero chips) */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin-top:var(--space-4)}
.benefit{
display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
background:var(--bg-subtle);border:1px solid var(--border-default);border-radius:var(--r-md);
padding:13px 6px;font-size:.74rem;font-weight:700;line-height:1.3;color:var(--text-primary);
}
.benefit svg{width:24px;height:24px;flex-shrink:0;color:var(--accent)}
/* ---- Social-proof stats band ---- */
.bandstats{
display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);
align-items:end; /* bottom-align the three columns so the labels line up */
margin-bottom:var(--space-5);
border-block:1px solid rgba(255,255,255,.09);padding-block:var(--space-4);
}
.bstat{text-align:center}
.bstat-ico{display:flex;align-items:center;justify-content:center;height:40px;margin-bottom:7px;color:var(--accent-on-dark)}
.bstat-ico svg{width:28px;height:28px}
.js-mark{
width:28px;height:28px;background-color:var(--accent-on-dark);
-webkit-mask:url("asset/img/brand/logo.svg") center / contain no-repeat;
mask:url("asset/img/brand/logo.svg") center / contain no-repeat;
}
.bstat-ico--logo img{height:40px;width:auto} /* portrait MIYE logo fills the icon row */
/* MIYE column: no number, so the logo grows into that space and the label shrinks */
.bstat--logo .bstat-ico{height:auto}
.bstat--logo .bstat-ico--logo img{height:76px}
.bstat--logo .lbl{font-size:.66rem}
.bstat + .bstat{border-left:1px solid rgba(255,255,255,.09)}
.bstat .num{font-size:var(--fs-stat);font-weight:900;color:var(--accent-on-dark);line-height:1.1}
.bstat .lbl{font-size:var(--fs-caption);color:var(--text-on-dark-muted);margin-top:4px}
.crowdgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)}
.crowdgrid img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-md);aspect-ratio:1}
.crowdgrid img:first-child{grid-column:span 2;aspect-ratio:16/9}
/* ---- Quiz ---- */
.quizcard{
display:flex;gap:12px;align-items:center;width:100%;text-align:left;
background:var(--grey-50);border:2px dashed var(--accent-on-dark);border-radius:var(--r-md);
padding:12px 14px;font-size:1rem;color:var(--text-primary);
transition:border-color var(--dur-fast),background var(--dur-fast);
}
#quiz{gap:var(--space-2)} /* single, tighter gap between quiz cards */
.quizcard:hover{border-color:var(--accent);border-style:solid}
.quizcard[aria-pressed="true"]{background:var(--bg-tint);border-color:var(--accent);border-style:solid}
.qbox{
width:22px;height:22px;flex-shrink:0;color:#fff;
border:2px solid var(--border-tint);border-radius:6px;
display:flex;align-items:center;justify-content:center;
transition:background var(--dur-fast),border-color var(--dur-fast);
}
.qbox svg{width:13px;height:13px;opacity:0;transition:opacity var(--dur-fast)}
.quizcard[aria-pressed="true"] .qbox{background:var(--accent);border-color:var(--accent)}
.quizcard[aria-pressed="true"] .qbox svg{opacity:1}
.quizresult{
position:sticky;bottom:calc(var(--sticky-h) + 0.75rem); /* sit just above the fixed CTA bar */
margin-top:var(--space-2);padding:16px;border-radius:var(--r-md);
background:rgba(221,14,16,.08);border:2px solid var(--action-primary);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); /* frosted glass */
font-weight:700;color:var(--action-primary);display:none;
}
.quizresult.show{display:block;animation:fadeUp var(--dur-base) var(--ease)}
/* ---- Objection strip ---- */
.objstrip{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)}
.o{
background:var(--bg-surface);border:1px solid var(--border-default);
border-radius:var(--r-sm);padding:14px 12px;text-align:center;
}
.o .x{display:block;font-size:.72rem;color:var(--text-muted);text-decoration:line-through;margin-bottom:5px}
.o b{display:block;font-size:.9rem;color:var(--blue-900)}
/* ---- Read-the-market chart band (full-bleed photo background) ---- */
.section--chart.market{
display:flex;align-items:center;
min-height:clamp(200px, 46vw, 480px);
background-image:
linear-gradient(90deg, rgba(1,11,26,.92) 0%, rgba(1,11,26,.6) 50%, rgba(1,11,26,.25) 100%),
url("asset/img/bg/market-bg.webp");
background-size:cover;background-position:right center;background-repeat:no-repeat;
}
.market .section__head{margin-bottom:var(--space-2)}
.marketcap{color:var(--on-dark-muted);font-size:.95rem;margin-top:10px}
/* ---- "Wave" urgency promo ---- */
.wave{
position:relative;overflow:hidden;background:var(--grad-promo);color:var(--text-on-dark);
border-radius:var(--r-lg);padding:26px;
}
.wave::after{
content:"";position:absolute;width:240px;height:240px;right:-80px;top:-90px;
background:radial-gradient(circle,rgba(127,176,255,.35),transparent 70%);pointer-events:none;
}
.wave .kicker{color:var(--accent-on-dark)}
.wave h2{color:#fff;font-size:1.4rem;margin-bottom:10px;position:relative}
.wave p{color:var(--on-dark-muted);font-size:.98rem;position:relative}
.wave b{color:var(--accent-on-dark)}
/* ---- Mechanism steps ---- */
.steps{display:grid;gap:var(--stack-gap)}
.step{
display:flex;gap:14px;align-items:center;background:var(--bg-surface);
border:1px solid var(--border-default);padding:var(--space-3);
border-radius:calc(var(--r-md) + var(--space-3)); /* concentric with the icon (--r-md) + padding */
transition:transform var(--dur-fast),box-shadow var(--dur-fast);
}
.step:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.stepicon{
width:48px;height:48px;flex-shrink:0;color:var(--accent);
background:var(--grey-50);border-radius:var(--r-md);
display:flex;align-items:center;justify-content:center;
}
.stepicon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2}
.step h3{font-size:var(--fs-h3);margin-bottom:4px}
.step p{font-size:.9rem;color:var(--text-muted)}
/* ---- Jason intro + timeline ---- */
.jason{margin-bottom:var(--space-5)}
/* 1:1 speaker photo, contained within the section padding, rounded */
.jason-photo{
position:relative;
aspect-ratio:1;margin-bottom:var(--space-4);
border-radius:var(--r-lg);overflow:hidden;
}
.jason-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.jason-photo::after{
content:"";position:absolute;inset:auto 0 0 0;height:42%;pointer-events:none;
background:linear-gradient(transparent,rgba(1,9,22,.6));
}
.jason-name{
position:absolute;left:18px;bottom:14px;z-index:1;
color:#fff;font-weight:900;font-size:1.6rem;letter-spacing:-.01em;
text-shadow:0 2px 10px rgba(1,9,22,.5);
}
.jbadge{
display:inline-flex;align-items:center;gap:6px;
background:var(--accent);color:#fff;
font-size:var(--fs-kicker);font-weight:800;padding:4px 11px 4px 9px;border-radius:var(--r-pill);margin-bottom:8px;
}
.jbadge-logo{
width:14px;height:14px;flex-shrink:0;background-color:#fff;
-webkit-mask:url("asset/img/brand/logo.svg") center / contain no-repeat;
mask:url("asset/img/brand/logo.svg") center / contain no-repeat;
}
.jason h2{font-size:1.3rem;margin-bottom:4px}
.jason .jsub{font-size:.92rem;color:var(--text-muted)}
.tl{position:relative;display:grid;gap:var(--stack-gap)}
/* vertical track line running behind the year pills */
.tl::before{
content:"";position:absolute;top:12px;bottom:12px;left:31px;width:2px;
background:var(--border-tint);border-radius:2px;
}
.tlrow{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center}
.tlyear{
position:relative;z-index:1;
background:var(--bg-tint);color:var(--accent);border-radius:var(--r-sm);
border:1px solid var(--border-tint);
display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:.76rem;text-align:center;padding:5px 4px;
}
.tlbody{
display:flex;flex-direction:column;gap:3px;
background:var(--bg-surface);border:1px solid var(--border-tint);
border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:11px 14px;
}
.tlbody b{color:var(--text-title);font-size:.97rem;font-weight:800}
.tldesc{color:var(--text-muted);font-size:.85rem;line-height:1.45}
/* highlighted final card */
.tlrow--final .tlyear{background:var(--accent);color:#fff;border-color:var(--accent)}
.tlrow--final .tlbody{
background:var(--accent);border-color:var(--accent);color:#fff;
font-size:.92rem;line-height:1.5;box-shadow:none;
}
/* ---- Testimonials ---- */
.t-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:var(--space-4)}
.t-head .kicker{margin-bottom:5px}
.t-title{font-size:var(--fs-h2)}
.googlerev{height:44px;width:auto;flex-shrink:0}
.tcard{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--r-lg);padding:18px}
.tcard + .tcard{margin-top:var(--stack-gap)}
.thead{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.tav{
width:46px;height:46px;flex-shrink:0;border-radius:var(--r-full);object-fit:cover;
background:var(--blue-900);color:#fff;display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:1.1rem;
}
.tname{font-weight:800;font-size:.96rem}
.trole{font-size:.8rem;color:var(--text-muted)}
.tstars{margin-left:auto;color:var(--star);font-size:.85rem;letter-spacing:1px;flex-shrink:0}
.tquote{font-size:.93rem;color:var(--text-secondary)}
.tmore{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:var(--stack-gap);
font-size:.85rem;font-weight:600;color:var(--text-muted)}
.tmore-g{width:16px;height:16px;flex-shrink:0}
/* ---- Offline events ---- */
/* Offline-events auto slideshow */
.slideshow{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s var(--ease)}
.slide.is-active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover}
.slide-cap{
position:absolute;left:0;right:0;bottom:0;padding:16px 16px 14px;
display:flex;flex-direction:column;gap:2px;color:#fff;
background:linear-gradient(transparent,rgba(1,9,22,.85));
}
.slide-cap b{font-size:1rem;font-weight:800}
.slide-cap span{font-size:.82rem;color:var(--on-dark-muted)}
.slide-dots{position:absolute;right:14px;bottom:16px;display:flex;gap:6px;z-index:2}
.slide-dots button{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:background var(--dur-fast)}
.slide-dots button.is-active{background:#fff}
.slide-nav{display:flex;align-items:center;gap:24px;margin-top:14px}
.slide-arrow{
flex:1;display:flex;align-items:center;
background:none;border:none;padding:8px 0;cursor:pointer;color:var(--accent);
transition:color var(--dur-fast),opacity var(--dur-fast);
}
.slide-arrow:hover{color:var(--accent-highlight)}
.slide-arrow:active{opacity:.6}
.slide-arrow .ico{width:16px;height:16px;flex-shrink:0;position:relative;z-index:1}
.slide-arrow .line{flex:1;height:2px;background:currentColor;border-radius:2px}
/* overlap the line into the chevron so they read as one continuous arrow */
.slide-arrow[data-dir="-1"] .line{margin-left:-9px}
.slide-arrow[data-dir="1"] .line{margin-right:-9px}
.events-note{font-size:.84rem;color:var(--text-muted);text-align:center;margin-top:var(--space-4)}
/* ---- Community collage ---- */
.collage{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)}
.collage .media{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--r-md)}
.collage .banner{grid-column:1 / -1;aspect-ratio:16/9} /* wide landscape crowd shot up top */
.collage .ph{height:100%}
/* ---- FAQ accordion ---- */
.faq{display:grid;gap:9px}
.fitem{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--r-md);overflow:hidden}
.fq{
width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:15px 16px;font-weight:700;font-size:.96rem;text-align:left;color:var(--text-primary);
}
.fq .ar{color:var(--accent);flex-shrink:0;transition:transform var(--dur-base)}
.fitem.open .ar{transform:rotate(180deg)}
.fa{max-height:0;overflow:hidden;transition:max-height var(--dur-base) var(--ease)}
.fitem.open .fa{max-height:260px}
.fa p{padding:0 16px 15px;color:var(--text-muted);font-size:.9rem}
/* ---- Risk reversal ---- */
.rr{background:var(--bg-tint);border:1px solid var(--border-tint);border-radius:var(--r-lg);padding:22px;text-align:center}
.rr h3{color:var(--blue-900);font-size:1.1rem;margin-bottom:7px}
.rr p{font-size:.93rem;color:var(--text-secondary)}
/* ---- Final CTA band ---- */
.final{text-align:center}
.final h2{margin-bottom:8px}
.final .lede{color:var(--on-dark-muted);margin-bottom:12px}
.final .seats{color:var(--accent-on-dark);font-weight:800;font-size:.88rem;margin-bottom:var(--space-4)}
.final .formcard{text-align:left}
.final .formcard h3{color:var(--text-primary)}
/* ---- Footer ---- */
/* ---- Site footer (company info · disclaimer · legal links) ---- */
.site-footer{background:var(--bg-band-dark);color:var(--text-on-dark);padding:48px 0 32px}
.footer-inner{display:grid;gap:28px}
.footer-top{display:grid;gap:24px}
.footer-brand{display:flex;flex-direction:column;align-items:center}
.footer-logo{display:block;height:40px;width:auto;margin:0 auto 16px}
.company-info{text-align:center;margin-top:8px}
.company-info h3{font-size:1rem;font-weight:800;color:var(--text-on-dark);margin-bottom:14px;text-transform:uppercase;letter-spacing:.5px}
.company-address{margin-bottom:14px}
.company-address p,.company-contact p{font-size:.85rem;color:var(--on-dark-muted);margin:6px 0;line-height:1.5}
.company-contact a{color:var(--accent-on-dark);transition:color var(--dur-base) var(--ease)}
.company-contact a:hover{color:var(--blue-300);text-decoration:underline}
.footer-disclaimer{
font-size:.74rem;line-height:1.6;color:var(--on-dark-muted);
text-align:center;max-width:760px;margin:0 auto;
padding-top:24px;border-top:1px solid rgba(255,255,255,.08);
}
.footer-bottom{
display:flex;flex-direction:column;align-items:center;gap:14px;
border-top:1px solid rgba(255,255,255,.1);padding-top:24px;
}
.footer-copy{margin:0;color:var(--on-dark-muted);font-size:.82rem}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;align-items:center}
.footer-legal a{color:var(--on-dark-muted);font-size:.82rem;text-decoration:underline;transition:color var(--dur-base) var(--ease)}
.footer-legal a:hover{color:var(--text-on-dark)}
@media (min-width:768px){
.company-info h3{font-size:.95rem;margin-bottom:12px}
.company-address p,.company-contact p{font-size:.82rem}
}
@media (min-width:1024px){
.footer-brand{flex-direction:row;align-items:center;justify-content:center;gap:24px}
.footer-logo{margin:0;flex-shrink:0}
.company-info{text-align:left;margin-top:0}
.footer-bottom{flex-direction:row;justify-content:space-between}
}
/* ---- Sticky bottom CTA ---- */
.sticky{
position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;
border-top:1px solid var(--border-default);padding:10px var(--wrap-pad);box-shadow:var(--shadow-sticky);
transition:transform var(--dur-base) var(--ease);
}
/* slid out of view while a form CTA is visible on screen (no double CTA) */
.sticky.is-hidden{transform:translate3d(0,110%,0)}
.sticky-inner{max-width:var(--content-max);margin-inline:auto;display:flex;align-items:center;gap:12px}
/* event detail (2 rows) on the left of the CTA */
.sticky-info{display:flex;flex-direction:column;gap:3px;flex-shrink:0;line-height:1.15}
.sti-row{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:800;color:var(--text-primary);white-space:nowrap}
.sti-row svg{width:13px;height:13px;flex-shrink:0;color:var(--accent)}
.sti-zoom{height:16px;width:auto;flex-shrink:0;display:block}
.sticky-cta{
flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;
background:var(--action-primary);color:#fff;text-align:center;padding:12px 16px;
border-radius:var(--r-sm);font-weight:900;font-size:1.1rem;letter-spacing:.01em;
box-shadow:0 4px 14px -4px rgba(221,14,16,.5);transition:background var(--dur-fast);
}
.sticky-cta:hover{background:var(--action-primary-h)}
/* ==========================================================================
9. MOTION — entrance choreography
========================================================================== */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}} /* opacity-only — safe for elements with a layout transform */
/* Hero load: staggered reveal (CSS-only, safe without JS) */
.hero .brand,.hero h1,.hero .lede{animation:fadeUp .6s var(--ease) backwards}
.hero h1{animation-delay:.06s}
.hero .lede{animation-delay:.12s}
/* photo + speaker fade ONLY — their transforms are reserved for layout/centering,
so a translate-based animation here would break the full-bleed centering */
.hero-photo,.hero-speaker{animation:fadeIn .7s var(--ease) backwards;animation-delay:.18s}
/* Below-fold sections: reveal on scroll (only hidden when JS is active) */
.js .reveal{opacity:0}
.js .reveal.in{animation:fadeUp .6s var(--ease) forwards}
/* ==========================================================================
10. DESKTOP REFINEMENT — keep the fast single-column scan, add breathing room
========================================================================== */
@media (min-width:768px){
.objstrip{gap:var(--space-4)}
.o{padding:18px 14px}
}
/* ==========================================================================
11. DESKTOP LAYER (min-width:1024px)
Additive only. Targets sections by content via :has() so NO markup changes
and the mobile (<1024px) layout above is byte-for-byte untouched. Uses the
horizontal space: wider canvas + multi-column where grids already exist.
========================================================================== */
@media (min-width:1024px){
/* Default reading column — wider than mobile, still readable for prose */
.wrap{max-width:760px}
/* Sections that earn a wide, multi-column canvas (selected by their content) */
.section--stats .wrap{max-width:1060px}
.section:has(.tgrid) .wrap{max-width:1080px}
.section:has(.objstrip) .wrap,
.section:has(.steps) .wrap,
.section:has(.tl) .wrap{max-width:1000px}
.section:has(.faq) .wrap,
.section:has(.collage) .wrap,
.section:has(.slideshow) .wrap{max-width:900px}
/* ---------------- HERO ---------------- */
.hero .wrap{max-width:1100px;min-height:540px;display:flex;flex-direction:column;justify-content:center}
.hero h1{max-width:700px;font-size:clamp(2.3rem,1.6rem+2.2vw,3.3rem);line-height:1.1}
.hero .lede{max-width:600px;font-size:1.3rem}
.hero-photo{aspect-ratio:auto;height:clamp(440px,42vw,540px);max-height:none;margin-top:-3rem}
.hero-speaker{--spk-h:clamp(400px,38vw,500px);--spk-right:max(0px, calc(50% - 480px));--spk-bottom:-6px}
/* ---------------- STATS BAND / lead form ---------------- */
.section--stats .formcard{max-width:480px;margin-inline:auto;margin-top:-170px}
.bandstats{max-width:720px;margin-inline:auto}
.crowdgrid{grid-template-columns:1fr 1fr 1fr}
.crowdgrid img:first-child{grid-column:span 3;aspect-ratio:21/9}
/* ---------------- QUIZ ---------------- */
#quiz{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.quizcard{height:100%}
/* keep the sticky result spanning full width below the two columns */
.quizresult{position:static;backdrop-filter:none;-webkit-backdrop-filter:none}
/* ---------------- OBJECTIONS ---------------- */
.objstrip{grid-template-columns:repeat(4,1fr)}
/* ---------------- MECHANISM STEPS ---------------- */
.steps{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.step{flex-direction:column;align-items:flex-start;text-align:left;height:100%}
/* ---------------- JASON + TIMELINE (2-col) ---------------- */
.jason{display:grid;grid-template-columns:320px 1fr;gap:36px;align-items:center;margin-bottom:var(--space-7)}
.jason-photo{margin-bottom:0}
.tl{max-width:760px;margin-inline:auto}
/* ---------------- TESTIMONIALS (3-up) ---------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);align-items:start}
.tcard + .tcard{margin-top:0}
/* ---------------- SLIDESHOW ---------------- */
.slideshow{aspect-ratio:16/9}
/* ---------------- FAQ (single column) ----------------
Kept to one column: the first item now carries the ✓/✗ fit block, which is
itself two columns, so a 2-col accordion nested another grid inside it. */
.faq{grid-template-columns:1fr}
/* ---------------- FINAL CTA ---------------- */
.final .formcard{max-width:480px;margin-inline:auto}
/* ---------------- STICKY BOTTOM CTA ---------------- */
.sticky-inner{max-width:var(--content-max-wide);margin-inline:auto;display:flex;justify-content:center}
.sticky-cta{max-width:460px}
}
/* Large desktop — a little more room for the hero visual */
@media (min-width:1280px){
.hero-photo{height:560px}
.hero-speaker{--spk-h:540px;--spk-right:max(0px, calc(50% - 540px))}
}
/* ==========================================================================
9. AI X TRADING — SECTION COMPONENTS
Added for public/ai-webinar/ only. Tokens above are untouched: every value
here references an existing semantic token, so the theme stays the theme.
========================================================================== */
/* ---- Hero: four-market row + supporting note ---- */
.markets{display:flex;flex-wrap:wrap;gap:var(--chip-gap);margin-bottom:var(--space-2)}
.mk{
display:inline-flex;align-items:center;gap:5px;
background:var(--bg-surface);border:1px solid var(--border-tint);
color:var(--text-title);font-size:var(--fs-caption);font-weight:800;
padding:5px 11px;border-radius:var(--r-pill);
box-shadow:var(--shadow-card);
}
.mknote{
font-size:var(--fs-caption);font-weight:700;color:var(--text-title);
margin-bottom:var(--space-3);
text-shadow:0 1px 2px rgba(255,255,255,.95), 0 0 8px rgba(255,255,255,.85);
}
/* ---- Tick list (hero promises, tool bullets) ---- */
.checklist{display:grid;gap:7px;margin-bottom:var(--space-4)}
.checklist li{
position:relative;padding-left:22px;
font-size:var(--fs-body);font-weight:600;color:var(--text-title);
}
.checklist li::before{
content:"";position:absolute;left:2px;top:.5em;
width:9px;height:5px;border-left:2.5px solid var(--success);border-bottom:2.5px solid var(--success);
transform:rotate(-45deg);
}
.hero .checklist li{text-shadow:0 1px 2px rgba(255,255,255,.95), 0 0 8px rgba(255,255,255,.85)}
.checklist--sm{margin-bottom:var(--space-4)}
.checklist--sm li{font-size:var(--fs-caption);font-weight:600;color:var(--text-secondary)}
/* ---- Countdown (inside a form card, and in the sticky bar) ---- */
.cd{
display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
background:var(--bg-tint);border:1px solid var(--border-tint);
border-radius:var(--r-sm);padding:8px 12px;margin-bottom:var(--space-3);
}
.cd-label{font-size:var(--fs-caption);font-weight:700;color:var(--text-muted)}
.cd-value{font-size:.95rem;font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums}
.cd.is-live{background:rgba(221,14,16,.07);border-color:rgba(221,14,16,.25)}
.cd.is-live .cd-value{color:var(--action-primary)}
/* ---- Form card additions ---- */
/* Sits directly under the submit button, so the spacing runs top-side now —
it used to sit above the first field and only needed to push down. */
.noreplay{
font-size:var(--fs-caption);font-weight:700;color:var(--action-primary);
text-align:center;margin:var(--space-3) 0 0;
}
.giftnote{
font-size:var(--fs-caption);line-height:1.5;color:var(--text-secondary);
background:var(--bg-subtle);border-radius:var(--r-sm);
padding:9px 12px;margin-top:var(--space-3);
}
.giftnote b{color:var(--accent-highlight)}
/* ---- "Featured in" logo strip ---- */
.mediastrip{
display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap);
margin-top:var(--space-3);
}
@media(min-width:640px){.mediastrip{grid-template-columns:repeat(4,1fr)}}
.mlogo{aspect-ratio:5/2}
/* ---- Tool cards (Decoder / Filter / Coach) ---- */
.toolintro{margin-bottom:var(--space-5)}
.toolcard{
background:var(--bg-surface);border:1px solid var(--border-default);
border-radius:var(--r-lg);padding:var(--card-pad);
box-shadow:var(--shadow-card);
margin-bottom:var(--stack-gap);
}
/* Header: number over name over Chinese name, left-aligned and stacked
(follows reference/layout/ai-x-trading-lp-v5_1.html) */
/* Name left, index pinned top-right on the same row as the title. */
.toolhead{
display:grid;grid-template-columns:1fr auto;
column-gap:var(--space-4);align-items:baseline;
margin-bottom:var(--space-4);
}
.toolnum{
grid-column:2;grid-row:1;justify-self:end;
font-size:clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
font-weight:900;letter-spacing:.06em;line-height:1;
color:var(--text-muted);opacity:.28;
margin-bottom:0;
}
.toolname{
grid-column:1;grid-row:1;
font-size:clamp(1.5rem, 1.2rem + 1.4vw, 1.95rem);
font-weight:900;letter-spacing:-.01em;line-height:1.1;
color:var(--accent);
margin-bottom:5px;
}
.toolcn{grid-column:1;grid-row:2;font-size:1.05rem;font-weight:700;color:var(--text-muted)}
.toolsub{
font-size:var(--fs-body);color:var(--text-muted);line-height:1.75;
margin-bottom:var(--space-5);
}
.toolsub b{color:var(--text-title);font-weight:800}
/* Tool bullets sit further apart than the hero list */
.toolcard .checklist--sm{display:grid;gap:var(--space-3)}
.toolcard .checklist--sm li{font-size:var(--fs-body);color:var(--text-secondary)}
.toolsclose{
font-size:var(--fs-caption);color:var(--text-secondary);
text-align:center;margin:var(--space-4) 0 var(--space-3);
}
.toolsclose b{color:var(--text-title)}
.cta--inline{display:inline-flex;width:auto}
/* ---- Lede on a dark band (the default .lede is muted grey) ---- */
.lede--on-dark{color:var(--text-on-dark-muted);margin-bottom:var(--section-gap)}
/* ---- System grid ---- */
.sysgrid{display:grid;gap:var(--stack-gap)}
@media(min-width:640px){.sysgrid{grid-template-columns:1fr 1fr}}
.syscard{
position:relative;
background:var(--bg-surface);border:1px solid var(--border-default);
border-radius:var(--r-md);padding:var(--card-pad);
box-shadow:var(--shadow-card);
}
@media(min-width:640px){.syscard--lead{grid-column:span 2}}
.syscard--lead{background:var(--bg-surface);border-color:var(--border-tint)}
.sysname{font-size:var(--fs-h3);margin-bottom:5px}
.sysname span{color:var(--text-muted);font-weight:700;font-size:.86em}
.sysdesc{font-size:var(--fs-caption);color:var(--text-muted);line-height:1.55}
.sysbadge{
position:absolute;top:0;right:0;
font-size:.68rem;font-weight:800;letter-spacing:.04em;
padding:3px 9px;border-radius:var(--r-pill);
background:var(--bg-subtle);color:var(--text-muted);
transform:translate(10px,-50%); /* straddles the card's top-right corner */
}
.sysbadge--now{background:var(--success);color:#fff}
/* ---- Demo beats ---- */
.demolist{display:grid;gap:var(--stack-gap)}
.demoitem{
display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);align-items:start;
background:var(--bg-surface);border:1px solid var(--border-default);
border-radius:var(--r-md);padding:var(--card-pad);box-shadow:var(--shadow-card);
}
.demonum{
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:var(--r-full);
background:var(--accent);color:#fff;font-size:.85rem;font-weight:900;
}
.demoitem h3{font-size:var(--fs-h3);margin-bottom:4px}
.demoitem p{font-size:var(--fs-caption);color:var(--text-muted);line-height:1.55}
/* ---- FAQ: is / isn't for you (nested in the first answer, as per the
reference). Green = fit, red = not a fit; the colour carries the meaning. */
.fitgrid{display:grid;gap:var(--stack-gap);margin-top:var(--space-4)}
@media(min-width:640px){.fitgrid{grid-template-columns:1fr 1fr}}
.fitcard{
background:rgba(60,198,85,.06);
border:1px solid rgba(60,198,85,.38);
border-radius:var(--r-md);
padding:var(--card-pad);
}
.fitcard h4{
font-size:.92rem;font-weight:900;
color:var(--success);margin-bottom:var(--space-3);
}
.fitcard ul{display:grid;gap:9px}
.fitcard li{
display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start;
font-size:.9rem;line-height:1.5;color:var(--text-secondary);
}
.fitcard li b{color:var(--success);font-weight:900;line-height:1.4}
.fitverdict{
margin-top:var(--space-3);
font-size:.95rem;font-weight:800;color:var(--success);
}
.fitcard--no{
background:rgba(221,14,16,.05);
border-color:rgba(221,14,16,.30);
}
.fitcard--no h4,
.fitcard--no li b,
.fitcard--no .fitverdict{color:var(--action-primary)}
/* The first FAQ card carries the whole fit block, so it needs far more room
than the 260px the stock accordion allows. */
.fitem--fit.open .fa{max-height:1400px}
/* ---- Recent-registration toasts (stack of max 2) ----
Newest enters from below and lifts the previous one; older card sits back
slightly so the stack reads as depth rather than as two equal alerts. */
.toasts{
position:fixed;left:12px;bottom:calc(var(--sticky-h) + 12px);z-index:90;
display:flex;flex-direction:column;gap:8px;
width:min(300px,calc(100vw - 24px));
pointer-events:none;
transition:bottom var(--dur-base) var(--ease);
}
/* The stack sits above the fixed CTA bar; when that bar slides away (hero, or
while a form CTA is on screen) the cards drop with it instead of floating. */
body:has(.sticky.is-hidden) .toasts,
body:not(:has(.sticky)) .toasts{bottom:12px}
.toast{
display:flex;align-items:center;gap:10px;
background:var(--bg-surface);border:1px solid var(--border-default);
border-radius:var(--r-md);box-shadow:var(--shadow-form);
padding:9px 11px;
opacity:0;transform:translateY(14px) scale(.97);
transition:opacity .3s var(--ease),transform .3s var(--ease);
pointer-events:auto;
}
.toast.is-in{opacity:1;transform:none}
/* the one above the newest steps back a little */
.toast.is-in:not(:last-child){opacity:.78;transform:scale(.97)}
.toast__av{
display:flex;align-items:center;justify-content:center;flex:none;
width:38px;height:38px;border-radius:var(--r-full);
background:var(--accent);color:#fff;
font-size:1rem;font-weight:900;line-height:1;
}
/* Preset avatar palette — script.js picks one at random per card */
.toast__av--0 .toast__av{background:var(--blue-600)}
.toast__av--1 .toast__av{background:var(--blue-800)}
.toast__av--2 .toast__av{background:var(--blue-400)}
.toast__av--3 .toast__av{background:var(--blue-900)}
.toast__av--4 .toast__av{background:var(--green)}
.toast__av--5 .toast__av{background:#5B4BC4}
.toast__body{min-width:0;flex:1}
.toast__name{font-size:.78rem;color:var(--text-secondary);line-height:1.35}
.toast__name b{color:var(--text-title);font-weight:800}
.toast__meta{font-size:.68rem;color:var(--text-muted);line-height:1.35}
.toast__x{
flex:none;width:22px;height:22px;border-radius:var(--r-full);
color:var(--text-muted);font-size:1rem;line-height:1;
}
.toast__x:hover{background:var(--bg-subtle)}
/* ==========================================================================
10. HERO (.lh — "lead hero")
Rebuilt from scratch: type, whitespace and a single CTA, nothing layered.
Self-contained — it does NOT reuse the legacy .hero rules in §8 (full-bleed
photo, speaker cut-out, blue-box lede), which this page no longer uses.
Palette is unchanged: page bg, blue accent, red CTA.
========================================================================== */
.lh{
padding-block:calc(var(--section-py) + var(--space-5)) var(--section-py);
text-align:center;
background:var(--bg-page);
}
.lh .wrap{max-width:620px}
/* Eyebrow — quiet, uppercase, with a small live dot */
.lh__eyebrow{
display:inline-flex;align-items:center;gap:7px;
font-size:var(--fs-kicker);font-weight:800;letter-spacing:.12em;
color:var(--text-muted);text-transform:uppercase;
margin-bottom:var(--space-5);
}
.lh__dot{
width:6px;height:6px;border-radius:var(--r-full);
background:var(--action-primary);flex:none;
}
.lh__title{
font-size:clamp(2rem, 1.15rem + 4.6vw, 3.1rem);
line-height:1.18;letter-spacing:-.02em;
color:var(--text-primary);
margin-bottom:var(--space-4);
}
.lh__hl{color:var(--accent)}
.lh__sub{
font-size:var(--fs-promise);font-weight:800;
color:var(--text-title);
margin-bottom:var(--space-3);
}
.lh__desc{
font-size:var(--fs-lede);line-height:1.75;
color:var(--text-muted);
margin-bottom:var(--space-5);
}
/* Event line — date · time · platform */
.lh__meta{
display:flex;justify-content:center;flex-wrap:wrap;
gap:var(--space-2) var(--space-4);
margin-bottom:var(--space-6);
font-size:var(--fs-caption);color:var(--text-muted);
}
.lh__meta span{display:inline-flex;align-items:center;gap:6px}
.lh__meta span + span::before{
content:"";width:3px;height:3px;border-radius:var(--r-full);
background:var(--grey-300);
}
.lh__meta b{color:var(--text-title);font-weight:800}
.lh__cta{display:inline-flex;padding-inline:var(--space-7)}
.lh__note{
font-size:var(--fs-caption);color:var(--text-muted);
margin-top:var(--space-3);
}
/* Trust row — hairline rule above, evenly spaced figures */
.lh__trust{
display:flex;justify-content:center;flex-wrap:wrap;
gap:var(--space-3) var(--space-6);
margin-top:var(--space-7);padding-top:var(--space-5);
border-top:1px solid var(--border-default);
font-size:var(--fs-caption);color:var(--text-muted);
}
.lh__trust b{
display:block;font-size:1.05rem;font-weight:900;
color:var(--text-title);line-height:1.2;
}
/* Split hero. .lh--hero holds the image, the lead form and the press strip —
image left / form right once there is room for two columns. .lh--copy is the
dark band under it carrying the headline, CTA and trust row.
The form card keeps its own left alignment inside the centred hero. */
.lh--hero .formcard{text-align:left;margin-bottom:var(--space-7)}
@media (min-width:640px){
.lh--hero .formcard{max-width:480px;margin-inline:auto}
}
/* Dark copy band. Every .lh__* colour below is repainted for the dark ground —
the base rules in this section all assume the light page background. */
.lh--copy{background:var(--bg-band-dark);color:var(--text-on-dark)}
.lh--copy .lh__eyebrow,
.lh--copy .lh__desc,
.lh--copy .lh__meta,
.lh--copy .lh__note,
.lh--copy .lh__trust{color:var(--text-on-dark-muted)}
.lh--copy .lh__title,
.lh--copy .lh__sub,
.lh--copy .lh__meta b,
.lh--copy .lh__trust b{color:var(--text-on-dark)}
/* The blue accent darkens into the navy ground, so it steps up a shade. */
.lh--copy .lh__hl{color:var(--accent-on-dark)}
/* Hairlines: the light-mode greys vanish on navy. */
.lh--copy .lh__meta span + span::before{background:rgba(255,255,255,.3)}
.lh--copy .lh__trust{border-top-color:rgba(255,255,255,.16)}
/* ==========================================================================
11. CARD LAYER
Simmigoh-style: every block sits on its own rounded surface with real
padding and a soft lift, instead of hairline dividers and flat rows.
Overrides only — §8 stays as authored, so removing this section restores
the original crypto-webinar treatment. Tokens are untouched.
========================================================================== */
/* ---- Shared card feel: bigger radius, softer edge, more air ---- */
.toolcard,.syscard,.demoitem,.tcard,.fitcard,.o,.fitem,.quizcard,.bstat{
border-radius:var(--r-lg);
}
/* ---- Objections: 6 flat cells -> 6 cards ---- */
.objstrip{gap:var(--stack-gap)}
.o{
padding:var(--card-pad) 14px;
box-shadow:var(--shadow-card);
display:flex;flex-direction:column;justify-content:center;gap:6px;
transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.o:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,24,40,.10)}
.o .x{margin-bottom:0;font-size:.75rem}
.o b{font-size:.95rem}
/* ---- Quiz: dashed outline -> solid card that fills in when picked ---- */
.quizcard{
background:var(--bg-surface);
border:1px solid var(--border-default);
padding:15px 16px;
box-shadow:var(--shadow-card);
}
.quizcard:hover{border-color:var(--accent);border-style:solid;transform:translateY(-1px)}
.quizcard[aria-pressed="true"]{
background:var(--bg-tint);border-color:var(--accent);
box-shadow:0 0 0 1px var(--accent) inset;
}
/* ---- FAQ: rows -> stacked cards ---- */
.faq{gap:var(--stack-gap)}
.fitem{box-shadow:var(--shadow-card)}
.fq{padding:17px var(--card-pad)}
.fa p{padding:0 var(--card-pad) 17px}
.fitem.open{border-color:var(--border-tint)}
/* ---- Community stats: divider grid -> three cards on the dark band ---- */
.bandstats{
border-block:0;padding-block:0;
gap:var(--grid-gap);
}
.bstat{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.10);
padding:var(--space-4) var(--space-2);
}
.bstat + .bstat{border-left:1px solid rgba(255,255,255,.10)} /* card edge, not a divider seam */
.bstat .lbl{margin-top:5px}
/* ---- Photo grids: rounded to match the card radius ---- */
.crowdgrid img{border-radius:var(--r-lg)}
/* ---- Gallery: slideshow reads as one media card ---- */
.slideshow{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card)}
/* ---- Testimonials + tools: lift them off the page like the rest ---- */
.tcard{padding:var(--card-pad);box-shadow:var(--shadow-card)}
.toolcard{box-shadow:var(--shadow-card)}
/* ---- Section headings get a little more air above a card grid ---- */
.objstrip,.faq,.sysgrid,.demolist,.tgrid{margin-top:var(--space-2)}
/* ---- Hero image card — keeps the 16:9 frame the video used ---- */
/* No fixed ratio — the image keeps its own proportions. */
.lh__img{
border-radius:var(--r-lg);overflow:hidden;
box-shadow:var(--shadow-card);
margin-bottom:var(--space-6);
}
.lh__img img{width:100%;height:auto;display:block}
/* ---- Sticky top nav (logo + wordmark) ----
The brand SVG is solid white, so it is recolored with a CSS mask rather than
used as an ![]()
— same technique as .brand-logo in §8. */
.nav{
position:sticky;top:0;z-index:60;
display:flex;align-items:center;
padding:10px var(--wrap-pad);
background:rgba(255,255,255,.88);
-webkit-backdrop-filter:saturate(180%) blur(10px);
backdrop-filter:saturate(180%) blur(10px);
border-bottom:1px solid var(--border-default);
}
.nav__brand{display:inline-flex;align-items:center;gap:9px}
.nav__mark{
width:26px;height:26px;flex:none;
background-color:var(--accent);
-webkit-mask:url("asset/img/brand/logo.svg") center / contain no-repeat;
mask:url("asset/img/brand/logo.svg") center / contain no-repeat;
}
.nav__title{
font-size:1rem;font-weight:900;letter-spacing:-.01em;
color:var(--text-title);line-height:1;
}
/* ==========================================================================
12. MOBILE RHYTHM — tighter vertical spacing on phones
Additive override of the §2 responsive-spacing tokens; the tablet/desktop
ramps at 640px and 1024px are untouched, so only the phone view tightens.
========================================================================== */
@media (max-width:639px){
:root{
--section-py:24px; /* was 34px */
--section-gap:14px; /* was 18px */
}
/* Hero carried an extra +24px on top for the old full-bleed photo; with the
nav and video card above it, that head room is no longer needed. */
.lh{padding-block:var(--section-py)}
.lh__eyebrow{margin-bottom:var(--space-4)}
.lh__img{margin-bottom:var(--space-5)}
.lh__trust{margin-top:var(--space-5);padding-top:var(--space-4)}
/* Hero only, phone only: pull the image up under the nav and the form up
under the image. Both gaps were 24px, which on a phone pushes the form's
first field below the fold for no benefit — the image and the form are one
unit here, not two banded sections. The copy band keeps the full rhythm. */
.lh--hero{padding-top:var(--space-3)}
.lh--hero .lh__img{margin-bottom:var(--space-3)}
/* Dark bands read heavier than light ones — trim them a touch more. */
.section--dark,.section--chart{padding-block:var(--space-6)}
}
/* ---- Ringing clock beside the countdown label ----
Shakes twice, then rests — a bell that rings continuously reads as noise.
The global prefers-reduced-motion rule in §7 stops the animation. */
.cd-ico{
display:inline-flex;flex:none;
color:var(--action-primary);
transform-origin:50% 20%;
animation:cdring 3.2s var(--ease) infinite;
}
.cd-ico svg{width:17px;height:17px;display:block}
@keyframes cdring{
0%, 34%, 100%{transform:rotate(0)}
2%, 10% {transform:rotate(-13deg)}
6%, 14% {transform:rotate(13deg)}
18% {transform:rotate(-9deg)}
22% {transform:rotate(9deg)}
26% {transform:rotate(-5deg)}
30% {transform:rotate(5deg)}
}
/* ---- Nav countdown — digits only, no label ---- */
.nav{justify-content:space-between;gap:var(--space-3)}
.nav__cd{
display:inline-flex;align-items:center;gap:6px;flex:none;
background:var(--bg-tint);border:1px solid var(--border-tint);
border-radius:var(--r-pill);
padding:5px 11px;
}
.nav__cd .cd-ico svg{width:13px;height:13px}
.nav__cd .cd-value{
font-size:.8rem;font-weight:900;line-height:1;
color:var(--accent);
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
@media (min-width:640px){
.nav__cd{padding:6px 14px}
.nav__cd .cd-value{font-size:.9rem}
}
@media (max-width:359px){ /* very narrow phones: keep the mark, drop the wordmark */
.nav__title{display:none}
}
/* ---- Featured-in logos ----
Source PNGs from the reference are rgb24 (opaque white background, no alpha),
so they cannot be knocked out to white on the dark band — they would render
as solid rectangles. Each sits on its own white chip instead, which keeps the
real brand colours and matches the card language in §11. */
.mediastrip{grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
@media(min-width:640px){.mediastrip{grid-template-columns:repeat(6,1fr)}}
.mlogo{
display:flex;align-items:center;justify-content:center;
aspect-ratio:auto;height:56px;padding:7px 9px;
background:var(--white);
border:0;border-radius:var(--r-md);
box-shadow:0 1px 3px rgba(1,9,22,.25);
}
.mlogo img{
max-width:100%;max-height:100%;width:auto;height:auto;
object-fit:contain;
mix-blend-mode:multiply; /* melts the logo's own white box into the chip */
}
/* ==========================================================================
13. DEVICE MOCKS (tool screenshots — laptop + phone)
Structure follows reference/layout/ai-x-trading-lp-v5_1.html: Decoder is a
laptop showing 原文 → 重点, Filter and Coach are phones. The screens are
dark on purpose — they read as product screenshots sitting on the light
page — but use OUR dark tokens and blue accent, not the reference's gold.
========================================================================== */
.mock{--mock-ink:#E8EEF7;--mock-dim:#8FA3BC;--mock-hl:var(--accent-on-dark);margin-top:var(--space-4)}
/* ---- Shared screen ---- */
.mock__scr{
background:var(--dark-850);
border:1px solid rgba(255,255,255,.09);
overflow:hidden;
}
.mock__bar{
display:flex;align-items:center;gap:5px;
padding:9px 12px;
background:rgba(255,255,255,.04);
border-bottom:1px solid rgba(255,255,255,.07);
}
.mock__bar i{width:8px;height:8px;border-radius:var(--r-full);background:rgba(255,255,255,.20)}
.mock__bar span{
margin-left:8px;font-size:.72rem;font-weight:800;letter-spacing:.04em;
color:var(--mock-ink);
}
/* ---- Laptop ---- */
.mock--laptop .mock__scr{border-radius:var(--r-md) var(--r-md) 4px 4px}
.mock__base{
height:9px;margin:0 auto;width:76%;
background:linear-gradient(180deg,var(--grey-300),var(--grey-200));
border-radius:0 0 var(--r-sm) var(--r-sm);
box-shadow:0 2px 5px rgba(1,9,22,.18);
}
/* Decoder: source column -> arrow -> extracted cards */
.dec{display:grid;grid-template-columns:0.82fr auto 1.18fr;gap:8px;padding:11px;align-items:start}
.dec__lbl{
font-size:.68rem;font-weight:800;color:var(--mock-dim);
margin-bottom:7px;letter-spacing:.02em;
}
.dec__lbl--hl{color:var(--mock-hl)}
.dec__src{
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
border-radius:var(--r-sm);padding:9px;
}
.dec__skel{display:grid;gap:5px}
.dec__skel span{height:5px;border-radius:3px;background:rgba(255,255,255,.10)}
.dec__skel span:nth-child(3n){width:78%}
.dec__skel span:nth-child(4n){width:90%}
.dec__skel span:nth-child(5n){width:64%}
.dec__arrow{
align-self:center;color:var(--mock-hl);
font-size:.9rem;font-weight:700;line-height:1;
}
.dec__out{display:grid;gap:6px}
.dec__card{
background:rgba(127,176,255,.06);
border:1px solid rgba(127,176,255,.28);
border-radius:var(--r-sm);padding:7px 9px;
}
.dec__card b{display:block;font-size:.72rem;color:var(--mock-hl);margin-bottom:3px}
.dec__card span{display:block;font-size:.66rem;line-height:1.5;color:var(--mock-dim)}
/* ---- Phone ---- */
.mock--phone{
position:relative;
max-width:290px;margin-inline:auto;
padding:9px;
background:linear-gradient(160deg,#20293A,#0C1220);
border-radius:30px;
box-shadow:0 10px 26px rgba(1,9,22,.28);
}
.mock__notch{
position:absolute;top:9px;left:50%;transform:translateX(-50%);
width:96px;height:17px;border-radius:0 0 11px 11px;
background:#0C1220;z-index:2;
}
.mock--phone .mock__scr{border-radius:22px;padding:22px 10px 12px}
.ph__top{display:flex;align-items:baseline;gap:6px;margin-bottom:9px}
.ph__top b{font-size:.78rem;font-weight:900;color:var(--mock-ink)}
.ph__top span{font-size:.66rem;color:var(--mock-dim)}
.ph__pills{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:9px}
.ph__pills i{
font-style:normal;font-size:.62rem;font-weight:700;
padding:3px 8px;border-radius:var(--r-pill);
background:rgba(255,255,255,.06);color:var(--mock-dim);
}
.ph__pills i.on{background:var(--accent);color:#fff}
.ph__count{font-size:.64rem;color:var(--mock-dim);margin-bottom:7px}
.ph__count b{color:var(--mock-ink)}
.ph__list{display:grid;gap:6px}
.ph__item{
display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07);
border-radius:var(--r-sm);padding:7px 8px;
}
.ph__item.is-dim{opacity:.55}
.ph__ico{
display:flex;align-items:center;justify-content:center;
width:28px;height:28px;border-radius:var(--r-sm);
background:rgba(127,176,255,.12);color:var(--mock-hl);
font-size:.58rem;font-weight:800;
}
.ph__tx b{display:block;font-size:.68rem;color:var(--mock-ink)}
.ph__tx span{display:block;font-size:.6rem;line-height:1.4;color:var(--mock-dim)}
.ph__ok{color:var(--success);font-size:.75rem;font-weight:900}
.ph__no{color:var(--action-primary);font-size:.75rem;font-weight:900}
.ph__btn{
margin-top:9px;text-align:center;
font-size:.64rem;font-weight:800;color:var(--mock-hl);
border:1px dashed rgba(127,176,255,.35);border-radius:var(--r-pill);
padding:6px 8px;
}
/* Coach chat */
.ph__chat{display:grid;gap:8px}
.cme{
justify-self:end;max-width:82%;
background:var(--accent);color:#fff;
font-size:.66rem;line-height:1.5;font-weight:600;
border-radius:12px 12px 3px 12px;padding:7px 9px;
}
.cai{display:grid;grid-template-columns:auto 1fr;gap:6px;max-width:94%}
.cav{
display:flex;align-items:center;justify-content:center;
width:20px;height:20px;border-radius:var(--r-full);flex:none;
background:rgba(127,176,255,.16);color:var(--mock-hl);
font-size:.52rem;font-weight:900;
}
.cbub{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.07);
color:var(--mock-dim);
font-size:.66rem;line-height:1.6;
border-radius:12px 12px 12px 3px;padding:7px 9px;
}
.cbub b{color:var(--mock-ink)}
.ph__input{
display:flex;align-items:center;justify-content:space-between;gap:8px;
margin-top:10px;padding:6px 6px 6px 11px;
border:1px solid rgba(255,255,255,.10);border-radius:var(--r-pill);
font-size:.64rem;color:var(--mock-dim);
}
.ph__input i{
font-style:normal;display:flex;align-items:center;justify-content:center;
width:20px;height:20px;border-radius:var(--r-full);
background:var(--accent);color:#fff;font-size:.62rem;font-weight:900;
}
/* ==========================================================================
14. PHOTO CARDS + FULL-BLEED BAND
Copied from reference/layout/ai-x-trading-lp-v5_1.html: a 2x2 grid of
captioned photo cards, and a full-bleed proof band with a centred caption.
========================================================================== */
/* ---- 2x2 captioned photo cards ---- */
.p4{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)}
.p4 figure{
position:relative;margin:0;overflow:hidden;
border-radius:var(--r-lg);
aspect-ratio:3/4;
background:var(--dark-900);
}
.p4 img{width:100%;height:100%;object-fit:cover;display:block}
.p4 figure::after{ /* legibility scrim under the caption */
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(1,9,22,0) 38%,rgba(1,9,22,.88) 100%);
}
.p4 figcaption{
position:absolute;left:0;right:0;bottom:0;z-index:1;
padding:12px 13px 13px;
color:#fff;font-size:.86rem;font-weight:700;line-height:1.45;
}
.p4 figcaption b{
display:block;margin-bottom:5px;
font-size:.68rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
color:var(--accent-on-dark);
}
/* ---- Full-bleed proof band ---- */
.band{
position:relative;
width:100vw;margin-inline:calc(50% - 50vw);
aspect-ratio:16/10;max-height:460px;
overflow:hidden;background:var(--dark-900);
}
@media(min-width:640px){.band{aspect-ratio:21/9}}
.band img{width:100%;height:100%;object-fit:cover;display:block}
.band::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(1,9,22,.30),rgba(1,9,22,.72));
}
.band__cap{
position:absolute;inset:0;z-index:1;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:6px;padding:var(--wrap-pad);text-align:center;
}
.band__t{
font-size:clamp(1.8rem,1.25rem + 2.8vw,3rem);
font-weight:900;color:#fff;letter-spacing:-.02em;line-height:1.2;
text-shadow:0 2px 14px rgba(1,9,22,.55);
}
.band__s{
font-size:clamp(1rem,.9rem + .6vw,1.35rem);
font-weight:600;color:#DCE6F3;
text-shadow:0 2px 12px rgba(1,9,22,.5);
}
/* ---- Objections: one column of cards, question -> answer across the row ---- */
.objstrip{grid-template-columns:1fr}
.o{
flex-direction:row;align-items:center;justify-content:space-between;
gap:var(--space-4);
text-align:left;
padding:14px var(--card-pad);
}
.o .x{
flex:1 1 auto;min-width:0;
font-size:.86rem;line-height:1.45;
margin-bottom:0;
}
.o b{
flex:0 0 auto;max-width:48%;
text-align:right;font-size:.92rem;line-height:1.35;
color:var(--accent-highlight);
}
/* The accordion only pads its , so anything else nested in an answer sat
flush against the card edges — inset the fit block to match. */
.fa .fitgrid{
padding:0 var(--card-pad) var(--card-pad);
margin-top:var(--space-3);
}
/* ==========================================================================
15. COACH MOCK — WhatsApp dark-theme UI
Palette is WhatsApp's own dark scheme, scoped to .wa so it cannot leak into
the page theme: it only has to look like WhatsApp inside the phone frame.
========================================================================== */
.wa{
--wa-bg:#0B141A; --wa-bar:#202C33; --wa-in:#202C33; --wa-out:#005C4B;
--wa-ink:#E9EDEF; --wa-dim:#8696A0; --wa-tick:#53BDEB; --wa-green:#00A884;
background:var(--wa-bg);
padding:0;
display:flex;flex-direction:column;
}
.mock--wa .mock__scr{border-radius:22px;overflow:hidden}
/* Header */
.wa__top{
display:flex;align-items:center;gap:8px;
background:var(--wa-bar);
padding:10px;
}
.wa__back{color:var(--wa-ink);font-size:1rem;line-height:1;opacity:.9}
.wa__av{
display:flex;align-items:center;justify-content:center;
width:28px;height:28px;border-radius:var(--r-full);flex:none;
background:var(--wa-green);color:#08312A;
font-size:.6rem;font-weight:900;
}
.wa__who{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.wa__who b{font-size:.76rem;font-weight:700;color:var(--wa-ink)}
.wa__who span{font-size:.6rem;color:var(--wa-dim)}
.wa__dots{display:flex;flex-direction:column;gap:2px;padding:0 2px}
.wa__dots i{width:3px;height:3px;border-radius:var(--r-full);background:var(--wa-dim)}
/* Chat area — WhatsApp's faint doodle wallpaper, approximated */
.wa__chat{
flex:1;padding:10px 8px;
display:grid;gap:6px;
background-color:var(--wa-bg);
background-image:
radial-gradient(circle at 18% 22%, rgba(255,255,255,.028) 0 2px, transparent 2px),
radial-gradient(circle at 72% 58%, rgba(255,255,255,.024) 0 3px, transparent 3px),
radial-gradient(circle at 40% 82%, rgba(255,255,255,.022) 0 2px, transparent 2px);
background-size:120px 120px, 160px 160px, 140px 140px;
}
.wa__day{
justify-self:center;
background:rgba(32,44,51,.92);color:var(--wa-dim);
font-size:.56rem;font-weight:600;letter-spacing:.03em;
padding:3px 9px;border-radius:6px;margin-bottom:2px;
}
/* Bubbles */
.wa__b{
position:relative;max-width:84%;
font-size:.68rem;line-height:1.55;color:var(--wa-ink);
padding:6px 9px 15px;border-radius:8px;
box-shadow:0 1px 1px rgba(0,0,0,.28);
}
.wa__b b{color:#fff;font-weight:700}
.wa__b--out{justify-self:end;background:var(--wa-out);border-top-right-radius:2px}
.wa__b--in{justify-self:start;background:var(--wa-in);border-top-left-radius:2px}
.wa__b--out::after,.wa__b--in::after{ /* bubble tail */
content:"";position:absolute;top:0;width:8px;height:11px;
}
.wa__b--out::after{
right:-7px;background:var(--wa-out);
clip-path:polygon(0 0,100% 0,0 100%);
}
.wa__b--in::after{
left:-7px;background:var(--wa-in);
clip-path:polygon(0 0,100% 0,100% 100%);
}
.wa__meta{
position:absolute;right:8px;bottom:4px;
display:inline-flex;align-items:center;gap:3px;
font-size:.5rem;color:var(--wa-dim);
}
.wa__b--out .wa__meta{color:rgba(233,237,239,.6)}
.wa__tick{font-style:normal;color:var(--wa-tick);font-size:.52rem;letter-spacing:-.12em}
/* Input bar */
.wa__bar{
display:flex;align-items:center;gap:6px;
padding:7px 8px 10px;background:var(--wa-bg);
}
.wa__field{
flex:1;background:#2A3942;color:var(--wa-dim);
font-size:.64rem;padding:8px 12px;border-radius:var(--r-pill);
}
.wa__send{
display:flex;align-items:center;justify-content:center;
width:28px;height:28px;border-radius:var(--r-full);flex:none;
background:var(--wa-green);color:#08312A;
font-size:.72rem;font-weight:900;
}
/* ---- Tool icons on the system cards ---- */
/* 3D tool renders — generated on white so they blend into the white card with
no cut-out. Sit to the RIGHT of the copy; the card becomes a two-column grid
with the icon spanning both text rows. */
.syscard:has(.sysicon){
display:grid;
grid-template-columns:1fr auto;
grid-template-rows:auto auto; /* name + description; the badge is absolute */
column-gap:var(--space-3);
align-items:center;align-content:center;
}
.syscard:has(.sysicon) .sysname,
.syscard:has(.sysicon) .sysdesc{grid-column:1}
.sysicon{
grid-column:2;grid-row:1 / span 2;align-self:center;
width:104px;height:104px;
margin:0 calc(var(--space-3) * -1) 0 0;
}
@media(max-width:389px){.sysicon{width:84px;height:84px}}
/* ==========================================================================
16. DESKTOP LAYOUT
Everything here lives inside min-width media queries, so the mobile layout
above is untouched. Goal: stop the page rendering as one narrow phone
column on a wide screen — give each block a proper two- or multi-column
arrangement and a wider canvas.
========================================================================== */
@media (min-width:1024px){
/* ---- Sticky nav: hold its content to the page's widest column ---- */
.nav{padding-inline:max(var(--wrap-pad), calc((100% - 1120px) / 2))}
/* ---- HERO: image left, form right ----
Same two-column grid the hero always had; the lead form now occupies the
right column where the copy used to sit. FEATURED IN tucks under the image
in the left column — stacked (phone/tablet) it falls under the form
instead, which is just DOM order taking over when the grid is off. */
.lh{padding-block:calc(var(--section-py) + var(--space-4))}
.lh--hero .wrap{
max-width:1120px;
display:grid;
grid-template-columns:1.08fr 1fr;
/* Row 4 is a slack row: it soaks up whatever height the form has over the
image + press strip, so rows 1-3 stay at content height instead of
stretching apart to match the taller column. */
grid-template-rows:auto auto auto 1fr;
column-gap:56px;
align-items:start;
}
/* Left column stacks image → FEATURED IN → logos; the form holds the right
column on its own, spanning every row so it starts level with the image. */
.lh--hero .lh__img{grid-column:1;grid-row:1;margin-bottom:0}
.lh--hero .kicker{grid-column:1;grid-row:2;margin-top:var(--space-6)}
/* Six logos across a half-width column would be ~84px each. Three up, two
rows down — which also brings the left column closer to the form's height. */
.lh--hero .mediastrip{grid-column:1;grid-row:3;grid-template-columns:repeat(3,1fr)}
.lh--hero .formcard{grid-column:2;grid-row:1 / -1;max-width:520px;margin-bottom:0}
/* ---- Copy band: one centred column, wider measure than the phone ---- */
.lh--copy .wrap{max-width:760px}
.lh__title{font-size:clamp(2.6rem,1.8rem + 2.2vw,3.4rem)}
.lh__desc{font-size:1.1rem}
.lh__trust{gap:var(--space-3) var(--space-7)}
/* ---- Lead form band: centred card, logos in one row ---- */
.section:has(.mediastrip) .wrap{max-width:1000px}
.mediastrip{max-width:820px;margin-inline:auto}
/* ---- TOOLS: copy one side, device the other, alternating ---- */
.section:has(.toolcard) .wrap{max-width:1120px}
.toolintro{max-width:640px}
.toolcard{
display:grid;
grid-template-columns:1fr 1fr;
column-gap:56px;
align-items:center;
padding:40px;
margin-bottom:var(--space-5);
}
/* copy is one grid item, so it stays together instead of stretching to the
height of the device mock beside it */
.toolcard > .toolinfo{grid-column:1;grid-row:1}
.toolcard > .mock{grid-column:2;grid-row:1;align-self:center;margin-top:0}
.toolcard > .toolinfo .checklist{margin-bottom:0}
/* second card mirrors, so the eye travels left-right-left down the section */
.toolcard:nth-of-type(even) > .mock{grid-column:1;grid-row:1}
.toolcard:nth-of-type(even) > .toolinfo{grid-column:2;grid-row:1}
.mock--phone{max-width:320px}
.dec{padding:16px;gap:12px}
.dec__card b{font-size:.8rem}
.dec__card span{font-size:.74rem}
/* ---- COMMUNITY: four photo cards in a row ---- */
.section:has(.p4) .wrap{max-width:1120px}
.p4{grid-template-columns:repeat(4,1fr)}
.p4 figcaption{font-size:.92rem;padding:14px 15px 15px}
/* ---- OBJECTIONS: stay one column, just don't span the whole screen ---- */
.objstrip{max-width:820px;margin-inline:auto}
.o{padding:16px 22px}
/* ---- SYSTEM: three across, lead card full width ---- */
.section:has(.sysgrid) .wrap{max-width:1120px}
.sysgrid{grid-template-columns:repeat(3,1fr)}
.syscard--lead{grid-column:span 3}
.syscard--lead .sysicon{width:132px;height:132px}
.syscard--lead .sysname{font-size:1.35rem}
.syscard--lead .sysdesc{font-size:1rem;max-width:60ch}
/* ---- DEMO: 2 x 2 ---- */
.section:has(.demolist) .wrap{max-width:1000px}
.demolist{grid-template-columns:1fr 1fr;align-items:stretch}
.demoitem{height:100%}
/* ---- Full-bleed band: keep it a strip, not a wall ---- */
.band{max-height:520px}
/* ---- FAQ + fit block: comfortable reading width ---- */
.section:has(.faq) .wrap{max-width:860px}
/* ---- Lead-form band: form centred, press strip in one row beneath it ---- */
.section--stats .wrap{max-width:1000px}
.section--stats .formcard{max-width:520px;margin-inline:auto}
.section--stats .kicker{margin-top:var(--space-7)}
.mediastrip{grid-template-columns:repeat(6,1fr);max-width:900px;margin-inline:auto}
.mlogo{height:60px}
/* ---- Final CTA: copy left, form right ---- */
.final .wrap{
display:grid;
grid-template-columns:1fr 480px;
column-gap:64px;
align-items:center;
text-align:left;
max-width:1080px;
}
.finalcopy{grid-column:1;grid-row:1}
.final h2{font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem)}
.final .seats{margin-inline:0}
.final .formcard{grid-column:2;grid-row:1;margin-inline:0;max-width:480px}
/* ---- Jason: portrait + intro left, timeline right ---- */
.section:has(.tl) .wrap{
max-width:1120px;
display:grid;
grid-template-columns:360px 1fr;
column-gap:64px;
align-items:start;
}
.section:has(.tl) .kicker{grid-column:1;grid-row:1}
.jason{grid-column:1;grid-row:2;display:block;margin-bottom:0}
.jason-photo{margin-bottom:var(--space-4)}
.tl{grid-column:2;grid-row:1 / span 2;max-width:none;margin:0}
/* ---- Wider canvases for the blocks that were sitting in a narrow column ---- */
.section:has(.slideshow) .wrap{max-width:1080px}
.section:has(.tgrid) .wrap{max-width:1120px}
.section:has(.faq) .wrap{max-width:960px}
/* ---- Toasts sit clear of the page edge ---- */
.toasts{left:24px}
}
/* Tablet — the in-between width, where a single column starts to look lost */
@media (min-width:768px) and (max-width:1023px){
.wrap{max-width:700px}
.p4{grid-template-columns:repeat(4,1fr)}
.toolcard{padding:var(--space-6)}
.mock--phone{max-width:300px}
}
/* Very wide screens — cap the hero so it does not sprawl. The copy band
deliberately does not grow: it is a centred text column, and past ~760px the
measure gets too long to read comfortably. */
@media (min-width:1440px){
.lh--hero .wrap{max-width:1200px;column-gap:72px}
}