*,*::before,*::after{box-sizing:border-box} :root{ /* Interactive hover, per theme. --line-hover is the border that lights up on a button, chip, pill or tile. It was the literal pale blue #c6dbe7 in fifteen rules: a colour tuned for a white page, which on a dark surface reads as a bright outline drawn AROUND the control rather than a highlight OF it. --wash-rgb is the ink of a hover FILL and of the scrollbar thumb, as a bare RGB triple so every surface keeps the alpha it was tuned with - there are ten distinct ones, and collapsing them into two tokens would restyle a lot of surfaces to fix a bug about their colour. Hardcoded near-black, a hover darkened on light (right) and darkened on dark (invisible). Only the colour flips; no alpha changes. Deliberately NOT applied to the shadows, or to the chrome on .pline / .art-stack / the [data-theme="light"] card rules: those sit on an explicitly white background or are shadows, and ink is the correct colour for both in either theme. */ --line-hover:#bdb7b1; --wash-rgb:18,32,46; /* warm paper surface + one bold accent — Souqi's cyan, not a borrowed brand */ --paper:#f6f5f4; --paper-2:#ebeced; --card:#fcfcfc; --ink:#1b252b; --ink-2:#5c6062; --mut:#8a8f91; --accent:#1aa6df; --accent-2:#0f8ec4; --accent-ink:#04202e; --tint:#c7e8fa; --tint-2:#e7f5fd; --stone:#dcd8d4; --dark:#0d2338; --line:#cfc9c3; --navy-800:#0b1e33; --disp:'Jost','Century Gothic',system-ui,sans-serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --ease:cubic-bezier(.16,1,.3,1); --r-card:26px; } :root[data-theme="dark"]{ --line-hover:rgba(255,255,255,.22); --wash-rgb:255,255,255; --paper:#18191b; --paper-2:#212225; --card:#26282b; --ink:#f5f9fc; --ink-2:#9ea3a6; --mut:#7a7f82; --tint:#3d3428; --tint-2:#2d2420; --stone:#2a2c2f; --dark:#0a0908; --line:#33363a; --navy-800:#0d0b0a; --accent:#1aa6df; --accent-2:#118cc0; --accent-ink:#e6edf3; } /* NOTE: no `overflow-x` on or . Setting it forces the other axis to `auto`, which turns the root into a scroll container and silently breaks `position:sticky` — on the navbar, and on .inx-pin, where the symptom is that the whole 320vh industries section scrolls past as an empty dark band because the pinned panel never sticks. Horizontal overflow is contained at its source instead — see .bh-hero (overflow:clip) and .inx-pin (overflow:hidden). This note existed before and was overridden anyway by an `overflow-x:hidden !important` on both elements; that is what broke the scroll animation. If a horizontal scrollbar ever comes back, fix the element that actually overflows — do not reinstate a blanket clip here. */ html{background:var(--paper);overscroll-behavior-x:none;max-width:100vw;width:100%} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased; padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left);max-width:100vw;width:100%} *{-webkit-tap-highlight-color:transparent} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--disp);font-weight:600;letter-spacing:-.03em;line-height:1.04;margin:0} button{font:inherit} .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,36px)} /* ---------- reveal ---------- */ .rvl{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)} .rvl.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.rvl{opacity:1;transform:none;transition:none} .bh-sub{animation-duration:.01ms!important;animation-delay:0s!important}} /* ================= NAV (same bar as login.html) ================= */ /* `static`, exactly like login.html: the bar scrolls away with the page rather than following you down it. */ /* Layout: logo hard left, primary nav sitting immediately beside it, and account actions pushed to the far right. The links used to carry margin-left:auto, which shoved the whole set right and left a large dead gap after the logo — the nav read as one right-hand cluster instead of two balanced groups. The auto margin now lives on the right-hand group (.nav-right) instead, which is what creates the split. Taller padding and a wider link gap to match. */ .nav{position:static;z-index:40;display:flex;align-items:center;gap:34px; padding:18px clamp(18px,4vw,44px);background:var(--paper)} .brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink);flex:none} .brand img{width:34px !important;height:34px !important;border-radius:7px !important} .nav .lnk{display:flex;align-items:center;gap:6px;flex:none} /* Everything after the primary nav: language, sign in, primary CTA. */ /* margin-inline-start, NOT margin-left. This is what creates the split between the nav and the account actions, and margin-left is physical: in RTL the free space sits on the other side, so an auto LEFT margin pushes this group back toward the logo instead of away from it — which left the whole bar bunched on the right with a dead gap beside it in Arabic. The logical property flips with direction. */ .nav-right{margin-inline-start:auto;display:flex;align-items:center;gap:14px;flex:none} .ndrop{position:relative} .ntop{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font:inherit;font-size:.96rem;font-weight:500;color:var(--ink);padding:9px 10px;border-radius:9px;transition:.16s;white-space:nowrap} .ntop svg{width:12px;height:12px;opacity:.6;transition:transform .18s} .ndrop:hover .ntop{background:rgba(var(--wash-rgb),.06);color:var(--ink)} .ndrop:hover .ntop svg{transform:rotate(180deg)} /* background:var(--card), NOT #fff. It was hardcoded white while its text used var(--ink) — which is a cream on the dark theme, so the bold item titles rendered white-on-white and vanished. (The grey descriptions survived only because --mut happens to stay dark.) Using the card token means the panel follows the theme like everything else. */ .npanel{position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:252px;background:var(--card);border:1px solid var(--line);border-radius:14px; box-shadow:0 18px 46px rgba(11,30,51,.16);padding:9px;opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .16s,transform .16s,visibility .16s;z-index:60} .ndrop:hover .npanel{opacity:1;visibility:visible;transform:none} .npanel a{display:block;padding:9px 11px;border-radius:9px;text-decoration:none;color:var(--ink);font-size:.88rem;font-weight:500;cursor:pointer} .npanel a:hover{background:var(--paper-2);color:var(--ink)} .npanel a b{display:block;font-size:.9rem;color:var(--ink);font-weight:700} .npanel a small{display:block;font-size:.76rem;color:var(--mut);margin-top:1px;font-weight:400} /* auto-fit, not a hardcoded 1fr 1fr. This panel has only ONE group of links in it, so a forced two-column grid with min-width:380px gave it a second, permanently empty column — the panel rendered ~380px wide with the right half blank. auto-fit collapses to a single column when there is one child and still lays out two side by side if a second group is ever added. */ .npanel.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); min-width:auto;gap:0 6px} .npanel.cols h5{font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);font-weight:800;padding:8px 11px 4px;margin:0} /* "Sign in" is a plain text link (no box) — the bar reads calmer with a single bordered shape in it, and it makes the CTA unambiguous. */ .btn-g{padding:9px 6px;border:0;color:var(--ink);font-size:.96rem;font-weight:500;transition:.16s;white-space:nowrap} .btn-g:hover{color:var(--accent-2);background:none} /* Primary CTA is an OUTLINED pill in the accent, not a filled block: against a warm paper background a solid fill is heavy, and the outline still wins the eye because it is the only bordered element up there. */ .btn-d{padding:11px 22px;border-radius:999px;background:transparent; border:1.5px solid var(--accent);color:var(--accent-2); font-size:.96rem;font-weight:600;transition:.16s;white-space:nowrap} .btn-d:hover{background:var(--accent);color:#fff;transform:none} /* the Agent badge stays the one bold thing in the bar */ .nav-agent{display:inline-flex;align-items:center;background:var(--accent);color:#fff;border-radius:999px; padding-inline-start:14px;font-weight:700;font-size:.86rem;height:34px;margin-inline-start:6px;transition:.16s} .nav-agent:hover{background:var(--accent-2)} .nav-agent i{display:grid;place-items:center;width:22px;height:22px;margin-inline:8px 6px;border-radius:50%; background:#04202e;color:#cfeafb;font-style:normal;font-size:.74rem} /* ---- language selector: the same control login.html ships ---- Square, red-bordered, arrow hidden — kept byte-for-byte in step with login.html so the two pages never drift apart. */ .lang-dropdown{position:relative;display:inline-block;font-family:var(--disp);font-size:.85rem;z-index:9999} .lang-trigger{display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid #d0112b; border-radius:0;padding:10px 18px;color:#d0112b;font-weight:700;cursor:pointer;box-shadow:none; transition:background .16s;outline:none;user-select:none;min-width:100px} .lang-trigger *{pointer-events:none} .lang-trigger:hover{background:#fdf5f5} .lang-trigger .lang-arrow{display:none} .lang-list{position:absolute;top:100%;right:0;left:0;background:#fff;border:1px solid #111;border-top:none; border-radius:0;box-shadow:none;padding:0;margin:0;list-style:none;display:none;overflow:hidden;z-index:9999} .lang-dropdown.open .lang-list{display:block} .lang-item{padding:10px 16px;cursor:pointer;font-weight:700;text-align:center;color:#d0112b;background:#fff; transition:background .16s,color .16s} .lang-item:hover{background:#f5f5f5} .lang-item.active{background:#1e73be;color:#fff} /* ================= HERO ================= */ /* `overflow:clip` (not hidden) — the ::before glow bleeds 20% past each edge and would otherwise give the whole page a horizontal scrollbar, without turning the hero into a scroll container. */ .bh-hero{padding:clamp(48px,9vw,120px) 0 clamp(30px,5vw,60px);text-align:center;position:relative;background:var(--paper);overflow:hidden!important} .bh-hero::before{display:none!important} /* width:100% is load-bearing, and it is not the same as leaving it auto. .bh-hero is flex-direction:column, so .wrap is a COLUMN flex item and its width is the cross axis. Left at auto it sizes to its own max-content rather than to the hero, and the widest thing inside is the mode rail's eight fixed-width buttons — so on a 375px phone .wrap laid itself out at 548px, centred, and .bh-hero's overflow-x:hidden cut the overhang off. Nothing scrolled sideways to reveal it; the hero was simply 173px wider than the screen and clipped, which is why the whole landing page read as shifted rather than as overflowing. Pinning the cross size to the container is what lets the rail below shrink and start scrolling the way it was always built to. Same fix as .langs .wrap further down, which hit this first. */ .bh-hero .wrap{position:relative;z-index:5;width:100%} /* 3D Flank Device Mockups */ .bh-composer{display:block;max-width:720px;width:100%;margin:clamp(26px,4vw,42px) auto 0;position:relative;z-index:10;text-align:left} .ag-box{ /* Cyan -> violet -> PINK. The third stop used to be a deep blue, which put every hue in the ring inside one quarter of the colour wheel: the result read as a single soft blue wash rather than a spectrum, and no amount of opacity fixed that, because the problem was hue spread and not level. */ --glow-a:34,211,238; /* cyan */ --glow-b:139,92,246; /* violet */ --glow-c:236,72,153; /* pink */ --beam-a:34,211,238; --beam-b:236,72,153; --glow-alpha:1; --glow-focus:1; position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px; padding:14px 16px 10px; box-shadow: 0 0 34px -2px rgba(var(--glow-a),.22), 0 0 12px -3px rgba(var(--glow-b),.18), 0 1px 3px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.55); transition:border-color .2s,box-shadow .2s } /* Same treatment as /agent: a neutral surface so the ring's hues read true, and the third colour carried into the box-shadow so the pink is present at the rim rather than only inside the bloom. */ :root[data-theme="dark"] .ag-box{ --glow-alpha:1; /* Neutral, and a step lighter than --card's warm #2a2622. Warm brown under a cyan ring muddies it toward grey; a neutral surface lets the colour read as the colour it is. */ background:#2b2a33; border-color:rgba(255,255,255,.09); box-shadow: 0 0 40px -2px rgba(var(--glow-a),.40), 0 0 18px -4px rgba(var(--glow-b),.34), 0 0 26px -6px rgba(var(--glow-c),.30), 0 1px 3px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07); } :root[data-theme="dark"] .ag-box:focus-within{ box-shadow: 0 0 52px -2px rgba(var(--glow-a),.55), 0 0 22px -4px rgba(var(--glow-b),.44), 0 0 30px -6px rgba(var(--glow-c),.40), 0 4px 14px rgba(var(--glow-a),.22), inset 0 1px 0 rgba(255,255,255,.09); } .ag-box.power-mode, .bh-composer.power-mode{ --glow-a:225,29,72; --glow-b:251,113,133; --glow-c:159,18,57; --beam-a:225,29,72; --beam-b:251,113,133; } .ag-box:focus-within{ --glow-focus:1.35;border-color:rgb(var(--beam-a)); box-shadow: 0 0 44px -2px rgba(var(--glow-a),.34), 0 0 16px -3px rgba(var(--glow-b),.26), 0 4px 12px rgba(var(--glow-a),.12), inset 0 1px 0 rgba(255,255,255,.55) } .ag-box::before{ content:"";position:absolute;z-index:-1;pointer-events:none; inset:-72px -12px -44px;border-radius:44px; background: radial-gradient(46% 62% at 56% 52%, rgba(var(--glow-a),.66) 0%, rgba(var(--glow-c),.32) 46%, transparent 72%), radial-gradient(40% 58% at 34% 46%, rgba(var(--glow-b),.40) 0%, transparent 68%); filter:blur(22px); opacity:calc(.95 * var(--glow-alpha) * var(--glow-focus)); will-change:transform; animation:agGlowMove 9s ease-in-out infinite alternate; transition:opacity .35s var(--ease); } @keyframes agGlowMove{ 0%{transform:translate3d(0,0,0) scaleY(1)} 50%{transform:translate3d(-2px,7px,0) scaleY(1.06)} 100%{transform:translate3d(2px,-6px,0) scaleY(.96)} } @property --ag-beam-angle{syntax:'';inherits:false;initial-value:0deg} .ag-box::after{ content:"";position:absolute;inset:-1px;border-radius:17px; padding:1.5px;pointer-events:none; background:conic-gradient(from var(--ag-beam-angle) at 50% 50%, transparent 0deg,transparent 186deg, rgba(var(--beam-b),.85) 246deg, rgba(var(--beam-a),1) 300deg, rgba(var(--beam-b),.5) 330deg, transparent 360deg); -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; opacity:.7; animation:agBeamSpin 7s linear infinite; } @keyframes agBeamSpin{to{--ag-beam-angle:360deg}} .bh-composer.power-mode, .ag-box.power-mode, body.power-mode .ag-box, body.power-mode .bh-composer { --glow-a:225,29,72!important; --glow-b:251,113,133!important; --glow-c:159,18,57!important; --beam-a:225,29,72!important; --beam-b:251,113,133!important; border-color:rgba(225,29,72,.4)!important; } /* Crimson tint and border only — the LABEL stays var(--ink), the same colour "Economy" uses. Tinting the text as well as the chrome made "Power Agent" read as an error/warning state rather than a selected mode, and it lost contrast against the tinted background. */ .ag-model-pill.power-mode, .bh-mode.power-mode { background:rgba(225,29,72,.14)!important;border-color:rgba(225,29,72,.45)!important; color:var(--ink)!important; } .bh-mode.power-mode svg { stroke:#f43f5e!important; } .ag-box textarea, .bh-ta{ width:100%!important;border:0!important;outline:0!important;resize:none!important;background:transparent!important; font-family:var(--body);font-size:.98rem;line-height:1.5;color:var(--ink); min-height:48px;max-height:180px;overflow-y:auto;padding:0!important;margin:0!important;box-shadow:none!important; } .ag-box textarea::placeholder, .bh-ta::placeholder{color:var(--mut);font-weight:400} .ag-brow{display:flex;align-items:center;gap:6px;padding-top:6px} .ag-brow-sp{flex:1} .ag-attach{flex:none;width:30px;height:30px;border:1px solid var(--line);background:transparent;color:var(--ink-2); border-radius:6px;display:grid;place-items:center;cursor:pointer;transition:.15s} .ag-attach:hover{border-color:var(--line-hover);color:var(--ink)} .ag-attach svg{width:16px;height:16px} .ag-attach-chip[hidden]{display:none} .ag-attach-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper-2); border-radius:999px;padding:3px 4px 3px 3px;font-size:.78rem;font-weight:600;color:var(--ink-2);max-width:160px} .ag-attach-chip img{width:20px;height:20px;border-radius:5px;object-fit:cover;flex:none;background:#fff} .ag-attach-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ag-attach-chip button{flex:none;border:0;background:none;color:var(--mut);cursor:pointer;width:16px;height:16px;display:grid;place-items:center} .ag-attach-chip button:hover{color:var(--ink)} .ag-attach-chip button svg{width:12px;height:12px} .ag-model-wrap{position:relative;display:inline-flex;flex:none} .ag-model-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:8px; border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:.8rem;font-weight:600; cursor:pointer;transition:.16s;user-select:none} .ag-model-pill:hover{border-color:var(--line-hover);background:var(--paper-2)} .ag-model-pill svg{width:11px;height:11px;color:var(--mut);transition:transform .16s ease} .ag-model-pill.open svg{transform:rotate(180deg)} /* Anchored to the pill's RIGHT edge, not its left: the model pill now sits at the right end of the toolbar, so a left-anchored 250px panel opened off the right side of the screen on a phone (measured: right edge at 403px in a 375px viewport). min() keeps it inside the viewport on the narrowest screens, where 250px alone would still not fit. */ .ag-model-popover{position:absolute;top:calc(100% + 8px);bottom:auto;right:0;left:auto; width:min(250px,calc(100vw - 28px)); background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px; box-shadow:0 16px 40px -10px rgba(11,22,38,.45); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .16s ease,transform .16s ease,visibility .16s ease;z-index:100} .ag-model-popover.open{opacity:1;visibility:visible;transform:none} /* Flipped when there is no room below. Direction is chosen at open time (see the pill handler); CSS cannot see the available space. */ .ag-model-popover.drop-up{top:auto;bottom:calc(100% + 8px);transform:translateY(6px)} .ag-model-popover.drop-up.open{transform:none} .pop-section-ttl{font-size:.7rem;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;padding:4px 8px 6px} .pop-option{display:flex;align-items:flex-start;gap:10px;width:100%;padding:8px;border:1px solid transparent; border-radius:10px;background:none;color:var(--ink);cursor:pointer;text-align:left;transition:.14s} .pop-option:hover{background:var(--paper-2)} .pop-option.on{background:var(--paper-2);border-color:var(--line)} .pop-option .pop-text b{display:block;font-size:.84rem;font-weight:700;color:var(--ink)} .pop-option .pop-text small{display:block;font-size:.74rem;color:var(--mut);line-height:1.2;margin-top:2px} .pop-divider{height:1px;background:var(--line);margin:6px 0} .pop-switch-row{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:10px;cursor:pointer} .pop-switch-row:hover{background:var(--paper-2)} .pop-switch-row .pop-text b{display:block;font-size:.83rem;font-weight:700;color:var(--ink)} .pop-switch-row .pop-text small{display:block;font-size:.73rem;color:var(--mut);margin-top:2px} .ag-switch{position:relative;display:inline-block;width:34px;height:20px;flex:none} .ag-switch input{opacity:0;width:0;height:0} .ag-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--stone); transition:.2s;border-radius:999px} .ag-slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background:#fff; transition:.2s;border-radius:50%} .ag-switch input:checked + .ag-slider{background:#7c3aed} .ag-switch input:checked + .ag-slider:before{transform:translateX(14px)} .ag-voice-btn{flex:none;width:30px;height:30px;border:1px solid var(--line);background:transparent;color:var(--ink-2); border-radius:6px;display:grid;place-items:center;cursor:pointer;transition:.16s} .ag-voice-btn:hover{border-color:var(--line-hover);color:var(--ink)} .ag-voice-btn svg{width:15px;height:15px} .ag-voice-btn.listening{background:rgba(239,68,68,0.18);border-color:#ef4444;color:#ef4444;animation:micPulse 1.2s infinite alternate} .ag-send{flex:none;width:32px;height:32px;border:0;border-radius:8px;cursor:pointer;background:var(--stone);color:var(--ink-2);display:grid;place-items:center;transition:background .2s,color .2s,transform .16s,box-shadow .2s} .ag-send svg{width:15px;height:15px} .ag-send.live{background:var(--accent);color:#fff;box-shadow:0 2px 8px -2px rgba(26,166,223,.55)} .ag-send.live:hover{background:var(--accent-2);transform:translateY(-1px);box-shadow:0 4px 12px -2px rgba(26,166,223,.6)} .ag-send.live:active{transform:scale(.9)} .ag-send:disabled{cursor:not-allowed} /* the hand-off beat: shown under the composer while the page changes */ .bh-boot{max-width:800px;margin:14px auto 0;text-align:left;display:flex;flex-direction:column;gap:2px} /* Same [hidden]-vs-class-display trap as elsewhere in this codebase — display:flex above outranks the UA's [hidden]{display:none}, so this "build in progress" block (and its .bar i fill, which animates to 100% width unconditionally the moment it's in the DOM — CSS animations don't wait for JS) was rendering, and finishing, on every page load instead of only during an actual build hand-off. */ .bh-boot[hidden]{display:none} /* rows arrive one at a time — a step that hasn't started yet isn't shown */ .bh-bstage{display:none;align-items:center;gap:11px;padding:8px 4px;font-size:.94rem;color:var(--ink-2)} .bh-bstage.on{display:flex;opacity:0;transform:translateY(5px);animation:bootIn .3s var(--ease) forwards} @keyframes bootIn{to{opacity:1;transform:none}} .bh-bstage i{width:18px;height:18px;flex:none;border-radius:50%;border:2px solid var(--line); border-top-color:var(--accent);animation:bootSpin .7s linear infinite} @keyframes bootSpin{to{transform:rotate(360deg)}} .bh-bstage.done{color:var(--ink)} .bh-bstage.done i{border:0;background:var(--accent);position:relative;animation:none} .bh-bstage.done i::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .bh-boot .bar{height:2px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:10px} .bh-boot .bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:2px; animation:bootBar 1.45s var(--ease) forwards} @keyframes bootBar{to{width:100%}} @media (prefers-reduced-motion:reduce){ .bh-bstage.on{animation:none;opacity:1;transform:none} .bh-bstage i{animation:none} .bh-boot .bar i{animation:none;width:100%} } /* mode rail */ .bh-modes{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:22px} .bh-arrow{flex:none;width:34px;height:34px;border:0;background:none;color:var(--mut);cursor:pointer;border-radius:50%; display:grid;place-items:center;transition:.16s} .bh-arrow:hover{background:rgba(var(--wash-rgb),.06);color:var(--ink)} /* min-width:0 is what makes the overflow-x above actually do anything. This rail was already built to scroll — auto overflow, scroll snapping, a hidden scrollbar, an arrow button either side. It never did. It is a flex item of .bh-modes, flex items default to min-width:auto, and that means "do not shrink below your content". The content is eight 78px buttons at flex:none, so the rail sat at 512px however narrow the screen was, the overflow never engaged because the box was never smaller than what was in it, and .bh-hero's overflow-x:hidden clipped the result. On a 375px phone that put the last three modes past the right edge with no way to reach them — and it took the whole hero with it, because .wrap is a flex item too and inherited the 548px floor through the same rule. Everything looked shifted left because it was: the page was laid out 173px wider than the screen and then cut off. */ .bh-rail{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory; scrollbar-width:none;padding:4px;min-width:0} .bh-rail::-webkit-scrollbar{display:none} .bh-mode{scroll-snap-align:center;flex:none;width:86px;border:0;background:none;cursor:pointer;text-align:center; color:var(--ink-2);font-size:.8rem;font-weight:500;padding:0} .bh-mode i{display:grid;place-items:center;width:56px;height:52px;margin:0 auto 8px;border:1px solid var(--line); border-radius:16px;background:var(--card);color:var(--ink);transition:.18s} .bh-mode i svg{width:20px;height:20px} .bh-mode:hover i{border-color:var(--line-hover);transform:translateY(-2px)} /* Accent, not var(--ink) — matches .ag-tile.on .ic on the agent page so the two type pickers read as the same control. The old --ink fill broke on the dark theme, where --ink is a light cream: the selected tile became a near-white block with a white icon on it, so the icon effectively vanished (which is what it looked like on screen). */ .bh-mode.sel i{background:var(--accent);border-color:var(--accent);color:#fff; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent),0 4px 14px -4px color-mix(in srgb,var(--accent) 65%,transparent)} .bh-mode.sel{color:var(--ink);font-weight:600} /* examples */ .bh-try{margin-top:30px;font-size:.88rem;color:var(--ink-2);display:inline-flex;align-items:center;gap:8px} .bh-try button{border:0;background:none;cursor:pointer;color:var(--ink-2);display:grid;place-items:center; width:26px;height:26px;border-radius:50%;transition:.16s} .bh-try button:hover{background:rgba(var(--wash-rgb),.07);color:var(--ink);transform:rotate(90deg)} .bh-ex{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px} .bh-ex button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:10px 18px; font-size:.9rem;font-weight:500;color:var(--ink);cursor:pointer;transition:.16s} .bh-ex button:hover{border-color:var(--line-hover);background:var(--tint-2);transform:translateY(-1px)} @keyframes scFade{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}} @keyframes prodIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ---------- scroll-driven 8-industries showcase ---------- */ @property --c{syntax:'';inherits:true;initial-value:#12a594} .inx{position:relative;height:320vh;background:#06111d;color:#fff;--c:#12a594} .inx-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center} .inx-bg{position:absolute;inset:0;pointer-events:none;transition:--c .7s var(--ease); background: radial-gradient(46% 55% at 76% 42%, color-mix(in srgb, var(--c) 55%, transparent), transparent 62%), radial-gradient(60% 60% at 12% 92%, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%), linear-gradient(160deg,#0a1a2b,#06111d 70%)} .inx-grain{position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:46px 46px;-webkit-mask-image:radial-gradient(70% 70% at 60% 50%,#000,transparent 80%);mask-image:radial-gradient(70% 70% at 60% 50%,#000,transparent 80%)} .inx-inner{position:relative;z-index:1;width:100%} .inx-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(18px,4vh,40px)} .inx-eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 55%,#fff)} .inx-count{font-family:var(--disp);font-size:1rem;color:#8ba6bd;font-variant-numeric:tabular-nums} .inx-count b{font-size:1.5rem;font-weight:800;color:#fff} .inx-count em{font-style:normal;margin-left:4px} .inx-main{display:grid;grid-template-columns:minmax(0,1fr) clamp(258px,30vw,342px);gap:clamp(24px,4vw,56px);align-items:center} .inx-left{min-width:0}.inx-right{min-width:0} .inx-name-wrap{overflow:hidden;padding-bottom:.06em} .inx-name{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:.94;margin:0; font-size:clamp(2.4rem,6.6vw,5.9rem);text-wrap:balance; color:transparent;background:linear-gradient(120deg,#fff 30%, color-mix(in srgb,var(--c) 75%,#fff));-webkit-background-clip:text;background-clip:text} .inx-name.swap{animation:inxUp .7s var(--ease)} @keyframes inxUp{0%{opacity:0;transform:translateY(.5em) rotate(1.5deg)}100%{opacity:1;transform:none}} .inx-tag{margin:clamp(14px,2.4vh,26px) 0 0;font-size:clamp(1rem,1.5vw,1.35rem);line-height:1.5;color:#c6d8e8;max-width:34ch} .inx-tag.swap{animation:scFade .6s var(--ease)} .inx-cta{display:inline-flex;align-items:center;justify-content:center;text-align:center;margin-top:clamp(18px,3vh,30px);padding:13px 22px;border-radius:12px;font-weight:700;font-size:.95rem;color:#06131f;text-decoration:none; background:color-mix(in srgb,var(--c) 78%,#fff);box-shadow:0 12px 30px color-mix(in srgb,var(--c) 45%,transparent);transition:--c .7s var(--ease),transform .18s,background .18s;white-space:nowrap} .inx-cta:hover{transform:translateY(-2px)} /* themed storefront card */ .inx-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);color:var(--ink); max-width:342px;width:100%;margin-left:auto;transform:rotate(-1.4deg);transition:transform .5s var(--ease)} .inx-pin:hover .inx-card{transform:rotate(0deg)} .inx-card-bar{display:flex;align-items:center;gap:6px;padding:10px 13px;background:linear-gradient(180deg,#fbfdff,#eef4f9);border-bottom:1px solid var(--line)} .inx-card-bar i{width:9px;height:9px;border-radius:50%} .inx-card-bar .d1{background:#ff6b6b}.inx-card-bar .d2{background:#ffce5c}.inx-card-bar .d3{background:#34c77b} .inx-url{margin-left:8px;font-size:.72rem;color:#8295a8;font-weight:500} .inx-url .inx-host{color:var(--c);font-weight:800;transition:--c .7s var(--ease)} .inx-card-hero{padding:20px 18px;color:#fff;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 55%,#0b1e33));transition:--c .7s var(--ease)} .inx-kick{font-size:.58rem;font-weight:800;letter-spacing:.14em;opacity:.85} .inx-ctag{display:block;font-family:var(--disp);font-weight:800;font-size:1.2rem;margin-top:5px} .inx-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px} .inx-prod{border:1px solid var(--line);border-radius:9px;padding:9px;min-width:0} .inx-prod .ph{height:44px;border-radius:6px;background:color-mix(in srgb,var(--c) 15%,#fff);border:1px solid color-mix(in srgb,var(--c) 24%,#fff);transition:--c .7s var(--ease)} .inx-prod .pn{font-size:.72rem;font-weight:600;color:var(--ink);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inx-prod .pp{font-size:.72rem;color:var(--c);font-weight:800;margin-top:2px;transition:--c .7s var(--ease)} .inx-card-grid.swap .inx-prod{animation:prodIn .5s var(--ease) both} .inx-card-grid.swap .inx-prod:nth-child(2){animation-delay:.07s}.inx-card-grid.swap .inx-prod:nth-child(3){animation-delay:.14s} /* progress dots */ .inx-dots{display:flex;gap:9px;margin-top:clamp(20px,4vh,44px)} .inx-dots button{width:26px;height:5px;border-radius:5px;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.18);transition:background .3s,width .3s} .inx-dots button.on{background:color-mix(in srgb,var(--c) 80%,#fff);width:46px} .inx.static{height:auto}.inx.static .inx-pin{position:static;height:auto;padding:clamp(52px,7vw,90px) 0} @media (max-width:860px){ .inx{height:320vh} .inx-top{margin-bottom:14px;align-items:center} .inx-eyebrow{font-size:clamp(.65rem,2.7vw,.76rem);letter-spacing:.09em;white-space:nowrap} .inx-count{font-size:.88rem;white-space:nowrap;display:inline-flex;align-items:center;gap:3px} .inx-count b{font-size:1.25rem} .inx-main{display:flex;flex-direction:column;gap:8px} .inx-left{display:contents} .inx-name-wrap{order:1;height:135px;min-height:135px;display:flex;align-items:center;overflow:hidden} .inx-name{font-size:clamp(2.8rem,13.5vw,5rem);line-height:.92;letter-spacing:-.035em} .inx-tag{order:2;height:2.6em;min-height:2.6em;margin-top:4px;font-size:clamp(.9rem,3.4vw,1.1rem);line-height:1.35;display:flex;align-items:center} .inx-right{order:3;max-width:340px;margin:6px auto 0;width:100%} .inx-cta{order:4;margin-top:14px;width:100%;max-width:340px;margin-left:auto;margin-right:auto;font-size:clamp(.78rem,3.8vw,.9rem);padding:13px 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-content:center;box-sizing:border-box} } @media (prefers-reduced-motion:reduce){ .inx{height:auto}.inx .inx-pin{position:static;height:auto;padding:clamp(52px,7vw,90px) 0} .inx-bg,.inx-card-hero,.inx-host,.inx-prod .ph,.inx-prod .pp,.inx-cta{transition:none} } /* ================= LANGUAGE ================= */ .langs{min-height:70vh;display:flex;align-items:center;padding:clamp(40px,6vw,80px) 0;text-align:center; background:linear-gradient(180deg,var(--paper-2),var(--paper))} .langs .wrap{width:100%} .speaks-h{font-family:var(--disp);font-weight:800;color:var(--ink);letter-spacing:-.025em;line-height:1; font-size:clamp(2.4rem,6vw,4.8rem)} .speaks-word{display:block;margin-top:.06em;font-size:clamp(4rem,17vw,13rem);line-height:.86;color:var(--sw,var(--accent)); letter-spacing:-.04em;will-change:transform,opacity;transition:color .3s var(--ease)} .speaks-word.swap{animation:speakSwap .5s var(--ease)} @keyframes speakSwap{0%{opacity:0;transform:translateY(.34em);filter:blur(7px)}100%{opacity:1;transform:none;filter:blur(0)}} @media (prefers-reduced-motion:reduce){.speaks-word.swap{animation:none}} .langs .lead{color:var(--ink-2);margin:14px auto 0;max-width:56ch;font-size:1.04rem;line-height:1.55} @media (max-width:640px){ .langs{min-height:auto;padding:56px 0} .langs .speaks-h{font-size:clamp(2rem,9vw,3rem)} .langs .speaks-word{font-size:clamp(3.4rem,20vw,6rem)} } /* ================= QUOTE + STATS (blue-themed, not login's black/cream) ================= */ .plain-quote{padding:clamp(28px,4vw,44px) 0 0} .pq-card{background:linear-gradient(155deg,var(--navy-800),var(--dark));border-radius:28px;padding:clamp(40px,6vw,72px) clamp(28px,5vw,56px);max-width:1180px;margin:0 auto} .pq-card blockquote{margin:0;font-family:var(--disp);font-weight:500;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.4;color:#fff;letter-spacing:-.01em;max-width:32ch} .pq-by{margin-top:22px;font-weight:700;color:#fff;font-size:1rem} .pq-role{margin-top:3px;color:var(--tint);font-size:.9rem} .plain-stats{padding:clamp(56px,8vw,100px) 0} .plain-stats h2{font-size:clamp(2rem,4.4vw,3.3rem);color:var(--ink);font-weight:800} .ps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px} .ps-card{background:var(--tint-2);border:1px solid var(--tint);border-radius:18px;padding:40px 34px 44px} .ps-num{font-family:var(--disp);font-weight:700;font-size:clamp(2.1rem,4.4vw,3.3rem);color:var(--accent-2);letter-spacing:-.02em;line-height:1;margin-bottom:12px} .ps-label{font-size:.98rem;color:var(--ink-2);line-height:1.5} @media (max-width:860px){.ps-card{padding:28px 22px}} @media (max-width:600px){ .ps-grid{gap:8px;margin-top:30px} .ps-card{padding:16px 9px 18px;border-radius:13px} .ps-num{font-size:clamp(1rem,5.4vw,1.7rem);margin-bottom:6px} .ps-label{font-size:.66rem;line-height:1.32} } /* ================= SECTION HEADS ================= */ .bh-sec{padding:clamp(50px,7vw,90px) 0} .bh-sec-h{text-align:center;font-size:clamp(2.1rem,5.4vw,3.6rem);font-weight:600} .bh-sec-h em{font-style:normal;color:var(--accent)} .bh-sec-sub{text-align:center;color:var(--ink-2);font-size:clamp(1rem,2vw,1.2rem);margin-top:14px} /* ================= BENTO ================= */ .bh-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:clamp(32px,5vw,54px)} .bento{position:relative;overflow:hidden;padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;border:1px solid rgba(255,255,255,0.08);box-shadow:0 20px 40px rgba(0,0,0,0.25)} .bento .eyebrow{font-size:.88rem;color:#38bdf8;font-weight:600;margin-bottom:10px} .bento h3{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:700;color:#ffffff;line-height:1.1} .bento p{margin:16px 0 0;font-size:.98rem;line-height:1.6;color:#cbd5e1;max-width:42ch} .b-a{grid-column:span 7;background:linear-gradient(145deg, #1e293b 0%, #0f172a 100%)!important;color:#f8fafc!important;border-radius:300px 26px 26px 300px; padding-inline-start:clamp(28px,5vw,84px);min-height:400px;flex-direction:row;gap:28px;align-items:center} .b-a .b-copy{flex:1;min-width:0} .b-b{grid-column:span 5;background:linear-gradient(145deg, #1e1b4b 0%, #0f172a 100%)!important;color:#f8fafc!important;border-radius:26px;justify-content:flex-end;min-height:400px} .b-b .eyebrow{color:#c084fc!important} .b-c{grid-column:span 5;background:linear-gradient(145deg, #090d16 0%, #1e293b 100%)!important;color:#f8fafc!important;border-radius:26px;justify-content:flex-end;min-height:400px} .b-c .eyebrow{color:#34d399!important} .b-d{grid-column:span 7;background:linear-gradient(145deg, #0284c7 0%, #0369a1 100%)!important;color:#ffffff!important;border-radius:26px 300px 26px 300px; padding-inline-end:clamp(28px,5vw,84px);justify-content:center;min-height:400px} .b-d .eyebrow{color:#bae6fd!important} .b-d h3{color:#ffffff!important} .b-d p{color:#f0f9ff!important;opacity:0.95} /* The four gradients above came in with commit d079182 ("rich dark glassmorphism"), which replaced the theme tokens --tint / --stone / --dark / --accent with hardcoded colours AND !important. Two consequences: .b-a stopped being the light blue card it used to be, and the whole grid stopped responding to the theme at all — it stayed dark even on the light theme, where it sits on #faf7f2 paper. These restore the light theme to the original token palette while leaving the dark theme exactly as that commit designed it. They need !important only because the rules above use it. */ :root[data-theme="light"] .b-a{ background:linear-gradient(145deg,var(--tint) 0%,#dff1fb 100%)!important;color:var(--ink)!important} :root[data-theme="light"] .b-b{ background:linear-gradient(145deg,var(--stone) 0%,#efece5 100%)!important;color:var(--ink)!important} :root[data-theme="light"] .b-c{ background:linear-gradient(145deg,var(--dark) 0%,#16304a 100%)!important;color:#eef4f9!important} :root[data-theme="light"] .b-d{ background:linear-gradient(145deg,var(--accent) 0%,var(--accent-2) 100%)!important;color:var(--accent-ink)!important} /* Card chrome is tuned for a dark surface; on the two light cards a white hairline and a heavy shadow read as a rendering artifact. */ :root[data-theme="light"] .b-a, :root[data-theme="light"] .b-b{ border-color:rgba(18,32,46,.08);box-shadow:0 18px 36px rgba(18,32,46,.10)} :root[data-theme="light"] .b-a .eyebrow{color:var(--accent-2)!important} :root[data-theme="light"] .b-a h3, :root[data-theme="light"] .b-b h3{color:var(--ink)!important} :root[data-theme="light"] .b-a p, :root[data-theme="light"] .b-b p{color:var(--ink-2)!important} :root[data-theme="light"] .b-d .eyebrow{color:var(--accent-ink)!important;opacity:.72} :root[data-theme="light"] .b-d h3{color:var(--accent-ink)!important} :root[data-theme="light"] .b-d p{color:var(--accent-ink)!important;opacity:.88} [dir="rtl"] .b-a{border-radius:26px 300px 300px 26px} [dir="rtl"] .b-d{border-radius:300px 26px 300px 26px} @media (max-width:1080px){[dir="rtl"] .b-a,[dir="rtl"] .b-d{border-radius:26px}} /* storefront mock inside card A */ .mock{flex:none;width:min(300px,42%);display:flex;flex-direction:column;gap:9px} .mock-bar{background:#ffffff!important;border-radius:12px;padding:11px 13px;display:flex;align-items:center;gap:9px; font-size:.82rem;color:#0f172a!important;font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,0.15);border:1px solid #e2e8f0} .mock-row{display:flex;gap:9px} .mock-row .mock-bar{flex:1} .mock-btn{background:#0284c7!important;color:#ffffff!important;border-radius:12px;padding:11px 13px;display:flex;align-items:center; gap:8px;font-size:.82rem;font-weight:700;flex:1;box-shadow:0 4px 12px rgba(2,132,199,0.3)} .mock-prod{background:#ffffff!important;border-radius:12px;padding:11px;display:flex;gap:11px;align-items:center; box-shadow:0 4px 12px rgba(0,0,0,0.15);border:1px solid #e2e8f0;color:#0f172a!important} .mock-prod .ph{width:40px;height:40px;flex:none;border-radius:9px;background:#0f172a!important;display:grid;place-items:center;color:#94a3b8!important} .mock-prod b{display:block;font-size:.84rem;font-weight:700;color:#0f172a!important} .mock-prod i{display:block;font-style:normal;font-size:.8rem;color:#0284c7!important;font-weight:700} .mock-prod small{display:block;font-size:.72rem;color:#64748b!important;line-height:1.35;margin-top:2px} .mock svg{width:14px;height:14px;flex:none} /* wireframe strip inside card C */ .wire{display:flex;gap:11px;margin-bottom:auto} .wire div{border:1px solid rgba(255,255,255,.28);border-radius:12px;height:150px;display:grid;place-items:center;color:rgba(255,255,255,.5)} .wire .w1{flex:1.4}.wire .w2{flex:.7}.wire .w3{flex:1.8} .wire svg{width:26px;height:26px} .wire .bars{display:flex;align-items:flex-end;gap:3px;height:34px} .wire .bars i{display:block;width:3px;background:rgba(255,255,255,.45);border-radius:2px} /* progress rows inside card B — Live Engine simulation */ .plines{margin-bottom:auto;display:flex;flex-direction:column;gap:10px} .pline{background:rgba(255,255,255,.6);border:1px solid rgba(18,32,46,.08);border-radius:11px;padding:10px 13px;font-size:.84rem; display:flex;align-items:center;gap:10px;color:var(--ink);transition:all .32s var(--ease);position:relative;overflow:hidden} .pline.active-engine{background:#fff;border-color:rgba(56,189,248,.5);box-shadow:0 4px 16px rgba(56,189,248,.22),0 0 0 1px rgba(56,189,248,.3);transform:translateX(4px)} .pline.done-engine{background:rgba(255,255,255,.9);border-color:rgba(34,197,94,.3)} .pline .dot{width:8px;height:8px;border-radius:50%;background:#94a3b8;flex:none;transition:all .3s ease} .pline.active-engine .dot{background:#38bdf8;box-shadow:0 0 0 4px rgba(56,189,248,.25),0 0 10px #38bdf8;animation:engineDotPulse .8s ease-in-out infinite alternate} .pline.done-engine .dot{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.5)} @keyframes engineDotPulse{from{transform:scale(.85);opacity:.6}to{transform:scale(1.25);opacity:1}} .pline .bar{margin-left:auto;width:68px;height:6px;border-radius:99px;background:rgba(18,32,46,.1);overflow:hidden;position:relative;flex:none} .pline .bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#2563eb,#38bdf8,#818cf8);border-radius:99px; transition:width .4s var(--ease),background .3s;box-shadow:0 0 8px rgba(56,189,248,.5);position:relative} .pline.done-engine .bar i{width:100%!important;background:linear-gradient(90deg,#16a34a,#22c55e);box-shadow:0 0 8px rgba(34,197,94,.4)} .pline.active-engine .bar i::after{content:"";position:absolute;top:0;bottom:0;left:-100%;width:60%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);animation:engineBeam 1.2s ease-in-out infinite} @keyframes engineBeam{0%{left:-100%}100%{left:200%}} /* These rows hardcoded white backgrounds (rgba(255,255,255,.6), and #fff when active) while their text stayed var(--ink). That is fine on the light theme, but --ink is a near-white cream on dark, so the rows rendered as white pills with cream text on them — effectively unreadable. Tint from the state colour instead of painting white, so the active/done states still read at a glance. */ :root[data-theme="dark"] .pline{ background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10)} :root[data-theme="dark"] .pline.active-engine{ background:rgba(56,189,248,.12);border-color:rgba(56,189,248,.45); box-shadow:0 4px 16px rgba(56,189,248,.16),0 0 0 1px rgba(56,189,248,.28)} :root[data-theme="dark"] .pline.done-engine{ background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.32)} :root[data-theme="dark"] .pline .bar{background:rgba(255,255,255,.13)} /* The sweep is a white gradient — at .95 it blows out over a dark row. */ :root[data-theme="dark"] .pline.active-engine .bar i::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)} /* team avatars inside card D */ .team{display:flex;margin-bottom:24px} .team span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:.9rem; background:#04202e;color:#cfeafb;border:2px solid var(--accent)} .team span{margin-inline-start:-10px} .team span:first-child{margin-inline-start:0} /* ================= PLATFORM CARDS ================= */ .bh-plat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(32px,5vw,54px)} /* min-width:0 — grid items default to min-width:auto, so a track can't shrink below its content's min-content width and the whole .bh-plat grid blows past its container on narrow screens (measured: 131+164+10 = 305px of tracks inside a 278px box), which is a real horizontal scrollbar on the page. Same fix as .inx-left/.inx-right above. This used to be masked by an overflow-x:hidden on html/body, which also broke every position:sticky on the page — see the note there. */ .plat{border-radius:var(--r-card);padding:clamp(22px,2vw,30px);display:flex;flex-direction:column;min-height:440px;min-width:0} .plat .eyebrow{font-size:.9rem;opacity:.72} .plat h3{font-size:clamp(1.4rem,2.2vw,1.72rem);margin-top:12px;font-weight:600;line-height:1.12} .plat p{font-size:.92rem;line-height:1.6;opacity:.85;margin:auto 0 0} .plat .art{margin:26px 0;display:grid;place-items:center;min-height:150px} .p1{background:var(--card);border:1px solid var(--line)} .p2{background:var(--stone)} .p3{background:var(--tint)} .p4{background:var(--accent);color:#04202e} /* art bits */ .art-ring{position:relative;width:100%;max-width:210px;aspect-ratio:1;display:grid;place-items:center} .art-ring::before{content:"";position:absolute;inset:14%;border:1.5px dashed rgba(26,166,223,.55);border-radius:50%} .art-note{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:.78rem; position:absolute;top:0;left:6%;box-shadow:0 4px 12px rgba(18,32,46,.07)} .art-pub{position:absolute;bottom:8%;right:0;background:var(--accent);color:#fff;border-radius:999px;padding:9px 16px; font-size:.8rem;font-weight:600;display:inline-flex;align-items:center;gap:7px} .art-stack{border:1.5px solid var(--accent);border-radius:14px;padding:9px;display:flex;flex-direction:column;gap:7px;width:100%;max-width:180px} .art-stack b{display:block;background:#fff;border:1px solid rgba(18,32,46,.14);border-radius:9px;padding:9px; font-size:.8rem;font-weight:500;text-align:center} .art-net{position:relative;width:100%;max-width:200px;height:150px} .art-net .n{position:absolute;background:#fff;border-radius:12px;width:40px;height:40px;display:grid;place-items:center; font-size:.82rem;font-weight:600;box-shadow:0 3px 10px rgba(18,32,46,.09)} /* These three are WHITE boxes that never set their own text colour, so they inherited it from the card. That was fine while the cards used var(--ink) — then d079182 set the cards to color:#f8fafc!important for the dark glassmorphism look, and every one of these became white text on a white fill, i.e. invisible ("Make my idea real", the Auth / Database / Hosting / Audit trail rows, the AI / QR nodes). A light fill has to state its own ink rather than inherit it. */ .art-note, .art-stack b, .art-net .n{color:var(--ink)} .art-stack b{color:var(--ink-2)} .art-net .core{background:var(--accent);color:#fff;width:52px;height:52px;border-radius:15px;left:38%;top:36%} .art-net .n1{left:0;top:6%}.art-net .n2{right:0;top:0}.art-net .n3{right:4%;bottom:0} .art-net svg{position:absolute;inset:0;width:100%;height:100%} .art-shield{width:120px;height:136px;display:grid;place-items:center;border:2px solid rgba(4,32,46,.4); border-radius:16px 16px 60px 60px;color:rgba(4,32,46,.6)} .art-shield svg{width:34px;height:34px} /* ================= TESTIMONIALS ================= */ .bh-quotes{display:grid;grid-template-columns:300px 1fr 320px;gap:16px;align-items:start} .q-lab{background:var(--paper-2);border-radius:var(--r-card);padding:26px} .q-lab h3{font-size:1.8rem;font-weight:600} .q-lab small{display:block;color:var(--ink-2);margin-top:8px;font-size:.88rem} .q-card{background:var(--card);border-radius:var(--r-card);padding:clamp(26px,3vw,44px);min-height:330px; display:flex;flex-direction:column} .q-mark{font-family:var(--disp);font-size:2.6rem;line-height:1;color:var(--tint);margin-bottom:12px} .q-text{font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.42;font-family:var(--disp);font-weight:400;letter-spacing:-.02em} .q-who{margin-top:auto;padding-top:26px;font-size:.9rem} .q-who b{display:block;font-weight:600} .q-who span{display:block;color:var(--ink-2)} .q-side{display:grid;grid-template-columns:1fr 1fr;gap:16px} .q-nav{background:var(--tint);border-radius:var(--r-card);border:0;cursor:pointer;padding:20px;text-align:left; font-size:.92rem;font-weight:500;color:var(--ink);min-height:120px;display:flex;flex-direction:column; justify-content:space-between;transition:.16s;font-family:var(--body)} .q-nav:hover{background:var(--accent);color:#fff} .q-nav svg{width:20px;height:20px} .q-av{border-radius:var(--r-card);min-height:120px;display:grid;place-items:center;font-family:var(--disp); font-size:1.7rem;font-weight:600;background:var(--stone);color:var(--ink)} .q-av.on{background:var(--accent);color:#fff} .q-dots{display:flex;gap:7px;justify-content:center;margin-top:22px} .q-dots i{width:7px;height:7px;border-radius:50%;background:#cdd6de;transition:.2s} .q-dots i.on{background:var(--accent);width:20px;border-radius:4px} /* ================= FINAL CTA ================= */ .bh-end{padding:clamp(70px,10vw,140px) 0;text-align:center} .bh-end h2{font-size:clamp(2.2rem,5.6vw,3.8rem);font-weight:600} .bh-big{display:inline-block;margin-top:38px;background:var(--accent);color:#fff;border-radius:999px; padding:24px 58px;font-size:clamp(1.05rem,2vw,1.32rem);font-weight:600;transition:.18s; box-shadow:0 10px 30px rgba(26,166,223,.28)} .bh-big:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 16px 40px rgba(26,166,223,.34)} /* ================= FOOTER ================= */ .bh-foot{border-top:1px solid var(--line);padding:clamp(44px,6vw,72px) 0 40px} .bh-foot .grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:34px} .bh-foot .bh-brand{display:inline-flex;align-items:center;gap:14px;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1} .bh-foot .bh-brand img{width:44px;height:44px;flex:none} .bh-foot h5{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);font-weight:600;margin:0 0 14px} .bh-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .bh-foot li a{font-size:.95rem;color:var(--ink-2)} .bh-foot li a:hover{color:var(--accent-2)} .bh-legal{margin-top:46px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px; justify-content:space-between;font-size:.84rem;color:var(--mut)} /* ================= RESPONSIVE ================= */ @media (max-width:1080px){ /* same rule login.html uses: the dropdown row drops out, brand + language + the two buttons stay */ .nav .lnk{display:none} /* two bento cards per row all the way down to phones — same colours, same 26px shape, just half-width columns */ .bh-bento{gap:14px} .b-a,.b-b,.b-c,.b-d{grid-column:span 6;min-height:0;border-radius:26px} .b-a{flex-direction:column;align-items:stretch;border-radius:26px;padding-inline-start:clamp(28px,3.4vw,48px)} .mock{width:100%} .bh-plat{grid-template-columns:repeat(2,1fr)} .bh-quotes{grid-template-columns:1fr} .q-side{grid-template-columns:repeat(4,1fr)} } @media (max-width:640px){ .nav{gap:4px;padding:11px 10px} .brand{font-size:1rem;gap:6px;flex:0 1 auto;min-width:0} .brand>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* same small-screen treatment login.html gives it */ .lang-dropdown{display:inline-block} .nav .lang-trigger{min-width:0;padding:8px 8px;font-size:.78rem} .nav-right{gap:8px} .nav .btn-g{margin-inline-start:auto} .nav .btn-g,.nav .btn-d{padding:8px 8px;font-size:.72rem;line-height:1.15;text-align:center;white-space:normal;max-width:80px;flex:none} .nav .btn-d{padding-inline:10px} .bh-hero{padding-top:38px} .bh-composer{border-radius:18px;padding:15px 15px 10px} .bh-arrow{display:none} .bh-rail{justify-content:flex-start;padding:4px 2px} .bh-mode{width:78px} .bh-mode i{width:52px;height:48px} /* auto-fit, not a fixed 2 — a hard repeat(2,1fr) here gave each card ~172px on a 390px phone, and after .plat's own padding that left ~128px of text, so headings wrapped one word per line ("Connect / To AI / & / Services."). auto-fit drops to a single column as soon as two 232px tracks stop fitting, and keeps two wherever they do. */ .bh-plat{grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:10px} .plat{min-height:0;padding:18px} .q-side{grid-template-columns:repeat(2,1fr)} .bh-foot .grid{grid-template-columns:1fr 1fr} .bh-foot .brandcol{grid-column:span 2} .bh-big{padding:20px 44px;width:100%} /* the bento stays 2-up here, so its insides scale to the narrower column — nothing about the cards' colour, radius or content changes */ .bh-bento{gap:10px} .bento{padding:16px} .bento h3{font-size:clamp(1.05rem,4.6vw,1.5rem)} .bento .eyebrow{font-size:.68rem;margin-bottom:6px} .bento p{font-size:.76rem;margin-top:10px} .b-a{padding-inline-start:16px;gap:14px} .b-d{padding-inline-end:16px} .mock{gap:6px} .mock-bar,.mock-btn,.mock-prod{padding:8px;font-size:.68rem;border-radius:9px} .mock-row{flex-direction:column} .mock-prod .ph{width:28px;height:28px} .mock-prod b,.mock-prod i{font-size:.68rem} .mock-prod small{display:none} .pline{padding:8px 10px;font-size:.7rem;gap:6px} .pline .bar{width:32px} .team span{width:32px;height:32px;font-size:.7rem} .wire{gap:6px}.wire div{height:74px}.wire svg{width:18px;height:18px} /* touch targets: the composer controls grow to ~44px on phones */ .bh-plus{width:42px;height:42px} .bh-send{height:44px;min-width:44px} } /* THE FIRST SCREEN IS THE HERO, ALL OF IT. The hero is sized by its content — headline, composer, mode rail, examples — which comes to about 620px however big the screen is. On a laptop that already left the dark industries strip showing above the fold; on an iPad it was half the screen. Measured on an iPad Pro in portrait: paper ended at 660px of a 1366px viewport, so the page opened half warm white and half dark band, with nothing having been scrolled. min-height, so it can only ever GROW to the screen — a short window, or a phone where the content is already taller, is untouched. svh, and only where svh exists. 100vh on iOS is the LARGE viewport (toolbars collapsed), so a vh hero is taller than the screen it is meant to fit and pushes its own composer under the keyboard — that is what the rule this replaces was written to undo, and why there is no vh fallback here: a browser too old for svh keeps the content-sized hero it has today. 100svh is the viewport with the toolbars OUT, so it fits on arrival and does not resize under the scroll. The nav above is in flow, static and ~78px, so paper covers the fold with the nav's height to spare — which is the point. The dark strip starts just under it, and you have to scroll to reach it. */ @supports (height:100svh){ .bh-hero{ min-height:100svh; /* Centred rather than parked at the top: on a portrait tablet the extra room is ~700px, and all of it piling up under the examples reads as a page that failed to load its next section. The padding stays as the minimum, so nothing moves on screens that were already full. */ display:flex;flex-direction:column;justify-content:center; /* Optically centred, which is a little above the middle — the eye reads a dead-centred block as sagging. The extra room goes under the content as padding, so the centring does the shifting; max() means a short window keeps exactly the padding it has now. */ padding-bottom:max(clamp(30px,5vw,60px),12svh); } } /* Smaller on a phone. 250px of panel plus two paddings is most of a 351px screen, and the descriptions do not need that much room to be readable at this size. */ @media (max-width:480px){ .ag-model-popover{width:min(216px,calc(100vw - 24px));padding:6px;border-radius:12px} .pop-section-ttl{padding:3px 6px 4px;font-size:.66rem} .pop-option{padding:7px 6px;gap:8px} .pop-option .pop-text b{font-size:.8rem} .pop-option .pop-text small{font-size:.7rem} }