:root {
  --home-bg: #050812; --home-panel: #0d111f; --home-cyan: #26caee;
  --home-magenta: #d043a1; --home-text: #fff;
  --home-dim: rgba(255,255,255,.78); --home-muted: rgba(255,255,255,.65);
  --home-display: "Nunito Sans",system-ui,sans-serif;
}
* { box-sizing:border-box }
html { color-scheme:dark; scroll-padding-top:1.5rem; background:var(--home-bg); color:var(--home-text) }
body { margin:0; font:1rem/1.6 system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; background:radial-gradient(ellipse 30% 500px at 100% 1050px,rgba(208,67,161,.065),transparent),var(--home-bg) }
h1,h2,h3,h4,p { margin:0 } a { color:inherit; text-decoration:none }
button { font:inherit; cursor:pointer } button,a { -webkit-tap-highlight-color:transparent }
[hidden] { display:none!important }
a:focus-visible,button:focus-visible { outline:3px solid var(--home-cyan); outline-offset:5px }
::selection { background:var(--home-cyan); color:var(--home-bg) }
.page { max-width:1440px; padding:0 64px; margin:auto }
.skip-link { position:absolute; z-index:50; top:12px; left:20px; transform:translateY(-180%); padding:10px 18px; border-radius:8px; background:var(--home-cyan); color:var(--home-bg); font-weight:700 }
.skip-link:focus { transform:translateY(0) }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.site-header { min-height:106px; display:flex; align-items:center; justify-content:space-between; gap:30px; border-bottom:1px solid rgba(38,202,238,.24); position:relative; z-index:5 }
.brand-lockup { display:flex; align-items:center; gap:12px; min-height:48px; white-space:nowrap; font:900 36px/1 var(--home-display); letter-spacing:-1.2px }
.brand-avatar { display:block; object-fit:cover; width:68px; height:68px; border-radius:50%; border:1px solid rgba(38,202,238,.3) }
.cyan { color:var(--home-cyan) } .brand-dot { color:var(--home-magenta) }
.site-nav { display:flex; align-items:center; gap:32px; font-size:14px; font-weight:600 }
.site-nav a { display:flex; align-items:center; gap:8px; min-height:44px; color:var(--home-dim); transition:color .2s }
.site-nav a:hover,.site-nav .social-nav { color:var(--home-cyan) }
.menu-toggle { background:var(--home-panel); border:1px solid rgba(38,202,238,.38); color:var(--home-text); border-radius:10px; min-height:44px; min-width:44px; padding:10px 13px; display:flex; align-items:center; gap:10px }
.menu-lines { width:16px; height:10px; border-block:2px solid var(--home-cyan) }
.hero { position:relative; isolation:isolate; min-height:615px; display:grid; grid-template-columns:1.08fr 1fr; align-items:center; gap:12px }
.hero-copy { position:relative; z-index:3; padding:52px 0 62px }
.eyebrow { display:flex; align-items:center; gap:10px; font-size:12px; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--home-cyan) }
.little-star { font-size:21px; color:var(--home-magenta) }
h1,h2,h3,h4 { font-family:var(--home-display) }
h1 { font-weight:900; font-size:clamp(58px,6.15vw,88px); line-height:1.02; letter-spacing:-.055em; margin-top:24px }
h1>span { color:var(--home-cyan); text-shadow:0 0 50px rgba(38,202,238,.13) }
.hero-description { max-width:470px; font-size:21px; line-height:1.6; color:var(--home-dim); margin-top:26px }
.hero-aside { font-size:14px; color:var(--home-muted); margin-top:15px }
.plain-link { display:inline-flex; align-items:center; gap:18px; min-height:44px; color:var(--home-cyan); font-size:15px; font-weight:700 }
.plain-link span { font-size:22px; transition:transform .2s } .plain-link:hover span { transform:translateX(4px) }
.hero-link { margin-top:20px }
.hero-visual { position:relative; z-index:2; align-self:stretch; min-width:0; display:grid; place-items:center; pointer-events:none; overflow:clip }
.hero-art { position:absolute; width:118%; height:510px; right:-7%; top:38px; object-fit:cover; object-position:84% center; mask-image:radial-gradient(ellipse 65% 64% at 55% 47%,#000 55%,transparent 90%) }
.scene-caption { position:absolute; bottom:49px; left:50%; transform:translateX(-50%); white-space:nowrap; display:flex; gap:9px; align-items:center; font-size:12px; color:var(--home-muted) }
.scene-caption>span { color:var(--home-magenta); font-size:16px }
.hero-light { --horizon-center:76%; position:absolute; inset:-104px -64px 0; z-index:1; overflow:hidden; pointer-events:none; opacity:.32; mask-image:linear-gradient(90deg,transparent 42%,#000 66%,#000 90%,transparent) }
.beam-motion { position:absolute; inset:0; width:100%; height:100% }
.hero-light[data-motion=static] .beam-motion { display:none }
.hero-light::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 9% 70% at 76% 15%,rgba(38,202,238,.3),transparent 78%),radial-gradient(ellipse 15% 42% at 98% 68%,rgba(208,67,161,.24),transparent) }
.hero-horizon { position:absolute; z-index:2; pointer-events:none; bottom:4px; left:-64px; right:-64px; height:110px; background:radial-gradient(ellipse 37% 2px at 74% 70%,rgba(38,202,238,.8),transparent),radial-gradient(ellipse 44% 13px at 70% 73%,rgba(38,202,238,.16),transparent),radial-gradient(ellipse 12% 5px at 96% 70%,rgba(208,67,161,.5),transparent),radial-gradient(ellipse 42% 50px at 78% 80%,rgba(38,202,238,.055),transparent) }
.tools-section { position:relative; padding-top:42px }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:28px }
h2 { font-weight:900; font-size:clamp(28px,3vw,39px); line-height:1.16; letter-spacing:-.035em }
.section-heading h2 { margin-top:10px }
.product-picker { display:flex; padding:4px; gap:4px; border:1px solid rgba(38,202,238,.25); border-radius:30px; background:var(--home-panel) }
.product-picker button { padding:8px 16px; min-height:44px; border-radius:23px; border:1px solid transparent; background:transparent; color:var(--home-dim); font-size:14px; font-weight:700; transition:border-color .2s,box-shadow .2s,color .2s }
.product-picker button[aria-pressed=true] { color:var(--home-cyan); border-color:rgba(38,202,238,.55); box-shadow:0 0 19px rgba(208,67,161,.18); background:var(--home-bg) }
.product-picker button:hover { color:var(--home-cyan); box-shadow:0 0 20px rgba(208,67,161,.26) }
.product-list { display:grid; gap:16px }
.product-card { position:relative; display:grid; grid-template-columns:235px 1fr 200px; align-items:center; gap:32px; padding:27px 30px; border:1px solid rgba(38,202,238,.32); border-radius:17px; background:var(--home-panel); transition:border-color .22s,box-shadow .22s }
.product-card.is-selected { border-color:var(--home-cyan); box-shadow:0 0 23px rgba(208,67,161,.17),0 0 65px rgba(208,67,161,.045),inset 3px 0 0 rgba(38,202,238,.6) }
.product-card:hover,.product-card:focus-within,.product-card.is-preview { border-color:var(--home-cyan); box-shadow:0 0 25px rgba(208,67,161,.25),0 0 65px rgba(208,67,161,.08) }
.product-identity { display:flex; align-items:center; gap:17px }
.product-icon { display:grid; place-items:center; flex-shrink:0; width:48px; height:48px; border-radius:12px; background:rgba(38,202,238,.055); border:1px solid rgba(38,202,238,.32); color:var(--home-cyan) }
.product-icon svg { display:block; width:26px; height:26px }
.product-kicker { font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--home-muted) }
.product-identity h3 { font-size:27px; line-height:1.2; font-weight:900; letter-spacing:-.03em; margin-top:3px }
.product-copy { border-left:1px solid rgba(38,202,238,.2); padding-left:31px }
.product-copy h4 { font-size:18px; font-weight:800; line-height:1.4 }
.product-copy p { font-size:14px; line-height:1.6; color:var(--home-dim); margin-top:6px; max-width:450px }
.product-actions { display:flex; align-items:stretch; flex-direction:column; gap:3px }
.outline-link { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; min-height:48px; padding:11px 18px; border-radius:11px; border:1px solid rgba(38,202,238,.65); color:var(--home-cyan); font-size:14px; font-weight:700; background:rgba(5,8,18,.7); transition:box-shadow .2s,background .2s }
.outline-link:hover { box-shadow:0 0 25px rgba(208,67,161,.26); background:rgba(38,202,238,.06) }
.outline-link span { font-size:21px; line-height:1 }
.current-app { min-height:38px; display:flex; align-items:center; justify-content:center; gap:7px; font-size:11px; line-height:1.4; color:var(--home-muted) }
a.current-app { min-height:44px } a.current-app:hover { color:var(--home-cyan) }
.migration-note { font-size:12px; line-height:1.7; color:var(--home-muted); margin-top:18px; max-width:780px }
.approach-section { display:grid; grid-template-columns:1fr 1fr; gap:100px; margin-top:100px; padding:56px 0 62px; border-top:1px solid rgba(38,202,238,.19) }
.approach-intro h2 { margin-top:18px }
.approach-intro>p:not(.eyebrow) { color:var(--home-dim); font-size:16px; max-width:470px; margin-top:21px; line-height:1.8 }
.approach-intro>a { margin-top:24px }
.approach-list { list-style:none; padding:0; margin:0; display:grid; gap:27px }
.approach-list>li { display:flex; gap:23px; align-items:flex-start }
.step-number { font:700 13px/1.5 ui-monospace,monospace; letter-spacing:.03em; color:var(--home-cyan); display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; border:1px solid rgba(38,202,238,.28); border-radius:50% }
.approach-list h3 { font-size:19px; line-height:1.5; font-weight:800 }
.approach-list p { font-size:14px; color:var(--home-dim); margin-top:5px; max-width:370px }
.follow-section { display:grid; grid-template-columns:120px 1fr auto; gap:30px; align-items:center; background:radial-gradient(ellipse 23% 100% at 95% 90%,rgba(208,67,161,.1),transparent),var(--home-panel); border:1px solid rgba(38,202,238,.27); border-radius:24px; padding:27px 38px; margin:16px 0 72px }
.follow-portrait img { width:114px; height:114px; object-fit:cover; border-radius:50% }
.follow-section h2 { margin-top:9px; font-size:31px }
.follow-section p:not(.eyebrow) { color:var(--home-dim); font-size:14px; margin-top:7px }
.follow-section>a { min-width:196px }
.site-footer { border-top:1px solid rgba(38,202,238,.18); padding:33px 0 24px; display:grid; grid-template-columns:1fr auto; column-gap:30px; row-gap:27px }
.footer-brand { font:900 23px/1.2 var(--home-display); letter-spacing:-.04em; display:inline-flex; min-height:44px; align-items:center }
.site-footer p { color:var(--home-muted); font-size:13px; margin-top:3px }
.site-footer nav { display:flex; gap:25px; align-items:center }
.site-footer nav a { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:13px; color:var(--home-dim) }
.site-footer nav a:hover { color:var(--home-cyan) }
.footer-bottom { grid-column:1/-1; display:flex; justify-content:space-between; gap:18px; color:var(--home-muted); font-size:11px; padding-top:21px; border-top:1px solid rgba(38,202,238,.1) }
@media(min-width:900px) {
  .product-card.is-selected::after { content:""; position:absolute; inset:-1px; border-radius:inherit; box-shadow:0 0 25px rgba(208,67,161,.1); pointer-events:none; animation:able-bloom 9s ease-in-out infinite }
  @keyframes able-bloom { 50% { box-shadow:0 0 32px rgba(208,67,161,.25) } }
}
@media(max-width:1150px) {
  .page { padding:0 38px } .site-nav { gap:22px } .brand-lockup { font-size:32px }
  .brand-avatar { width:60px; height:60px } .hero { min-height:585px }
  .hero-light { inset:-100px -38px 0 } .hero-horizon { left:-38px; right:-38px }
  .hero-art { height:420px; top:55px; width:1260px; left:50%; right:auto; transform:translateX(-73.5%); object-fit:fill; mask-image:radial-gradient(ellipse 24% 64% at 73.5% 48%,#000 65%,transparent 100%) } .hero-description { font-size:19px }
  .product-card { grid-template-columns:190px 1fr 176px; gap:20px; padding:24px }
  .product-copy { padding-left:23px } .product-identity { gap:12px }
  .product-icon { width:42px; height:42px } .product-identity h3 { font-size:25px }
  .product-copy h4 { font-size:16px } .outline-link { padding:11px 13px; gap:13px }
  .approach-section { gap:60px } .follow-section { padding:25px 28px; gap:23px }
}
@media(max-width:900px) {
  .page { padding:0 28px } .site-header { min-height:91px; gap:18px }
  .site-nav { gap:18px; font-size:13px } .site-nav .social-nav { display:none }
  .brand-lockup { font-size:30px } .hero { min-height:570px; grid-template-columns:1.06fr 1fr }
  .hero-copy { padding-top:42px } h1 { font-size:62px } .hero-description { font-size:17px }
  .hero-aside { max-width:275px } .hero-art { height:340px; top:90px; width:1020px }
  .scene-caption { font-size:10px; bottom:75px; white-space:normal; text-align:center; width:90%; display:block }
  .scene-caption>span { padding-right:6px } .hero-light { inset:-92px -28px 0 }
  .hero-horizon { left:-28px; right:-28px } .section-heading { align-items:flex-start; flex-direction:column; gap:20px }
  .product-card { grid-template-columns:160px 1fr; gap:15px 24px }
  .product-actions { grid-column:2; flex-direction:row; align-items:center; flex-wrap:wrap; gap:6px 16px }
  .product-copy { padding-left:0; border-left:0 } .current-app { font-size:11px; justify-content:flex-start }
  .product-actions .outline-link { min-width:175px } .product-identity { align-self:start }
  .approach-section { gap:40px; margin-top:70px } .follow-section { grid-template-columns:85px 1fr; gap:15px 22px }
  .follow-portrait img { width:85px; height:85px } .follow-section>a { grid-column:2; justify-self:start }
  .site-footer { grid-template-columns:1fr } .site-footer nav { flex-wrap:wrap; gap:22px } .site-footer p { font-size:12px }
}
@media(max-width:650px) {
  .page { padding:0 22px } .site-header { min-height:84px; flex-wrap:wrap; padding:14px 0 }
  .brand-lockup { font-size:28px; gap:9px } .brand-avatar { width:52px; height:52px }
  .site-nav { flex:1 0 100%; flex-wrap:wrap; gap:0 24px; font-size:14px; padding-top:8px }
  .site-nav .social-nav { display:flex } .js-nav .site-nav { display:none } .js-nav .site-nav.is-open { display:flex }
  .menu-toggle { font-size:13px } .hero { display:flex; flex-direction:column; gap:0; min-height:0; align-items:stretch }
  .hero-copy { padding:43px 0 0 } .eyebrow { font-size:11px; letter-spacing:.1em }
  h1 { font-size:clamp(56px,12.5vw,76px); margin-top:20px; line-height:1.03 }
  .hero-description { font-size:17px; line-height:1.65; max-width:430px; margin-top:23px }
  .hero-aside { font-size:13px; max-width:none; margin-top:13px } .hero-link { display:none }
  .hero-visual { height:360px; margin-top:7px } .hero-art { width:960px; height:320px; top:8px }
  .scene-caption { bottom:10px; width:100%; font-size:11px; white-space:nowrap; left:50% }
  .hero-light { inset:300px -22px -6px; --horizon-center:55%; opacity:.22; mask-image:linear-gradient(90deg,transparent,#000 25%,#000 80%,transparent) }
  .hero-horizon { left:-22px; right:-22px; bottom:-28px; height:100px; background:radial-gradient(ellipse 45% 2px at 55% 60%,rgba(38,202,238,.7),transparent),radial-gradient(ellipse 48% 14px at 55% 64%,rgba(38,202,238,.13),transparent),radial-gradient(ellipse 18% 6px at 95% 61%,rgba(208,67,161,.32),transparent) }
  .tools-section { padding-top:54px } .section-heading { gap:22px; margin-bottom:20px }
  h2 { font-size:30px; letter-spacing:-.04em } .section-heading h2 { max-width:340px }
  .product-picker { align-self:flex-start; max-width:100%; gap:2px } .product-picker button { padding:8px 17px; min-height:44px }
  .product-card { display:flex; flex-direction:column; align-items:stretch; gap:18px; padding:22px; border-radius:16px }
  .product-identity { align-items:center } .product-identity h3 { font-size:29px } .product-icon { width:46px; height:46px }
  .product-copy h4 { font-size:19px } .product-copy p { font-size:14px }
  .product-actions { margin-top:1px; flex-direction:column; align-items:stretch; gap:1px }
  .product-actions .outline-link { min-width:0; min-height:48px } .product-actions .current-app { justify-content:center }
  .migration-note { font-size:12px; line-height:1.8 } .approach-section { grid-template-columns:1fr; gap:30px; margin-top:52px; padding:38px 0 }
  .approach-intro>p:not(.eyebrow) { font-size:15px } .approach-list { gap:25px } .approach-list>li { gap:17px } .approach-list h3 { font-size:18px }
  .follow-section { margin:12px 0 45px; grid-template-columns:1fr; padding:26px; gap:20px; border-radius:20px }
  .follow-portrait img { width:88px; height:88px } .follow-section h2 { font-size:31px }
  .follow-section>a { grid-column:auto; justify-self:stretch; min-width:0 } .site-footer { padding-top:23px; gap:19px }
  .site-footer nav { gap:8px 20px } .footer-bottom { font-size:10px; flex-wrap:wrap; gap:7px; padding-top:16px }
}
@media(max-width:359px) {
  .page { padding:0 18px } .brand-lockup { font-size:25px } .brand-avatar { width:46px; height:46px }
  .menu-toggle { padding:8px 10px; gap:8px } .menu-toggle>span:first-child { display:none }
  .hero-copy { padding-top:36px } h1 { font-size:53px } .hero-visual { height:307px } .hero-art { height:270px; width:810px }
  .scene-caption { font-size:10px } .product-picker button { padding:8px 15px } .product-card { padding:20px }
  .hero-description { font-size:16px } .hero-light { inset:325px -18px 0 } .hero-horizon { left:-18px; right:-18px }
  .eyebrow { letter-spacing:.085em }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important }
  .beam-motion { display:none!important }
}
@media(prefers-contrast:more) {
  .hero-light,.hero-horizon { display:none } .product-card,.product-picker,.follow-section { box-shadow:none; border-color:var(--home-cyan) }
  .product-card::after { display:none!important } .eyebrow,.migration-note,.current-app,.hero-aside,.scene-caption,.footer-bottom,.site-footer p { color:var(--home-text) }
  .product-card { background:var(--home-bg) }
}
@media(forced-colors:active) {
  .hero-light,.hero-horizon { display:none } .product-card,.product-picker,.follow-section,.outline-link,.product-icon,.brand-avatar { background:Canvas; border:1px solid CanvasText; box-shadow:none }
  .product-picker button[aria-pressed=true] { outline:2px solid Highlight } .hero-art { mask-image:none }
  .product-card::after { display:none } .product-card.is-selected { outline:2px solid Highlight }
  h1>span,.cyan,.eyebrow,.plain-link,.outline-link { color:LinkText; text-shadow:none }
}
@media print {
  .hero-light,.hero-horizon,.menu-toggle,.product-picker { display:none!important } .page { padding:0 } .hero { min-height:0 }
  .hero-art { position:static; height:250px; object-fit:contain; width:100%; mask-image:none } .scene-caption { display:none }
  .product-card,.follow-section { break-inside:avoid; box-shadow:none } .approach-section { margin-top:30px } .site-header { min-height:70px }
  .product-card::after { display:none } .site-nav { display:flex!important }
}