*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{margin:0;font-family:DM Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#0f172a;background:radial-gradient(circle at top right,rgba(14,165,233,.16),transparent 45%),linear-gradient(180deg,#f0f9ff,#f8fbff 45%,#fff)}.page{min-height:100vh;display:flex;flex-direction:column;width:100%}.container{width:100%;max-width:1200px;margin:0 auto}.navbar{width:100%;position:sticky;top:0;z-index:60;background:#ffffffdb;border-bottom:1px solid rgba(148,163,184,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.navbar-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1200px;margin:0 auto}.navbar-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#0f172a;font-weight:700;font-size:18px}.logo-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#0ea5e9,#2563eb);color:#fff;font-size:14px;font-weight:800}.logo-text{color:#0c4a6e}.navbar-links{display:flex;align-items:center;gap:28px}.nav-link{color:#334155;text-decoration:none;font-size:14px;font-weight:500;transition:color .15s}.nav-link:hover{color:#0369a1}.navbar-actions{display:flex;align-items:center;gap:12px}.btn-nav-outline{padding:8px 16px;border:1px solid #0284c7;border-radius:8px;color:#0369a1;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s,color .15s}.btn-nav-outline:hover{background:#f0f9ff}.btn-nav-github{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;background:#0c4a6e;color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s,transform .1s}.btn-nav-github:hover{background:#082f49}.hero{flex:1;padding:54px 0 72px}.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:0 24px}.hero-left{max-width:520px}.hero-title{margin:0 0 16px;font-family:Space Grotesk,DM Sans,sans-serif;font-size:42px;line-height:1.25;letter-spacing:-.02em;font-weight:800}.hero-title-highlight{display:block;background:linear-gradient(135deg,#0284c7,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-desc{margin:0 0 20px;font-size:16px;line-height:1.75;color:#334155}.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.badge{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}.badge-blue{background:#e0f2fe;color:#075985}.badge-green{background:#dcfce7;color:#166534}.badge-purple{background:#ecfeff;color:#155e75}.badge-orange{background:#ffedd5;color:#9a3412}.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:12px;border:none;background:linear-gradient(135deg,#0284c7,#0369a1);color:#fff;font-size:15px;font-weight:600;text-decoration:none;box-shadow:0 12px 30px -12px #0e7490a6;transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 32px -14px #0c4a6eb3;background:linear-gradient(135deg,#0369a1,#075985)}.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:12px;border:1px solid rgba(15,23,42,.12);background:#fff;color:#374151;font-size:15px;font-weight:600;text-decoration:none;transition:background .2s,border-color .2s,color .2s;cursor:pointer}.btn-secondary:hover{background:#f8fafc;border-color:#0e74904d;color:#0c4a6e}.trust-list{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px}.trust-list li{position:relative;padding-left:20px;color:#334155;font-size:14px;line-height:1.6}.trust-list li:before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:#0ea5e9}.hero-right{display:flex;justify-content:center;position:relative;width:100%;max-width:520px;aspect-ratio:520 / 540}.browser-mockup{width:100%;height:100%;max-width:none;border-radius:16px;overflow:hidden;position:relative;display:flex;flex-direction:column;box-shadow:0 30px 64px -24px #0f172a59;border:1px solid rgba(125,211,252,.35);background:#ffffffeb}.browser-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.browser-dots{display:flex;gap:6px}.browser-dots span{width:12px;height:12px;border-radius:50%}.dot-red{background:#f87171}.dot-yellow{background:#fbbf24}.dot-green{background:#34d399}.browser-url{flex:1;padding:6px 12px;border-radius:6px;background:#fff;border:1px solid #e2e8f0;font-size:12px;color:#64748b}.browser-content{flex:1;padding:16px;overflow:hidden;display:flex;flex-direction:column;gap:12px;min-height:0}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:0}.tool-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;border-radius:10px;background:linear-gradient(180deg,#f8fafc,#f1f5f9);border:1px solid #dbeafe;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}.tool-item:hover{border-color:#7dd3fc;transform:translateY(-1px);box-shadow:0 10px 18px -14px #0e749099}.tool-icon{width:24px;height:24px;color:#0369a1}.tool-icon svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}.tool-label{font-size:12px;color:#334155;font-weight:600}.browser-extra{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding:14px;border-radius:12px;background:linear-gradient(135deg,#ecfeff,#e0f2fe);border:1px solid #bae6fd}.extra-left{flex:1}.extra-title{display:block;font-size:13px;font-weight:700;color:#075985;margin-bottom:4px}.extra-desc{display:block;font-size:11px;color:#0369a1;margin-bottom:8px}.extra-list{margin:0;padding-left:18px;font-size:11px;color:#0c4a6e;line-height:1.6}.extra-right{flex-shrink:0;text-align:center}.extra-preview{width:152px;height:112px;border-radius:8px;overflow:hidden;border:1px solid #bae6fd;background:#fff}.preview-hover{position:relative;cursor:zoom-in}.preview-hover:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 20% 20%,rgba(59,130,246,.22),transparent 55%),radial-gradient(circle at 80% 30%,rgba(124,58,237,.18),transparent 60%);opacity:0;transition:opacity .18s ease;pointer-events:none}.preview-hint{position:absolute;right:8px;bottom:8px;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:600;color:#0f172acc;background:#ffffffd9;border:1px solid rgba(148,163,184,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translateY(2px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}.preview-inplace{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transform:scale(.98);transition:opacity .12s ease,transform .18s ease;pointer-events:none}.preview-inplace.is-open{opacity:1;transform:scale(1);pointer-events:auto}.preview-inplace-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#02061785;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;cursor:pointer}.preview-close-btn{position:absolute;top:10px;right:10px;z-index:2;width:28px;height:28px;border:1px solid rgba(148,163,184,.35);border-radius:999px;color:#e2e8f0;background:#0f172a80;font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.preview-inplace-body{position:relative;height:100%;border-radius:12px;overflow:hidden;border:1px solid rgba(148,163,184,.28);background:#ffffff0f;box-shadow:0 20px 60px #0206178c}.preview-inplace-img{width:100%;height:100%;object-fit:contain;display:block;background:#02061733}.preview-hover:hover:after{opacity:1}.preview-hover:hover .preview-hint{opacity:1;transform:translateY(0)}.preview-hover:hover .extra-img{transform:scale(1.04);filter:saturate(1.05) contrast(1.05)}.extra-img{width:100%;height:100%;object-fit:cover;transition:transform .18s ease,filter .18s ease}.extra-caption{display:block;font-size:11px;color:#0369a1;margin-top:6px}main{padding:0 24px 48px}.section{padding:32px 0}.section-title{font-size:24px;font-family:Space Grotesk,DM Sans,sans-serif;font-weight:700;margin:0 0 20px}.section-muted{border-radius:12px;padding:24px;background:#fffc;border:1px solid rgba(148,163,184,.25)}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}.feature-card{padding:20px;border-radius:12px;border:1px solid rgba(186,230,253,.9);background:#ffffffe6;box-shadow:0 16px 30px -22px #0c4a6e80}.feature-title{margin:0 0 8px;font-size:16px;font-weight:600}.feature-desc{margin:0;color:#334155;font-size:14px;line-height:1.6}.workflow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.workflow-card{background:#ffffffdb;border:1px solid rgba(186,230,253,.9);border-radius:12px;padding:16px}.workflow-index{display:inline-flex;min-width:36px;justify-content:center;padding:3px 10px;border-radius:999px;background:#0ea5e9;color:#f8fafc;font-size:12px;font-weight:700}.workflow-card h3{margin:10px 0 6px;font-size:16px}.workflow-card p{margin:0;font-size:14px;color:#334155;line-height:1.6}.proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.proof-card{border-radius:12px;padding:16px;border:1px solid rgba(186,230,253,.9);background:#ffffffe6}.proof-meta{display:inline-flex;font-size:11px;line-height:1;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#0369a1;background:#e0f2fe;border-radius:999px;padding:6px 10px}.proof-card h3{margin:12px 0 8px;font-size:16px}.proof-card p{margin:0;font-size:14px;line-height:1.6;color:#334155}.install-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.install-card{padding:20px;border-radius:12px;border:1px solid rgba(148,163,184,.3);background:#ffffffe6}.install-title{margin:0 0 12px;font-size:16px;font-weight:700;color:#0c4a6e}.install-steps{margin:0;padding-left:18px;color:#475569;font-size:14px;line-height:1.7}.install-steps li+li{margin-top:8px}.install-link{color:#0369a1;text-decoration:none;font-weight:600}.install-link:hover{text-decoration:underline}.install-kbd{display:inline-block;padding:2px 8px;border-radius:8px;background:#0f172a0f;border:1px solid rgba(148,163,184,.35);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px;color:#0f172acc}.install-code{margin:12px 0 0;padding:12px 14px;border-radius:12px;background:#020617eb;border:1px solid rgba(148,163,184,.25);overflow:auto}.install-code code{color:#e2e8f0f2;font-size:12px;line-height:1.6;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.install-tip{margin-top:12px;padding:10px 12px;border-radius:12px;background:linear-gradient(135deg,#e0f2fef2,#cffafebf);border:1px solid rgba(125,211,252,.45);color:#334155;font-size:13px;line-height:1.6}.faq-list{display:grid;gap:10px}.faq-item{border:1px solid rgba(186,230,253,.9);border-radius:10px;background:#ffffffeb;padding:12px 14px}.faq-item summary{cursor:pointer;font-size:15px;font-weight:600;color:#0c4a6e}.faq-item p{margin:10px 0 2px;font-size:14px;line-height:1.7;color:#334155}.footer{padding:20px 24px;border-top:1px solid rgba(148,163,184,.25);font-size:13px;color:#475569}a:focus-visible,button:focus-visible,.preview-hover:focus-visible{outline:2px solid #0ea5e9;outline-offset:2px}.footer-inner{display:flex;align-items:center;gap:8px}.dot{width:3px;height:3px;border-radius:50%;background:#94a3b8}@media(max-width:900px){.hero-inner{grid-template-columns:1fr;gap:32px}.hero-left{max-width:none}.hero-right{order:-1}.browser-mockup{max-width:100%}.workflow-grid,.proof-grid{grid-template-columns:1fr}}@media(max-width:640px){.navbar-inner{flex-wrap:wrap;gap:12px}.navbar-links{order:3;width:100%;justify-content:flex-start}.hero-title{font-size:32px}.tool-grid{grid-template-columns:repeat(2,1fr)}.browser-extra{flex-direction:column;align-items:flex-start}.install-grid{grid-template-columns:1fr}}