:root { --ink:#151b21; --paper:#f6f6f3; --line:#d9ddd9; --muted:#6b746f; --blue:#3657df; --blue-dark:#1b2f80; --mint:#b7f5cf; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; margin:0; } a { color:inherit; } img { display:block; max-width:100%; } h1,h2,h3,p { margin-top:0; } h1,h2 { letter-spacing:-.075em; line-height:.92; }
.skip-link { background:#fff; left:1rem; padding:.65rem .8rem; position:fixed; top:-4rem; z-index:20; }.skip-link:focus { top:1rem; }.site-header,main,footer { margin:auto; width:min(1320px,calc(100% - 48px)); }.site-header { align-items:center; border-bottom:1px solid var(--line); display:flex; height:80px; justify-content:space-between; }.brand { align-items:center; display:inline-flex; font-size:.78rem; font-weight:840; gap:.55rem; letter-spacing:.16em; text-decoration:none; }.brand-dot { align-items:center; background:var(--ink); border-radius:50%; color:var(--mint); display:inline-flex; font-family:Georgia,serif; font-size:.72rem; height:24px; justify-content:center; letter-spacing:0; width:24px; } nav { display:flex; gap:1.9rem; margin-left:auto; margin-right:2rem; } nav a,.header-note { color:#747c77; font-size:.73rem; font-weight:760; text-decoration:none; }.header-note { color:var(--blue); font-size:.62rem; letter-spacing:.13em; }
.hero { border-bottom:1px solid var(--line); display:grid; grid-template-columns:.93fr 1.07fr; min-height:min(700px,calc(100vh - 80px)); }.hero-copy { align-self:center; max-width:620px; padding:5rem 0 5rem clamp(0rem,3vw,3.7rem); }.eyebrow { color:var(--blue); font-size:.65rem; font-weight:850; letter-spacing:.15em; margin-bottom:1.35rem; }.hero h1 { font-size:clamp(4.35rem,8vw,8.4rem); margin-bottom:1.65rem; }.hero h1 em { color:var(--blue); font-family:Georgia,"Times New Roman",serif; font-weight:500; }.lede { color:#5b6560; font-size:1.06rem; line-height:1.7; max-width:480px; }.hero-actions { align-items:center; display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:2.4rem; }.primary-link { background:var(--ink); border-radius:999px; color:#fff; font-size:.82rem; font-weight:790; padding:.95rem 1.15rem; text-decoration:none; }.primary-link span,.text-link span { margin-left:.45rem; }.primary-link:hover { background:var(--blue); }.text-link { border-bottom:1px solid #9ba29d; font-size:.8rem; font-weight:760; padding-bottom:.25rem; text-decoration:none; }.hero-product { background:radial-gradient(circle at 53% 44%,rgba(130,226,239,.83),transparent 18%),radial-gradient(circle at 54% 57%,rgba(58,88,227,.6),transparent 42%),#152139; isolation:isolate; overflow:hidden; position:relative; }.hero-product::before { background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size:48px 48px; content:""; inset:0; opacity:.45; position:absolute; }.hero-product img { filter:drop-shadow(0 32px 25px rgba(0,0,0,.6)); height:76%; left:50%; object-fit:contain; position:absolute; top:52%; transform:translate(-50%,-50%) rotate(5deg); width:62%; z-index:2; }.hero-index { color:rgba(255,255,255,.18); font-size:clamp(10rem,19vw,18rem); font-weight:850; letter-spacing:-.13em; line-height:1; position:absolute; right:7%; top:5%; }.hero-caption { bottom:9%; color:rgba(255,255,255,.78); font-size:.62rem; font-weight:800; left:9%; letter-spacing:.15em; line-height:1.55; position:absolute; z-index:3; }.product-disc { border:1px solid rgba(183,245,207,.6); border-radius:50%; height:67%; position:absolute; right:-17%; top:14%; width:67%; }
.introduction { align-items:end; display:grid; gap:3rem; grid-template-columns:.72fr 1.28fr; margin:auto; max-width:1110px; padding:clamp(6rem,13vw,12rem) 0; }.introduction h2 { font-size:clamp(2.9rem,5.3vw,5.6rem); margin-bottom:1.45rem; }.introduction p:last-child { color:#59635d; font-size:1.04rem; line-height:1.75; margin:0; max-width:570px; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); margin:auto; max-width:1160px; }.feature-grid article { border-top:1px solid var(--line); min-height:260px; padding:1.15rem 1.4rem 1.4rem 0; }.feature-grid article + article { padding-left:1.4rem; }.feature-grid article:last-child { padding-right:0; }.feature-grid span { color:var(--blue); font-size:.67rem; font-weight:830; letter-spacing:.12em; }.feature-grid h3 { font-size:1.14rem; letter-spacing:-.04em; margin:6.3rem 0 .65rem; }.feature-grid p { color:var(--muted); font-size:.84rem; line-height:1.6; margin:0; max-width:260px; }
.editorial-panel { align-items:center; background:#e7e8e4; display:grid; gap:clamp(2rem,7vw,8rem); grid-template-columns:1fr .85fr; margin-top:clamp(6rem,12vw,11rem); padding:clamp(1.5rem,4vw,4rem); }.editorial-object { aspect-ratio:1.13; background:radial-gradient(circle at 51% 46%,rgba(165,247,204,.45),transparent 17%),radial-gradient(circle at 54% 55%,rgba(54,87,223,.53),transparent 43%),#182338; overflow:hidden; position:relative; }.editorial-object::after { background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:42px 42px; content:""; inset:0; position:absolute; }.editorial-object span { color:rgba(255,255,255,.79); font-size:.61rem; font-weight:800; left:1.35rem; letter-spacing:.14em; position:absolute; top:1.25rem; z-index:2; }.editorial-object img { filter:drop-shadow(0 28px 25px rgba(0,0,0,.55)); height:78%; left:50%; object-fit:contain; position:absolute; top:53%; transform:translate(-50%,-50%) rotate(-5deg); width:60%; z-index:1; }.editorial-copy { max-width:410px; }.editorial-copy h2 { font-size:clamp(2.65rem,4.6vw,4.8rem); margin-bottom:1.5rem; }.editorial-copy p:last-child { color:#58625c; line-height:1.72; }
.plugin { background:var(--blue-dark); color:#fff; display:grid; gap:3rem; grid-template-columns:1fr 310px; margin-top:clamp(6rem,12vw,11rem); padding:clamp(2rem,6vw,5.1rem); }.plugin .eyebrow { color:var(--mint); }.plugin h2 { font-size:clamp(2.8rem,5vw,5.2rem); margin-bottom:1.4rem; }.plugin-copy > p:last-child { color:#c2cee7; line-height:1.72; max-width:575px; }.release-card { background:#f4f6f2; color:var(--ink); display:flex; flex-direction:column; min-height:255px; padding:1.45rem; }.release-label { color:var(--blue); font-size:.62rem; font-weight:850; letter-spacing:.13em; }.release-card strong { font-size:1.58rem; letter-spacing:-.06em; margin:auto 0 .25rem; }.release-card small { color:#65706a; font-size:.76rem; }.download { align-items:center; border-radius:999px; display:inline-flex; font-size:.77rem; font-weight:800; justify-content:center; min-height:44px; text-decoration:none; }.button-disabled { background:#e1e4df; color:#7a827d; cursor:not-allowed; margin-top:1.4rem; pointer-events:none; }.release-notes { color:#3451b9; font-size:.74rem; margin-top:1rem; text-align:center; }.guide { align-items:end; border-bottom:1px solid var(--line); display:grid; gap:4rem; grid-template-columns:.75fr 1.25fr; margin:auto; max-width:1110px; padding:clamp(6rem,12vw,10rem) 0; }.guide h2 { font-size:clamp(2.75rem,4.9vw,5rem); margin:0; }.guide ol { border-top:1px solid var(--line); list-style:none; margin:0; padding:0; }.guide li { border-bottom:1px solid var(--line); display:grid; gap:.8rem; grid-template-columns:45px 1fr 1.4fr; padding:1.15rem 0; }.guide li span { color:var(--blue); font-size:.68rem; font-weight:850; letter-spacing:.11em; }.guide li h3 { font-size:.95rem; letter-spacing:-.035em; margin:0; }.guide li p { color:var(--muted); font-size:.82rem; line-height:1.55; margin:0; }.support { align-items:end; border-bottom:1px solid var(--line); display:grid; gap:3rem; grid-template-columns:.72fr 1.28fr; margin:auto; max-width:1110px; padding:clamp(6rem,12vw,11rem) 0; }.support h2 { font-size:clamp(2.75rem,4.9vw,5rem); margin-bottom:1.2rem; }.support p:last-child { color:#606a64; line-height:1.7; margin:0; max-width:530px; } footer { align-items:center; color:#717973; display:flex; font-size:.72rem; justify-content:space-between; min-height:94px; } footer .brand { color:var(--ink); }
@media (max-width:850px) { .hero,.editorial-panel,.plugin,.introduction,.guide,.support { grid-template-columns:1fr; }.hero-copy { padding:4.5rem 2rem 3rem; }.hero-product { min-height:490px; }.hero-product img { height:82%; width:64%; }.introduction,.guide,.support { max-width:690px; }.editorial-copy { max-width:570px; }.plugin .release-card { max-width:360px; } }
@media (max-width:640px) { .site-header,main,footer { width:min(100% - 28px,1320px); }.site-header { height:70px; }.site-header nav,.header-note { display:none; }.hero { margin:0 -14px; }.hero-copy { padding:3.5rem 1.4rem 2.4rem; }.hero h1 { font-size:clamp(4rem,18vw,5.4rem); }.hero-product { min-height:390px; }.hero-product img { height:86%; width:73%; }.introduction { gap:1.4rem; padding:5.5rem 0; }.introduction h2,.editorial-copy h2,.guide h2,.support h2 { font-size:3rem; }.feature-grid { grid-template-columns:1fr; }.feature-grid article,.feature-grid article + article { min-height:0; padding:1.1rem 0 1.5rem; }.feature-grid h3 { margin-top:2rem; }.editorial-panel { gap:2.5rem; margin:5.5rem -14px 0; padding:1.4rem; }.editorial-object { aspect-ratio:1; }.plugin { margin:5.5rem -14px 0; padding:1.5rem; }.guide { gap:2.2rem; padding:5.5rem 0; }.guide li { gap:.6rem; grid-template-columns:36px 1fr; }.guide li p { grid-column:2; }.support { gap:1.4rem; padding:5.5rem 0; } footer { align-items:flex-start; flex-direction:column; gap:.45rem; padding:1.5rem 0; } }