*,*::before,*::after{box-sizing:border-box} :root{ --navy-900:#081522; --navy-800:#0b1e33; --navy-700:#102a45; --navy-600:#163655; --accent:#1aa6df; --accent-2:#63d0ff; --accent-ink:#0d5f86; --accent-wash:#e7f5fc; --green:#5cb12f; --gold:#c89a3c; --ink:#0e2136; --ink2:#4d5f74; --mut:#6b7a90; /* --card is what surfaces that sit ON the page use (the nav dropdowns, for one). It only existed in the dark block, so anything reaching for it in light mode got nothing and had to hardcode #fff — which is how the dropdowns ended up white in dark mode with light text on them. */ --paper:#ffffff; --paper2:#f5f9fc; --card:#fcfcfc; --cool:#eef4f9; --line:#e4ecf4; --disp:'Jost','Century Gothic','Futura',system-ui,sans-serif; --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --ease:cubic-bezier(.16,1,.3,1); --ease2:cubic-bezier(.22,.61,.36,1); } :root[data-theme="dark"]{ /* This page spells it --paper2; the shared dark palette spells it --paper-2. Both are set so a rule written either way still resolves instead of silently falling back to transparent. */ --paper:#18191b; --paper-2:#212225; --paper2:#24211e; --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; } /* Prevent the white gutter that shows up on iOS "rubber-band" overscroll (or any accidental horizontal overflow): clip + hidden together, an explicit background on itself, and overscroll-behavior-x so the page can't bounce sideways at all. */ html{overflow-x:clip;overflow-x:hidden;background:var(--paper);overscroll-behavior-x:none;width:100%;max-width:100vw} body{margin:0;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left);background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;overscroll-behavior-x:none;width:100%;max-width:100vw} * { -webkit-tap-highlight-color: transparent; } h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.025em;line-height:1.06;margin:0;font-weight:800} a{text-decoration:none;color:inherit} .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px)} /* ---------- reveal system ---------- */ .rvl{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)} .rvl.in{opacity:1;transform:none} .rvl-s{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)} .rvl-s.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.rvl,.rvl-s{opacity:1;transform:none;transition:none}} /* ---------- nav ---------- */ /* Padding matches home.html's nav exactly (18px / clamp(18px,4vw,44px)) so the bar sits in the same place on both pages — moving between them should not nudge the header up and in. */ .nav{position:static;z-index:40;display:flex;align-items:center;gap:34px;padding:18px clamp(18px,4vw,44px); background:#0d2338} .brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:1.1rem;color:#fff} /* Same arrangement as home: links sit beside the brand, and the actions are pushed right by the first of them. margin-left:auto here instead shoved the links rightwards and dragged the actions along behind them, so the whole group floated mid-bar. */ .nav .lnk{display:flex;align-items:center;gap:6px;flex:none} .nav .lang-dropdown{margin-inline-start:auto} .ndrop{position:relative} .ntop{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;font:inherit;font-size:.88rem;font-weight:500;color:#b9cde0;padding:9px 12px;border-radius:9px;transition:.16s} .ntop svg{width:12px;height:12px;opacity:.6;transition:transform .18s} .ndrop:hover .ntop{background:rgba(255,255,255,.09);color:#fff} .ndrop:hover .ntop svg{transform:rotate(180deg)} /* var(--card), not #fff: the panel has to follow the theme or its text, which is var(--ink), goes light-on-white in dark mode. */ .npanel{position:absolute;top:calc(100% + 8px);left: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(--paper2);color:var(--navy-800)} .npanel a b{display:block;font-size:.9rem;color:var(--navy-800);font-weight:700} .npanel a small{display:block;font-size:.76rem;color:var(--mut);margin-top:1px;font-weight:400} .npanel.cols{display:grid;grid-template-columns:1fr 1fr;min-width:380px;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} .btn-g{padding:9px 15px;border:1px solid rgba(255,255,255,.22);border-radius:10px;color:#e7f0f8;font-size:.86rem;font-weight:600;transition:.16s} .btn-g:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08)} .btn-d{padding:9px 17px;border-radius:10px;background:var(--accent);color:#04121d;font-size:.86rem;font-weight:700;transition:.16s} .btn-d:hover{background:#3bb8ea;transform:translateY(-1px)} /* ---------- hero ---------- */ .hero{position:relative;padding:clamp(40px,6vw,86px) 0 clamp(30px,4vw,52px);overflow:hidden} .hero::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;z-index:0;pointer-events:none; background:radial-gradient(55% 60% at 78% 18%,rgba(26,166,223,.20),transparent 60%), radial-gradient(48% 55% at 12% 6%,rgba(92,177,47,.12),transparent 58%); animation:drift 16s ease-in-out infinite alternate} @keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,2%,0) scale(1.06)}} @media (prefers-reduced-motion:reduce){.hero::before{animation:none}} .hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,54px);align-items:center} .pill{display:inline-flex;align-items:center;gap:9px;font-size:.75rem;font-weight:600;color:var(--accent-ink); background:rgba(255,255,255,.7);border:1px solid #cfe6f5;padding:7px 14px;border-radius:999px;box-shadow:0 2px 10px rgba(26,166,223,.08)} .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(92,177,47,.5);animation:beat 2.4s infinite} @keyframes beat{0%{box-shadow:0 0 0 0 rgba(92,177,47,.5)}70%{box-shadow:0 0 0 8px rgba(92,177,47,0)}100%{box-shadow:0 0 0 0 rgba(92,177,47,0)}} h1.headline{font-size:clamp(2.4rem,5.6vw,4rem);color:var(--navy-800);margin:20px 0 0;font-weight:800} h1.headline .w{display:inline-block;opacity:0;transform:translateY(26px);filter:blur(6px); animation:wordUp .82s var(--ease) forwards;animation-delay:calc(.15s + var(--wi,0)*.09s)} h1.headline .grad{background:linear-gradient(110deg,var(--accent),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent} @keyframes wordUp{to{opacity:1;transform:none;filter:blur(0)}} @media (prefers-reduced-motion:reduce){h1.headline .w{animation:none;opacity:1;transform:none;filter:none}} .sub{margin:18px 0 0;color:var(--ink2);font-size:1.08rem;line-height:1.55;max-width:44ch} .cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap} .cta .big{padding:14px 24px;border-radius:12px;background:var(--accent);color:#fff;font-weight:700;font-size:.96rem; box-shadow:0 12px 26px rgba(26,166,223,.34);transition:transform .18s var(--ease2),box-shadow .18s} .cta .big:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(26,166,223,.44)} .cta .ghost{padding:14px 22px;border-radius:12px;border:1px solid var(--line);color:var(--navy-800);font-weight:600;font-size:.96rem;transition:.16s} .cta .ghost:hover{border-color:#9cc4e4;background:var(--paper2)} .trust{display:flex;gap:30px;margin-top:32px;flex-wrap:wrap} .trust div{display:flex;flex-direction:column} .trust b{font-family:var(--disp);font-size:1.7rem;color:var(--navy-800);font-weight:800;font-variant-numeric:tabular-nums} .trust span{font-size:.76rem;color:var(--mut);margin-top:2px} /* ---------- Custom Language Dropdown ---------- */ .lang-dropdown { position: relative; display: inline-block; font-family: var(--disp); font-size: 0.85rem; z-index: 1000; } .lang-trigger { display: flex; align-items: center; justify-content: center; background: #ffffff; 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:hover { background: #fdf5f5; } .lang-trigger .lang-arrow { display: none; } .lang-list { position: absolute; top: 100%; right: 0; left: 0; background: #ffffff; border: 1px solid #111; border-top: none; border-radius: 0; box-shadow: none; padding: 0; margin: 0; list-style: none; display: none; overflow: hidden; } .lang-dropdown.open .lang-list { display: block; } .lang-item { padding: 10px 16px; cursor: pointer; font-weight: 700; text-align: center; color: #d0112b; background: #ffffff; transition: background .16s, color .16s; } .lang-item:hover { background: #f5f5f5; } .lang-item.active { background: #1e73be; color: #ffffff; } /* product window */ .win{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden; box-shadow:0 12px 38px rgba(11,30,51,.08),0 40px 90px rgba(11,30,51,.16),0 0 0 1px rgba(255,255,255,.9); animation:float 9s ease-in-out infinite;transition:box-shadow .3s var(--ease)} .win:hover{box-shadow:0 18px 48px rgba(11,30,51,.12),0 50px 100px rgba(11,30,51,.22),0 0 0 1px rgba(26,166,223,.3)} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @media (prefers-reduced-motion:reduce){.win{animation:none}} .win-tb{display:flex;align-items:center;gap:7px;padding:12px 16px;background:linear-gradient(180deg,#ffffff,#f4f7fb);border-bottom:1px solid var(--line)} .win-tb i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 1px 1px rgba(0,0,0,.15)} .win-tb .r{background:#ff5f56;border:1px solid #e0443e}.win-tb .y{background:#ffbd2e;border:1px solid #dea123}.win-tb .g{background:#27c93f;border:1px solid #1aab29} .win-tb b{margin-left:10px;font-size:.76rem;color:#4a5c6e;font-weight:700;letter-spacing:-.01em} .win-tb em{margin-left:auto;font-style:normal;font-size:.64rem;font-weight:800;letter-spacing:.08em;color:#10b981;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;background:#ecfdf5;padding:3px 9px;border-radius:999px;border:1px solid #a7f3d0} .win-tb em::before{content:"";width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 8px #10b981;animation:beat 2s infinite} .win-b{display:grid;grid-template-columns:138px 1fr} .rail{padding:16px 12px;background:linear-gradient(180deg,#f8fafc,#f1f5f9);border-right:1px solid var(--line);font-size:.74rem} .rail h5{margin:0 0 12px;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#8492a6;font-weight:800} .rail .step{position:relative;display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;color:#64748b;margin-bottom:5px;font-weight:600;transition:all .28s var(--ease);cursor:pointer} .rail .step:hover{color:var(--navy-800);background:rgba(255,255,255,.6)} .rail .step.on{background:#fff;color:var(--navy-800);font-weight:700;box-shadow:0 4px 14px rgba(13,42,69,.1),0 0 0 1px rgba(26,166,223,.18)} .rail .step .dot{width:24px;height:24px;border-radius:7px;background:#e2e8f0;display:grid;place-items:center;color:#64748b;transition:all .28s var(--ease);flex:0 0 auto} .rail .step.on .dot{background:linear-gradient(135deg,#1aa6df,#0284c7);color:#fff;box-shadow:0 3px 10px rgba(26,166,223,.35)} .rail .step.done .dot{background:#10b981;color:#fff} .stage{padding:20px;position:relative;min-height:288px;background:#ffffff} .inv{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff;box-shadow:0 8px 24px rgba(13,42,69,.06)} .inv-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px} .inv-top .b1{font-family:var(--disp);font-weight:800;color:var(--accent-ink);font-size:1.05rem} .inv-top .b1 small{display:block;font-weight:500;color:#64748b;font-size:.62rem;margin-top:2px} .inv-top .b2{text-align:right;font-family:var(--disp);font-weight:800;color:var(--navy-800);font-size:1.05rem} .inv-top .b2 small{display:block;font-weight:700;color:#475569;font-size:.6rem;letter-spacing:.08em;margin-top:2px} .inv-meta{display:flex;justify-content:space-between;font-size:.7rem;color:#64748b;border-block:1px solid #f1f5f9;padding:8px 0;margin-bottom:10px;font-weight:500} .inv-meta .paid{color:#10b981;font-weight:800;background:#ecfdf5;padding:2px 8px;border-radius:999px;border:1px solid #a7f3d0} .inv table{width:100%;border-collapse:collapse;font-size:.75rem} .inv th{text-align:left;color:#94a3b8;font-size:.58rem;text-transform:uppercase;letter-spacing:.06em;padding-bottom:8px;font-weight:700} .inv th:last-child,.inv td:last-child{text-align:right} .inv td{padding:7px 0;border-top:1px solid #f1f5f9;color:var(--ink);font-weight:500} .inv .tot{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:2px solid var(--line);font-family:var(--disp);font-weight:800;color:var(--navy-800);font-size:1.02rem} .toast{margin-top:14px;display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;padding:8px 14px;border-radius:999px;box-shadow:0 4px 12px rgba(16,185,129,.12)} /* ---------- marquee ---------- */ .wall{padding:10px 0;background:var(--paper2);border-block:1px solid var(--line);overflow:hidden} .wall-lbl{display:none} .marq{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marq-row{display:flex;gap:56px;padding-right:56px;animation:scroll 36s linear infinite;flex-shrink:0} .marq:hover .marq-row{animation-play-state:paused} .marq b{font-family:var(--disp);font-size:clamp(1.05rem,1.9vw,1.5rem);font-weight:700;white-space:nowrap;color:var(--navy-600); opacity:.3;animation:wordGlow 3.6s ease-in-out infinite;animation-delay:calc(var(--wi,0) * .22s);transition:color .2s,opacity .2s;cursor:default} .marq b:hover{opacity:1;color:var(--accent)} @keyframes wordGlow{0%,100%{opacity:.24;color:var(--navy-600)}45%{opacity:.92;color:var(--accent)}} @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.marq b{animation:none;opacity:.5}} @media (prefers-reduced-motion:reduce){.marq-row{animation:none}} /* ---------- payments + databases (softened into the background) ---------- */ .pdstrip{padding:clamp(34px,5vw,58px) 0;background:var(--paper2);border-block:1px solid var(--line);overflow:hidden} .pdstrip-lbl{display:block;text-align:center;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);font-weight:700;margin-bottom:28px} .pdstrip-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(18px,4vw,50px)} .pdstrip .pl{font-family:var(--disp);font-weight:800;font-size:clamp(1.15rem,3.5vw,1.5rem);display:inline-flex;align-items:center;gap:7px; opacity:.4;filter:blur(.7px) grayscale(.12);transition:opacity .3s var(--ease),filter .3s var(--ease);cursor:default;white-space:nowrap;line-height:1} .pdstrip .pl:hover{opacity:1;filter:none} .pdstrip .pl svg{display:block;flex:0 0 auto} .pl-visa{font-style:italic;color:#1a1f71;letter-spacing:-.02em} .pl-stripe{color:#635bff;text-transform:lowercase;letter-spacing:-.01em} .pl-paypal{font-style:italic;letter-spacing:-.01em}.pl-paypal b{color:#253b80}.pl-paypal i{color:#179bd7;font-style:italic} .pl-mongo{color:#00684a} .pl-pg{color:#336791} .pl-mysql{color:#00758f} .pl-redis{color:#d82c20;text-transform:lowercase} /* ---------- section ---------- */ .sec{padding:clamp(52px,7vw,104px) 0} .eyebrow{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px} .sec h2{font-size:clamp(1.9rem,4vw,2.9rem);color:var(--navy-800);font-weight:800} .sec .lead{color:var(--ink2);margin:14px 0 0;font-size:1.06rem;line-height:1.55;max-width:56ch} .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:46px} .card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 26px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(11,30,51,.12);border-color:#cfe0ee} .card .ic{width:48px;height:48px;border-radius:13px;background:var(--accent-wash);color:var(--accent-ink);display:grid;place-items:center;margin-bottom:18px;transition:.3s} .card:hover .ic{background:var(--accent);color:#fff;transform:scale(1.06) rotate(-3deg)} .card .ic svg{width:23px;height:23px} .card h3{font-size:1.14rem;color:var(--navy-800);font-weight:700;letter-spacing:-.01em} .card p{color:var(--ink2);font-size:.92rem;line-height:1.55;margin:9px 0 0} /* ---------- dark testimonial band ---------- */ .band{background:linear-gradient(165deg,#0d2338,#081522);color:#fff;position:relative;overflow:hidden} .band::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 80% 20%,rgba(40,179,230,.22),transparent 60%);pointer-events:none} .band .wrap{position:relative;z-index:1} .band-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center;padding:clamp(52px,7vw,88px) 0 clamp(28px,4vw,42px)} .band blockquote{font-family:var(--disp);font-weight:600;font-size:clamp(1.4rem,3vw,2.15rem);line-height:1.36;letter-spacing:-.015em;margin:0;color:#fff;max-width:20ch} .band blockquote em{font-style:normal;color:var(--accent-2)} .band .who{margin-top:22px;font-size:.92rem;color:#9fc7e6}.band .who b{color:#fff} .nums-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:26px 0 clamp(48px,6vw,80px);border-top:1px solid rgba(255,255,255,.14)} .nums-strip b{font-family:var(--disp);font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:800;color:var(--accent-2);font-variant-numeric:tabular-nums;display:block} .nums-strip span{font-size:.82rem;color:#9fc7e6;margin-top:4px;display:block;max-width:30ch} /* ---------- pinned scroll-driven consolidation (cinematic) ---------- */ .scrolly{position:relative;height:360vh;background:linear-gradient(165deg,#0c2135,#06111d 62%,#081522);color:#fff} .scrolly-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden} .scrolly-pin::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(42% 52% at 72% 48%,rgba(40,179,230,.16),transparent 62%)} .scrolly-pin::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6; background-image:linear-gradient(rgba(120,180,230,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,180,230,.05) 1px,transparent 1px); background-size:40px 40px;-webkit-mask-image:radial-gradient(58% 60% at 72% 50%,#000,transparent 76%);mask-image:radial-gradient(58% 60% at 72% 50%,#000,transparent 76%)} .scrolly-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;width:100%} .sc-eyebrow{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin-bottom:16px} .scrolly-copy blockquote{font-family:var(--disp);font-weight:600;font-size:clamp(1.3rem,2.7vw,2rem);line-height:1.36;letter-spacing:-.015em;margin:0;color:#fff;max-width:21ch} .scrolly-copy blockquote em{font-style:normal;color:var(--accent-2)} .scrolly-copy .who{margin-top:18px;font-size:.9rem;color:#9fc7e6}.scrolly-copy .who b{color:#fff} .sc-metric{margin-top:26px;display:flex;align-items:center;gap:13px} .sc-metric b{font-family:var(--disp);font-size:2.7rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums; background:linear-gradient(120deg,var(--accent-2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent} .sc-metric span{font-size:.82rem;color:#9fc7e6;max-width:15ch;line-height:1.35} .sc-steps{margin-top:14px;min-height:2.8em} .sc-line{display:inline-block;font-size:1rem;color:#cfe6f5;font-weight:500;line-height:1.45;max-width:32ch} @keyframes scFade{from{opacity:0;transform:translateY(8px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}} .sc-progress{margin-top:22px;width:200px;height:3px;border-radius:3px;background:rgba(255,255,255,.13);overflow:hidden} .sc-bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2))} .scrolly-vis{position:relative;display:flex;align-items:center;justify-content:center} .cstage{position:relative;width:min(100%,460px);aspect-ratio:440 / 380} .cwires{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .cw{fill:none;stroke:url(#cwg);stroke-width:2;stroke-linecap:round;stroke-dasharray:4 7;opacity:.22; filter:drop-shadow(0 0 3px rgba(40,179,230,.5));animation:flow 1.2s linear infinite} .cnode{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 9px;border-radius:12px; background:rgba(255,255,255,.06);border:1px solid rgba(150,200,235,.22);color:#dbe8f4;font-size:.82rem;font-weight:600;white-space:nowrap; backdrop-filter:blur(6px);box-shadow:0 8px 22px rgba(0,0,0,.32);z-index:3;will-change:transform,opacity; transform:translate(calc(-50% + var(--tx,0px) * var(--t,0)), calc(-50% + var(--ty,0px) * var(--t,0))) scale(calc(1 - 0.5 * var(--t,0)))} .cnode i{width:26px;height:26px;flex:0 0 auto;border-radius:7px;display:grid;place-items:center;color:#04121d;background:var(--accent-2)} .cnode i svg{width:15px;height:15px} .cnode.n0{left:16%;top:16%;--tx:150px;--ty:128px} .cnode.n1{left:84%;top:24%;--tx:-152px;--ty:98px} .cnode.n2{left:17%;top:79%;--tx:150px;--ty:-110px} .cnode.n3{left:83%;top:76%;--tx:-146px;--ty:-96px} .chub{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%) scale(var(--hs,1));will-change:transform} .chub-core{display:inline-flex;align-items:center;gap:9px;padding:14px 20px;border-radius:16px;font-weight:700;font-size:1rem;color:#fff; background:linear-gradient(135deg,#1aa6df,#0f6f97);white-space:nowrap;box-shadow:0 14px 34px rgba(26,166,223,.42)} .chub::before{content:"";position:absolute;left:50%;top:50%;width:150%;height:150%;transform:translate(-50%,-50%);border-radius:24px;z-index:-1; background:radial-gradient(circle,rgba(40,179,230,calc(.15 + .55 * var(--gp,0))),transparent 68%);filter:blur(12px)} .cripple{position:absolute;left:50%;top:50%;width:24px;height:24px;border-radius:50%;border:2px solid var(--accent-2); transform:translate(-50%,-50%);opacity:0;z-index:2;pointer-events:none;animation:cripple .9s var(--ease)} @keyframes cripple{0%{opacity:.85;width:24px;height:24px}100%{opacity:0;width:260px;height:260px}} .ccaps{position:absolute;inset:0;z-index:5;pointer-events:none} .ccaps span{position:absolute;left:50%;top:50%;padding:6px 12px;border-radius:999px;font-size:.72rem;font-weight:700;color:#0a1c30; background:#dff4ff;border:1px solid #a9e0f7;white-space:nowrap;opacity:0;transform:translate(-50%,-50%) scale(.6);box-shadow:0 6px 16px rgba(0,0,0,.25)} .ccaps.on span{opacity:1;transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); transition:opacity .5s var(--ease),transform .6s var(--ease)} .ccaps.on span:nth-child(1){transition-delay:.02s}.ccaps.on span:nth-child(2){transition-delay:.09s} .ccaps.on span:nth-child(3){transition-delay:.16s}.ccaps.on span:nth-child(4){transition-delay:.23s} .ccaps.on span:nth-child(5){transition-delay:.30s}.ccaps.on span:nth-child(6){transition-delay:.37s} .scrolly.static{height:auto}.scrolly.static .scrolly-pin{position:static;height:auto;padding:clamp(52px,7vw,90px) 0} .scrolly-stats{background:#081522;padding:0 0 clamp(44px,6vw,76px)} @media (max-width:860px){ .scrolly{height:300vh} .scrolly-grid{grid-template-columns:1fr;gap:10px} .scrolly-vis{order:-1} .cstage{width:min(100%,360px)} .sc-metric b{font-size:2.1rem} } @media (prefers-reduced-motion:reduce){ .scrolly{height:auto}.scrolly .scrolly-pin{position:static;height:auto;padding:clamp(52px,7vw,90px) 0} .cw{animation:none}.ccaps span{opacity:1;transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y)))} } /* consolidation visual: four tools → one console */ .merge{position:relative;height:290px;width:100%;max-width:440px;margin-left:auto} .merge .wires path{stroke:rgba(99,208,255,.55);stroke-width:1.6;fill:none;stroke-dasharray:5 8;animation:flow 1.3s linear infinite} .merge .wires{position:absolute;inset:0;width:100%;height:100%;z-index:1} @keyframes flow{to{stroke-dashoffset:-26}} .merge .node{position:absolute;z-index:2;background:rgba(255,255,255,.07);border:1px solid rgba(150,200,235,.2);color:#cddcea; padding:8px 13px;border-radius:11px;font-size:.8rem;font-weight:600;white-space:nowrap;backdrop-filter:blur(4px); animation:nodeFloat 5s ease-in-out infinite;animation-delay:var(--nd,0s)} .merge .n1{left:2%;top:8%;--nd:0s}.merge .n2{right:0;top:16%;--nd:.6s} .merge .n3{left:4%;bottom:12%;--nd:1.2s}.merge .n4{right:4%;bottom:20%;--nd:1.8s} @keyframes nodeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} .merge .hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;gap:9px; background:linear-gradient(135deg,#1aa6df,#127a9e);color:#fff;font-weight:700;font-size:.92rem;padding:13px 18px;border-radius:14px; box-shadow:0 12px 32px rgba(26,166,223,.45);animation:hubPulse 3s ease-in-out infinite} @keyframes hubPulse{0%,100%{box-shadow:0 12px 32px rgba(26,166,223,.4)}50%{box-shadow:0 14px 44px rgba(26,166,223,.66)}} /* feature bento mini-visualizations */ .viz{position:relative;height:96px;border-radius:12px;overflow:hidden;margin-bottom:16px; background:linear-gradient(180deg,#f7fbfe,#eef4f9);border:1px solid var(--line)} .ct{display:flex;align-items:center;gap:11px} .ci{width:36px;height:36px;flex:0 0 auto;border-radius:10px;background:var(--accent-wash);color:var(--accent-ink);display:grid;place-items:center;transition:.3s var(--ease)} .card:hover .ci{background:var(--accent);color:#fff;transform:rotate(-4deg) scale(1.05)} .ci svg{width:19px;height:19px} .card h3{margin:0} /* 1 · pipeline */ .v-pipe .tk{position:absolute;left:14px;right:14px;top:50%;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,transparent,#cbdcea 12%,#cbdcea 88%,transparent)} .v-pipe .pk{position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(26,166,223,.16);animation:pipe 3s linear infinite;animation-delay:var(--pd,0s)} @keyframes pipe{0%{left:14px;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 23px);opacity:0}} /* 2 · bars */ .v-bars{display:flex;align-items:flex-end;justify-content:center;gap:9px;padding:16px 0} .v-bars i{width:12px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#63d0ff,#1aa6df);height:var(--h); animation:breathe 2.6s var(--ease) infinite alternate;animation-delay:var(--bd,0s)} @keyframes breathe{from{height:calc(var(--h) * .4)}to{height:var(--h)}} /* 3 · sparkline */ .v-spk{padding:0}.v-spk svg{position:absolute;inset:0;width:100%;height:100%} .v-spk path{stroke:var(--accent);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:300;animation:sweep 3s linear infinite} @keyframes sweep{from{stroke-dashoffset:300}to{stroke-dashoffset:-300}} /* 4 · rings */ .v-ring{display:grid;place-items:center} .v-ring span{position:absolute;border:2px solid var(--accent);border-radius:50%;opacity:0;animation:ring 3s ease-out infinite} .v-ring span:nth-child(2){animation-delay:1s}.v-ring span:nth-child(3){animation-delay:2s} .v-ring b{width:13px;height:13px;border-radius:50%;background:var(--accent);z-index:1} @keyframes ring{0%{width:14px;height:14px;opacity:.75}100%{width:82px;height:82px;opacity:0}} /* 5 · doc scan */ .v-doc{display:grid;place-items:center} .v-doc .pg{position:relative;width:60px;height:70px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:11px 9px;overflow:hidden} .v-doc .pg u{display:block;height:4px;border-radius:2px;background:#dfe9f2;margin-bottom:6px} .v-doc .pg u:nth-child(2){width:78%}.v-doc .pg u:nth-child(3){width:92%}.v-doc .pg u:nth-child(4){width:64%} .v-doc .scan{position:absolute;left:0;right:0;height:16px;top:-16px;background:linear-gradient(180deg,transparent,rgba(26,166,223,.4),transparent);animation:scan 2.6s var(--ease) infinite} @keyframes scan{0%{top:-16px}100%{top:100%}} /* 6 · audit timeline */ .v-audit{display:flex;align-items:center;justify-content:center;gap:22px} .v-audit .ln{position:absolute;left:26px;right:26px;top:50%;height:2px;transform:translateY(-50%);background:#cbdcea} .v-audit i{position:relative;z-index:1;width:11px;height:11px;border-radius:50%;background:#cbdcea;animation:aud 2.8s ease infinite;animation-delay:var(--ad,0s)} @keyframes aud{0%,100%{background:#cbdcea;box-shadow:none}28%,48%{background:var(--accent);box-shadow:0 0 0 4px rgba(26,166,223,.2)}} [class^="v-"]{position:absolute;inset:0} @media (prefers-reduced-motion:reduce){ .merge .wires path,.merge .node,.merge .hub,.v-pipe .pk,.v-bars i,.v-spk path,.v-ring span,.v-doc .scan,.v-audit i{animation:none} .v-bars i{height:var(--h)}.v-spk path{stroke-dashoffset:0} } /* ---------- help ---------- */ .help{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:46px} .help .ic{width:46px;height:46px;border-radius:12px;background:var(--accent-wash);color:var(--accent-ink);display:grid;place-items:center;margin-bottom:16px} .help .ic svg{width:22px;height:22px} .help h3{font-size:1.1rem;color:var(--navy-800);font-weight:700} .help p{color:var(--ink2);font-size:.9rem;line-height:1.55;margin:8px 0 0} /* ---------- closing CTA ---------- */ .close{text-align:center;background:var(--paper2);border-top:1px solid var(--line)} .close .wrap{padding:clamp(56px,7vw,104px) 0} .close h2{font-size:clamp(2rem,4.4vw,3rem);color:var(--navy-800)} .capture{display:flex;gap:6px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px 6px 6px 22px;max-width:480px;margin:26px auto 0;box-shadow:0 6px 20px rgba(11,30,51,.07);transition:.18s} .capture:focus-within{border-color:#9cc4e4;box-shadow:0 8px 26px rgba(26,166,223,.16)} .capture input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:.98rem;color:var(--ink);padding:12px 0} .capture button{flex-shrink:0;padding:12px 24px;border:0;border-radius:9px;background:var(--navy-800);color:#fff;font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;transition:.16s} .capture button:hover{background:var(--accent)} .note{font-size:.82rem;color:var(--mut);margin-top:12px} .foot{padding:34px 0;border-top:1px solid var(--line);color:var(--mut);font-size:.84rem} .foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px} /* second (operations) hero: console on the LEFT, text on the RIGHT (desktop) */ @media (min-width:861px){ .second-hero .wrap > div:first-child{order:2} .second-hero .wrap > div:last-child{order:1} } /* ===== "Take your business off paper" — light, polished showcase ===== Stays white/light; adds a soft blue wash, a divider above the stats and a deeper float on the console mockup so the section feels finished. */ .second-hero{background:linear-gradient(180deg,#f7fbfe,#eef4fa 58%,#f7fbfe); padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,72px)} .second-hero::before{inset:0;height:auto;animation:none; background:radial-gradient(46% 58% at 84% 20%,rgba(26,166,223,.14),transparent 62%), radial-gradient(40% 50% at 8% 96%,rgba(92,177,47,.10),transparent 60%)} .second-hero .wrap{position:relative;z-index:1;align-items:center} .second-hero .trust{border-top:1px solid var(--line);padding-top:26px;gap:clamp(22px,4vw,44px)} .second-hero .win{box-shadow:0 4px 14px rgba(11,30,51,.08),0 44px 96px rgba(11,30,51,.22),0 0 0 1px rgba(11,30,51,.04)} /* ---------- language switcher (matches the app's own dropdown) ---------- */ .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;transition:background .18s;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; padding:0;margin:0;list-style:none;display:none;overflow:hidden;z-index:10000} .lang-dropdown.open .lang-list{display:block!important;visibility:visible!important;opacity:1!important} .lang-item{padding:10px 16px;cursor:pointer;font-weight:700;text-align:center;color:#d0112b;background:#fff;transition:background .18s,color .18s} .lang-item:hover{background:#f5f5f5} .lang-item.active{background:#1e73be;color:#fff} /* ---------- languages callout section ---------- */ .langs{min-height:92vh;display:flex;align-items:center;padding:clamp(40px,6vw,80px) 0;text-align:center;background:linear-gradient(180deg,var(--paper2),#fff)} .langs .wrap{width:100%} .langs .lang-ico{width:58px;height:58px;border-radius:16px;margin:0 auto 20px;display:grid;place-items:center; background:var(--accent-wash);color:var(--accent-ink)} .langs .lang-ico svg{width:29px;height:29px} .langs h2{font-size:clamp(1.7rem,3.6vw,2.6rem);color:var(--navy-800)} .speaks-h{font-family:var(--disp);font-weight:800;color:var(--navy-800);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,#1aa6df); 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(--ink2);margin:14px auto 0;max-width:56ch;font-size:1.04rem;line-height:1.55} .lang-flags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:30px auto 0;max-width:660px} .lang-flags span{padding:9px 17px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:600;font-size:.9rem; color:var(--navy-700);box-shadow:0 2px 8px rgba(11,30,51,.04);transition:transform .18s var(--ease),border-color .18s,box-shadow .18s} .lang-flags span:hover{border-color:#9cc4e4;transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,30,51,.1)} /* ---------- 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(--navy-800);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} } /* ---------- plain quote + stats (matches original site design) ---------- */ .plain-quote{padding:clamp(28px,4vw,44px) 0 0} .pq-card{background:#0a0a0a;border-radius:28px;padding:clamp(40px,6vw,72px) clamp(28px,5vw,56px);max-width:1180px} .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:rgba(255,255,255,.55);font-size:.9rem} .plain-stats{padding:clamp(56px,8vw,100px) 0} .plain-stats h2{font-size:clamp(2rem,4.4vw,3.3rem);color:var(--navy-800);font-weight:800} .ps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px} .ps-card{background:#f4f4ef;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(--ink);letter-spacing:-.02em;line-height:1;margin-bottom:12px} .ps-label{font-size:.98rem;color:#4a4a4a;line-height:1.5} @media (max-width:860px){.ps-card{padding:28px 22px}} /* keep all three stats in one row on phones, compacted to fit */ @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} } /* ---------- plan prices ---------- */ .prices{padding:clamp(52px,7vw,100px) 0;background:var(--paper2);border-top:1px solid var(--line)} .prices-head{text-align:center;max-width:640px;margin:0 auto} .prices-head h2{font-size:clamp(1.9rem,4vw,2.9rem);color:var(--navy-800);font-weight:800;margin:12px 0 0} .prices-head .lead{margin:12px auto 0;color:var(--ink2);font-size:1.05rem} .price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px;align-items:stretch} .pcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:26px 24px;transition:transform .25s var(--ease),box-shadow .25s} .pcard:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(11,30,51,.1)} .pcard.rec{border-color:#bfe1f4;background:linear-gradient(180deg,#eef8fe,#fff 42%);box-shadow:0 20px 54px rgba(26,166,223,.16)} .pc-badge{position:absolute;top:-11px;left:24px;background:var(--accent);color:#fff;font-size:.68rem;font-weight:800;padding:5px 11px;border-radius:999px} .pc-name{font-family:var(--disp);font-weight:800;font-size:1.4rem;color:var(--navy-800)} .pc-price{display:flex;align-items:baseline;gap:8px;margin:12px 0 2px} .pc-price b{font-family:var(--disp);font-size:2.5rem;font-weight:800;color:var(--navy-800);letter-spacing:-.02em} .pc-price span{font-size:.78rem;color:var(--mut)} .pc-tag{color:var(--mut);font-size:.9rem;min-height:1.3em} .pc-cta{display:block;text-align:center;margin:16px 0 4px;padding:12px;border-radius:11px;font-weight:700;font-size:.94rem;cursor:pointer} .pc-cta.solid{background:var(--navy-800);color:#fff}.pc-cta.solid:hover{background:var(--navy-700)} .pc-cta.ghost{border:1px solid var(--line);color:var(--navy-800)}.pc-cta.ghost:hover{border-color:#9cc4e4;background:var(--paper2)} .pc-feats{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px} .pc-feats li{position:relative;padding-left:26px;font-size:.88rem;color:var(--ink);line-height:1.4} .pc-feats li::before{content:"";position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:50%;background:var(--accent-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d5f86' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat} .prices-note{text-align:center;color:var(--mut);font-size:.86rem;margin-top:30px}.prices-note a{color:var(--accent);font-weight:600;cursor:pointer} @media(max-width:860px){ .price-cards{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:28px;max-width:none} .pcard{padding:14px 10px;border-radius:14px;min-width:0;order:0} .pcard.rec{order:0} .pc-badge{position:absolute;top:-10px;left:10px;font-size:.56rem;padding:3px 7px} .pc-name{font-size:1.05rem} .pc-price{margin:8px 0 2px;gap:3px;flex-wrap:wrap} .pc-price b{font-size:1.45rem} .pc-price span{font-size:.62rem;line-height:1.1} .pc-tag{font-size:.68rem;min-height:0;margin-top:2px;line-height:1.2} .pc-cta{margin:10px 0 2px;padding:8px 4px;font-size:.72rem;border-radius:8px} .pc-feats{margin:10px 0 0;padding:10px 0 0;gap:7px} .pc-feats li{padding-left:18px;font-size:.66rem;line-height:1.25} .pc-feats li::before{width:12px;height:12px;top:2px;background-size:8px} } @media(max-width:420px){ .price-cards{gap:5px} .pcard{padding:10px 6px;border-radius:11px} .pc-badge{top:-9px;left:6px;font-size:.5rem;padding:2px 5px} .pc-name{font-size:.9rem} .pc-price b{font-size:1.2rem} .pc-price span{font-size:.55rem} .pc-tag{font-size:.6rem} .pc-cta{font-size:.65rem;padding:7px 2px} .pc-feats{gap:5px;margin-top:8px;padding-top:8px} .pc-feats li{padding-left:14px;font-size:.6rem;line-height:1.2} .pc-feats li::before{width:10px;height:10px;top:1px;background-size:7px} } /* ---------- TOP HERO · Claude-style with big live demo ---------- */ .chero{position:relative;overflow:hidden;color:#fff;padding:clamp(10px,1.6vw,20px) 0 clamp(24px,3vw,40px); min-height:calc(100vh - 62px);display:flex;align-items:center; background:linear-gradient(180deg,#0d2338 0,#0d2338 90px,transparent 220px), radial-gradient(130% 110% at 12% -5%,#0d2338,#081522 58%,#050e18)} .chero-grid{align-items:center} @media (max-width:900px){.chero{min-height:auto;display:block}} /* A phone that is SHORT as well as narrow. At 352x608 this page laid out to 666px, so the sign-in card ran 58px off the bottom and the first thing a new visitor had to do was scroll to find it. The width breakpoint above cannot see that: a 390x844 phone is the same width and has room to spare. Keyed on height as well, and it takes the space back from the decoration rather than the form — the mock browser is the part that can afford to be smaller. */ @media (max-width:900px) and (max-height:760px){ .nav{padding:10px clamp(14px,4vw,44px);gap:16px} .chero{padding:4px 0 14px} .chero-h{font-size:clamp(1.9rem,7.6vw,2.45rem)} .chero-sub{margin-top:8px;font-size:.94rem;line-height:1.42} .chero-demo{margin-top:8px} .cdemo-body{min-height:0;padding:14px} /* The mock site inside the demo is a fixed 436px, narrowed to 360px by the width breakpoint. That fixed height is what actually set the page length — shrinking the body around it did nothing. */ .cdemo-site{height:206px} .cdemo-top{padding:9px 12px;font-size:.72rem} .cdemo-hint{font-size:1rem;margin-bottom:12px} .chero-auth{margin-top:10px} /* The last 42px was the hero own trailing space, not content. Nothing was hidden by it, but it still put a scrollbar on a page that has nothing below the fold to scroll to. */ .chero{padding-bottom:2px} .chero-sub{margin-top:6px} .cauth-card{padding:16px;border-radius:15px} } @keyframes heroUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} .chero-h{animation:heroUp .8s var(--ease) both;animation-delay:.04s} .chero-sub{animation:heroUp .8s var(--ease) both;animation-delay:.14s} .chero-auth{animation:heroUp .8s var(--ease) both;animation-delay:.24s} .chero-getapp{animation:heroUp .8s var(--ease) both;animation-delay:.32s} .chero-demo{animation:heroUp .9s var(--ease) both;animation-delay:.18s} @media (prefers-reduced-motion:reduce){.chero-h,.chero-sub,.chero-auth,.chero-getapp,.chero-demo{animation:none}} .chero-aura{position:absolute;inset:0;pointer-events:none; background:radial-gradient(40% 48% at 84% 26%,rgba(26,166,223,.24),transparent 60%),radial-gradient(34% 40% at 8% 88%,rgba(92,177,47,.12),transparent 60%)} .chero-grid{position:relative;z-index:1;display:grid;grid-template-columns:0.9fr 1.12fr;gap:clamp(28px,4vw,60px);align-items:start} .chero-demo{margin-top:clamp(6px,1.2vw,18px)} .chero-h{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:.97;font-size:clamp(2.7rem,6.4vw,5.2rem);color:#fff;text-wrap:balance} .chero-sub{margin:14px 0 0;font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.5;color:#b9cde0;max-width:38ch} /* claude-style auth card */ .chero-auth{margin-top:22px;max-width:448px} /* Claude-style light card with a soft Gemini blue aura glowing behind it */ .cauth-card{position:relative;z-index:0;background:#faf9f5;border:1px solid #e9e7dd;border-radius:18px;padding:22px; box-shadow:0 0 70px 6px rgba(120,160,255,.45), 0 0 140px 20px rgba(130,150,255,.28), 0 24px 60px rgba(0,0,0,.3)} /* big, wide, soft blue wash radiating out behind the card (Gemini style) */ .cauth-card::before{content:"";position:absolute;inset:-160px -150px;z-index:-1;pointer-events:none;border-radius:50%; background: radial-gradient(closest-side, rgba(140,175,255,.85), rgba(100,155,250,.5) 38%, rgba(120,150,250,.24) 62%, transparent 80%), radial-gradient(closest-side at 60% 66%, rgba(180,150,255,.45), transparent 68%); filter:blur(55px);animation:cauthPulse 5.5s ease-in-out infinite} @keyframes cauthPulse{0%,100%{opacity:.72;transform:scale(.97)}50%{opacity:1;transform:scale(1.07)}} @media (prefers-reduced-motion:reduce){.cauth-card::before{animation:none;opacity:.9}} .cauth-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px;border-radius:11px;background:#fff;color:#1f1e1c; border:1px solid #dcd9cf;font:inherit;font-weight:600;font-size:.96rem;cursor:pointer;transition:background .15s,border-color .15s} .cauth-google:hover{background:#f3f2ea;border-color:#c9c6ba} .cauth-or{display:flex;align-items:center;gap:12px;margin:14px 0;color:#8a8778;font-size:.72rem;font-weight:600;letter-spacing:.09em} .cauth-or::before,.cauth-or::after{content:"";flex:1;height:1px;background:#e6e3d8} .cauth-input{width:100%;padding:13px 14px;border:1px solid #dcd9cf;border-radius:11px;background:#fff;font:inherit;font-size:.96rem;color:#1f1e1c; outline:none;transition:border-color .15s,box-shadow .15s;margin-bottom:10px} .cauth-input::placeholder{color:#9b998c} .cauth-input:focus{border-color:#7aa7ff;box-shadow:0 0 0 3px rgba(122,167,255,.18)} /* locked email once "Continue with email" is confirmed (Claude-style) */ .cauth-input.locked{background:#f3f2ea;color:#4a4840;font-weight:600;cursor:default;border-color:#e6e3d8} .cauth-input.locked:focus{box-shadow:none;border-color:#e6e3d8} .cauth-email{width:100%;padding:13px;border:0;border-radius:11px;background:#141413;color:#fff;font:inherit;font-weight:600;font-size:.96rem; cursor:pointer;transition:background .15s,transform .15s} .cauth-email:hover{background:#2b2a26;transform:translateY(-1px)} .cauth-pw[hidden]{display:none} .cauth-note{font-size:.76rem;color:#8a8778;line-height:1.5;margin:14px 0 0;text-align:center} .cauth-note a{color:#5a584f;text-decoration:underline} .cauth-alt{margin-top:16px;text-align:center;font-size:.86rem;color:#9fc7e6} .cauth-alt a{color:#fff;font-weight:600;text-decoration:none} .chero-auth .login-err{display:none;background:#fdecea;color:#c0392b;border:1px solid #f5c6cb;border-radius:8px;padding:8px 11px;font-size:.84rem;margin-bottom:10px} .chero-auth .login-err.show{display:block} /* iOS + Android app-store badges */ .chero-apps{margin-top:20px} .chero-apps-lbl{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7f97ad;margin-bottom:10px} .chero-apps-row{display:flex;gap:12px;flex-wrap:wrap} .app-badge{display:inline-flex;align-items:center;gap:11px;padding:9px 16px 9px 14px;border-radius:13px;background:#000; border:1px solid rgba(255,255,255,.22);color:#fff;transition:transform .16s var(--ease2),border-color .16s,background .16s} .app-badge:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.45);background:#0c0c0c} .app-badge .ab-ic{flex:0 0 auto} .app-badge .ab-tx{display:flex;flex-direction:column;line-height:1.05;text-align:left} .app-badge .ab-tx small{font-size:.62rem;font-weight:500;letter-spacing:.02em;color:#cfd8e2} .app-badge .ab-tx b{font-family:var(--disp);font-size:1.06rem;font-weight:700;letter-spacing:.01em;margin-top:1px} /* big live demo canvas */ .chero-demo{perspective:none} /* the demo panel stays perfectly flat and fixed — no tilt, no drift, and its inner content is clipped to a fixed height so it never shifts position. */ .cdemo{position:relative;background:#f6f8f4;border-radius:20px;overflow:hidden;color:var(--navy-800); box-shadow:0 44px 110px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05); transform:none} .cdemo-top{display:flex;align-items:center;gap:7px;padding:13px 16px;background:#fff;border-bottom:1px solid #e7eae3;font-size:.8rem} .cd-dot{width:10px;height:10px;border-radius:50%}.cd-dot.r{background:#ff6b6b}.cd-dot.y{background:#ffce5c}.cd-dot.g{background:#34c77b} .cdemo-top b{margin-left:8px;color:#5a6b60;font-weight:600} .cd-live{margin-left:auto;font-style:normal;font-size:.64rem;font-weight:800;letter-spacing:.06em;color:#2fae7a;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px} .cd-live i{width:6px;height:6px;border-radius:50%;background:#34c77b;animation:beat 2s infinite} .cdemo-body{position:relative;padding:clamp(20px,2.4vw,32px);min-height:clamp(410px,54vh,560px); background-image:linear-gradient(rgba(11,30,51,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(11,30,51,.05) 1px,transparent 1px);background-size:32px 32px} .cdemo-hint{font-family:var(--disp);font-weight:700;font-size:clamp(1.15rem,1.8vw,1.65rem);color:#4a5a4f;margin-bottom:20px} .cdemo-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .cdcard{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:14px;background:#fff;border:1px solid #e7eae3; box-shadow:0 2px 6px rgba(11,30,51,.05);font:inherit;text-align:left;cursor:pointer; transition:transform .18s var(--ease),box-shadow .18s,border-color .18s} .cdcard:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,30,51,.1)} .cdcard .cdi{width:38px;height:38px;border-radius:10px;background:var(--accent-wash);color:var(--accent-ink);display:grid;place-items:center} .cdcard .cdi svg{width:20px;height:20px} .cdcard span{font-weight:700;font-size:.92rem;color:var(--navy-800)} .cdcard.press{transform:scale(.96);border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,166,223,.2)} .cdemo-result{position:absolute;left:clamp(20px,2.4vw,32px);right:clamp(20px,2.4vw,32px);bottom:clamp(76px,9vw,96px); background:linear-gradient(120deg,#0e2136,#123049);color:#fff;border-radius:13px;padding:14px 16px;display:flex;align-items:center;gap:12px; box-shadow:0 20px 44px rgba(11,30,51,.4);opacity:0;transform:translateY(16px);transition:opacity .42s var(--ease),transform .42s var(--ease)} .cdemo-result.show{opacity:1;transform:none} /* bottom prompt bar (claude "Let's go") */ .cdemo-bar{position:absolute;left:clamp(20px,2.4vw,32px);right:clamp(20px,2.4vw,32px);bottom:clamp(20px,2.4vw,32px); display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid #e7eae3;border-radius:14px; padding:9px 9px 9px 16px;box-shadow:0 8px 24px rgba(11,30,51,.1)} .cdbar-chip{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:#5a6b60;font-weight:600} .cdbar-go{padding:11px 18px;border-radius:11px;background:var(--accent);color:#04121d;font:inherit;font-weight:700;font-size:.9rem;border:0;cursor:pointer;transition:transform .16s,background .16s} .cdbar-go:hover{transform:translateY(-1px);background:#3bb8ea} .cdemo-result .ok{width:30px;height:30px;flex:0 0 auto;border-radius:8px;background:#1f9d6b;color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9rem} .cdemo-result .rt{font-size:.86rem;line-height:1.42}.cdemo-result .rt b{color:#63d0ff} .cd-cursor{position:absolute;left:0;top:0;z-index:6;pointer-events:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.3)); transition:transform .95s var(--ease)} /* live site-building preview */ .cd-url{margin-left:8px;display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:#5a6b60;font-weight:600} .cd-live.islive{color:#2fae7a}.cd-live.islive i{background:#34c77b} .cdemo-site{--st:#1aa6df;position:relative;background:#fff;height:436px;overflow:hidden} .site-empty{position:absolute;inset:0;display:grid;place-items:center;color:#9fb0a8;font-weight:600;font-size:1.02rem;transition:opacity .4s;z-index:1} .site-empty.gone{opacity:0} /* Phase 0 — the ask. Sits above the blank site and fades out once the build starts, so the sequence reads: someone asks → agent replies → the site builds itself. */ .cd-ask{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:center;gap:14px; padding:0 clamp(20px,5%,52px);background:#fff;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)} .cd-ask.on{opacity:1} .cd-ask-bubble{align-self:flex-end;max-width:82%;background:var(--accent,#1aa6df);color:#fff;border-radius:18px 18px 5px 18px; padding:14px 17px;font-size:1rem;line-height:1.45;box-shadow:0 12px 28px rgba(26,166,223,.28); opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease),transform .35s var(--ease)} .cd-ask.typing .cd-ask-bubble{opacity:1;transform:none} .cd-ask-car{display:inline-block;width:2px;height:1.05em;margin-left:2px;background:currentColor;vertical-align:-.16em;animation:cdAskBlink 1s steps(1,end) infinite} .cd-ask.sent .cd-ask-car{display:none} @keyframes cdAskBlink{0%,50%{opacity:1}51%,100%{opacity:0}} .cd-ask-reply{align-self:flex-start;display:flex;align-items:center;gap:10px;max-width:82%; background:#f2f6fa;color:#0e2136;border-radius:18px 18px 18px 5px;padding:13px 17px;font-size:.97rem;font-weight:600; opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease),transform .35s var(--ease)} .cd-ask.replied .cd-ask-reply{opacity:1;transform:none} .cd-ask-av{width:24px;height:24px;flex:none;border-radius:7px;background:var(--accent,#1aa6df);color:#fff; display:grid;place-items:center;font-size:.7rem} @media (max-width:560px){ .cd-ask-bubble,.cd-ask-reply{font-size:.9rem;max-width:92%} } .site-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #eef1ec;opacity:0;transform:translateY(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease)} .site-head.in{opacity:1;transform:none} .site-logo{font-family:var(--disp);font-weight:800;color:var(--st);font-size:1.05rem;transition:color .5s var(--ease)} .site-nav{display:flex;gap:9px;margin-left:8px}.site-nav i{width:34px;height:7px;border-radius:4px;background:#e7eae3} .site-cart{margin-left:auto;font-size:.76rem;font-weight:700;color:#fff;background:var(--st);padding:6px 12px;border-radius:999px;transition:background .5s var(--ease)} .site-hero{margin:16px 18px 0;border-radius:14px;padding:24px 22px;color:#fff;min-height:116px; background:linear-gradient(135deg,var(--st),color-mix(in srgb,var(--st) 55%,#0b1e33)); opacity:0;transform:scale(.97);transition:opacity .5s var(--ease),transform .5s var(--ease),background .6s var(--ease)} .site-hero.in{opacity:1;transform:none} .site-kick{font-size:.6rem;font-weight:800;letter-spacing:.14em;opacity:.85} .site-title{font-family:var(--disp);font-weight:800;font-size:1.7rem;margin-top:8px;min-height:1.25em;line-height:1.15} .site-title .car{display:inline-block;width:2px;height:1em;background:#fff;margin-left:2px;vertical-align:-.12em;animation:cblink .8s steps(1) infinite} @keyframes cblink{50%{opacity:0}} .site-btn{display:inline-block;margin-top:14px;background:#fff;color:var(--st);font-weight:700;font-size:.82rem;padding:8px 16px;border-radius:8px;transition:color .5s var(--ease)} .site-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px 18px 70px} .site-card{border:1px solid #eef1ec;border-radius:10px;padding:10px;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)} .site-card.in{opacity:1;transform:none} .site-card .ph{height:56px;border-radius:7px;background:color-mix(in srgb,var(--st) 14%,#fff);border:1px solid color-mix(in srgb,var(--st) 22%,#fff);transition:background .5s var(--ease),border-color .5s var(--ease)} .site-card .nm{font-size:.74rem;font-weight:700;color:var(--navy-800);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .site-card .pr{font-size:.74rem;font-weight:800;color:var(--st);margin-top:2px;transition:color .5s var(--ease)} .cdemo-site.live{box-shadow:inset 0 0 0 3px rgba(31,157,107,.5)} .cd-chip{position:absolute;left:18px;bottom:18px;z-index:2;display:inline-flex;align-items:center;gap:9px;background:#0e2136;color:#fff;padding:10px 14px;border-radius:11px;font-size:.84rem;font-weight:600;box-shadow:0 14px 30px rgba(11,30,51,.32)} .cd-spin{width:14px;height:14px;flex:0 0 auto;border-radius:50%;border:2px solid rgba(255,255,255,.28);border-top-color:#63d0ff;animation:spin .8s linear infinite} .cd-chip.done .cd-spin{border-color:#1f9d6b;border-top-color:#1f9d6b;background:#1f9d6b;animation:none} @keyframes spin{to{transform:rotate(360deg)}} .cd-chip{z-index:7} /* live checkout scene — a customer pays, with the real payment logos */ .site-checkout{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:16px; background:rgba(11,30,51,.34);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); opacity:0;pointer-events:none;transition:opacity .4s var(--ease)} .site-checkout.in{opacity:1} .sco-card{width:min(300px,100%);background:#fff;border-radius:16px;padding:18px 18px 16px;box-shadow:0 30px 70px rgba(11,30,51,.4); transform:translateY(14px) scale(.97);transition:transform .45s var(--ease)} .site-checkout.in .sco-card{transform:none} .sco-h{font-family:var(--disp);font-weight:800;font-size:1.02rem;color:var(--navy-800);margin-bottom:12px} .sco-line{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--ink2);padding:5px 0} .sco-line b{color:var(--navy-800);font-weight:700} .sco-tot{display:flex;justify-content:space-between;align-items:center;margin:6px 0 14px;padding-top:9px;border-top:1px solid var(--line); font-family:var(--disp);font-weight:800;color:var(--navy-800);font-size:.98rem} .sco-pay-lbl{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:8px} .sco-pays{display:flex;align-items:center;gap:9px;margin-bottom:14px;flex-wrap:wrap} .scp{display:inline-flex;align-items:center;height:26px;padding:0 8px;border:1px solid var(--line);border-radius:7px;background:#fff; font-family:var(--disp);font-weight:800;font-size:.82rem;line-height:1;box-shadow:0 1px 3px rgba(11,30,51,.06)} .scp svg{display:block} .scp-visa{color:#1a1f71;font-style:italic} .scp-stripe{color:#635bff;text-transform:lowercase} .scp-paypal{font-style:italic}.scp-paypal b{color:#253b80}.scp-paypal i{color:#179bd7} .sco-btn{width:100%;padding:11px;border:0;border-radius:11px;background:var(--accent);color:#04121d;font:inherit;font-family:var(--disp); font-weight:800;font-size:.92rem;cursor:pointer;transition:background .2s} .sco-btn.paid{background:#1f9d6b;color:#fff} /* phones only: single column, full-bleed headline */ @media (max-width:600px){ .chero-grid{grid-template-columns:1fr;gap:30px} .cdemo{transform:none} /* full-bleed hero on phones: tighten the side gutter and let the headline break out to the screen edges */ .chero .wrap{padding-left:14px;padding-right:14px} .chero-h{font-size:clamp(2.5rem,11vw,3.6rem);margin-left:-8px;margin-right:-8px} /* Phones: headline, then the demo, then the login card. Stacked in DOM order the card sat between the headline and the demo, so the thing that shows what Souqi actually does was pushed below the fold behind a form. On a phone the demo IS the pitch; the card should follow it. .chero-copy is a grouping div with no styles of its own, so display:contents lifts its three children into the grid and lets them be ordered individually — the alternative, reordering .chero-copy as a whole, would have taken the headline down with the card. */ .chero-copy{display:contents} .chero-h{order:1} .chero-sub{order:2} .chero-demo{order:3} .chero-auth{order:4} /* ...and then the card is lifted back ONTO the demo, because stacked in full both of them do not fit a phone. Measured at 390x844 before this: the demo ran 272-674 and the card 726-1059, so only the top 118px of a 333px card was on screen and the password field was a 215px scroll away. Overlapping costs nothing that matters — what the card covers is the demo's lower third, while the URL bar, the building indicator and the storefront hero all stay visible above it. Both numbers are viewport-relative so this holds on a 667px SE as well as an 844px phone, rather than being tuned to one device. The cap crops rather than squashes: .cdemo is already overflow:hidden. */ .chero-demo{position:relative;z-index:1} .cdemo{max-height:min(402px,42vh)} .chero-auth{position:relative;z-index:3;margin-top:calc(-1 * clamp(150px,30vh,250px))} } /* SHORT phones, by height rather than width. The overlay above fits a 390x844 phone with room to spare, but a 667px-tall SE cannot hold a 3.6rem headline, a two-line sub, a demo AND a 333px card at once — once the header and the copy have taken their 204px there are about 130 pixels left for the demo, which is browser chrome and nothing else. So the copy gives way, and only here: the headline comes down, the gaps tighten, and the demo crops a little further. Tall phones keep the full-bleed hero exactly as it was — this is scoped to max-height so it cannot reach them. */ @media (max-width:600px) and (max-height:740px){ .chero-grid{gap:16px} .chero-h{font-size:clamp(1.85rem,7.6vw,2.35rem);margin-left:-4px;margin-right:-4px} .chero-sub{font-size:.88rem;line-height:1.45} .cdemo{max-height:33vh} .chero-auth{margin-top:calc(-1 * clamp(120px,21vh,170px))} /* Take the last 20-odd pixels out of the CARD rather than out of the demo. Overlapping further would have left only browser chrome showing, and the padding is the one thing here nobody is reading. */ .cauth-card{padding:17px} .cauth-note{font-size:.72rem} } /* tablet / iPad: keep the login card and the demo side-by-side so both fit on one screen instead of stacking awkwardly */ @media (min-width:601px) and (max-width:960px){ .chero-grid{grid-template-columns:1fr 1fr;gap:clamp(18px,2.8vw,30px);align-items:center} .chero-h{font-size:clamp(2.05rem,4.4vw,3.05rem);line-height:1.02} .chero-sub{font-size:.98rem;max-width:34ch} .chero-auth{max-width:none;margin-top:18px} .cdemo{transform:none} } /* ---------- NEW industries hero ---------- */ .ihero{position:relative;overflow:hidden;padding:clamp(38px,5vw,78px) 0 clamp(28px,4vw,48px)} .ihero::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;z-index:0;pointer-events:none; background:radial-gradient(52% 58% at 80% 16%,rgba(26,166,223,.16),transparent 60%), radial-gradient(46% 52% at 14% 8%,rgba(92,177,47,.10),transparent 58%)} .ihero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,4vw,54px);align-items:center} .ihero h1{font-size:clamp(2.3rem,5.4vw,3.8rem);color:var(--navy-800);font-weight:800;margin:18px 0 0;line-height:1.05} .rot{display:inline-block;position:relative} .rot-word{display:inline-block;color:var(--wc,#1aa6df);font-weight:800;will-change:transform,opacity} .rot-word.in{animation:rotIn .62s var(--ease)} @keyframes rotIn{0%{opacity:0;transform:translateY(.5em);filter:blur(6px)}100%{opacity:1;transform:none;filter:blur(0)}} .ind-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px} .ind-tab{padding:8px 13px;border:1px solid var(--line);border-radius:999px;font:inherit;font-size:.82rem;font-weight:600; color:var(--ink2);background:#fff;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s} .ind-tab:hover{border-color:#9cc4e4;color:var(--navy-800)} .ind-tab.on{background:var(--navy-800);color:#fff;border-color:var(--navy-800);transform:translateY(-1px)} /* storefront preview */ .shop{--sh:#e0498b;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden; box-shadow:0 2px 6px rgba(11,30,51,.06),0 30px 70px rgba(11,30,51,.18)} .shop-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:linear-gradient(180deg,#fbfdff,#f1f6fb);border-bottom:1px solid var(--line)} .shop-bar i{width:9px;height:9px;border-radius:50%} .shop-bar .r{background:#ff6b6b}.shop-bar .y{background:#ffce5c}.shop-bar .g{background:#34c77b} .shop-url{margin-left:8px;font-size:.74rem;color:#8295a8;font-weight:500} .shop-url .shop-host{color:var(--sh);font-weight:800;transition:color .5s var(--ease)} .shop-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:22px 20px;color:#fff; background:linear-gradient(135deg,var(--sh),color-mix(in srgb,var(--sh) 55%,#0b1e33));transition:background .55s var(--ease)} .shop-kicker{font-size:.6rem;font-weight:800;letter-spacing:.14em;opacity:.85} .shop-tag{font-family:var(--disp);font-weight:800;font-size:1.28rem;margin-top:5px} .shop-cart{font-size:.7rem;font-weight:700;background:rgba(255,255,255,.22);padding:6px 11px;border-radius:999px;white-space:nowrap} .shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px} .prod{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff} .prod .ph{height:52px;border-radius:7px;background:color-mix(in srgb,var(--sh) 15%,#fff);border:1px solid color-mix(in srgb,var(--sh) 24%,#fff);transition:background .5s var(--ease),border-color .5s var(--ease)} .prod .pn{font-size:.76rem;font-weight:600;color:var(--navy-800);margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .prod .pp{font-size:.74rem;color:var(--sh);font-weight:800;margin-top:2px;transition:color .5s var(--ease)} .shop-grid.fade .prod{animation:prodIn .5s var(--ease) both} .shop-grid.fade .prod:nth-child(2){animation-delay:.08s}.shop-grid.fade .prod:nth-child(3){animation-delay:.16s} @keyframes prodIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.rot-word.in,.shop-grid.fade .prod{animation:none}} /* ---------- auto-cycling demo scenes ---------- */ .stage{position:relative;min-height:288px;overflow:hidden} .scene{position:absolute;inset:18px;display:flex;flex-direction:column;opacity:0;transform:translateY(12px) scale(.98);filter:blur(4px); transition:opacity .45s var(--ease),transform .5s var(--ease),filter .45s var(--ease);pointer-events:none} .scene.active{opacity:1;transform:none;filter:none;pointer-events:auto} .rail .step.on{transform:translateX(3px)} .rail .step.on .dot{animation:stepPulse 1.8s var(--ease) infinite} @keyframes stepPulse{0%,100%{box-shadow:0 0 0 0 rgba(26,166,223,.45)}55%{box-shadow:0 0 0 8px rgba(26,166,223,0)}} @media (prefers-reduced-motion:reduce){.rail .step.on .dot{animation:none}} .sc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .sc-t{font-family:var(--disp);font-weight:800;font-size:.98rem;color:var(--navy-800);letter-spacing:-.01em} .sc-badge{font-size:.56rem;font-weight:800;letter-spacing:.08em;padding:4px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.04)} .sc-badge.blue{color:#0284c7;background:#e0f2fe;border:1px solid #bae6fd} .sc-badge.green{color:#059669;background:#d1fae5;border:1px solid #a7f3d0} .sc-badge.ai{color:#fff;background:linear-gradient(135deg,#1aa6df,#6366f1);box-shadow:0 4px 12px rgba(99,102,241,.25)} /* AI scene */ .ai-msg{display:flex;gap:10px;align-items:flex-start} .ai-ava{width:28px;height:28px;flex:0 0 auto;border-radius:9px;background:linear-gradient(135deg,#1aa6df,#6366f1);color:#fff;display:grid;place-items:center;font-size:.85rem;box-shadow:0 4px 10px rgba(26,166,223,.3)} .ai-bubble{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:10px 14px;font-size:.8rem;color:var(--ink);line-height:1.5;box-shadow:0 2px 8px rgba(0,0,0,.03)} .ai-bubble b{color:var(--navy-800);font-weight:700} .spark{width:100%;height:52px;margin-top:14px;display:block;overflow:visible} .spark .spk-line{stroke-dasharray:360;stroke-dashoffset:360} .scene.active .spark .spk-line{animation:draw 1.4s var(--ease) forwards} @keyframes draw{to{stroke-dashoffset:0}} .chips{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap} .chip{font-size:.7rem;font-weight:700;padding:5px 11px;border-radius:999px;opacity:0;display:inline-flex;align-items:center;gap:4px;box-shadow:0 2px 6px rgba(0,0,0,.04)} .scene.active .chip{animation:chipIn .45s var(--ease) forwards} .scene.active .chip:nth-child(2){animation-delay:.14s}.scene.active .chip:nth-child(3){animation-delay:.28s} @keyframes chipIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .chip.up{color:#059669;background:#d1fae5;border:1px solid #a7f3d0} .chip.warn{color:#d97706;background:#fef3c7;border:1px solid #fde68a} .chip.ok{color:#0284c7;background:#e0f2fe;border:1px solid #bae6fd} /* label scene */ .lbl{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff;box-shadow:0 8px 24px rgba(13,42,69,.06)} .lbl-l{flex:1}.lbl-co{font-weight:700;color:var(--navy-800);font-size:.84rem;letter-spacing:-.01em} .lbl-route{font-family:var(--disp);font-weight:800;color:var(--navy-800);font-size:1.18rem;margin:5px 0;display:flex;align-items:center;gap:8px} .lbl-route .r-arrow{color:var(--accent);font-size:1rem} .lbl-meta{font-size:.68rem;color:var(--mut)} .lbl-num{font-family:ui-monospace,monospace;font-size:.68rem;color:#475569;margin-top:10px;letter-spacing:.06em;background:#f1f5f9;padding:3px 8px;border-radius:6px;display:inline-block} .qr-svg{width:56px;height:56px;flex:0 0 auto;color:var(--navy-800);padding:4px;background:#fff;border-radius:10px;border:1px solid #e2e8f0;box-shadow:0 4px 10px rgba(0,0,0,.05)} /* inventory / database scenes with visual progress bars */ .inv-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid #f1f5f9;font-size:.8rem} .inv-row:first-of-type{border-top:0} .inv-info{flex:1;min-width:0} .inv-row .nm{color:var(--navy-800);font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inv-row .nm small{display:block;color:#94a3b8;font-size:.62rem;font-weight:500;margin-top:1px} .inv-pbar{width:100%;height:5px;background:#f1f5f9;border-radius:999px;margin-top:5px;overflow:hidden} .ipb-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#1aa6df,#10b981);transition:width .8s var(--ease)} .ipb-fill.blue{background:linear-gradient(90deg,#3b82f6,#1aa6df)} .inv-num{display:flex;align-items:center;gap:8px;flex:0 0 auto} .inv-row .qty{font-variant-numeric:tabular-nums;font-weight:800;color:var(--navy-800);font-size:.92rem} .inv-row .delta{font-size:.68rem;font-weight:800;padding:2px 8px;border-radius:999px} .inv-row .delta.up{color:#059669;background:#d1fae5;border:1px solid #a7f3d0} .inv-row .delta.down{color:#dc2626;background:#fee2e2;border:1px solid #fecaca} /* ---------- LIVE DATA-FLOW DATABASE ENGINE ---------- */ .db-cinema-stage{position:relative;width:100%;height:175px;margin-top:4px;overflow:hidden;border-radius:14px; background:radial-gradient(120% 95% at 50% 8%,#12324c 0%,#0b1f31 46%,#07131f 100%); box-shadow:inset 0 0 46px rgba(0,0,0,.65),inset 0 1px 0 rgba(120,190,240,.14),0 8px 24px rgba(11,30,51,.25)} .db-cinema-grid{position:absolute;left:-30%;right:-30%;bottom:-10%;height:66%; background-image:linear-gradient(rgba(90,185,240,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(90,185,240,.07) 1px,transparent 1px); background-size:28px 28px;transform:perspective(300px) rotateX(66deg);transform-origin:50% 100%; animation:gridMove 6s linear infinite;pointer-events:none; -webkit-mask-image:linear-gradient(180deg,transparent,#000 65%);mask-image:linear-gradient(180deg,transparent,#000 65%)} @keyframes gridMove{to{background-position:0 28px}} /* soft horizontal scan sweep */ .db-scan{position:absolute;top:0;bottom:0;left:0;width:40%;z-index:5;pointer-events:none;mix-blend-mode:screen; background:linear-gradient(90deg,transparent,rgba(130,215,255,.06) 46%,rgba(180,235,255,.13) 50%,rgba(130,215,255,.06) 54%,transparent); transform:translateX(-80%);animation:dbScan 6.5s ease-in-out infinite} @keyframes dbScan{0%{transform:translateX(-80%)}55%,100%{transform:translateX(300%)}} /* flow wires + streaming packets */ .db-flow{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none} .db-wire{fill:none;stroke-width:1.4;stroke-linecap:round;opacity:.42} .db-wire-dash{fill:none;stroke:rgba(160,225,255,.7);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:1.5 8;animation:wireDash 1.1s linear infinite} @keyframes wireDash{to{stroke-dashoffset:-19}} /* central query router hub */ .db-hub{position:absolute;left:50%;top:27%;transform:translate(-50%,-50%);z-index:6;width:44px;height:44px;display:grid;place-items:center} .db-hub-core{width:30px;height:30px;border-radius:11px;background:linear-gradient(150deg,#4cc4fb,#2563eb);display:grid;place-items:center;color:#fff; box-shadow:0 0 0 1px rgba(160,225,255,.5),0 0 18px rgba(66,175,250,.8),inset 0 1px 0 rgba(255,255,255,.55);animation:hubBreath 2.4s ease-in-out infinite} @keyframes hubBreath{0%,100%{box-shadow:0 0 0 1px rgba(160,225,255,.5),0 0 13px rgba(66,175,250,.6),inset 0 1px 0 rgba(255,255,255,.55)}50%{box-shadow:0 0 0 1px rgba(160,225,255,.75),0 0 27px rgba(66,175,250,.98),inset 0 1px 0 rgba(255,255,255,.65)}} .db-hub::before,.db-hub::after{content:"";position:absolute;width:30px;height:30px;border-radius:12px;border:1.5px solid rgba(96,200,255,.38);animation:hubPing 2.4s ease-out infinite} .db-hub::after{animation-delay:1.2s} @keyframes hubPing{0%{transform:scale(.85);opacity:.6}100%{transform:scale(2.1);opacity:0}} /* database nodes */ .db-iso-group{position:absolute;inset:0;z-index:3} .db-3d-node{position:absolute;top:59%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;animation:nodeFloat 3.6s ease-in-out infinite} .db-3d-node.mongo{left:18.5%} .db-3d-node.postgres{left:50%;animation-delay:.6s} .db-3d-node.redis{left:81.5%;animation-delay:1.2s} @keyframes nodeFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 4px))}} .db-cylinder-stack{position:relative;width:46px;height:44px} .db-node-glow{position:absolute;left:50%;top:9px;width:58px;height:24px;transform:translate(-50%,-50%);border-radius:50%;filter:blur(7px);opacity:0;z-index:0;animation:nodeHit 1.5s ease-out infinite} .db-3d-node.mongo .db-node-glow{background:#00ed64} .db-3d-node.postgres .db-node-glow{background:#4f9fe0} .db-3d-node.redis .db-node-glow{background:#ff5a4d} @keyframes nodeHit{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}14%{opacity:.85;transform:translate(-50%,-50%) scale(1.18)}48%,100%{opacity:0;transform:translate(-50%,-50%) scale(1)}} .db-disc{position:absolute;left:0;width:46px;height:18px;border-radius:50%;background:linear-gradient(180deg,#1aa6df,#0b5c82);box-shadow:0 4px 12px rgba(26,166,223,.4),inset 0 2px 4px rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.4)} .db-disc.d1{top:0;z-index:3} .db-disc.d2{top:11px;z-index:2;opacity:.9;filter:brightness(.88)} .db-disc.d3{top:22px;z-index:1;opacity:.75;filter:brightness(.76)} .db-3d-node.mongo .db-disc{background:linear-gradient(180deg,#00ed64,#00684a);box-shadow:0 4px 14px rgba(0,237,100,.42)} .db-3d-node.postgres .db-disc{background:linear-gradient(180deg,#4f9fe0,#1e3a5f);box-shadow:0 4px 14px rgba(51,103,145,.5)} .db-3d-node.redis .db-disc{background:linear-gradient(180deg,#ff5a4d,#8a1309);box-shadow:0 4px 14px rgba(220,56,45,.5)} .db-disc-logo{position:absolute;top:9px;left:50%;transform:translate(-50%,-50%);z-index:4;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))} .db-hud-pill{margin-top:11px;background:rgba(8,22,36,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(160,225,255,.2);border-radius:10px;padding:5px 11px;text-align:center;box-shadow:0 10px 22px rgba(0,0,0,.5);min-width:74px} .db-hud-name{font-family:var(--disp);font-weight:800;font-size:.72rem;color:#eaf6ff;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap} .db-hud-stat{font-size:.64rem;font-weight:700;color:#8fd3ff;font-variant-numeric:tabular-nums;margin-top:1px} .db-hud-stat b{color:#41e08a;margin-left:4px;font-size:.6rem} /* live query log footer */ .db-cinema-foot{display:flex;align-items:stretch;gap:8px;margin-top:9px} .db-log{flex:1;min-width:0;height:28px;overflow:hidden;border-radius:9px;background:#0a1b2b;border:1px solid #16324a;box-shadow:inset 0 0 14px rgba(0,0,0,.5);position:relative;font-family:ui-monospace,SFMono-Regular,Menlo,monospace} .db-log-track{list-style:none;margin:0;padding:0;animation:dbLog 6s steps(1) infinite} .db-log-track li{height:28px;display:flex;align-items:center;gap:6px;padding:0 11px;font-size:.62rem;color:#9fc0d8;white-space:nowrap} .db-log-track li i{width:6px;height:6px;border-radius:50%;flex:0 0 auto} .db-log-track li i.mongo{background:#00ed64;box-shadow:0 0 6px #00ed64} .db-log-track li i.pg{background:#4f9fe0;box-shadow:0 0 6px #4f9fe0} .db-log-track li i.redis{background:#ff5a4d;box-shadow:0 0 6px #ff5a4d} .db-log-track li b{color:#eaf6ff;font-weight:700} .db-log-track li em{margin-left:auto;color:#6f93ad;font-style:normal} .db-log-track li s{color:#41e08a;text-decoration:none;font-weight:800;margin-left:8px} @keyframes dbLog{0%,14%{transform:translateY(0)}17%,31%{transform:translateY(-28px)}34%,48%{transform:translateY(-56px)}51%,65%{transform:translateY(-84px)}68%,82%{transform:translateY(-112px)}85%,100%{transform:translateY(-140px)}} .db-sync-live{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;font-size:.6rem;font-weight:800;color:#41e08a;background:rgba(16,185,129,.13);border:1px solid rgba(65,224,138,.35);border-radius:9px;padding:0 11px;white-space:nowrap} .db-sync-live i{width:6px;height:6px;border-radius:50%;background:#41e08a;box-shadow:0 0 0 0 rgba(65,224,138,.6);animation:dbDot 1.6s ease-out infinite} @keyframes dbDot{0%{box-shadow:0 0 0 0 rgba(65,224,138,.55)}70%,100%{box-shadow:0 0 0 6px rgba(65,224,138,0)}} @media (prefers-reduced-motion:reduce){ .db-cinema-grid,.db-scan,.db-wire-dash,.db-hub-core,.db-hub::before,.db-hub::after,.db-3d-node,.db-node-glow,.db-log-track,.db-sync-live i{animation:none!important} .db-flow .db-pk{display:none} } /* ============================================================ DARK CINEMATIC LIVE-OPS DEMO (scoped to .second-hero) Turns the whole mock app + all 5 pipeline scenes into a dark, glowing, "live video" experience. ============================================================ */ /* device frame — laptop on desktop, phone on mobile */ .device{position:relative;width:100%;margin-top:4px} .device-screen{position:relative;padding:9px 9px 10px;border-radius:16px; background:linear-gradient(180deg,#2b3646,#161e2a); box-shadow:0 0 0 1px rgba(0,0,0,.45),0 26px 60px rgba(3,10,20,.5),inset 0 1px 0 rgba(255,255,255,.06)} .device-screen::before{content:"";position:absolute;top:4px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:#0a1420;box-shadow:inset 0 0 0 1px rgba(120,190,240,.35)} .device-screen .win{border-radius:9px;animation:none} .device-base{position:relative;height:15px;width:112%;left:-6%;border-radius:0 0 15px 15px; background:linear-gradient(180deg,#3a4655 0%,#232d3a 55%,#19212d 100%); box-shadow:0 16px 24px rgba(3,10,20,.4),inset 0 2px 3px rgba(255,255,255,.08)} .device-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:16%;height:6px;border-radius:0 0 9px 9px;background:linear-gradient(180deg,#1b232f,#28323f)} /* iOS status bar (phone view only) */ .ios-bar{display:none;align-items:center;justify-content:space-between;padding:9px 22px 3px;position:relative;z-index:6} .ios-bar .ios-time{font-weight:800;font-size:.74rem;color:#eaf6ff;letter-spacing:.01em} .ios-bar .ios-ind{display:inline-flex;align-items:center} .ios-bar svg{display:block} /* on-screen navigating cursor */ .win{position:relative} .win-cursor{position:absolute;left:0;top:0;z-index:40;width:22px;height:22px;pointer-events:none;opacity:0; filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));transition:transform .6s cubic-bezier(.5,.05,.2,1),opacity .3s ease;will-change:transform} .win.cursor-on .win-cursor{opacity:1} .win-cursor svg{width:22px;height:22px;display:block} .win-cursor svg path{fill:#fff;stroke:#0a1420;stroke-width:1.5;stroke-linejoin:round} .win-cursor-ring{position:absolute;left:1px;top:1px;width:15px;height:15px;border-radius:50%;border:2px solid #4cc4fb;opacity:0;transform:scale(.35);pointer-events:none} .win-cursor.click .win-cursor-ring{animation:curClick .55s ease-out} @keyframes curClick{0%{opacity:.9;transform:scale(.35)}100%{opacity:0;transform:scale(1.9)}} /* ============================================================ REAL CONSOLE REPLICA (light) — scoped to .second-hero Mirrors the actual operations console: white surfaces, navy dashboard banner, grouped sidebar, KPI stat cards, revenue chart. ============================================================ */ .second-hero .win{background:#fff;border:1px solid #e2e8f0;box-shadow:0 0 0 1px rgba(11,30,51,.04)} .second-hero .win-tb{background:linear-gradient(180deg,#ffffff,#f4f7fb);border-bottom:1px solid #e2e8f0} .second-hero .win-tb b{color:#4a5c6e} .second-hero .win-tb i{box-shadow:inset 0 1px 1px rgba(0,0,0,.15)} .second-hero .ios-bar .ios-time{color:#14233a} .second-hero .ios-bar svg{fill:#14233a} .second-hero .ios-bar svg path,.second-hero .ios-bar svg rect[fill="none"]{stroke:#14233a} .second-hero .win-b{background:#eef1f5;grid-template-columns:148px 1fr} .second-hero .stage{background:#eef1f5} /* ---- sidebar (real console) ---- */ /* Sidebar — matches the REAL console's navy sidebar (sap.css .sidebar / .sb-link) exactly, in every view (desktop, tablet, phone). */ .second-hero .rail{padding:0;background:linear-gradient(180deg,#081522,#102a45 60%,#163655);border-right:0;font-size:.72rem;display:flex;flex-direction:column;overflow:hidden} .second-hero .rail h5{display:none} .rail-ws{padding:10px 11px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.08)} .rail-ws .ws-av{width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:0 0 auto;color:#1aa6df} .rail-ws .ws-av svg{width:15px;height:15px} .rail-ws .ws-tx{min-width:0} .rail-ws .ws-nm{font-family:var(--disp);font-weight:800;font-size:.68rem;color:#fff;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rail-ws .ws-sub{font-size:.46rem;letter-spacing:.08em;text-transform:uppercase;color:#8aa0b6;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rail-nav{padding:8px;flex:1;overflow:hidden} .rail-grp{font-size:.48rem;letter-spacing:.11em;text-transform:uppercase;color:#6f86a0;font-weight:800;margin:8px 4px 4px} .rail-grp:first-child{margin-top:0} .second-hero .rail .step{position:relative;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;color:#b8c6d6;margin-bottom:1px;font-weight:600;font-size:.66rem;cursor:pointer;transition:background .2s,color .2s} .second-hero .rail .step:hover{background:rgba(255,255,255,.06);color:#fff} .second-hero .rail .step.on{background:linear-gradient(90deg,rgba(26,166,223,.34),rgba(26,166,223,.10));color:#fff;box-shadow:inset 3px 0 0 #1aa6df} .second-hero .rail .step.done{color:#cdd9e6} .second-hero .rail .step .dot{width:18px;height:18px;border-radius:0;background:transparent;display:grid;place-items:center;color:#b8c6d6;opacity:.85;box-shadow:none;flex:0 0 auto} .second-hero .rail .step .dot svg{width:13px;height:13px} .second-hero .rail .step.on .dot{background:transparent;color:#fff;opacity:1;box-shadow:none} .second-hero .rail .step .st-badge{margin-left:auto;background:rgba(255,255,255,.14);color:#fff;font-size:.5rem;font-weight:800;border-radius:999px;padding:1px 6px;min-width:14px;text-align:center;line-height:1.5} .second-hero .rail .step.on .st-badge{background:rgba(255,255,255,.28);color:#fff} .second-hero .rail .step + .step::before{display:none} .second-hero .rail .step.on{transform:none} .rail-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;color:#b8c6d6;margin-bottom:1px;font-weight:600;font-size:.66rem} .rail-item .ri-ic{width:18px;height:18px;display:grid;place-items:center;color:#b8c6d6;opacity:.85;flex:0 0 auto} .rail-item .ri-ic svg{width:13px;height:13px} /* ---- scene headers (light) ---- */ .second-hero .sc-t{color:#14233a;font-family:var(--disp);font-weight:800} .second-hero .sc-badge{color:#2f6fb0;background:#e7f0fb;border:1px solid #cfe0f5;box-shadow:none} .second-hero .sc-badge.blue{color:#1488bd;background:#e7f5fc;border:1px solid #bfe6f7;box-shadow:none} .second-hero .sc-badge.green{color:#1f9d6b;background:#e4f6ec;border:1px solid #b7e6cd;box-shadow:none} /* ---- dashboard: navy hero banner ---- */ .dash-hero{background:linear-gradient(115deg,#0b1e33 0%,#123a5c 60%,#1d5a86 100%);border-radius:12px;padding:12px 14px;color:#fff;margin-bottom:10px} .dash-hero .dh-date{font-size:.48rem;letter-spacing:.12em;text-transform:uppercase;color:#8fb4d6;font-weight:700} .dash-hero .dh-greet{font-family:var(--disp);font-weight:800;font-size:1.18rem;margin-top:3px;line-height:1} .dash-hero .dh-sub{font-size:.6rem;color:#b9cde0;margin-top:4px} .dash-hero .dh-chip{display:inline-flex;align-items:center;gap:5px;margin-top:9px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px 9px;font-size:.55rem;color:#dfeaf5} .dash-hero .dh-chip svg{width:10px;height:10px;color:#41e08a} /* ---- KPI stat cards ---- */ .dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:9px} .dk{background:#fff;border:1px solid #e2e8f0;border-radius:11px;padding:9px 10px 0;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(16,42,69,.05)} .dk-top{display:flex;align-items:center;justify-content:space-between} .dk-ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center} .dk-ic svg{width:13px;height:13px} .dk-ic.purple{background:#efe7fb;color:#7a4fb0}.dk-ic.green{background:#e4f6ec;color:#1f9d6b}.dk-ic.gold{background:#f7efdc;color:#c08a1f} .dk-delta{font-size:.52rem;font-weight:700;display:inline-flex;align-items:center;gap:3px;color:#1f9d6b;white-space:nowrap} .dk-delta svg{width:9px;height:9px} .dk-n{font-family:var(--disp);font-weight:800;font-size:1.02rem;color:#14233a;margin-top:7px;line-height:1} .dk-l{font-size:.52rem;color:#6b7a90;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dk-spark{display:block;width:calc(100% + 20px);height:20px;margin:5px -10px 0} .second-hero .scene.active .dk{animation:conRow .5s var(--ease) both} .second-hero .scene.active .dk:nth-child(2){animation-delay:.08s} .second-hero .scene.active .dk:nth-child(3){animation-delay:.16s} /* ---- revenue trend card ---- */ .dash-rev{background:#fff;border:1px solid #e2e8f0;border-radius:11px;padding:11px 12px;box-shadow:0 1px 2px rgba(16,42,69,.05)} .dash-rev .dr-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px} .dash-rev .dr-t{font-family:var(--disp);font-weight:800;font-size:.76rem;color:#14233a} .dash-rev .dr-t small{font-weight:500;color:#93a1b3;font-size:.54rem;margin-left:6px} .dash-rev .dr-up{font-size:.62rem;font-weight:800;color:#1f9d6b;display:inline-flex;align-items:center;gap:3px} .dash-rev .dr-up svg{width:11px;height:11px} .dash-rev .dr-chart{display:block;width:100%;height:66px} .dash-rev .dr-line{fill:none;stroke:#1aa6df;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .dash-rev .dr-dot{fill:#fff;stroke:#1aa6df;stroke-width:2} .second-hero .scene.active .dash-rev .dr-line{stroke-dasharray:520;stroke-dashoffset:520;animation:drawRev 1.6s var(--ease) .1s forwards} @keyframes drawRev{to{stroke-dashoffset:0}} /* ---- white panel wrapping list views ---- */ .con-panel{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:11px 13px;box-shadow:0 1px 2px rgba(16,42,69,.05)} /* ===== authentic operations-console scenes (tables, stat cards, pills) ===== */ .second-hero .con-tools{display:flex;align-items:center;gap:8px;margin-bottom:9px} .second-hero .con-search{flex:1;display:flex;align-items:center;gap:7px;background:#f6f8fb;border:1px solid #e2e8f0;border-radius:8px;padding:6px 10px;color:#8492a6;font-size:.68rem} .second-hero .con-search svg{width:12px;height:12px;flex:0 0 auto;opacity:.7} .second-hero .con-btn{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#1aa6df,#0284c7);color:#fff;border-radius:8px;padding:6px 11px;font-size:.68rem;font-weight:700;white-space:nowrap;box-shadow:0 4px 11px rgba(26,166,223,.3)} .second-hero .con-table{width:100%;border-collapse:collapse} .second-hero .con-table th{text-align:left;font-size:.56rem;text-transform:uppercase;letter-spacing:.04em;color:#93a1b3;font-weight:800;padding:0 8px 7px} .second-hero .con-table td{padding:7px 8px;border-top:1px solid #eef2f7;color:#3a4a60;font-size:.72rem;vertical-align:middle} .second-hero .con-table tbody tr:first-child td{border-top:0} .second-hero .con-table .t-main{font-weight:700;color:#14233a;white-space:nowrap} .second-hero .con-table .t-sub{display:block;color:#93a1b3;font-size:.6rem;font-weight:500;margin-top:1px} .second-hero .con-table .t-r{text-align:right} .second-hero .con-table .num{font-family:var(--disp);font-weight:700;font-variant-numeric:tabular-nums;color:#14233a} .second-hero .pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:.56rem;font-weight:700;white-space:nowrap;line-height:1.6} .second-hero .pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto} .second-hero .pill.paid,.second-hero .pill.delivered,.second-hero .pill.instock,.second-hero .pill.active{color:#1f9d6b;background:#e4f6ec;border:1px solid #b7e6cd} .second-hero .pill.processing,.second-hero .pill.low,.second-hero .pill.transit,.second-hero .pill.pending,.second-hero .pill.hold{color:#c08a1f;background:#fcf2dc;border:1px solid #ecd9a6} .second-hero .pill.overdue,.second-hero .pill.out{color:#c0492f;background:#fbe9e7;border:1px solid #f2c9c1} .second-hero .pill.shipped,.second-hero .pill.new{color:#2f6fb0;background:#e7f0fb;border:1px solid #cfe0f5} .second-hero .con-sec-t{font-size:.6rem;color:#6b7a90;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:2px 0 7px} .second-hero .con-bars{display:flex;align-items:flex-end;gap:7px;height:56px;padding:2px 2px 0} .second-hero .con-bars i{flex:1;background:linear-gradient(180deg,#4cc4fb,#2563eb);border-radius:3px 3px 0 0;opacity:.9;transform-origin:bottom} .second-hero .con-bars i:last-child{background:linear-gradient(180deg,#41e08a,#0f9d63)} .second-hero .scene.active .con-bars i{animation:conBar .6s var(--ease) both} .second-hero .scene.active .con-bars i:nth-child(2){animation-delay:.05s} .second-hero .scene.active .con-bars i:nth-child(3){animation-delay:.1s} .second-hero .scene.active .con-bars i:nth-child(4){animation-delay:.15s} .second-hero .scene.active .con-bars i:nth-child(5){animation-delay:.2s} .second-hero .scene.active .con-bars i:nth-child(6){animation-delay:.25s} .second-hero .scene.active .con-bars i:nth-child(7){animation-delay:.3s} @keyframes conBar{from{transform:scaleY(.15);opacity:0}to{transform:scaleY(1);opacity:.9}} .second-hero .scene.active .con-table tbody tr{animation:conRow .45s var(--ease) both} .second-hero .scene.active .con-table tbody tr:nth-child(2){animation-delay:.06s} .second-hero .scene.active .con-table tbody tr:nth-child(3){animation-delay:.12s} .second-hero .scene.active .con-table tbody tr:nth-child(4){animation-delay:.18s} .second-hero .scene.active .con-card{animation:conRow .5s var(--ease) both} .second-hero .scene.active .con-card:nth-child(2){animation-delay:.08s} .second-hero .scene.active .con-card:nth-child(3){animation-delay:.16s} @keyframes conRow{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}} /* keep the console screens fitting the phone / tablet frames */ @media (max-width:600px){ .second-hero .con-table{table-layout:fixed;width:100%} .second-hero .con-table th,.second-hero .con-table td{padding:6px 4px;font-size:.62rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .second-hero .con-table th{font-size:.5rem;padding-bottom:6px} .second-hero .con-table .t-sub{display:none} .second-hero .con-table .t-main{font-size:.64rem} .second-hero .pill{font-size:.5rem;padding:2px 6px;gap:3px} .second-hero .pill::before{width:4px;height:4px} .second-hero .con-cards{gap:6px;margin-bottom:9px} .second-hero .con-card{padding:8px 8px} .second-hero .con-card .cl{font-size:.52rem} .second-hero .con-card .cv{font-size:.92rem} .second-hero .con-card .cd{font-size:.5rem} .second-hero .con-tools{gap:6px;margin-bottom:7px} .second-hero .con-search{font-size:.58rem;padding:5px 8px} .second-hero .con-btn{font-size:.58rem;padding:5px 9px} .second-hero .con-bars{height:44px} } /* ---- scene 0 · invoice ---- */ .second-hero .inv{background:linear-gradient(180deg,#102a3f,#0c1f31);border:1px solid rgba(120,190,240,.14);box-shadow:0 10px 28px rgba(0,0,0,.4);position:relative;overflow:hidden} .second-hero .inv-top .b1{color:#7fd0ff} .second-hero .inv-top .b1 small{color:#87a6be} .second-hero .inv-top .b2{color:#eaf6ff} .second-hero .inv-top .b2 small{color:#a6c4dc} .second-hero .inv-meta{color:#a6c4dc;border-block:1px solid rgba(120,190,240,.1)} .second-hero .inv-meta .paid{color:#41e08a;background:rgba(65,224,138,.14);border:1px solid rgba(65,224,138,.34)} .second-hero .inv th{color:#6f93ad} .second-hero .inv td{color:#d6e8f7;border-top:1px solid rgba(120,190,240,.09)} .second-hero .inv .tot{color:#eaf6ff;border-top:2px solid rgba(120,190,240,.2)} .second-hero .scene.active .inv tbody tr{animation:rowIn .5s var(--ease) both} .second-hero .scene.active .inv tbody tr:nth-child(2){animation-delay:.16s} @keyframes rowIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}} .inv-stamp{position:absolute;right:16px;top:50%;font-family:var(--disp);font-weight:900;font-size:1.15rem;letter-spacing:.08em;text-transform:uppercase;color:#41e08a;border:2.5px solid #41e08a;border-radius:9px;padding:3px 12px;opacity:0;transform:translateY(-50%) rotate(-12deg) scale(1.6);text-shadow:0 0 12px rgba(65,224,138,.5);box-shadow:0 0 18px rgba(65,224,138,.25),inset 0 0 12px rgba(65,224,138,.12)} .second-hero .scene.active .inv-stamp{animation:stampDrop .55s var(--ease) .75s both} @keyframes stampDrop{0%{opacity:0;transform:translateY(-50%) rotate(-12deg) scale(1.8)}55%{opacity:1;transform:translateY(-50%) rotate(-12deg) scale(.9)}100%{opacity:.95;transform:translateY(-50%) rotate(-12deg) scale(1)}} /* ---- scene 1 · AI finance ---- */ .second-hero .ai-ava{box-shadow:0 0 16px rgba(76,196,251,.5)} .second-hero .ai-bubble{background:rgba(15,34,54,.75);border:1px solid rgba(120,190,240,.18);color:#dcecfb;box-shadow:0 6px 18px rgba(0,0,0,.32)} .second-hero .ai-bubble b{color:#fff} .type-caret{display:inline-block;width:2px;height:.95em;background:#4cc4fb;margin-left:1px;vertical-align:-1px;box-shadow:0 0 6px #4cc4fb;animation:caretBlink 1s steps(1) infinite} @keyframes caretBlink{50%{opacity:0}} .second-hero .chip.up{color:#41e08a;background:rgba(65,224,138,.14);border:1px solid rgba(65,224,138,.34)} .second-hero .chip.warn{color:#ffbf66;background:rgba(255,180,84,.14);border:1px solid rgba(255,180,84,.34)} .second-hero .chip.ok{color:#8fd3ff;background:rgba(76,196,251,.14);border:1px solid rgba(76,196,251,.32)} .spk-dot{fill:#eafaff;filter:drop-shadow(0 0 5px #4cc4fb)} .second-hero .spark .spk-line{filter:drop-shadow(0 0 4px rgba(26,166,223,.6))} /* ---- scene 2 · shipment label ---- */ .second-hero .lbl{background:linear-gradient(180deg,#102a3f,#0c1f31);border:1px solid rgba(120,190,240,.14);box-shadow:0 10px 28px rgba(0,0,0,.4)} .second-hero .lbl-co{color:#eaf6ff} .second-hero .lbl-route{color:#eaf6ff} .second-hero .lbl-route .r-arrow{color:#4cc4fb} .second-hero .lbl-meta{color:#a6c4dc} .second-hero .lbl-num{color:#c7dced;background:rgba(120,190,240,.1)} .second-hero .qr-svg{color:#eaf6ff;background:#0c1f31;border:1px solid rgba(120,190,240,.16);box-shadow:0 4px 10px rgba(0,0,0,.3)} .second-hero .toast{color:#41e08a;background:rgba(65,224,138,.13);border:1px solid rgba(65,224,138,.34);box-shadow:0 4px 12px rgba(65,224,138,.12)} .route{margin-top:12px;background:linear-gradient(180deg,#0f2739,#0b1c2e);border:1px solid rgba(120,190,240,.14);border-radius:12px;padding:9px 13px 7px} .route-svg{width:100%;height:32px;display:block;overflow:visible} .route-line{fill:none;stroke:rgba(120,190,240,.26);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 5} .route-line-lit{fill:none;stroke:#4cc4fb;stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 4px #4cc4fb);stroke-dasharray:120;stroke-dashoffset:120} .second-hero .scene.active .route-line-lit{animation:routeDraw 2s var(--ease) infinite} @keyframes routeDraw{0%{stroke-dashoffset:120}60%,100%{stroke-dashoffset:0}} .route-node{fill:#0b1c2e;stroke-width:2} .route-node.a{stroke:#4cc4fb}.route-node.b{stroke:#41e08a} .route-truck{fill:#eafaff;filter:drop-shadow(0 0 5px rgba(76,196,251,.9))} .route-cities{display:flex;align-items:center;justify-content:space-between;font-size:.62rem;color:#a6c4dc;font-weight:700;margin-top:3px} .route-cities b{color:#eaf6ff} .route-live{display:inline-flex;align-items:center;gap:5px;color:#41e08a} .route-live i{width:5px;height:5px;border-radius:50%;background:#41e08a;box-shadow:0 0 0 0 rgba(65,224,138,.6);animation:dbDot 1.6s ease-out infinite} /* ---- scene 3 · inventory ---- */ .second-hero .inv-row{border-top:1px solid rgba(120,190,240,.1)} .second-hero .inv-row:first-of-type{border-top:0} .second-hero .inv-row .nm{color:#eaf6ff} .second-hero .inv-row .nm small{color:#87a6be} .second-hero .inv-pbar{background:rgba(120,190,240,.13)} .second-hero .inv-row .qty{color:#eaf6ff} .second-hero .inv-row .delta.up{color:#41e08a;background:rgba(65,224,138,.14);border:1px solid rgba(65,224,138,.34)} .second-hero .inv-row .delta.down{color:#ff8478;background:rgba(255,90,77,.14);border:1px solid rgba(255,90,77,.36)} .second-hero .scene.active .ipb-fill{transform-origin:left center;animation:barFill 1s var(--ease) both} @keyframes barFill{from{transform:scaleX(.04)}to{transform:scaleX(1)}} @media (prefers-reduced-motion:reduce){ .second-hero .scene.active .inv tbody tr,.second-hero .scene.active .inv-stamp,.second-hero .scene.active .route-line-lit,.second-hero .scene.active .ipb-fill,.type-caret,.route-truck animateMotion{animation:none!important} .inv-stamp{opacity:.95;transform:translateY(-50%) rotate(-12deg)} } @media(max-width:860px){ .hero .wrap{grid-template-columns:1fr}.ihero .wrap{grid-template-columns:1fr}.ihero-vis{order:-1} .grid{grid-template-columns:1fr}.help{grid-template-columns:1fr 1fr} .band-grid{grid-template-columns:1fr;gap:10px}.merge{margin:8px auto 0;height:250px} .nums-strip{grid-template-columns:1fr;gap:20px;text-align:center}.nums-strip span{max-width:none} .nav .lnk{display:none} } /* ---- real sign-in form (revealed by "Continue with email") ---- */ .wcx-realform{margin-top:14px;background:#fff;border-radius:14px;padding:20px 20px 18px;box-shadow:0 30px 70px rgba(0,0,0,.4);text-align:left} .wcx-realform[hidden]{display:none} .wcx-realform h2{font-family:var(--disp);font-size:1.24rem;color:var(--navy-800);margin:0 0 3px;font-weight:800;letter-spacing:-.01em} .wcx-realform .lc-sub{color:var(--mut);font-size:.86rem;margin:0 0 15px} .wcx-realform .field{margin-bottom:12px} .wcx-realform label{display:block;font-size:.78rem;font-weight:600;color:var(--navy-700);margin-bottom:5px} .wcx-realform .input{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:.95rem;color:var(--ink);background:#fff;outline:none;transition:border-color .15s} .wcx-realform .input:focus{border-color:#9cc4e4} .wcx-realform .btn-primary{width:100%;padding:12px;border:0;border-radius:11px;background:var(--accent);color:#fff;font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;margin-top:2px;transition:background .16s,transform .16s} .wcx-realform .btn-primary:hover{background:#3bb8ea;transform:translateY(-1px)} .wcx-realform .login-err{display:none;background:#fdecea;color:#c0392b;border:1px solid #f5c6cb;border-radius:9px;padding:9px 12px;font-size:.85rem;margin-bottom:12px} .wcx-realform .login-err.show{display:block} .wcx-realform-alt{margin-top:14px;text-align:center;font-size:.85rem;color:var(--mut)} .wcx-realform-alt a{color:var(--accent);font-weight:600;text-decoration:none} /* ============================================================ TABLET & LANDSCAPE PHONE — iPad Frame + Height Fit ============================================================ */ @media (min-width: 601px) and (max-width: 1180px), (max-height: 550px) and (orientation: landscape) { .second-hero .wrap { grid-template-columns: 1fr; } .second-hero .wrap > * { min-width: 0; } .device, .device-screen, .second-hero .win, .second-hero .win-b, .second-hero .stage { min-width: 0; } .device { width: min(800px, 90vw, calc((100vh - 120px) * 1.33 + 48px)); max-width: none; margin: 16px auto 0; padding: 20px; border-radius: 28px; background: linear-gradient(145deg, #434952 0%, #20242b 44%, #111419 100%); box-shadow: 0 0 0 1px rgba(0,0,0,.65), inset 0 2px 2px rgba(255,255,255,.16), inset 0 -3px 7px rgba(0,0,0,.55), 0 34px 66px rgba(3,10,20,.62); } .device::before, .device::after { display: none; } .device-screen { position: relative; aspect-ratio: 4/3; padding: 0; border-radius: 12px; overflow: hidden; display: flex; background: #0a1a2b; box-shadow: inset 0 0 0 2px #05080d, inset 0 0 0 4px #171b22; } .device-screen::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1px rgba(120,190,240,.35); z-index: 50; } .device-screen::after { display: none; } .device-base { display: none; } .device-screen .win { flex: 1; display: flex; flex-direction: column; border-radius: 12px; border: 0; overflow: hidden; max-width: none; } .second-hero .win { max-width: 100%; } .ios-bar { display: none; } } @media (max-height: 550px) and (orientation: landscape) { .scrolly-pin { align-items: flex-start; padding-top: 10px; } .sc-screen { height: calc(100vh - 60px); width: auto; max-width: 100%; max-height: 400px; aspect-ratio: 16/10; } .scrolly-copy blockquote { font-size: clamp(1rem, 4vh, 1.3rem); margin-top: 10px; line-height: 1.3; } .scrolly-grid { grid-template-columns: 1fr 1fr !important; gap: 20px; } .scrolly-vis { order: 0 !important; } .inx-pin { align-items: flex-start; padding-top: 10px; } .inx-main { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px; align-items: center; } .inx-name-wrap { order: unset !important; height: auto !important; min-height: 0 !important; } .inx-tag { order: unset !important; height: auto !important; min-height: 0 !important; margin-top: 4px; } .inx-right { order: unset !important; max-width: none !important; margin: 0 !important; width: auto !important; } .inx-cta { order: unset !important; margin-top: 10px; padding: 10px 18px; font-size: 0.85rem; width: auto !important; } .inx-card { height: calc(100vh - 80px); width: auto; max-width: 100%; max-height: 400px; display: flex; flex-direction: column; justify-content: flex-start; } .inx-card-hero { padding: 10px 12px; } .inx-card-grid { padding: 8px; gap: 6px; } .inx-prod .ph { height: 30px; } .inx-name { font-size: clamp(2rem, 8vh, 3rem); line-height: 1; margin: 0; } .inx-name-wrap { padding-bottom: 0; } .inx-tag { font-size: clamp(0.9rem, 3vh, 1.1rem); margin-top: 8px; } .inx-cta { margin-top: 10px; padding: 10px 18px; font-size: 0.85rem; } .inx-top { margin-bottom: 10px; } .inx-dots { margin-top: 10px; } } /* ============================================================ MOBILE FIT-UP (<=600px) — keep every section inside the viewport on phones without touching the desktop/tablet layout defined above. Grid children get min-width:0 so the 1-column hero can actually shrink instead of overflowing, and the decorative browser mockups drop to 2 columns. ============================================================ */ @media (max-width:600px){ .nav{gap:6px;padding:11px 10px} /* same as home's phone nav */ .brand{font-size:1rem;gap:6px} .brand svg{width:22px;height:22px} .lang-dropdown{display:inline-block} .nav .lang-trigger{min-width:0;padding:8px 10px;font-size:.78rem} .nav .btn-g{margin-left:auto} .nav .btn-g,.nav .btn-d{padding:8px 9px;font-size:.72rem;line-height:1.15;text-align:center;max-width:74px} .chero{min-height:auto} .chero-grid>*{min-width:0} .chero-auth{max-width:none} .chero-h{font-size:clamp(2.1rem,9vw,3rem)} /* Compact, fixed screen so the live-build animation fills in place (like a phone screen) — never grows/shrinks and stays small enough for mobile. */ .cdemo-site{height:360px} .cdemo-body{min-height:auto} .cdemo-cards{grid-template-columns:1fr 1fr;gap:10px} .site-grid{grid-template-columns:repeat(3,1fr);gap:7px;padding:11px 12px 48px} .site-hero{min-height:0;padding:14px 15px;margin:12px 12px 0} .site-title{font-size:1.25rem} .site-head{padding:11px 14px} /* "Your store speaks …" — drop the tall dead space and let the headline + rotating language fill the screen width on phones. Heading needs .langs prefix to beat the .langs h2 rule. */ .langs{min-height:auto;padding:56px 0} .langs .wrap{padding:0 18px} .langs .speaks-h{font-size:clamp(2rem,9vw,3rem)} .langs .speaks-word{font-size:clamp(3.4rem,20vw,6rem)} .langs .lead{font-size:1rem} /* --- live-ops demo on phones: iPhone frame + stacked stepper --- */ .second-hero{padding:20px 0 28px} .second-hero .wrap{grid-template-columns:1fr;gap:14px} .second-hero .wrap > *{min-width:0} .device,.device-screen,.second-hero .win,.second-hero .win-b,.second-hero .stage{min-width:0} .second-hero .win{max-width:100%} .second-hero .rail{display:flex;flex-direction:column;align-items:center;gap:0;padding:9px 4px;border-right:1px solid rgba(255,255,255,.08);border-bottom:0;width:46px} .second-hero .rail h5{display:none} .second-hero .rail .step{font-size:0;margin:0;padding:0;color:transparent;background:none!important;box-shadow:none!important;flex:0 0 auto} .second-hero .rail .step:hover{background:none!important} .second-hero .rail .step .dot{width:27px;height:27px;border-radius:9px} .second-hero .rail .step + .step::before{content:"";position:static;display:block;flex:0 0 auto;width:13px;height:2px;top:auto;left:auto;background:rgba(120,190,240,.22);border-radius:2px;margin:0 3px} .second-hero .rail .step.done + .step::before{background:linear-gradient(90deg,#41e08a,rgba(120,190,240,.28))} .second-hero .stage{padding:15px} .second-hero .inv-top .b1,.second-hero .inv-top .b2{font-size:.98rem} .second-hero .lbl{gap:10px;padding:13px} .second-hero .qr-svg{width:48px;height:48px} .second-hero .sc-t{font-size:.9rem} .second-hero .sc-badge{font-size:.5rem;padding:3px 7px} /* phones keep the sidebar on the LEFT (like iPad/laptop) — a compact, blue icon rail. Labels/groups/workspace header are hidden for room. */ .second-hero .rail-ws,.second-hero .rail-grp,.second-hero .rail-item{display:none} .second-hero .rail-nav{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;flex:0 0 auto} .second-hero .rail .step{border-radius:9px;padding:0} .second-hero .rail .step .st-badge{display:none} .second-hero .rail .step + .step::before{display:none} .second-hero .rail .step .dot{width:30px;height:30px;background:#e7f5fc;color:#1aa6df;border-radius:9px} .second-hero .rail .step .dot svg{width:16px;height:16px} .second-hero .rail .step.on .dot{background:linear-gradient(135deg,#1aa6df,#0284c7);color:#fff;box-shadow:0 4px 11px rgba(26,166,223,.45)} /* dashboard components fitted to the phone screen */ .second-hero .dash-hero{padding:10px 11px;margin-bottom:8px} .second-hero .dash-hero .dh-greet{font-size:.98rem} .second-hero .dash-hero .dh-sub{font-size:.55rem} .second-hero .dash-hero .dh-chip{font-size:.5rem} .second-hero .dash-kpis{gap:5px;margin-bottom:8px} .second-hero .dk{padding:7px 7px 0} .second-hero .dk-ic{width:19px;height:19px;border-radius:6px} .second-hero .dk-ic svg{width:11px;height:11px} .second-hero .dk-n{font-size:.82rem} .second-hero .dk-l{font-size:.46rem} .second-hero .dk-delta{font-size:.44rem} .second-hero .dk-spark{height:15px} .second-hero .dash-rev .dr-chart{height:52px} .second-hero .con-panel{padding:9px 10px} /* iPhone body */ .device{width:min(360px,94vw);max-width:none;margin:6px auto 0;padding:10px;border-radius:52px; background:linear-gradient(145deg,#434952 0%,#20242b 44%,#111419 100%); box-shadow:0 0 0 1px rgba(0,0,0,.65),inset 0 2px 2px rgba(255,255,255,.16),inset 0 -3px 7px rgba(0,0,0,.55),0 34px 66px rgba(3,10,20,.62)} .device::before{content:"";position:absolute;left:-2px;top:116px;width:3px;height:24px;border-radius:3px;background:#2c333c;box-shadow:0 38px 0 #2c333c,0 74px 0 #2c333c} .device::after{content:"";position:absolute;right:-2px;top:150px;width:3px;height:52px;border-radius:3px;background:#2c333c} /* screen — true portrait proportions */ .device-screen{position:relative;aspect-ratio:9/19.5;padding:0;border-radius:46px;overflow:hidden;display:flex; background:#0a1a2b;box-shadow:inset 0 0 0 2px #05080d,inset 0 0 0 4px #171b22} .device-screen::after{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:86px;height:26px;border-radius:99px;background:#000;z-index:40;box-shadow:0 0 0 1px rgba(255,255,255,.05)} .device-screen::before{content:"";position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:38%;height:5px;border-radius:99px;background:rgba(235,246,255,.6);z-index:40} .device-base{display:none} /* the console app fills the screen */ .device-screen .win{flex:1;display:flex;flex-direction:column;border-radius:46px;border:0;overflow:hidden;max-width:none} .ios-bar{display:flex} .second-hero .win-tb i{display:none} .second-hero .win-tb{justify-content:center;padding:8px 16px 9px} .second-hero .win-b{display:flex;flex-direction:row;flex:1;min-height:0;min-width:0} .second-hero .rail{flex:0 0 46px} .second-hero .stage{flex:1 1 auto;min-height:0;min-width:0} .second-hero .scene{inset:12px 12px 22px;display:flex;flex-direction:column;justify-content:flex-start} /* touch tap ripple instead of a mouse pointer */ .win-cursor svg{display:none} .win-cursor{filter:none} .win-cursor-ring{left:-5px;top:-5px;width:26px;height:26px;border-width:2.5px;border-color:#4cc4fb} .win-cursor.click .win-cursor-ring{animation:curTap .55s ease-out} } @keyframes curTap{0%{opacity:.85;transform:scale(.25)}100%{opacity:0;transform:scale(2)}}