/* ────────────────────────────────────────────────────────────── ZerodayIQ: marketing site Dark, brand-aligned with the dashboard. Single CSS for all pages. ────────────────────────────────────────────────────────────── */ /* Glancyr display font. Local self-hosted .otf — no external CDN. Toggle via the `font-glancyr` class on : present = display headings render in Glancyr; remove the class to revert to the original JetBrains Mono treatment. */ @font-face{ font-family:'Glancyr'; src:url('/website-assets/fonts/Glancyr-Regular.otf') format('opentype'); font-weight:400;font-style:normal;font-display:swap; } body.font-glancyr h1, body.font-glancyr h2, body.font-glancyr .display, body.font-glancyr .grad-text, body.font-glancyr .nav-brand > span:last-child, body.font-glancyr .footer .nav-brand > span:last-child, body.font-glancyr .cta-banner h2, body.font-glancyr .hero h1{ font-family:'Glancyr','JetBrains Mono','Geist Mono',Menlo,monospace; letter-spacing:-0.02em; } body.font-glancyr h1{letter-spacing:-0.025em;font-weight:400} body.font-glancyr h2{letter-spacing:-0.02em;font-weight:400} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} html{scroll-behavior:smooth} body{ font-family:'Inter','Helvetica Neue',Arial,sans-serif; font-size:15px;line-height:1.6;color:var(--text); background:var(--bg);-webkit-font-smoothing:antialiased; letter-spacing:-0.005em;overflow-x:hidden; } :root{ --bg: #0a0a0d; --bg-2: #07070a; --surface: #121218; --surface-2: #181820; --surface-3: #20202a; --border: #1f1f28; --border-2: #2c2c38; --border-hi: #3a3a4a; --text: #ececf2; --text-2: #a4a4b0; --muted: #6a6a78; --muted-2: #44444f; --violet: #5B2BE3; --indigo: #3941E3; --blue: #1E6FE8; --cyan: #2EC8E8; --accent: #6E3BFF; --accent-2: #2EC8E8; --accent-bg: rgba(110,59,255,.10); --accent-bg-hi: rgba(110,59,255,.18); --glow: rgba(110,59,255,.35); --glow-2: rgba(46,200,232,.25); --grad: linear-gradient(95deg, #5B2BE3 0%, #3941E3 35%, #1E6FE8 65%, #2EC8E8 100%); --grad-rev: linear-gradient(95deg, #2EC8E8, #1E6FE8, #3941E3, #5B2BE3); --crit: #ff4d6a; --high: #ff8a3d; --med: #fbbf24; --low: #4cd97b; --info: #38bdf8; --radius: 14px; --radius-lg: 20px; --radius-pill: 999px; --container: 1240px; --nav-h: 64px; } ::selection{background:var(--accent);color:#fff} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:var(--bg-2)} ::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px} ::-webkit-scrollbar-thumb:hover{background:var(--border-hi)} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} /* ── Typography ─────────────────────────────────────────────── */ .mono{font-family:'JetBrains Mono','Geist Mono',Menlo,monospace} h1,h2,h3,.display{ font-family:'JetBrains Mono','Geist Mono',Menlo,monospace; font-weight:700;letter-spacing:-0.04em;color:var(--text); } h1{font-size:clamp(40px,6vw,76px);line-height:1.02;font-weight:800;letter-spacing:-0.05em} h2{font-size:clamp(28px,3.5vw,44px);line-height:1.1;letter-spacing:-0.04em} h3{font-size:clamp(18px,1.8vw,22px);line-height:1.25} p{color:var(--text-2);font-size:16px;line-height:1.65} .lead{font-size:clamp(16px,1.5vw,19px);color:var(--text-2);max-width:640px;line-height:1.6} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600; letter-spacing:0.18em;text-transform:uppercase;color:var(--text-2); padding:6px 12px;border:1px solid var(--border-2);border-radius:99px; background:var(--surface); } .eyebrow .dot{ width:6px;height:6px;border-radius:50%;background:var(--grad); box-shadow:0 0 12px var(--glow); } .kicker{ font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500; letter-spacing:0.1em;color:var(--muted);text-transform:uppercase; } .grad-text{ background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; } /* ── Layout containers ──────────────────────────────────────── */ .container{ max-width:var(--container);margin:0 auto;padding:0 28px; } @media(max-width:640px){.container{padding:0 20px}} .section{padding:120px 0;position:relative} .section-sm{padding:72px 0} .section + .section{border-top:1px solid var(--border)} /* ── Buttons ────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; height:46px;padding:0 22px;border-radius:10px;cursor:pointer; font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600; letter-spacing:-0.01em;border:1px solid transparent; transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .2s ease; white-space:nowrap; } .btn:hover{transform:translateY(-1px)} .btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 28px var(--glow), inset 0 1px 0 rgba(255,255,255,.18)} .btn-primary:hover{box-shadow:0 12px 36px var(--glow), inset 0 1px 0 rgba(255,255,255,.22)} .btn-ghost{background:transparent;color:var(--text);border-color:var(--border-2)} .btn-ghost:hover{border-color:var(--border-hi);background:var(--surface)} .btn-secondary{background:var(--surface-2);color:var(--text);border-color:var(--border-2)} .btn-secondary:hover{background:var(--surface-3);border-color:var(--border-hi)} .btn-lg{height:54px;padding:0 28px;font-size:14px;border-radius:12px} .btn .arrow{transition:transform .2s ease} .btn:hover .arrow{transform:translateX(3px)} /* ── Top nav ────────────────────────────────────────────────── */ .nav{ position:fixed;top:0;left:0;right:0;z-index:50; height:var(--nav-h); display:flex;align-items:center; background:rgba(10,10,13,.55); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid transparent; transition:background .25s ease, border-color .25s ease, box-shadow .25s ease; } .nav.scrolled{ background:rgba(7,7,10,.82); border-bottom-color:var(--border); box-shadow:0 6px 24px -16px rgba(0,0,0,.6); } .nav-inner{ max-width:var(--container);width:100%;margin:0 auto;padding:0 28px; display:flex;align-items:center;gap:36px; } .nav-brand{ display:flex;align-items:center;gap:10px; font-family:'JetBrains Mono','Geist Mono',Menlo,monospace; font-size:14px;font-weight:800; color:var(--text);letter-spacing:-0.02em; } .nav-brand-mark{ width:32px;height:32px;border-radius:8px; position:relative;flex-shrink:0; background:transparent; background-image:url('/website-assets/img/logo-icon-white.png'); background-size:contain;background-repeat:no-repeat;background-position:center; filter:drop-shadow(0 4px 14px var(--glow)); animation:zd-breathe 4.5s ease-in-out infinite; } html.light .nav-brand-mark{ background-image:url('/website-assets/img/logo-icon.png'); } .nav-brand-mark::after{display:none} .nav-brand sup{font-size:8px;color:var(--text-2);font-weight:500;margin-left:2px} .nav-brand-sub{ font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted); letter-spacing:0.18em;text-transform:uppercase;display:block;line-height:1;margin-top:3px; } .nav-links{ display:flex;align-items:center;gap:2px;flex:1; margin-left:8px; } .nav-link{ position:relative; font-family:'JetBrains Mono','Geist Mono',Menlo,monospace; font-size:12px;font-weight:500;letter-spacing:-0.01em; color:var(--text-2);padding:8px 14px;border-radius:8px; transition:color .15s ease, background .15s ease; } .nav-link::before{ content:'';position:absolute;left:8px;right:8px;bottom:3px;height:1px; background:var(--grad);opacity:0;transform:scaleX(.3);transform-origin:center; transition:opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1); } .nav-link:hover{color:var(--text);background:var(--surface)} .nav-link:hover::before{opacity:.6;transform:scaleX(.7)} .nav-link.active{color:var(--text)} .nav-link.active::before{opacity:1;transform:scaleX(1)} .nav-actions{display:flex;align-items:center;gap:10px} .nav-toggle{display:none;background:transparent;border:1px solid var(--border-2);border-radius:8px;color:var(--text);padding:8px 12px;cursor:pointer;font-size:18px;line-height:1} @media(max-width:920px){ .nav-links{ position:absolute;top:var(--nav-h);left:0;right:0; flex-direction:column;align-items:stretch;gap:0; background:var(--bg-2);border-bottom:1px solid var(--border); padding:14px 28px 22px; transform:translateY(-110%);transition:transform .25s ease; } .nav-links.open{transform:translateY(0)} .nav-link{padding:14px 4px} .nav-toggle{display:inline-flex} .nav-actions .btn-ghost{display:none} } /* ── Hero (home) ────────────────────────────────────────────── */ .hero{ position:relative;padding:calc(var(--nav-h) + 80px) 0 100px; overflow:hidden; } .hero-grid{ position:absolute;inset:0;pointer-events:none; background-image: linear-gradient(rgba(110,59,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(110,59,255,.06) 1px, transparent 1px); background-size:54px 54px; mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 35%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 35%, transparent 75%); opacity:.7; } .hero-orb{ position:absolute;width:780px;height:780px;border-radius:50%; top:-220px;left:50%;transform:translateX(-50%); background:radial-gradient(circle, rgba(110,59,255,.32), rgba(46,200,232,.12) 38%, transparent 65%); filter:blur(40px);pointer-events:none; animation:orb 14s ease-in-out infinite alternate; } @keyframes orb{ 0% {transform:translate(-50%,0) scale(1)} 100%{transform:translate(-50%,30px) scale(1.06)} } .hero-inner{position:relative;z-index:2;text-align:center;max-width:980px;margin:0 auto} .hero h1{margin:24px 0 22px} .hero h1 .grad-text{display:inline-block} .hero p.lead{margin:0 auto 36px;color:var(--text-2)} .hero p.hero-lead{ font-family:'Glancyr','Inter','Helvetica Neue',Arial,sans-serif; font-weight:400; font-size:clamp(17px,1.55vw,22px); line-height:1.55;letter-spacing:-0.012em; color:#cfd0dc; max-width:760px; text-wrap:balance; } .hero p.hero-lead .lead-hl{ background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; font-weight:500; } html.light .hero p.hero-lead{color:#3a3a48} .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:48px} .hero-meta{ display:flex;gap:24px;justify-content:center;flex-wrap:wrap; font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted); letter-spacing:0.06em;text-transform:uppercase; } .hero-meta b{color:var(--text-2);font-weight:600} /* ── Chat-window mockup (replaces terminal) ─────────────────── */ .chat{ margin:64px auto 0;max-width:760px; border:1px solid var(--border-2);border-radius:18px; background:linear-gradient(180deg, var(--surface), var(--bg-2)); box-shadow:0 30px 80px -20px rgba(110,59,255,.20), 0 0 0 1px rgba(110,59,255,.05); overflow:hidden; display:flex;flex-direction:column; } .chat-bar{ display:flex;align-items:center;gap:10px;padding:14px 18px; border-bottom:1px solid var(--border); background:linear-gradient(180deg, var(--surface-2), var(--surface)); } .chat-bar-mark{ width:24px;height:24px;border-radius:6px;background:var(--grad);flex-shrink:0; box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 4px 10px var(--glow); } .chat-bar-title{ font-family:inherit;font-size:13px;font-weight:600;color:var(--text); } .chat-bar-sub{ font-family:inherit;font-size:11px;color:var(--muted);margin-left:4px; } .chat-bar-status{ margin-left:auto;display:flex;align-items:center;gap:6px; font-size:11px;color:var(--muted); } .chat-bar-status::before{ content:'';width:7px;height:7px;border-radius:50%;background:var(--low); box-shadow:0 0 8px rgba(76,217,123,.6); } .chat-body{ padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px; min-height:280px; } .chat-msg{display:flex;gap:10px;max-width:88%;opacity:0;animation:msg-in .4s ease forwards} .chat-msg-avatar{ width:28px;height:28px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:700; background:var(--surface-3);color:var(--text-2); border:1px solid var(--border-2); } .chat-msg.user{align-self:flex-end;flex-direction:row-reverse} .chat-msg.user .chat-msg-avatar{background:var(--grad);color:#fff;border-color:transparent} .chat-msg.assistant .chat-msg-avatar{background:var(--accent-bg);color:var(--accent-2);border-color:var(--accent-bg-hi)} .chat-bubble{ padding:10px 14px;border-radius:14px; font-size:13.5px;line-height:1.55;color:var(--text); background:var(--surface-2);border:1px solid var(--border); max-width:100%; } .chat-msg.user .chat-bubble{ background:var(--grad);color:#fff;border-color:transparent; box-shadow:0 6px 18px var(--glow); } .chat-bubble code{ background:rgba(0,0,0,.18);padding:1px 6px;border-radius:4px; font-family:'JetBrains Mono',monospace;font-size:12px; } .chat-msg.user .chat-bubble code{background:rgba(255,255,255,.18);color:#fff} .chat-bubble .b-line{display:block} .chat-bubble .b-meta{ display:flex;gap:14px;margin-top:8px;padding-top:8px; border-top:1px solid var(--border); font-size:11px;color:var(--muted); } .chat-msg.user .chat-bubble .b-meta{border-top-color:rgba(255,255,255,.2);color:rgba(255,255,255,.7)} .chat-bubble .b-meta b{color:var(--text-2)} .chat-msg.user .chat-bubble .b-meta b{color:#fff} .chat-bubble .sev-crit{color:var(--crit);font-weight:600} .chat-bubble .sev-high{color:var(--high);font-weight:600} .chat-bubble .sev-med{color:var(--med);font-weight:600} .chat-bubble .sev-low{color:var(--low);font-weight:600} .chat-typing{display:inline-flex;gap:4px;padding:4px 0} .chat-typing span{ width:6px;height:6px;border-radius:50%;background:var(--muted); animation:typing 1.2s ease-in-out infinite; } .chat-typing span:nth-child(2){animation-delay:.2s} .chat-typing span:nth-child(3){animation-delay:.4s} @keyframes typing{0%,80%,100%{opacity:.3;transform:translateY(0)} 40%{opacity:1;transform:translateY(-3px)}} @keyframes msg-in{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)}} .chat-input{ display:flex;align-items:center;gap:8px;padding:14px 18px; border-top:1px solid var(--border);background:var(--surface); } .chat-input-fake{ flex:1;height:38px;border-radius:10px;background:var(--bg); border:1px solid var(--border-2); display:flex;align-items:center;padding:0 14px; font-size:13px;color:var(--muted); } .chat-input-fake .caret{ display:inline-block;width:1px;height:14px;background:var(--accent); margin-left:2px;animation:caret 1s steps(1) infinite; } @keyframes caret{50%{opacity:0}} .chat-input-send{ width:38px;height:38px;border-radius:10px;background:var(--grad); display:flex;align-items:center;justify-content:center;color:#fff; box-shadow:0 4px 14px var(--glow); } /* ── Cards / feature grid ───────────────────────────────────── */ .section-head{text-align:center;max-width:760px;margin:0 auto 64px} .section-head .eyebrow{margin-bottom:18px} .section-head h2{margin-bottom:18px} .section-head p{color:var(--text-2);font-size:17px;line-height:1.65} .grid{display:grid;gap:18px} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} @media(max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}} .card{ position:relative;padding:28px;border-radius:var(--radius); background:var(--surface);border:1px solid var(--border); transition:border-color .2s ease, transform .25s ease, background .2s ease; } .card:hover{border-color:var(--border-hi);transform:translateY(-3px);background:var(--surface-2)} .card .icon{ width:42px;height:42px;border-radius:10px; display:flex;align-items:center;justify-content:center; background:var(--accent-bg);color:var(--accent-2);margin-bottom:18px; border:1px solid var(--border-2); } .card h3{margin-bottom:10px;font-size:18px} .card p{font-size:14px;line-height:1.6;color:var(--text-2)} .card .meta{ margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:10.5px; color:var(--muted);letter-spacing:0.08em;text-transform:uppercase; } /* Feature grid (the 41+ modules) */ .modules-strip{ display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:32px; } @media(max-width:980px){.modules-strip{grid-template-columns:repeat(4,1fr)}} @media(max-width:640px){.modules-strip{grid-template-columns:repeat(2,1fr)}} .module{ padding:14px 12px;border-radius:10px; background:var(--surface);border:1px solid var(--border); font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-2); text-align:center;letter-spacing:-0.01em; transition:all .15s ease;cursor:default; } .module:hover{color:var(--text);border-color:var(--accent);background:var(--accent-bg)} /* Pipeline diagram */ .pipeline{ display:grid;grid-template-columns:repeat(4,1fr);gap:0; margin:48px 0;position:relative; } @media(max-width:780px){.pipeline{grid-template-columns:1fr}} .pipeline-step{ position:relative;padding:24px 22px; background:var(--surface);border:1px solid var(--border); border-right:none; } .pipeline-step:first-child{border-radius:14px 0 0 14px} .pipeline-step:last-child{border-right:1px solid var(--border);border-radius:0 14px 14px 0} @media(max-width:780px){ .pipeline-step{border-right:1px solid var(--border);border-radius:0 !important} .pipeline-step:first-child{border-radius:14px 14px 0 0 !important} .pipeline-step:last-child{border-radius:0 0 14px 14px !important} } .pipeline-step .step-no{ display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10px; color:var(--muted);letter-spacing:0.16em;margin-bottom:10px; } .pipeline-step h4{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--text);margin-bottom:8px} .pipeline-step p{font-size:13px;color:var(--text-2)} .pipeline-step .step-arrow{ position:absolute;top:50%;right:-12px;transform:translateY(-50%); width:24px;height:24px;border-radius:50%; background:var(--bg);border:1px solid var(--border-2); display:flex;align-items:center;justify-content:center; color:var(--accent-2);font-size:13px;z-index:2; } @media(max-width:780px){.pipeline-step .step-arrow{display:none}} .pipeline-step:last-child .step-arrow{display:none} /* Stats row */ .stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px; padding:36px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border); margin:0 0 80px; } @media(max-width:780px){.stats{grid-template-columns:repeat(2,1fr)}} .stat{text-align:center} .stat-num{ font-family:'JetBrains Mono',monospace;font-size:clamp(34px,4.4vw,52px); font-weight:800;letter-spacing:-0.04em;line-height:1; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; margin-bottom:8px; } .stat-lbl{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase} /* ── Pricing ────────────────────────────────────────────────── */ .tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px} @media(max-width:980px){.tier-grid{grid-template-columns:1fr}} .tier{ position:relative;padding:36px 30px;border-radius:18px; background:var(--surface);border:1px solid var(--border); display:flex;flex-direction:column; } .tier.featured{ border-color:transparent; background: linear-gradient(var(--surface),var(--surface)) padding-box, var(--grad) border-box; border:1px solid transparent; box-shadow:0 30px 80px -30px var(--glow); } .tier-badge{ position:absolute;top:-12px;left:50%;transform:translateX(-50%); background:var(--grad);color:#fff; font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700; letter-spacing:0.12em;text-transform:uppercase; padding:5px 14px;border-radius:99px; box-shadow:0 6px 16px var(--glow); } .tier-name{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--text-2);text-transform:uppercase;letter-spacing:0.12em;margin-bottom:8px} .tier-tag{font-size:13px;color:var(--muted);margin-bottom:24px;line-height:1.5} .tier-price{ display:flex;align-items:baseline;gap:6px;margin-bottom:6px; font-family:'JetBrains Mono',monospace; } .tier-price .num{font-size:46px;font-weight:800;color:var(--text);letter-spacing:-0.04em;line-height:1} .tier-price .unit{font-size:13px;color:var(--muted)} .tier-depth{ font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent-2); letter-spacing:0.06em;margin-bottom:28px; } .tier ul{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:11px} .tier li{ display:flex;align-items:flex-start;gap:10px; font-size:13.5px;color:var(--text-2);line-height:1.5; } .tier li::before{ content:'';display:inline-block;flex-shrink:0; width:14px;height:14px;margin-top:3px;border-radius:4px; background:var(--accent-bg);position:relative; } .tier li.check::before{ background:var(--accent-bg); background-image:linear-gradient(135deg, transparent 38%, var(--accent-2) 38% 50%, transparent 50%, var(--accent-2) 50% 62%, transparent 62%); } .tier li.x{color:var(--muted)} .tier li.x::before{background:transparent;border:1px solid var(--border-2)} .tier .btn{margin-top:auto;width:100%} /* Comparison table (pricing) */ .compare{ margin-top:80px;border:1px solid var(--border);border-radius:16px;overflow:hidden; background:var(--surface); } .compare table{width:100%;border-collapse:collapse} .compare th, .compare td{ padding:14px 18px;text-align:left; border-bottom:1px solid var(--border); font-size:13.5px;color:var(--text-2); } .compare th{ background:var(--surface-2);font-family:'JetBrains Mono',monospace; font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text);font-weight:700; } .compare th:not(:first-child), .compare td:not(:first-child){text-align:center} .compare tbody tr:last-child td{border-bottom:none} .compare .yes{color:var(--accent-2);font-weight:700} .compare .no{color:var(--muted-2)} .compare .group td{ background:var(--bg-2);font-family:'JetBrains Mono',monospace;font-size:11px; letter-spacing:0.12em;text-transform:uppercase;color:var(--muted); } /* ── About page ─────────────────────────────────────────────── */ .about-block{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} @media(max-width:780px){.about-block{grid-template-columns:1fr;gap:32px}} .about-block + .about-block{margin-top:96px} .principle{ padding:24px;border:1px solid var(--border);border-radius:14px; background:var(--surface); } .principle h4{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--text);margin-bottom:8px} .principle p{font-size:13.5px;color:var(--text-2);line-height:1.6} /* ── Contact form ───────────────────────────────────────────── */ .contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px} @media(max-width:920px){.contact-grid{grid-template-columns:1fr}} .form-card{ padding:36px;background:var(--surface);border:1px solid var(--border); border-radius:16px; } .field{display:flex;flex-direction:column;margin-bottom:18px} .field label{ font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-2); margin-bottom:8px;letter-spacing:0.06em;text-transform:uppercase; } .input,select.input,textarea.input{ background:var(--bg);border:1px solid var(--border-2);border-radius:10px; color:var(--text);padding:12px 14px;font-size:14px; font-family:inherit;outline:none; transition:border-color .15s ease, box-shadow .15s ease; } .input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)} textarea.input{min-height:140px;resize:vertical;line-height:1.55} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:560px){.field-row{grid-template-columns:1fr}} .honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} .contact-info .info-block{ padding:22px;border:1px solid var(--border);border-radius:12px; background:var(--surface);margin-bottom:14px; } .contact-info .info-block .label{ font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted); letter-spacing:0.16em;text-transform:uppercase;margin-bottom:8px; } .contact-info .info-block .value{font-size:15px;color:var(--text);font-family:'JetBrains Mono',monospace} .toast{ position:fixed;top:84px;right:24px;z-index:99; padding:14px 20px;border-radius:10px; background:var(--surface);border:1px solid var(--accent); color:var(--accent-2);font-family:'JetBrains Mono',monospace;font-size:12.5px; box-shadow:0 12px 36px rgba(0,0,0,.4); transform:translateY(-12px);opacity:0;transition:all .25s ease; } .toast.show{transform:translateY(0);opacity:1} .toast.error{border-color:var(--crit);color:var(--crit)} /* ── CTA banner ─────────────────────────────────────────────── */ .cta-banner{ position:relative;overflow:hidden; border-radius:22px;padding:64px 48px;text-align:center; background: radial-gradient(60% 80% at 50% 0%, rgba(110,59,255,.18), transparent 70%), linear-gradient(180deg, var(--surface), var(--bg-2)); border:1px solid var(--border-2); } .cta-banner h2{margin-bottom:14px} .cta-banner p{color:var(--text-2);font-size:17px;max-width:580px;margin:0 auto 28px} .cta-banner .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ── Footer ─────────────────────────────────────────────────── */ .footer{ background:var(--bg-2);border-top:1px solid var(--border); padding:64px 0 32px; } .footer-grid{ display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px; } @media(max-width:780px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}} @media(max-width:480px){.footer-grid{grid-template-columns:1fr}} .footer-brand{max-width:340px} .footer-brand p{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.6} .footer-col h5{ font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text); letter-spacing:0.16em;text-transform:uppercase;margin-bottom:18px; } .footer-col a{ display:block;font-size:13px;color:var(--text-2); padding:6px 0;transition:color .15s ease; } .footer-col a:hover{color:var(--accent-2)} .footer-bottom{ margin-top:48px;padding-top:24px;border-top:1px solid var(--border); display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px; font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:0.06em; } /* ── Reveal-on-scroll (GSAP fallback) ───────────────────────── */ .reveal{opacity:0;transform:translateY(28px)} .reveal.in{opacity:1;transform:translateY(0);transition:opacity .7s ease, transform .7s ease} /* ── Responsive tightening ──────────────────────────────────── */ @media (max-width: 720px){ .section{padding:80px 0} .section-sm{padding:48px 0} .hero{padding:calc(var(--nav-h) + 40px) 0 60px} .hero-cta{flex-direction:column} .hero-cta .btn{width:100%} .hero-meta{gap:14px;font-size:10px} .hero-meta span{flex:1 1 calc(50% - 14px);text-align:center} .chat{margin-top:48px;border-radius:14px} .chat-body{padding:18px 14px;gap:12px;min-height:240px} .chat-msg{max-width:94%} .chat-bubble{font-size:13px;padding:9px 12px} .nav-actions .btn{height:38px;padding:0 14px;font-size:12px} .stats{gap:14px;padding:24px 0} .stat-num{font-size:32px} .tier{padding:28px 22px} .cta-banner{padding:44px 24px;border-radius:16px} .form-card{padding:24px 20px} } @media (max-width: 480px){ .hero-meta{flex-direction:column;gap:10px;text-align:center} .hero-meta span{flex:none;width:100%} .nav-actions .btn-ghost{display:none} .footer{padding:48px 0 28px} .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px} } /* ────────────────────────────────────────────────────────────── Premium signature moments — ported from the platform dashboard so the marketing site reads as the same product. ────────────────────────────────────────────────────────────── */ /* Universal keyframe vocabulary (matches dashboard_mock.css) */ @keyframes zd-fade-up{from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)}} @keyframes zd-fade-in{from{opacity:0} to{opacity:1}} @keyframes zd-breathe{ 0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,0.04), 0 8px 24px var(--glow)} 50% {box-shadow:0 0 0 1px rgba(255,255,255,0.06), 0 12px 36px var(--glow), 0 0 0 6px var(--accent-bg)} } @keyframes zd-pulse-soft{0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:.85;transform:scale(1.25)}} @keyframes zd-shimmer{0%{transform:translateX(-120%) skewX(-12deg)} 100%{transform:translateX(220%) skewX(-12deg)}} @keyframes zd-grad-pan{0%{background-position:0% 50%} 100%{background-position:200% 50%}} @keyframes zd-spin-cw{to{transform:rotate(360deg)}} @keyframes zd-spin-ccw{to{transform:rotate(-360deg)}} @keyframes zd-core{0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.45);opacity:.7}} @keyframes zd-cross-glow{0%,100%{opacity:.55} 50%{opacity:1}} @keyframes zd-hero-grad{ 0% {background-position:0% 50%} 50% {background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes zd-trio{0%,100%{opacity:.25} 50%{opacity:1}} @keyframes zd-marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}} @keyframes zd-float{ 0% {opacity:0;transform:translateY(0) scale(.6)} 20% {opacity:.9;transform:translateY(-14px) scale(1)} 60% {opacity:.6;transform:translateY(-32px) scale(1.05)} 100%{opacity:0;transform:translateY(-52px) scale(.6)} } @keyframes zd-sheen{ 0%,40% {transform:translateX(-100%)} 60%,100%{transform:translateX(220%)} } @keyframes zd-ring-out{0%{opacity:.6;transform:scale(.9)} 100%{opacity:0;transform:scale(1.5)}} @keyframes zd-scan{0%{background-position:0 -100%} 100%{background-position:0 200%}} @keyframes zd-dot-pulse{ 0%,100%{box-shadow:0 0 0 0 currentColor;opacity:1} 70% {box-shadow:0 0 0 6px transparent;opacity:.8} 100% {box-shadow:0 0 0 0 transparent} } @property --ang{syntax:'';initial-value:0deg;inherits:false} @keyframes zd-trace{to{--ang:360deg}} /* Hero gradient text — smooth color cycling (replaces the simple pan) */ .hero h1.grad-text, .hero h1 .grad-text{ display:inline-block; background-image:linear-gradient( 100deg, #5B2BE3 0%, #3941E3 18%, #1E6FE8 36%, #2EC8E8 50%, #1E6FE8 64%, #3941E3 82%, #5B2BE3 100% ); background-size:240% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:zd-hero-grad 11s ease-in-out infinite; } /* Hero ambient layers — particle network + cursor spotlight + edge trace */ .hero{--mx:80%;--my:15%;isolation:isolate} .hero::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(420px circle at var(--mx) var(--my), rgba(110,59,255,.16), transparent 55%); transition:background .25s ease; } .hero-particles{ position:absolute;inset:0;pointer-events:none;overflow:hidden; z-index:0;opacity:.55; } .hero-particles span{ position:absolute;width:3px;height:3px;border-radius:50%; background:var(--cyan);box-shadow:0 0 10px var(--cyan); animation:zd-float 14s ease-in-out infinite;opacity:0; } .hero-particles span:nth-child(1) {left:10%;top:30%;animation-delay:0s} .hero-particles span:nth-child(2) {left:18%;top:65%;animation-delay:1.2s;background:var(--violet);box-shadow:0 0 10px var(--violet)} .hero-particles span:nth-child(3) {left:32%;top:20%;animation-delay:2.4s} .hero-particles span:nth-child(4) {left:48%;top:75%;animation-delay:.7s;background:var(--blue);box-shadow:0 0 10px var(--blue)} .hero-particles span:nth-child(5) {left:62%;top:45%;animation-delay:3.1s} .hero-particles span:nth-child(6) {left:75%;top:28%;animation-delay:1.8s;background:var(--violet);box-shadow:0 0 10px var(--violet)} .hero-particles span:nth-child(7) {left:88%;top:62%;animation-delay:2.6s} .hero-particles span:nth-child(8) {left:25%;top:88%;animation-delay:4.2s;background:var(--blue);box-shadow:0 0 10px var(--blue)} .hero-particles span:nth-child(9) {left:55%;top:15%;animation-delay:3.6s} .hero-particles span:nth-child(10){left:82%;top:90%;animation-delay:.4s} .hero-edge{ position:absolute;inset:0;border-radius:inherit;pointer-events:none; padding:1px; background:conic-gradient(from var(--ang,0deg), transparent 0%, var(--violet) 8%, var(--cyan) 16%, transparent 28%, transparent 100%); -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); -webkit-mask-composite:xor;mask-composite:exclude; animation:zd-trace 6s linear infinite;opacity:.5; } @supports not (background:conic-gradient(from 0deg, red, blue)){.hero-edge{display:none}} .hero-inner{position:relative;z-index:2} /* 3D card tilt + glare highlight (cards / pipeline-step / module / stat) */ .card,.stat,.pipeline-step,.starter-card{ transform-style:preserve-3d;will-change:transform; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0); transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .15s, box-shadow .25s, background .2s; } .card:hover,.stat:hover,.pipeline-step:hover,.starter-card:hover{ box-shadow:0 18px 40px -20px var(--glow), 0 6px 18px -10px rgba(0,0,0,.4); } .card::before,.starter-card::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(220px circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.07), transparent 55%); opacity:0;transition:opacity .3s;z-index:0; } .card:hover::before,.starter-card:hover::before{opacity:1} .card > *{position:relative;z-index:1} .card::after{ content:'';position:absolute;inset:auto -1px -1px -1px;height:1px; background:var(--grad);opacity:0;transition:opacity .3s; } .card:hover::after{opacity:1} /* Stat — count-up tabular numerals + gradient sweep on hover */ .stat-num,.stat .value{font-variant-numeric:tabular-nums} .stat{position:relative;overflow:hidden} .stat::after{ content:'';position:absolute;inset:auto -1px -1px -1px;height:1px; background:var(--grad);opacity:0;transition:opacity .3s; } .stat:hover::after{opacity:1} /* Module strip → marquee (keep grid as fallback) */ .modules-marquee{ position:relative;margin-top:32px; border-top:1px solid var(--border);border-bottom:1px solid var(--border); padding:18px 0;overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .modules-marquee .track{ display:flex;gap:14px;width:max-content; animation:zd-marquee 60s linear infinite; } .modules-marquee:hover .track{animation-play-state:paused} .modules-marquee .item{ display:inline-flex;align-items:center;gap:8px;flex-shrink:0; padding:9px 14px;border-radius:99px; background:var(--surface);border:1px solid var(--border); font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--text-2); letter-spacing:-0.005em;white-space:nowrap; transition:border-color .2s, color .2s, background .2s; } .modules-marquee .item:hover{border-color:var(--accent);color:var(--text);background:var(--accent-bg)} .modules-marquee .item::before{ content:'';width:5px;height:5px;border-radius:50%;background:var(--accent-2); box-shadow:0 0 6px var(--accent-2);flex-shrink:0; } /* Hero capability strip (under chat) */ .cap-strip{ margin-top:36px;display:flex;align-items:center;gap:14px; border-top:1px solid var(--border);padding-top:18px;position:relative;z-index:2; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .cap-strip .label{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.18em; text-transform:uppercase;color:var(--muted);flex-shrink:0; } .cap-strip .track{display:flex;gap:30px;animation:zd-marquee 38s linear infinite;flex-shrink:0;width:max-content} .cap-strip .item{ display:inline-flex;align-items:center;gap:6px; font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-2); letter-spacing:0.04em;white-space:nowrap; } .cap-strip .item::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 6px var(--accent-2)} .cap-strip:hover .track{animation-play-state:paused} /* Primary button — light sweep on hover */ .btn-primary{position:relative;overflow:hidden} .btn-primary::after{ content:'';position:absolute;top:0;left:0;width:40%;height:100%; background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.32) 50%, transparent 100%); transform:translateX(-120%) skewX(-12deg);pointer-events:none; } .btn-primary:hover::after{animation:zd-shimmer 900ms ease-out} /* ── Production-fidelity AI chat clone ─────────────────────── Markup, classes, dimensions, animations match /static/index.html (the actual product) one-for-one so the marketing site shows exactly what users get in-product. */ .ai-chat{ margin:64px auto 0;max-width:980px; display:grid;grid-template-columns:260px 1fr; border:1px solid var(--border-2);border-radius:18px; background:linear-gradient(180deg, var(--surface), var(--bg-2)); box-shadow:0 30px 80px -20px rgba(110,59,255,.20), 0 0 0 1px rgba(110,59,255,.05); overflow:hidden;min-height:540px; position:relative; } .ai-chat::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; padding:1px; background:conic-gradient(from var(--ang,0deg), transparent 0%, rgba(110,59,255,.45) 8%, rgba(46,200,232,.55) 16%, transparent 28%, transparent 100%); -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); -webkit-mask-composite:xor;mask-composite:exclude; animation:zd-trace 8s linear infinite;opacity:.55;z-index:3; } @media(max-width:780px){.ai-chat{grid-template-columns:1fr;min-height:580px}.ai-chat .conv-pane{display:none}} /* Conversations pane (left) */ .conv-pane{ border-right:1px solid var(--border);background:var(--bg-2); display:flex;flex-direction:column;min-width:0; } .conv-head{ display:flex;align-items:center;justify-content:space-between; padding:14px 16px;border-bottom:1px solid var(--border); } .conv-head .t{ font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.18em; text-transform:uppercase;color:var(--muted); } .conv-head .new-btn{ display:inline-flex;align-items:center;gap:5px; padding:4px 9px;border-radius:7px;border:1px solid var(--border-2); background:var(--surface);color:var(--text);cursor:pointer; font-family:'JetBrains Mono',monospace;font-size:10.5px; } .conv-head .new-btn svg{width:11px;height:11px;stroke-width:2} .conv-section{ padding:14px 16px 4px;font-family:'JetBrains Mono',monospace; font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted); } .conv-list{padding:6px 10px;display:flex;flex-direction:column;gap:2px} .conv-item{ position:relative;padding:9px 12px;border-radius:8px;cursor:pointer; display:flex;flex-direction:column;gap:3px; transition:background .15s, transform .15s;border:1px solid transparent; } .conv-item::before{ content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px; background:var(--grad);border-radius:2px;opacity:0;transform:scaleY(.4); transition:opacity .25s, transform .25s cubic-bezier(.2,.8,.2,1); } .conv-item:hover{background:var(--surface);transform:translateX(2px)} .conv-item:hover::before, .conv-item.active::before{opacity:1;transform:scaleY(1)} .conv-item.active{background:var(--surface-2);border-color:var(--border-2)} .conv-item .ct{ display:flex;align-items:center;gap:8px; font-size:12px;font-weight:600;color:var(--text); } .conv-item .ct > span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .conv-item .badge-mini{ display:inline-flex;align-items:center;gap:4px;padding:1px 6px; border-radius:99px;font-family:'JetBrains Mono',monospace;font-size:9px; letter-spacing:0.06em;border:1px solid var(--border-2); background:var(--surface);color:var(--muted); } .conv-item .badge-mini.live{color:var(--low);border-color:rgba(76,217,123,.35);position:relative} .conv-item .badge-mini.live::before{ content:'';width:5px;height:5px;border-radius:50%;background:var(--low);box-shadow:0 0 6px var(--low); } .conv-item .badge-mini.live::after{ content:'';position:absolute;inset:-2px;border-radius:99px;border:1px solid var(--low); opacity:0;animation:zd-ring-out 2s ease-out infinite; } .conv-item .cs{ font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* Chat pane — matches /static/index.html .chat-pane exactly */ .chat-pane{ display:flex;flex-direction:column;min-width:0;background:var(--bg); position:relative; } .chat-pane-head{ padding:10px 22px;border-bottom:1px solid var(--border); display:flex;align-items:center;gap:12px;flex-shrink:0; } .chat-pane-head .ai-orb{ width:34px;height:34px;border-radius:10px;flex-shrink:0; background:transparent; display:flex;align-items:center;justify-content:center; box-shadow:0 0 18px var(--glow); } .chat-pane-head .ai-orb img{width:100%;height:100%;object-fit:contain;display:none} html.dark .chat-pane-head .ai-orb .logo-dark {display:block} html.light .chat-pane-head .ai-orb .logo-light{display:block} .chat-pane-head .ai-meta{flex:1;min-width:0} .chat-pane-head .ai-name{ font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--text); } .chat-pane-head .ai-status{ font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--accent-2); display:flex;align-items:center;gap:5px; } .chat-pane-head .ai-status::before{ content:'';width:5px;height:5px;border-radius:50%;background:var(--accent-2); box-shadow:0 0 5px var(--accent-2);animation:zd-blink 1.5s ease-in-out infinite; } .chat-pane-head .model-row{display:flex;gap:6px} .model-btn{ background:var(--surface);border:1px solid var(--border);border-radius:7px; padding:5px 10px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted); cursor:pointer;transition:all .15s; } .model-btn:hover{color:var(--text)} .model-btn.active{color:var(--accent-2);border-color:var(--border-2);background:var(--accent-bg)} @keyframes zd-blink{0%,100%{opacity:1} 50%{opacity:.3}} /* Welcome + conversation stage (overlay so they cross-fade in place) */ .chat-stage{flex:1;display:flex;flex-direction:column;min-height:0;position:relative} .chat-welcome{ position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;padding:32px 28px;text-align:center; overflow:auto; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); } .chat-welcome.fade-out{opacity:0;transform:translateY(-10px) scale(.98);pointer-events:none} .chat-welcome .ai-mark{width:120px;height:120px;margin-bottom:18px} .chat-welcome h2{ font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700; letter-spacing:-0.04em;color:var(--text);max-width:560px; } .chat-welcome p{ margin-top:12px;color:var(--text-2);font-size:14px;max-width:540px;line-height:1.55; } /* AI mark targeting reticle (production keyframes) */ .ai-mark{position:relative;filter:drop-shadow(0 0 12px var(--glow))} .ai-mark svg{width:100%;height:100%;display:block;animation:zd-aimark-pulse 4s ease-in-out infinite} .ai-mark .reticle-outer{transform-origin:center;animation:zd-ai-rot 28s linear infinite} .ai-mark .reticle-mid {transform-origin:center;animation:zd-ai-rot-rev 22s linear infinite} .ai-mark .reticle-inner{transform-origin:center;animation:zd-ai-rot 16s linear infinite} .ai-mark .core-pulse {transform-origin:center;animation:zd-core-pulse 2.6s ease-in-out infinite} .ai-mark .orbital-dots {transform-origin:center;animation:zd-ai-rot 14s linear infinite} .ai-mark .crosshair {animation:zd-cross-glow 3.2s ease-in-out infinite} @keyframes zd-aimark-pulse{ 0%,100%{opacity:.85;filter:drop-shadow(0 0 12px var(--glow))} 50% {opacity:1;filter:drop-shadow(0 0 24px var(--glow))} } @keyframes zd-ai-rot{to{transform:rotate(360deg)}} @keyframes zd-ai-rot-rev{to{transform:rotate(-360deg)}} @keyframes zd-core-pulse{0%,100%{transform:scale(.95)} 50%{transform:scale(1.1)}} /* Starter cards inside welcome */ .starter-grid{ margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;width:100%;max-width:760px; } @media(max-width:680px){.starter-grid{grid-template-columns:1fr}} .starter-card{ position:relative;overflow:hidden; border:1px solid var(--border);border-radius:12px;padding:14px 16px; background:var(--surface);text-align:left;cursor:pointer; display:flex;align-items:start;gap:12px; } .starter-card:hover{border-color:var(--border-hi)} .starter-card .si{ width:28px;height:28px;border-radius:7px;flex-shrink:0; background:var(--accent-bg);color:var(--accent-2); display:inline-flex;align-items:center;justify-content:center; transition:transform .25s cubic-bezier(.2,.8,.2,1), background .2s; } .starter-card:hover .si{transform:rotate(-6deg) scale(1.06)} .starter-card .si svg{width:14px;height:14px;stroke-width:1.6;fill:none;stroke:currentColor} .starter-card .sx{min-width:0;flex:1} .starter-card .st{display:block;font-size:13px;font-weight:500;color:var(--text)} .starter-card .sd{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);margin-top:2px} .starter-card::after{ content:'';position:absolute;inset:auto -1px -1px -1px;height:1px; background:var(--grad);opacity:0;transition:opacity .3s; } .starter-card:hover::after{opacity:1} /* ── Messages ──────────────────────────────────────────────── Markup matches /static/index.html exactly: msg / msg-user / msg-ai with msg-user-bubble + msg-ts, or msg-ai-bubble (head / body / actions). */ .messages{ position:absolute;inset:0;display:flex;flex-direction:column; padding:20px;gap:14px;overflow:auto; opacity:0;transform:translateY(10px);pointer-events:none; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); } .messages.fade-in{opacity:1;transform:translateY(0);pointer-events:auto} .msg{animation:zd-msg-in .3s ease} @keyframes zd-msg-in{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)}} .msg-user{align-self:flex-end;max-width:70%} .msg-ai{align-self:flex-start;max-width:88%} .msg-user-bubble{ background:var(--accent-bg);border:1px solid var(--border-2); border-radius:14px 4px 14px 14px;padding:12px 16px; } .msg-user-text{ font-size:13px;color:var(--text);line-height:1.6;font-family:'Inter',sans-serif; } .msg-ts{ font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted); margin-top:4px;text-align:right; } .msg-ai-bubble{ background:var(--surface);border:1px solid var(--border); border-radius:4px 14px 14px 14px;overflow:hidden;position:relative; } .msg-ai-bubble::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--grad); } .msg-ai-hd{ padding:8px 14px;border-bottom:1px solid var(--border);background:var(--surface-2); display:flex;align-items:center;gap:8px; } .msg-ai-indicator{ width:6px;height:6px;border-radius:50%;background:var(--accent-2); box-shadow:0 0 5px var(--accent-2);animation:zd-blink 1.5s infinite;flex-shrink:0; } .msg-ai-label{ font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700; letter-spacing:1.2px;color:var(--accent-2);text-transform:uppercase; } .msg-ai-ts-label{ font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted);margin-left:auto; } .msg-ai-body{ padding:14px 18px;font-size:13px;color:var(--text-2);line-height:1.7; font-family:'Inter',sans-serif; } .msg-ai-body strong{color:var(--text)} .msg-ai-body code{ background:var(--surface-2);padding:1px 6px;border-radius:3px; font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent-2); } .msg-ai-body pre{ background:var(--bg);border:1px solid var(--border);border-radius:8px; padding:12px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent-2); overflow-x:auto;margin:10px 0;line-height:1.6; } .msg-ai-body ul{padding-left:18px;margin:8px 0} .msg-ai-body li{margin-bottom:4px} .msg-ai-actions{ padding:6px 14px;border-top:1px solid var(--border); display:flex;gap:6px;flex-wrap:wrap; } .ai-act-btn{ background:var(--surface-2);border:1px solid var(--border);border-radius:6px; padding:4px 10px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted); cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.5px; } .ai-act-btn:hover{border-color:var(--border-hi);color:var(--text)} /* Severity colour helpers inside an AI body */ .msg-ai-body .sev-crit{color:var(--crit);font-weight:700} .msg-ai-body .sev-high{color:var(--high);font-weight:700} .msg-ai-body .sev-med {color:var(--med); font-weight:700} .msg-ai-body .sev-low {color:var(--low); font-weight:700} .msg-ai-body .sev-info{color:var(--info);font-weight:700} /* ── Thinking block (the "Processing" animation users see) Matches /static/index.html exactly: 300px wide, sweep across top, 5 stages with name(90px)+bar(2px)+st(28px). */ .thinking-block{ align-self:flex-start;background:var(--surface);border:1px solid var(--border-2); border-radius:12px;padding:14px 16px;width:300px;position:relative;overflow:hidden; } .thinking-block::after{ content:'';position:absolute;left:0;right:0;height:1px;top:0; background:linear-gradient(90deg,transparent,var(--accent-2),transparent); animation:zd-sweep 2s linear infinite; } @keyframes zd-sweep{ 0%{top:0;opacity:0} 5%{opacity:1} 95%{opacity:1} 100%{top:100%;opacity:0} } .thinking-label{ font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:var(--accent-2); letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px; display:flex;align-items:center;gap:6px; } .thinking-label .dot{ width:6px;height:6px;border-radius:50%;background:var(--accent-2); box-shadow:0 0 6px var(--glow-2);animation:zd-blink-fast .7s infinite; } @keyframes zd-blink-fast{0%,100%{opacity:1} 50%{opacity:.3}} .thinking-stages{display:flex;flex-direction:column;gap:7px} .ts-row{display:flex;align-items:center;gap:8px} .ts-name{ font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted); width:90px;flex-shrink:0;transition:color .3s; } .ts-row.active .ts-name{color:var(--accent-2)} .ts-row.done .ts-name{color:var(--text-2)} .ts-bar-w{flex:1;height:2px;background:var(--border);border-radius:99px;overflow:hidden} .ts-bar-f{height:100%;border-radius:99px;background:var(--grad);transition:width .8s ease;width:0} .ts-st{ font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700; width:28px;text-align:right;flex-shrink:0;color:var(--muted); } .ts-row.active .ts-st{color:var(--accent-2)} .ts-row.done .ts-st{color:var(--text-2)} /* Composer — matches production exactly */ .composer{ border-top:1px solid var(--border);padding:14px 22px;background:var(--bg); flex-shrink:0;position:relative;z-index:2; } .composer-box{ display:flex;align-items:center;gap:10px; border:1px solid var(--border-2);border-radius:14px; background:var(--surface);padding:8px 8px 8px 14px; transition:border-color .15s, box-shadow .15s; } .composer-box:focus-within, .composer-box.focused{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-bg)} .composer-fake{ flex:1;font-family:'Inter',sans-serif;font-size:14px;color:var(--muted); display:flex;align-items:center;padding:8px 0;line-height:1.4;min-height:24px; } .composer-fake .typed{color:var(--text)} .composer-fake .caret{ display:inline-block;width:1px;height:14px;background:var(--accent); margin-left:2px;animation:zd-caret 1s steps(1) infinite;vertical-align:middle; } @keyframes zd-caret{50%{opacity:0}} .send-btn{ position:relative; width:38px;height:38px;border-radius:10px;border:none;cursor:pointer; background:var(--grad);color:#fff; display:inline-flex;align-items:center;justify-content:center; transition:transform .12s, box-shadow .15s;flex-shrink:0;z-index:1; } .send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px var(--glow)} .send-btn svg{width:14px;height:14px;stroke-width:2;fill:none;stroke:currentColor} .send-btn::before{ content:'';position:absolute;inset:-3px;border-radius:12px; background:var(--grad);opacity:0;filter:blur(8px);transition:opacity .25s;z-index:-1; } .send-btn::after{ content:'';position:absolute;inset:-2px;border-radius:12px;padding:2px; background:conic-gradient(from var(--ang,0deg), var(--violet), var(--cyan), var(--violet)); -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); -webkit-mask-composite:xor;mask-composite:exclude; opacity:0;transition:opacity .25s;animation:zd-trace 4s linear infinite; } .send-btn:hover::before{opacity:.55} .send-btn:hover::after{opacity:1} .composer-hint{ margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:10px; color:var(--muted);letter-spacing:0.06em;text-align:center; } /* Pipeline-step — soft hover lift + accent bar */ .pipeline-step{position:relative;transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .2s} .pipeline-step:hover{transform:translateY(-2px)} .pipeline-step::after{ content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px; background:var(--grad);opacity:0;transition:opacity .3s; } .pipeline-step:hover::after{opacity:1} /* Stat number — slow pulse on hover */ .stat:hover .stat-num{ background-position:100% 50%; transition:background-position 1.6s ease; } .stat-num{ background:var(--grad);background-size:200% 100%;background-position:0% 50%; -webkit-background-clip:text;background-clip:text;color:transparent; } /* CTA banner — subtle border-trace */ .cta-banner{position:relative;isolation:isolate} .cta-banner .cta-edge{ position:absolute;inset:0;border-radius:inherit;pointer-events:none; padding:1px; background:conic-gradient(from var(--ang,0deg), transparent 0%, rgba(110,59,255,.5) 10%, rgba(46,200,232,.5) 20%, transparent 32%, transparent 100%); -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); -webkit-mask-composite:xor;mask-composite:exclude; animation:zd-trace 9s linear infinite;opacity:.6; } /* Footer link underline grow — display stays block so links stack vertically; width:fit-content shrinks the link to just its text so the ::after underline doesn't span the whole column. */ .footer-col a{ position:relative; display:block;width:fit-content;max-width:100%; } .footer-col a::after{ content:'';position:absolute;left:0;bottom:2px;height:1px;width:100%; background:var(--accent-2);transform:scaleX(0);transform-origin:left; transition:transform .25s cubic-bezier(.2,.8,.2,1); } .footer-col a:hover::after{transform:scaleX(1)} /* Responsive AI chat */ @media(max-width:640px){ .ai-chat{margin-top:48px;border-radius:14px} .chat-welcome h2{font-size:20px} .ai-mark{width:84px;height:84px} .starter-grid{grid-template-columns:1fr} .messages{padding:16px 14px 12px} } /* ────────────────────────────────────────────────────────────── Platform-page panels: code-panel, finding-stack, intent-flow These replace the chat blocks on platform.html so the chat showcase only lives on the home page. ────────────────────────────────────────────────────────────── */ .code-panel{ position:relative; border:1px solid var(--border-2);border-radius:14px; background:linear-gradient(180deg, var(--surface), var(--bg-2)); box-shadow:0 24px 60px -24px rgba(110,59,255,.18); overflow:hidden; } .code-panel::after{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; padding:1px; background:conic-gradient(from var(--ang,0deg), transparent 0%, rgba(110,59,255,.35) 8%, rgba(46,200,232,.45) 16%, transparent 28%, transparent 100%); -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); -webkit-mask-composite:xor;mask-composite:exclude; animation:zd-trace 9s linear infinite;opacity:.45; } .code-panel-head{ display:flex;align-items:center;gap:12px; padding:12px 16px;border-bottom:1px solid var(--border); background:var(--surface-2);position:relative;z-index:1; } .code-panel-dots{display:flex;gap:6px} .code-panel-dots i{width:10px;height:10px;border-radius:50%} .code-panel-dots i:nth-child(1){background:#ff5f56} .code-panel-dots i:nth-child(2){background:#ffbd2e} .code-panel-dots i:nth-child(3){background:#27c93f} .code-panel-title{ font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-2); letter-spacing:0.04em; } .code-panel-tag{ margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:9px; color:var(--accent-2);letter-spacing:0.16em;text-transform:uppercase; padding:3px 9px;border-radius:99px;background:var(--accent-bg); border:1px solid var(--border-2);display:inline-flex;align-items:center;gap:5px; } .code-panel-tag::before{ content:'';width:5px;height:5px;border-radius:50%;background:var(--accent-2); box-shadow:0 0 5px var(--accent-2);animation:zd-blink 1.5s ease-in-out infinite; } .code-panel-body{ padding:18px 22px;font-family:'JetBrains Mono',monospace; font-size:12px;color:var(--text-2);line-height:1.85; overflow-x:auto;position:relative;z-index:1; } .code-panel-body .ln{display:flex;align-items:flex-start;gap:14px;white-space:pre-wrap} .code-panel-body .ln::before{ content:attr(data-n);color:var(--muted-2);font-size:11px; width:20px;text-align:right;flex-shrink:0;user-select:none; } .code-panel-body .kw {color:#c084fc;font-weight:600} .code-panel-body .str{color:var(--low)} .code-panel-body .num{color:var(--med)} .code-panel-body .com{color:var(--muted);font-style:italic} .code-panel-body .key{color:var(--accent-2)} .code-panel-body .ind{padding-left:24px} .code-panel-body .ind2{padding-left:48px} html.light .code-panel-body .kw{color:#7c3aed} /* Finding-stack — list of severity-tagged findings */ .finding-stack{display:flex;flex-direction:column;gap:10px} .finding-stack-head{ display:flex;align-items:center;gap:10px; padding:14px 16px;border:1px solid var(--border-2);border-radius:12px; background:var(--surface); } .finding-stack-head .ti{ font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-2); letter-spacing:0.08em;text-transform:uppercase; } .finding-stack-head .meta{ margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted); } .finding-stack-head .live-dot{ width:6px;height:6px;border-radius:50%;background:var(--low); box-shadow:0 0 6px var(--low);animation:zd-blink 1.4s ease-in-out infinite; } .finding-row{ display:flex;align-items:flex-start;gap:14px; padding:14px 16px;border:1px solid var(--border);border-radius:12px; background:var(--surface); transition:border-color .2s, transform .2s; animation:zd-fade-up .5s cubic-bezier(.2,.8,.2,1) both; } .finding-row:hover{border-color:var(--border-2);transform:translateX(2px)} .finding-row:nth-child(2){animation-delay:.08s} .finding-row:nth-child(3){animation-delay:.16s} .finding-row:nth-child(4){animation-delay:.24s} .finding-row:nth-child(5){animation-delay:.32s} .finding-row .sev-tag{ flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:9px; font-weight:700;letter-spacing:0.14em;text-transform:uppercase; padding:4px 8px;border-radius:5px;border:1px solid currentColor; margin-top:1px; } .finding-row .sev-tag.crit{color:var(--crit);background:rgba(255,77,106,.08)} .finding-row .sev-tag.high{color:var(--high);background:rgba(255,138,61,.08)} .finding-row .sev-tag.med {color:var(--med); background:rgba(251,191,36,.08)} .finding-row .sev-tag.low {color:var(--low); background:rgba(76,217,123,.08)} .finding-row .body{flex:1;min-width:0} .finding-row .body .t{font-size:13px;font-weight:600;color:var(--text);letter-spacing:-0.005em} .finding-row .body .t code{ font-family:'JetBrains Mono',monospace;font-size:11.5px; background:var(--surface-2);padding:1px 6px;border-radius:4px;color:var(--accent-2); } .finding-row .body .d{ font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted); margin-top:5px;line-height:1.5; } /* Intent-flow — visualizes how the chat router classifies messages */ .intent-flow{ border:1px solid var(--border-2);border-radius:14px; background:linear-gradient(180deg, var(--surface), var(--bg-2)); padding:22px;display:flex;flex-direction:column;gap:14px; box-shadow:0 24px 60px -24px rgba(110,59,255,.18);position:relative;overflow:hidden; } .intent-flow::after{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; padding:1px; background:conic-gradient(from var(--ang,0deg), transparent 0%, rgba(110,59,255,.35) 8%, rgba(46,200,232,.45) 16%, transparent 28%, transparent 100%); -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); -webkit-mask-composite:xor;mask-composite:exclude; animation:zd-trace 9s linear infinite;opacity:.4; } .intent-row{ display:grid;grid-template-columns:1fr auto 90px;gap:12px;align-items:center; padding:12px 14px;border:1px solid var(--border);border-radius:10px; background:var(--surface);position:relative;z-index:1; animation:zd-fade-up .5s cubic-bezier(.2,.8,.2,1) both; } .intent-row:nth-child(2){animation-delay:.08s} .intent-row:nth-child(3){animation-delay:.16s} .intent-row:nth-child(4){animation-delay:.24s} .intent-row .input{ font-family:'Inter',sans-serif;font-size:13px;color:var(--text); display:flex;align-items:center;gap:8px;min-width:0; } .intent-row .input .who{ flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:9px; letter-spacing:0.14em;color:var(--muted);text-transform:uppercase; } .intent-row .input .msg{ flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .intent-row .arrow{ font-family:'JetBrains Mono',monospace;color:var(--muted);font-size:14px; } .intent-pill{ font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700; letter-spacing:0.14em;text-transform:uppercase;text-align:center; padding:5px 10px;border-radius:6px;border:1px solid currentColor; } .intent-pill.scan {color:var(--accent-2);background:var(--accent-bg)} .intent-pill.fu {color:var(--med); background:rgba(251,191,36,.08)} .intent-pill.gen {color:var(--low); background:rgba(76,217,123,.08)} .intent-flow-foot{ display:flex;justify-content:space-between;align-items:center;gap:12px; padding-top:8px;font-family:'JetBrains Mono',monospace;font-size:10px; color:var(--muted);letter-spacing:0.06em;position:relative;z-index:1; } .intent-flow-foot b{color:var(--accent-2)} @media(max-width:560px){.intent-row{grid-template-columns:1fr 60px}.intent-row .arrow{display:none}} /* ────────────────────────────────────────────────────────────── Legal documents (privacy, terms) Long-form prose: numbered sections, sticky TOC, readable line length. Uses the same surface/border tokens as the rest of the site. ────────────────────────────────────────────────────────────── */ .legal-wrap{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start} @media(max-width:960px){.legal-wrap{grid-template-columns:1fr;gap:24px}} .legal-toc{ position:sticky;top:calc(var(--nav-h) + 24px); border:1px solid var(--border);background:var(--surface); border-radius:var(--radius);padding:18px 16px;font-size:13px; } .legal-toc h5{ font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600; letter-spacing:0.18em;text-transform:uppercase;color:var(--muted); margin-bottom:10px; } .legal-toc ol{list-style:none;padding:0;margin:0;counter-reset:tocn} .legal-toc ol li{counter-increment:tocn;margin:0} .legal-toc ol li a{ display:flex;gap:8px;padding:6px 6px;color:var(--text-2); border-radius:6px;line-height:1.35; } .legal-toc ol li a::before{ content:counter(tocn) ".";color:var(--muted);font-family:'JetBrains Mono',monospace; font-size:11px;min-width:22px; } .legal-toc ol li a:hover{background:var(--surface-2);color:var(--text)} @media(max-width:960px){.legal-toc{position:static;top:auto}} .legal-body{ border:1px solid var(--border);background:var(--surface); border-radius:var(--radius);padding:36px 40px; } @media(max-width:560px){.legal-body{padding:24px 20px}} .legal-body p,.legal-body li{color:var(--text-2);font-size:15px;line-height:1.7} .legal-body p{margin:0 0 14px} .legal-body section + section{margin-top:36px} .legal-body h2{ font-size:22px;font-family:'JetBrains Mono','Geist Mono',Menlo,monospace; font-weight:700;letter-spacing:-0.02em;color:var(--text); margin-bottom:14px;scroll-margin-top:calc(var(--nav-h) + 16px); } .legal-body h2 .num{ display:inline-block;color:var(--accent-2);margin-right:10px; font-family:'JetBrains Mono',monospace;font-size:18px; } body.font-glancyr .legal-body h2{font-family:'Glancyr','JetBrains Mono',monospace;font-weight:400} .legal-body h3{ font-size:16px;color:var(--text);margin:22px 0 10px; font-family:'JetBrains Mono',monospace;font-weight:600;letter-spacing:-0.01em; } .legal-body ul{padding-left:20px;margin:0 0 14px} .legal-body ul li{margin:6px 0} .legal-body code{ background:var(--bg-2);padding:1px 6px;border-radius:4px; font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--text); } .legal-body a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px} .legal-tldr{ border:1px solid var(--border-2);background:var(--accent-bg); border-radius:var(--radius);padding:22px 26px;margin-bottom:28px; } .legal-tldr .eyebrow{margin-bottom:10px} .legal-tldr h2{ font-size:18px;color:var(--text);margin:0 0 12px; font-family:'JetBrains Mono',monospace;font-weight:700;letter-spacing:-0.01em; } .legal-tldr ul{padding-left:20px;margin:0} .legal-tldr li{margin:6px 0;color:var(--text-2);font-size:14px} .legal-meta{ display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12px;color:var(--muted); font-family:'JetBrains Mono',monospace;letter-spacing:0.06em;text-transform:uppercase; margin-top:18px; } .legal-meta b{color:var(--text-2);font-weight:600} .legal-table{ width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:13px; border:1px solid var(--border);border-radius:8px;overflow:hidden; } .legal-table th,.legal-table td{ padding:10px 12px;text-align:left;border-bottom:1px solid var(--border); vertical-align:top; } .legal-table th{ background:var(--surface-2);color:var(--text);font-weight:600; font-family:'JetBrains Mono',monospace;font-size:11px; letter-spacing:0.08em;text-transform:uppercase; } .legal-table tr:last-child td{border-bottom:none} .legal-table td{color:var(--text-2)} /* ────────────────────────────────────────────────────────────── Light theme — matches /static/index.html and dashboard_mock.css Selectors cover both `html.light` (for the FOUC-safe inline script) and `body.light` (for the runtime toggle). ────────────────────────────────────────────────────────────── */ html.light, body.light{ --bg: #fafafa; --bg-2: #f4f4f6; --surface: #ffffff; --surface-2: #f7f7fa; --surface-3: #efeff4; --border: #e6e6ec; --border-2: #d8d8e0; --border-hi: #b8b8c4; --text: #0e0e14; --text-2: #45454f; --muted: #6f6f7c; --muted-2: #9c9ca8; --accent: #5B2BE3; --accent-bg: rgba(91,43,227,.07); --accent-bg-hi: rgba(91,43,227,.14); --glow: rgba(91,43,227,.18); --glow-2: rgba(46,200,232,.18); } /* Light-mode tweaks for new visual layers */ html.light .nav{background:rgba(255,255,255,.65)} html.light .nav.scrolled{background:rgba(255,255,255,.88);box-shadow:0 6px 24px -16px rgba(20,20,40,.18)} html.light .hero::after{background:radial-gradient(420px circle at var(--mx) var(--my), rgba(91,43,227,.10), transparent 55%)} html.light .hero-particles span{box-shadow:0 0 8px currentColor;opacity:.7} html.light .hero-grid{ background-image: linear-gradient(rgba(91,43,227,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(91,43,227,.08) 1px, transparent 1px); } html.light .ai-chat{ background:linear-gradient(180deg, var(--surface), var(--bg-2)); box-shadow:0 30px 80px -20px rgba(91,43,227,.12), 0 0 0 1px rgba(91,43,227,.04); } html.light .footer{background:var(--bg-2)} html.light .toast{background:var(--surface)} html.light .modules-marquee .item{background:var(--surface)} html.light .conv-item .badge-mini{background:var(--surface)} html.light .msg-ai-body code{background:var(--surface-2)} html.light .msg-ai-body pre{background:var(--bg-2)} /* ────────────────────────────────────────────────────────────── Theme toggle — sun/moon pill (matches dashboard_mock.css) ────────────────────────────────────────────────────────────── */ .theme-toggle{ position:relative;display:inline-flex;align-items:center; width:60px;height:30px;border-radius:99px; background:var(--surface-2);border:1px solid var(--border-2); cursor:pointer;padding:0;flex-shrink:0; transition:border-color .2s, background .2s; } .theme-toggle:hover{border-color:var(--border-hi)} .theme-toggle .ti{ position:absolute;top:50%;width:14px;height:14px; transform:translateY(-50%);color:var(--muted); display:inline-flex;align-items:center;justify-content:center; pointer-events:none;transition:color .3s, opacity .3s; } .theme-toggle .ti svg{width:13px;height:13px;stroke-width:1.7;fill:none;stroke:currentColor} .theme-toggle .ti.sun{left:9px} .theme-toggle .ti.moon{right:9px} .theme-toggle .thumb{ position:absolute;top:3px;left:3px;width:22px;height:22px; border-radius:50%;background:var(--grad); transition:transform .4s cubic-bezier(.2,1.05,.25,1), box-shadow .25s; box-shadow:0 2px 8px var(--glow);pointer-events:none; } body.dark .theme-toggle .thumb{transform:translateX(30px)} body.dark .theme-toggle .ti.moon{color:#fff} body.dark .theme-toggle .ti.sun {color:var(--muted)} html.light .theme-toggle .thumb{transform:translateX(0)} html.light .theme-toggle .ti.sun {color:#fff} html.light .theme-toggle .ti.moon{color:var(--muted)} @media (prefers-reduced-motion: reduce){ .hero-orb,.hero-particles,.hero-edge,.ai-chat::before,.cta-banner .cta-edge, .ai-mark .reticle-outer,.ai-mark .reticle-mid,.ai-mark .reticle-inner, .ai-mark .core-pulse,.ai-mark .orbital-dots,.ai-mark .crosshair,.ai-mark svg, .nav-brand-mark,.modules-marquee .track,.cap-strip .track, .conv-item .badge-mini.live::after, .thinking-block::after,.thinking-label .dot, .msg-ai-indicator,.chat-pane-head .ai-status::before{animation:none !important} .msg{animation:none;opacity:1;transform:none} .composer-fake .caret{animation:none} .reveal{opacity:1;transform:none;transition:none} *{transition:none !important; animation:none !important} html{scroll-behavior:auto} }