/* ============================================================ MOBILE APP CITY MAC Digital Agency Design system: "Wholesale Factory" · technical prospectus Palette: royal ink #071B4F · navy #0A2160 · MAC blue #1053F3 paper #F5F8FF · signal orange #FF7F22 (conversion only) v3.1: dark bands re-toned to the original MAC royal blue. Type: Cabinet Grotesk (display) + Switzer (body) + Geist Mono (data) Theme: Light and dark. Tokens below are re-pointed per theme, so every component and inline var() reference adapts on its own. Set on . Default is LIGHT; dark is opt-in via the toggle only. ============================================================ */ :root{ /* brand constants, identical in both themes */ --blue: #1053F3; --blue-soft: #6B93FF; --blue-pale: #C6D5FF; --orange: #FF7F22; --orange-hot: #F26B00; --r: 16px; --r-lg: 24px; /* Brand type: Galano Grotesque. Poppins (the long-time MAC stand-in for Galano) renders when Galano isn't installed. Drop licensed Galano files onto the machine or an @font-face here and every page upgrades automatically. Labels are brand font too: no monospace anywhere. */ --font: "Galano Grotesque", "Galano Grotesque Alt", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --body-font: "Galano Grotesque", "Galano Grotesque Alt", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Galano Grotesque", "Galano Grotesque Alt", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --container: 1180px; --pad: clamp(24px, 5vw, 48px); --ease: cubic-bezier(.22,.61,.36,1); } /* ---------- LIGHT THEME (the printed prospectus) ---------- */ :root, [data-theme="light"]{ --ink: #071B4F; /* contrast band background, royal navy */ --navy: #0A2160; --panel: #10307E; --panel-2: #143A92; --mist: #C2D2F8; /* body text on contrast bands */ --paper: #F5F8FF; /* base section background */ --card: #FFFFFF; --ink-l: #0A1B45; /* headings on base sections */ --body-l: #44567F; /* body on base sections */ --line-d: rgba(160,190,255,.22); --line-l: #DCE4F6; --shadow: 0 24px 60px -24px rgba(7,25,80,.28); --nav-bg: rgba(7,27,79,.84); --nav-solid: rgba(7,27,79,.97); --grid-line: rgba(190,210,255,.09); --spot: rgba(70,120,255,.14); --sheen: rgba(255,255,255,.7); color-scheme: light; } /* ---------- DARK THEME (the console) ---------- */ [data-theme="dark"]{ --ink: #04102F; /* contrast bands go deeper, still blue */ --navy: #061539; --panel: #0D2361; --panel-2: #122C70; --mist: #A9BDEC; --paper: #071642; /* base sections become deep royal navy */ --card: #0C1F55; /* cards become panels */ --ink-l: #EDF2FF; /* headings invert */ --body-l: #A3B4E0; /* body inverts */ --line-d: rgba(140,170,255,.16); --line-l: rgba(140,170,255,.15); --shadow: 0 28px 70px -28px rgba(0,0,20,.8); --nav-bg: rgba(4,16,47,.82); --nav-solid: rgba(4,16,47,.98); --grid-line: rgba(150,180,255,.06); --spot: rgba(90,134,255,.17); --sheen: rgba(150,180,255,.17); color-scheme: dark; } html{transition:none} html.theme-anim, html.theme-anim *{transition:background-color .45s var(--ease), color .3s var(--ease), border-color .35s var(--ease) !important} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important} } body{ font-family:var(--body-font); background:var(--ink); color:var(--mist); font-size:16.5px; line-height:1.68; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} ::selection{background:var(--blue);color:#fff} :focus-visible{outline:2.5px solid var(--orange);outline-offset:3px;border-radius:4px} .container{max-width:var(--container);margin:0 auto;padding-inline:var(--pad)} /* ---------- type ---------- Cabinet Grotesk is a tighter, more angular face than Poppins was. It carries more weight at the same size, so the scale is pulled in and tracking is opened slightly at display sizes. */ h1,h2,h3,h4{ font-family:var(--font); color:#fff;font-weight:700;line-height:1.12;letter-spacing:-.015em; } .h1{font-size:clamp(2.05rem,3.4vw,3rem);letter-spacing:-.02em;line-height:1.12} .h2{font-size:clamp(1.7rem,2.8vw,2.35rem);margin-bottom:18px;letter-spacing:-.018em;line-height:1.16} .h3{font-size:1.24rem;font-weight:700;letter-spacing:-.018em} h4{font-weight:700} .light h2,.light h3,.light h4{color:var(--ink-l)} .light p{color:var(--body-l)} .lead{font-family:var(--body-font);font-size:clamp(1.04rem,1.5vw,1.19rem);line-height:1.72;max-width:58ch;font-weight:400} .mono{font-family:var(--mono)} /* eyebrow the spec-sheet index line */ .spec{ display:flex;align-items:center;gap:16px; font-family:var(--body-font);font-size:.76rem;font-weight:600; letter-spacing:.12em;text-transform:uppercase; color:var(--blue-soft);margin-bottom:22px; } @media (min-width:701px){.spec{white-space:nowrap}} .spec::after{content:"";height:1px;flex:1;background:var(--line-d);min-width:40px} .light .spec{color:var(--blue)} .light .spec::after{background:var(--line-l)} .spec b{color:var(--orange);font-weight:600} /* ---------- buttons ---------- */ .btn{ position:relative;overflow:hidden; display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:16px 25px;border-radius:12px;border:0; font-family:var(--body-font);font-weight:600;font-size:1rem;letter-spacing:-.005em; transition:transform .3s var(--ease), box-shadow .25s ease, background .18s ease; will-change:transform; } /* sheen wipe on hover */ .btn::before{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%); transform:translateX(-120%); } .btn:hover::before{transform:translateX(120%);transition:transform .75s var(--ease)} .btn-primary{ background:linear-gradient(180deg,var(--orange) 0%,var(--orange-hot) 100%); color:#180A00; box-shadow:0 12px 30px -10px rgba(255,127,34,.55), inset 0 1px 0 rgba(255,255,255,.35); } .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px -10px rgba(255,127,34,.65), inset 0 1px 0 rgba(255,255,255,.35)} .btn-ghost{ background:transparent;color:#fff; border:1.5px solid rgba(150,180,255,.35); } .btn-ghost:hover{border-color:var(--blue-soft);background:rgba(16,83,243,.12);transform:translateY(-2px)} .light .btn-ghost{color:var(--ink-l);border-color:#B9C6E8} .light .btn-ghost:hover{border-color:var(--blue);background:rgba(16,83,243,.06)} .btn-blue{background:var(--blue);color:#fff;box-shadow:0 12px 30px -12px rgba(16,83,243,.6)} .btn-blue:hover{transform:translateY(-2px);background:#2A61FF} .btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} /* ---------- nav ---------- */ .nav{ position:fixed;inset:0 0 auto 0;z-index:80; transition:background .25s ease, box-shadow .25s ease, border-color .25s ease; border-bottom:1px solid transparent; } .nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line-d)} .nav-in{max-width:1320px;margin:0 auto;padding:16px var(--pad);display:flex;align-items:center;gap:26px} .nav-logo img{height:34px;width:auto} .nav-links{display:flex;gap:26px;margin-left:auto;list-style:none} .nav-links a{font-family:var(--body-font);font-size:.92rem;font-weight:500;color:#C7D4F2;position:relative;padding:6px 0} .nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--orange);transition:width .2s ease} .nav-links a:hover{color:#fff} .nav-links a:hover::after{width:100%} .nav .btn{padding:11px 20px;font-size:.9rem} .nav-burger{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;position:relative} .nav-burger span{position:absolute;left:10px;right:10px;height:2px;background:#fff;transition:.25s;border-radius:2px} .nav-burger span:nth-child(1){top:15px}.nav-burger span:nth-child(2){top:22px}.nav-burger span:nth-child(3){top:29px} .nav-burger[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)} .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-burger[aria-expanded="true"] span:nth-child(3){top:22px;transform:rotate(-45deg)} @media (max-width:1080px){ .nav-links,.nav .btn-primary{display:none} .nav-burger{display:block;margin-left:8px} .nav.open{background:var(--nav-solid)} .nav.open .nav-links{ display:flex;flex-direction:column;gap:4px; position:absolute;top:100%;left:0;right:0; background:var(--nav-solid);backdrop-filter:blur(14px); padding:18px var(--pad) 28px;border-bottom:1px solid var(--line-d); } .nav.open .nav-links a{display:block;padding:12px 0;font-size:1.05rem} } /* ---------- hero ---------- */ .hero{ position:relative; padding:clamp(90px,11vh,124px) 0 0; min-height:100svh; display:flex;flex-direction:column;justify-content:space-between;gap:16px; background: radial-gradient(1100px 600px at 78% -10%, rgba(16,83,243,.28), transparent 60%), radial-gradient(700px 500px at -10% 60%, rgba(16,83,243,.12), transparent 60%), var(--ink); overflow:hidden; } /* ambient glow drift */ .hero::after{ content:"";position:absolute;width:640px;height:640px;border-radius:50%; background:radial-gradient(circle, rgba(16,83,243,.20), transparent 65%); top:-140px;right:6%;pointer-events:none; animation:drift 13s ease-in-out infinite alternate; } @keyframes drift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-110px,90px,0) scale(1.18)} } /* blueprint grid */ .hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(to right, rgba(125,160,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(125,160,255,.05) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(900px 700px at 60% 20%, #000 30%, transparent 75%); -webkit-mask-image:radial-gradient(900px 700px at 60% 20%, #000 30%, transparent 75%); animation:gridUp64 9s linear infinite; } .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:end;position:relative;flex:1;width:100%} .hero-grid>*{min-width:0} .hero-copy{align-self:center;padding:10px 0 34px} .hero-copy .h1{margin:0 0 22px} .hero-copy .h1 em{font-style:normal;color:var(--orange)} .hero-copy .lead{margin-bottom:34px} .hero-terms{ display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px; font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;color:var(--blue-pale); } .hero-terms span::before{content:"■ ";color:var(--orange);font-size:.6rem;vertical-align:2px} .hero-visual{position:relative;align-self:end;display:flex;align-items:flex-end;justify-content:center} .hero-visual img.phone{ position:relative;z-index:2; width:auto;max-width:min(92%,470px);max-height:min(68vh,660px); filter:drop-shadow(0 40px 70px rgba(4,18,60,.6)); } .chip{ position:absolute;z-index:3; display:flex;flex-direction:column;gap:2px;width:max-content;white-space:nowrap; background:rgba(9,26,72,.86);backdrop-filter:blur(8px); border:1px solid var(--line-d);border-left:3px solid var(--orange); border-radius:10px;padding:9px 13px; font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;color:var(--blue-pale); box-shadow:0 18px 40px -18px rgba(0,0,0,.8); animation:float 7s ease-in-out infinite; } .chip b{color:#fff;font-weight:600;font-size:.7rem} .chip .ok{color:#5BE49B} .chip-1{top:20%;left:0;animation-delay:0s} .chip-2{bottom:24%;right:0;border-left-color:var(--blue);animation-delay:1.6s} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* trust strip */ .trust{border-top:1px solid var(--line-d);background:rgba(255,255,255,.015);position:relative} .trust-in{display:flex;align-items:center;gap:clamp(24px,4vw,56px);padding:26px var(--pad);max-width:var(--container);margin:0 auto;flex-wrap:wrap} .trust-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);flex-shrink:0;max-width:210px;line-height:1.6} .trust-logos{display:flex;align-items:center;gap:clamp(22px,3.5vw,44px);flex-wrap:wrap;flex:1;justify-content:space-between} .trust-logos img{height:42px;width:auto;filter:brightness(0) invert(1);opacity:.55;transition:opacity .2s} .trust-logos img:hover{opacity:.95} /* ---------- stats band ---------- */ .stats{background:var(--navy);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)} .stats-in{max-width:var(--container);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,1fr)} .stat{padding:44px 26px;border-left:1px solid var(--line-d)} .stat:first-child{border-left:0} .stat .num{font-family:var(--mono);font-weight:600;font-size:clamp(1.9rem,3.2vw,2.7rem);color:#fff;letter-spacing:-.03em;line-height:1;display:flex;align-items:baseline;gap:2px} .stat .num .accent{color:var(--orange)} .stat .lbl{margin-top:10px;font-size:.86rem;color:var(--mist);line-height:1.5} /* ---------- generic sections ---------- */ .sec{padding:clamp(84px,11vh,128px) 0;position:relative} .sec.light{background:var(--paper);color:var(--body-l)} .sec.dark{background:var(--ink)} .sec.navy{background:var(--navy)} .sec-head{max-width:780px;margin-bottom:clamp(40px,6vh,64px)} .sec-head p{font-size:1.06rem} /* ---------- SEC.01 model pipeline ---------- */ .pipeline{display:grid;grid-template-columns:1fr 52px 1fr 52px 1fr;align-items:stretch;margin-top:14px} .node{ background:var(--card);border:1px solid var(--line-l);border-radius:var(--r-lg); padding:30px 28px;box-shadow:var(--shadow);position:relative; transition:transform .22s ease, border-color .22s ease; } .node:hover{transform:translateY(-5px);border-color:var(--blue)} .node .tag{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.12em;color:var(--blue);text-transform:uppercase;display:block;margin-bottom:14px} .node h3{margin-bottom:10px} .node p{font-size:.95rem;line-height:1.6} .node ul{list-style:none;margin-top:14px;display:grid;gap:8px} .node li{font-size:.9rem;padding-left:20px;position:relative;color:var(--body-l)} .node li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:2px;background:var(--blue)} .node.factory{border-top:4px solid var(--blue)} .node.you{border-top:4px solid #14306E} .node.margin{border-top:4px solid var(--orange)} .node.margin li::before{background:var(--orange)} .flow{display:flex;align-items:center;justify-content:center;position:relative} .flow svg{width:100%;height:26px;overflow:visible} .flow .dash{stroke:var(--blue);stroke-width:2.5;stroke-dasharray:7 7;animation:flow 1.1s linear infinite} @keyframes flow{to{stroke-dashoffset:-14}} .flow .head{fill:var(--blue)} .example-strip{ margin-top:40px;background:var(--ink);border-radius:var(--r); padding:22px 30px;display:flex;flex-wrap:wrap;gap:14px 38px;align-items:center; font-family:var(--mono);font-size:.86rem;color:var(--blue-pale); } .example-strip .lbl{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);width:100%;margin-bottom:2px} .example-strip b{color:#fff;font-weight:600} .example-strip .profit{color:var(--orange);font-weight:600} .example-strip .sep{color:#3D5A9E} /* ---------- SEC.02 margin engine ---------- */ .engine{ display:grid;grid-template-columns:1fr 1.1fr;gap:26px;align-items:stretch; } .panel{ background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%); border:1px solid var(--line-d);border-radius:var(--r-lg);padding:34px; position:relative;overflow:hidden; } .panel::before{ /* console scanline top */ content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--blue),transparent 70%); } .panel-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px} .panel-title h3{color:#fff} .panel-title .mono{font-size:.68rem;letter-spacing:.18em;color:var(--blue-soft);text-transform:uppercase} .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .rate-table{width:100%;min-width:430px;border-collapse:collapse;font-family:var(--mono);font-size:.85rem} .rate-table th{ text-align:left;font-weight:500;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase; color:var(--mist);padding:0 10px 12px 0;border-bottom:1px solid var(--line-d); } .rate-table th:last-child,.rate-table td:last-child{text-align:right;padding-right:0} .rate-table td{padding:15px 10px 15px 0;border-bottom:1px solid rgba(125,160,255,.08);color:var(--blue-pale);vertical-align:top} .rate-table td:first-child{color:#fff;font-family:var(--font);font-weight:500;font-size:.92rem} .rate-table .m{color:var(--orange);font-weight:600} .rate-note{margin-top:18px;font-size:.8rem;line-height:1.6;color:var(--mist)} .rate-note a{color:var(--blue-soft);text-decoration:underline;text-underline-offset:3px} .calc label{display:flex;justify-content:space-between;align-items:baseline;font-size:.94rem;color:#fff;font-weight:500;margin:22px 0 10px} .calc label:first-of-type{margin-top:4px} .calc label output{font-family:var(--mono);color:var(--orange);font-weight:600;font-size:1rem} .calc input[type=range]{ width:100%;appearance:none;-webkit-appearance:none;height:6px;border-radius:99px; background:linear-gradient(to right,var(--blue) var(--fill,40%),#23407F var(--fill,40%)); outline-offset:6px; } .calc input[type=range]::-webkit-slider-thumb{ appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%; background:#fff;border:5px solid var(--blue);box-shadow:0 4px 14px rgba(0,0,0,.5);cursor:grab; } .calc input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:5px solid var(--blue);cursor:grab} .seg{display:flex;gap:8px;flex-wrap:wrap} .seg button{ font-family:var(--mono);font-size:.78rem;padding:8px 14px;border-radius:8px; border:1px solid var(--line-d);background:transparent;color:var(--blue-pale); transition:.15s; } .seg button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff} .check{display:flex;gap:12px;align-items:center;margin-top:22px;font-size:.9rem;color:var(--blue-pale);cursor:pointer;user-select:none} .check input{width:20px;height:20px;accent-color:var(--orange);cursor:pointer} .calc-out{ margin-top:28px;border-top:1px solid var(--line-d);padding-top:24px; display:grid;grid-template-columns:1fr 1fr;gap:18px; } .out-cell .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist)} .out-cell .v{font-family:var(--mono);font-weight:600;font-size:clamp(1.7rem,2.6vw,2.3rem);color:var(--orange);letter-spacing:-.02em;line-height:1.15;margin-top:6px} .out-cell .v small{font-size:.55em;color:var(--blue-pale);font-weight:500} .out-cell.sub .v{color:#fff;font-size:1.35rem} .disclaimer{grid-column:1/-1;font-size:.72rem;color:#93A6D2;line-height:1.6;font-family:var(--mono)} /* ---------- SEC.03 products ---------- */ .prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .prod{ background:var(--card);border:1px solid var(--line-l);border-radius:var(--r-lg); overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column; transition:transform .22s ease, border-color .22s; } .prod:hover{transform:translateY(-6px);border-color:var(--blue)} .prod-img{height:190px;overflow:hidden;background:var(--navy);position:relative} .prod-img img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s ease} .prod:hover .prod-img img{transform:scale(1.05)} .prod-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1} .prod-body h3{font-size:1.1rem} .prod-body p{font-size:.9rem;line-height:1.6;flex:1} .prod-price{font-family:var(--mono);font-size:.76rem;color:var(--blue);letter-spacing:.04em;border-top:1px solid var(--line-l);padding-top:14px} .prod-price b{color:var(--orange-hot)} .wl-note{margin-top:30px;text-align:center;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;color:var(--body-l)} .wl-note b{color:var(--blue)} /* ---------- SEC.04 AI question ---------- */ .ai{position:relative;overflow:hidden} .ai::before{ content:"";position:absolute;inset:0; background: radial-gradient(800px 480px at 85% 15%, rgba(16,83,243,.18), transparent 60%), linear-gradient(to right, rgba(125,160,255,.04) 1px, transparent 1px); background-size:auto, 64px 100%; pointer-events:none; } .ai .h2 q{quotes:"“" "”"} .ledger{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px;position:relative} .ledger-col{border-radius:var(--r-lg);padding:32px;border:1px solid var(--line-d)} .ledger-col.ai-side{background:rgba(255,255,255,.02)} .ledger-col.mac-side{background:linear-gradient(180deg,rgba(16,83,243,.16),rgba(16,83,243,.05));border-color:rgba(77,124,255,.4)} .ledger-col header{display:flex;align-items:center;gap:12px;margin-bottom:22px} .ledger-col header .dot{width:10px;height:10px;border-radius:50%} .ai-side header .dot{background:#6F84B8} .mac-side header .dot{background:var(--orange)} .ledger-col header h3{font-family:var(--mono);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:600} .ledger-col ul{list-style:none;display:grid;gap:0} .ledger-col li{ padding:13px 0 13px 30px;position:relative;font-size:.95rem;line-height:1.55; border-bottom:1px dashed rgba(125,160,255,.12);color:var(--mist); } .ledger-col li:last-child{border-bottom:0} .ai-side li::before{content:"-";position:absolute;left:0;color:#6F84B8;font-family:var(--mono)} .mac-side li{color:#DCE6FF} .mac-side li::before{content:"✓";position:absolute;left:0;color:var(--orange);font-family:var(--mono);font-weight:600} .ai-verdict{ margin-top:34px;max-width:820px;font-size:1.08rem;line-height:1.75;color:#DCE6FF; border-left:3px solid var(--orange);padding-left:24px; } .ai-verdict b{color:#fff} /* ---------- SEC.05 proof ---------- */ .map-wrap{position:relative;margin:10px 0 30px} .map-wrap img{width:100%;height:auto} .t-row{ display:grid;grid-auto-flow:column;grid-auto-columns:min(340px,82vw);gap:20px; overflow-x:auto;padding:10px 4px 26px;scroll-snap-type:x mandatory; scrollbar-width:thin;scrollbar-color:var(--blue) transparent; } .t-row::-webkit-scrollbar{height:8px} .t-row::-webkit-scrollbar-thumb{background:var(--line-l);border-radius:99px} .t-card{ scroll-snap-align:start;background:var(--card);border:1px solid var(--line-l); border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden; display:flex;flex-direction:column; } .t-card .t-img{background:linear-gradient(180deg,#EAF0FF, #fff);padding:14px 14px 0} .t-card .t-img img{width:100%;height:200px;object-fit:contain;object-position:bottom center} .t-card blockquote{padding:20px 24px 24px;font-size:.9rem;line-height:1.65;color:var(--body-l);flex:1} .t-card figcaption{ padding:0 24px 22px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:var(--blue); } .t-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:4px} .t-nav button{ width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line-l); background:#fff;color:var(--ink-l);font-size:1.1rem;transition:.15s; } .t-nav button:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)} /* ---------- SEC.06 team ---------- */ .team{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center} .team-photo{position:relative} .team-photo img{border-radius:var(--r-lg);box-shadow:var(--shadow)} .team-photo .badge{ position:absolute;left:24px;bottom:24px; background:rgba(8,25,70,.86);backdrop-filter:blur(8px);color:#fff; border:1px solid var(--line-d);border-radius:12px;padding:12px 18px; font-family:var(--mono);font-size:.72rem;letter-spacing:.12em; } .team-photo .badge b{color:var(--orange)} .team-copy .creds{list-style:none;display:grid;gap:14px;margin-top:26px} .team-copy .creds li{ padding:16px 20px;background:var(--card);border:1px solid var(--line-l);border-radius:14px; font-size:.93rem;color:var(--body-l);display:flex;gap:14px;align-items:flex-start; } .team-copy .creds .n{font-family:var(--mono);color:var(--blue);font-weight:600;font-size:.8rem;padding-top:2px;flex-shrink:0} /* ---------- SEC.07 program ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step} .step{ background:var(--card);border:1px solid var(--line-l);border-radius:var(--r); padding:26px;position:relative;transition:transform .2s, border-color .2s; } .step:hover{transform:translateY(-4px);border-color:var(--blue)} .step .idx{font-family:var(--mono);font-weight:600;font-size:.78rem;color:var(--blue);letter-spacing:.16em} .step h3{font-size:1.02rem;margin:10px 0 8px} .step p{font-size:.88rem;line-height:1.6} .step::after{content:"";position:absolute;top:26px;right:26px;width:22px;height:2px;background:var(--line-l)} .step:last-child::after{background:var(--orange)} /* ---------- SEC.08 showcase marquee ---------- */ .showcase{padding:clamp(70px,9vh,100px) 0;overflow:hidden} .marquee{display:flex;gap:22px;width:max-content;animation:marquee 46s linear infinite} .marquee:hover{animation-play-state:paused} @keyframes marquee{to{transform:translateX(-50%)}} .m-item{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-d);flex-shrink:0} .m-item img{height:230px;width:auto;display:block} .m-item figcaption{ position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px; background:linear-gradient(transparent,rgba(7,22,64,.9)); font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:#fff;text-transform:uppercase; } /* ---------- SEC.09 terms ---------- */ .terms-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-l);border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--shadow)} .term{padding:30px 26px;border-left:1px solid var(--line-l);border-top:1px solid var(--line-l)} .terms-grid .term:nth-child(-n+4){border-top:0} .terms-grid .term:nth-child(4n+1){border-left:0} .term .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--body-l)} .term .v{font-weight:700;font-size:1.35rem;color:var(--ink-l);margin-top:8px;letter-spacing:-.02em} .term .v.acc{color:var(--orange-hot)} .term .d{font-size:.82rem;color:var(--body-l);margin-top:6px;line-height:1.55} .why{ margin-top:34px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start; background:var(--ink);border-radius:var(--r-lg);padding:30px 34px; } .why .q{font-family:var(--mono);color:var(--orange);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;padding-top:5px;white-space:nowrap} .why p{color:var(--blue-pale);font-size:1.02rem;line-height:1.7} .why b{color:#fff} /* ---------- SEC.10 faq ---------- */ .faq-list{max-width:840px;display:grid;gap:12px} .faq{background:var(--card);border:1px solid var(--line-l);border-radius:14px;overflow:hidden} .faq summary{ list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px; padding:20px 24px;cursor:pointer;font-weight:600;color:var(--ink-l);font-size:1rem; } .faq summary::-webkit-details-marker{display:none} .faq summary .ic{ flex-shrink:0;width:30px;height:30px;border-radius:8px;border:1.5px solid var(--line-l); display:grid;place-items:center;font-family:var(--mono);color:var(--blue);transition:.2s;font-size:1rem; } .faq[open] summary .ic{background:var(--blue);border-color:var(--blue);color:#fff;transform:rotate(45deg)} .faq .a{padding:0 24px 22px;font-size:.94rem;line-height:1.7;color:var(--body-l);max-width:70ch} .faq .a b{color:var(--ink-l)} /* ---------- final cta ---------- */ .final{ position:relative;overflow:hidden; background: radial-gradient(900px 500px at 20% 0%, rgba(16,83,243,.3), transparent 60%), var(--ink); padding:clamp(90px,12vh,140px) 0; } .final::before{ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(to right, rgba(125,160,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(125,160,255,.05) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(700px 500px at 75% 50%, #000 20%, transparent 75%); -webkit-mask-image:radial-gradient(700px 500px at 75% 50%, #000 20%, transparent 75%); animation:gridUp64 9s linear infinite; } .final-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;position:relative} .final .h2{font-size:clamp(2.1rem,4vw,3.2rem)} .final .lead{margin-bottom:34px} .final-book{position:relative;text-align:center} .final-book img{width:min(78%,360px);margin:0 auto;filter:drop-shadow(0 40px 60px rgba(4,18,60,.65));animation:float 8s ease-in-out infinite} .final-steps{margin-top:30px;display:grid;gap:12px;max-width:520px} .final-steps div{ display:flex;gap:14px;align-items:baseline;font-size:.95rem;color:var(--blue-pale); } .final-steps .n{font-family:var(--mono);color:var(--orange);font-weight:600;font-size:.8rem;flex-shrink:0} /* ---------- footer ---------- */ footer{background:var(--ink);border-top:1px solid var(--line-d);padding:56px 0 40px} .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start} .foot img{height:36px;width:auto;margin-bottom:18px} .foot p{font-size:.86rem;color:#93A6D2;max-width:36ch;line-height:1.7} .foot h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);margin-bottom:16px;font-weight:500} .foot ul{list-style:none;display:grid;gap:10px} .foot a{font-size:.9rem;color:#93A5CC;transition:color .15s} .foot a:hover{color:#fff} .foot-base{ max-width:var(--container);margin:44px auto 0;padding:22px var(--pad) 0; border-top:1px solid rgba(125,160,255,.08); display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between; font-family:var(--mono);font-size:.72rem;color:#6F84B8;letter-spacing:.06em; } /* ---------- modal ---------- */ .modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px} .modal.open{display:flex} .modal-bg{position:absolute;inset:0;background:rgba(5,16,50,.8);backdrop-filter:blur(6px)} .modal-card{ position:relative;width:min(480px,100%);background:var(--paper);border-radius:var(--r-lg); padding:38px;box-shadow:0 40px 90px rgba(0,0,0,.6); animation:pop .28s cubic-bezier(.2,.9,.3,1.2); } @keyframes pop{from{transform:translateY(18px) scale(.97);opacity:0}} .modal-card h3{color:var(--ink-l);font-size:1.45rem;margin-bottom:8px} .modal-card>p{color:var(--body-l);font-size:.92rem;margin-bottom:22px} .modal-card form{display:grid;gap:14px} .modal-card input{ width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid var(--line-l); font-family:var(--font);font-size:.95rem;background:#fff;color:var(--ink-l); } .modal-card input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(16,83,243,.15)} .modal-close{ position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:10px; border:0;background:transparent;color:var(--body-l);font-size:1.3rem; } .modal-close:hover{background:#E8EDFB;color:var(--ink-l)} .modal-ok{display:none;text-align:center;padding:10px 0 4px} .modal-ok .tick{ width:60px;height:60px;border-radius:50%;background:rgba(16,83,243,.1);color:var(--blue); display:grid;place-items:center;font-size:1.6rem;margin:0 auto 16px; } .modal-ok h4{color:var(--ink-l);font-size:1.15rem;margin-bottom:8px} .modal-ok p{font-size:.9rem;color:var(--body-l);margin-bottom:18px} .modal-note{font-family:var(--mono);font-size:.68rem;color:#8A97B8;letter-spacing:.05em;text-align:center;margin-top:6px} /* ---------- hero entrance (pure CSS plays on load) ---------- */ @keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} .hi{opacity:0;animation:heroIn .85s cubic-bezier(.22,.9,.3,1) forwards} .hi-1{animation-delay:.05s}.hi-2{animation-delay:.16s}.hi-3{animation-delay:.3s} .hi-4{animation-delay:.44s}.hi-5{animation-delay:.58s} @media (prefers-reduced-motion:reduce){.hi{opacity:1;animation:none}} /* ---------- reveal on scroll ---------- */ .js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease} .rv.in{opacity:1;transform:none} .rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s} @media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}} /* ---------- responsive ---------- */ @media (max-width:1080px){ .prod-grid{grid-template-columns:repeat(2,1fr)} .terms-grid{grid-template-columns:repeat(2,1fr)} .terms-grid .term:nth-child(-n+4){border-top:1px solid var(--line-l)} .terms-grid .term:nth-child(-n+2){border-top:0} .terms-grid .term:nth-child(4n+1){border-left:1px solid var(--line-l)} .terms-grid .term:nth-child(2n+1){border-left:0} } @media (max-width:960px){ .hero-grid{grid-template-columns:1fr;align-items:start} .hero-visual{min-height:0;margin-top:8px} .hero-visual img.phone{width:min(80%,380px)} .chip-1{left:0}.chip-2{right:0} .stats-in{grid-template-columns:repeat(2,1fr)} .stat{border-left:0;border-top:1px solid var(--line-d);padding:30px 18px} .stat:nth-child(-n+2){border-top:0} .stat:nth-child(2n){border-left:1px solid var(--line-d)} .pipeline{grid-template-columns:1fr} .flow{transform:rotate(90deg);height:52px;width:52px;margin:0 auto} .engine{grid-template-columns:1fr} .ledger{grid-template-columns:1fr} .team{grid-template-columns:1fr} .steps{grid-template-columns:repeat(2,1fr)} .final-grid{grid-template-columns:1fr} .final-book{order:-1} .final-book img{width:min(60%,280px)} .foot{grid-template-columns:1fr 1fr} } @media (max-width:600px){ body{font-size:15.5px} .steps{grid-template-columns:1fr} .prod-grid{grid-template-columns:1fr} .terms-grid{grid-template-columns:1fr} .terms-grid .term{border-left:0 !important;border-top:1px solid var(--line-l) !important} .terms-grid .term:first-child{border-top:0 !important} .calc-out{grid-template-columns:1fr} .why{grid-template-columns:1fr;gap:8px} .foot{grid-template-columns:1fr} .btn{width:100%;justify-content:center} .btn-row{flex-direction:column;align-items:stretch} .nav .btn{width:auto} .example-strip{gap:10px 20px;padding:20px 22px} } /* ============================================================ SUBPAGE COMPONENTS ============================================================ */ .nav-links a[aria-current="page"]{color:#fff} .nav-links a[aria-current="page"]::after{width:100%} /* compact page hero */ .page-hero{ position:relative; padding:clamp(150px,19vh,196px) 0 clamp(56px,8vh,84px); background: radial-gradient(900px 500px at 80% -20%, rgba(16,83,243,.25), transparent 60%), var(--ink); overflow:hidden; } .page-hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(to right, rgba(125,160,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(125,160,255,.05) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(800px 500px at 70% 10%, #000 25%, transparent 75%); -webkit-mask-image:radial-gradient(800px 500px at 70% 10%, #000 25%, transparent 75%); animation:gridUp64 9s linear infinite; } .page-hero .h1{font-size:clamp(2.2rem,4vw,3.3rem);margin-bottom:18px} .page-hero .lead{margin-bottom:30px} .page-hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;position:relative} .page-hero-grid>*{min-width:0} .page-hero-grid .side-img{border-radius:var(--r-lg);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)} .page-hero-grid .side-float{filter:drop-shadow(0 30px 50px rgba(4,18,60,.6));animation:float 8s ease-in-out infinite} /* manifest (partnership deliverables) */ .manifest{border:1px solid var(--line-l);border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--shadow)} .mi{display:grid;grid-template-columns:96px 1fr 1.25fr;gap:20px;padding:19px 28px;border-top:1px solid var(--line-l);align-items:baseline} .mi:first-child{border-top:0} .mi .code{font-family:var(--mono);font-size:.72rem;color:var(--blue);letter-spacing:.14em} .mi h3{font-size:1rem} .mi p{font-size:.88rem;margin:0} /* fit / not-fit */ .fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px} .fit{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow)} .fit.good{border-top:4px solid var(--blue)} .fit.bad{border-top:4px solid #14306E} .fit h3{margin-bottom:16px;font-size:1.08rem} .fit ul{list-style:none;display:grid;gap:11px} .fit li{padding-left:26px;position:relative;font-size:.93rem;color:var(--body-l);line-height:1.55} .fit.good li::before{content:"✓";color:var(--blue);position:absolute;left:0;font-family:var(--mono);font-weight:600} .fit.bad li::before{content:"-";color:#8A97B8;position:absolute;left:0;font-family:var(--mono)} /* product rows */ .prodrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(44px,6vh,68px) 0;border-top:1px solid var(--line-l)} .prodrow.first{border-top:0;padding-top:0} .prodrow>*{min-width:0} .prodrow .p-img img{border-radius:var(--r-lg);box-shadow:var(--shadow);width:100%;object-fit:cover;max-height:420px;object-position:top center} .prodrow.flip .p-img{order:2} .p-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0} .p-chips span{font-family:var(--mono);font-size:.72rem;padding:7px 12px;border:1px solid var(--line-l);border-radius:99px;color:var(--body-l);background:#fff} .p-chips .hot{border-color:var(--orange);color:var(--orange-hot);font-weight:600} .p-inds{font-size:.88rem;color:var(--body-l)} .p-inds b{color:var(--ink-l)} /* quoting strip */ .quote-strip{display:grid;grid-template-columns:1fr 52px 1fr 52px 1fr;align-items:stretch;margin-top:10px} /* showcase gallery */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .g-item{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-l);background:var(--card);box-shadow:var(--shadow);margin:0} .g-item img{width:100%;height:240px;object-fit:cover;object-position:top center;transition:transform .5s ease} .g-item:hover img{transform:scale(1.04)} .g-item figcaption{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:10px} .g-name{font-weight:600;color:var(--ink-l);font-size:.95rem} .g-tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);white-space:nowrap} /* project logo wall */ .pl-wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px} .pl{background:#fff;border:1px solid var(--line-l);border-radius:14px;padding:20px 16px;display:grid;place-items:center;gap:12px;text-align:center} .pl img{height:60px;width:auto;object-fit:contain} .pl span{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--body-l)} /* feature split */ .feature{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,60px);align-items:center} .feature>*{min-width:0} .feature img{border-radius:var(--r-lg);box-shadow:var(--shadow)} /* video cards */ .video-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .video-card{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);margin:0} .video-card video{width:100%;aspect-ratio:16/9;display:block;background:#000;object-fit:cover} .video-card figcaption{padding:16px 22px;display:flex;justify-content:space-between;gap:10px;align-items:center} /* testimonial grid (success stories) */ .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} /* team */ .team-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} .member{background:var(--card);border:1px solid var(--line-l);border-radius:16px;padding:16px 10px 18px;text-align:center;transition:transform .18s, border-color .18s} .member:hover{transform:translateY(-3px);border-color:var(--blue)} .member img{width:76px;height:76px;border-radius:50%;object-fit:cover;object-position:top center;margin:0 auto 10px;background:#EAF0FF} .m-name{font-weight:600;font-size:.86rem;color:var(--ink-l)} .m-role{font-size:.7rem;color:var(--body-l);line-height:1.4;margin-top:3px} /* founders */ .founders-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .founder{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center;background:var(--card);border:1px solid var(--line-l);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow)} .founder img{width:150px;height:150px;border-radius:16px;object-fit:cover;object-position:top center} .founder h3{font-size:1.2rem} .f-role{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:6px 0 10px} .founder p{font-size:.88rem} /* values */ .values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .value{background:var(--card);border:1px solid var(--line-l);border-radius:16px;padding:24px} .value h3{font-size:.98rem;margin-bottom:8px} .value p{font-size:.86rem} /* story prose + pull quote */ .story{max-width:760px} .story p{margin-bottom:18px;font-size:1.02rem;line-height:1.75} .story b{color:var(--ink-l)} .pull{border-left:3px solid var(--orange);padding:8px 0 8px 26px;font-size:clamp(1.25rem,2.2vw,1.7rem);font-weight:600;color:var(--ink-l);letter-spacing:-.02em;max-width:680px;line-height:1.4} /* contact */ .paths{display:grid;grid-template-columns:1fr 1fr;gap:24px} .path{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;align-items:flex-start} .path .n{font-family:var(--mono);color:var(--orange);font-weight:600;font-size:.76rem;letter-spacing:.16em} .path p{flex:1;font-size:.95rem} .contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start} .office{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow)} .o-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:6px} .office h3{margin-bottom:10px} .person{display:grid;gap:2px;padding:15px 0;border-top:1px solid var(--line-l)} .person:first-of-type{border-top:0} .p-name{font-weight:600;color:var(--ink-l);font-size:.98rem} .p-role{font-size:.8rem;color:var(--body-l)} .person a{font-family:var(--mono);font-size:.85rem;color:var(--blue);margin-top:4px;width:max-content} .person a:hover{text-decoration:underline} .addr{font-size:.85rem;color:var(--body-l);line-height:1.7;margin-top:14px;padding-top:16px;border-top:1px dashed var(--line-l)} .addr b{color:var(--ink-l)} .form-panel{background:var(--card);border:1px solid var(--line-l);border-radius:var(--r-lg);padding:34px;box-shadow:var(--shadow)} .form-panel form{display:grid;gap:14px} .form-panel input,.form-panel textarea{width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid var(--line-l);font-family:var(--font);font-size:.95rem;background:#fff;color:var(--ink-l);resize:vertical} .form-panel input:focus,.form-panel textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(16,83,243,.15)} .form-ok{display:none;text-align:center;padding:26px 0} .form-ok .tick{width:60px;height:60px;border-radius:50%;background:rgba(16,83,243,.1);color:var(--blue);display:grid;place-items:center;font-size:1.6rem;margin:0 auto 16px} .form-ok h4{color:var(--ink-l);font-size:1.15rem;margin-bottom:8px} .form-ok p{font-size:.9rem} /* subpage responsive */ @media (max-width:1080px){ .team-grid{grid-template-columns:repeat(4,1fr)} .gallery{grid-template-columns:repeat(2,1fr)} .t-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:960px){ .page-hero-grid{grid-template-columns:1fr} .page-hero-grid .side-img,.page-hero-grid .side-float{max-width:420px} .prodrow{grid-template-columns:1fr} .prodrow.flip .p-img{order:0} .fit-grid{grid-template-columns:1fr} .founders-grid{grid-template-columns:1fr} .values-grid{grid-template-columns:repeat(2,1fr)} .video-grid{grid-template-columns:1fr} .contact-grid{grid-template-columns:1fr} .paths{grid-template-columns:1fr} .quote-strip{grid-template-columns:1fr} .quote-strip .flow{transform:rotate(90deg);height:52px;width:52px;margin:0 auto} .feature{grid-template-columns:1fr} .mi{grid-template-columns:70px 1fr;grid-template-rows:auto auto} .mi p{grid-column:2} } @media (max-width:600px){ .team-grid{grid-template-columns:repeat(2,1fr)} .gallery{grid-template-columns:1fr} .t-grid{grid-template-columns:1fr} .values-grid{grid-template-columns:1fr} .founder{grid-template-columns:1fr;text-align:center} .founder img{margin:0 auto} } /* ============================================================ MERGE ADDITIONS components required by Richard's copy, rebuilt in the MAC "Wholesale Factory" design system. (Richard's styles.css is NOT used; only his wording.) ============================================================ */ /* ---- hero note under primary CTA ---- */ .btn-note{ font-size:.85rem;line-height:1.55;color:var(--mist); max-width:46ch;margin-top:16px; } /* ---- the income equation (2 clients/wk x $100/mo = $10k/mo) ---- */ .eq{ display:grid;grid-template-columns:1fr auto 1fr auto 1.2fr;align-items:stretch;gap:14px; background:var(--card);border:1px solid var(--line-l);border-radius:var(--r-lg); box-shadow:var(--shadow);padding:30px 26px;margin:36px 0 26px; } .eq .part{display:flex;flex-direction:column;justify-content:center;text-align:center;padding:14px 10px} .eq .part .num{ font-family:var(--font);font-weight:700;letter-spacing:-.02em; font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--ink-l);line-height:1.1; } .eq .part .lbl{font-size:.83rem;line-height:1.5;color:var(--body-l);margin-top:8px} .eq .op{ display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:1.3rem;font-weight:600;color:var(--blue); } .eq .part.result{ background:var(--ink);border-radius:var(--r);padding:22px 18px; box-shadow:inset 0 0 0 1px var(--line-d); } .eq .part.result .num{color:var(--orange)} .eq .part.result .lbl{color:var(--mist)} .eq-note{ font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;line-height:1.6; color:var(--body-l);max-width:74ch; } .sec.dark .eq{background:var(--panel);border-color:var(--line-d)} .sec.dark .eq .part .num{color:#fff} .sec.dark .eq .part .lbl{color:var(--mist)} .sec.dark .eq-note{color:var(--mist)} @media (max-width:860px){ .eq{grid-template-columns:1fr;gap:6px} .eq .op{transform:rotate(90deg);padding:2px 0} } /* ---- "what's included" cards ---- */ .incl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px} .incl{ background:var(--card);border:1px solid var(--line-l);border-radius:var(--r); padding:26px 24px;box-shadow:var(--shadow);position:relative; transition:transform .25s ease,border-color .25s ease; } .incl:hover{transform:translateY(-4px);border-color:var(--blue)} .incl .mk{ font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase; color:var(--orange);display:block;margin-bottom:12px; } .incl h3{font-size:1.04rem;color:var(--ink-l);margin-bottom:9px;letter-spacing:-.01em} .incl p{font-size:.88rem;line-height:1.62;color:var(--body-l)} @media (max-width:1000px){.incl-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.incl-grid{grid-template-columns:1fr}} /* ---- payback callouts ---- */ .callouts{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px} .callout{ background:var(--card);border:1px solid var(--line-l);border-radius:var(--r); padding:26px 24px;display:flex;align-items:center;gap:20px;box-shadow:var(--shadow); } .callout .num{ font-family:var(--font); font-weight:800;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.03em; color:var(--blue);line-height:1;white-space:nowrap; } .callout.orange .num{color:var(--orange-hot)} .callout .lbl{font-size:.86rem;line-height:1.55;color:var(--body-l)} @media (max-width:760px){.callouts{grid-template-columns:1fr}} /* ---- testimonial card with no photo (initial mark) ---- */ .t-card .t-img.mono{ display:flex;align-items:center;justify-content:center; background:linear-gradient(140deg,var(--panel),var(--panel-2)); } .t-card .mono-circle{ width:52px;height:52px;border-radius:50%;display:grid;place-items:center; font-family:var(--mono);font-weight:600;font-size:1.15rem;color:#fff; background:var(--blue);box-shadow:0 0 0 4px rgba(16,83,243,.22); } /* ---- footer contact block ---- */ footer .foot-contact li{margin-bottom:7px} footer .foot-contact .lbl{ font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:var(--blue-soft);margin-right:6px; } /* ---- inline partner quote inside a product row ---- */ .p-quote{ margin:18px 0 4px;padding:18px 22px; background:var(--card);border-left:3px solid var(--orange);border-radius:0 var(--r) var(--r) 0; font-size:.95rem;line-height:1.65;color:var(--ink-l);box-shadow:var(--shadow); } .p-quote cite{ display:block;margin-top:10px;font-style:normal; font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--body-l); } .sec.dark .p-quote{background:var(--panel);color:#fff} .sec.dark .p-quote cite{color:var(--mist)} /* ============================================================ v3 THEME SWITCH, MOTION, VIDEO Signature: a work-light. Cards, panels and rows carry a cursor-following spotlight, as if a lamp is being moved over the factory floor. Everything else stays quiet. ============================================================ */ /* ---------- scroll progress rail ---------- */ .progress{ position:fixed;top:0;left:0;height:2px;z-index:120;width:0; background:linear-gradient(90deg,var(--blue),var(--orange)); box-shadow:0 0 14px rgba(16,83,243,.7); transition:width .08s linear; } /* ---------- theme toggle ---------- */ .theme-toggle{ position:relative;flex-shrink:0; width:60px;height:30px;border-radius:999px; background:rgba(125,160,255,.12); border:1px solid var(--line-d); cursor:pointer;padding:0; transition:background .3s var(--ease), border-color .3s var(--ease); } .theme-toggle:hover{border-color:var(--blue-soft);background:rgba(16,83,243,.18)} .theme-toggle .knob{ position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%; background:linear-gradient(180deg,var(--orange),var(--orange-hot)); box-shadow:0 2px 10px rgba(255,127,34,.6); transition:transform .42s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); display:grid;place-items:center; } .theme-toggle .knob svg{width:12px;height:12px;fill:#180A00;transition:opacity .25s ease} .theme-toggle .knob .moon{position:absolute;opacity:0;fill:#04101F} [data-theme="dark"] .theme-toggle .knob{ transform:translateX(30px); background:linear-gradient(180deg,#C9DAFF,#8FAEEA); box-shadow:0 2px 10px rgba(140,175,255,.5); } [data-theme="dark"] .theme-toggle .knob .sun{opacity:0} [data-theme="dark"] .theme-toggle .knob .moon{opacity:1} @media (max-width:1080px){ .theme-toggle{margin-left:auto} } /* ---------- cursor work-light on cards ---------- JS writes --mx/--my (0-100%) on hover; the overlay is the lamp. */ .node,.panel,.prod,.step,.term,.incl,.callout,.t-card,.mi,.g-item,.member, .value,.founder,.path,.office,.fit,.ledger-col,.video-card,.eq,.p-quote{ position:relative;isolation:isolate; } .node::after,.panel::after,.prod::after,.step::after,.incl::after,.callout::after, .t-card::after,.mi::after,.member::after,.value::after,.founder::after,.path::after, .fit::after,.ledger-col::after,.video-card::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1; border-radius:inherit;opacity:0; transition:opacity .35s var(--ease); background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), var(--spot), transparent 62%); } .node:hover::after,.panel:hover::after,.prod:hover::after,.step:hover::after, .incl:hover::after,.callout:hover::after,.t-card:hover::after,.mi:hover::after, .member:hover::after,.value:hover::after,.founder:hover::after,.path:hover::after, .fit:hover::after,.ledger-col:hover::after,.video-card:hover::after{opacity:1} /* the step cards already use ::after for a tick mark restore it on a different layer */ .step::before{ content:"";position:absolute;top:26px;right:26px;width:22px;height:2px; background:var(--line-l);z-index:2;transition:background .3s ease, width .3s var(--ease); } .step:last-child::before{background:var(--orange)} .step:hover::before{width:34px;background:var(--orange)} /* lift + rim on hover */ .prod,.step,.incl,.callout,.mi,.member,.value,.founder,.g-item,.video-card{ transition:transform .4s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease); } .prod:hover,.incl:hover,.callout:hover,.mi:hover,.value:hover,.founder:hover,.video-card:hover{ transform:translateY(-6px); border-color:var(--blue-soft); box-shadow:0 34px 70px -30px rgba(5,20,60,.42), 0 0 0 1px rgba(77,124,255,.22); } [data-theme="dark"] .prod:hover,[data-theme="dark"] .incl:hover, [data-theme="dark"] .callout:hover,[data-theme="dark"] .mi:hover, [data-theme="dark"] .value:hover,[data-theme="dark"] .founder:hover, [data-theme="dark"] .video-card:hover{ box-shadow:0 34px 70px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(77,124,255,.3); } .member:hover{transform:translateY(-6px) scale(1.03)} .g-item:hover{transform:translateY(-5px)} /* ---------- ambient blueprint drift on contrast bands ---------- */ .sec.dark,.sec.navy,.final{position:relative;overflow:hidden} .sec.dark::before,.sec.navy::before,.final::before{ content:"";position:absolute;inset:-40% -10%;pointer-events:none;z-index:0; background: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size:72px 72px; mask-image:radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%); -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 78%); animation:gridUp72 10s linear infinite; } /* the factory floor rises: one tile per loop, so it never jumps */ @keyframes gridUp64{to{background-position:0 -64px}} @keyframes gridUp72{to{background-position:0 -72px}} .sec.dark>.container,.sec.navy>.container,.final>.container{position:relative;z-index:1} /* slow-breathing blue mesh behind the dark sections */ .sec.dark::after{ content:"";position:absolute;pointer-events:none;z-index:0; width:900px;height:900px;border-radius:50%;left:-15%;top:-30%; background:radial-gradient(circle, rgba(16,83,243,.13), transparent 62%); animation:mesh 26s ease-in-out infinite alternate; } @keyframes mesh{ from{transform:translate3d(0,0,0) scale(1);opacity:.7} to{transform:translate3d(340px,180px,0) scale(1.25);opacity:1} } /* ---------- auto-scrolling testimonial rail ---------- */ .t-row{ display:flex;gap:22px;overflow-x:auto;scroll-snap-type:none; padding:4px 4px 22px; scrollbar-width:none;-ms-overflow-style:none; cursor:grab; /* the rail is driven frame by frame from JS, so it must never be smooth-scrolled out from under us */ scroll-behavior:auto; } .t-row::-webkit-scrollbar{display:none} .t-row.dragging{cursor:grabbing;scroll-behavior:auto} .t-row>.t-card{flex:0 0 340px;scroll-snap-align:none} .t-row.is-auto{scroll-behavior:auto} .rail-state{ display:flex;align-items:center;gap:10px; font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase; color:var(--body-l);margin-right:auto; } .rail-state .live{ width:7px;height:7px;border-radius:50%;background:var(--orange);flex-shrink:0; box-shadow:0 0 0 0 rgba(255,127,34,.6);animation:pulse 2.2s ease-out infinite; } .t-row.paused ~ .t-nav .rail-state .live, .rail-state.paused .live{animation:none;background:var(--blue-soft);box-shadow:none} @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(255,127,34,.55)} 70%{box-shadow:0 0 0 9px rgba(255,127,34,0)} 100%{box-shadow:0 0 0 0 rgba(255,127,34,0)} } /* ---------- video cards ---------- */ .video-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start; } @media (max-width:900px){.video-grid{grid-template-columns:1fr 1fr}} @media (max-width:620px){.video-grid{grid-template-columns:1fr}} .video-card{ position:relative;border-radius:var(--r-lg);overflow:hidden; background:var(--panel);border:1px solid var(--line-l); box-shadow:var(--shadow); } .video-card .vwrap{position:relative;display:block;background:#061539} .video-card video{ display:block;width:100%;height:100%;object-fit:cover; aspect-ratio:4/5;background:#061539; } .video-card.wide video{aspect-ratio:16/9} .video-card.wide{grid-column:span 3} @media (max-width:900px){.video-card.wide{grid-column:span 2}} @media (max-width:620px){.video-card.wide{grid-column:span 1}} /* custom play affordance, hidden once the video is playing */ .video-card .play{ position:absolute;inset:0;z-index:3;display:grid;place-items:center; background:linear-gradient(180deg,rgba(5,15,45,.12) 0%,rgba(5,15,45,.55) 100%); border:0;cursor:pointer;padding:0; transition:opacity .35s var(--ease), backdrop-filter .35s ease; } .video-card .play:hover{backdrop-filter:blur(1px)} .video-card.playing .play{opacity:0;pointer-events:none} .play-btn{ width:66px;height:66px;border-radius:50%; background:linear-gradient(180deg,var(--orange),var(--orange-hot)); display:grid;place-items:center; box-shadow:0 14px 40px -8px rgba(255,127,34,.7); transition:transform .4s var(--ease), box-shadow .3s ease; } .play-btn svg{width:22px;height:22px;fill:#180A00;margin-left:3px} .video-card .play:hover .play-btn{transform:scale(1.1)} /* concentric pulse behind the play button */ .play-btn::before{ content:"";position:absolute;width:66px;height:66px;border-radius:50%; border:2px solid rgba(255,127,34,.55); animation:ripple 2.6s var(--ease) infinite; } @keyframes ripple{ 0%{transform:scale(1);opacity:.8} 100%{transform:scale(1.9);opacity:0} } .video-card .v-meta{ display:block; position:absolute;left:0;right:0;bottom:0;z-index:2; padding:34px 20px 16px;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(5,15,45,.9)); transition:opacity .3s ease; } .video-card.playing .v-meta{opacity:0} .video-card .v-name{display:block;color:#fff;font-family:var(--font);font-weight:700;font-size:1rem;letter-spacing:-.01em} .video-card .v-tag{ display:block;margin-top:3px; font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-pale); } .video-card .v-stat{ position:absolute;top:14px;left:14px;z-index:2; font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.1em; background:rgba(5,15,45,.72);backdrop-filter:blur(6px); border:1px solid rgba(125,160,255,.25);border-left:3px solid var(--orange); border-radius:8px;padding:6px 10px;color:#fff; transition:opacity .3s ease; } .video-card.playing .v-stat{opacity:0} /* founder videos: two wide frames */ .founder-vids{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px} @media (max-width:820px){.founder-vids{grid-template-columns:1fr}} .founder-vids .video-card video{aspect-ratio:16/9} /* ---------- link underline sweep ---------- */ a.ul{ position:relative;background-image:linear-gradient(currentColor,currentColor); background-size:0% 1.5px;background-repeat:no-repeat;background-position:left 100%; transition:background-size .35s var(--ease); } a.ul:hover{background-size:100% 1.5px} /* ---------- reveal, refined ---------- Scoped to .js so the page can never render blank. If the script fails to load, or the visitor has JS off, every section is simply visible with no animation. */ .js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease), transform .8s var(--ease)} .js .rv.in{opacity:1;transform:none} .rv-d1{transition-delay:.09s} .rv-d2{transition-delay:.18s} .rv-d3{transition-delay:.27s} /* ---------- respect reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ .hero::after,.sec.dark::before,.sec.navy::before,.final::before, .sec.dark::after,.chip,.play-btn::before,.rail-state .live{animation:none !important} .btn::before{display:none} .rv{opacity:1;transform:none;transition:none} .prod:hover,.incl:hover,.callout:hover,.mi:hover,.value:hover, .founder:hover,.video-card:hover,.member:hover,.g-item:hover{transform:none} html.theme-anim,html.theme-anim *{transition:none !important} } /* ============================================================ v3.1 ADDITIONS 1. Hero FX: animated royal aurora + cursor spotlight that reveals a digital grid, plus pointer parallax on the visual. 2. Trust logo strip variant for the Proof section. 3. Generic info popups ("more information" modals). 4. Generic person avatar for quote cards without a photo. 5. Calculator page (unlisted sales tool) components. ============================================================ */ /* ---------- hero FX layers ---------- */ .hero{--sx:62%;--sy:34%} .fx{position:absolute;inset:0;pointer-events:none} .fx-aurora{overflow:hidden;z-index:0} .fx-aurora i{ position:absolute;border-radius:50%;filter:blur(10px); mix-blend-mode:screen;opacity:.85; } .fx-aurora i:nth-child(1){ width:820px;height:820px;left:-14%;bottom:-42%; background:radial-gradient(circle, rgba(16,83,243,.34), transparent 62%); animation:aur-a 21s ease-in-out infinite alternate; } .fx-aurora i:nth-child(2){ width:640px;height:640px;right:-10%;top:-24%; background:radial-gradient(circle, rgba(77,140,255,.26), transparent 60%); animation:aur-b 17s ease-in-out infinite alternate; } .fx-aurora i:nth-child(3){ width:460px;height:460px;left:38%;top:44%; background:radial-gradient(circle, rgba(255,127,34,.07), transparent 60%); animation:aur-c 26s ease-in-out infinite alternate; } @keyframes aur-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(140px,-90px,0) scale(1.22)}} @keyframes aur-b{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-160px,120px,0) scale(.92)}} @keyframes aur-c{from{transform:translate3d(0,0,0)}to{transform:translate3d(-120px,-140px,0) scale(1.3)}} /* cursor spotlight: soft lamp glow */ .fx-spot{ opacity:0;transition:opacity .5s var(--ease); background:radial-gradient(300px circle at var(--sx) var(--sy), rgba(120,165,255,.20), rgba(16,83,243,.10) 42%, transparent 68%); } /* cursor spotlight: the digital layer it reveals. A fine data-grid with node dots, only visible inside the beam. */ .fx-digital{ opacity:0;transition:opacity .5s var(--ease); background: radial-gradient(rgba(198,213,255,.55) 1.1px, transparent 1.6px), linear-gradient(to right, rgba(150,185,255,.20) 1px, transparent 1px), linear-gradient(to bottom, rgba(150,185,255,.20) 1px, transparent 1px); background-size:32px 32px, 32px 32px, 32px 32px; mask-image:radial-gradient(240px circle at var(--sx) var(--sy), #000 0%, rgba(0,0,0,.55) 45%, transparent 72%); -webkit-mask-image:radial-gradient(240px circle at var(--sx) var(--sy), #000 0%, rgba(0,0,0,.55) 45%, transparent 72%); } .hero.fx-live .fx-spot,.hero.fx-live .fx-digital{opacity:1} /* layer order: fx sit above the hero's own bg, below the content */ .hero .fx-spot,.hero .fx-digital{z-index:1} .hero .hero-grid{z-index:2} /* v3.2: the guy + phone stay stationary; the two chips keep their float animation. Only the spotlight follows the cursor. */ @media (hover:none),(max-width:960px){ .fx-spot,.fx-digital{display:none} } @media (prefers-reduced-motion:reduce){ .fx-aurora i,.fx-spot,.fx-digital{animation:none !important;display:none} } /* ---------- trust strip, proof placement ---------- */ .trust--proof{ border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l); background:transparent;margin-bottom:44px; } .trust--proof .trust-in{padding-inline:0} .trust--proof .trust-label{color:var(--body-l)} .trust--proof .trust-logos img{filter:brightness(0) saturate(0);opacity:.45} .trust--proof .trust-logos img:hover{opacity:.8} [data-theme="dark"] .trust--proof .trust-logos img{filter:brightness(0) invert(1);opacity:.5} /* ---------- "more information" trigger + info popup ---------- */ .more{ display:inline-flex;align-items:center;gap:9px; margin-top:18px;padding:0;border:0;background:none; font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase; color:var(--blue);cursor:pointer; } .more .pl{ width:22px;height:22px;border-radius:6px;border:1.5px solid currentColor; display:grid;place-items:center;font-size:.9rem;line-height:1; transition:transform .25s var(--ease), background .2s ease, color .2s ease; flex-shrink:0; } .more:hover .pl{background:var(--blue);color:#fff;transform:rotate(90deg)} .more:hover{text-decoration:underline;text-underline-offset:4px} .sec.dark .more{color:var(--blue-soft)} .modal-card.info{width:min(640px,100%);max-height:min(78vh,720px);overflow:auto} .modal-card.info h3{color:var(--ink-l);font-size:1.45rem;margin-bottom:14px;padding-right:34px} .modal-card.info .spec{margin-bottom:14px} .modal-card.info p{color:var(--body-l);font-size:.97rem;line-height:1.75;margin-bottom:14px} .modal-card.info p:last-child{margin-bottom:0} .modal-card.info b{color:var(--ink-l)} .modal-card.info ul{list-style:none;display:grid;gap:9px;margin:4px 0 16px} .modal-card.info li{position:relative;padding-left:20px;font-size:.93rem;color:var(--body-l);line-height:1.6} .modal-card.info li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:2px;background:var(--blue)} [data-theme="dark"] .modal-card{background:var(--card)} [data-theme="dark"] .modal-card.info p,[data-theme="dark"] .modal-card.info li{color:var(--mist)} [data-theme="dark"] .modal-card.info b,[data-theme="dark"] .modal-card.info h3{color:#fff} [data-theme="dark"] .modal-close:hover{background:var(--panel);color:#fff} /* ---------- generic person avatar (no real photo) ---------- */ .t-card .mono-circle{background:linear-gradient(180deg,var(--blue),#0A3ACC)} .mono-circle svg{width:30px;height:30px;fill:#fff;display:block} /* ---------- calculator page (unlisted) ---------- */ .calc-flag{ display:inline-flex;align-items:center;gap:10px; font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase; color:var(--orange);border:1px dashed rgba(255,127,34,.5);border-radius:8px; padding:8px 14px;margin-bottom:26px; } .calc .grp{ margin-top:26px;padding-top:20px;border-top:1px dashed var(--line-d); font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-soft); } .calc .grp:first-of-type{margin-top:0;padding-top:0;border-top:0} .calc-lines{margin-top:16px;display:grid;gap:8px} .calc-lines .row{ display:flex;justify-content:space-between;gap:14px; font-family:var(--mono);font-size:.8rem;color:var(--blue-pale); } .calc-lines .row b{color:#fff;font-weight:600} .calc-lines .row .val{color:var(--orange);font-weight:600;white-space:nowrap} /* end v3.1 additions */ /* ============================================================ v3.2 ADDITIONS 1. Playable app frames (index, showcase; ported from the custom-apps funnel so all pages share one component). 2. Range section grid (copy left, Acenda frame right). 3. Equation alternate-route line. 4. Final CTA step list + small print (was unstyled). 5. Dark-theme contrast fixes for blue-on-blue labels. ============================================================ */ /* ---------- playable app frame ---------- */ .app-frame{width:min(100%,300px);margin:0 auto} .app-frame .frame{ position:relative;width:100%;aspect-ratio:9/19; border-radius:44px;padding:12px; background:linear-gradient(180deg,#12328A 0%,#081D52 100%); border:1px solid rgba(160,190,255,.3); box-shadow:0 50px 90px -30px rgba(3,12,40,.72), inset 0 1px 0 rgba(255,255,255,.14); } .app-frame .notch{ position:absolute;top:22px;left:50%;transform:translateX(-50%); width:96px;height:26px;border-radius:99px;background:#04102F;z-index:6; box-shadow:0 0 0 1.5px rgba(160,190,255,.14);pointer-events:none; } .app-frame .screen{position:absolute;inset:12px;border-radius:33px;overflow:hidden;background:#04102F} .app-frame iframe{width:100%;height:100%;border:0;display:block;background:#fff} .app-frame .cover{ position:absolute;inset:0;z-index:4;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:14px;text-align:center;padding:26px; background: radial-gradient(340px 340px at 50% 0%, rgba(16,83,243,.4), transparent 70%), linear-gradient(180deg,#0B2568 0%,#04102F 100%); transition:opacity .4s var(--ease); } .app-frame .cover.gone{opacity:0;pointer-events:none} .app-frame .cover .nm{font-family:var(--font);font-weight:700;font-size:1.3rem;color:#fff;letter-spacing:-.01em} .app-frame .cover .tg{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-pale)} .app-frame .cover .go{ margin-top:8px;display:inline-flex;align-items:center;gap:9px; padding:12px 20px;border-radius:99px;border:0;cursor:pointer; background:linear-gradient(180deg,var(--orange),var(--orange-hot));color:#180A00; font-family:var(--body-font);font-weight:600;font-size:.88rem; box-shadow:0 12px 30px -10px rgba(255,127,34,.6); transition:transform .25s var(--ease); } .app-frame .cover .go:hover{transform:translateY(-2px) scale(1.03)} .app-frame .cover .go svg{width:13px;height:13px;fill:#180A00} .app-frame .load{position:absolute;inset:0;z-index:3;display:none;align-items:center;justify-content:center;background:#04102F} .app-frame .load.on{display:flex} .app-frame .load i{ width:34px;height:34px;border-radius:50%; border:3px solid rgba(160,190,255,.25);border-top-color:var(--orange); animation:frameSpin 1s linear infinite; } @keyframes frameSpin{to{transform:rotate(360deg)}} .frame-cap{margin-top:18px;text-align:center} .frame-cap .n{font-family:var(--font);font-weight:700;color:#fff;font-size:1.02rem} .frame-cap .t{font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-pale);margin-top:4px} .light .frame-cap .n,.sec.light .frame-cap .n{color:var(--ink-l)} .light .frame-cap .t,.sec.light .frame-cap .t{color:var(--body-l)} /* ---------- range section: copy left, live app right ---------- */ .range-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,64px);align-items:center} .range-grid .sec-head{margin-bottom:0} @media (max-width:960px){.range-grid{grid-template-columns:1fr}} /* showcase: playable build split */ .play-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center} .play-split>*{min-width:0} @media (max-width:960px){.play-split{grid-template-columns:1fr}} /* ---------- equation alternate route ---------- */ .eq-alt{ margin:0 0 26px;font-size:1.02rem;line-height:1.7;color:var(--body-l);max-width:64ch; } .eq-alt b{color:var(--ink-l)} .sec.dark .eq-alt{color:var(--mist)} .sec.dark .eq-alt b{color:#fff} /* ---------- final CTA steps + small print (previously unstyled) ---------- */ .cta-steps{margin-top:30px;display:grid;gap:12px;max-width:560px} .cta-steps div{display:flex;gap:14px;align-items:baseline;font-size:.95rem;color:var(--blue-pale)} .cta-steps .n{font-family:var(--body-font);color:var(--orange);font-weight:700;font-size:.8rem;flex-shrink:0} .cta-small{ margin-top:22px;font-size:.72rem;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:#93A6D2;max-width:52ch;line-height:1.7; } /* ---------- dark theme: fix blue-on-blue labels ---------- */ [data-theme="dark"] .node .tag, [data-theme="dark"] .light .spec, [data-theme="dark"] .step .idx, [data-theme="dark"] .prod-price, [data-theme="dark"] .t-card figcaption, [data-theme="dark"] .mi .code, [data-theme="dark"] .g-tag, [data-theme="dark"] .o-tag, [data-theme="dark"] .f-role, [data-theme="dark"] .p-name ~ a, [data-theme="dark"] .faq summary .ic{color:var(--blue-soft)} [data-theme="dark"] .light .spec::after{background:var(--line-d)} /* numbers keep their columns without a monospace face */ .rate-table,.calc label output,.calc-lines .row,.stat .num,.out-cell .v{font-variant-numeric:tabular-nums} /* ---------- v3.3 ---------- */ /* dark-band pipeline cards (quoting strip): readable tags on panel blue */ .sec.dark .node .tag,.quote-strip .node .tag{color:#9DB9FF} /* the range ladder: three ascending rungs */ .ladder-vis{display:grid;gap:14px;max-width:420px;margin-left:auto} .ladder-vis .rung{ background:var(--panel);border:1px solid var(--line-d);border-radius:var(--r); padding:18px 22px;display:grid;gap:2px; transform:translateX(0);transition:transform .3s var(--ease), border-color .3s ease; } .ladder-vis .rung:hover{transform:translateX(-6px);border-color:var(--blue-soft)} .ladder-vis .rung.mid{margin-left:26px;background:var(--panel-2)} .ladder-vis .rung.top{margin-left:52px;border-color:rgba(255,127,34,.5)} .ladder-vis .rung .k{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-pale)} .ladder-vis .rung b{font-family:var(--font);font-weight:700;font-size:1.45rem;color:#fff;letter-spacing:-.01em} .ladder-vis .rung.top b{color:var(--orange)} .ladder-vis .rung .d{font-size:.82rem;color:var(--mist);line-height:1.5} @media (max-width:960px){ .ladder-vis{margin:26px 0 0} .ladder-vis .rung.mid{margin-left:14px} .ladder-vis .rung.top{margin-left:28px} } /* end v3.3 additions */ /* ============================================================ v4 (30 Jul 2026 copy rebuild) — nav breathing room. The brief adds an Investment item, taking the bar from seven links to eight. Eight need more room than seven, so the burger takes over a little earlier and the row tightens just above that. Same components, same colours, nothing else moves. ============================================================ */ @media (max-width:1240px){ .nav-links,.nav .btn-primary{display:none} .nav-burger{display:block;margin-left:8px} .nav.open{background:var(--nav-solid)} .nav.open .nav-links{ display:flex;flex-direction:column;gap:4px; position:absolute;top:100%;left:0;right:0; background:var(--nav-solid);backdrop-filter:blur(14px); padding:18px var(--pad) 28px;border-bottom:1px solid var(--line-d); } .nav.open .nav-links a{display:block;padding:12px 0;font-size:1.05rem} } @media (min-width:1241px) and (max-width:1420px){ .nav-in{gap:20px} .nav-links{gap:20px} } /* v4: people click the whole box, so the first discovery card carries a real button stretched across it. The card keeps its markup and styling; the button is invisible, covers the card, and is reachable by keyboard. */ .incl-click{cursor:pointer} .incl-hit{ position:absolute;inset:0;width:100%;height:100%; background:none;border:0;padding:0;cursor:pointer; border-radius:var(--r); } .incl-hit:focus-visible{outline:2px solid var(--blue);outline-offset:3px} /* v4: .wl-note was only ever used on light bands, so its ink and its blue bold both disappear on navy. Same treatment the dark bands already give .eq-note, so the note reads properly wherever it sits. */ .sec.dark .wl-note{color:var(--mist)} .sec.dark .wl-note b{color:#fff} /* v4.1: the comparison table is now its own dark band (#compare) rather than an FAQ row, so .rate-table renders on its native ink with no override. The light-band overrides are kept only in case the table is reused on a light section later. */ .sec.light .rate-table th{color:var(--body-l)} .sec.light .rate-table td{color:var(--body-l);border-bottom-color:var(--line-l)} .sec.light .rate-table td:first-child{color:var(--ink-l)} .faq .table-scroll{margin:16px 0 4px} /* v4.1: breathing room for the promoted comparison table */ #compare .table-scroll{margin:26px 0 4px} #compare .wl-note{text-align:left;margin-top:26px} #compare .eq-note{margin-top:14px} /* v4.1: the MAC row is the point of the table, so it gets to look like it. Accent rule on the left, a faint lift off the band, and no hairline under it since it is the last row. */ #compare .rate-table tr.mac-row td{ background:rgba(125,160,255,.06); border-bottom:0; padding-top:20px;padding-bottom:20px; } #compare .rate-table tr.mac-row td:first-child{ box-shadow:inset 3px 0 0 var(--orange); padding-left:14px; } #compare .rate-table tr.mac-row td:last-child{padding-right:14px} /* v4.1: below 760px the four columns can't survive side by side, and the last one is the payoff, so each route becomes a stacked card with its column names carried through as labels. Nothing scrolls off screen. */ @media (max-width:760px){ #compare .table-scroll{overflow-x:visible} #compare .rate-table{min-width:0;display:block} #compare .rate-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} #compare .rate-table tbody,#compare .rate-table tr{display:block} #compare .rate-table tr{ padding:20px 0;border-bottom:1px solid rgba(125,160,255,.12); } #compare .rate-table td{ display:block;width:auto;border:0;padding:0 0 12px;text-align:left } #compare .rate-table td:last-child{padding-bottom:0;text-align:left} #compare .rate-table td[data-label]::before{ content:attr(data-label);display:block; font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase; color:var(--mist);opacity:.75;margin-bottom:5px; } #compare .rate-table td:first-child::before{content:none} #compare .rate-table td:first-child{font-size:1.05rem;padding-bottom:14px} #compare .rate-table tr.mac-row td{background:none;padding-left:0} #compare .rate-table tr.mac-row{ background:rgba(125,160,255,.06); box-shadow:inset 3px 0 0 var(--orange); padding:22px 16px;border-bottom:0; } #compare .rate-table tr.mac-row td:first-child{box-shadow:none;padding-left:0} } /* ============================================================ v4.1: founders alongside the model intro. .sec-head caps at 780px, so on wide screens the right of that band was empty. The two faces go there, which puts the owners in front of the reader in the first scroll rather than three pages later on About. ============================================================ */ .model-head{ display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(28px,4vw,56px); align-items:start;margin-bottom:clamp(40px,6vh,64px); } .who{ background:var(--card);border:1px solid var(--line-l);border-radius:var(--r-lg); padding:24px;box-shadow:var(--shadow); } .who-lbl{ display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em; text-transform:uppercase;color:var(--body-l); } .who-row{display:flex;gap:14px;align-items:center;margin-top:16px} .who-row img{width:58px;height:58px;border-radius:12px;object-fit:cover;flex:none} .who-row b{display:block;font-size:.95rem;color:var(--ink-l);line-height:1.25} .who-row span{ display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em; text-transform:uppercase;color:var(--blue);margin-top:4px; } .who>p{margin-top:18px;font-size:.85rem;line-height:1.6;color:var(--body-l)} .who>a{display:inline-block;margin-top:14px;font-size:.85rem;color:var(--blue);font-weight:500} @media (max-width:1000px){ .model-head{grid-template-columns:1fr;gap:30px} .who{max-width:420px} } /* v4.1: founder cards top-align their portrait. The two bios are different lengths, and with align-items:center the shorter card floated its photo in the middle of the box while the taller one sat high. */ .founder{align-items:start} .who-row img{width:64px;height:64px} /* v4.1: navy bands need the same eq-note treatment the dark bands already get. The Track B disclaimer on Success Stories sits on a navy section, where the default --body-l ink is close to invisible. */ .sec.navy .eq-note{color:var(--mist)} /* ============================================================ v4.1 BLOG — article prose, index cards, prev/next. Built on the existing tokens so posts inherit both themes and need no per-page styling. Measure is capped at 68ch because long-form reads badly at container width. ============================================================ */ .post-hero .spec a{color:var(--blue);text-decoration:none} .post-hero .spec a:hover{text-decoration:underline;text-underline-offset:3px} .post-hero .h1{max-width:20ch} .article{max-width:68ch;font-size:1.06rem;line-height:1.8;color:var(--body-l)} .article > *:first-child{margin-top:0} .article p{margin:0 0 22px} .article h2{ font-family:var(--font);font-weight:700;letter-spacing:-.02em; font-size:clamp(1.4rem,2.4vw,1.85rem);line-height:1.25; color:var(--ink-l);margin:44px 0 16px; } .article h3{ font-family:var(--font);font-weight:600;letter-spacing:-.01em; font-size:1.2rem;color:var(--ink-l);margin:32px 0 12px; } .article ul,.article ol{margin:0 0 22px;padding-left:22px} .article li{margin-bottom:10px} .article li::marker{color:var(--blue)} .article a{color:var(--blue);text-decoration:underline;text-underline-offset:3px} .article b,.article strong{color:var(--ink-l);font-weight:600} .article img{max-width:100%;height:auto;border-radius:var(--r);margin:10px 0 24px} .article blockquote{ margin:28px 0;padding:6px 0 6px 24px;border-left:3px solid var(--orange); font-size:1.12rem;color:var(--ink-l); } .article table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:.95rem} .article th{ text-align:left;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:var(--body-l);border-bottom:1px solid var(--line-l);padding:0 12px 10px 0;font-weight:500; } .article td{padding:13px 12px 13px 0;border-bottom:1px solid var(--line-l);vertical-align:top} .article hr{border:0;border-top:1px solid var(--line-l);margin:38px 0} /* prev / next */ .post-nav{ display:grid;grid-template-columns:1fr 1fr;gap:16px; max-width:68ch;margin-top:52px; } .post-nav .pn{ display:block;background:var(--card);border:1px solid var(--line-l); border-radius:var(--r);padding:18px 20px;text-decoration:none; transition:border-color .18s var(--ease),transform .18s var(--ease); } .post-nav .pn:hover{border-color:var(--blue);transform:translateY(-2px)} .post-nav .pn span{ display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em; text-transform:uppercase;color:var(--blue);margin-bottom:6px; } .post-nav .pn b{display:block;font-size:.95rem;line-height:1.4;color:var(--ink-l);font-weight:500} .post-nav .next{text-align:right} /* blog index */ .post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .post-card{ background:var(--card);border:1px solid var(--line-l);border-radius:var(--r-lg); padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column; transition:border-color .18s var(--ease),transform .18s var(--ease); } .post-card:hover{border-color:var(--blue);transform:translateY(-3px)} .pc-date{ font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase; color:var(--body-l);margin-bottom:12px; } .post-card h2{font-size:1.18rem;line-height:1.35;letter-spacing:-.01em;margin-bottom:12px} .post-card h2 a{color:var(--ink-l);text-decoration:none} .post-card h2 a:hover{color:var(--blue)} .post-card p{font-size:.9rem;line-height:1.65;color:var(--body-l);flex:1} .pc-more{margin-top:16px;color:var(--blue);font-size:.86rem;font-weight:500;text-decoration:none} .post-card:hover .pc-more{text-decoration:underline;text-underline-offset:3px} @media (max-width:860px){ .post-grid{grid-template-columns:1fr} .post-nav{grid-template-columns:1fr} .post-nav .next{text-align:left} } /* ============================================================ v4.1 FIX: callout grids overflowed on phones. Several pages set grid-template-columns inline (repeat(2,1fr), repeat(3,1fr)) on .callouts. An inline style beats a stylesheet rule regardless of specificity, so the existing `@media (max-width:760px){.callouts{grid-template-columns:1fr}}` never applied and those pages scrolled sideways — partnership.html by 440px, sales-c by 300px, about by 220px. !important is the right tool here: it is the only thing that overrides an inline style without editing markup on every page. ============================================================ */ @media (max-width:760px){ .callouts{grid-template-columns:1fr !important} } @media (min-width:761px) and (max-width:1000px){ .callouts{grid-template-columns:repeat(2,1fr) !important} } /* v4.3: the Info Pack form must never show success for a lead that did not send. This is the visible failure state. */ .send-fail{ margin-top:14px;font-size:.86rem;line-height:1.5; color:#B4231C;background:rgba(180,35,28,.08); border:1px solid rgba(180,35,28,.25);border-radius:10px;padding:12px 14px; } .send-fail a{color:inherit;text-decoration:underline;text-underline-offset:2px} [data-theme="dark"] .send-fail{color:#FFB3AE;background:rgba(255,120,110,.10);border-color:rgba(255,120,110,.30)}