/* ============================================================ SINGUARD — SHARED DESIGN SYSTEM (fusion redesign) One stylesheet for all main pages. Light + Dark themes. Theme is set as by /site.js (falls back to prefers-color-scheme when JS is unavailable). ============================================================ */ /* ============================================================ TOKENS ============================================================ */ :root{ --font-sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --bg:#fbfbfd; --surface:#ffffff; --card-bg:rgba(255,255,255,.72); --card-bg-solid:#ffffff; --ink:#0a0f1c; --ink-2:#1e293b; --muted:#5f6b81; --muted-2:#94a3b8; --line:#e6e9f0; --line-soft:#f1f2f6; --line-strong:#cfd6e4; --blue:#0271e3; --blue-600:#0159bd; --blue-soft:rgba(2,113,227,.10); --indigo:#0a5fd0; --violet:#0a3f9e; --emerald:#0b9a6d; --red:#e5484d; --amber:#b45309; --grad-a:#0271e3; --grad-b:#0a5fd0; --grad-c:#0a3f9e; --nav-bg:rgba(251,251,253,.78); --overlay:rgba(10,15,28,.22); --btn-bg:#0a0f1c; --btn-line:#0a0f1c; --btn-ink:#ffffff; --btn-hover:#182238; --sel-bg:#0a0f1c; --sel-ink:#ffffff; --theme-color:#fbfbfd; --tag-blue-bg:rgba(2,113,227,.07); --tag-blue-line:rgba(2,113,227,.28); --tag-blue-ink:#0159bd; --tag-indigo-bg:rgba(10,95,208,.07); --tag-indigo-line:rgba(10,95,208,.28); --tag-indigo-ink:#0a5fd0; --tag-em-bg:rgba(12,166,120,.10); --tag-em-line:rgba(12,166,120,.25); --tag-em-ink:#0b9a6d; --chip-g-bg:#e7f7f1; --chip-g-ink:#0b9a6d; --chip-a-bg:#fdf5e2; --chip-a-ink:#b7791f; --chip-b-bg:#e9efff; --chip-b-ink:#2962ff; --radius-s:6px; --radius:8px; --radius-l:10px; --radius-xl:14px; --ease:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.4,0,.2,1); --shadow-s:0 1px 2px rgba(10,15,28,.03),0 2px 6px -3px rgba(10,15,28,.04); --shadow-m:0 2px 8px -3px rgba(10,15,28,.07); --shadow-l:0 4px 14px -6px rgba(10,15,28,.09); --glow-blue:none; --max:1100px; /* window mocks follow the theme: white terminal in light, dark in dark */ --win-bg:#ffffff; --win-bg-2:#f7f9fc; --win-line:#e5e8ef; --win-line-soft:#eef0f5; --win-ink:#0a0f1c; --win-muted:#5f6b81; --win-muted-2:#94a3b8; --win-up:#0b9a6d; --win-dn:#e5484d; --win-accent:#0271e3; --win-cyan:#0e93b5; --win-head:rgba(10,15,28,.025); --win-tile:rgba(10,15,28,.028); --win-grid:rgba(10,15,28,.07); --win-on:rgba(10,15,28,.05); --win-track:rgba(10,15,28,.08); --win-shadow:0 3px 10px -4px rgba(10,15,28,.08); } /* ---------- dark theme tokens ---------- */ [data-theme="dark"]{ --win-bg:#0b0e13; --win-bg-2:#0e1219; --win-line:rgba(255,255,255,.08); --win-line-soft:rgba(255,255,255,.055); --win-ink:#e8edf6; --win-muted:#8b96ab; --win-muted-2:#5d6a80; --win-up:#0b9a6d; --win-dn:#e5484d; --win-accent:#4da3ff; --win-cyan:#31d3e8; --win-head:rgba(255,255,255,.025); --win-tile:rgba(255,255,255,.03); --win-grid:rgba(255,255,255,.05); --win-on:rgba(255,255,255,.05); --win-track:rgba(255,255,255,.08); --win-shadow:0 3px 12px -4px rgba(0,0,0,.3); --bg:#050608; --surface:#0b0e13; --card-bg:rgba(255,255,255,.024); --card-bg-solid:#0c0f15; --ink:#f2f5fa; --ink-2:#c9d3e4; --muted:#8b96ab; --muted-2:#5d6a80; --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.055); --line-strong:rgba(255,255,255,.18); --blue:#3d97ff; --blue-600:#6db4ff; --blue-soft:rgba(61,151,255,.12); --indigo:#7c9bff; --violet:#a5b4fc; --emerald:#0b9a6d; --red:#e5484d; --amber:#f0a742; --grad-a:#6db4ff; --grad-b:#7c9bff; --grad-c:#b7c6ff; --nav-bg:rgba(5,6,8,.72); --overlay:rgba(0,0,0,.5); --btn-bg:#0d1117; --btn-line:rgba(255,255,255,.14); --btn-ink:#ffffff; --btn-hover:#161c26; --sel-bg:#3d97ff; --sel-ink:#04070c; --theme-color:#050608; --tag-blue-bg:rgba(61,151,255,.10); --tag-blue-line:rgba(61,151,255,.30); --tag-blue-ink:#8cc2ff; --tag-indigo-bg:rgba(124,155,255,.10);--tag-indigo-line:rgba(124,155,255,.30);--tag-indigo-ink:#aebfff; --tag-em-bg:rgba(11,154,109,.08); --tag-em-line:rgba(11,154,109,.28); --tag-em-ink:#0b9a6d; --chip-g-bg:rgba(11,154,109,.12); --chip-g-ink:#0b9a6d; --chip-a-bg:rgba(240,167,66,.12); --chip-a-ink:#f0a742; --chip-b-bg:rgba(61,151,255,.12); --chip-b-ink:#8cc2ff; --shadow-s:0 1px 3px rgba(0,0,0,.25); --shadow-m:0 2px 8px -3px rgba(0,0,0,.3); --shadow-l:0 4px 14px -6px rgba(0,0,0,.35); --glow-blue:none; } /* no-JS fallback: follow the OS */ @media (prefers-color-scheme:dark){ :root:not([data-theme]){ --bg:#050608; --surface:#0b0e13; --card-bg:rgba(255,255,255,.024); --card-bg-solid:#0c0f15; --ink:#f2f5fa; --ink-2:#c9d3e4; --muted:#8b96ab; --muted-2:#5d6a80; --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.055); --line-strong:rgba(255,255,255,.18); --blue:#3d97ff; --blue-600:#6db4ff; --blue-soft:rgba(61,151,255,.12); --indigo:#7c9bff; --violet:#a5b4fc; --emerald:#0b9a6d; --red:#e5484d; --amber:#f0a742; --grad-a:#6db4ff; --grad-b:#7c9bff; --grad-c:#b7c6ff; --nav-bg:rgba(5,6,8,.72); --overlay:rgba(0,0,0,.5); --btn-bg:#0d1117; --btn-line:rgba(255,255,255,.14); --btn-ink:#fff; --btn-hover:#161c26; --sel-bg:#3d97ff; --sel-ink:#04070c; --theme-color:#050608; --tag-blue-bg:rgba(61,151,255,.10); --tag-blue-line:rgba(61,151,255,.30); --tag-blue-ink:#8cc2ff; --tag-indigo-bg:rgba(124,155,255,.10); --tag-indigo-line:rgba(124,155,255,.30); --tag-indigo-ink:#aebfff; --tag-em-bg:rgba(11,154,109,.08); --tag-em-line:rgba(11,154,109,.28); --tag-em-ink:#0b9a6d; --chip-g-bg:rgba(11,154,109,.12); --chip-g-ink:#0b9a6d; --chip-a-bg:rgba(240,167,66,.12); --chip-a-ink:#f0a742; --chip-b-bg:rgba(61,151,255,.12); --chip-b-ink:#8cc2ff; --shadow-s:0 1px 3px rgba(0,0,0,.25); --shadow-m:0 2px 8px -3px rgba(0,0,0,.3); --shadow-l:0 4px 14px -6px rgba(0,0,0,.35); --glow-blue:none; --win-bg:#0b0e13; --win-bg-2:#0e1219; --win-line:rgba(255,255,255,.08); --win-line-soft:rgba(255,255,255,.055); --win-ink:#e8edf6; --win-muted:#8b96ab; --win-muted-2:#5d6a80; --win-up:#0b9a6d; --win-dn:#e5484d; --win-accent:#4da3ff; --win-cyan:#31d3e8; --win-head:rgba(255,255,255,.025); --win-tile:rgba(255,255,255,.03); --win-grid:rgba(255,255,255,.05); --win-on:rgba(255,255,255,.05); --win-track:rgba(255,255,255,.08); --win-shadow:0 3px 12px -4px rgba(0,0,0,.3); } } /* ============================================================ RESET ============================================================ */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:15px;overflow-x:clip;background:var(--bg)} body{ font-family:var(--font-sans); background:var(--bg); color:var(--ink); font-weight:450; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; transition:background-color .35s var(--ease-soft),color .35s var(--ease-soft); } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} input{font:inherit} ::selection{background:var(--sel-bg);color:var(--sel-ink)} :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px} /* ============================================================ ATMOSPHERE — light: white aurora · dark: deep corner glows ============================================================ */ .atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--bg);transition:background-color .35s var(--ease-soft)} .aurora{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;will-change:transform;transform:translateZ(0);transition:opacity .5s} .a1{width:52vw;height:52vw;top:-16vw;left:-12vw; background:radial-gradient(circle at 30% 30%,#c7d9ff 0%,#dbe6ff 42%,transparent 70%); animation:drift1 26s var(--ease-soft) infinite alternate} .a2{width:46vw;height:46vw;top:8vh;right:-14vw; background:radial-gradient(circle at 60% 40%,#dbe4ff 0%,#e9edff 45%,transparent 70%); animation:drift2 32s var(--ease-soft) infinite alternate} .a3{width:44vw;height:44vw;bottom:-8vw;left:22vw; background:radial-gradient(circle at 50% 50%,#d3ecf5 0%,#e6f6fa 45%,transparent 70%); opacity:.4;animation:drift3 38s var(--ease-soft) infinite alternate} [data-theme="dark"] .a1{background:radial-gradient(circle at 30% 30%,rgba(2,84,183,.42) 0%,rgba(2,60,140,.22) 45%,transparent 70%);opacity:.55} [data-theme="dark"] .a2{background:radial-gradient(circle at 60% 40%,rgba(64,76,214,.32) 0%,rgba(50,58,160,.16) 45%,transparent 70%);opacity:.5} [data-theme="dark"] .a3{background:radial-gradient(circle at 50% 50%,rgba(13,148,136,.2) 0%,rgba(13,148,136,.08) 45%,transparent 70%);opacity:.35} @keyframes drift1{to{transform:translate3d(9vw,7vh,0) scale(1.14)}} @keyframes drift2{to{transform:translate3d(-8vw,10vh,0) scale(.88)}} @keyframes drift3{to{transform:translate3d(6vw,-8vh,0) scale(1.1)}} .grain{ position:absolute;inset:0;opacity:.028;animation:grain 8s steps(6) infinite; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); } [data-theme="dark"] .grain{opacity:.05} @keyframes grain{ 0%,100%{transform:translate(0,0)} 16%{transform:translate(-2%,-3%)} 33%{transform:translate(-4%,2%)} 50%{transform:translate(2%,-4%)} 66%{transform:translate(-1%,3%)} 83%{transform:translate(3%,1%)} } /* ============================================================ LAYOUT + TYPE (FusionAI voice: big, medium-weight, calm) ============================================================ */ .wrap{max-width:var(--max);margin-inline:auto;padding-inline:24px;position:relative;z-index:2;min-width:0} .hero-grid>*,.proj-grid>*,.bento>*,.fgroups>*,.pricing>*,.jsteps>*,.ba-grid>*,.proj-side>*{min-width:0} .card{max-width:100%} .section{padding:64px 0;position:relative} h1,h2,h3,h4{letter-spacing:-.024em;line-height:1.05;font-weight:550} .h2{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:600;letter-spacing:-.03em} .serif{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit} .grad{ background:linear-gradient(100deg,var(--grad-a) 0%,var(--grad-b) 45%,var(--grad-c) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .lede{color:var(--muted);font-size:clamp(.98rem,1.35vw,1.14rem);max-width:none;font-weight:450;line-height:1.6} .head{max-width:none;margin-bottom:clamp(26px,3.5vw,38px)} .head .h2{margin-bottom:14px} /* eyebrow → outlined caption pill with a soft accent glow */ .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-sans);font-size:11.5px;font-weight:700; letter-spacing:.13em;text-transform:uppercase; color:var(--blue);margin-bottom:16px; } .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none;animation:dotPing 2s var(--ease) infinite} @keyframes dotPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--blue) 40%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}} .head::after{content:"";display:block;height:1px;background:var(--line);margin-top:clamp(22px,3vw,34px)} /* ============================================================ SURFACES ============================================================ */ .card{ position:relative;background:var(--card-bg); backdrop-filter:blur(20px) saturate(1.35); -webkit-backdrop-filter:blur(20px) saturate(1.35); border:1px solid var(--line); border-radius:var(--radius-l); overflow:visible; transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease),background-color .35s var(--ease-soft); } .card:hover{border-color:var(--line-strong)} .card > *{position:relative;z-index:1} .dark{background:#0b0e13;border-color:rgba(255,255,255,.09);color:#fff} .dark p{color:#8d99ad} /* ============================================================ BUTTONS (rounded-rect, glowing hairline — reference style) ============================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:11px 16px;border-radius:6px;font-weight:600;font-size:1rem; letter-spacing:-.005em;position:relative;overflow:hidden;white-space:nowrap; transition:box-shadow .35s var(--ease),background-color .3s,color .3s,border-color .3s,transform .3s var(--ease); } .btn span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px} .btn-primary{background:var(--blue);color:#fff;border:1px solid var(--blue)} .btn-primary:hover{background:var(--blue-600);border-color:var(--blue-600)} .btn-ghost{ background:var(--card-bg);border:1px solid var(--line);color:var(--ink); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .btn-ghost:hover{border-color:var(--line-strong);box-shadow:var(--shadow-s)} .btn-white{background:#fff;color:#0a0f1c;border:1px solid #fff} .btn-white:hover{background:#eef1f6} .btn-sm{padding:8px 12px;font-size:.87rem;border-radius:6px} .arw{display:inline-block} .link{ display:inline-flex;align-items:center;gap:8px;font-weight:650;font-size:.9rem;color:var(--blue); width:fit-content;margin-top:20px;position:relative;padding-bottom:3px; } .cardlink{display:flex;flex-direction:column} .cardlink h3{font-size:1.2rem} .cardlink .link{color:var(--blue)} /* ============================================================ NAV ============================================================ */ .progress{ position:fixed;top:0;left:0;height:2px;z-index:100;width:100%; transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--grad-a),var(--grad-b),var(--grad-c)); } .nav{ position:fixed;top:0;left:0;right:0;z-index:90; transition:background-color .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s; border-bottom:1px solid transparent; } .nav.stuck{ background:var(--nav-bg); backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); border-bottom-color:var(--line); } .nav.menu-open{border-bottom-color:transparent;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none} body.menu-lock{overflow:hidden} body.menu-lock::after{content:"";position:fixed;inset:0;z-index:88;background:var(--overlay);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .nav-in{max-width:var(--max);margin-inline:auto;padding:12px 24px;display:flex;align-items:center;justify-content:flex-start;gap:14px} .nav-links{margin-inline:auto} /* desktop nav: logo + theme toggle pinned left, links and CTAs aligned right */ @media (min-width:769px){ .nav-in{justify-content:flex-start} .logo{order:1} .nav .theme-btn{order:2;margin-right:auto;margin-left:-8px} .nav-links{order:3;margin-inline:0} .nav-cta{order:4} .burger{order:5} } .logo{ font-weight:600;font-size:1.16rem;letter-spacing:-.03em; display:inline-flex;align-items:center;gap:10px;line-height:1; } .logo-mark{width:1.42em;height:1.42em;flex:none;display:block} .logo img{width:1.42em;height:1.42em;flex:none} .logo-mark .sheen{transform:translateX(-14px) skewX(-16deg)} .logo .word{display:inline-block} .logo .dot{color:var(--blue)} .nav-links{display:flex;align-items:center;gap:4px;position:relative} .nav-links a{ font-size:.88rem;font-weight:550;color:var(--muted);padding:9px 15px;border-radius:100px; transition:color .3s var(--ease);position:relative;z-index:2;white-space:nowrap; } .nav-links a:hover,.nav-links a.on{color:var(--ink)} .nav-cta{ font-size:.93rem;font-weight:600;padding:9px 14px;border-radius:6px;white-space:nowrap; background:var(--blue);border:1px solid var(--blue);color:#fff; transition:background-color .3s var(--ease),border-color .3s var(--ease); } .nav-cta:hover{background:var(--blue-600);border-color:var(--blue-600)} .nav-cta.wa{background:transparent;color:var(--blue);margin-right:-8px} .nav-cta.wa:hover{background:var(--blue);border-color:var(--blue);color:#fff} /* theme switch (injected by site.js) */ .theme-btn{ width:34px;height:34px;border-radius:6px;flex:none; display:inline-flex;align-items:center;justify-content:center; border:none;background:none;color:var(--muted); transition:color .3s; } .theme-btn:hover{color:var(--ink)} .theme-btn svg{width:17px;height:17px;stroke-width:1.8;fill:none;stroke:currentColor} .theme-btn .i-sun{display:none} .theme-btn .i-moon{display:block} [data-theme="dark"] .theme-btn .i-sun{display:block} [data-theme="dark"] .theme-btn .i-moon{display:none} .mobile .theme-btn{width:100%;border-radius:10px;gap:10px;font-size:.9rem;font-weight:500;justify-content:flex-start;padding:10px 12px;height:auto;border:none;background:none;color:var(--ink)} .burger{display:none;width:40px;height:40px;border:none;background:none;align-items:center;justify-content:center;position:relative;border-radius:12px} .burger:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .burger .b1,.burger .b2{position:absolute;left:50%;top:50%;height:1.8px;border-radius:2px;background:var(--ink);transition:transform .4s var(--ease),width .3s var(--ease)} .burger .b1{width:18px;transform:translate(-50%,-4.5px)} .burger .b2{width:11px;transform:translate(-50%,3.5px)} .burger.x .b1{transform:translate(-50%,-1px) rotate(45deg)} .burger.x .b2{width:18px;transform:translate(-50%,-1px) rotate(-45deg);transition-delay:.04s} .mobile{ position:fixed;top:0;left:0;right:0;z-index:89; background:var(--nav-bg);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6); border-bottom:1px solid var(--line); padding:70px 16px 16px;display:flex;flex-direction:column; visibility:hidden;clip-path:inset(0 0 100% 0); transition:clip-path .4s var(--ease),visibility 0s .4s; } .mobile.open{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .45s var(--ease)} .mobile > *{opacity:0;transform:translateY(-8px);transition:opacity .35s var(--ease),transform .35s var(--ease)} .mobile.open > *{opacity:1;transform:none} .mobile.open > *:nth-child(1){transition-delay:.06s} .mobile.open > *:nth-child(2){transition-delay:.1s} .mobile.open > *:nth-child(3){transition-delay:.14s} .mobile.open > *:nth-child(4){transition-delay:.18s} .mobile.open > *:nth-child(5){transition-delay:.22s} .mobile.open > *:nth-child(6){transition-delay:.26s} .mobile.open > *:nth-child(7){transition-delay:.3s} .mobile.open > *:nth-child(8){transition-delay:.34s} .mobile.open > *:nth-child(9){transition-delay:.38s} .mobile.open > *:nth-child(10){transition-delay:.42s} .mobile.open > *:nth-child(11){transition-delay:.46s} .mobile.open > *:nth-child(12){transition-delay:.50s} .mobile.open > *:nth-child(13){transition-delay:.54s} .mobile.open > *:nth-child(14){transition-delay:.58s} .mobile.open > *:nth-child(15){transition-delay:.62s} .mobile.open > *:nth-child(16){transition-delay:.66s} .mobile a{padding:10px 8px;font-weight:500;font-size:.95rem;color:var(--ink);border-radius:8px} .mobile a:hover{background:var(--line-soft)} .mobile .m-div{height:1px;background:var(--line-soft);margin:6px 0} @keyframes fadeDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}} /* ============================================================ HERO ============================================================ */ .hero{padding:clamp(112px,14vh,148px) 0 64px;position:relative} .badge{ display:inline-flex;align-items:center;gap:9px;padding:6px 12px 6px 10px;border-radius:6px; background:var(--card-bg); border:1px solid var(--line); font-family:var(--font-sans);font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:var(--ink-2);text-align:left;line-height:1.6;align-items:flex-start; margin-bottom:26px; } .beacon{width:7px;height:7px;border-radius:50%;background:var(--blue);position:relative;flex:none} .badge .beacon{margin-top:.45em} .beacon::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue);animation:ping 2s var(--ease) infinite} /* the halo has to stay inside the pill that hosts the dot: a 3x scale on a 7px dot rendered as a 21px blob that read as unrelated to the pill */ @keyframes ping{0%{transform:scale(1);opacity:.45}70%,100%{transform:scale(1.9);opacity:0}} .hero h1{font-size:clamp(2.5rem,5.4vw,3.9rem);line-height:1.04;font-weight:600;letter-spacing:-.032em;margin-bottom:22px;max-width:20ch} .hero .lede{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.65;margin-bottom:30px;max-width:58ch} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center} .hero-head h1{font-size:clamp(2.5rem,5.4vw,3.9rem);line-height:1.04;letter-spacing:-.032em;font-weight:600;margin-inline:auto;max-width:20ch} .hero-solo{max-width:760px} .hero-solo .lede{max-width:56ch} .rw{display:inline-block;vertical-align:bottom;padding-bottom:.06em} .rw > i{display:inline-block;font-style:inherit} .hg-glow{position:absolute;inset:0;pointer-events:none; background: radial-gradient(900px 500px at 85% -20%,color-mix(in srgb,var(--blue) 13%,transparent),transparent 58%), radial-gradient(680px 480px at 4% 116%,color-mix(in srgb,var(--indigo) 10%,transparent),transparent 60%); } .hero-glass{ position:relative;overflow:hidden;border-radius:var(--radius-xl); border:1px solid var(--line); background:var(--card-bg); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4); padding:clamp(48px,7vw,96px) clamp(24px,5vw,72px); } /* trust row */ .trust{display:flex;align-items:center;gap:20px;flex-wrap:wrap} .trust-label{font-family:var(--font-sans);font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)} .trust-items{display:flex;gap:8px;flex-wrap:wrap} .chip{ font-size:.74rem;font-weight:600;padding:6px 12px;border-radius:8px; background:var(--card-bg);border:1px solid var(--line);color:var(--muted); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:.3s var(--ease); } .chip:hover{color:var(--ink);border-color:var(--line-strong)} /* ============================================================ MARQUEE ============================================================ */ .marquee{ border-block:1px solid var(--line);background:var(--card-bg); padding:26px 0;overflow:hidden;position:relative;z-index:2; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .mq-track{display:flex;width:max-content;animation:scroll 45s linear infinite} @keyframes scroll{to{transform:translateX(-50%)}} .mq-item{ display:flex;align-items:center;gap:12px;padding-inline:34px; font-family:var(--font-sans);font-weight:600;font-size:.72rem; letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap; transition:color .3s var(--ease); } .mq-item::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5} /* price tape */ .tape{overflow:hidden;border:1px solid var(--win-line);border-radius:10px;background:var(--win-bg);margin:0 0 20px;padding:8px 0;pointer-events:none} .tape-track{display:flex;width:max-content;animation:tape 30s linear infinite;gap:18px;padding-inline:9px} .tape span{font-family:var(--font-mono);font-size:9px;font-weight:600;color:var(--win-muted);white-space:nowrap} .tape .up{color:var(--win-up)} .tape .dn{color:var(--win-dn)} @keyframes tape{to{transform:translateX(-50%)}} /* ============================================================ STATS · FACTS ============================================================ */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden} .stat{background:var(--card-bg);backdrop-filter:blur(14px);padding:26px 24px;transition:background .4s var(--ease)} .stat-v{font-size:clamp(1.6rem,2.4vw,2rem);font-weight:550;letter-spacing:-.03em;line-height:1;margin-bottom:8px} .stat-l{font-size:.8rem;font-weight:500;color:var(--muted);line-height:1.4} .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:28px} .fact{border-left:2px solid var(--blue);padding-left:16px} .fact .fv{font-size:clamp(1.5rem,2.2vw,1.9rem);font-weight:550;letter-spacing:-.03em;line-height:1.05} .fact .fl{font-size:.82rem;color:var(--muted);margin-top:7px;line-height:1.5} /* ============================================================ PILLARS ============================================================ */ .pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .pillar{padding:28px 26px 26px} .p-ic{ width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:26px; background:var(--blue-soft);color:var(--blue); position:relative;transition:transform .5s var(--ease); } .p-ic svg{width:24px;height:24px;stroke-width:1.7;fill:none} .p-num{ position:absolute;top:30px;right:32px;font-family:var(--font-mono); font-size:11px;color:var(--muted-2);font-weight:500;transition:color .4s var(--ease); } .pillar:hover .p-num{color:var(--blue)} .pillar h3{font-size:1.1rem;margin-bottom:10px;font-weight:500} .pillar p{font-size:.9rem;color:var(--muted);line-height:1.68} .p-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px} .p-tag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;padding:4px 9px;border-radius:6px;background:var(--line-soft);color:var(--muted)} /* ============================================================ PROJECTS ============================================================ */ .proj-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:stretch} .proj-main{padding:clamp(26px,3vw,36px);display:flex;flex-direction:column} .proj-side{display:flex;flex-direction:column;gap:20px} .proj-solo{display:grid} .crm-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch} .crm-grid>*{min-width:0} .crm-grid .proj-card{padding:clamp(24px,2.4vw,32px)} .crm-grid .proj-card h3{font-size:clamp(1.15rem,1.7vw,1.4rem);margin-bottom:14px} .crm-grid .proj-card p{font-size:.94rem;margin-bottom:24px} .crm-grid .feat{margin-bottom:26px} .tag{ display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:6px; font-family:var(--font-sans);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;width:fit-content;margin-bottom:22px; } .tag-blue{background:var(--tag-blue-bg);border:1px solid var(--tag-blue-line);color:var(--tag-blue-ink)} .tag-indigo{background:var(--tag-indigo-bg);border:1px solid var(--tag-indigo-line);color:var(--tag-indigo-ink)} .tag-em{background:var(--tag-em-bg);border:1px solid var(--tag-em-line);color:var(--tag-em-ink)} .proj-main h3{font-size:clamp(1.3rem,1.9vw,1.6rem);margin-bottom:14px;font-weight:500} .proj-main > p{color:var(--muted);margin-bottom:28px;font-size:.97rem} .feat{list-style:none;display:flex;flex-direction:column;gap:2px;margin-bottom:32px} .feat li{ display:flex;align-items:flex-start;gap:14px;padding:13px 0; border-bottom:1px solid var(--line-soft);font-size:.9rem;font-weight:500;color:var(--ink-2); transition:color .35s var(--ease); } .feat li:hover{color:var(--ink)} .tick{ width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--blue);color:#fff; } .tick svg{width:10px;height:10px;stroke-width:3;fill:none} .proj-card{padding:26px;flex:1;display:flex;flex-direction:column} .proj-card h3{font-size:1.1rem;margin-bottom:10px;font-weight:500} .proj-card p{font-size:.87rem;color:var(--muted);line-height:1.66;margin-bottom:22px} .meta{ margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.09); font-family:var(--font-mono);font-size:10px;color:#64748b; display:flex;align-items:center;justify-content:space-between;gap:10px; } .prog{height:3px;border-radius:100px;background:rgba(255,255,255,.1);flex:1;overflow:hidden;max-width:90px} .prog i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,#2bc188,#22d3ee);width:0} .in-view .prog i{animation:fill 1.6s var(--ease) .4s forwards} /* ============================================================ BENTO ============================================================ */ .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .bx{padding:24px 22px;display:flex;flex-direction:column} .bx-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:20px;background:var(--blue-soft);color:var(--blue);transition:.45s var(--ease)} .bx-ic svg{width:17px;height:17px;stroke-width:1.8;fill:none} .bx h3{font-size:1rem;margin-bottom:8px;font-weight:500} .bx p{font-size:.855rem;color:var(--muted);line-height:1.68} /* ============================================================ FEATURE GROUPS ============================================================ */ .fgroups{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .fgroup{padding:28px 26px 24px} .fgroup-head{display:flex;align-items:center;gap:14px;margin-bottom:22px} .fg-ic{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);transition:.45s var(--ease)} .fg-ic svg{width:20px;height:20px;stroke-width:1.7;fill:none} .fgroup-head h3{font-size:1.07rem;letter-spacing:-.02em;font-weight:500} .fgroup-head .fg-sub{font-size:.78rem;color:var(--muted-2);font-weight:500;margin-top:2px} .flist{list-style:none;display:flex;flex-direction:column;gap:1px} .flist li{ display:flex;align-items:flex-start;gap:12px;padding:11px 0; border-top:1px solid var(--line-soft);font-size:.875rem;color:var(--ink-2);line-height:1.5; } .flist li:first-child{border-top:none} .flist li b{font-weight:600;color:var(--ink)} /* ============================================================ JOURNEY STEPS (numbered — “three simple steps” style) ============================================================ */ .jsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px} .jstep{padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .35s var(--ease)} .jstep:hover{border-color:var(--line-strong)} .jstep .n{width:28px;height:28px;border-radius:9px;background:var(--blue);color:#fff;font-weight:600;font-size:12.5px;display:grid;place-items:center;margin-bottom:12px;} .jstep h4{font-size:.95rem;margin-bottom:6px;letter-spacing:-.01em;font-weight:600} .jstep p{font-size:.82rem;color:var(--muted);line-height:1.6} /* ============================================================ FOOTPRINT ============================================================ */ .foot-print{text-align:center;max-width:900px;margin-inline:auto} .fp-line{ font-size:clamp(1.2rem,2.2vw,1.7rem);font-weight:400;color:var(--muted-2); letter-spacing:-.02em;line-height:1.45; } .fp-line b{font-weight:600;color:var(--ink);position:relative;display:inline-block} .fp-line b::after{ content:"";position:absolute;left:0;bottom:2px;width:100%;height:7px;z-index:-1; background:linear-gradient(90deg,color-mix(in srgb,var(--blue) 18%,transparent),color-mix(in srgb,var(--violet) 18%,transparent)); border-radius:3px;transform:scaleX(0);transform-origin:0 50%; } .in-view .fp-line b::after{animation:swipe .8s var(--ease) forwards;animation-delay:var(--hd,.3s)} @keyframes swipe{to{transform:scaleX(1)}} .locs{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:40px} .loc{ display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:8px;font-size:.8rem; background:var(--card-bg);border:1px solid var(--line);backdrop-filter:blur(10px); font-size:.83rem;font-weight:600;transition:.4s var(--ease); } .loc:hover{border-color:var(--line-strong)} .loc .beacon{width:6px;height:6px} /* real SVG country flags */ .loc-flag{width:21px;height:14px;border-radius:2.5px;flex:none;display:block;outline:1px solid var(--line);outline-offset:-1px;overflow:hidden} .f-locs{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px} .f-locs .fl-item{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;color:var(--muted-2)} .f-locs .loc-flag{width:18px;height:12px} /* ============================================================ FAQ ============================================================ */ .faq-list{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:12px} .q{border:1px solid var(--line);border-radius:var(--radius);background:var(--card-bg);backdrop-filter:blur(16px) saturate(1.3);transition:border-color .4s var(--ease),box-shadow .4s var(--ease),background .4s} .q.open{border-color:var(--line-strong)} .q-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 18px;text-align:left;font-weight:500;font-size:1rem;letter-spacing:-.01em;transition:color .3s} .q-ic{ width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center; border:1px solid var(--line);position:relative;transition:.45s var(--ease); } .q-ic::before,.q-ic::after{content:"";position:absolute;background:var(--ink-2);border-radius:2px;transition:.45s var(--ease)} .q-ic::before{width:9px;height:1.5px} .q-ic::after{width:1.5px;height:9px} .q.open .q-ic{background:var(--blue);border-color:var(--blue);transform:rotate(135deg)} .q.open .q-ic::before,.q.open .q-ic::after{background:#fff} .q.open .q-ic::after{opacity:0} .q-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)} .q.open .q-body{grid-template-rows:1fr} .q-inner{overflow:hidden} .q-inner p{padding:0 22px 20px;color:var(--muted);font-size:.92rem;line-height:1.72} .q-inner p a{color:var(--blue);font-weight:600} /* ============================================================ CTA (always-dark glowing panel) ============================================================ */ .cta{ position:relative;overflow:hidden;border-radius:var(--radius-xl); background:#07090d;color:#fff;padding:64px clamp(28px,5vw,56px);text-align:center; border:1px solid rgba(255,255,255,.08); } .cta::before{ content:"";position:absolute;width:900px;height:900px;left:50%;top:-60%; transform:translateX(-50%);border-radius:50%; background:radial-gradient(circle,rgba(2,113,227,.5) 0%,rgba(10,63,158,.2) 40%,transparent 65%); animation:pulse 7s var(--ease) infinite alternate; } @keyframes pulse{to{transform:translateX(-50%) scale(1.25);opacity:.65}} .cta > *{position:relative;z-index:3} .cta h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:18px;line-height:1.06;font-weight:600;letter-spacing:-.03em} .cta p{color:#94a3b8;font-size:clamp(1rem,1.4vw,1.1rem);max-width:52ch;margin:0 auto 38px} .cta p a{color:#8fbcff;font-weight:600} .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .cta-ghost{border:1px solid rgba(255,255,255,.16);color:#fff} .cta-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.3)} /* ============================================================ FOOTER ============================================================ */ .footer{border-top:1px solid var(--line);background:var(--card-bg);backdrop-filter:blur(14px);position:relative;z-index:2;margin-top:clamp(48px,6vw,72px)} .f-in{max-width:var(--max);margin-inline:auto;padding:44px 24px 28px;display:grid;grid-template-columns:minmax(0,1fr) repeat(3,max-content);gap:clamp(32px,4.5vw,56px)} .f-brand .logo{font-size:1.15rem;margin-bottom:12px} .f-brand address{font-style:normal;font-size:.8rem;color:var(--muted);line-height:1.7;max-width:42ch} .f-brand address p+p{margin-top:10px} .f-brand address b{color:var(--ink-2);font-weight:600} .f-col h5{font-size:10px;font-family:var(--font-sans);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px;font-weight:500} .f-col ul{list-style:none;display:flex;flex-direction:column;gap:8px} .f-col a{font-size:.82rem;font-weight:500;color:var(--muted);transition:color .3s;display:inline-block} .f-col a:hover{color:var(--ink)} .f-btn{ display:inline-flex;align-items:center;padding:7px 13px;border:1px solid var(--line);border-radius:8px; background:var(--card-bg);font-size:.8rem;font-weight:550;color:var(--ink-2); transition:border-color .3s var(--ease),color .3s;white-space:nowrap; } a.f-btn:hover{border-color:var(--line-strong);color:var(--ink)} .f-col ul{gap:9px} .f-bot{ max-width:var(--max);margin-inline:auto;padding:16px 24px;border-top:1px solid var(--line-soft); display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap; } .f-bot p{font-size:.74rem;color:var(--muted-2)} .f-legal{font-size:.74rem;font-weight:500;color:var(--muted-2)} .f-legal:hover{color:var(--ink)} .f-cta{margin-top:14px;padding:5px 10px;font-size:.72rem;font-weight:500;border-radius:7px;gap:6px;background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;transition:none} .f-cta svg{width:12px;height:12px} .f-cta:hover{background:var(--surface);border-color:var(--line)} .disclaim{max-width:var(--max);margin-inline:auto;padding:0 24px 28px;font-size:.55rem;color:var(--muted-2);line-height:1.7;text-align:left} .disclaim a{color:inherit;text-decoration:underline} /* ============================================================ COOKIE CONSENT ============================================================ */ .ckbar{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;max-width:560px;margin-inline:auto;background:var(--nav-bg);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border:1px solid var(--line);border-radius:16px;padding:18px 20px;transform:translateY(160%);opacity:0;transition:transform .6s var(--ease),opacity .4s;box-shadow:var(--shadow-m)} .ckbar.show{transform:none;opacity:1} .ckbar p{font-size:.85rem;color:var(--ink-2);margin:0 0 14px;line-height:1.55} .ckbar a{color:var(--blue);font-weight:600} .ck-row{display:flex;gap:10px;flex-wrap:wrap} .ck-b{flex:1;min-width:120px;padding:11px 16px;border-radius:11px;font-weight:600;font-size:.85rem;transition:.3s var(--ease)} .ck-accept{background:var(--blue);color:#fff;border:1px solid var(--blue)} .ck-accept:hover{background:var(--blue-600);border-color:var(--blue-600)} .ck-decline{background:transparent;color:var(--ink-2);border:1px solid var(--line)} .ck-decline:hover{border-color:var(--line-strong)} /* ============================================================ PRICING ============================================================ */ .pricing{display:grid;grid-template-columns:1.12fr .88fr;gap:22px;align-items:stretch} .price-card{padding:clamp(26px,3vw,36px);display:flex;flex-direction:column;position:relative} .price-tier{ font-family:var(--font-sans);font-weight:700;font-size:11px;font-weight:500;letter-spacing:.18em; text-transform:uppercase;color:var(--muted-2);margin-bottom:16px;display:flex;align-items:center;gap:10px; } .price-name{font-size:clamp(1.3rem,2vw,1.6rem);letter-spacing:-.025em;margin-bottom:8px;font-weight:500} .price-desc{font-size:.92rem;color:var(--muted);line-height:1.6;margin-bottom:28px} .price-amt{display:flex;align-items:flex-end;gap:8px;margin-bottom:6px} .price-big{font-size:clamp(2rem,3.6vw,2.6rem);font-weight:550;letter-spacing:-.03em;line-height:1} .price-per{font-size:.92rem;font-weight:500;color:var(--muted);padding-bottom:9px} .price-onboard{font-size:.86rem;color:var(--muted);font-weight:500;margin-bottom:26px} .price-onboard b{color:var(--ink);font-weight:650} .price-list{list-style:none;display:flex;flex-direction:column;gap:2px;margin-bottom:30px} .price-list li{ display:flex;align-items:flex-start;gap:12px;padding:10px 0;font-size:.885rem; color:var(--ink-2);font-weight:500;border-bottom:1px solid var(--line-soft);line-height:1.5; } .price-card .btn{margin-top:auto;width:100%} .price-featured{background:#0b0e13;border-color:rgba(255,255,255,.1);color:#fff} .price-featured .price-tier{color:#8fbcff} .price-featured .price-desc{color:#9aa6bd} .price-featured .price-per{color:#94a3b8} .price-featured .price-onboard{color:#94a3b8} .price-featured .price-onboard b{color:#fff} .price-featured .price-list li{color:#dbe2f0;border-bottom-color:rgba(255,255,255,.08)} .price-featured .price-list .tick{background:rgba(99,150,241,.22);color:#8fbcff} .pop{ position:absolute;top:22px;right:clamp(30px,3.4vw,44px); font-family:var(--font-sans);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; padding:6px 12px;border-radius:6px;background:linear-gradient(100deg,#0271e3,#0a3f9e);color:#fff; display:flex;align-items:center;gap:7px; } .pop .beacon{width:5px;height:5px;background:#fff}.pop .beacon::after{background:#fff} .price-save{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:.8rem;font-weight:600;color:#8fbcff} .price-note{text-align:center;font-size:.82rem;color:var(--muted);margin-top:30px;max-width:60ch;margin-inline:auto;line-height:1.6} .price-wide{grid-column:1/-1;padding:26px clamp(26px,3vw,36px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .price-wide p{font-size:.9rem;color:var(--muted);line-height:1.65;max-width:64ch;margin:0} .price-wide p b{color:var(--ink);font-weight:650} .kyb-note{ grid-column:1/-1;display:block; padding:16px clamp(20px,2.4vw,26px);border-radius:14px; background:color-mix(in srgb,var(--amber) 8%,transparent); border:1px solid color-mix(in srgb,var(--amber) 32%,transparent); } .kyb-note svg{display:inline-block;vertical-align:-3px;margin-right:8px;color:var(--amber)} .kyb-note p{display:inline;font-size:.875rem;color:var(--ink-2);line-height:1.6;margin:0} .kyb-note p b{color:var(--amber);font-weight:650} /* ============================================================ PRODUCTS NOTE + GRID HELPERS ============================================================ */ .two-up{max-width:920px;margin-inline:auto} .three-up{grid-template-columns:repeat(3,1fr)} .products-note{text-align:center;color:var(--muted);font-size:.92rem;margin:34px auto 0;max-width:60ch} .products-note a{color:var(--blue);font-weight:600;white-space:nowrap} /* ============================================================ WINDOW MOCKS — always-dark macOS windows (screenshot style) ============================================================ */ .mock-stage{perspective:1600px;position:relative} .mock{ background:var(--win-bg); border:1px solid var(--win-line);border-radius:16px; overflow:hidden;transform-style:preserve-3d; transition:transform .7s var(--ease);will-change:transform; box-shadow:var(--win-shadow); color:var(--win-ink); } @keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}} .mock-stage.in-view .mock{animation:float 6s var(--ease-soft) 1.2s infinite} .mock-bar{ display:flex;align-items:center;gap:8px;padding:13px 16px; border-bottom:1px solid var(--win-line-soft);background:var(--win-head); } .tl{width:10px;height:10px;border-radius:50%;background:#3a3f4b} .mock-bar .tl:nth-of-type(1),.term-bar .tl:nth-of-type(1){background:#ff5f57} .mock-bar .tl:nth-of-type(2),.term-bar .tl:nth-of-type(2){background:#febc2e} .mock-bar .tl:nth-of-type(3),.term-bar .tl:nth-of-type(3){background:#28c840} .mock-title{font-family:var(--font-mono);font-size:10px;color:var(--win-muted-2);margin-left:8px;letter-spacing:.12em;text-transform:uppercase} .mock-live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--win-up);text-transform:uppercase;font-family:var(--font-mono)} .mock-live .beacon{background:var(--win-up);width:5px;height:5px} .mock-live .beacon::after{background:var(--win-up)} .mock-body{padding:20px} .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px} .kpi{padding:12px;border-radius:12px;background:var(--win-tile);border:1px solid var(--win-line-soft)} .kpi-k{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--win-muted-2);margin-bottom:5px} .kpi-v{font-size:1.02rem;font-weight:650;letter-spacing:-.02em;color:var(--win-ink)} .kpi-d{font-size:9px;font-weight:700;color:var(--win-up);margin-top:2px;font-family:var(--font-mono)} .chart{position:relative;height:130px;border-radius:12px;background:var(--win-tile);border:1px solid var(--win-line-soft);padding:10px;margin-bottom:16px;overflow:hidden} .chart svg{width:100%;height:100%;overflow:visible} .spark{fill:none;stroke:url(#lg);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600} .in-view .spark{animation:draw 2.2s var(--ease) .3s forwards} @keyframes draw{to{stroke-dashoffset:0}} .area{fill:url(#ag);opacity:0} .in-view .area{animation:fadeIn .9s var(--ease) 1.5s forwards} @keyframes fadeIn{to{opacity:1}} .rows{display:flex;flex-direction:column;gap:8px} .row{display:flex;align-items:center;gap:10px;font-size:10.5px} .av{width:22px;height:22px;border-radius:7px;flex:none;background:linear-gradient(135deg,#1d2b45,#2a2f52)} .row-n{font-weight:600;flex:1;color:var(--win-ink)} .bar{height:4px;border-radius:100px;background:var(--win-track);width:78px;overflow:hidden;flex:none} .bar i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--win-accent),var(--win-cyan));width:0} .in-view .bar i{animation:fill 1.4s var(--ease) forwards;animation-delay:var(--bd,1s)} @keyframes fill{to{width:var(--w,60%)}} .row-p{font-family:var(--font-mono);font-size:9.5px;color:var(--win-muted);width:34px;text-align:right} .mock-tag{ position:absolute;padding:9px 14px;border-radius:12px;background:var(--win-bg-2); border:1px solid var(--win-line);font-size:10.5px;font-weight:600;color:var(--win-ink); display:flex;align-items:center;gap:8px;z-index:3;box-shadow:var(--win-shadow); } .mock-tag .ic{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:9px;line-height:0;color:#fff} .tag-a{top:-14px;right:-10px} .tag-b{bottom:24px;left:-22px} /* mini spark panel */ .mini-chart{position:relative;height:110px;border-radius:12px;border:1px solid var(--win-line);background:var(--win-bg);padding:10px;margin:4px 0 20px;overflow:hidden} .mini-chart svg{width:100%;height:100%;overflow:visible} .mini-chart .spark2{fill:none;stroke:url(#plg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600} .in-view .spark2{animation:draw 2.2s var(--ease) .3s forwards} .mini-chart .area2{fill:url(#pag);opacity:0} .in-view .area2{animation:fadeIn .9s var(--ease) 1.5s forwards} .mini-chart .dot{position:absolute;right:12px;top:16px;width:6px;height:6px;border-radius:50%;background:var(--win-up)} .mini-chart .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--win-up);animation:ping 2s var(--ease) infinite} /* ============================================================ eTRADER TERMINAL WINDOW ============================================================ */ .term{border:1px solid var(--win-line);border-radius:14px;overflow:hidden;background:var(--win-bg);margin:4px 0 20px; box-shadow:0 30px 70px -35px rgba(0,0,0,.55);color:var(--win-ink)} .term-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--win-line-soft);background:var(--win-head);font-size:10px;font-weight:600;color:var(--win-ink);white-space:nowrap} .term-bar::before{ content:"";width:9px;height:9px;border-radius:50%;flex:none;background:#ff5f57; box-shadow:16px 0 0 #febc2e,32px 0 0 #28c840;margin-right:36px; } .term-chip{font-size:8.5px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--chip-a-bg);color:var(--chip-a-ink);text-transform:uppercase;letter-spacing:.04em} .term-sell,.term-buy{font-size:8.5px;font-weight:800;color:#fff;padding:4px 9px;border-radius:6px;letter-spacing:.02em;font-family:var(--font-mono)} .term-sell{background:var(--win-dn)} .term-buy{background:#0b9a6d} .term-body{display:grid;grid-template-columns:118px 1fr} .term-watch{border-right:1px solid var(--win-line-soft);padding:4px 0;font-family:var(--font-mono);font-size:8.5px} .tw-row{display:flex;justify-content:space-between;gap:8px;padding:3px 10px;color:var(--win-muted)} .tw-row b{font-weight:700;color:var(--win-ink)} .tw-head{color:var(--win-muted-2);text-transform:uppercase;letter-spacing:.06em;font-size:7.5px;padding-bottom:5px} .tw-row .up{color:var(--win-up)} .tw-row .dn{color:var(--win-dn)} .term-chart{padding:8px;display:flex;position:relative} .term-chart svg{width:100%;height:clamp(120px,15vw,180px);display:block} .term-chart .wick{stroke-width:1} .term-chart .w-up{stroke:var(--win-up)} .term-chart .w-dn{stroke:var(--win-dn)} .term-chart .c-up{fill:var(--win-up)} .term-chart .c-dn{fill:var(--win-dn)} .term-chart .wick,.term-chart .c-up,.term-chart .c-dn{transform-box:fill-box;transform-origin:center;transform:scaleY(.1);opacity:0;transition:transform .55s var(--ease),opacity .35s var(--ease)} .in-view .term-chart .wick,.in-view .term-chart .c-up,.in-view .term-chart .c-dn{transform:scaleY(1);opacity:1} .term-chart .pxline{stroke:var(--win-up);stroke-width:1;stroke-dasharray:3 3;opacity:.75;animation:pxdash 1s linear infinite} @keyframes pxdash{to{stroke-dashoffset:-6}} .term-chart .pxtag{fill:var(--win-up);font:700 7px var(--font-mono)} .px-pill{position:absolute;right:10px;top:calc(67% - 10px);font:700 10px var(--font-mono);color:var(--win-up);background:var(--win-bg-2);border:1px solid color-mix(in srgb,var(--win-up) 50%,transparent);border-radius:5px;padding:2px 6px} .term-live{display:inline-flex;align-items:center;gap:5px;font-size:8.5px;font-weight:700;color:var(--win-up);letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-mono)} .tw-row .up,.tw-row .dn{animation:qt 2.6s var(--ease) infinite} .tw-row:nth-child(2) span{animation-delay:.2s} .tw-row:nth-child(3) span{animation-delay:.9s} .tw-row:nth-child(4) span{animation-delay:.4s} .tw-row:nth-child(5) span{animation-delay:1.4s} .tw-row:nth-child(6) span{animation-delay:.7s} .tw-row:nth-child(7) span{animation-delay:1.1s} @keyframes qt{0%,100%{opacity:1}50%{opacity:.4}} /* ============================================================ STREAMING FEED (event-feed window, screenshot style) ============================================================ */ .feedbox{position:relative;height:96px;overflow:hidden;border:1px solid var(--win-line);border-radius:12px;background:var(--win-bg);margin:0 0 20px;pointer-events:none} .feed-track{display:flex;flex-direction:column;animation:feedUp 22s linear infinite} .feed-row{display:flex;align-items:center;gap:10px;padding:6px 12px;font-family:var(--font-mono);font-size:10.5px;flex:none;color:var(--win-muted)} .feed-row b{color:var(--win-ink)} .feed-row .up{color:var(--win-up)} .feed-row .dn{color:var(--win-dn)} @keyframes feedUp{to{transform:translateY(-50%)}} .f-sym{font-weight:700;color:var(--win-ink)} .f-px{margin-left:auto;color:var(--win-muted)} .f-chg{width:54px;text-align:right;font-weight:600} .f-chg.up{color:var(--win-up)} .f-chg.dn{color:var(--win-dn)} /* ============================================================ MINI CRM WINDOW ============================================================ */ .crm-mini{border:1px solid var(--win-line);border-radius:12px;background:var(--win-bg);margin:14px 0 4px;font-size:10.5px;color:var(--win-ink);overflow:hidden; box-shadow:var(--win-shadow)} .cm-row{display:flex;align-items:center;gap:8px;padding:7px 12px;border-top:1px solid var(--win-line-soft)} .cm-row:first-child{border-top:none} .cm-ic{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;font-size:9px;font-weight:800;flex:none} .cm-t{font-weight:600;color:var(--win-ink)} .cm-s{margin-left:auto;font-size:8.5px;font-weight:700;padding:2px 7px;border-radius:100px;flex:none;font-family:var(--font-mono)} .s-g{background:rgba(11,154,109,.14);color:var(--win-up)} .s-a{background:rgba(240,167,66,.14);color:#f0a742} .s-b{background:rgba(77,163,255,.14);color:var(--win-accent)} .crm-mini .cm-row{opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)} .in-view .crm-mini .cm-row{opacity:1;transform:none} .in-view .crm-mini .cm-row:nth-child(1){transition-delay:.15s} .in-view .crm-mini .cm-row:nth-child(2){transition-delay:.3s} .in-view .crm-mini .cm-row:nth-child(3){transition-delay:.45s} .in-view .crm-mini .cm-row:nth-child(4){transition-delay:.6s} /* ============================================================ EXPLAINER VIZ SUITE (looping micro-animations) ============================================================ */ .viz{margin:16px 0 2px} .viz-once{position:relative;height:32px} .vo-box{position:absolute;right:0;top:3px;width:26px;height:26px;border-radius:8px;background:var(--chip-g-bg);color:var(--chip-g-ink);font-weight:800;font-size:13px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--emerald) 30%,transparent);animation:voB 4.6s var(--ease) infinite} .vo-p{position:absolute;top:11px;left:0;width:10px;height:10px;border-radius:50%;background:var(--blue);opacity:0} .vo-p1{animation:voP 4.6s var(--ease) infinite} .vo-p2{animation:voP 4.6s var(--ease) .35s infinite} .vo-p3{animation:voP 4.6s var(--ease) .7s infinite} @keyframes voP{0%{left:0;opacity:0}15%{opacity:1}68%{left:calc(100% - 36px);opacity:1}78%{left:calc(100% - 32px);opacity:0}100%{left:calc(100% - 32px);opacity:0}} @keyframes voB{0%,66%{transform:scale(1)}76%{transform:scale(1.14)}88%,100%{transform:scale(1)}} .viz-live{position:relative;height:30px} .viz-live svg{width:100%;height:100%;overflow:visible;display:block} .vl-line{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;animation:vlDraw 4.2s var(--ease) infinite} @keyframes vlDraw{0%{stroke-dashoffset:160}60%{stroke-dashoffset:0}100%{stroke-dashoffset:0}} .vl-dot{position:absolute;right:-2px;top:4px;width:6px;height:6px;border-radius:50%;background:var(--emerald)} .vl-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--emerald);animation:ping 2s var(--ease) infinite} .viz-bundle{position:relative;height:32px} .vb{position:absolute;top:12px;width:10px;height:10px;border-radius:3px;background:var(--line-strong);animation:vbM 3.8s var(--ease) infinite} .vb1{left:0}.vb2{left:15%;animation-delay:.08s}.vb3{left:30%;animation-delay:.16s}.vb4{left:45%;animation-delay:.24s}.vb5{left:60%;animation-delay:.32s} @keyframes vbM{0%,22%{opacity:1}56%{left:calc(100% - 34px);opacity:1}64%,100%{left:calc(100% - 34px);opacity:0}} .vb-one{position:absolute;right:0;top:7px;width:20px;height:20px;border-radius:6px;background:var(--blue);animation:vbOne 3.8s var(--ease) infinite} @keyframes vbOne{0%,48%{transform:scale(.6);opacity:.35}64%{transform:scale(1.12);opacity:1}78%,100%{transform:scale(1);opacity:1}} .viz-id{position:relative;height:34px} .vid-card{position:absolute;left:0;top:2px;width:46px;height:30px;border:1.5px solid var(--line);border-radius:6px;background:var(--card-bg);overflow:hidden} .vid-card::before{content:"";position:absolute;left:6px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--line-strong)} .vid-card::after{content:"";position:absolute;left:18px;top:7px;width:20px;height:2px;border-radius:2px;background:var(--line);box-shadow:0 5px 0 var(--line),0 10px 0 var(--line-soft)} .vid-scan{position:absolute;left:0;top:3px;width:46px;height:2px;background:var(--blue);opacity:.65;animation:vidScan 3.2s var(--ease) infinite} @keyframes vidScan{0%{transform:translateY(0)}45%{transform:translateY(27px)}55%{transform:translateY(27px)}100%{transform:translateY(0)}} .vid-ok{position:absolute;left:58px;top:7px;width:20px;height:20px;border-radius:50%;background:var(--chip-g-bg);color:var(--chip-g-ink);display:grid;place-items:center;font-size:10px;font-weight:800;animation:vidOk 3.2s var(--ease) infinite} @keyframes vidOk{0%,45%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.12)}78%,100%{opacity:1;transform:scale(1)}} .viz-run{position:relative;height:32px;display:flex;align-items:center;gap:12px} .vr-ring{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--blue);animation:vrSpin 1.1s linear infinite;flex:none} @keyframes vrSpin{to{transform:rotate(360deg)}} .vr-ok{font-size:9.5px;font-weight:700;color:var(--emerald);display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.04em} .viz-brand{position:relative;height:32px;display:flex;align-items:center;gap:10px} .vbr-sq{width:22px;height:22px;border-radius:7px;background:#2563eb;animation:vbHue 5s var(--ease) infinite;flex:none} @keyframes vbHue{0%,100%{background:#2563eb}33%{background:#7c5cff}66%{background:#0b9a6d}} .vbr-t{font-family:var(--font-mono);font-size:9px;color:var(--muted);font-weight:600} .viz-pack{position:relative;height:36px;display:inline-flex;align-items:center;gap:5px;padding:0 9px} .viz-pack::before{content:"";position:absolute;inset:0;border:1.5px dashed color-mix(in srgb,var(--blue) 55%,transparent);border-radius:9px;animation:vpBox 5s var(--ease) infinite} @keyframes vpBox{0%,40%{opacity:0;transform:scale(1.1)}58%{opacity:1;transform:scale(1)}88%,100%{opacity:1}} .vp-chip{font-size:8.5px;font-weight:700;padding:3px 7px;border-radius:5px;background:var(--line-soft);color:var(--ink-2);animation:vpIn 5s var(--ease) infinite;animation-delay:calc(var(--i)*.13s);opacity:0} @keyframes vpIn{0%{opacity:0;transform:translateY(8px)}12%,90%{opacity:1;transform:none}100%{opacity:0}} .viz-safe .vs-row{display:flex;justify-content:space-between;gap:8px;font-size:9.5px;font-weight:600;color:var(--ink-2);padding:5px 10px;border:1px solid var(--line-soft);border-radius:7px;background:var(--card-bg);opacity:0;animation:vsIn 5s var(--ease) infinite} .viz-safe .vs-row+.vs-row{margin-top:5px;animation-name:vsDup} .vs-ok{color:var(--emerald);font-weight:700} .vs-no{color:var(--muted-2);font-weight:700} @keyframes vsIn{0%{opacity:0;transform:translateY(6px)}10%,92%{opacity:1;transform:none}100%{opacity:0}} @keyframes vsDup{0%,32%{opacity:0;transform:translateY(6px)}46%,92%{opacity:.55;transform:none}100%{opacity:0}} .viz-tick{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:10.5px} .vt-label{color:var(--muted-2);text-transform:uppercase;font-size:8px;letter-spacing:.06em;font-weight:700} .vt-val{font-weight:700;color:var(--ink)} .vt-delta{color:var(--emerald);font-weight:700;animation:vtD 3.6s var(--ease) infinite} @keyframes vtD{0%,15%{opacity:0;transform:translateY(4px)}30%,72%{opacity:1;transform:none}88%,100%{opacity:0;transform:translateY(-4px)}} .vt-dot{width:6px;height:6px;border-radius:50%;background:var(--emerald);position:relative;flex:none} .vt-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--emerald);animation:ping 2s var(--ease) infinite} /* server network */ .viz-net{display:flex;align-items:center;height:32px} .srv{position:relative;width:22px;height:26px;flex:none;border:1px solid var(--line);border-radius:6px;background:var(--card-bg);display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 4px} .srv i{display:block;height:2px;border-radius:2px;background:var(--line-strong)} .srv b{position:absolute;right:3px;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--emerald);animation:srvLed 1.8s var(--ease) infinite} .viz-net .srv:nth-child(3) b{animation-delay:.5s} .viz-net .srv:nth-child(5) b{animation-delay:1.1s} .viz-net .srv:nth-child(7) b{animation-delay:1.7s} @keyframes srvLed{0%,100%{opacity:1}50%{opacity:.25}} .net-link{position:relative;flex:1;height:1px;background:var(--line);min-width:14px} .np{position:absolute;top:-2.5px;left:0;width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:0;animation:npGo 3.2s linear infinite} .np-b{background:var(--emerald);animation-name:npBack} @keyframes npGo{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 6px);opacity:0}} @keyframes npBack{0%{left:calc(100% - 6px);opacity:0}12%{opacity:1}88%{opacity:1}100%{left:0;opacity:0}} .viz-net .net-link:nth-child(2) .np-a{animation-delay:0s} .viz-net .net-link:nth-child(2) .np-b{animation-delay:1.4s} .viz-net .net-link:nth-child(4) .np-a{animation-delay:.9s} .viz-net .net-link:nth-child(4) .np-b{animation-delay:2.3s} .viz-net .net-link:nth-child(6) .np-a{animation-delay:1.8s} .viz-net .net-link:nth-child(6) .np-b{animation-delay:3.2s} /* ============================================================ BEFORE / AFTER — fragmented stack vs one bundle (QTG-style) ============================================================ */ .ba-grid{display:grid;grid-template-columns:1fr 72px 1.1fr;gap:22px;align-items:center;margin-bottom:clamp(34px,4vw,48px)} .ba-label{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px;display:flex;align-items:center;gap:8px} .ba-label.after{color:var(--blue)} .ba-label.after::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);animation:dotPing 2s var(--ease) infinite} .ba-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px} .ba-card{border:1px solid var(--line);border-radius:var(--radius-s);background:var(--card-bg);padding:16px 14px;transition:border-color .3s var(--ease);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .ba-card h4{font-size:.9rem;font-weight:500;letter-spacing:-.01em;margin-bottom:4px;color:var(--ink-2)} .ba-ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-bottom:8px;flex-shrink:0} .ba-ic svg{width:10px;height:10px} .ba-ic.no{background:color-mix(in srgb,var(--red) 10%,transparent);color:var(--red)} .ba-ic.yes{background:color-mix(in srgb,var(--emerald) 12%,transparent);color:var(--emerald)} .ba-card .ba-sub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;color:var(--muted-2);text-transform:lowercase} .ba-after{border:1px solid var(--line);border-radius:var(--radius);background:var(--card-bg);padding:18px} .ba-after .ba-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-weight:700;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--blue);border:1px solid color-mix(in srgb,var(--blue) 35%,transparent);border-radius:5px;padding:4px 9px;margin-bottom:14px} .ba-after .ba-cards .ba-card{background:var(--surface)} .ba-card .ok{color:var(--emerald)} .ba-flow{position:relative;height:1px;background:var(--line);min-width:40px} .ba-flow .np{animation-duration:2.4s} /* stagger the cards in */ .ba-card{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .3s var(--ease);transition-delay:calc(var(--i,0)*.07s)} .in-view .ba-card{opacity:1;transform:none} @media (max-width:900px){ .ba-grid{grid-template-columns:1fr;gap:18px} .ba-flow{display:none} } @media (max-width:520px){.ba-cards{grid-template-columns:1fr}} /* ============================================================ REVEAL ============================================================ */ .rv{opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:var(--d,0s);will-change:opacity,transform} .rv.in-view{opacity:1;transform:none} .rv-s{opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:var(--d,0s)} .rv-s.in-view{opacity:1;transform:none} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1024px){ .fgroups{grid-template-columns:1fr} .pricing{grid-template-columns:1fr} .pop{right:clamp(30px,3.4vw,44px)} .hero-grid{grid-template-columns:1fr;gap:56px} .hero h1{max-width:none} .mock-stage{max-width:560px;margin-inline:auto;width:100%} .proj-grid{grid-template-columns:1fr} .crm-grid{grid-template-columns:1fr} .bento{grid-template-columns:repeat(2,1fr)} .stats{grid-template-columns:repeat(2,1fr)} .pillars{grid-template-columns:1fr} .three-up{grid-template-columns:1fr} .facts{grid-template-columns:1fr 1fr;gap:22px} } @media (max-width:1024px){ .f-in{grid-template-columns:1fr 1fr} .f-brand{grid-column:1/-1} } @media (max-width:768px){ .section{padding:48px 0} .nav-links,.nav-cta{display:none} .nav .theme-btn{margin-left:-8px} .nav .burger{margin-left:auto} .burger{display:flex} .bento{grid-template-columns:1fr} .f-in{grid-template-columns:1fr;gap:22px} .mock-tag{display:none} .hero-cta .btn{flex:1;min-width:180px} .jsteps{grid-template-columns:1fr} .rv,.rv-s{opacity:1 !important;transform:none !important;transition:none !important} .crm-mini .cm-row,.term-chart .wick,.term-chart .c-up,.term-chart .c-dn{opacity:1 !important;transform:none !important;transition:none !important} .m2-line-g,.m2-line-r,.spark,.spark2{stroke-dashoffset:0 !important;animation:none !important} .m2-ga,.area,.area2{opacity:1 !important;animation:none !important} .fw-tile,.ba-card{opacity:1 !important;transform:none !important;transition:none !important} .aurora{animation:none!important;filter:blur(52px)!important} .grain{display:none!important} } @media (max-width:520px){ .badge{font-size:9.5px;letter-spacing:.06em;line-height:1.7;align-items:center;justify-content:center;text-align:center;text-wrap:balance;max-width:100%;padding:6px 13px 6px 11px} .badge .beacon{margin-top:0} .stats{grid-template-columns:1fr} .kpis{grid-template-columns:1fr 1fr} .kpi:last-child{display:none} .pop{position:static;margin-bottom:18px;width:fit-content} .price-tier{padding-right:0} .facts{grid-template-columns:1fr;gap:18px} .term-body{grid-template-columns:96px 1fr} .term .term-live{display:none} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .rv,.rv-s{opacity:1 !important;transform:none !important} .rw > i{transform:none !important} .spark,.spark2{stroke-dashoffset:0 !important} .area,.area2{opacity:1 !important} .bar i{width:var(--w,60%) !important} .prog i{width:var(--w,60%) !important} .fp-line b::after{transform:scaleX(1) !important} .crm-mini .cm-row,.term-chart .wick,.term-chart .c-up,.term-chart .c-dn{opacity:1 !important;transform:none !important} .m2-line-g,.m2-line-r{stroke-dashoffset:0 !important} .m2-ga{opacity:1 !important} } /* ============================================================ ADVANCED WINDOW PREVIEWS — terminal, ops desk, live feed (always-dark macOS windows; JS tickers via site.js) ============================================================ */ .term2,.mock2{border:1px solid var(--win-line);border-radius:12px;overflow:hidden;background:var(--win-bg);color:var(--win-ink);box-shadow:var(--win-shadow);font-family:var(--font-mono)} .term2{margin:4px 0 20px} .t2-bar,.m2-bar{display:flex;align-items:center;flex-wrap:wrap;row-gap:6px;gap:9px;padding:10px 14px;min-width:0;border-bottom:1px solid var(--win-line-soft);background:var(--win-head);font-size:10px;font-weight:600;white-space:nowrap} .t2-bar::before,.m2-bar::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;background:#ff5f57;box-shadow:16px 0 0 #febc2e,32px 0 0 #28c840;margin-right:34px} .t2-title,.m2-title{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--win-muted-2)} .t2-live,.m2-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:8.5px;font-weight:700;color:var(--win-up);letter-spacing:.1em;text-transform:uppercase} .t2-sell,.t2-buy{font-family:var(--font-sans);font-size:9px;font-weight:600;color:#fff;padding:5px 10px;border-radius:6px;letter-spacing:.02em;display:inline-flex;align-items:center;gap:5px} .t2-sell{background:var(--win-dn)} .t2-buy{background:var(--win-up)} .t2-sell i,.t2-buy i{font-style:normal;font-family:var(--font-mono);color:inherit} .t2-sell i.qk-px,.t2-buy i.qk-px,.t2-sell .qk-px.up,.t2-sell .qk-px.dn,.t2-buy .qk-px.up,.t2-buy .qk-px.dn{color:inherit} .t2-body{display:grid;grid-template-columns:172px 1fr} .t2-watch{border-right:1px solid var(--win-line-soft);padding:4px 0;font-size:8.5px} .t2-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;padding:3.5px 10px;color:var(--win-muted)} .t2-row.on{background:var(--win-on)} .t2-row b{font-weight:700;color:var(--win-ink)} .t2-row .up{color:var(--win-up)} .t2-row .dn{color:var(--win-dn)} .t2-head{color:var(--win-muted-2);text-transform:uppercase;letter-spacing:.06em;font-size:7.5px;padding-bottom:5px} .t2-main{padding:8px 10px;min-width:0;display:flex;flex-direction:column} .t2-tf{display:flex;align-items:center;gap:4px;margin-bottom:6px;font-size:7.5px;color:var(--win-muted-2)} .t2-tf i{font-style:normal;padding:2px 7px;border:1px solid var(--win-line-soft);border-radius:4px} .t2-tf i.on{color:var(--win-ink);background:rgba(255,255,255,.05);border-color:var(--win-line)} .t2-ohlc{margin-left:auto;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .t2-chart{position:relative;flex:1;display:flex} .t2-chart svg{width:100%;flex:1;min-height:clamp(120px,14vw,168px);display:block} .t2-feed{border-left:1px solid var(--win-line-soft);display:flex;flex-direction:column;min-width:0} .t2-feed-h,.m2-feed-h{padding:8px 12px 6px;font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--win-muted-2);border-bottom:1px solid var(--win-line-soft);display:flex;align-items:center;gap:6px} .t2-feed-list,.m2-feed-list{position:relative;overflow:hidden;flex:1;min-height:0} .t2-feed-track,.m2-feed-track{display:flex;flex-direction:column;animation:feedUp 26s linear infinite} .t2-ev,.m2-ev{padding:6px 12px;font-size:8px;line-height:1.5;border-bottom:1px solid var(--win-line-soft);flex:none} .t2-ev time,.m2-ev time{display:block;color:var(--win-muted-2);font-size:7px;letter-spacing:.08em} .t2-ev b,.m2-ev b{color:var(--win-ink);font-weight:600} .ev-ok{color:var(--win-up)}.ev-dn{color:var(--win-dn)}.ev-am{color:#f0a742}.ev-cy{color:var(--win-cyan)}.ev-mu{color:var(--win-muted)} .t2-status,.m2-status{display:flex;flex-wrap:wrap;border-top:1px solid var(--win-line-soft);background:var(--win-head)} .t2-status span,.m2-status span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-right:1px solid var(--win-line-soft);font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--win-muted-2)} .t2-status b,.m2-status b{color:var(--win-ink);font-weight:600} .t2-status b.ok,.m2-status b.ok{color:var(--win-up)} .t2-status b.am,.m2-status b.am{color:#f0a742} /* ops desk */ .mock2 .m2-grid{display:grid;grid-template-columns:1fr 200px} .m2-main{padding:12px;min-width:0} .m2-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px} .m2-kpi{padding:10px 11px;border-radius:8px;background:var(--win-tile);border:1px solid var(--win-line-soft)} .m2-kpi .k{font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--win-muted-2);margin-bottom:4px} .m2-kpi .v{font-size:15px;font-weight:650;letter-spacing:-.02em;font-family:var(--font-sans)} .m2-kpi .d{font-size:8px;font-weight:700;color:var(--win-up);margin-top:2px} .m2-kpi .d.am{color:#f0a742} .m2-chart{position:relative;border:1px solid var(--win-line-soft);border-radius:8px;background:var(--win-tile);padding:8px;margin-bottom:10px;overflow:hidden} .m2-chart svg{width:100%;height:96px;display:block;overflow:visible} .m2-line{fill:none;stroke:url(#m2lg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600} .in-view .m2-line{animation:draw 2.2s var(--ease) .3s forwards} .m2-area{fill:url(#m2ag);opacity:0} .in-view .m2-area{animation:fadeIn .9s var(--ease) 1.4s forwards} .m2-grid-l{stroke:var(--win-grid);stroke-width:1} .m2-rows{display:flex;flex-direction:column;gap:7px} .m2-row{display:flex;align-items:center;gap:10px;font-size:9px} .m2-row .n{flex:1;color:var(--win-ink);font-weight:600;font-family:var(--font-sans);font-size:10.5px} .m2-row .bar{width:110px} .m2-row .p{color:var(--win-muted);width:32px;text-align:right} .m2-feed{border-left:1px solid var(--win-line-soft);display:flex;flex-direction:column;min-width:0} /* live multi-instrument feed panel */ .qk{display:grid;grid-template-columns:200px 1fr;border:1px solid var(--win-line);border-radius:12px;overflow:hidden;background:var(--win-bg);color:var(--win-ink);margin:0 0 20px;font-family:var(--font-mono)} .qk-list{border-right:1px solid var(--win-line-soft);padding:4px 0;font-size:8.5px} .qk-h{display:flex;justify-content:space-between;padding:4px 11px 5px;color:var(--win-muted-2);font-size:7px;letter-spacing:.1em;text-transform:uppercase} .qk-r{display:flex;align-items:center;gap:7px;padding:3.5px 11px} .qk-r b{font-weight:700;color:var(--win-ink);flex:1} .qk-px{color:var(--win-muted);font-variant-numeric:tabular-nums} .qk-px.up{color:var(--win-up)} .qk-px.dn{color:var(--win-dn)} .qk-chg{width:44px;text-align:right;font-size:7.5px;font-weight:700} .qk-chg.up{color:var(--win-up)} .qk-chg.dn{color:var(--win-dn)} .qk-chart-wrap{padding:8px 10px;min-width:0} .qk-cap{display:flex;align-items:center;gap:9px;font-size:8.5px;margin-bottom:5px} .qk-cap b{color:var(--win-ink)} .qk-cap .qk-px{font-weight:700} .qk-ms{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--win-up)} .qk-chart-wrap svg{width:100%;height:118px;display:block} /* live chart primitives (JS-driven) */ .qk-grid{stroke:var(--win-grid);stroke-width:1} .qk-wick{stroke-width:1} .qk-wick.qk-up{stroke:var(--win-up)} .qk-wick.qk-dn{stroke:var(--win-dn)} .qk-cd.qk-up{fill:var(--win-up)} .qk-cd.qk-dn{fill:var(--win-dn)} .qk-pline{stroke:var(--win-up);stroke-width:1;stroke-dasharray:3 3;opacity:.7;animation:pxdash 1s linear infinite} .qk-static{stroke:var(--win-accent);fill:none;stroke-width:1.5;opacity:.8} @media (max-width:980px){.t2-body{grid-template-columns:140px 1fr}} @media (max-width:820px){.mock2 .m2-grid{grid-template-columns:1fr}.m2-feed{display:none}} @media (max-width:560px){ .t2-body{display:block} .t2-watch{border-right:none;border-bottom:1px solid var(--win-line-soft)} .t2-acct,.t2-bar .t2-live{display:none} .t2-order{margin-left:auto;flex:0 0 auto;font-size:8px;padding:4px 8px} .t2-sell,.t2-buy{flex:1 1 45%;justify-content:center;padding:7px 8px} .qk{grid-template-columns:1fr} .qk-list{border-right:none;border-bottom:1px solid var(--win-line-soft)} .t2-ohlc{display:none} } /* ---------- terminal tools strip / order controls ---------- */ .t2-name{font-weight:700;color:var(--win-ink)} .t2-acct{font-size:8px;color:var(--win-muted-2);letter-spacing:.08em} .t2-order{font-family:var(--font-sans);font-size:9px;font-weight:600;color:#fff;background:var(--blue);padding:5px 10px;border-radius:6px;letter-spacing:.02em;display:inline-flex;align-items:center;gap:4px} .t2-order svg{width:7px;height:7px;flex-shrink:0;margin-top:-0.5px} .t2-tools{display:flex;align-items:center;gap:4px;padding:7px 12px;border-bottom:1px solid var(--win-line-soft);font-size:7.5px;color:var(--win-muted-2)} .t2-tools i{font-style:normal;padding:2.5px 8px;border:1px solid var(--win-line-soft);border-radius:4px;white-space:nowrap} .t2-tools i.on{color:var(--win-ink);background:var(--win-on);border-color:var(--win-line)} .qk-ax{fill:var(--win-muted-2);font:400 6.5px var(--font-mono)} .qk-ptx{fill:var(--win-up);font:700 7px var(--font-mono)} /* ---------- ops-desk dual-line legend ---------- */ .m2-leg{display:flex;gap:12px;align-items:center;margin-bottom:6px;font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--win-muted-2)} .m2-leg i{width:6px;height:6px;border-radius:50%;font-style:normal;flex:none} .m2-leg .lg{background:var(--win-up)} .m2-leg .lr{background:var(--win-dn)} .m2-line-g{fill:none;stroke:var(--win-up);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600} .m2-line-r{fill:none;stroke:var(--win-dn);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600} .in-view .m2-line-g{animation:draw 2s var(--ease) .3s forwards} .in-view .m2-line-r{animation:draw 2s var(--ease) .55s forwards} .m2-ga{fill:rgba(11,154,109,.08);opacity:0} .in-view .m2-ga{animation:fadeIn .8s var(--ease) 1.6s forwards} /* ---------- finder-style mini dashboards (home cards) ---------- */ .fw{border:1px solid var(--win-line);border-radius:10px;overflow:hidden;background:var(--win-bg);color:var(--win-ink);margin:0 0 20px;font-family:var(--font-mono);box-shadow:var(--win-shadow)} .fw-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--win-line-soft);background:var(--win-head);font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--win-muted-2)} .fw-bar::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:#ff5f57;box-shadow:14px 0 0 #febc2e,28px 0 0 #28c840;margin-right:30px} .fw-live{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:7px;font-weight:700;color:var(--win-up)} .fw-body{display:grid;grid-template-columns:88px 1fr} .fw-side{border-right:1px solid var(--win-line-soft);padding:6px 0;font-size:7.5px} .fw-side i{display:block;font-style:normal;padding:4px 10px;color:var(--win-muted-2);border-left:2px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fw-side i.on{color:var(--win-ink);background:var(--win-on);border-left-color:var(--win-accent)} .fw-main{padding:9px 10px;min-width:0} .fw-t{font-family:var(--font-sans);font-weight:650;font-size:10.5px;margin-bottom:7px} .fw-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px} .fw-tiles > .fw-tile,.m2-kpis > .m2-kpi{min-width:0} .fw-tile{border:1px solid var(--win-line-soft);border-radius:6px;padding:6px 7px;background:var(--win-tile)} .fw-tile .k{font-size:6.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--win-muted-2);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fw-tile .v{font-family:var(--font-sans);font-size:10.5px;font-weight:650;letter-spacing:-.01em} .fw-tile .d{font-size:6.5px;font-weight:700;color:var(--win-up);margin-top:1px} .fw-tile .d.am{color:#f0a742} .fw-chart{border:1px solid var(--win-line-soft);border-radius:6px;padding:4px;overflow:hidden} .fw-chart svg{width:100%;height:52px;display:block} .fw-tile{opacity:0;transform:translateY(5px);transition:opacity .45s var(--ease),transform .45s var(--ease)} .in-view .fw-tile{opacity:1;transform:none} .in-view .fw-tile:nth-child(1){transition-delay:.15s} .in-view .fw-tile:nth-child(2){transition-delay:.28s} .in-view .fw-tile:nth-child(3){transition-delay:.41s} /* ---------- viz: nearest point-of-presence routing ---------- */ .viz-pop{position:relative;height:48px} .pop-line{position:absolute;left:2%;right:2%;top:13px;height:1px;background:var(--line)} .pop-n{position:absolute;top:10px;transform:translateX(-50%);text-align:center;font-family:var(--font-mono);font-size:7px;letter-spacing:.08em;color:var(--muted-2)} .pop-n b{display:block;width:7px;height:7px;border-radius:50%;background:var(--blue);margin:0 auto 5px;position:relative} .pop-n b::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue);animation:ping 2.6s var(--ease) infinite;animation-delay:var(--pd,0s)} .pop-p{position:absolute;top:10.5px;width:6px;height:6px;border-radius:50%;background:var(--emerald);opacity:0;animation:popGo 3.6s var(--ease) infinite;animation-delay:var(--d,0s)} @keyframes popGo{0%{left:var(--from);opacity:0}12%{opacity:1}55%{left:var(--to);opacity:1}66%{left:var(--to);opacity:0}100%{opacity:0}} /* ---------- viz: cluster failover ---------- */ .viz-cluster{position:relative;height:52px;margin-bottom:18px} .rk{position:absolute;top:6px;width:20px;height:26px;border:1px solid var(--line);border-radius:5px;background:var(--card-bg);display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 3px} .rk i{display:block;height:2px;border-radius:2px;background:var(--line-strong)} .rk b{position:absolute;right:2.5px;bottom:2.5px;width:4px;height:4px;border-radius:50%;background:var(--emerald)} .rk1{left:0}.rk2{left:14%}.rk3{left:28%}.rk4{left:42%}.rk5{left:56%} .rk.fail{animation:rkDim 7s var(--ease-soft) infinite} .rk.fail b{animation:rkLed 7s linear infinite} @keyframes rkDim{0%,38%{opacity:1}46%,74%{opacity:.3}82%,100%{opacity:1}} @keyframes rkLed{0%,38%{background:var(--emerald)}40%{background:var(--red)}42%{background:var(--emerald)}44%,74%{background:var(--red)}80%,100%{background:var(--emerald)}} .rk-p{position:absolute;top:16px;left:calc(28% + 8px);width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:0;animation:rkRoute 7s var(--ease) infinite} @keyframes rkRoute{0%,40%{left:calc(28% + 8px);opacity:0}44%{opacity:1}58%{left:calc(42% + 8px);opacity:1}64%{left:calc(42% + 8px);opacity:0}100%{opacity:0}} .rk-cap{position:absolute;right:0;top:14px;font-family:var(--font-mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)} .rk-cap b{color:var(--emerald);font-weight:700} @media (max-width:520px){.rk-cap{display:none}} /* ============================================================ NAV DROPDOWN GROUPS ============================================================ */ .nd{position:relative} .nd-btn{ display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:550;color:var(--muted); padding:9px 13px;border-radius:100px;white-space:nowrap;cursor:pointer;transition:color .3s var(--ease); } .nd:hover .nd-btn,.nd:focus-within .nd-btn{color:var(--ink)} .nd-btn svg{width:11px;height:11px;stroke:currentColor;stroke-width:2;fill:none;flex:none;opacity:.7} .nd::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px} .nd-menu{ position:absolute;top:calc(100% + 8px);left:0;min-width:196px;padding:6px; background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-m); display:none;flex-direction:column;gap:2px;z-index:6; } .nd:hover .nd-menu,.nd:focus-within .nd-menu{display:flex} .nd-menu a{display:block;padding:8px 12px;border-radius:7px;font-size:.86rem;font-weight:500;color:var(--ink-2);white-space:nowrap} .nd-menu a:hover{background:var(--line-soft);color:var(--ink)} .mobile .m-h{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);padding:12px 8px 2px} /* etrader hero visual */ .hero-visual{min-width:0} .hero-visual .qk{margin:0;grid-template-columns:190px 1fr} .hero-visual .qk-chart-wrap svg{height:150px} @media (max-width:1024px){.hero-visual .qk{grid-template-columns:1fr}.hero-visual .qk-list{border-right:none;border-bottom:1px solid var(--win-line-soft)}} /* 70ms feed card: list-only variant */ .qk-solo{display:block} .qk-solo .qk-list{border-right:none;border-bottom:1px solid var(--win-line-soft)} .qk-solo .qk-chart-wrap{padding:9px 12px} .qk-solo .qk-cap{margin-bottom:0} /* chips nei titoli: mai spezzate; cluster distanziato dal testo */ .fgroup-head .term-chip{white-space:nowrap;display:inline-block;vertical-align:middle} .fgroup-head h3{line-height:1.35} /* i visual nelle card flex non vengono compressi */ .viz,.crm-mini,.term2,.mock2,.qk,.fw,.term,.mock,.feedbox,.tape{flex-shrink:0} /* la riga 'the suite' occupa tutta la larghezza del hero */ .hero-grid > .trust{grid-column:1/-1;margin-top:-26px} /* gutter guarantee: .section non deve mai togliere i gutter di .wrap */ .wrap{padding-inline:24px} .foot-note{font-size:8px;color:var(--muted-2);max-width:88ch;line-height:1.7;margin:16px auto 0;text-align:center} /* pannelli animazione inline: nessuna ombra */ .tape,.qk,.crm-mini,.feedbox{box-shadow:none} /* iOS non zooma sugli input se il font e' >=16px */ input,select,textarea{font-size:16px} /* checkmark centrato sulla prima riga di testo, in ogni checklist */ li .tick{margin-top:6px} @supports (top:1lh){ li .tick{margin-top:calc((1lh - 20px)/2 + 4px)} } /* le card non si stirano: spazio uniforme sopra/sotto i link finali */ /* niente rettangolo grigio al tocco su mobile */ html,body,*{-webkit-tap-highlight-color:transparent} a,button,summary,input,select,textarea,label{-webkit-tap-highlight-color:transparent} :focus:not(:focus-visible){outline:none} :focus-visible{outline:2px solid var(--blue);outline-offset:2px} .bento,.fgroups,.three-up{align-items:stretch} .proj-grid{align-items:start} .bx>p{margin-bottom:16px} .bx>:is(.viz,.crm-mini,.fw,.feedbox,.tape,.qk){margin-top:auto} .link + .link{margin-top:10px} /* spazio simmetrico attorno ai pannelli seguiti da un link: sopra = margine del paragrafo (22px), sotto = margine del link (20px) */ .crm-mini{margin:0} .qk-solo{margin-bottom:0} :is(.tape,.qk,.fw,.term2,.mock2,.feedbox):has(+ .link){margin-bottom:0} /* liste seguite da link: stesso respiro degli altri blocchi (~22px) */ .feat:has(+ .link){margin-bottom:2px} .flist:has(+ .link){margin-bottom:2px} /* ============================================================ POLISH LAYER (2026-09-10) Interaction states, typographic tidy-up and the scroll-reveal choreography. No layout or colour decisions change here: this only sharpens what the design system already does. ============================================================ */ /* Focus: visible for keyboards, quiet for mouse clicks. */ :focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; } a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none} /* Kill the grey flash on tap, keep the designed :active instead. */ a,button,summary,[role=button]{-webkit-tap-highlight-color:transparent} /* Headlines break where a person would break them, body text avoids the single-word last line. */ h1,h2,h3,.h1,.h2,.h3{text-wrap:balance} p,li{text-wrap:pretty} /* Long words and URLs stop pushing the layout sideways. */ p,li,td,th,dd,blockquote{overflow-wrap:break-word} ::selection{background:var(--blue);color:#fff} /* Media never lands without its box reserved. */ img,svg,video{max-width:100%} img{height:auto} /* Scroll reveal. The class is added by /site.js, so a visitor without JavaScript sees every section as normal. */ .pl-rv{ opacity:0; transform:translate3d(0,18px,0); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); will-change:opacity,transform; } .pl-rv.pl-in{opacity:1;transform:none;will-change:auto} @media (prefers-reduced-motion:reduce){ .pl-rv,.pl-rv.pl-in{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* ---------- console mock inside a full-width product block ---------- .fw was drawn for a half-width card. In the home page product blocks it has to carry the same visual weight as the eTrader terminal beside it, so every one of the five products is presented at the same size. */ .proj-main .fw{margin:4px 0 20px;border-radius:12px} .proj-main .fw-bar{padding:11px 16px;font-size:10.5px;gap:10px} .proj-main .fw-bar::before{width:11px;height:11px;box-shadow:19px 0 0 #febc2e,38px 0 0 #28c840;margin-right:40px} .proj-main .fw-live{font-size:9.5px;gap:6px} .proj-main .fw-body{grid-template-columns:172px 1fr;min-height:372px} .proj-main .fw-side{padding:12px 0;font-size:11px} .proj-main .fw-side i{padding:8px 18px;border-left-width:3px} .proj-main .fw-main{padding:18px 20px;display:flex;flex-direction:column} .proj-main .fw-t{font-size:16px;margin-bottom:16px} .proj-main .fw-tiles{gap:12px;margin-bottom:16px} .proj-main .fw-tile{border-radius:9px;padding:13px 15px} .proj-main .fw-tile .k{font-size:9.5px;margin-bottom:5px} .proj-main .fw-tile .v{font-size:22px} .proj-main .fw-tile .d{font-size:9.5px;margin-top:4px} .proj-main .fw-chart{border-radius:9px;padding:8px;flex:1;display:flex;align-items:stretch} .proj-main .fw-chart svg{height:auto;min-height:150px} @media (max-width:720px){ .proj-main .fw-body{grid-template-columns:104px 1fr;min-height:300px} .proj-main .fw-side{font-size:9.5px} .proj-main .fw-side i{padding:7px 11px} .proj-main .fw-tile .v{font-size:16px} .proj-main .fw-tile .k,.proj-main .fw-tile .d{font-size:8px} } /* ============================================================ ROUND, BORDERLESS BUTTONS AND PILLS (2026-09-10) Buttons and pills are fully rounded, carry no border and never sit on a glow or a drop shadow. Contrast comes from the fill. ============================================================ */ .btn,.btn-sm,.nav-cta,.f-cta,.badge,.tag,.theme-btn{ border-radius:999px; border:none; box-shadow:none; } .btn:hover,.btn-ghost:hover,.nav-cta:hover,.f-cta:hover,.theme-btn:hover{ box-shadow:none; } /* borderless controls need a fill that carries the shape on their own: a neutral tint of the ink colour, which stays visible in light and dark. The hero badge sits on a near-white gradient, so plain white read as no pill at all. */ .btn-ghost,.f-cta,.badge{ background:color-mix(in srgb,var(--ink) 8%,transparent); backdrop-filter:none;-webkit-backdrop-filter:none; color:var(--ink); } .btn-ghost:hover,.f-cta:hover{background:color-mix(in srgb,var(--ink) 14%,transparent)} .badge{color:var(--ink)} .nav-cta.wa:hover{background:var(--blue);color:#fff} .theme-btn{width:22px;height:22px} .theme-btn svg{width:12.5px;height:12.5px;display:block} /* ============================================================ PILL METRICS (2026-09-10) On a fully round control the corner radius equals half the height, so horizontal padding must be at least that or the text runs into the curve. line-height is pinned so the height is predictable instead of inherited from the body copy. Every padding below clears its own radius, apple.com-style. ============================================================ */ .btn,.btn-sm,.nav-cta,.f-cta,.badge,.tag{line-height:1.2} .btn{ padding:13px 26px; /* h 44 · radius 22 · pad 26 */ font-size:.95rem; gap:10px; } .btn-sm{ padding:10px 20px; /* h 36 · radius 18 · pad 20 */ font-size:.85rem; gap:8px; } .nav-cta{ padding:10px 22px; /* h 37 · radius 19 · pad 22 */ font-size:.9rem; } .badge{ padding:8px 18px; /* h 30 · radius 15 · pad 18 */ gap:9px; line-height:1.5; /* this one can wrap to two lines */ } .tag{ padding:7px 16px; /* h 28 · radius 14 · pad 16 */ gap:8px; } .f-cta{ padding:8px 18px; /* h 28 · radius 14 · pad 18 */ gap:7px; } /* ============================================================ CARD BUTTONS (2026-09-10) These used to be .link — inline text that sized to its content and carried its own top margin. As buttons they are flex children of a column card, so without this they stretch the full card width and sit flush against whatever is above them. ============================================================ */ .card > .btn, .proj-card > .btn, .proj-main > .btn, article > .btn{ align-self:flex-start; width:fit-content; margin-top:20px; } /* a list that already ends with its own bottom margin must not get another 20px stacked on top of it */ .feat + .btn,.price-list + .btn{margin-top:0} /* .price-wide is a horizontal row that centres its button, so the card-button rule above must not apply to it */ .price-wide > .btn{align-self:center;margin-top:0} /* a second button stacked under the first only needs a small step */ .card > .btn + .btn, .proj-card > .btn + .btn, .proj-main > .btn + .btn, article > .btn + .btn{ margin-top:8px; } /* ============================================================ ONE BUTTON BLUE (2026-09-10) --blue is deliberately lighter in dark mode so blue *text* keeps its contrast on a dark background. A filled button does not need that — it reads against its own fill — and shifting it made the brand colour look like two different blues. Buttons therefore pin the light-theme blue in both themes. White on #0271e3 is 5.0:1, comfortably AA. ============================================================ */ :root{--btn-blue:#0271e3;--btn-blue-hover:#0159bd} .btn-primary,.nav-cta{background:var(--btn-blue);color:#fff} .btn-primary:hover,.nav-cta:hover{background:var(--btn-blue-hover);color:#fff} .nav-cta.wa{background:transparent;color:var(--btn-blue)} .nav-cta.wa:hover{background:var(--btn-blue);color:#fff} /* ============================================================ SECONDARY BUTTON ON DARK BANDS (2026-09-10) .cta-ghost carried no fill of its own, only a hairline border and a faint hover tint. With borders removed it read as bare text on the dark CTA band. It now carries the fill permanently, the same way the light-surface ghost button does. ============================================================ */ .cta-ghost{ background:rgba(255,255,255,.14); color:#fff; border:none; } .cta-ghost:hover{background:rgba(255,255,255,.24);color:#fff} /* ============================================================ BUILD TERMINAL (2026-09-10) The "what we build" header sits beside a small terminal that types itself out the first time the section is reached. Uses the same window tokens as the eTrader terminal so it reads as one family. ============================================================ */ .build-split{ display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4vw,56px);align-items:center; margin-bottom:clamp(26px,3.5vw,38px); } .build-split::after{content:"";display:block;height:0} .build-copy .lede{max-width:56ch} .buildbox{ border:1px solid var(--win-line);border-radius:12px;overflow:hidden; background:var(--win-bg);color:var(--win-ink); font-family:var(--font-mono);box-shadow:var(--win-shadow); } .bb-bar{ display:flex;align-items:center;gap:10px;padding:10px 14px; border-bottom:1px solid var(--win-line-soft);background:var(--win-head); font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--win-muted-2); } .bb-dots{width:9px;height:9px;border-radius:50%;flex:none;background:#ff5f57;box-shadow:15px 0 0 #febc2e,30px 0 0 #28c840;margin-right:32px} .bb-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-weight:700;color:var(--win-up)} .bb-body{ margin:0;padding:16px 18px 18px;font-size:12.5px;line-height:1.85; min-height:232px;white-space:pre-wrap;word-break:break-word; } .bb-body code{font-family:inherit;font-size:inherit;background:none;padding:0;color:inherit} .bb-caret{ display:inline-block;width:7px;height:14px;vertical-align:-2px;margin-left:2px; background:var(--win-accent,#3d97ff);animation:bbBlink 1s steps(1) infinite; } @keyframes bbBlink{0%,50%{opacity:1}50.01%,100%{opacity:0}} .bb-cmd{color:var(--win-ink);font-weight:600} .bb-dim{color:var(--win-muted-2)} .bb-ok{color:var(--win-up)} .bb-key{color:var(--blue)} @media (max-width:900px){ .build-split{grid-template-columns:1fr;gap:26px} .bb-body{min-height:210px;font-size:11.5px} } @media (prefers-reduced-motion:reduce){ .bb-caret{animation:none} } /* ============================================================ CONSOLE MOCK TILES AT NARROW WIDTHS (2026-09-10) The scaled-up tiles used fixed sizes, so in a narrow column the values ($522.5K / $27.4K) overran their tile and the labels were clipped to a single character. Everything now scales with the container instead. ============================================================ */ .proj-main .fw-tiles{gap:clamp(6px,1vw,12px)} .proj-main .fw-tile{padding:clamp(8px,1.1vw,13px) clamp(9px,1.2vw,15px);min-width:0} .proj-main .fw-tile .k{font-size:clamp(7px,.85vw,9.5px);letter-spacing:.06em} .proj-main .fw-tile .v{font-size:clamp(13px,1.7vw,22px);white-space:nowrap;overflow:hidden} .proj-main .fw-tile .d{font-size:clamp(7px,.85vw,9.5px)} @media (max-width:520px){ .proj-main .fw-tiles{grid-template-columns:1fr 1fr} .proj-main .fw-tiles > .fw-tile:nth-child(3){grid-column:1/-1} } /* ============================================================ LOCATION CHIPS (2026-09-10) Rounded pills like every other chip on the site, and a size down so a row of them reads as a caption rather than as buttons. ============================================================ */ .loc{ border-radius:999px; border:none; background:color-mix(in srgb,var(--ink) 7%,transparent); backdrop-filter:none;-webkit-backdrop-filter:none; padding:6px 14px 6px 8px; gap:7px; font-size:.76rem; font-weight:600; } .loc:hover{background:color-mix(in srgb,var(--ink) 12%,transparent)} /* true circles: the source flags are 3:2, so they crop to fill rather than sit letterboxed inside a rounded rectangle */ .loc .loc-flag{width:16px;height:16px;border-radius:50%;outline:none;flex:none} /* ============================================================ HERO → BODY GAP ON ARTICLE/LOCATION PAGES (2026-09-10) .hero-cta's 30px bottom margin, the header's 20px padding and the section's 48px top padding stacked into a 98px void under the buttons. Collapse the first so the body follows the CTA. ============================================================ */ .art-head .hero-cta{margin-bottom:0} .art-head + .section, .art-head + main.section{padding-top:clamp(22px,3vw,30px)} /* ============================================================ ANCHOR TARGETS CLEAR THE STICKY NAV (2026-09-10) Jumping to #leadership put the heading underneath the fixed header. Every anchor target now reserves the nav's height. ============================================================ */ [id]{scroll-margin-top:clamp(84px,11vh,104px)} /* ============================================================ HERO RAIN (2026-09-10) A slow column rain behind the hero. Kept well under the text in contrast so the headline stays the loudest thing on the page, and masked to fade out before it reaches the copy. ============================================================ */ .hero{isolation:isolate} .hero-rain{ position:absolute;inset:0;width:100%;height:100%; z-index:0;pointer-events:none; /* the light ground gives far less contrast headroom than the dark one, so the rain is pulled well back there and only opens up in dark */ opacity:.22; -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 34%,transparent 68%); mask-image:linear-gradient(to bottom,#000 0%,#000 34%,transparent 68%); } [data-theme="dark"] .hero-rain{opacity:.5} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-rain{opacity:.5}} .hero .wrap{position:relative;z-index:1} @media (prefers-reduced-motion:reduce){ .hero-rain{display:none} } /* ============================================================ GLASS DROPDOWNS (2026-09-10) The nav menus were an opaque panel on a hairline. They now read as frosted glass over the page, with the blur doing the separating instead of a border. ============================================================ */ .nd-menu{ background:color-mix(in srgb,var(--surface) 62%,transparent); backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5); border:1px solid color-mix(in srgb,var(--ink) 9%,transparent); border-radius:14px; box-shadow:0 12px 34px -12px rgba(8,14,28,.28), inset 0 1px 0 color-mix(in srgb,#fff 40%,transparent); padding:7px; } .nd-menu a{border-radius:9px} .nd-menu a:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)} [data-theme="dark"] .nd-menu{ background:color-mix(in srgb,var(--surface) 55%,transparent); box-shadow:0 12px 34px -12px rgba(0,0,0,.6), inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent); } /* the mobile sheet gets the same treatment */ .mobile{ backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5); } /* ============================================================ TERMINAL TOP BAR (2026-09-10) The bar wrapped its buy/sell buttons onto a second row well before the mobile breakpoint. Non-essential chips now drop out earlier and the row stops wrapping. ============================================================ */ /* The terminal sits in a narrow column at wide viewports, so viewport breakpoints are the wrong axis: the bar has to react to its OWN width. */ .term2{container-type:inline-size} .t2-bar{flex-wrap:nowrap;gap:6px} .t2-bar::before{margin-right:14px} .t2-name,.t2-acct,.t2-live{min-width:0;overflow:hidden;text-overflow:ellipsis} .t2-order,.t2-sell,.t2-buy{flex:0 0 auto} @container (max-width:760px){ .t2-bar .t2-acct{display:none} } @container (max-width:640px){ .t2-bar .t2-live{display:none} } @container (max-width:520px){ .t2-bar .t2-name{display:none} } @container (max-width:430px){ .t2-bar .t2-order{display:none} } /* older engines without container queries still get a sane fallback */ @supports not (container-type:inline-size){ @media (max-width:1180px){ .t2-bar .t2-acct{display:none} } @media (max-width:1000px){ .t2-bar .t2-live{display:none} } } /* ============================================================ PILL OR DOT, NOT BOTH (2026-09-10) A pill already reads as a status chip; the pulsing dot inside one was a second status marker fighting it. The dot stays only where it stands on its own (the eyebrow, the terminal's live flag). ============================================================ */ .badge .beacon, .tag .beacon, .loc .beacon, .pop .beacon{display:none} /* ============================================================ MOCK CHART STROKE WEIGHT (2026-09-10) These sparklines are a 300x52 viewBox stretched with preserveAspectRatio="none", so scaling the box up also scaled the stroke into a fat ribbon. Pin the stroke to its authored width. ============================================================ */ .fw-chart svg path, .fw-chart svg polyline, .fw-chart svg line{vector-effect:non-scaling-stroke} .fw-chart svg path{stroke-width:1.4px} /* the status strip wraps for the same reason; trim it by container width */ .t2-status{flex-wrap:nowrap;overflow:hidden} @container (max-width:620px){ .t2-status span:nth-child(n+4){display:none} } @container (max-width:440px){ .t2-status span:nth-child(n+3){display:none} } /* ============================================================ PRODUCT SCREENSHOTS (2026-09-10) Real dashboards rather than drawn infographics. The two themes are separate files swapped as a background so only the one actually on screen is ever downloaded, which two tags would not achieve. ============================================================ */ .shot{ position:relative;width:100%;margin:4px 0 20px; border:1px solid var(--win-line);border-radius:12px;overflow:hidden; background:var(--win-bg) center top/cover no-repeat; box-shadow:var(--win-shadow); aspect-ratio:var(--shot-ar,19/10); } .shot::after{ /* keeps the frame reading as a window */ content:"";position:absolute;inset:0;pointer-events:none; border-radius:inherit;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 14%,transparent); } .shot-scalegram{background-image:url('/shots/scalegram-light.png')} .shot-copysignals{background-image:url('/shots/copysignals-light.png')} [data-theme="dark"] .shot-scalegram{background-image:url('/shots/scalegram-dark.png')} [data-theme="dark"] .shot-copysignals{background-image:url('/shots/copysignals-dark.png')} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .shot-scalegram{background-image:url('/shots/scalegram-dark.png')} :root:not([data-theme="light"]) .shot-copysignals{background-image:url('/shots/copysignals-dark.png')} } /* ============================================================ THEME TOGGLE POSITION (2026-09-10) Desktop: it belongs with the nav cluster on the right, immediately left of Products, so the logo owns the left edge on its own. Mobile: immediately left of the burger. ============================================================ */ @media (min-width:769px){ .nav-in .logo{order:1;margin-right:auto} .nav .theme-btn{order:2;margin-left:0;margin-right:2px} .nav-in .nav-links{order:3} .nav-in .nav-cta{order:4} .nav-in .burger{order:5} } @media (max-width:768px){ .nav .theme-btn{margin-left:auto;margin-right:2px} .nav .burger{margin-left:0} }