.hero{--hero-accent:#3d84ff;--hero-accent-2:#70c1ff;--hero-accent-strong:#1e6df6;--hero-panel:radial-gradient(120% 90% at 85% 0%, #337eff38, transparent 55%), radial-gradient(80% 70% at 0% 100%, #25d1f41a, transparent 60%), linear-gradient(160deg, #141824, #0d0f17);--hero-grid:#ffffff0b;--hero-ink:#fafafa;--hero-muted:#d4d9e2c7;--hero-line:#bdc7db24;--hero-card:#ffffff09;margin:-5px -5px 0;position:relative}html[data-theme=light] .hero{--hero-accent:#1660f3;--hero-accent-2:#0692ef;--hero-accent-strong:#0c56e9;--hero-panel:radial-gradient(120% 90% at 85% 0%, #3d84ff29, transparent 55%), radial-gradient(80% 70% at 0% 100%, #25d1f41a, transparent 60%), linear-gradient(160deg, #fbfcfe, #f0f3f9);--hero-grid:#2e406b0f;--hero-ink:#121621;--hero-muted:#555c6d;--hero-line:#3643631f;--hero-card:#ffffffb3}.hero-main{border:1px solid var(--hero-line);background:var(--hero-panel);isolation:isolate;border-radius:18px;grid-template-columns:minmax(0,1fr);gap:32px;padding:28px 20px 30px;display:grid;position:relative;overflow:hidden}.hero-main:before{content:"";z-index:-1;background-image:linear-gradient(var(--hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);background-size:32px 32px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(90% 80% at 70% 30%,#000 30%,#0000 80%);mask-image:radial-gradient(90% 80% at 70% 30%,#000 30%,#0000 80%)}.hero-eyebrow{color:var(--hero-muted);font-size:11px;font-weight:var(--fw-500);letter-spacing:.14em;text-transform:uppercase;flex-wrap:wrap;row-gap:4px;display:flex}.hero-eyebrow-item{white-space:nowrap;display:inline}.hero-eyebrow-dot{color:var(--hero-accent);margin:0 .6em;display:inline}.hero-title{color:var(--hero-ink);font-size:clamp(31px,8.4vw,50px);font-weight:var(--fw-600);letter-spacing:-.025em;text-wrap:balance;margin-top:14px;line-height:1.07}.hero-accent{background:linear-gradient(90deg, var(--hero-accent), var(--hero-accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;display:inline}.hero-lead{max-width:46ch;color:var(--hero-muted);font-size:var(--fs-6);font-weight:var(--fw-300);margin-top:16px;line-height:1.7}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:24px;display:flex}.hero-btn{min-height:46px;font-size:var(--fs-6);font-weight:var(--fw-500);border-radius:12px;align-items:center;gap:10px;padding:0 20px;transition:transform .16s,background-color .16s,border-color .16s,box-shadow .16s;display:inline-flex}.hero-btn svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px;transition:transform .16s}.hero-btn--primary{background:var(--hero-accent-strong);color:#fff;box-shadow:0 10px 24px -10px var(--hero-accent)}.hero-btn--ghost{border:1px solid var(--hero-line);background:var(--hero-card);color:var(--hero-ink)}@media (hover:hover){.hero-btn:hover{transform:translateY(-2px)}.hero-btn--primary:hover svg{transform:translate(3px)}.hero-btn--ghost:hover{border-color:var(--hero-muted)}}.hero-btn:active{transform:scale(.98)}.hero-btn:focus-visible,.hero-connect:focus-visible{outline:2px solid var(--hero-accent);outline-offset:3px}.hero-connect{color:var(--hero-muted);font-size:var(--fs-7);border-radius:6px;align-items:center;gap:6px;margin-top:18px;transition:color .16s;display:inline-flex}.hero-connect svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:15px;height:15px}.hero-connect:hover{color:var(--hero-ink)}.hero-visual{align-self:center;padding-bottom:28px;position:relative}.hero-window{background:#11141d;border:1px solid #bdc7db24;border-radius:14px;overflow:hidden;transform:perspective(1200px)rotateY(-6deg)rotateX(3deg);box-shadow:0 30px 60px -28px #040810cc,0 0 0 1px #0003}.hero-window-bar{border-bottom:1px solid #bdc7db1a;align-items:center;gap:6px;padding:11px 14px;display:flex}.hero-dot{background:#e25a5a;border-radius:50%;width:9px;height:9px}.hero-dot:nth-child(2){background:#f4ba34}.hero-dot:nth-child(3){background:#47c270}.hero-filename{color:#c2c9d699;margin-left:8px;font:11px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.hero-code{color:#c8d0da;white-space:pre;margin:0;padding:16px 16px 18px;font:12px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-x:auto}.hero-code span{display:inline}.tok-comment{color:#768293;font-style:italic}.tok-keyword{color:#f7776e}.tok-string{color:#8fd0ff}.hero-caret{vertical-align:-.2em;background:var(--hero-accent);width:7px;height:1.1em;margin-left:3px;animation:1.1s step-end infinite hero-blink;display:inline-block!important}@keyframes hero-blink{50%{opacity:0}}.hero-note{color:#151a28;max-width:190px;font-size:12px;font-weight:var(--fw-500);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffeb;border:1px solid #fff9;border-radius:14px;align-items:flex-end;gap:10px;padding:12px 14px;line-height:1.35;display:flex;position:absolute;bottom:0;right:4px;box-shadow:0 16px 34px -14px #060c188c}.hero-note svg{background:var(--hero-accent-strong);fill:none;stroke:#fff;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;border-radius:8px;flex:none;width:26px;height:26px;padding:6px}.hero-cards{grid-template-columns:1fr;gap:12px;margin-top:14px;display:grid}.hero-card{border:1px solid var(--hero-line);background:var(--hero-card);border-radius:16px;padding:18px;transition:transform .2s,border-color .2s}@media (hover:hover){.hero-card:hover{border-color:#3d84ff73;transform:translateY(-3px)}}.hero-card-icon{background:color-mix(in srgb, var(--hero-accent) 12%, transparent);width:40px;height:40px;color:var(--hero-accent);border-radius:11px;place-items:center;display:grid}.hero-card-icon svg{width:20px;height:20px}.hero-card h3{color:var(--white-2);font-size:var(--fs-5);font-weight:var(--fw-600);margin-top:16px}.hero-card p{color:var(--light-gray-70);font-size:var(--fs-7);font-weight:var(--fw-300);margin-top:6px;line-height:1.6}.hero-accent{position:relative}.hero-accent-line{background:linear-gradient(90deg, var(--hero-accent), var(--hero-accent-2));opacity:.85;transform-origin:0;border-radius:1em;height:.075em;display:block;position:absolute;bottom:-.05em;left:.04em;right:.3em}.hero-title .line-mask{margin-bottom:-.24em;padding-bottom:.24em}.hero-code .hero-line{display:block}@media (hover:hover) and (prefers-reduced-motion:no-preference){.hero-window{transition:transform var(--spring-duration) var(--spring)}.hero-visual:hover .hero-window{transform:perspective(1200px)rotateY(-2deg)rotateX(1deg)translateY(-2px)}}html.reveal-ready:not(.reveal-instant) .hero:not(.hero-done) :is(.hero-eyebrow,.hero-lead,.hero-actions,.hero-connect,.hero-window,.hero-note,.hero-card,.hero-code .hero-line){opacity:0;transition:none}html.reveal-ready:not(.reveal-instant) .hero:not(.hero-done) .hero-accent-line{transform:scaleX(0)}@media (prefers-reduced-motion:reduce){.hero-caret{animation:none}}@media (min-width:450px){.hero-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:580px){.hero{margin:-10px -10px 0}.hero-main{padding:36px 32px 34px}.hero-eyebrow{font-size:12px}}@media (min-width:1024px){.hero{margin:46px -10px 0}.hero-main{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:28px;padding:44px 36px 40px 40px}.hero-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
