@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2')}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:#fbfbfd;color:#0f172a;-webkit-font-smoothing:antialiased}
.mesh{background:radial-gradient(60% 50% at 15% 0%,rgba(79,70,229,.16),transparent 60%),radial-gradient(50% 50% at 90% 10%,rgba(6,182,212,.18),transparent 60%),#fbfbfd}
.grad{background:linear-gradient(90deg,#4f46e5,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:24px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px -16px rgba(15,23,42,.12);transition:transform .2s,box-shadow .2s}
a.card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(15,23,42,.04),0 24px 40px -16px rgba(79,70,229,.28)}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;background:#eef2ff;color:#4338ca}
.pill-soon{background:#fff7ed;color:#c2410c}
.pill-free{background:#ecfdf5;color:#047857}
.pill-beta{background:#f0f9ff;color:#0369a1}
.ph{display:inline-block;font-size:10px;font-weight:600;padding:2px 8px;border-radius:99px;background:#fef3c7;color:#92400e;vertical-align:middle}
.ph-box{border:1px dashed #f59e0b;background:#fffbeb;border-radius:20px;padding:18px 22px;color:#92400e;font-size:14px}
.btn{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;padding:11px 20px;border-radius:12px;transition:background .15s,border-color .15s}
.btn-p{background:#0f172a;color:#fff}.btn-p:hover{background:#4f46e5}
.btn-s{background:#fff;border:1px solid #d1d5db}.btn-s:hover{border-color:#4f46e5}
.btn[aria-disabled=true]{opacity:.55;pointer-events:none}
.ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-weight:800;color:#fff;font-size:15px;flex:none}
.field{width:100%;border:1px solid #d1d5db;border-radius:12px;padding:10px 14px;font-size:15px;background:#fff}
.field:focus{outline:2px solid #6366f1;outline-offset:1px;border-color:#6366f1}
#mnav{display:none}#mnav.open{display:block}

/* Real Hub screenshots */
.shot{border-radius:20px;overflow:hidden;border:1px solid #e5e7eb;box-shadow:0 20px 40px -24px rgba(15,23,42,.35);background:#fff}
.shot img{display:block;width:100%;height:auto}
.hubshot{box-shadow:0 40px 80px -30px rgba(79,70,229,.45)}

/* Phone */
:root{--ph-bg:#0f172a;--ph-card:#1e293b;--ph-acc:#6366f1;--ph-shell:#0b1020;--ph-font:'Inter',sans-serif}
.phone{width:270px;aspect-ratio:9/19;border-radius:38px;background:var(--ph-shell);padding:9px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);position:relative;flex:none}
.phone-in{width:100%;height:100%;border-radius:30px;overflow:hidden;background:var(--ph-bg);color:#fff;display:flex;flex-direction:column;font-family:var(--ph-font);font-size:11px}
.phone-notch{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:74px;height:20px;border-radius:12px;background:var(--ph-shell);z-index:3}
.ph-top{padding:34px 14px 8px;display:flex;justify-content:space-between;align-items:flex-end}
.ph-top b{font-size:13px}.ph-top span{opacity:.6;font-size:10px}
.ph-cam{flex:1;margin:0 10px;border-radius:16px;position:relative;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,#4a525a,#1b1f23 70%)}
.ph-beam{position:absolute;left:12%;right:12%;top:42%;height:16%;background:linear-gradient(#9aa4ad,#6b747c);border-radius:2px;transform:rotate(-6deg);box-shadow:0 10px 18px rgba(0,0,0,.4)}
.ph-beam::before,.ph-beam::after{content:"";position:absolute;left:0;right:0;height:22%;background:#b3bcc4}
.ph-beam::before{top:-18%}.ph-beam::after{bottom:-18%}
.ph-mark{position:absolute;left:30%;top:44%;background:#f4f1e8;color:#111;font:700 13px/1 ui-monospace,monospace;padding:4px 7px;border-radius:2px;transform:rotate(-6deg)}
.ph-br{position:absolute;inset:18% 14%;pointer-events:none}
.ph-br i{position:absolute;width:20px;height:20px;border:3px solid #818cf8}
.ph-br i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.ph-br i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.ph-br i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.ph-br i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.ph-card{margin:10px;padding:11px 12px;border-radius:14px;background:var(--ph-card)}
.ph-card .r{display:flex;justify-content:space-between;align-items:center}.ph-card b{font-size:14px}
.ph-btn{margin-top:9px;display:block;text-align:center;padding:9px;border-radius:10px;background:var(--ph-acc);color:#fff;font-weight:700;font-size:12px}
.ph-chips{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.ph-chips span{padding:3px 7px;border-radius:99px;background:rgba(255,255,255,.1);font-size:10px}
.ph-tabs{display:flex;justify-content:space-around;padding:8px 6px 14px;border-top:1px solid rgba(255,255,255,.08);font-size:9px;opacity:.85}
.ph-tabs span.on{color:#a5b4fc;font-weight:700}

/* Approvals widget */
:root{--ap-over:#f43f5e;--ap-ok:#4f46e5;--ap-track:#eef2ff}
.appr{background:#fff;color:#111;border:1px solid #e5e7eb;border-radius:20px;overflow:hidden;font-size:13px}
.appr-h{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #e5e7eb;font-weight:700}
.appr-row{display:grid;grid-template-columns:1.4fr 1fr 2fr auto;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid #f1f5f9}
.appr-row small{opacity:.6;display:block}
.appr-bar{height:8px;background:var(--ap-track);border-radius:99px;position:relative}
.appr-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--ap-ok)}
.appr-bar i.over{background:var(--ap-over)}
.appr-btn{padding:4px 10px;border-radius:6px;background:#4f46e5;color:#fff;font-weight:700;font-size:12px}
@media(max-width:560px){.appr-row{grid-template-columns:1fr auto}.appr-bar{grid-column:1/-1}.appr-row>div:nth-child(2){display:none}}

/* Generic mock window (Shop Sync, Intelligence, Support, Drawing Merger) */
.win{background:#fff;border:1px solid #e5e7eb;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(79,70,229,.4);font-size:13px}
.win-h{display:flex;align-items:center;gap:6px;padding:11px 16px;border-bottom:1px solid #e5e7eb;background:#f8fafc;font-weight:600}
.win-h i{width:10px;height:10px;border-radius:50%;background:#e2e8f0;display:inline-block}
.win-h span{margin-left:8px;color:#475569;font-weight:600}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#64748b;padding:8px 14px;background:#f8fafc;font-weight:600}
.tbl td{padding:9px 14px;border-top:1px solid #f1f5f9}
.tag{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;background:#e0e7ff;color:#3730a3;white-space:nowrap}
.tag-g{background:#d1fae5;color:#065f46}.tag-c{background:#cffafe;color:#155e75}
.bubble{padding:11px 15px;border-radius:16px;max-width:86%}
.bub-q{background:#4f46e5;color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.bub-a{background:#f1f5f9;border-bottom-left-radius:4px}
.flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.flow .arrow{color:#6366f1;font-weight:700}

/* Screensaver: one 27s loop, nine 3s stages */
.ss{background:radial-gradient(80% 90% at 20% 0%,#312e81,#0b1020 65%);border-radius:24px;aspect-ratio:16/9;position:relative;overflow:hidden;color:#fff;box-shadow:0 40px 80px -30px rgba(49,46,129,.7);border:8px solid #0b1020;outline:1px solid #1e293b}
.ss-cap{position:absolute;left:6%;right:6%;top:12%;opacity:0;animation:ssLit 27s infinite}
.ss-cap small{display:block;color:#67e8f9;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(9px,1.4vw,13px)}
.ss-cap h3{font-weight:800;font-size:clamp(18px,4vw,44px);line-height:1.1;margin-top:8px;letter-spacing:-.02em}
.ss-cap p{margin-top:8px;color:#c7d2fe;font-size:clamp(10px,1.7vw,17px);max-width:34em}
.ss-track{position:absolute;left:6%;right:6%;bottom:14%;height:6px;background:rgba(255,255,255,.12);border-radius:99px}
.ss-track b{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#6366f1,#22d3ee);animation:ssGrow 27s linear infinite}
.ss-nodes{position:absolute;left:6%;right:6%;bottom:6%;display:flex;justify-content:space-between;font-size:clamp(7px,1.15vw,12px);font-weight:600;color:#64748b}
.ss-nodes span{opacity:.6;animation:ssNode 27s infinite;text-align:center}
@keyframes ssLit{0%{opacity:0;transform:translateY(8px)}2%{opacity:1;transform:none}10%{opacity:1;transform:none}11.11%,100%{opacity:0}}
@keyframes ssNode{0%{opacity:1;color:#22d3ee}11%{opacity:1;color:#22d3ee}11.11%,100%{opacity:.6;color:#64748b}}
@keyframes ssGrow{0%{width:0}100%{width:100%}}
@media(prefers-reduced-motion:reduce){.ss-cap,.ss-nodes span,.ss-track b{animation:none}.ss-cap.first{opacity:1}.ss-track b{width:40%}}