/* ============================================================ Dealer Payments: "Night showroom meets fintech precision" Design system + cinematic sections. Tokens per docs/BRAND-KIT.md. ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root { /* Brand core */ --navy:#10172A; --carmine:#B2363F; --orange:#FF8C23; --white:#FFFFFF; --gradient-brand:linear-gradient(90deg,#B2363F 0%,#FF8C23 100%); /* Dark UI surfaces (derived tints of brand navy) */ --bg-primary:#0B0F1A; --bg-surface:#0B0F1A; --bg-elevated:#0B0F1A; /* Text ramp */ --text-primary:#F0F2F5; --text-secondary:#A0AEC0; --text-muted:#718096; --text-inverse:#10172A; /* Borders */ --border-color:rgba(255,255,255,0.08); --border-subtle:rgba(255,255,255,0.04); /* Semantic */ --success:#10B981; --warning:#FFB020; --error:#E5484D; /* Type */ --font-sans:"Poppins",system-ui,sans-serif; --tabular:"tnum" 1; --text-display:clamp(2.75rem,1rem + 7vw,6rem); --text-h1:clamp(2.25rem,1rem + 5vw,4rem); --text-h2:clamp(2rem,1.2rem + 3vw,3.25rem); --text-h3:clamp(1.5rem,1rem + 1.5vw,2rem); --text-h4:clamp(1.25rem,1rem + 0.6vw,1.5rem); --text-body:clamp(1rem,0.92rem + 0.4vw,1.125rem); --tracking-tight:-0.02em; --tracking-wide:0.04em; /* Spacing */ --space-4:16px; --space-5:24px; --space-6:32px; --space-8:48px; --space-9:64px; --space-section:clamp(4.5rem,3rem + 6vw,9rem); --container-max:1200px; --gutter:24px; /* Radii */ --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-card:14px; --radius-pill:999px; /* Elevation */ --shadow-sm:0 1px 2px rgba(0,0,0,0.40); --shadow-md:0 8px 24px rgba(0,0,0,0.45); --shadow-lg:0 24px 64px rgba(0,0,0,0.55); /* Glass */ --glass-bg:rgba(11,15,26,0.60); --glass-blur:16px; --glass-border:rgba(255,255,255,0.08); /* Motion */ --dur-fast:150ms; --dur-normal:320ms; --dur-slow:600ms; --stagger:80ms; --ease-out-expo:cubic-bezier(0.16,1,0.3,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1); --ease-overshoot:cubic-bezier(0.34,1.56,0.64,1); /* Focus */ --focus-ring:0 0 0 2px var(--bg-primary),0 0 0 4px var(--orange); } /* ---------- 2. BASE ---------- */ /* Section snapping is JS-driven (pageStepper() in main.js): scroll within a section, then any flick past its edge drags you hard to the next. scroll-padding keeps anchor jumps clear of the navbar. */ html{background:var(--bg-primary);scroll-padding-top:72px} body{background:transparent} h1,h2,h3,h4,h5{line-height:1.1;letter-spacing:var(--tracking-tight);font-weight:700} h2{font-size:var(--text-h2)} h3{font-size:var(--text-h3)} h4{font-size:var(--text-h4);font-weight:600} p{color:var(--text-secondary)} strong{color:var(--text-primary);font-weight:600} ::selection{background:var(--orange);color:var(--text-inverse)} :focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)} .container--narrow{max-width:820px} .grad-text{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent} .wordmark{font-weight:700;letter-spacing:-0.01em} .wordmark em{font-style:italic;font-weight:600} /* Film grain: subtle film over dark fields to kill banding (pointer-events:none) */ .grain{ position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:140px 140px; } /* Glass surface recipe */ .glass{ background:var(--glass-bg); -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur)); border:1px solid var(--glass-border); } /* Concentric-arc brand motif, bleeding from a corner */ .corner-arcs{position:absolute;width:min(46vw,520px);height:min(46vw,520px);color:var(--orange);opacity:0.06;pointer-events:none} .corner-arcs--tr{top:-40px;right:-60px} /* Section rhythm — all content sections share the brand-kit surface */ .section{position:relative;padding:var(--space-section) 0;overflow:hidden;background:var(--bg-surface)} .section-header{position:relative;isolation:isolate;max-width:760px;margin:0 auto var(--space-8);text-align:center;--hp:0} .section-header h2{margin-bottom:var(--space-4)} .section-header p{font-size:var(--text-body);max-width:60ch;margin:0 auto} /* Header parallax: eyebrow / headline / subcopy drift at different rates as the section crosses the viewport. --hp (-0.5 at the bottom edge .. +0.5 at the top) is set by headerParallax() in main.js. Compositor-only transforms; the headline glow lives on h2::before and rides the h2 transform. */ .section-header .eyebrow{transform:translateY(calc(var(--hp) * -56px))} .section-header h2{transform:translateY(calc(var(--hp) * -30px))} .section-header p{transform:translateY(calc(var(--hp) * -14px))} /* Illuminated header — the headline sits under a warm overhead showroom light + gives off a gentle warm halo. STATIC, never pulses (site motion rule: nothing self-animates but the hero bob). NOT a bordered chip/badge — just light. The glow pool is anchored to and centered on the H2 (not .section-header — there its bright center drifted onto the short eyebrow, e.g. FAQ). h2's parallax transform already makes it the containing block + stacking context, so the pool rides the headline and its z-index:-1 stays above the #0B0F1A section bg but behind the text. Pain-points recolors the light to carmine so the danger tone holds (a warm-orange invitation would read wrong on a "You're Losing Money" headline). */ .section-header h2{text-shadow:0 0 26px rgba(255,140,35,0.20),0 0 64px rgba(255,140,35,0.09)} .section-header h2::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); z-index:-1;pointer-events:none;width:min(880px,94vw);height:clamp(240px,300%,360px); background:radial-gradient(60% 62% at 50% 50%,rgba(255,140,35,0.17),rgba(178,54,63,0.05) 50%,transparent 74%)} /* Header keyword highlight — "top-lit metal": a gold highlight at the TOP of the glyphs warming down to carmine, as if the overhead showroom light is hitting the word, + a soft warm glow. SCOPED to header h2s so the global .grad-text (hero, pband, flow spine, seal) is untouched; overriding only background-image keeps the base rule's background-clip:text + transparent fill (do NOT use the `background` shorthand here — it would reset background-clip back to border-box and the gradient would paint as a solid block instead of clipping to the text). */ .section-header h2 .grad-text{ background-image:linear-gradient(152deg,#FFCE8C 0%,#FF9A3D 38%,#B2363F 100%); filter:drop-shadow(0 1px 12px rgba(255,140,35,0.28))} #pain-points .section-header h2::before{ background:radial-gradient(60% 62% at 50% 50%,rgba(178,54,63,0.19),rgba(178,54,63,0.06) 52%,transparent 74%)} #pain-points .section-header h2{text-shadow:0 0 26px rgba(178,54,63,0.20),0 0 64px rgba(178,54,63,0.09)} .eyebrow{display:inline-block;font-size:0.75rem;font-weight:600;letter-spacing:var(--tracking-wide); text-transform:uppercase;color:var(--orange);margin-bottom:var(--space-4)} .eyebrow--danger{color:var(--carmine)} /* Inline links inside body copy (subpage prose, FAQ answers) must read as links — the global a{color:inherit} otherwise makes them invisible in a paragraph */ .section p a{color:var(--orange)} .section p a:hover{text-decoration:underline} /* Deep-page handoff link that closes a homepage beat ("See the full …") — Wave 1 cutover */ .section-more{display:flex;justify-content:center;margin-top:var(--space-6)} .section-more a{display:inline-flex;align-items:center;gap:8px;color:var(--orange);font-weight:600;font-size:0.98rem} .section-more a svg{width:16px;height:16px;transition:transform var(--dur-fast) ease} .section-more a:hover svg{transform:translateX(4px)} /* ---------- 3. BUTTONS ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit; font-weight:600;letter-spacing:0.01em;border-radius:var(--radius-md);cursor:pointer;border:1px solid transparent; transition:transform var(--dur-fast) ease,background var(--dur-fast) ease,border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease; padding:12px 24px;font-size:var(--text-body)} .btn-sm{padding:8px 16px;font-size:0.875rem} .btn-lg{padding:16px 32px;font-size:1.0625rem} /* Glow effect ported from 21st.dev @wisedev "Glow Button", recolored to the brand orange. Click sets [data-state=clicked] from main.js for 200ms -> soft press + brighter glow. */ .btn-primary{--btn-glow-base:#D96A0F;--btn-glow-hi:#FFCE8C;color:var(--text-inverse); background-image:linear-gradient(325deg,var(--btn-glow-base) 0%,var(--btn-glow-base) 44%, var(--btn-glow-hi) 50%,var(--btn-glow-base) 56%,var(--btn-glow-base) 100%); background-size:400%;background-position:0% 0;transition:all 0.8s;transform:scale(1); box-shadow:0 0 20px rgba(255,140,35,0.5),0 5px 5px -1px rgba(224,110,20,0.25), inset 4px 4px 8px rgba(255,220,175,0.5),inset -4px -4px 8px rgba(181,78,8,0.35)} /* Ambient "Book a Demo" gleam (user-required): the page-content conversion CTAs — all .btn-lg — carry a continuous, unhurried light sweep to keep the primary CTA drawing the eye. Deliberate exception to the old "CTAs stay steady" rule, scoped to .btn-lg so the nav's .btn-sm CTA is untouched and stays steady. Declared BEFORE the :hover rule (equal specificity) so hover still wins with its one-shot sweep; the one-time .glare rules (calc nudge / value-result) are higher specificity and override while active. The global prefers-reduced-motion reset clamps iteration-count to 1, so this self-disables there. */ .btn-primary.btn-lg{animation:btnShine 3.6s ease-in-out infinite} @media (hover:hover){ .btn-primary:hover{animation:btnGlare 1.2s ease-in-out 1} } /* One-way downward sweep (100% -> 0%): the resting position (0% 0) matches both keyframe ends, so the pass starts and finishes flat with no seam. The gradient is diagonal, so the face sees a wider slice of it than the horizontal window alone (corners project onto the gradient axis) — the 400% size + narrow streak (44-56%) keep the face flat. */ @keyframes btnGlare{0%{background-position:100% 0}70%{background-position:0% 0}100%{background-position:0% 0}} /* Ambient loop: a quick gleam (streak sweeps 100%->0% over the first ~24%) then a long rest at 0% 0 = the flat resting position, so every cycle starts and ends seamless — reads as a periodic shine, not a strobe. Same one-way sweep + flat endpoints as btnGlare. */ @keyframes btnShine{0%{background-position:100% 0}24%{background-position:0% 0}100%{background-position:0% 0}} .btn-primary[data-state=clicked]{transform:scale(0.95); box-shadow:0 0 30px rgba(255,140,35,0.8),0 5px 5px -1px rgba(224,110,20,0.4), inset 4px 4px 12px rgba(255,220,175,0.7),inset -4px -4px 12px rgba(181,78,8,0.5)} .btn-primary:focus-visible{outline:2px solid rgba(255,140,35,0.6);outline-offset:2px} .btn-primary:focus:not(:focus-visible){outline:none} .btn-secondary{background:transparent;border-color:var(--border-color);color:var(--text-primary)} .btn-secondary:hover{border-color:var(--orange);background:rgba(255,140,35,0.08)} .btn-secondary:active{transform:scale(0.98)} /* ---------- 4. NAVBAR ---------- */ .navbar{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav,100);height:72px;display:flex;align-items:center; transition:background var(--dur-normal) ease,border-color var(--dur-normal) ease,backdrop-filter var(--dur-normal) ease} .navbar.scrolled{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur)); border-bottom:1px solid var(--border-color)} .nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%} .nav-logo{display:flex;align-items:center;gap:10px;font-size:1.15rem} .brand-mark{width:30px;height:30px;flex:none} .nav-links{display:flex;gap:30px} .nav-links a{color:var(--text-secondary);font-size:0.95rem;font-weight:500;transition:color var(--dur-fast) ease;position:relative} .nav-links a:hover{color:var(--text-primary)} .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--orange); transition:right var(--dur-normal) var(--ease-out-expo)} .nav-links a:hover::after{right:0} /* current-page marker (subpages set aria-current="page" on their own nav link) */ .nav-links > a[aria-current="page"]{color:var(--text-primary)} .nav-links > a[aria-current="page"]::after{right:0} .mobile-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px} .mobile-toggle span{width:24px;height:2px;background:var(--text-primary);border-radius:2px;transition:transform var(--dur-fast) ease,opacity var(--dur-fast) ease} .mobile-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .mobile-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .mobile-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* Solutions dropdown (Wave 1 cutover). Desktop: opens on hover (hover:hover only), on keyboard focus (:focus-within), and on click (.open set by navDropdown() in main.js, which also mirrors aria-expanded). ≤768px it flattens into the mobile panel — the "Solutions" button hides and the four links render inline with the other nav links. visibility (not display) keeps the open/close transition; the ::before strip bridges the hover gap between the button and the floating panel so the menu doesn't close while the pointer crosses it. */ .nav-drop{position:relative;display:flex;align-items:center} .nav-drop-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;padding:0; font-family:inherit;font-size:0.95rem;font-weight:500;color:var(--text-secondary); transition:color var(--dur-fast) ease} .nav-drop-btn:hover,.nav-drop.open .nav-drop-btn{color:var(--text-primary)} .nav-drop-chev{width:14px;height:14px;transition:transform var(--dur-normal) var(--ease-out-expo)} .nav-drop.open .nav-drop-chev{transform:rotate(180deg)} .nav-drop-menu{position:absolute;top:calc(100% + 18px);left:-14px;min-width:220px;display:grid;gap:2px; padding:10px;border-radius:var(--radius-md);border:1px solid var(--border-color); background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur)); box-shadow:var(--shadow-md); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity var(--dur-fast) ease,transform var(--dur-fast) ease,visibility 0s linear var(--dur-fast)} .nav-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px} /* NO :focus-within auto-open here — the clicked button keeps focus, which would pin the panel open after Escape/toggle-close. Keyboard flow is .open-driven: Enter/Space on the button toggles it (JS), Tab walks the links while .open holds the panel visible, and navDropdown() closes on Escape/outside-click/focusout. */ .nav-drop.open .nav-drop-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s} @media (hover:hover){ .nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s} .nav-drop:hover .nav-drop-chev{transform:rotate(180deg)} } .nav-drop-menu a{display:block;padding:9px 12px;border-radius:var(--radius-sm); font-size:0.92rem;font-weight:500;color:var(--text-secondary); transition:color var(--dur-fast) ease,background var(--dur-fast) ease} .nav-drop-menu a::after{content:none} /* no sliding underline inside the panel */ .nav-drop-menu a:hover{color:var(--text-primary);background:rgba(255,140,35,0.08)} /* current-page marker inside the dropdown (solution pages set aria-current="page") */ .nav-drop-menu a[aria-current="page"]{color:var(--text-primary);background:rgba(255,140,35,0.08)} /* ---------- 5. HERO ---------- */ .hero{position:relative;padding:calc(72px + var(--space-9)) 0 var(--space-8);isolation:isolate;overflow:hidden} .hero-glow{position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(620px circle at var(--mx,72%) var(--my,38%),rgba(255,140,35,0.16),transparent 62%), radial-gradient(900px circle at 50% -10%,rgba(178,54,63,0.10),transparent 60%)} .hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:var(--space-8);align-items:center;min-height:min(72vh,620px)} .hero-copy{max-width:600px} .hero-title{font-size:var(--text-h1);margin-bottom:var(--space-5)} .hero-sub{font-size:var(--text-body);max-width:52ch;margin-bottom:var(--space-6)} .hero-buttons{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:var(--space-5)} /* Trust strip (D5 numbers): scale proof right under the CTA pair, above the compliance chips */ .hero-cred{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:var(--space-6); font-size:0.92rem;color:var(--text-muted)} .hero-cred strong{color:var(--text-primary);font-weight:700} .hero-cred-sep{width:4px;height:4px;border-radius:50%;background:var(--text-muted);opacity:0.6} .trust-bar{display:flex;flex-wrap:wrap;gap:20px 28px} .trust-item{display:flex;align-items:center;gap:9px;font-size:0.9rem;color:var(--text-secondary);font-weight:500} .trust-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:rgba(255,140,35,0.1);color:var(--orange)} .trust-icon svg{width:17px;height:17px} /* Hero showroom stage */ .hero-stage{position:relative;height:100%;min-height:360px;display:grid;place-items:center} /* Hero credit card: black pebbled-leather material, floating, cursor-reactive 3D tilt */ .hero-card-scene{position:relative;width:min(100%,420px);aspect-ratio:1.586/1;perspective:1100px;z-index:1} .hero-card-float{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:cardBob 6s ease-in-out infinite} .hero-card{--tiltX:8deg;--tiltY:-18deg;position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden; transform-style:preserve-3d;transform:rotateX(var(--tiltX)) rotateY(var(--tiltY));transition:transform .3s var(--ease-out-expo); box-shadow:0 34px 64px rgba(0,0,0,0.55),0 0 0 1px rgba(255,140,35,0.20),inset 0 1px 0 rgba(255,170,90,0.18)} /* Black pebbled leather, fully procedural (no WebGL, no assets): near-black base + an SVG feTurbulence->feDiffuseLighting grain tile (lit bumps = pebbles) blended soft-light so the texture reads as material, not noise. stitchTiles keeps the tile seamless. */ .hero-card-leather{position:absolute;inset:0;border-radius:18px;overflow:hidden; background:radial-gradient(120% 100% at 28% 0%,rgba(255,178,102,0.07),transparent 55%), linear-gradient(160deg,#17161a 0%,#0e0d11 55%,#09080b 100%)} .hero-card-leather::before{content:"";position:absolute;inset:0;opacity:0.5;mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23ffffff' surfaceScale='1.7' diffuseConstant='1.1'%3E%3CfeDistantLight azimuth='235' elevation='55'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); background-size:260px 260px} /* Cursor-driven orange sheen: a warm light pool raking the grain, its position fed by the same pointer math as the tilt (--shx/--shy, unitless 0..1 set on #heroCard by main.js; rest pose = upper right). Lives on the leather's ::after with screen blend so the glow genuinely catches the pebble highlights beneath it (the leather element creates no stacking context, so the blend reaches the texture; putting this on .hero-card-sheen would isolate + screen away its own dark vignette). */ /* Sheen shares the foreground bloom's card-local center (--cgx/--cgy) and intensity (--cg-op) so both lights sit exactly under the cursor and rise/fall together. Card-local (not the old hero-relative 18%+shx*64% mapping, which put the pool in the card's MIDDLE when the cursor was at an edge). --cg-op is a proximity ramp set by heroPointer(): full over the card, fading out just outside it, so the card is caught in the cursor's glow as you approach and there's no permanent rest pool. Coords are unclamped, so when the cursor is just OUTSIDE, the center sits off-card and only the near edge catches the radial's tail. */ .hero-card-leather::after{content:"";position:absolute;inset:0;mix-blend-mode:screen; opacity:var(--cg-op,0); background:radial-gradient(70% 95% at calc(var(--cgx,0.5) * 100%) calc(var(--cgy,0.5) * 100%), rgba(255,140,35,0.15),rgba(255,120,30,0.05) 45%,transparent 72%); transition:opacity .25s var(--ease-out-expo)} /* The usual 115deg vignette keeps the lower-right falloff so the black card has form */ .hero-card-sheen{position:absolute;inset:0;border-radius:18px;pointer-events:none;z-index:2; background:linear-gradient(115deg,rgba(255,255,255,0.05) 0%,transparent 28%,transparent 60%,rgba(0,0,0,0.40) 100%)} .hero-card-face{position:absolute;inset:0;z-index:3;color:var(--white)} /* Cursor-following FOREGROUND light. Unlike .hero-card-leather::after (the sheen, blended UNDER the printing), this sits ABOVE the face (z:4 > z:3) so it passes in front of the wordmark/chip/ seal — reading as a light source ahead of the card rather than the ambient .hero-glow that hides behind it. Clipped to the card by the parent's overflow:hidden + radius, so it stays "only over the card" and can never wash the hero copy. screen blend adds warm light without dimming whites. Center = --cgx/--cgy (card-local 0..1 set by heroPointer); --cg-op keeps it dark until the pointer moves, so the resting card, touch, and reduced-motion look exactly as before. Position is NOT transitioned — the pool tracks the cursor instantly (like the ambient .hero-glow); only --cg-op fades so it appears/vanishes softly. Broad, low-contrast radial = a diffuse pool that matches the ambient hover light rather than a tight focused hotspot. */ .hero-card-frontglow{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:screen; opacity:var(--cg-op,0);transition:opacity .25s var(--ease-out-expo); background:radial-gradient(82% 82% at calc(var(--cgx,0.5) * 100%) calc(var(--cgy,0.5) * 100%), rgba(255,166,86,0.21),rgba(255,140,35,0.09) 40%,rgba(255,120,24,0.028) 64%,transparent 84%)} /* EMV chip in its real-card position: left edge, just above vertical center */ .hc-chip{position:absolute;top:44%;left:26px;transform:translateY(-50%);width:46px;height:34px;border-radius:6px; background:linear-gradient(135deg,#f0cd6a,#b9822b);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25)} .hc-chip::after{content:"";position:absolute;inset:6px 8px;border:1px solid rgba(0,0,0,0.3);border-radius:2px} .hc-wave{position:absolute;top:26px;right:26px;width:34px;height:34px;color:rgba(255,252,247,0.9);filter:drop-shadow(0 1px 2px rgba(0,0,0,0.45))} /* ivory — orange-on-orange vanished once the metal went brand-orange */ /* White hot-foil pressed into the leather: WHITE glyphs (the brand name must stay white — a dark blind-stamp was tried and rejected), with a top-edge inner shadow so the foil still reads slightly sunk into the hide rather than floating on it. */ .hc-brand{position:absolute;left:26px;bottom:52px;font-size:1.5rem;font-weight:700;letter-spacing:-0.01em; color:#EDF0F5; text-shadow:0 -1px 1px rgba(0,0,0,0.55),0 1px 1px rgba(255,178,102,0.18),0 2px 4px rgba(0,0,0,0.35)} .hc-brand em{font-style:italic;font-weight:600} .hc-number{position:absolute;left:26px;bottom:22px;display:flex;gap:14px} .hc-number i::before{content:"\2022\2022\2022\2022";letter-spacing:2px;color:rgba(255,255,255,0.55);font-size:0.78rem;text-shadow:0 1px 1px rgba(0,0,0,0.55)} /* Faint "lit floor" pool so the dark contact shadow reads on the near-black background */ /* Visible floor surface (lighter than the black bg) so the dark shadow has contrast */ .hero-card-floor{position:absolute;left:50%;bottom:-17%;width:120%;height:66px;transform:translateX(-50%);border-radius:50%;z-index:-2; background:radial-gradient(65% 100% at 50% 45%,rgba(218,213,208,0.20),rgba(218,213,208,0.05) 60%,transparent 82%);filter:blur(16px)} /* Genuine dark shadow on the floor */ .hero-card-shadow{position:absolute;left:50%;bottom:-15%;width:56%;height:26px;transform:translateX(-50%);border-radius:50%;z-index:-1; background:radial-gradient(closest-side,#000,rgba(0,0,0,0.88) 44%,rgba(0,0,0,0.32) 70%,transparent 82%);filter:blur(10px); animation:groundCard 6s ease-in-out infinite} /* Hero "CDK Integrated" seal: DEBOSSED into the card — a shallow recess stamped into the chrome, not an object sitting on it (a solid disc of any color read as a foreign sticker on the luminous metal). The recess is a translucent darkening over the card's own liquid-metal surface, so the shader literally shows through it; z-index:1 keeps it above the metal canvas but BELOW .hero-card-sheen (z2), so the card's light sweep continues across the recess. Deboss lighting: top inner shadow (overhead light), bottom inner light catch, lit lower lip. Child of #heroCard — rides the card's tilt + bob 1:1; pure CSS, no JS, no hover state. */ .cdk-seal{position:absolute;right:1%;bottom:1%;z-index:1;width:32%;aspect-ratio:1/1;border-radius:50%; display:grid;place-items:center; /* darker center protects text legibility over the moving chrome; translucent rim keeps the stamped read */ background:radial-gradient(circle,rgba(8,11,17,0.74) 0%,rgba(8,11,17,0.58) 58%,rgba(8,11,17,0.38) 100%); box-shadow: inset 0 3px 7px rgba(0,0,0,0.55), /* top inner shadow — recess wall under the light */ inset 0 -1px 2px rgba(255,255,255,0.14), /* bottom inner edge catching the light */ 0 1px 1px rgba(255,255,255,0.16), /* lower lip of the stamp catching light */ 0 -1px 1px rgba(0,0,0,0.25)} /* upper lip shading */ /* Hairline orange enamel inlaid in the stamp groove — pigment, not glow */ .cdk-seal::before{content:"";position:absolute;inset:5.5%;border-radius:50%;pointer-events:none; border:1px solid rgba(255,140,35,0.55)} .cdk-seal-core{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:5px;text-align:center} /* Engraved orange check — bare mark, no filled chip (a fill reads sticker-ish inside a stamp). Orange (not the site-wide teal --success): teal was the lone cool hue on the warm chrome/gold/ orange card; the check shape alone carries "verified". */ .cdk-seal-check{display:grid;place-items:center;color:var(--orange); filter:drop-shadow(0 1px 1px rgba(0,0,0,0.5))} .cdk-seal-check svg{width:22px;height:22px} .cdk-seal-text{font-size:0.82rem;font-weight:600;line-height:1.15;color:rgba(240,242,245,0.88); text-shadow:0 1px 1px rgba(0,0,0,0.45)} .cdk-seal-text strong{display:block;font-size:1.05rem;letter-spacing:0.02em; background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent; /* drop-shadow (not text-shadow, which bleeds through transparent gradient glyphs) for contrast over chrome */ filter:drop-shadow(0 1px 1px rgba(0,0,0,0.65))} @keyframes cardBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} /* ground shadow shrinks as the card rises (in sync with the float) */ @keyframes groundCard{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(0.9)}} /* ---------- 6. LOGO MARQUEE ---------- */ /* Full-bleed band: solid hairlines above/below the emblems. The edge fade lives on the inner .logo-marquee-viewport — a mask on .logo-marquee itself would fade the border lines too. No discs/backgrounds behind the logos: the hero's cursor-following glow made any opaque punch-out read as visible circles on hover. */ .logo-marquee{--marquee-dur:90s;position:relative;margin-top:var(--space-8);padding:22px 0; border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color)} .logo-marquee--section{margin-top:0} .logo-marquee-viewport{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} .logo-marquee-track{display:flex;width:max-content;animation:marquee var(--marquee-dur) linear infinite} .logo-marquee--reverse .logo-marquee-track{animation-direction:reverse} .logo-marquee:hover .logo-marquee-track{animation-play-state:paused} .logo-set{display:flex;gap:28px;padding-right:28px} .logo-chip span{display:inline-flex;transition:filter var(--dur-normal) ease} .logo-chip img{display:block;width:64px;height:64px;object-fit:contain} .logo-marquee--warm .logo-chip span{filter:grayscale(1)} .logo-marquee--warm.in-view .logo-chip span{filter:grayscale(0)} @keyframes marquee{to{transform:translateX(-50%)}} /* ---------- 7. SURCHARGE FLOW (pinned scrollytelling) ---------- Desktop: a 150vh runway pins the diagram (position:sticky) for 10vh of scroll per step (user-tuned SUPER SENSITIVE: 50 -> 35 -> 20 -> 10vh; one wheel flick ~= one milestone. Milestone motion is time-based so band length is pure pacing); the far-left number rail is the progress spine. main.js drives --flow-progress (0..1) and data-active (1..5). Mobile/reduced-motion: normal flow, no pin. */ #how-it-works{overflow:visible} /* sticky breaks inside the .section overflow:hidden clip */ .flow-runway{position:relative;height:calc(100vh + 5 * 10vh)} .flow-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center; padding-top:72px;box-sizing:border-box} /* keep the diagram clear of the fixed navbar */ .flow-pin>.container{width:100%} /* --flow-gap: THE uniform vertical rhythm — every gap between beats (step-step, step-branch, branch-final) uses this one token, and the connector SVGs span exactly this zone. STRETCH-FILL: the flow is given the pin's full height and the diagram is a flex column — flex-grow 3/1/1 (one unit per card row) with flex-basis carrying each block's internal gap, so the browser distributes ALL available height across five EQUAL card rows + uniform gaps at ANY viewport height. Zero leftover space by construction — never size this section with fixed heights or compact breakpoints. */ .flow{--flow-progress:1;--flow-gap:clamp(20px,3.6vh,44px);position:relative;max-width:1100px;margin:0 auto; height:calc(100vh - 96px); /* pin minus navbar padding (72) minus breathing room */ display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 clamp(20px,4vw,44px)} .flow-diagram{min-width:0;min-height:0;display:flex;flex-direction:column;gap:var(--flow-gap)} /* Number rail (far-left trail): track + gradient fill + comet head + 5 stops */ .flow-rail{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:center} .rail-line{position:absolute;top:22px;bottom:22px;left:calc(50% - 1px);width:2px;border-radius:2px; background:var(--border-color); -webkit-mask-image:linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent)} /* Milestone fill: NOT scroll-scrubbed. main.js sets --rail-fill to the active stop's center (px) on each band change and the height TRANSITION plays the run to the next number — a 2px-wide element, so the height animation is negligible. Default 100% = no-JS / reduced-motion fallback (full line). --rail-run: the trail's stop-to-stop travel time (deliberately slow/premium — a calm pour with a long soft landing). The head MUST share the exact duration + curve or it desyncs from the fill edge. main.js STEP_COOLDOWN must stay >= this. */ .flow{--rail-run:1.25s;--ease-rail:cubic-bezier(0.45,0.05,0.15,1)} .rail-fill{position:absolute;top:0;left:0;right:0;border-radius:2px; height:var(--rail-fill,100%); background:linear-gradient(180deg,var(--carmine),var(--orange)); box-shadow:0 0 12px rgba(255,140,35,0.35); transition:height var(--rail-run) var(--ease-rail)} .rail-head{position:absolute;left:calc(50% - 3px);top:var(--rail-fill,100%);width:6px;height:6px; margin-top:-3px;border-radius:50%;background:var(--orange);opacity:0.9; transition:top var(--rail-run) var(--ease-rail); box-shadow:0 0 10px 2px rgba(255,140,35,0.55)} .rail-stop{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center; font-family:inherit;font-weight:600;font-size:0.95rem;color:var(--text-muted);cursor:pointer; background:var(--bg-surface);border:1px solid var(--border-color); transition:transform var(--dur-normal) var(--ease-out-expo),border-color var(--dur-normal) ease, background var(--dur-normal) ease,color var(--dur-normal) ease,box-shadow var(--dur-normal) ease} .rail-stop svg{width:18px;height:18px} .rail-stop:hover{border-color:rgba(255,140,35,0.55);color:var(--text-primary);transform:scale(1.06)} .rail-stop.is-passed{background:var(--gradient-brand);border-color:transparent;color:var(--text-inverse)} .rail-stop--final.is-passed{background:var(--success);color:#fff} .rail-stop.is-active{color:var(--text-primary);transform:scale(1.16); border:2px solid transparent; background:linear-gradient(var(--bg-elevated),var(--bg-elevated)) padding-box, linear-gradient(135deg,var(--carmine),var(--orange)) border-box; box-shadow:0 0 0 4px rgba(255,140,35,0.10),0 0 22px rgba(255,140,35,0.30)} /* Stop 5: "5" until its beat lights (active or passed), then the number spins out and the check stroke-draws in. Both stack in the button's single grid cell. */ .rail-stop--final .rs-num,.rail-stop--final .rs-check{grid-area:1/1; transition:opacity 0.3s ease,transform 0.4s var(--ease-out-expo)} .rail-stop--final .rs-check{opacity:0;transform:scale(0.4) rotate(-90deg)} .rail-stop--final .rs-check path{stroke-dasharray:1;stroke-dashoffset:1; transition:stroke-dashoffset 0.45s var(--ease-out-expo) 0.12s} .rail-stop--final:is(.is-active,.is-passed) .rs-num{opacity:0;transform:scale(0.3) rotate(90deg)} .rail-stop--final:is(.is-active,.is-passed) .rs-check{opacity:1;transform:scale(1) rotate(0deg)} .rail-stop--final:is(.is-active,.is-passed) .rs-check path{stroke-dashoffset:0} /* Step track (desktop: rail carries the numbers; dots return on mobile) */ .flow-track{position:relative;display:flex;flex-direction:column;gap:var(--flow-gap); flex:3 0 calc(2*var(--flow-gap));min-height:0;list-style:none;margin:0;padding:0} .flow-dot{display:none;width:48px;height:48px;border-radius:50%;place-items:center;font-weight:700; background:var(--bg-elevated);border:1px solid var(--border-color);color:var(--orange);z-index:1} .flow-dot--ok{background:rgba(16,185,129,0.14);border-color:rgba(16,185,129,0.4);color:var(--success)} .flow-dot--ok svg{width:22px;height:22px} .flow-node{position:relative;display:flex;flex:1;min-height:0; transition:opacity 0.45s ease,transform 0.45s var(--ease-out-expo),filter 0.45s ease} /* Dark liquid glass slab: near-black translucent tint over a strong saturated blur, a specular gradient rim (bright top-left edge fading around), a refraction sheen pooling from the top light, and an inner depth shade at the bottom. The rim is the border-box layer of the background stack (border stays transparent), so the active states swap only that layer for their orange/teal hairlines. */ .flow-body{position:relative;flex:1;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto; column-gap:20px;row-gap:5px;align-items:center;align-content:center;padding:18px 34px;border-radius:var(--radius-lg); border:1px solid transparent; background: linear-gradient(160deg,rgba(255,255,255,0.05),rgba(255,255,255,0) 42%) padding-box, linear-gradient(rgba(7,10,18,0.62),rgba(7,10,18,0.62)) padding-box, linear-gradient(168deg,rgba(255,255,255,0.20),rgba(255,255,255,0.05) 30%,rgba(255,255,255,0.02) 62%,rgba(255,255,255,0.10)) border-box; -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5); box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),inset 0 -16px 30px -20px rgba(0,0,0,0.45); transition:box-shadow 0.45s ease,background 0.45s ease,border-color 0.45s ease} .flow-body::before,.branch-card::before{content:"";position:absolute;inset:0;border-radius:inherit; pointer-events:none; background:radial-gradient(130% 70% at 14% -6%,rgba(255,255,255,0.07),rgba(255,255,255,0) 55%)} .flow-icon{grid-row:1/span 2;width:52px;height:52px;border-radius:14px;display:grid;place-items:center; color:var(--text-muted);background:rgba(255,255,255,0.04);border:1px solid var(--border-subtle); transition:color 0.45s ease,border-color 0.45s ease,background 0.45s ease} .flow-icon svg{width:24px;height:24px} .flow-icon--ok{color:var(--success)} .flow-body h4{margin:0;font-size:1.35rem} .flow-body p{font-size:1.05rem;margin:0} .flow-branch{position:relative;margin:0;padding-top:var(--flow-gap); flex:1 0 var(--flow-gap);min-height:0;display:flex;flex-direction:column} .branch-lines{position:absolute;top:0;left:0;width:100%;height:var(--flow-gap);transition:opacity 0.45s ease} /* Milestone draw: connectors play their full draw when their band lights (or when the pin has released / no JS), instead of scrubbing with scroll. */ .branch-lines .bl{stroke-dasharray:1;stroke-dashoffset:1; transition:stroke-dashoffset 0.9s var(--ease-in-out) 0.3s} :is(.flow[data-active="4"],.flow[data-active="5"],.flow:not([data-active])) .branch-lines .bl{stroke-dashoffset:0} .bl-credit{filter:drop-shadow(0 0 5px rgba(255,140,35,0.45))} .branch-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;flex:1;min-height:0} /* Branch cards share the liquid glass body but keep their 1px glass border + 2px top path accent (credit orange / debit muted) instead of the gradient rim. */ .branch-card{position:relative;display:flex;flex-direction:column;justify-content:center; padding:18px 34px;border-radius:var(--radius-lg); background: linear-gradient(160deg,rgba(255,255,255,0.05),rgba(255,255,255,0) 42%), rgba(7,10,18,0.62); -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5); box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),inset 0 -16px 30px -20px rgba(0,0,0,0.45); transition:transform 0.45s var(--ease-out-expo),box-shadow 0.45s ease,border-color 0.45s ease,opacity 0.45s ease,filter 0.45s ease} .branch-card h4{margin:6px 0 4px;font-size:1.35rem} .branch-card p{font-size:1.05rem;margin:0} .branch-label{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--orange)} .branch-label--muted{color:var(--text-muted)} .branch-credit{border-top:2px solid var(--orange)} .branch-debit{border-top:2px solid var(--text-muted)} .branch-card:hover,.branch-card:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-lg)} /* Hover one path -> dim the other, and light its connector */ .flow:has(.branch-credit:hover) :is(.bl-debit,.ml-debit), .flow:has(.branch-debit:hover) :is(.bl-credit,.ml-credit){opacity:0.25} .flow:has(.branch-credit:hover) .branch-debit,.flow:has(.branch-debit:hover) .branch-credit{opacity:0.5} .branch-credit:hover{border-color:var(--orange);box-shadow:0 12px 40px rgba(255,140,35,0.16)} .flow-merge{position:relative;margin:0;padding-top:var(--flow-gap); flex:1 0 var(--flow-gap);min-height:0;display:flex;flex-direction:column} .merge-lines{position:absolute;top:0;left:0;width:100%;height:var(--flow-gap);transition:opacity 0.45s ease} .merge-lines .ml{stroke-dasharray:1;stroke-dashoffset:1; transition:stroke-dashoffset 0.9s var(--ease-in-out) 0.3s} :is(.flow[data-active="5"],.flow:not([data-active])) .merge-lines .ml{stroke-dashoffset:0} .ml-credit{filter:drop-shadow(0 0 5px rgba(255,140,35,0.45))} .flow-node--final{flex:1;width:100%;max-width:680px;margin:0 auto} /* Spotlight: while pinned (data-active set by main.js), dim everything but the live beat */ .flow[data-active] :is(.flow-node,.branch-card,.branch-lines,.merge-lines){opacity:0.35} .flow[data-active="1"] .flow-node[data-step="1"], .flow[data-active="2"] .flow-node[data-step="2"], .flow[data-active="3"] .flow-node[data-step="3"], .flow[data-active="4"] :is(.branch-card,.branch-lines), .flow[data-active="5"] :is(.flow-node--final,.merge-lines){opacity:1} .flow[data-active="1"] .flow-node[data-step="1"], .flow[data-active="2"] .flow-node[data-step="2"], .flow[data-active="3"] .flow-node[data-step="3"], .flow[data-active="5"] .flow-node--final{transform:translateY(-3px)} .flow[data-active="1"] .flow-node[data-step="1"] .flow-body, .flow[data-active="2"] .flow-node[data-step="2"] .flow-body, .flow[data-active="3"] .flow-node[data-step="3"] .flow-body{ border-color:transparent; background: linear-gradient(160deg,rgba(255,255,255,0.06),rgba(255,255,255,0) 42%) padding-box, linear-gradient(rgba(9,12,20,0.66),rgba(9,12,20,0.66)) padding-box, linear-gradient(120deg,rgba(255,140,35,0.55),rgba(178,54,63,0.25) 55%,rgba(255,255,255,0.07)) border-box; /* no dark drop shadow: it bands visibly on the near-black bg (see ground-shadow lesson) */ box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),inset 0 -16px 30px -20px rgba(0,0,0,0.4),0 0 30px rgba(255,140,35,0.13)} .flow[data-active="1"] .flow-node[data-step="1"] .flow-icon, .flow[data-active="2"] .flow-node[data-step="2"] .flow-icon, .flow[data-active="3"] .flow-node[data-step="3"] .flow-icon{ color:var(--orange);border-color:rgba(255,140,35,0.35);background:rgba(255,140,35,0.08)} .flow[data-active="4"] .branch-card{transform:translateY(-3px)} .flow[data-active="4"] .branch-credit{border-color:rgba(255,140,35,0.5); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 12px 40px rgba(255,140,35,0.14)} .flow[data-active="4"] .branch-debit{border-color:rgba(255,255,255,0.16)} .flow[data-active="5"] .flow-node--final .flow-body{ border-color:transparent; background: linear-gradient(160deg,rgba(255,255,255,0.06),rgba(255,255,255,0) 42%) padding-box, linear-gradient(rgba(9,12,20,0.66),rgba(9,12,20,0.66)) padding-box, linear-gradient(120deg,rgba(16,185,129,0.55),rgba(16,185,129,0.10)) border-box; box-shadow:inset 0 1px 0 rgba(255,255,255,0.10),inset 0 -16px 30px -20px rgba(0,0,0,0.4),0 0 30px rgba(16,185,129,0.15)} .flow[data-active="5"] .flow-icon--ok{background:rgba(16,185,129,0.12);border-color:rgba(16,185,129,0.4); animation:settlePulse 1.4s var(--ease-out-expo) 1} @keyframes settlePulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,0.45)}100%{box-shadow:0 0 0 16px rgba(16,185,129,0)}} /* Progressive reveal: upcoming beats are GHOSTS — the real card at 8% opacity with a blur, so the void shows the silhouette of what's coming but nothing is readable. Activation blooms them in (opacity + blur transition off). data-active="0" = approaching the pin (whole diagram is a ghost silhouette); passed beats keep the 35% dim from above; these later rules win the same-specificity cascade. */ .flow[data-active="0"] .flow-node[data-step="1"], :is(.flow[data-active="0"],.flow[data-active="1"]) .flow-node[data-step="2"], :is(.flow[data-active="0"],.flow[data-active="1"],.flow[data-active="2"]) .flow-node[data-step="3"], :is(.flow[data-active="0"],.flow[data-active="1"],.flow[data-active="2"],.flow[data-active="3"]) .branch-card, :is(.flow[data-active="0"],.flow[data-active="1"],.flow[data-active="2"],.flow[data-active="3"],.flow[data-active="4"]) .flow-node--final{ opacity:0.08;filter:blur(3px);pointer-events:none} :is(.flow[data-active="0"],.flow[data-active="1"],.flow[data-active="2"],.flow[data-active="3"]) .branch-lines, :is(.flow[data-active="0"],.flow[data-active="1"],.flow[data-active="2"],.flow[data-active="3"],.flow[data-active="4"]) .merge-lines{opacity:0} /* Conveyor drift: the whole flow assembly (rail + diagram together, so the stops stay aligned with their cards) rides ~70px upward across the pin, scrubbed directly by scroll (settles at 0 when released; mobile/reduced-motion reset it). */ .flow{transform:translateY(calc((1 - var(--flow-progress)) * 70px))} /* Rail mapping: main.js measures each beat's center and pins its stop to it (class rail-mapped + inline top). --rail-from/--rail-to make the line span stop 1 -> check. Without JS the flex space-between spread above remains as the fallback. */ .flow.rail-mapped .rail-stop{position:absolute;left:50%;margin-left:-22px} .flow.rail-mapped .rail-line{top:var(--rail-from,22px);bottom:auto; height:calc(var(--rail-to,100%) - var(--rail-from,22px))} /* Very short desktop viewports: the stretch-fill layout already sizes the cards to fit any height — this only trims type + rail chrome when things get truly cramped. */ @media (min-width:769px) and (max-height:700px){ .flow-body h4,.branch-card h4{font-size:1.1rem} .flow-body p,.branch-card p{font-size:0.92rem} .flow-icon{width:40px;height:40px} .flow-icon svg{width:19px;height:19px} .rail-stop{width:38px;height:38px;font-size:0.85rem} .rail-line{top:19px;bottom:19px} .flow.rail-mapped .rail-stop{margin-left:-19px} } /* ---------- 7b. HOW-IT-WORKS — full-screen SCROLLYTELLING with SNAP + PARALLAX ---------- .hiw is a 100vh section: a static rail (left) beside .hiw-steps — a NESTED scroll container with scroll-snap-type:y mandatory + scroll-snap-stop:always, so you land ONLY on whole scenes, never in-between. As the container scrolls, ledgerCurrent() (main.js) sets per-scene --sp (-1..1, 0 = centred) for PARALLAX (visual/title/badge drift at different speeds + a glow that trails), plus --cur (1..5) for the rail fill and .is-current/.is-passed on the nodes. Own .hiw-* names (no collision with the value-ledger). Reduced motion: instant snap, no parallax. */ /* Runway gives the sticky .hiw somewhere to pin. 150vh = 100vh on-screen + 50vh of pin travel: wide enough that a fast flick can't skip the "catch", short enough that the exit tail is brief. */ .hiw-runway{position:relative;height:120vh} .hiw{--hiw-rail:112px;--cur:1;--led-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; position:sticky;top:0;max-width:1200px;margin:0 auto;height:100vh;overflow:hidden; display:grid;grid-template-columns:var(--hiw-rail) minmax(0,1fr)} /* Rail — static column, vertically centred in the 100vh section */ .hiw-rail{position:relative;height:100vh;display:flex;flex-direction:column;justify-content:center; align-items:center;gap:clamp(40px,11vh,110px);z-index:2} .hiw-rail-track{position:absolute;top:14%;bottom:14%;left:50%;width:2px;transform:translateX(-50%); border-radius:2px;background:var(--border-color);overflow:hidden} .hiw-rail-fill{position:absolute;top:0;left:0;right:0;border-radius:2px; height:calc((var(--cur) - 1) / 4 * 100%); background:linear-gradient(180deg,var(--carmine),var(--orange));box-shadow:0 0 12px rgba(255,140,35,0.5); transition:height 1.1s var(--ease-out-expo)} /* Rail node buttons */ .hiw-node{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;display:grid;place-items:center; cursor:pointer;-webkit-appearance:none;appearance:none;padding:0; font-family:var(--led-mono);font-weight:600;font-size:0.95rem;color:var(--text-muted); background:var(--bg-primary);border:1px solid var(--border-color); transition:color .4s ease,border-color .4s ease,background .4s ease,box-shadow .4s ease,transform .4s var(--ease-out-expo)} .hiw-node svg{width:22px;height:22px} .hiw-node.is-passed{color:var(--text-inverse);border-color:transparent;background:var(--gradient-brand)} .hiw-node.is-current{color:var(--orange);border-color:var(--orange);box-shadow:0 0 22px rgba(255,140,35,0.5);transform:scale(1.08)} .hiw-node::before,.hiw-node::after{content:"";position:absolute;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .35s ease} .hiw-node::before{inset:-10px;filter:blur(8px);background:radial-gradient(circle,rgba(178,54,63,0.45),rgba(255,140,35,0.22) 50%,transparent 70%)} .hiw-node::after{inset:-4px;padding:2px;background:conic-gradient(from 0deg,var(--carmine),var(--orange),var(--carmine)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .hiw-node.is-current::before{opacity:1;animation:ledBreathe 2s ease-in-out infinite} .hiw-node.is-current::after{opacity:1;animation:ledSpin 3s linear infinite} .hiw-node--check.is-current{color:var(--success);border-color:var(--success);box-shadow:0 0 22px rgba(16,185,129,0.5)} .hiw-node--check.is-passed{background:rgba(16,185,129,0.16);border-color:rgba(16,185,129,0.5);color:var(--success)} .hiw-tip{position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%) translateX(-6px);white-space:nowrap; background:var(--bg-elevated);color:var(--text-secondary);font-size:0.8rem;font-weight:500;padding:6px 12px; border-radius:8px;border:1px solid var(--border-color);box-shadow:var(--shadow-lg);opacity:0;pointer-events:none; transition:opacity .2s ease,transform .2s var(--ease-out-expo)} .hiw-node:hover .hiw-tip,.hiw-node:focus-visible .hiw-tip{opacity:1;transform:translateY(-50%) translateX(0)} @keyframes ledSpin{to{transform:rotate(360deg)}} @keyframes ledBreathe{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.22);opacity:.82}} /* Scenes deck — the wheel-stepper (main.js) drives scrollTop; not user-scrollable, so wheeling never leaks to the page mid-entry and there's nothing to rest between (snap is intrinsic). */ .hiw-steps{height:100vh;overflow:hidden;scroll-behavior:smooth} .hiw-steps::-webkit-scrollbar{display:none} /* Full-viewport step scenes (exact 100vh so each is one snap target) */ .hiw-step{position:relative;height:100vh;display:flex;align-items:center;justify-content:center;padding:9vh 3vw; text-align:center;scroll-snap-align:center;scroll-snap-stop:always;--sp:0} .hiw-step::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(46% 38% at 50% 46%,rgba(255,140,35,0.09),rgba(178,54,63,0.03) 46%,transparent 72%); transform:translateY(calc(var(--sp) * 120px))} .hiw-in{position:relative;z-index:1;max-width:640px} /* PARALLAX: layers drift at different speeds with --sp (JS, per scene) */ .hiw-badge{transform:translateY(calc(var(--sp) * -46px))} .hiw-title{transform:translateY(calc(var(--sp) * -22px))} .hiw-desc{transform:translateY(calc(var(--sp) * -8px))} .hiw-visual,.hiw-fork{transform:translateY(calc(var(--sp) * 58px))} .hiw-badge{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px; border:1px solid var(--border-color);background:rgba(255,255,255,0.03);font-family:var(--led-mono); font-size:0.76rem;font-weight:600;letter-spacing:0.04em;color:var(--text-secondary);margin-bottom:26px} .hiw-badge-dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none; background:var(--gradient-brand);color:var(--text-inverse);font-size:0.82rem} .hiw-badge-dot--ok{background:rgba(16,185,129,0.18);color:var(--success)} .hiw-badge-dot--ok svg{width:15px;height:15px} .hiw-badge--ok{color:var(--success)} .hiw-title{font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.03;letter-spacing:-0.025em;font-weight:800;margin:0 0 20px} .hiw-desc{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.6;color:var(--text-secondary);max-width:46ch;margin:0 auto 40px} .hiw-visual{position:relative;width:100%;max-width:440px;aspect-ratio:16/10;margin:0 auto;border-radius:var(--radius-lg); display:grid;place-items:center;background:linear-gradient(150deg,rgba(178,54,63,0.10),rgba(255,140,35,0.08)); border:1px solid var(--border-subtle);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .hiw-visual-ico{display:grid;place-items:center;width:96px;height:96px;border-radius:24px;color:var(--orange); background:rgba(255,140,35,0.10);border:1px solid rgba(255,140,35,0.28)} .hiw-visual-ico svg{width:48px;height:48px} .hiw-visual--ok{background:linear-gradient(150deg,rgba(16,185,129,0.12),rgba(16,185,129,0.05))} .hiw-visual--ok .hiw-visual-ico{color:var(--success);background:rgba(16,185,129,0.10);border-color:rgba(16,185,129,0.3)} /* Fork scene (step 4): credit / debit panels */ .hiw-fork{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:560px;margin:0 auto;text-align:left} .hiw-branch{padding:22px 24px;border-radius:var(--radius-lg);background:rgba(255,255,255,0.03);border:1px solid var(--border-subtle)} .hiw-branch--credit{border-top:2px solid rgba(255,140,35,0.6)} .hiw-branch--debit{border-top:2px solid var(--border-color)} .hiw-branch-label{display:block;font-family:var(--led-mono);font-size:0.72rem;font-weight:600;text-transform:uppercase; letter-spacing:0.1em;color:var(--orange);margin-bottom:8px} .hiw-branch--debit .hiw-branch-label{color:var(--text-muted)} .hiw-branch h4{margin:0 0 5px;font-size:1.2rem} .hiw-branch p{margin:0;font-size:0.98rem;line-height:1.5;color:var(--text-secondary)} @media (prefers-reduced-motion:reduce){ .hiw-node::before,.hiw-node::after{animation:none} .hiw-rail-fill{transition:none} .hiw-step::before,.hiw-badge,.hiw-title,.hiw-desc,.hiw-visual,.hiw-fork{transform:none} /* No pin/stepper under reduced motion (ledgerWheel bails too): scenes flow so every one is reachable by normal scrolling — nobody gets stuck on scene 1 in a scroll-locked deck. */ .hiw-runway{height:auto} .hiw{position:static;height:auto;overflow:visible;display:block} .hiw-rail{display:none} .hiw-steps{overflow:visible;height:auto;scroll-behavior:auto} .hiw-step{height:auto;min-height:78vh} } @media (max-width:768px){ /* No pin/stepper on touch: the section flows normally and scenes stack down the page. */ .hiw-runway{height:auto} .hiw{--hiw-rail:54px;position:static;height:auto;overflow:visible;display:block} .hiw-rail{display:none} .hiw-steps{overflow:visible;height:auto} .hiw-step{height:auto;min-height:78vh;padding:6vh 5vw} .hiw-node{width:40px;height:40px;font-size:0.82rem} .hiw-tip{display:none} .hiw-title{font-size:clamp(2rem,8vw,2.8rem)} .hiw-desc{font-size:1.02rem} .hiw-fork{grid-template-columns:1fr;gap:14px} .hiw-visual{max-width:320px} } /* Callout row */ .callout-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;text-align:center;max-width:960px;margin:0 auto} .callout-item h5{font-size:0.92rem;margin-bottom:3px;font-weight:600} .callout-item p{font-size:0.8rem;margin:0} .callout-icon{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 12px;border-radius:12px; background:rgba(255,140,35,0.1);color:var(--orange)} .callout-icon svg{width:22px;height:22px} /* ---------- 8. PAIN CARDS (bento: live leak-counter lead + two editorial stat cards) ---------- */ /* Faint carmine "danger" wash so this section reads emotionally distinct from the neutral surfaces */ /* Soft on-brand warmth behind the pain cards — carmine-forward (danger register), kept low. No blur filter (it flickers under the cards' backdrop-filter); the radial stops are soft already. */ #pain-points::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(44% 48% at 22% 58%, rgba(178,54,63,0.11), transparent 72%), radial-gradient(46% 50% at 82% 64%, rgba(255,140,35,0.05), transparent 74%)} #pain-points .container{position:relative;z-index:1} .pain-bento{display:grid;grid-template-columns:1.55fr 1fr; grid-template-areas:"lead cdk" "lead pci";gap:22px;align-items:stretch} .pain-card{position:relative;padding:30px;border-radius:var(--radius-card);border-top:2px solid var(--carmine); transition:transform var(--dur-normal) var(--ease-out-expo),box-shadow var(--dur-normal) ease,border-color var(--dur-normal) ease} /* Danger-register hover glow (carmine) — keeps the convex inset lighting, never a flat dark shadow */ .pain-card:hover{transform:translateY(-4px); box-shadow:inset 0 1px 0.5px rgba(255,255,255,0.4),inset -1px -3px 9px rgba(0,0,0,0.36), 0 0 0 1px rgba(178,54,63,0.28),0 0 40px rgba(178,54,63,0.18),0 30px 60px rgba(0,0,0,0.5)} .pain-card h3{font-size:1.2rem;margin-bottom:10px} .pain-card p{font-size:0.95rem} .pain-card--lead{grid-area:lead;display:flex;flex-direction:column;padding:34px 36px} .pain-card--lead h3{font-size:1.35rem;margin-bottom:0} .pain-card--lead p{margin:18px 0 0} /* Annual escalation pinned to the card's base: $15K/mo reads as $180K/yr */ .leak-annual{margin-top:auto;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; padding-top:20px;border-top:1px solid var(--border-color);font-size:0.9rem;color:var(--text-muted)} .leak-annual-num{font-size:1.5rem;font-weight:800;letter-spacing:-0.01em;color:#E4565D; font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .pain-card--cdk{grid-area:cdk;transition-delay:var(--stagger)} .pain-card--pci{grid-area:pci;transition-delay:calc(var(--stagger) * 2)} .card-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:16px;border-radius:12px; background:rgba(178,54,63,0.12);color:var(--carmine)} .card-icon svg{width:26px;height:26px} /* Live "leak counter": the money is the hero, counting up = the loss piling up */ .leak-meter{margin:14px 0 20px} .leak-amount{display:block;font-size:clamp(2.9rem,2rem + 4vw,4.7rem);font-weight:800;line-height:1; letter-spacing:-0.03em;color:#E4565D;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"; text-shadow:0 0 36px rgba(178,54,63,0.42)} .leak-label{display:inline-flex;align-items:center;gap:8px;margin-top:12px; font-size:0.9rem;font-weight:600;color:var(--carmine);letter-spacing:0.01em} .leak-label svg{width:17px;height:17px;flex:none} /* Oversized editorial figures anchor the two supporting cards */ .stat-figure{display:flex;align-items:baseline;gap:11px;margin:2px 0 16px} .stat-num{font-size:clamp(2.4rem,1.7rem + 2.6vw,3.4rem);font-weight:800;line-height:0.92; letter-spacing:-0.03em;color:#E4565D;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"; text-shadow:0 0 26px rgba(178,54,63,0.34)} .stat-unit{font-size:0.72rem;font-weight:600;line-height:1.3;color:var(--text-muted); text-transform:uppercase;letter-spacing:var(--tracking-wide)} /* Pain -> relief bridge: hands the eye down into "How It Works" */ .pain-bridge-row{display:flex;justify-content:center;margin-top:38px} .pain-bridge{display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border-radius:var(--radius-pill); font-size:0.92rem;font-weight:600;color:var(--text-secondary);border:1px solid var(--border-color); background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur)); transition:color var(--dur-normal) ease,border-color var(--dur-normal) ease,transform var(--dur-normal) var(--ease-out-expo)} .pain-bridge svg{width:18px;height:18px;flex:none;animation:painNudge 1.9s var(--ease-out-expo) infinite} .pain-bridge:hover{color:var(--orange);border-color:rgba(255,140,35,0.42);transform:translateY(-2px)} @keyframes painNudge{0%,58%,100%{transform:translateY(0)}78%{transform:translateY(4px)}} /* ---------- 9. PRICING + SAVINGS ---------- */ .pricing-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:var(--space-8);perspective:1000px} .pricing-card{position:relative;padding:34px 28px;border-radius:var(--radius-lg);background:var(--bg-elevated); border:1px solid var(--border-color);overflow:hidden;transition:transform var(--dur-normal) var(--ease-out-expo),box-shadow var(--dur-normal) ease; transform-style:preserve-3d} .pricing-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-brand)} .pricing-card::after{content:"";position:absolute;top:20px;right:22px;width:34px;height:26px;border-radius:5px; background:linear-gradient(135deg,#d9a441,#b9822b);opacity:0.5; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2)} .pricing-card.featured{border-color:rgba(255,140,35,0.5);box-shadow:0 0 0 1px rgba(255,140,35,0.2),var(--shadow-md)} .pricing-card.featured::after{opacity:0.85} .pricing-card:hover{box-shadow:var(--shadow-lg)} .card-label{font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-secondary)} .card-price{font-size:3rem;font-weight:700;margin:14px 0 12px;font-feature-settings:var(--tabular)} .card-price span{font-size:1.1rem;color:var(--text-muted);font-weight:600} .card-qual{display:block;margin:-6px 0 12px;font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted)} .card-desc{font-size:0.9rem;margin:0} /* Interactive savings calculator: tri-gauge instrument cluster in a dashboard binnacle. Housing is a curved cowl (elliptical top radii + inner bevels) rather than a glass card; hierarchy comes from borders/overlays since every surface is the same near-black. No dark drop shadows (they band on --bg-primary) — glow and bevels only. */ .value.before{color:var(--carmine)} .value.after{color:var(--text-primary)} .value.saved{color:var(--success)} .calc-binnacle{position:relative;padding:clamp(28px,4vw,46px) clamp(20px,4vw,52px) clamp(24px,3vw,34px);overflow:hidden; border:1px solid var(--border-color); border-radius:clamp(28px,5vw,60px) clamp(28px,5vw,60px) var(--radius-lg) var(--radius-lg) / clamp(40px,7vw,92px) clamp(40px,7vw,92px) var(--radius-lg) var(--radius-lg); background:linear-gradient(180deg,rgba(255,255,255,0.045),rgba(255,255,255,0.012) 34%,rgba(0,0,0,0.24)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.07),inset 0 -1px 0 rgba(0,0,0,0.5),inset 0 -26px 48px rgba(0,0,0,0.26)} .calc-binnacle::before{content:"";position:absolute;top:0;left:14%;right:14%;height:1px; background:linear-gradient(90deg,transparent,rgba(178,54,63,0.9) 28%,rgba(255,140,35,0.95) 72%,transparent); box-shadow:0 0 14px rgba(255,140,35,0.35)} /* Backlight behind the dials; .is-lit is added by main.js at ignition (instantly under reduced motion) */ .calc-binnacle::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 900ms ease; background:radial-gradient(56% 44% at 50% 24%,rgba(255,140,35,0.09),transparent 70%)} .calc-binnacle.is-lit::after{opacity:1} .cluster{position:relative;display:grid;grid-template-columns:minmax(140px,190px) minmax(250px,320px) minmax(140px,190px); justify-content:center;align-items:end;gap:clamp(14px,3.5vw,44px);margin-bottom:10px} .dial{display:flex;flex-direction:column;align-items:center;min-width:0} .dial-svg,.gauge-svg{display:block;width:100%;height:auto;overflow:visible} /* Center speedo */ .dial--center{position:relative} .gauge-bezel{fill:none;stroke:rgba(255,255,255,0.06);stroke-width:1.5} .gauge-track{fill:none;stroke:rgba(255,255,255,0.08);stroke-width:12;stroke-linecap:round} /* dasharray "100 200" (not plain 100): at full retraction (dashoffset 100, the parked state) a plain 100 pattern restarts exactly at the path end and the round linecap paints a stray dot there — the oversized gap keeps the whole path inside one gap instead. */ .gauge-value{fill:none;stroke:url(#gaugeGrad);stroke-width:12;stroke-linecap:round;stroke-dasharray:100 200;stroke-dashoffset:14; transition:stroke-dashoffset var(--dur-normal) var(--ease-out-expo);filter:drop-shadow(0 0 6px rgba(255,140,35,0.25))} .gauge-minor{fill:none;stroke:rgba(255,255,255,0.16);stroke-width:5;stroke-dasharray:0.5 4.5;stroke-dashoffset:0.25} .gauge-major{fill:none;stroke:rgba(255,255,255,0.38);stroke-width:9;stroke-dasharray:1 24;stroke-dashoffset:0.5} .gauge-nums text{fill:var(--text-muted);font-size:10px;font-weight:600;text-anchor:middle;font-family:var(--font-sans)} .gauge-needle{transform-box:view-box;transform-origin:110px 118px;transform:rotate(64.8deg); transition:transform var(--dur-normal) var(--ease-overshoot)} .gauge-needle line{stroke:var(--orange);stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(255,140,35,0.7))} .gauge-needle .hub{fill:#1A2030;stroke:rgba(255,255,255,0.25);stroke-width:1} .gauge-needle .hub-dot{fill:var(--orange)} .gauge-center{position:absolute;left:0;right:0;bottom:4px;text-align:center;pointer-events:none} .gauge-pct{display:block;font-size:clamp(1.8rem,3vw,2.4rem);font-weight:700;color:var(--success);font-feature-settings:var(--tabular);line-height:1} .gauge-center small{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-muted)} /* Side dials: BEFORE pegged in its carmine redline, AFTER idling near zero in teal */ .dial-track{fill:none;stroke:rgba(255,255,255,0.08);stroke-width:8;stroke-linecap:round} .dial-zone{fill:none;stroke-width:8} .dial-zone--red{stroke:rgba(178,54,63,0.55);stroke-dasharray:16 84;stroke-dashoffset:-84} .dial-zone--teal{stroke:rgba(16,185,129,0.45);stroke-dasharray:22 78} .dial-ticks{fill:none;stroke:rgba(255,255,255,0.2);stroke-width:5;stroke-dasharray:0.7 19.3;stroke-dashoffset:0.35} .dial-needle{transform-box:view-box;transform-origin:60px 72px;transition:transform var(--dur-normal) var(--ease-overshoot)} .dial-needle line{stroke-width:3;stroke-linecap:round} .dial-needle circle{fill:#1A2030;stroke:rgba(255,255,255,0.22);stroke-width:1} .dial--before .dial-needle{transform:rotate(77.4deg)} .dial--before .dial-needle line{stroke:var(--carmine);filter:drop-shadow(0 0 4px rgba(178,54,63,0.7))} .dial--after .dial-needle{transform:rotate(-66.6deg)} .dial--after .dial-needle line{stroke:var(--success);filter:drop-shadow(0 0 4px rgba(16,185,129,0.6))} .dial-readout{display:flex;align-items:baseline;gap:5px;margin-top:2px} .dial-readout .label{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted)} .dial-readout .value{font-size:1.25rem;font-weight:700;font-feature-settings:var(--tabular);line-height:1.05} .dial-readout .unit{font-size:0.72rem;color:var(--text-muted)} /* Ignition sweep: needles swing to full scale and back, the arc chases, then both settle onto the live values (main.js parks everything at zero, then adds .ignite on scroll-in). Endpoints are per-element custom properties so one keyframe serves every dial. */ @keyframes needleSweep{ 0%{transform:rotate(-90deg)} 10%{transform:rotate(-90deg);animation-timing-function:cubic-bezier(0.55,0,0.35,1)} 58%{transform:rotate(88deg);animation-timing-function:cubic-bezier(0.5,0,0.35,1.1)} 100%{transform:rotate(var(--needle-final,-90deg))} } @keyframes arcSweep{ 0%{stroke-dashoffset:100} 10%{stroke-dashoffset:100;animation-timing-function:cubic-bezier(0.55,0,0.35,1)} 58%{stroke-dashoffset:2;animation-timing-function:cubic-bezier(0.5,0,0.35,1.1)} 100%{stroke-dashoffset:var(--arc-final,100)} } .ignite .gauge-needle,.ignite .dial-needle{animation:needleSweep 1.55s linear both} .ignite .dial--before .dial-needle{animation-delay:100ms} .ignite .dial--after .dial-needle{animation-delay:200ms} .ignite .gauge-value{animation:arcSweep 1.55s linear both} /* While the V12 rev sim drives the center dial (slider input), its CSS transitions step aside so the per-frame spring + flutter writes land raw. */ .rev-live .gauge-needle,.rev-live .gauge-value{transition:none} /* Odometer: mechanical digit drums. Each cell is a masked window over a 0-9x2 strip; main.js rolls strips to the nearest matching digit via --odo-i. */ .odo-row{display:flex;flex-direction:column;align-items:center;gap:8px;margin:6px 0 2px} .odo-label{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-secondary)} .odo{display:flex;align-items:center;gap:3px;padding:8px 14px;border-radius:var(--radius-md); background:linear-gradient(180deg,rgba(0,0,0,0.5),rgba(0,0,0,0.28));border:1px solid rgba(255,255,255,0.08); box-shadow:inset 0 2px 6px rgba(0,0,0,0.6),inset 0 -1px 0 rgba(255,255,255,0.04); font-size:clamp(1.5rem,2.6vw,1.9rem);font-weight:700;font-feature-settings:var(--tabular)} .odo-cur{color:var(--success);font-size:0.72em;margin-right:2px} .odo-sep{color:var(--success);line-height:1} .odo-unit{font-size:0.44em;color:var(--text-muted);font-weight:600;margin-left:6px;align-self:flex-end;padding-bottom:0.35em} .odo-cell{position:relative;height:1.35em;width:0.72em;overflow:hidden;border-radius:3px; line-height:1.35em;text-align:center;color:var(--success); background:linear-gradient(180deg,#060910,#0D1220 50%,#060910); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05)} .odo-cell::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:linear-gradient(180deg,rgba(0,0,0,0.55),transparent 32%,transparent 68%,rgba(0,0,0,0.55))} .odo-strip{display:block;transition:transform 560ms cubic-bezier(0.22,1,0.36,1); transform:translateY(calc(var(--odo-i,0) * -1.35em))} .odo-strip i{display:block;height:1.35em;line-height:1.35em;font-style:normal} .odo-cell.odo-dim .odo-strip{opacity:0.22} /* Ignition roll: longer travel, cascading left to right */ .odo-ignite .odo-strip{transition-duration:1350ms;transition-delay:120ms} .odo-ignite .odo-cell:nth-child(3) .odo-strip{transition-delay:180ms} .odo-ignite .odo-cell:nth-child(5) .odo-strip{transition-delay:240ms} .odo-ignite .odo-cell:nth-child(6) .odo-strip{transition-delay:300ms} .odo-ignite .odo-cell:nth-child(7) .odo-strip{transition-delay:360ms} .calc-annual{font-size:0.95rem;color:var(--text-secondary)} .calc-annual span{color:var(--success);font-weight:700;font-feature-settings:var(--tabular)} /* Conversion CTA: kicker + primary glow button rise in under the annual line after the first ignition settles. The .glare class (added by JS for ~2s, then removed) fires the button's btnGlare sweep once as it lands — it must NOT be left on permanently or its higher specificity would permanently shadow the :hover sweep declaration. */ .calc-demo-nudge{display:flex;flex-direction:column;align-items:center;gap:12px;margin:14px 0 4px; opacity:0;transform:translateY(10px);transition:opacity 600ms ease,transform 600ms var(--ease-out-expo)} .calc-demo-nudge[hidden]{display:none} /* display:flex would otherwise defeat the hidden attribute */ .calc-demo-nudge.show{opacity:1;transform:none} .nudge-kicker{font-size:0.85rem;color:var(--text-secondary)} .calc-demo-nudge.glare .btn-primary{animation:btnGlare 1.2s ease-in-out 550ms 1} /* Dead panel: until the starter is pressed the dials + odometer sit dim and desaturated. Scoped to .is-armed (added by JS) so no-JS visitors keep the full-brightness static seed. */ .cluster,.odo-row{transition:opacity 800ms ease,filter 800ms ease} .calc-binnacle.is-armed:not(.is-lit) :is(.cluster,.odo-row){opacity:0.78;filter:saturate(0.5)} /* Console controls: machined groove tracks, engraved panel lettering, knurled metal thumb, and the round ACTIVATE push-start at the end of the row (a real dash layout) */ .calc-controls{display:grid;grid-template-columns:1fr 1fr auto;gap:36px;margin-top:30px;padding-top:30px;border-top:1px solid var(--border-subtle)} .calc-field--start{display:flex;align-items:center;justify-content:center;padding:0 4px} .push-start{position:relative;width:96px;height:96px;border-radius:50%;cursor:pointer;font-family:inherit; display:grid;place-items:center;border:1px solid rgba(255,255,255,0.18); background:radial-gradient(circle at 34% 28%,#3A4356,#232A3A 55%,#141926 82%); box-shadow:0 0 0 4px rgba(15,19,31,0.9),0 0 0 5px rgba(255,255,255,0.09), inset 0 2px 3px rgba(255,255,255,0.12),inset 0 -6px 12px rgba(0,0,0,0.55); transition:transform var(--dur-fast) ease,filter var(--dur-fast) ease} .push-start:hover{filter:brightness(1.12)} .push-start:active{transform:translateY(1px) scale(0.96)} .push-start:disabled{cursor:default} .ps-ring{position:absolute;inset:6px;border-radius:50%;pointer-events:none; border:2px solid rgba(255,255,255,0.10);transition:border-color 300ms ease,box-shadow 300ms ease} .is-lit .ps-ring{border-color:rgba(255,140,35,0.85); box-shadow:0 0 12px rgba(255,140,35,0.5),inset 0 0 10px rgba(255,140,35,0.25)} .ps-face{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1} .ps-face strong{font-size:0.7rem;font-weight:700;letter-spacing:0.13em;text-transform:uppercase;color:var(--text-primary)} .ps-face small{font-size:0.5rem;font-weight:600;letter-spacing:0.09em;text-transform:uppercase;color:var(--text-muted)} /* Starter crank: LED flickers and the parked needles shudder before the engine catches */ @keyframes ledFlicker{ 0%,100%{border-color:rgba(255,140,35,0.2)} 20%{border-color:rgba(255,140,35,0.9)} 40%{border-color:rgba(255,140,35,0.3)} 60%{border-color:rgba(255,140,35,0.8)} 80%{border-color:rgba(255,140,35,0.4)} } @keyframes crankJitter{ 0%,100%{transform:rotate(-90deg)} 25%{transform:rotate(-86.5deg)} 50%{transform:rotate(-89deg)} 75%{transform:rotate(-85deg)} } .is-cranking .ps-ring{animation:ledFlicker 500ms linear} .is-cranking .gauge-needle,.is-cranking .dial-needle{animation:crankJitter 260ms linear 2} .calc-field-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px} .calc-field label{font-size:0.76rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-secondary)} .calc-out{font-size:1.02rem;font-weight:700;color:var(--orange);font-feature-settings:var(--tabular); text-shadow:0 0 12px rgba(255,140,35,0.35)} .calc-ticks{height:6px;margin-bottom:7px; background:repeating-linear-gradient(90deg,rgba(255,255,255,0.14) 0 1px,transparent 1px calc(100%/24)); -webkit-mask:linear-gradient(90deg,transparent,#000 4% 96%,transparent); mask:linear-gradient(90deg,transparent,#000 4% 96%,transparent)} .calc-scale{display:flex;justify-content:space-between;font-size:0.7rem;color:var(--text-muted);margin-top:9px; font-feature-settings:var(--tabular);letter-spacing:0.06em;text-shadow:0 1px 0 rgba(0,0,0,0.6)} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:6px;cursor:pointer; border:1px solid rgba(255,255,255,0.07); background:linear-gradient(90deg,#B2363F,var(--orange) var(--range-fill,50%),rgba(9,12,20,0.9) var(--range-fill,50%)); box-shadow:inset 0 1px 3px rgba(0,0,0,0.7),inset 0 -1px 0 rgba(255,255,255,0.04),0 1px 0 rgba(255,255,255,0.05)} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;cursor:pointer; background:radial-gradient(circle at 34% 30%,#F2F4F7,#B9C1CC 40%,#59637A 72%,#262D3D); border:1px solid rgba(255,255,255,0.35); box-shadow:0 0 0 3px rgba(11,15,26,0.9),0 0 10px rgba(255,140,35,0.45),0 2px 6px rgba(0,0,0,0.5); transition:transform var(--dur-fast) ease} input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)} input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;cursor:pointer; background:radial-gradient(circle at 34% 30%,#F2F4F7,#B9C1CC 40%,#59637A 72%,#262D3D); border:1px solid rgba(255,255,255,0.35); box-shadow:0 0 0 3px rgba(11,15,26,0.9),0 0 10px rgba(255,140,35,0.45),0 2px 6px rgba(0,0,0,0.5)} input[type=range]:focus-visible{box-shadow:var(--focus-ring)} .calc-note{font-size:0.8rem;color:var(--text-muted);margin-top:24px;max-width:72ch} /* ---------- 10. TABLES ---------- */ .table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border-color);margin-bottom:28px} table{width:100%;border-collapse:collapse;min-width:560px} th{background:var(--bg-elevated);color:var(--orange);text-transform:uppercase;font-size:0.75rem;letter-spacing:var(--tracking-wide); font-weight:700;text-align:left;padding:16px 20px} td{padding:15px 20px;border-top:1px solid var(--border-subtle);font-size:0.92rem;color:var(--text-secondary)} td:first-child{color:var(--text-primary);font-weight:500} .check{color:var(--success);font-weight:600} .cross{color:var(--text-muted)} .check::before{content:"\2713 ";font-weight:700} .cross::before{content:"\2715 "} .negative{color:var(--text-muted)} .highlight{color:var(--success);font-weight:600} .tech-callout{padding:28px 32px;border-radius:var(--radius-lg);border-left:3px solid var(--orange)} .tech-callout h4{color:var(--orange);margin-bottom:8px} .tech-callout p{font-size:0.95rem;margin:0} /* ---------- 11. SECURITY: encrypt-a-live-card pipeline ---------- */ .enc-demo{position:relative;isolation:isolate;max-width:1120px;margin:0 auto 40px; display:flex;flex-direction:column;align-items:center;gap:28px} /* --- terminal card (the real