/* ============================================================ 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} .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)} /* 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} @keyframes ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(3);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} .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:1.5fr 1fr 1.1fr 1.1fr 1.1fr;gap:28px} .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} .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} .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: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}