*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}body{font-family:var(--font-body);font-size:var(--fs-base);line-height:1.6;color:var(--color-ink);background:var(--color-paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--color-accent);text-decoration:none;transition:color .2s var(--ease-out)}a:hover{color:var(--color-accent-hover)}code{font-family:var(--font-mono);font-size:.9em}img,svg{display:block;max-width:100%}.wrap{max-width:var(--max-w);margin:0 auto;padding:0 var(--s-6)}.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--color-accent);color:#fff;padding:var(--s-2) var(--s-4);border-radius:0 0 var(--r-sm) var(--r-sm);font-size:var(--fs-sm);font-weight:600}.skip-link:focus-visible{left:var(--s-4);top:var(--s-4)}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}.reveal.is-in{opacity:1;transform:translateY(0)}.header-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--s-6);height:100%;display:flex;align-items:center;gap:var(--s-8)}.brand{font-weight:700;font-size:var(--fs-lg);color:var(--color-ink);white-space:nowrap;letter-spacing:-.02em}.brand:hover,.brand span{color:var(--color-accent)}.hamburger{display:none;background:none;border:none;cursor:pointer;width:32px;height:32px;position:relative;margin-left:auto}.hamburger span{display:block;width:20px;height:2px;background:var(--color-ink);border-radius:2px;position:absolute;left:6px;transition:transform .3s var(--ease-out),opacity .3s var(--ease-out)}.hamburger span:nth-child(1){top:10px}.hamburger span:nth-child(2){top:16px}.hamburger span:nth-child(3){top:22px}@media(max-width:768px){.hamburger{display:block}html[data-nav-open] .hamburger span:nth-child(1){transform:rotate(45deg);top:16px}html[data-nav-open] .hamburger span:nth-child(2){opacity:0}html[data-nav-open] .hamburger span:nth-child(3){transform:rotate(-45deg);top:16px}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);font-family:var(--font-body);font-weight:600;font-size:var(--fs-base);border-radius:var(--r-pill);padding:var(--s-3) var(--s-6);cursor:pointer;border:none;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),background .2s var(--ease-out);text-decoration:none}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--color-accent);color:var(--color-ink);font-size:var(--fs-lg);padding:var(--s-4) var(--s-8)}.btn-primary:hover{color:var(--color-ink);box-shadow:0 8px 32px color-mix(in oklch,var(--color-accent) 30%,transparent)}.btn-ghost{background:transparent;color:var(--color-ink);border:1px solid var(--color-rule-strong);font-size:var(--fs-lg);padding:var(--s-4) var(--s-8)}.btn-ghost:hover{color:var(--color-ink);border-color:var(--color-accent);box-shadow:0 8px 32px color-mix(in oklch,var(--color-accent) 8%,transparent)}.btn-sm{font-size:var(--fs-sm);padding:var(--s-2) var(--s-4)}#hero{position:relative;display:flex;align-items:center;padding:var(--s-12) 0 var(--s-16);overflow:hidden}#hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 1000px 600px at 50% -5%,color-mix(in oklch,var(--color-accent) 8%,transparent) 0%,transparent 70%),radial-gradient(ellipse 600px 400px at 80% 20%,color-mix(in oklch,var(--color-success) 5%,transparent) 0%,transparent 60%);animation:heroDrift 16s ease-in-out infinite alternate;pointer-events:none}@keyframes heroDrift{0%{transform:translate(0) scale(1)}to{transform:translate(-30px,15px) scale(1.03)}}.hero-content{position:relative;z-index:1;text-align:left;max-width:900px;margin:0 auto}.hero-badge{display:inline-flex;align-items:center;gap:var(--s-2);background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--r-pill);padding:var(--s-1) var(--s-4);font-size:var(--fs-sm);color:var(--color-ink-2);margin-bottom:var(--s-8)}.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--color-success);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 color-mix(in oklch,var(--color-success) 40%,transparent)}50%{opacity:.7;box-shadow:0 0 0 6px color-mix(in oklch,var(--color-success) 0%,transparent)}}.hero-content h1{font-size:clamp(2.25rem,5vw + 1rem,4.5rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:var(--color-ink);margin-bottom:var(--s-6)}.hero-sub{font-size:clamp(1rem,1.5vw + .5rem,1.35rem);color:var(--color-ink-2);line-height:1.7;max-width:680px;margin:0 auto var(--s-10)}.hero-sub code{color:var(--color-accent);background:color-mix(in oklch,var(--color-accent) 8%,transparent);padding:.1em .4em;border-radius:4px;font-size:.88em}.cta-row{display:flex;gap:var(--s-4);justify-content:center;flex-wrap:wrap}.hero-stat{margin-top:var(--s-12);display:flex;justify-content:flex-start;gap:var(--s-12);flex-wrap:wrap}.hero-stat-item{text-align:center}.hero-stat-item .num{font-size:var(--fs-3xl);font-weight:800;color:var(--color-ink);letter-spacing:-.03em}.hero-stat-item .label{font-size:var(--fs-sm);color:var(--color-ink-2);margin-top:var(--s-1)}#trust{padding:var(--s-10) 0;border-top:1px solid var(--color-rule);border-bottom:1px solid var(--color-rule);background:var(--color-paper-2)}.trust-inner{display:flex;align-items:center;justify-content:center;gap:var(--s-10);flex-wrap:wrap}.trust-label{font-size:var(--fs-sm);color:var(--color-ink-3);font-weight:500;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}.trust-logos{display:flex;align-items:center;gap:var(--s-10);flex-wrap:wrap;justify-content:center}.trust-logo{display:flex;align-items:center;gap:var(--s-2);color:var(--color-ink-3);font-size:var(--fs-sm);font-weight:500;opacity:.6;transition:opacity .3s var(--ease-out)}.trust-logo:hover{opacity:1}.trust-logo svg{width:28px;height:28px;flex-shrink:0}section{padding:var(--s-24) 0}.section-title{font-size:clamp(1.75rem,3vw + .5rem,2.75rem);font-weight:800;letter-spacing:-.03em;color:var(--color-ink);line-height:1.15;margin-bottom:var(--s-4)}.section-desc{font-size:var(--fs-lg);color:var(--color-ink-2);max-width:640px;line-height:1.7}#problem{background:var(--color-paper)}.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-12);align-items:center;margin-top:var(--s-12)}.problem-visual{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--r-lg);padding:0;position:relative;overflow:hidden}.problem-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,color-mix(in oklch,var(--color-danger) 4%,transparent),transparent 70%);pointer-events:none}.code-tabs{position:relative}.code-tab-nav{display:flex;border-bottom:1px solid var(--color-rule);overflow-x:auto}.code-tab-btn{flex:1;padding:var(--s-3) var(--s-4);font-family:var(--font-body);font-size:var(--fs-xs);font-weight:600;color:var(--color-ink-3);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:color .2s var(--ease-out),border-color .2s var(--ease-out)}.code-tab-btn:hover{color:var(--color-ink-2)}.code-tab-btn[aria-selected=true]{color:var(--color-accent);border-bottom-color:var(--color-accent)}.code-tab-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}.code-tab-panel{display:none;padding:var(--s-6)}.code-tab-panel[data-active]{display:block}.problem-code{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--color-ink-2);line-height:1.8;position:relative}.problem-code .kw{color:#7c3aed}.problem-code .fn{color:#b45309}.problem-code .str{color:var(--color-success)}.problem-code .comment{color:var(--color-ink-3);font-style:italic}.problem-callout{margin-top:var(--s-4);padding:var(--s-3) var(--s-6);background:color-mix(in oklch,var(--color-danger) 8%,transparent);border-left:3px solid var(--color-danger);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:var(--fs-sm);color:var(--color-danger);font-weight:500}@media(max-width:768px){.problem-grid{grid-template-columns:1fr}}#comparison{background:var(--color-paper-2);text-align:center;padding:var(--s-24) 0}.comparison-panels{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s-8);align-items:stretch;margin-top:var(--s-12);max-width:1060px;margin-left:auto;margin-right:auto}.cmp-panel{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--r-xl);padding:var(--s-10) var(--s-8);text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-md)}.cmp-panel.broken{border-color:color-mix(in oklch,var(--color-danger) 30%,transparent)}.cmp-panel.broken:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,var(--color-danger-glow),transparent 70%);pointer-events:none}.cmp-panel.fixed{border-color:color-mix(in oklch,var(--color-success) 30%,transparent)}.cmp-panel.fixed:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,var(--color-success-glow),transparent 70%);pointer-events:none}.cmp-label{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--s-4)}.cmp-panel.broken .cmp-label{color:var(--color-danger)}.cmp-panel.fixed .cmp-label{color:var(--color-success)}.cmp-big-num{font-size:clamp(3.5rem,7vw,6rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin:var(--s-6) 0 var(--s-2)}.cmp-panel.broken .cmp-big-num{color:var(--color-danger)}.cmp-panel.fixed .cmp-big-num{color:var(--color-success)}.cmp-detail{font-size:var(--fs-sm);color:var(--color-ink-2)}.cmp-tool{margin-top:var(--s-4);font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--color-ink-3);background:var(--color-paper-2);display:inline-block;padding:var(--s-1) var(--s-3);border-radius:var(--r-sm)}.cmp-panel svg{margin:var(--s-4) auto}.cmp-panel.fixed svg .edge{stroke:var(--color-success);stroke-width:1.5;fill:none;stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset .9s var(--ease-out)}.cmp-panel.fixed.is-in svg .edge{stroke-dashoffset:0}.cmp-panel.fixed.is-in svg .edge:nth-child(2){transition-delay:60ms}.cmp-panel.fixed.is-in svg .edge:nth-child(3){transition-delay:.12s}.cmp-panel.fixed.is-in svg .edge:nth-child(4){transition-delay:.18s}.cmp-panel.fixed.is-in svg .edge:nth-child(5){transition-delay:.24s}.cmp-panel.fixed.is-in svg .edge:nth-child(6){transition-delay:.3s}.cmp-panel.fixed.is-in svg .edge:nth-child(7){transition-delay:.36s}.cmp-panel.fixed.is-in svg .edge:nth-child(8){transition-delay:.42s}.cmp-panel.fixed.is-in svg .edge:nth-child(9){transition-delay:.48s}.cmp-panel.fixed.is-in svg .edge:nth-child(10){transition-delay:.54s}.cmp-panel.fixed.is-in svg .edge:nth-child(11){transition-delay:.6s}.cmp-panel.fixed.is-in svg .edge:nth-child(12){transition-delay:.66s}.cmp-arrow{font-size:var(--fs-3xl);color:var(--color-ink-3);display:flex;align-items:center;justify-content:center}.cmp-caption{margin-top:var(--s-8);font-size:var(--fs-lg);color:var(--color-ink-2);font-weight:500}.cmp-caption strong{color:var(--color-ink)}.cmp-universal-note{margin-top:var(--s-4);font-size:var(--fs-sm);color:var(--color-accent);font-weight:600}@media(max-width:768px){.comparison-panels{grid-template-columns:1fr;gap:var(--s-4)}.cmp-arrow{transform:rotate(90deg)}}#dialects{background:var(--color-paper);text-align:center}.dialect-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem;margin-top:var(--s-12);text-align:left}.dialect-card{background:var(--color-surface);box-shadow:var(--shadow-warm);padding:var(--s-6);border-radius:12px;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;border:1px solid var(--color-rule);position:relative}.dialect-card:hover{text-decoration:none;color:inherit}.dialect-card--live:hover,.dialect-card--preview:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.dialect-card--coming-soon{filter:grayscale(1) opacity(.6);pointer-events:none}.dialect-card--coming-soon[data-capture=true]{filter:grayscale(.5) opacity(.75);pointer-events:auto;cursor:pointer}.dialect-card--coming-soon[data-capture=true]:hover{filter:grayscale(.3) opacity(.85);transform:translateY(-2px)}.dialect-card .logo-slot{width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-4);font-size:var(--fs-xl);font-weight:800;color:var(--color-surface)}.dialect-card .logo-slot svg{width:32px;height:32px}.dialect-card h3{font-size:var(--fs-lg);font-weight:700;color:var(--color-ink);margin-bottom:var(--s-2)}.dialect-card .hook{font-size:var(--fs-sm);color:var(--color-ink-2);line-height:1.5;flex:1}.dialect-card .card-stat{margin-top:var(--s-3);font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:600;color:var(--color-success)}.dialect-card--coming-soon .card-stat{color:var(--color-ink-3)}.dialect-card .card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s-4);gap:var(--s-3)}.pill{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.15rem .55rem;border-radius:var(--r-pill)}.pill--live{background:color-mix(in oklch,var(--color-success) 10%,transparent);color:var(--color-success)}.pill--preview{background:color-mix(in oklch,var(--color-accent) 10%,transparent);color:var(--color-accent)}.pill--coming-soon{background:var(--color-paper-2);color:var(--color-ink-3)}@media(max-width:400px){.dialect-card .logo-slot svg{display:none}}#solution{background:var(--color-paper);text-align:center}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-8);margin-top:var(--s-12);max-width:960px;margin-left:auto;margin-right:auto}.step{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--r-lg);padding:var(--s-8) var(--s-6);text-align:center;position:relative;transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}.step:hover{border-color:var(--color-accent);box-shadow:0 0 40px color-mix(in oklch,var(--color-accent) 8%,transparent)}.step-num{width:40px;height:40px;border-radius:50%;background:var(--color-accent);color:var(--color-paper);font-weight:700;font-size:var(--fs-lg);display:flex;align-items:center;justify-content:center;margin:0 auto var(--s-6)}.step h3{font-size:var(--fs-lg);font-weight:700;color:var(--color-ink);margin-bottom:var(--s-3)}.step p{font-size:var(--fs-sm);color:var(--color-ink-2);line-height:1.6}.step code{display:block;margin-top:var(--s-3);background:var(--color-paper-2);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);color:var(--color-accent);font-size:var(--fs-xs);word-break:break-all}@media(max-width:768px){.steps{grid-template-columns:1fr;max-width:400px}}#modes{background:var(--color-paper-2);text-align:center}.modes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);margin-top:var(--s-12)}.mode-card{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--r-lg);padding:var(--s-8) var(--s-6);text-align:left;display:flex;flex-direction:column;transition:border-color .3s var(--ease-out),transform .3s var(--ease-out)}.mode-card:hover{border-color:var(--color-rule-strong);transform:translateY(-4px)}.mode-card.featured{border-color:var(--color-accent);position:relative}.mode-card.featured:after{content:"Popular";position:absolute;top:-12px;right:var(--s-6);background:var(--color-accent);color:var(--color-paper);font-size:var(--fs-xs);font-weight:700;padding:2px var(--s-3);border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.05em}.mode-icon{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-4)}.mode-card h3{font-size:var(--fs-xl);font-weight:700;color:var(--color-ink);margin-bottom:var(--s-2)}.mode-card .price{font-size:var(--fs-sm);color:var(--color-accent);font-weight:600;margin-bottom:var(--s-4)}.mode-card ul{list-style:none;margin:var(--s-4) 0;flex:1}.mode-card li{font-size:var(--fs-sm);color:var(--color-ink-2);padding:var(--s-2) 0;padding-left:var(--s-6);position:relative}.mode-card li:before{content:"✓";position:absolute;left:0;color:var(--color-success);font-weight:700}.mode-card .btn{margin-top:var(--s-4);width:100%;text-align:center}@media(max-width:768px){.modes-grid{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}}#faq{background:var(--color-paper-2)}.faq-grid{max-width:760px;margin:var(--s-12) auto 0}.faq-grid details{border-bottom:1px solid var(--color-rule)}.faq-grid summary{display:flex;align-items:center;justify-content:space-between;padding:var(--s-6) 0;cursor:pointer;font-size:var(--fs-lg);font-weight:600;color:var(--color-ink);list-style:none;transition:color .2s var(--ease-out)}.faq-grid summary::-webkit-details-marker{display:none}.faq-grid summary:after{content:"+";font-size:var(--fs-xl);color:var(--color-ink-3);transition:transform .3s var(--ease-out);flex-shrink:0;margin-left:var(--s-4)}.faq-grid details[open] summary:after{transform:rotate(45deg)}.faq-grid summary:hover{color:var(--color-accent)}.faq-grid details p{padding:0 0 var(--s-6);color:var(--color-ink-2);line-height:1.7;font-size:var(--fs-base)}.faq-grid summary:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}#cta{background:var(--color-paper);text-align:center;padding:var(--s-32) 0;position:relative;overflow:hidden}#cta:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 800px 500px at 50% 60%,color-mix(in oklch,var(--color-accent) 4%,transparent) 0%,transparent 70%);pointer-events:none}.cta-content{position:relative;z-index:1}.install-box{display:inline-flex;align-items:center;gap:var(--s-3);background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--r-md);padding:var(--s-4) var(--s-6);margin:var(--s-8) auto;font-family:var(--font-mono);font-size:clamp(.85rem,1.5vw,1.1rem);color:var(--color-accent);cursor:pointer;transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}.install-box:hover{border-color:var(--color-accent);box-shadow:0 0 30px color-mix(in oklch,var(--color-accent) 8%,transparent)}.install-box .prompt{color:var(--color-ink-3);user-select:none}.install-box .copy-hint{font-family:var(--font-body);font-size:var(--fs-xs);color:var(--color-ink-3);margin-left:var(--s-4);padding:var(--s-1) var(--s-2);border:1px solid var(--color-rule);border-radius:var(--r-sm);transition:color .2s var(--ease-out),border-color .2s var(--ease-out)}.install-box:hover .copy-hint{color:var(--color-accent);border-color:var(--color-accent)}.footer-grid{display:flex;justify-content:space-between;align-items:start;flex-wrap:wrap;gap:var(--s-8)}.footer-brand{font-weight:700;font-size:var(--fs-lg);color:var(--color-ink);margin-bottom:var(--s-2)}.footer-tagline{font-size:var(--fs-sm);color:var(--color-ink-3)}.footer-links{display:flex;gap:var(--s-8);flex-wrap:wrap}.footer-col h4{font-size:var(--fs-sm);font-weight:600;color:var(--color-ink);margin-bottom:var(--s-3);text-transform:uppercase;letter-spacing:.06em}.footer-col a{display:block;font-size:var(--fs-sm);color:var(--color-ink-2);padding:var(--s-1) 0}.footer-col a:hover{color:var(--color-accent)}.footer-bottom{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--color-rule);font-size:var(--fs-xs);color:var(--color-ink-3);text-align:center}a:focus-visible,button:focus-visible,details summary:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}@media(max-width:768px){.hero-stat{gap:var(--s-8)}#cta{padding:var(--s-20) 0}.install-box{flex-wrap:wrap;font-size:var(--fs-sm)}}@media(max-width:640px){#hero{min-height:auto;padding-bottom:var(--s-12)}.btn-primary,.btn-ghost{width:100%}}#resources{padding:var(--s-16) 0}.resource-list{list-style:none;margin-top:var(--s-6);max-width:720px}.resource-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--color-rule)}.resource-list li:first-child{border-top:1px solid var(--color-rule)}.resource-list a{font-weight:600;white-space:nowrap}.resource-list span{color:var(--color-ink-3);font-size:var(--fs-sm)}.hero-content .cta-row{justify-content:flex-start}