:root{
  --ink:#0b1220;--muted:#667085;--line:#e5eaf1;--paper:#fff;--soft:#f5f7fb;--blue:#2463eb;--indigo:#4f46e5;--cyan:#0891b2;--emerald:#059669;--violet:#7c3aed;--rose:#e11d48;--amber:#d97706;--orange:#ea580c;--pink:#db2777;--slate:#475569;--mint:#0f9f76;--sky:#0284c7;
  --radius-xl:30px;--radius-lg:22px;--radius-md:16px;--shadow:0 24px 80px rgba(15,23,42,.12);--shadow-sm:0 12px 36px rgba(15,23,42,.08);
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:86px}body{margin:0;color:var(--ink);background:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,input{font:inherit}.container{width:min(1240px,calc(100% - 40px));margin-inline:auto}.section{padding:108px 0;position:relative}.section-soft{background:linear-gradient(180deg,#f7f9fd 0%,#f4f7fb 100%)}.section-dark{background:#071326;color:#fff;overflow:hidden}.section-dark:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(37,99,235,.26),transparent 32%),radial-gradient(circle at 88% 60%,rgba(14,165,233,.18),transparent 32%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,auto,44px 44px,44px 44px}.topbar{position:fixed;top:14px;left:0;right:0;z-index:100}.nav-shell{display:flex;align-items:center;gap:20px;min-height:62px;padding:8px 10px 8px 16px;border:1px solid rgba(226,232,240,.84);border-radius:18px;background:rgba(255,255,255,.9);box-shadow:0 12px 38px rgba(15,23,42,.09);backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:10px;min-width:max-content}.brand img{width:34px;height:34px}.brand strong{display:block;font-size:14px;letter-spacing:-.03em}.brand small{display:block;margin-top:1px;font-size:8px;color:#8490a2;font-weight:650}.desktop-nav{display:flex;align-items:center;gap:3px;margin-left:auto}.desktop-nav a{padding:9px 10px;border-radius:10px;color:#687487;font-size:10px;font-weight:760;transition:.2s}.desktop-nav a:hover,.desktop-nav a.active{color:#123a7a;background:#eef4ff}.nav-actions{display:flex;align-items:center;gap:7px}.mobile-toggle{display:none;width:40px;height:40px;border:0;border-radius:11px;background:#eff4fb;color:#24364f;font-size:18px;cursor:pointer}.mobile-menu{display:none;margin-top:8px;padding:12px;border:1px solid #e3e8ef;border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}.mobile-menu.open{display:grid}.mobile-menu a{padding:11px;border-radius:10px;color:#586779;font-size:11px;font-weight:750}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 15px;border:1px solid transparent;border-radius:11px;font-size:10px;font-weight:850;letter-spacing:-.01em;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}.btn:hover{transform:translateY(-1px)}.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}.btn-primary{color:#fff;background:linear-gradient(135deg,#2868f0,#4f46e5);box-shadow:0 10px 24px rgba(37,99,235,.25)}.btn-primary:hover{box-shadow:0 14px 30px rgba(37,99,235,.32)}.btn-white{color:#172033;background:#fff;box-shadow:0 12px 30px rgba(2,6,23,.14)}.btn-ghost{color:#536174;border-color:#dfe5ed;background:#fff}.btn-darkghost{color:#dbe8ff;border-color:rgba(255,255,255,.17);background:rgba(255,255,255,.07)}
.hero{position:relative;min-height:790px;padding:142px 0 92px;color:#fff;background:#081327;overflow:hidden}.hero:before{content:"";position:absolute;width:780px;height:780px;border-radius:50%;right:-160px;top:-210px;background:radial-gradient(circle,rgba(37,99,235,.43) 0,rgba(67,56,202,.16) 42%,transparent 68%)}.hero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 88%)}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:.92fr 1.08fr;gap:66px;align-items:center}.hero-copywrap{padding:20px 0}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid rgba(147,197,253,.2);border-radius:999px;background:rgba(37,99,235,.11);color:#bfdbfe;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.09em}.eyebrow i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.12)}.hero h1{max-width:690px;margin:22px 0 18px;font-size:68px;line-height:.98;letter-spacing:-.062em;font-weight:850}.hero h1 span{background:linear-gradient(90deg,#7dd3fc 0%,#60a5fa 35%,#a78bfa 72%,#5eead4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{max-width:610px;margin:0;color:#aebed4;font-size:15px;line-height:1.75}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.hero-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:35px}.hero-proof div{padding:14px 13px;border:1px solid rgba(148,163,184,.16);border-radius:14px;background:rgba(255,255,255,.045);backdrop-filter:blur(12px)}.hero-proof strong{display:block;font-size:19px;letter-spacing:-.035em}.hero-proof span{display:block;margin-top:3px;color:#879ab6;font-size:8px;font-weight:700}.hero-stage{position:relative;min-height:535px;perspective:1300px}.hero-orb{position:absolute;border-radius:50%;filter:blur(4px)}.hero-orb.one{width:190px;height:190px;left:30px;bottom:48px;background:rgba(14,165,233,.22)}.hero-orb.two{width:140px;height:140px;right:10px;top:42px;background:rgba(124,58,237,.25)}.browser-card{position:absolute;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:#fff;box-shadow:0 38px 95px rgba(0,0,0,.38)}.browser-card.main{width:92%;right:0;top:35px;transform:rotateY(-5deg) rotateX(2deg)}.browser-card.small-a{width:48%;left:0;bottom:26px;transform:rotateY(6deg) rotateZ(-1deg);z-index:3}.browser-card.small-b{width:43%;right:-12px;bottom:-4px;transform:rotateY(-4deg) rotateZ(1deg);z-index:4}.browser-head{height:31px;display:flex;align-items:center;gap:5px;padding:0 11px;background:#f7f9fc;border-bottom:1px solid #edf0f4}.browser-head i{width:6px;height:6px;border-radius:50%;background:#d3dae5}.browser-head span{margin-left:5px;color:#7c899b;font-size:7px;font-style:normal;font-weight:700}.browser-card img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}.float-badge{position:absolute;z-index:6;display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid rgba(255,255,255,.17);border-radius:13px;background:rgba(13,29,56,.82);box-shadow:0 20px 45px rgba(0,0,0,.28);backdrop-filter:blur(14px)}.float-badge strong{font-size:10px}.float-badge span{display:block;margin-top:2px;color:#92a8c6;font-size:7px}.float-badge b{display:grid;place-items:center;width:31px;height:31px;border-radius:10px;background:linear-gradient(135deg,#2563eb,#7c3aed);font-size:9px}.float-badge.a{left:24px;top:0}.float-badge.b{right:5px;top:80px}.tech-ribbon{position:relative;z-index:4;margin-top:-2px;border-bottom:1px solid #e8edf4;background:#fff}.tech-grid{display:grid;grid-template-columns:1.2fr repeat(5,1fr);align-items:center;min-height:82px}.tech-lead{font-size:9px;color:#8a95a6;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.tech-item{padding:14px 20px;border-left:1px solid #edf1f5}.tech-item strong{display:block;font-size:12px}.tech-item span{display:block;margin-top:3px;color:#909baa;font-size:8px}.kicker{color:#2563eb;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.13em}.section-title{max-width:770px;margin:9px 0 0;font-size:44px;line-height:1.04;letter-spacing:-.052em;font-weight:800}.section-copy{max-width:720px;margin:14px 0 0;color:#768397;font-size:12px;line-height:1.75}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:38px}.section-head .right-note{max-width:330px;color:#7c8798;font-size:10px;line-height:1.65}.section-dark .kicker{color:#7dd3fc}.section-dark .section-copy{color:#94a8c4}.section-dark .section-title{color:#fff}
.demo-section{background:linear-gradient(180deg,#f4f7fc 0%,#ffffff 45%,#f7f9fd 100%)}.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 24px}.demo-legend{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.legend-pill{padding:7px 10px;border:1px solid #dfe6ef;border-radius:999px;background:#fff;color:#6b7789;font-size:8px;font-weight:800}.legend-pill.active{color:#1d4ed8;border-color:#bcd0ff;background:#eef4ff}.demo-note{font-size:9px;color:#8a95a5}.demo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.demo-card{overflow:hidden;border:1px solid #dfe6ef;border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.055);transition:.28s cubic-bezier(.2,.7,.2,1)}.demo-card:hover{transform:translateY(-6px);box-shadow:0 24px 55px rgba(15,23,42,.13);border-color:#cfd9e7}.demo-visual{position:relative;display:block;overflow:hidden;padding:13px 13px 0;background:radial-gradient(circle at 20% 0%,color-mix(in srgb,var(--tone) 22%,transparent),transparent 46%),linear-gradient(145deg,color-mix(in srgb,var(--tone) 10%,#fff),#eef3f9)}.demo-topline{display:flex;align-items:center;justify-content:space-between;margin:0 2px 9px;color:#78869a;font-size:7px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.demo-topline span{color:color-mix(in srgb,var(--tone) 86%,#0f172a)}.demo-topline em{font-style:normal}.demo-screen-shell{overflow:hidden;border:1px solid rgba(148,163,184,.28);border-radius:12px 12px 0 0;background:#fff;box-shadow:0 12px 30px rgba(15,23,42,.12)}.mini-browser{height:23px;display:flex;align-items:center;gap:4px;padding:0 8px;border-bottom:1px solid #edf1f5;background:#fbfcfe}.mini-browser i{width:4px;height:4px;border-radius:50%;background:#d8dee8}.mini-browser span{margin-left:4px;color:#96a0af;font-size:6px;font-weight:700}.demo-screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#edf2f8,#f9fbfd)}.demo-screen img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .3s,transform .4s}.demo-screen.ready img{opacity:1}.demo-card:hover .demo-screen img{transform:scale(1.025)}.demo-fallback{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#8a96a8}.demo-fallback strong{font-size:14px;color:#536174}.demo-fallback span{font-size:8px;margin-top:5px}.demo-screen.ready .demo-fallback{display:none}.demo-hover{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;opacity:0;background:linear-gradient(to top,rgba(5,13,29,.66),rgba(5,13,29,.08));transition:.25s}.demo-card:hover .demo-hover{opacity:1}.demo-hover span{display:inline-flex;align-items:center;gap:7px;padding:10px 13px;border-radius:10px;background:#fff;color:#152238;font-size:9px;font-weight:900;box-shadow:0 12px 24px rgba(0,0,0,.18)}.demo-hover svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9}.demo-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:15px 15px 17px}.demo-meta h3{margin:0;font-size:13px;letter-spacing:-.025em}.demo-meta p{min-height:42px;margin:6px 0 0;color:#7f8b9b;font-size:9px;line-height:1.58}.demo-meta>a{display:grid;place-items:center;flex:0 0 auto;width:31px;height:31px;border:1px solid #e1e7ef;border-radius:9px;color:#637186;font-size:12px}.demo-meta>a:hover{color:#fff;background:#2563eb;border-color:#2563eb}
.story-stack{display:grid;gap:34px}.story{display:grid;grid-template-columns:1fr 1.06fr;gap:46px;align-items:center;padding:50px;border:1px solid #e2e8f0;border-radius:30px;background:#fff;box-shadow:0 16px 50px rgba(15,23,42,.055)}.story.reverse{grid-template-columns:1.06fr 1fr}.story.reverse .story-copy{order:2}.story-copy h3{margin:8px 0 12px;font-size:34px;line-height:1.06;letter-spacing:-.048em}.story-copy>p{margin:0;color:#728094;font-size:12px;line-height:1.75}.story-points{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}.story-point{padding:13px;border:1px solid #e8edf3;border-radius:13px;background:#f9fbfd}.story-point b{display:block;font-size:10px}.story-point span{display:block;margin-top:4px;color:#8a96a6;font-size:8px;line-height:1.5}.story-visual{position:relative;min-height:400px}.visual-panel{position:absolute;overflow:hidden;border:1px solid #dbe4ef;border-radius:18px;background:#fff;box-shadow:var(--shadow)}.visual-panel.large{inset:18px 0 0 34px}.visual-panel.large img{width:100%;height:100%;object-fit:cover;object-position:top}.visual-panel.small{width:48%;right:-18px;bottom:-12px;border-radius:15px}.visual-panel.small img{aspect-ratio:16/10;object-fit:cover;object-position:top}.visual-panel:before{content:"";display:block;height:27px;background:#f8fafc;border-bottom:1px solid #edf1f5}.visual-panel:after{content:"•••";position:absolute;top:3px;left:10px;color:#c2cbd7;font-size:13px;letter-spacing:2px}.story-glow{position:absolute;width:240px;height:240px;border-radius:50%;left:0;bottom:0;background:radial-gradient(circle,rgba(37,99,235,.18),transparent 68%)}.visual-metrics{position:absolute;z-index:4;left:0;top:0;display:grid;gap:8px}.visual-metric{min-width:145px;padding:11px 12px;border:1px solid #e2e8f0;border-radius:12px;background:rgba(255,255,255,.94);box-shadow:0 12px 28px rgba(15,23,42,.1);backdrop-filter:blur(10px)}.visual-metric small{display:block;color:#8a96a7;font-size:7px;text-transform:uppercase;letter-spacing:.08em}.visual-metric strong{display:block;margin-top:3px;font-size:13px}.feature-bands{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:34px}.feature-band{position:relative;overflow:hidden;min-height:190px;padding:22px;border:1px solid #e0e7ef;border-radius:18px;background:#fff}.feature-band:after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-35px;bottom:-45px;background:color-mix(in srgb,var(--tone) 12%,transparent)}.feature-band .iconbox{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:color-mix(in srgb,var(--tone) 90%,#0f172a);background:color-mix(in srgb,var(--tone) 10%,#fff)}.feature-band svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}.feature-band h4{margin:15px 0 6px;font-size:14px}.feature-band p{margin:0;color:#7c8999;font-size:9px;line-height:1.6}.feature-band ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:14px 0 0;padding:0}.feature-band li{padding:5px 7px;border-radius:999px;background:#f4f6f9;color:#667385;font-size:7px;font-weight:750}
.capability-wrap{position:relative}.capability-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.capability-tabs span{padding:7px 10px;border-radius:999px;background:#eef4ff;color:#315ea8;font-size:8px;font-weight:850}.capability-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.cap-card{padding:17px;border:1px solid #e2e8f0;border-radius:15px;background:#fff;transition:.2s}.cap-card:hover{border-color:#bdd0ef;box-shadow:0 12px 30px rgba(15,23,42,.065);transform:translateY(-2px)}.cap-card .cap-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.cap-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:#f0f5ff;color:#2563eb;font-size:8px;font-weight:900}.cap-count{color:#8c98a8;font-size:7px;font-weight:800;text-transform:uppercase}.cap-card h4{margin:12px 0 5px;font-size:11px}.cap-card p{margin:0;color:#8390a1;font-size:8px;line-height:1.55}.coverage-strip{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}.coverage-main{padding:34px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(255,255,255,.055)}.mega-number{font-size:76px;line-height:.9;font-weight:900;letter-spacing:-.07em;background:linear-gradient(135deg,#fff,#7dd3fc);-webkit-background-clip:text;background-clip:text;color:transparent}.coverage-main h3{margin:13px 0 8px;font-size:23px}.coverage-main p{max-width:640px;margin:0;color:#98aac1;font-size:11px;line-height:1.7}.coverage-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:24px}.coverage-stat{padding:15px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.045)}.coverage-stat strong{display:block;font-size:16px}.coverage-stat span{display:block;margin-top:3px;color:#8498b5;font-size:8px}.coverage-side{display:grid;gap:10px}.flow-card{padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.055)}.flow-card small{color:#6ee7b7;font-size:7px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.flow-card strong{display:block;margin-top:6px;font-size:12px}.flow-card p{margin:5px 0 0;color:#91a4bf;font-size:8px;line-height:1.55}.developer-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center}.dev-copy h3{margin:8px 0 11px;font-size:38px;line-height:1.04;letter-spacing:-.05em}.dev-copy p{margin:0;color:#768397;font-size:12px;line-height:1.75}.dev-list{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:20px}.dev-list div{padding:11px 12px;border:1px solid #e5eaf1;border-radius:11px;background:#fff;font-size:9px;color:#667385}.dev-list b{color:#2563eb;margin-right:6px}.code-window{overflow:hidden;border:1px solid #dce4ef;border-radius:20px;background:#0b1323;box-shadow:var(--shadow)}.code-head{display:flex;align-items:center;justify-content:space-between;height:42px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);background:#111c31}.code-head span{color:#8fa2bf;font-size:8px}.code-head i{font-style:normal;color:#67e8f9;font-size:7px}.code-body{display:grid;grid-template-columns:180px 1fr;min-height:310px}.tree{padding:19px 15px;border-right:1px solid rgba(255,255,255,.07);background:#0d172a;color:#90a3bd;font-size:8px;line-height:2}.tree b{color:#e5eefc}.code{padding:24px;color:#c8d5e8;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;line-height:1.9}.code .blue{color:#7dd3fc}.code .green{color:#86efac}.code .purple{color:#c4b5fd}.code .muted{color:#667892}.roadmap-grid{display:grid;grid-template-columns:1.2fr repeat(5,1fr);gap:12px}.roadmap-intro{padding:24px;border-radius:18px;background:linear-gradient(135deg,#102248,#17386a);color:#fff}.roadmap-intro small{color:#7dd3fc;font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.1em}.roadmap-intro h3{margin:10px 0 8px;font-size:22px;line-height:1.05}.roadmap-intro p{margin:0;color:#9bb1ce;font-size:9px;line-height:1.6}.edition{padding:19px;border:1px solid #dfe6ef;border-radius:17px;background:#fff}.edition-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#eff3f8;color:#415269;font-size:9px;font-weight:900}.edition.available{border-color:#bce7d2;background:linear-gradient(145deg,#fff,#f0fbf6)}.edition.available .edition-mark{background:#dff7e9;color:#047857}.edition h4{margin:14px 0 5px;font-size:12px}.edition p{margin:0;color:#8591a2;font-size:8px;line-height:1.5}.status{display:inline-flex;margin-top:12px;padding:5px 7px;border-radius:999px;font-size:7px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.live{background:#dcfce7;color:#047857}.soon{background:#eef2ff;color:#4f46e5}.docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}.docs-copy h3{margin:8px 0 11px;font-size:38px;line-height:1.04;letter-spacing:-.05em}.docs-copy p{margin:0;color:#758397;font-size:12px;line-height:1.75}.docs-checks{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:20px 0 24px}.docs-check{padding:11px;border:1px solid #e3e9f1;border-radius:11px;background:#fff;color:#657386;font-size:9px}.docs-check b{color:#16a34a;margin-right:7px}.docs-mock{overflow:hidden;border:1px solid #dbe3ee;border-radius:20px;background:#fff;box-shadow:var(--shadow)}.docs-mock-head{height:42px;display:flex;align-items:center;gap:5px;padding:0 13px;background:#f8fafc;border-bottom:1px solid #e9edf3}.docs-mock-head i{width:7px;height:7px;border-radius:50%;background:#d3d9e2}.docs-mock-body{display:grid;grid-template-columns:150px 1fr;min-height:350px}.docs-sidebar{padding:20px 15px;background:#f7f9fc;border-right:1px solid #edf1f5}.mock-line{height:7px;border-radius:99px;background:#e0e6ed;margin-bottom:11px}.mock-line.on{background:#bfdbfe}.docs-content{padding:27px}.docs-content .mock-title{width:64%;height:18px;border-radius:99px;background:#162033;margin-bottom:16px}.docs-content .mock-line{margin-bottom:10px}.mock-code{height:104px;margin:22px 0;border-radius:12px;background:#0e1728}.release-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.release-card,.license-card{padding:28px;border:1px solid #e1e7ef;border-radius:20px;background:#fff}.release-badge{display:inline-grid;place-items:center;min-width:62px;height:42px;padding:0 12px;border-radius:11px;background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;font-size:11px;font-weight:900}.release-card h3,.license-card h3{margin:15px 0 7px;font-size:19px}.release-card p,.license-card p{margin:0;color:#7d8999;font-size:10px;line-height:1.65}.license-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:15px}.license-mini{padding:14px;border:1px solid #e5eaf1;border-radius:12px;background:#f9fbfd}.license-mini strong{display:block;font-size:11px}.license-mini span{display:block;margin-top:4px;color:#8490a1;font-size:8px}.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.faq{padding:19px;border:1px solid #e2e8f0;border-radius:15px;background:#fff}.faq h4{margin:0 0 7px;font-size:11px}.faq p{margin:0;color:#7d899a;font-size:9px;line-height:1.65}.final-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:42px;border-radius:28px;background:linear-gradient(125deg,#1d4ed8 0%,#4f46e5 50%,#0f766e 115%);color:#fff;box-shadow:0 28px 70px rgba(37,99,235,.25)}.final-cta:after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;right:-100px;top:-120px;border:1px solid rgba(255,255,255,.15);box-shadow:0 0 0 50px rgba(255,255,255,.035),0 0 0 100px rgba(255,255,255,.025)}.final-cta>div{position:relative;z-index:2}.final-cta h2{margin:0;font-size:34px;letter-spacing:-.045em}.final-cta p{margin:8px 0 0;color:#d9e8ff;font-size:11px}.final-actions{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:2}.footer{padding:32px 0;border-top:1px solid #e5eaf0;background:#fff}.footer-row{display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-copy{color:#8a96a6;font-size:9px}.footer-links{display:flex;align-items:center;gap:14px}.footer-links a{color:#6f7c8e;font-size:9px;font-weight:750}.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease var(--delay,0ms),transform .55s ease var(--delay,0ms)}.reveal.is-visible{opacity:1;transform:none}
@media(max-width:1180px){.desktop-nav{display:none}.mobile-toggle{display:grid;place-items:center}.hero-grid{grid-template-columns:1fr}.hero{min-height:auto}.hero-stage{max-width:860px;width:100%;margin-inline:auto}.demo-grid{grid-template-columns:repeat(3,1fr)}.capability-grid{grid-template-columns:repeat(3,1fr)}.roadmap-grid{grid-template-columns:repeat(3,1fr)}.roadmap-intro{grid-column:span 3}.feature-bands{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.section{padding:84px 0}.container{width:min(100% - 30px,1240px)}.hero h1{font-size:56px}.story,.story.reverse,.developer-grid,.docs-grid,.coverage-strip{grid-template-columns:1fr}.story.reverse .story-copy{order:0}.story{padding:32px}.story-visual{min-height:360px}.demo-grid{grid-template-columns:repeat(2,1fr)}.capability-grid{grid-template-columns:repeat(2,1fr)}.feature-bands{grid-template-columns:repeat(2,1fr)}.tech-grid{grid-template-columns:repeat(3,1fr)}.tech-lead{grid-column:1/-1;padding-top:17px}.tech-item:nth-of-type(3){border-left:0}.hero-proof{grid-template-columns:repeat(2,1fr)}.release-row{grid-template-columns:1fr}.final-cta{display:block}.final-actions{margin-top:22px}}
@media(max-width:640px){.topbar{top:8px}.nav-shell{border-radius:14px}.nav-actions>.btn{display:none}.brand small{display:none}.hero{padding-top:118px}.hero h1{font-size:44px}.hero p{font-size:13px}.hero-stage{min-height:385px}.browser-card.main{width:98%;top:42px}.browser-card.small-a{width:56%}.browser-card.small-b{width:52%}.float-badge{display:none}.hero-proof{grid-template-columns:repeat(2,1fr)}.section-title{font-size:34px}.section-head{display:block}.section-head .right-note{margin-top:14px}.demo-grid,.capability-grid,.feature-bands,.story-points,.docs-checks,.faq-grid,.license-cards{grid-template-columns:1fr}.story{padding:24px}.story-copy h3,.dev-copy h3,.docs-copy h3{font-size:30px}.story-visual{min-height:300px}.visual-panel.large{left:15px}.visual-panel.small{width:55%;right:-5px}.tech-grid{grid-template-columns:1fr 1fr}.tech-item{border-left:0;border-top:1px solid #edf1f5}.coverage-stats{grid-template-columns:1fr}.mega-number{font-size:62px}.code-body{grid-template-columns:1fr}.tree{display:none}.roadmap-grid{grid-template-columns:1fr}.roadmap-intro{grid-column:auto}.docs-mock-body{grid-template-columns:100px 1fr}.final-cta{padding:30px 22px}.final-cta h2{font-size:28px}.footer-row{display:block}.footer-links{margin-top:12px;flex-wrap:wrap}}

/* =========================================================
   V4 — PREMIUM TYPOGRAPHY + SPACING SYSTEM
   Marketplace showcase readability pass.
   ========================================================= */
:root{
  --font-body:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:Manrope,Inter,ui-sans-serif,system-ui,sans-serif;
  --text-xs:12px;
  --text-sm:13px;
  --text-base:15px;
  --text-md:16px;
  --text-lg:18px;
  --section-y:96px;
}
body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;color:#111827}
h1,h2,h3,h4,h5,h6,.section-title,.mega-number{font-family:var(--font-display)}
.container{width:min(1280px,calc(100% - 48px))}
.section{padding:var(--section-y) 0}
.section-soft{background:linear-gradient(180deg,#f7f9fd 0%,#f3f6fb 100%)}
.feature-section{background:radial-gradient(circle at 88% 5%,rgba(79,70,229,.055),transparent 24%),linear-gradient(180deg,#fff 0%,#fbfcff 100%)}
.developer-section{background:linear-gradient(180deg,#fff 0%,#f8faff 100%)}
.docs-section{background:radial-gradient(circle at 12% 25%,rgba(37,99,235,.055),transparent 24%),#fff}
.faq-section{background:linear-gradient(180deg,#fff 0%,#f8fafc 100%)}

/* Navigation */
.topbar{top:16px}
.nav-shell{min-height:66px;padding:9px 11px 9px 17px;border-radius:19px}
.brand{gap:11px}.brand img{width:36px;height:36px}
.brand strong{font-size:14px;font-weight:800;letter-spacing:-.02em}
.brand small{margin-top:2px;font-size:10.5px;line-height:1.2;font-weight:600}
.desktop-nav{gap:2px}
.desktop-nav a{padding:10px 11px;font-size:12px;line-height:1;font-weight:650;letter-spacing:-.01em}
.nav-actions{gap:8px}
.btn{min-height:44px;padding:0 17px;border-radius:12px;font-size:12.5px;line-height:1;font-weight:700;letter-spacing:-.01em}
.btn svg{width:16px;height:16px}
.mobile-menu a{font-size:13px}

/* Hero — controlled, readable hierarchy */
.hero{min-height:750px;padding:142px 0 88px;background:linear-gradient(135deg,#071225 0%,#0a1730 46%,#0c1d3c 100%)}
.hero:before{width:720px;height:720px;right:-150px;top:-190px;background:radial-gradient(circle,rgba(37,99,235,.38) 0,rgba(67,56,202,.14) 43%,transparent 70%)}
.hero-grid{grid-template-columns:.94fr 1.06fr;gap:58px}
.hero-copywrap{padding:12px 0}
.eyebrow{gap:9px;padding:8px 12px;font-size:11px;line-height:1;font-weight:750;letter-spacing:.075em}
.hero h1{max-width:660px;margin:24px 0 20px;font-size:clamp(52px,4.7vw,62px);line-height:1.035;letter-spacing:-.045em;font-weight:750;text-wrap:balance}
.hero p{max-width:620px;color:#b3c0d2;font-size:16px;line-height:1.72}
.hero-actions{gap:12px;margin-top:30px}
.hero-proof{gap:12px;margin-top:34px}
.hero-proof div{padding:16px 15px;border-radius:15px}
.hero-proof strong{font-size:21px;font-weight:750;letter-spacing:-.025em}
.hero-proof span{margin-top:4px;color:#94a5bd;font-size:11.5px;line-height:1.35;font-weight:550}
.hero-stage{min-height:520px}
.browser-head{height:32px}.browser-head span{font-size:10px;font-weight:650}
.float-badge{gap:10px;padding:11px 13px;border-radius:14px}
.float-badge strong{font-size:12px;font-weight:700}
.float-badge span{margin-top:2px;font-size:10px;line-height:1.35}
.float-badge b{width:34px;height:34px;font-size:11px}

/* Stack ribbon */
.tech-grid{min-height:94px}
.tech-lead{font-size:11px;line-height:1.35;font-weight:700;letter-spacing:.075em}
.tech-item{padding:17px 20px}
.tech-item strong{font-size:13.5px;font-weight:700;letter-spacing:-.015em}
.tech-item span{margin-top:4px;font-size:11.5px;line-height:1.4}

/* Section hierarchy */
.kicker{font-size:11px;line-height:1.2;font-weight:800;letter-spacing:.11em}
.section-title{max-width:820px;margin:10px 0 0;font-size:clamp(36px,3.2vw,43px);line-height:1.08;letter-spacing:-.038em;font-weight:720;text-wrap:balance}
.section-copy{max-width:760px;margin:15px 0 0;color:#69778a;font-size:15px;line-height:1.7}
.section-head{gap:38px;margin-bottom:42px}
.section-head .right-note{max-width:350px;color:#6f7c8e;font-size:13px;line-height:1.65}
.section-dark .section-copy{color:#a4b3c8}

/* Demos */
.demo-toolbar{margin-bottom:26px}
.demo-legend{gap:8px}.legend-pill{padding:8px 12px;font-size:11.5px;font-weight:700}
.demo-note{font-size:12px}
.demo-grid{gap:22px}
.demo-card{border-radius:20px;box-shadow:0 10px 30px rgba(15,23,42,.065)}
.demo-visual{padding:15px 15px 0}
.demo-topline{margin-bottom:10px;font-size:10.5px;font-weight:750;letter-spacing:.08em}
.mini-browser{height:26px}.mini-browser span{font-size:9.5px;font-weight:650}
.demo-hover span{padding:11px 15px;border-radius:11px;font-size:12px;font-weight:750}
.demo-meta{gap:16px;padding:17px 17px 19px}
.demo-meta h3{font-size:15px;font-weight:750;letter-spacing:-.02em}
.demo-meta p{min-height:58px;margin-top:7px;color:#748195;font-size:12.5px;line-height:1.55}
.demo-meta>a{width:34px;height:34px;border-radius:10px;font-size:14px}
.demo-fallback strong{font-size:16px}.demo-fallback span{font-size:11px}

/* Feature stories */
.story-stack{gap:26px}
.story{gap:48px;padding:44px;border-radius:28px;box-shadow:0 14px 44px rgba(15,23,42,.06)}
.story-copy h3,.dev-copy h3,.docs-copy h3{margin:10px 0 14px;font-size:34px;line-height:1.12;letter-spacing:-.035em;font-weight:720;text-wrap:balance}
.story-copy>p,.dev-copy p,.docs-copy p{color:#66768b;font-size:14.5px;line-height:1.72}
.story-points{gap:12px;margin-top:24px}
.story-point{padding:15px 16px;border-radius:14px}
.story-point b{font-size:13px;font-weight:700}
.story-point span{margin-top:5px;color:#778599;font-size:12px;line-height:1.55}
.visual-metric small{font-size:10.5px!important;line-height:1.3!important}
.visual-metric strong{font-size:13px!important;line-height:1.3!important}

/* Feature band + capability catalog */
.feature-band{padding:22px!important;border-radius:18px!important}
.feature-band strong{font-size:14px!important;line-height:1.35!important}
.feature-band p{font-size:12.5px!important;line-height:1.6!important}
.feature-band small{font-size:10.5px!important}
.cap-card{padding:18px!important;border-radius:16px!important}
.cap-card .cap-top,.cap-card small{font-size:10.5px!important}
.cap-card h4{margin:13px 0 6px;font-size:14px;font-weight:720;letter-spacing:-.015em}
.cap-card p{color:#728095;font-size:12.5px;line-height:1.58}

/* Coverage */
.coverage-strip{gap:24px}
.coverage-main{padding:38px;border-radius:24px}
.mega-number{font-size:70px;font-weight:800;letter-spacing:-.055em}
.coverage-main h3{margin:15px 0 9px;font-size:25px;line-height:1.2}
.coverage-main p{font-size:14px;line-height:1.7}
.coverage-stats{gap:12px;margin-top:26px}
.coverage-stat{padding:17px;border-radius:14px}.coverage-stat strong{font-size:18px}.coverage-stat span{font-size:11.5px;line-height:1.4}
.coverage-side{gap:12px}.flow-card{padding:20px;border-radius:17px}
.flow-card small{font-size:10.5px;letter-spacing:.08em}.flow-card strong{margin-top:7px;font-size:14px;line-height:1.35}.flow-card p{margin-top:6px;font-size:12px;line-height:1.6}

/* Developer / code */
.developer-grid{gap:42px}.dev-list{gap:10px;margin-top:23px}
.dev-list div{padding:13px 14px;border-radius:12px;font-size:12.5px;line-height:1.45}
.code-head{height:46px;padding:0 16px}.code-head span{font-size:11px}.code-head i{font-size:10px}
.code-body{grid-template-columns:190px 1fr;min-height:330px}.tree{padding:20px 16px;font-size:11px;line-height:1.95}.code{padding:26px;font-size:12px;line-height:1.8}

/* Versions */
.roadmap-grid{gap:14px}.roadmap-intro{padding:27px;border-radius:20px}.roadmap-intro small{font-size:10.5px}.roadmap-intro h3{margin:11px 0 9px;font-size:23px;line-height:1.16}.roadmap-intro p{font-size:12.5px;line-height:1.6}
.edition{padding:21px;border-radius:18px}.edition-mark{width:42px;height:42px;font-size:10.5px}.edition h4{margin:15px 0 6px;font-size:14px}.edition p{font-size:12px;line-height:1.55}.status{margin-top:13px;padding:6px 8px;font-size:10px;letter-spacing:.055em}

/* Docs */
.docs-grid{gap:44px}.docs-checks{gap:10px;margin:22px 0 26px}.docs-check{padding:13px;border-radius:12px;font-size:12.5px}.docs-mock-body{min-height:360px}

/* Release / pricing / FAQ */
.release-row{gap:20px}.release-card,.license-card{padding:30px;border-radius:21px}
.release-badge{min-width:66px;height:44px;font-size:13px}
.release-card h3,.license-card h3{margin:16px 0 8px;font-size:21px;line-height:1.25}.release-card p,.license-card p{font-size:13px;line-height:1.65}
.license-cards{gap:12px;margin-top:18px}.license-mini{padding:16px;border-radius:13px}.license-mini strong{font-size:13.5px}.license-mini span{margin-top:5px;font-size:11.5px}
.faq-grid{gap:14px}.faq{padding:21px;border-radius:16px}.faq h4{margin-bottom:8px;font-size:14px;line-height:1.4}.faq p{font-size:12.5px;line-height:1.65}
.final-cta{gap:32px;padding:40px 42px;border-radius:26px}.final-cta h2{font-size:31px;line-height:1.16;letter-spacing:-.035em}.final-cta p{margin-top:9px;font-size:13px;line-height:1.6}
.footer{padding:34px 0}.footer-copy,.footer-links a{font-size:11.5px}

@media(max-width:1180px){
  .hero-grid{gap:40px}.hero-stage{min-height:500px}
  .demo-grid{gap:18px}.demo-meta p{min-height:auto}
}
@media(max-width:900px){
  :root{--section-y:78px}
  .container{width:min(100% - 32px,1280px)}
  .hero{padding:126px 0 76px}.hero h1{font-size:clamp(46px,8vw,56px)}
  .story{padding:32px}.section-head{margin-bottom:34px}
  .story-copy h3,.dev-copy h3,.docs-copy h3{font-size:31px}
}
@media(max-width:640px){
  :root{--section-y:66px}
  .container{width:min(100% - 24px,1280px)}
  .hero{padding-top:112px}.hero h1{font-size:42px;line-height:1.06}.hero p{font-size:15px}
  .section-title{font-size:33px;line-height:1.1}
  .section-copy{font-size:14px}.section-head .right-note{font-size:12.5px}
  .story{padding:24px}.story-copy h3,.dev-copy h3,.docs-copy h3{font-size:28px}
  .demo-meta p{font-size:12.5px}.roadmap-intro h3{font-size:21px}
  .final-cta{padding:29px 23px}.final-cta h2{font-size:27px}
}
/* Remaining supporting labels — keep visible text readable. */
.feature-band li{font-size:11px!important;line-height:1.25!important;padding:6px 9px!important}
.capability-tabs span{font-size:11px!important;line-height:1.2!important;padding:8px 11px!important}
.cap-icon{font-size:11px!important}
.cap-count{font-size:10.5px!important;letter-spacing:.055em!important}
.visual-metric small{font-size:11px!important}

/* V5 — compact edition roadmap placed directly below the demo gallery */
.edition-strip{position:relative;overflow:hidden;padding:58px 0 62px;border-top:1px solid #e8edf5;border-bottom:1px solid #e3eaf4;background:radial-gradient(circle at 18% 5%,rgba(37,99,235,.10),transparent 32%),radial-gradient(circle at 82% 100%,rgba(20,184,166,.09),transparent 34%),linear-gradient(135deg,#f8fbff 0%,#f4f7ff 52%,#fbfdff 100%)}
.edition-strip:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(86,109,153,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(86,109,153,.035) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 92%)}
.edition-strip .container{position:relative;z-index:1}
.edition-strip-head{display:flex;align-items:end;justify-content:space-between;gap:36px;margin-bottom:28px}
.edition-strip-head h2{margin:7px 0 0;max-width:650px;font-family:Manrope,Inter,sans-serif;font-size:clamp(28px,3vw,40px);line-height:1.08;letter-spacing:-.038em;font-weight:720;color:#111b2f;text-wrap:balance}
.edition-strip-head p{max-width:410px;margin:0;color:#6b788c;font-size:13px;line-height:1.65}
.edition-icons{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.edition-chip{min-width:0;display:flex;align-items:center;gap:13px;padding:15px 16px;border:1px solid rgba(208,218,232,.95);border-radius:17px;background:rgba(255,255,255,.84);box-shadow:0 12px 34px rgba(25,45,78,.055);backdrop-filter:blur(14px);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.edition-chip:hover{transform:translateY(-3px);border-color:#c4d2e7;box-shadow:0 18px 42px rgba(25,45,78,.09)}
.edition-chip.current{border-color:#b8dfcc;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,252,246,.94));box-shadow:0 15px 38px rgba(16,185,129,.08)}
.edition-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:43px;height:43px;border:1px solid #e6ebf2;border-radius:12px;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.edition-logo img{display:block;max-width:27px;max-height:27px;object-fit:contain}
.edition-logo.pair{gap:4px;width:54px}
.edition-logo.pair img{max-width:21px;max-height:22px}
.edition-chip>div:last-child{min-width:0}
.edition-chip strong{display:block;overflow:hidden;text-overflow:ellipsis;color:#172237;font-size:13px;font-weight:740;letter-spacing:-.01em;white-space:nowrap}
.chip-status{display:inline-flex;align-items:center;margin-top:5px;font-size:10.5px;font-weight:700;line-height:1.25;white-space:nowrap}
.chip-status.available{color:#07835a}.chip-status.soon{color:#66758b}
.chip-status.available:before,.chip-status.soon:before{content:"";width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 10%,transparent)}

/* Keep the section transition tight: demos → editions → features. */
.demo-section{padding-bottom:76px}
.edition-strip + .feature-section{padding-top:92px}

@media(max-width:1180px){.edition-icons{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.edition-strip{padding:48px 0 52px}.edition-strip-head{display:block;margin-bottom:22px}.edition-strip-head p{margin-top:10px}.edition-icons{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.edition-chip{padding:13px 14px}.edition-logo{width:40px;height:40px}.edition-logo.pair{width:50px}.edition-strip + .feature-section{padding-top:76px}}
@media(max-width:420px){.edition-icons{grid-template-columns:1fr}.edition-chip strong{font-size:13.5px}}

/* =========================================================
   V6 — Vexlora preview refinement (2026-08-24)
   Requested showcase cleanup + readability pass.
   ========================================================= */

/* Header: clearer product identity and easier-to-read navigation. */
.brand strong{font-size:16px;font-weight:800;color:#172033;letter-spacing:-.025em}
.brand small{font-size:12px;line-height:1.25;color:#5f6f84;font-weight:650}
.desktop-nav{gap:4px}
.desktop-nav a{padding:11px 12px;color:#45566f;font-size:14px;font-weight:700}
.desktop-nav a:hover,.desktop-nav a.active{color:#1d4ed8;background:#edf4ff}
.mobile-menu a{color:#45566f;font-size:14px}
.nav-actions .btn{font-size:13px}

/* General preview typography: the showcase is intentionally more readable than the app UI. */
.hero p{font-size:17px;line-height:1.7;color:#c0ccdc}
.hero-proof span{font-size:12.5px;color:#a6b6ca}
.tech-lead{font-size:12px;color:#68778c}
.tech-item strong{font-size:15px}
.tech-item span{font-size:12.5px;color:#748399}
.kicker{font-size:12px}
.section-copy{font-size:16px;line-height:1.72;color:#5e6e83}
.story-copy>p,.dev-copy p,.docs-copy p{font-size:16px;line-height:1.72;color:#5e6f84}
.story-point b{font-size:14px}
.story-point span{font-size:13.5px;color:#66768b}
.feature-band h4{font-size:16px}
.feature-band p{font-size:13.5px!important;color:#65758a}
.feature-band li{font-size:12px!important}
.capability-tabs span{font-size:12px!important}
.cap-card h4{font-size:15px}
.cap-card p{font-size:13.5px;line-height:1.6;color:#68788d}
.cap-card .cap-top,.cap-card small{font-size:11.5px!important}
.cap-count{font-size:11px!important}
.coverage-main p{font-size:15px}
.coverage-stat span{font-size:12.5px}
.flow-card small{font-size:11.5px}
.flow-card strong{font-size:15px}
.flow-card p{font-size:13px}
.dev-list div{font-size:13.5px}
.tree{font-size:12px}.code{font-size:13px}.code-head span{font-size:12px}.code-head i{font-size:11px}
.docs-check{font-size:13.5px}
.release-card p,.license-card p{font-size:14px}
.license-mini strong{font-size:14px}.license-mini span{font-size:12.5px}
.faq h4{font-size:15px}.faq p{font-size:13.5px;color:#68778b}
.final-cta p{font-size:14px}
.footer-copy,.footer-links a{font-size:12.5px}

/* Demo showcase: no category filter row, no helper note, no hover text, no descriptive copy under cards. */
.demo-section .section-head{margin-bottom:30px}
.demo-grid{gap:22px}
.demo-card{display:flex;flex-direction:column}
.demo-visual{flex:1;padding:15px 15px 0}
.demo-meta{display:flex;align-items:center;justify-content:center;min-height:58px;padding:15px 14px 17px;text-align:center}
.demo-meta h3{margin:0;color:#172237;font-size:16px;font-weight:760;letter-spacing:-.02em}
.demo-hover{display:none!important}
.demo-card:hover .demo-screen img{transform:scale(1.018)}
.demo-screen img{transition:transform .35s ease}

/* Animated 20th filler card after the 19 real dashboards. */
.demo-coming-soon{position:relative;min-height:100%;border:0;background:linear-gradient(145deg,#1d4ed8 0%,#4f46e5 48%,#0f766e 112%);box-shadow:0 20px 48px rgba(55,65,180,.20)}
.demo-coming-soon:hover{border:0;box-shadow:0 28px 65px rgba(55,65,180,.28)}
.coming-soon-visual{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;min-height:100%;height:100%;padding:36px 24px;text-align:center;color:#fff;background:linear-gradient(145deg,rgba(29,78,216,.96),rgba(79,70,229,.95) 52%,rgba(15,118,110,.92))}
.coming-soon-visual:before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:30px 30px;mask-image:linear-gradient(to bottom,black,transparent)}
.coming-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(2px);animation:comingFloat 5.8s ease-in-out infinite alternate}
.coming-orb.orb-a{width:170px;height:170px;left:-45px;top:-42px;background:rgba(125,211,252,.22)}
.coming-orb.orb-b{width:150px;height:150px;right:-38px;bottom:-48px;background:rgba(94,234,212,.18);animation-delay:-2.2s}
.coming-soon-copy{animation:comingPulse 3.4s ease-in-out infinite}
.coming-soon-copy small{display:block;color:#dbeafe;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.13em}
.coming-soon-copy strong{display:block;margin-top:8px;font-family:var(--font-display);font-size:30px;line-height:1;font-weight:800;letter-spacing:-.035em;background:linear-gradient(90deg,#fff,#bfdbfe,#ccfbf1,#fff);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:comingShine 3.8s linear infinite}
.coming-soon-copy span{display:block;max-width:220px;margin:11px auto 0;color:#d7e6fb;font-size:13px;line-height:1.55}
@keyframes comingFloat{from{transform:translate3d(-5px,-6px,0) scale(.95)}to{transform:translate3d(12px,10px,0) scale(1.07)}}
@keyframes comingPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes comingShine{to{background-position:-220% 0}}

/* Product editions: one centered message, without the extra right-side paragraph. */
.edition-strip-head{display:block;margin-bottom:30px;text-align:center}
.edition-strip-head>div{max-width:780px;margin-inline:auto}
.edition-strip-head h2{max-width:none;margin-left:auto;margin-right:auto}
.edition-strip-head .kicker{text-align:center}
.edition-chip strong{font-size:14px}
.chip-status{font-size:11.5px}

/* Documentation section now uses an actual rendered documentation preview. */
.docs-preview{position:relative;overflow:hidden;display:block;border:1px solid #d9e3f0;border-radius:22px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.14);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.docs-preview:hover{transform:translateY(-4px);border-color:#bfd2ef;box-shadow:0 30px 78px rgba(15,23,42,.18)}
.docs-preview img{width:100%;aspect-ratio:1.52/1;object-fit:cover;object-position:top;background:#fff}
.docs-preview span{position:absolute;right:16px;bottom:16px;padding:10px 13px;border:1px solid rgba(255,255,255,.34);border-radius:11px;background:rgba(7,19,38,.86);color:#fff;font-size:12.5px;font-weight:750;box-shadow:0 10px 24px rgba(2,6,23,.2);backdrop-filter:blur(10px)}

/* Footer identity remains compact but readable. */
.footer .brand strong{font-size:15px}
.footer .brand small{font-size:11.5px}

@media(max-width:1180px){
  .desktop-nav a{font-size:13px}
  .coming-soon-visual{min-height:360px}
}
@media(max-width:900px){
  .section-copy,.story-copy>p,.dev-copy p,.docs-copy p{font-size:15px}
  .cap-card p{font-size:13px}
}
@media(max-width:640px){
  .hero p{font-size:16px}
  .brand strong{font-size:15px}
  .demo-meta h3{font-size:15px}
  .coming-soon-visual{min-height:340px}
  .docs-preview span{right:12px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  .coming-orb,.coming-soon-copy,.coming-soon-copy strong{animation:none!important}
}