:root {
    --ink:#172329;
    --muted:#69747b;
    --blue:#2563eb;
    --green:#07976c;
    --line:#e6eaed;
    --display:'Plus Jakarta Sans',sans-serif;
    --body:'Inter',sans-serif
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:115px
}
body {
    margin:0;
    color:var(--ink);
    font:15px/1.7 var(--body);
    background:#fff;
    -webkit-font-smoothing:antialiased
}
a {
    color:inherit;
    text-decoration:none
}
button {
    font:inherit;
    cursor:pointer
}
a,button,summary {
    -webkit-tap-highlight-color:transparent
}
button:focus-visible,a:focus-visible,summary:focus-visible {
    outline:3px solid #2563eb;
    outline-offset:6px
}
::selection {
    background:#c8f0df
}
h1,h2,h3,p {
    margin:0
}
h1,h2,h3 {
    font-family:var(--display)
}
[hidden] {
    display:none!important
}
.wrap {
    width:min(1200px,calc(100% - 96px));
    margin-inline:auto
}
.pill {
    background:#fff;
    border:1px solid #e9ecee;
    border-radius:100px;
    box-shadow:0 5px 20px #182e4510
}
.site-header {
    position:absolute;
    top:24px;
    left:0;
    right:0;
    z-index:10;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px
}
.brand {
    display:inline-flex;
    align-items:center;
    font:800 22px var(--display);
    letter-spacing:-1px;
    white-space:nowrap
}
.brand.pill {
    padding:8px 23px 8px 9px;
    min-height:58px
}
.brand-mark {
    width:39px;
    height:39px;
    margin-right:10px;
    border-radius:50%;
    background:var(--blue);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font:bold 33px var(--display);
    letter-spacing:-4px;
    padding-right:4px;
    padding-bottom:5px
}
.brand-mark span {
    color:#9eebce;
    margin-left:1px
}
.brand-light {
    font-weight:500;
    color:#5c6970
}
.desktop-nav {
    display:flex;
    align-items:center;
    gap:26px;
    padding:18px 28px;
    font-size:12px;
    font-weight:550
}
.desktop-nav a:hover,.desktop-nav .active {
    color:var(--blue)
}
.header-actions {
    display:flex;
    align-items:center;
    gap:19px;
    padding:7px 8px 7px 22px;
    font-size:12px;
    font-weight:600
}
.small-cta {
    background:var(--ink);
    color:#fff;
    border-radius:40px;
    padding:11px 17px
}
.small-cta span {
    padding-left:10px
}
.menu-toggle {
    display:none;
    border:1px solid var(--line);
    width:48px;
    height:48px;
    padding:15px
}
.menu-toggle span {
    display:block;
    height:2px;
    background:var(--ink);
    margin:5px 0
}
.mobile-menu {
    position:absolute;
    right:0;
    top:70px;
    width:min(320px,100%);
    padding:16px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 15px 30px #1225371a
}
.mobile-menu a {
    display:block;
    padding:10px 16px;
    border-radius:8px
}
.mobile-menu a:hover {
    background:#f2f6fa
}
.skip-link {
    position:fixed;
    top:-100px;
    left:20px;
    z-index:30;
    background:#fff;
    padding:12px 20px
}
.skip-link:focus {
    top:10px
}
.hero {
    position:relative;
    overflow:hidden;
    padding:160px 0 65px;
    background:radial-gradient(#dce3e9 1px,transparent 1px),linear-gradient(125deg,#f4f8fc,#fafcfb 50%,#f3faf7);
    background-size:28px 28px,auto
}
.hero-glow {
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 25% 22%,#c8dfff55,transparent 40%),radial-gradient(ellipse at 80% 48%,#b5ecda4a,transparent 35%);
    pointer-events:none
}
.hero-content {
    position:relative;
    text-align:center
}
.eyebrow {
    font-size:10px;
    letter-spacing:1.8px;
    font-weight:650
}
.hero-badge {
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:7px 15px;
    background:#ffffffcc;
    border:1px solid #dce5e6;
    border-radius:40px;
    box-shadow:0 2px 3px #17232904;
    font-size:11px;
    letter-spacing:.1px;
    font-weight:500
}
.status-dot,.tiny-dot {
    width:6px;
    height:6px;
    background:#1caa7d;
    border-radius:50%;
    display:inline-block;
    box-shadow:0 0 0 3px #15a77712
}
.hero h1 {
    font-size:clamp(48px,5.8vw,78px);
    line-height:1.1;
    font-weight:750;
    letter-spacing:-4px;
    margin:25px auto 22px
}
.gradient-text {
    background:linear-gradient(110deg,#2763ee 8%,#1780b7 52%,#069e6c 95%);
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent
}
.hero-description {
    font-size:16px;
    line-height:1.85;
    color:#64717b;
    font-weight:400
}
.button-row {
    display:flex;
    justify-content:center;
    gap:13px;
    margin-top:29px
}
.button {
    display:inline-flex;
    gap:25px;
    align-items:center;
    justify-content:center;
    border-radius:50px;
    padding:14px 25px;
    font-size:13px;
    font-weight:550;
    transition:transform .2s,box-shadow .2s
}
.button:hover {
    transform:translateY(-3px);
    box-shadow:0 8px 20px #153c4920
}
.button-dark {
    color:#fff;
    background:#172329
}
.button-gradient {
    color:#fff;
    background:linear-gradient(110deg,#2865ed,#069e77)
}
.play-icon {
    font-size:20px;
    line-height:1
}
.hero-note {
    margin-top:17px;
    font-size:10px;
    color:#7f8a90
}
.product-stage {
    position:relative;
    max-width:1000px;
    margin:55px auto 0;
    padding:0 20px 15px
}
.app-preview {
    border:1px solid #dfe6e8;
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 25px 65px -25px #123d4a35,0 0 0 7px #ffffff65;
    text-align:left
}
.preview-top {
    height:34px;
    border-bottom:1px solid #e9edef;
    background:#fafbfc;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
    font-size:8px;
    color:#99a2aa
}
.window-dots {
    display:flex;
    gap:4px
}
.window-dots i {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#dfe5e9
}
.window-dots i:first-child {
    background:#f2aaa5
}
.window-dots i:nth-child(2) {
    background:#e9d09a
}
.window-dots i:last-child {
    background:#a4d5ba
}
.preview-lock {
    font-size:7px
}
.preview-body {
    display:grid;
    grid-template-columns:173px 1fr;
    min-height:352px
}
.preview-sidebar {
    position:relative;
    background:#f9fafb;
    padding:20px 13px;
    border-right:1px solid #edf0f2
}
.preview-brand {
    display:flex;
    align-items:center;
    font-size:13px;
    font-weight:700;
    letter-spacing:-.5px
}
.mini-mark {
    background:#2265ee;
    border-radius:7px;
    color:#fff;
    font-size:17px;
    width:24px;
    height:24px;
    text-align:center;
    line-height:24px;
    margin-right:7px
}
.workspace-label {
    font-size:6px;
    letter-spacing:1.1px;
    color:#9aa5ae;
    margin-top:30px;
    margin-bottom:9px
}
.workspace-item {
    display:flex;
    gap:6px;
    align-items:center;
    font-size:8px;
    font-weight:500;
    background:#fff;
    border:1px solid #e7ecef;
    border-radius:6px;
    padding:7px
}
.workspace-item>span:last-child {
    margin-left:auto
}
.workspace-avatar {
    font-size:7px;
    border-radius:4px;
    background:#dfe9fd;
    color:#3168c1;
    padding:2px 5px
}
.preview-nav {
    display:flex;
    gap:9px;
    align-items:center;
    padding:8px 10px;
    border-radius:5px;
    font-size:9px;
    color:#88929c;
    margin-top:8px
}
.preview-nav.selected {
    background:#eaf0fd;
    color:#3169d2;
    font-weight:600;
    margin-top:20px
}
.preview-nav>span:last-child:not(:first-of-type) {
    margin-left:auto;
    font-size:7px
}
.preview-sidebar-bottom {
    position:absolute;
    bottom:17px;
    display:flex;
    gap:7px;
    align-items:center;
    font-size:8px
}
.avatar {
    border:2px solid #fff;
    background:#e5e3d9;
    border-radius:50%;
    padding:5px;
    font-size:7px;
    color:#656455
}
.preview-sidebar-bottom small {
    display:block;
    font-size:6px;
    color:#8d98a1
}
.preview-main {
    padding:23px 26px 12px;
    min-width:0
}
.preview-breadcrumb {
    font-size:7px;
    color:#8e98a1
}
.preview-breadcrumb span {
    padding:0 7px;
    color:#c6cbd0
}
.preview-heading {
    margin-top:15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px
}
.preview-heading h2 {
    font-size:19px;
    font-weight:650;
    letter-spacing:-.7px
}
.preview-heading p {
    font-size:8px;
    color:#929aa2;
    margin-top:3px
}
.preview-new {
    font-size:8px;
    background:#2164e8;
    color:#fff;
    padding:7px 12px;
    border-radius:5px;
    white-space:nowrap
}
.preview-tabs {
    display:flex;
    gap:18px;
    align-items:center;
    border-bottom:1px solid #edf0f2;
    margin-top:19px;
    font-size:8px;
    color:#98a1a9;
    white-space:nowrap
}
.preview-tabs>span {
    padding-bottom:9px
}
.preview-tabs .selected {
    color:#3169d2;
    border-bottom:2px solid #3169d2
}
.preview-tabs b {
    font-size:6px;
    background:#eaf0fd;
    border-radius:3px;
    padding:2px 4px;
    margin-left:3px
}
.preview-search {
    margin-left:auto
}
.story-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:13px;
    margin-top:15px
}
.story-card {
    border:1px solid #e8ecef;
    border-radius:7px;
    overflow:hidden
}
.story-art {
    height:112px;
    position:relative;
    overflow:hidden
}
.art-one {
    background:#e8efe4;
    padding:12px 15px
}
.art-one>span {
    position:relative;
    z-index:1;
    font:600 16px/1.2 var(--display);
    letter-spacing:-.6px;
    color:#2e4b39
}
.art-one em {
    font-style:normal;
    color:#70896b
}
.art-orbit {
    position:absolute;
    width:90px;
    height:90px;
    border:20px solid #b8cbb0;
    border-radius:50%;
    right:-20px;
    bottom:-35px
}
.art-two {
    background:#eee9e1;
    padding:14px
}
.art-two>span {
    position:relative;
    z-index:2;
    font-size:11px;
    line-height:1.35;
    font-weight:650;
    display:block;
    letter-spacing:1px;
    color:#796657
}
.art-two b {
    font:italic 18px Georgia,serif;
    letter-spacing:-.4px;
    font-weight:400
}
.arch {
    position:absolute;
    width:64px;
    height:100px;
    border-radius:40px 40px 0 0;
    transform:rotate(25deg);
    right:3px;
    bottom:-30px
}
.arch-back {
    background:#c8b4a0;
    right:-15px;
    bottom:-10px
}
.arch-front {
    background:#d7c8b8
}
.art-three {
    background:#dfe8f4;
    display:flex;
    align-items:center;
    justify-content:center
}
.art-three>span {
    font:500 21px/1.15 Georgia,serif;
    color:#304f78;
    position:relative;
    z-index:1;
    letter-spacing:-.6px
}
.art-three em {
    font-weight:400
}
.art-lines {
    position:absolute;
    width:170px;
    height:170px;
    border:1px solid #b4c9e6;
    border-radius:50%;
    left:-90px;
    bottom:-50px;
    box-shadow:0 0 0 12px #b4c9e622,0 0 0 24px #b4c9e622,0 0 0 36px #b4c9e622
}
.story-info {
    padding:11px
}
.tag {
    font-size:6px;
    border-radius:3px;
    padding:3px 5px;
    font-weight:500
}
.tag-green {
    color:#23916f;
    background:#edf8f1
}
.tag-blue {
    color:#5c78b2;
    background:#eff4fd
}
.tag-gray {
    color:#8a9299;
    background:#f1f3f5
}
.story-info h3 {
    font-size:10px;
    line-height:1.5;
    letter-spacing:-.1px;
    margin:9px 0 8px;
    font-weight:650
}
.story-info p {
    font-size:6px;
    color:#9ba1a6
}
.story-info p span {
    padding:0 4px
}
.preview-caption {
    font-size:6px;
    color:#9ca5ad;
    margin-top:10px
}
.floating-note {
    position:absolute;
    display:flex;
    gap:10px;
    align-items:center;
    text-align:left;
    z-index:2;
    background:#fff;
    border:1px solid #e6ecee;
    border-radius:12px;
    box-shadow:0 8px 30px #1723290e;
    padding:12px 16px
}
.floating-note strong {
    display:block;
    font-size:10px;
    font-weight:600
}
.floating-note div>span {
    display:block;
    font-size:8px;
    color:#8a959e;
    margin-top:2px
}
.note-published {
    left:-29px;
    top:94px;
    transform:rotate(-5deg)
}
.check-circle {
    background:#e1f5ec;
    color:#22a174;
    width:29px;
    height:29px;
    border-radius:50%;
    display:grid;
    place-items:center
}
.note-api {
    bottom:-4px;
    right:-24px;
    transform:rotate(3deg)
}
.code-icon {
    background:#edf2ff;
    color:#4c76d6;
    padding:5px 7px;
    border-radius:7px;
    font-size:12px
}
.connection-dot {
    width:6px;
    height:6px;
    background:#26b082;
    border-radius:50%;
    margin-left:12px
}
.stack-strip {
    text-align:center;
    padding:38px 0 44px;
    border-bottom:1px solid var(--line)
}
.stack-strip>span {
    font-size:8px;
    letter-spacing:1.7px;
    color:#8d979e
}
.stack-names {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:20px;
    color:#58666f
}
.stack-names>span {
    font-family:var(--display);
    font-size:21px;
    font-weight:700;
    letter-spacing:-.8px
}
.stack-names i {
    font-style:normal;
    font-weight:400;
    color:#89939b
}
.stack-names>span:last-child {
    font-size:11px;
    font-weight:500;
    letter-spacing:0
}
.stack-names>span:last-child i {
    margin-left:10px
}
.section {
    padding:100px 0
}
.section-label {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#74818a;
    margin-bottom:19px;
    font-size:9px
}
.tiny-dot {
    width:5px;
    height:5px;
    background:var(--blue);
    box-shadow:none
}
h2 {
    font-size:43px;
    letter-spacing:-1.9px;
    line-height:1.2;
    font-weight:650
}
.section-intro {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:80px;
    margin-bottom:40px
}
.section-intro>p {
    max-width:370px;
    font-size:13px;
    line-height:1.95;
    color:var(--muted);
    padding-bottom:3px
}
.feature-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}
.feature-card {
    padding:28px 26px 0;
    background:#f8fafb;
    border:1px solid #eaf0f2;
    border-radius:20px;
    overflow:hidden;
    position:relative
}
.feature-icon {
    display:grid;
    place-items:center;
    width:43px;
    height:43px;
    border:1px solid #e5eaee;
    border-radius:13px;
    background:#fff;
    box-shadow:0 4px 8px #182b3d04;
    font-size:25px;
    margin-bottom:24px
}
.blue {
    color:#3678ed
}
.mint {
    color:#16a080
}
.violet {
    color:#8970cf
}
.feature-number {
    position:absolute;
    top:34px;
    right:27px;
    font-size:10px;
    color:#b0b8be;
    font-family:var(--display)
}
.feature-card h3 {
    font-size:16px;
    letter-spacing:-.5px;
    font-weight:650;
    margin-bottom:11px
}
.feature-card>p {
    color:#7d8890;
    font-size:12px;
    line-height:1.95;
    min-height:94px
}
.feature-card>a {
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:10px;
    font-weight:600;
    margin-top:17px
}
.feature-card>a:hover {
    color:var(--blue)
}
.mini-workspaces,.mini-editor,.mini-schedule {
    height:136px;
    margin-top:28px;
    padding:15px;
    background:#fff;
    border:1px solid #e5eaef;
    border-bottom:0;
    border-radius:10px 10px 0 0;
    box-shadow:0 8px 20px #142a3b05
}
.mini-workspaces>div {
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:12px;
    font-size:8px;
    font-weight:600
}
.mini-workspaces small {
    display:block;
    font-weight:400;
    font-size:6px;
    color:#a0a9b0
}
.project-avatar {
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    font-size:11px;
    border-radius:7px
}
.lavender {
    background:#eeebfc;
    color:#8775b1
}
.peach {
    background:#f8ecdf;
    color:#c19369
}
.mini-count {
    margin-left:auto;
    color:#9aa4ad;
    font-size:6px;
    font-weight:400
}
.mini-editor {
    position:relative;
    padding:0 15px
}
.editor-toolbar {
    display:flex;
    align-items:center;
    gap:16px;
    padding:8px 0;
    border-bottom:1px solid #edf0f2;
    font-size:8px;
    color:#737f8a
}
.mini-editor>strong {
    display:block;
    font-size:10px;
    font-weight:600;
    margin:9px 0
}
.fake-line {
    height:4px;
    background:#e9edf0;
    width:83%;
    margin-bottom:6px;
    border-radius:2px
}
.fake-line.long {
    width:96%
}
.fake-line.short {
    width:55%
}
.editor-caret {
    display:block;
    position:absolute;
    bottom:20px;
    left:60%;
    height:11px;
    width:1px;
    background:var(--blue)
}
.mini-schedule>div:first-child {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:7px;
    font-weight:600
}
.mini-schedule small {
    font-size:6px;
    font-weight:400;
    display:block;
    color:#9ba5ad;
    margin-top:2px
}
.calendar-icon {
    border:1px solid #e7eaf5;
    border-radius:5px;
    display:block;
    text-align:center;
    width:31px;
    color:#8a86b0;
    font-size:5px;
    line-height:1.6;
    background:#f7f5fc
}
.calendar-icon strong {
    display:block;
    font-size:14px;
    color:#5e6584
}
.schedule-check {
    margin-left:auto;
    color:#26aa85;
    background:#e9f7f1;
    border-radius:50%;
    width:17px;
    height:17px;
    text-align:center;
    font-size:9px
}
.schedule-track {
    height:4px;
    background:#edf1f5;
    border-radius:2px;
    margin-top:20px
}
.schedule-track>span {
    display:block;
    height:4px;
    width:80%;
    background:linear-gradient(90deg,#aec4f5,#6bccac);
    border-radius:2px
}
.mini-schedule>p {
    display:flex;
    justify-content:space-between;
    font-size:6px;
    color:#a2aab0;
    margin-top:6px
}
.mini-schedule b {
    color:#38a282;
    font-weight:500
}
.workflow-section {
    background:#f7faf9;
    border-block:1px solid #edf1ef
}
.workflow-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:110px;
    align-items:center
}
.section-copy {
    font-size:13px;
    color:var(--muted);
    line-height:1.95;
    max-width:380px;
    margin-top:23px
}
.text-link {
    display:inline-flex;
    align-items:center;
    gap:25px;
    margin-top:26px;
    font-size:11px;
    font-weight:600;
    border-bottom:1px solid #d6dfe3;
    padding-bottom:7px
}
.text-link:hover {
    color:var(--blue)
}
.steps article {
    display:flex;
    gap:23px;
    padding:25px 0;
    border-bottom:1px solid #e3e9e6
}
.steps article:first-child {
    padding-top:0
}
.steps article:last-child {
    border-bottom:0;
    padding-bottom:0
}
.step-number {
    flex-shrink:0;
    width:36px;
    height:36px;
    border:1px solid #e0e8e4;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:10px;
    color:#83958b;
    background:#fff
}
.steps h3 {
    font-size:16px;
    letter-spacing:-.4px;
    font-weight:600;
    margin-bottom:8px
}
.steps p {
    font-size:12px;
    line-height:1.9;
    color:#7a8880;
    max-width:340px
}
.developer-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center
}
.developer-grid h2 {
    font-size:40px
}
.check-list {
    padding:0;
    list-style:none;
    margin:23px 0 0
}
.check-list li {
    font-size:11px;
    color:#6b7b80;
    margin-bottom:12px;
    display:flex;
    gap:10px;
    align-items:center
}
.check-list li:before {
    content:'✓';
    color:#199c77;
    background:#edf8f2;
    border-radius:50%;
    width:17px;
    height:17px;
    display:grid;
    place-items:center;
    font-size:9px
}
.code-window {
    background:#122027;
    border-radius:17px;
    color:#c1cfd7;
    box-shadow:0 20px 45px -15px #1b354433;
    overflow:hidden;
    min-width:0;
    border:1px solid #26363f;
    transform:rotate(1deg)
}
.code-header {
    padding:15px 20px;
    border-bottom:1px solid #ffffff0e;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:10px;
    color:#abbcc8
}
.code-header>div {
    display:flex;
    gap:10px;
    align-items:center
}
.code-file-icon {
    color:#73a7d7;
    font-size:12px
}
.code-header button {
    font-size:9px;
    color:#8a9daa;
    background:#ffffff07;
    border:1px solid #ffffff12;
    border-radius:5px;
    padding:4px 9px
}
.code-header button span {
    padding-left:6px
}
.code-body {
    padding:24px 23px 17px;
    font:10px/1.9 'SFMono-Regular',Consolas,monospace
}
.code-body pre {
    margin:12px 0 0;
    overflow:auto;
    font:inherit;
    scrollbar-width:thin
}
.code-comment {
    color:#6f8793;
    font-size:9px
}
.code-purple {
    color:#bca8e8
}
.code-blue {
    color:#8db9e9
}
.code-green {
    color:#8cc9ab
}
.code-orange {
    color:#e4b789
}
.code-response {
    margin-top:24px;
    border-top:1px solid #ffffff0d;
    padding-top:13px;
    color:#88bb9e;
    font:8px var(--body);
    display:flex;
    gap:7px;
    align-items:center
}
.response-dot {
    width:4px;
    height:4px;
    border-radius:50%;
    background:#69bc91
}
.code-response>span:last-child {
    margin-left:auto;
    color:#748a96
}
.code-body .json-example {
    font-size:9px
}
.code-footer {
    display:flex;
    justify-content:space-between;
    padding:12px 20px;
    border-top:1px solid #ffffff0e;
    background:#ffffff03;
    color:#6e8593;
    font-size:8px
}
.code-footer>span:first-child {
    color:#a7b9c4
}
.faq-section {
    border-top:1px solid var(--line);
    padding-top:80px
}
.faq-grid {
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:100px
}
.faq-grid h2 {
    font-size:39px
}
.faq-grid .section-copy {
    max-width:290px
}
.faq-list details {
    border-bottom:1px solid var(--line)
}
.faq-list details:first-child {
    border-top:1px solid var(--line)
}
.faq-list summary {
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:21px 0;
    font-size:12px;
    font-weight:550;
    line-height:1.5
}
.faq-list summary::-webkit-details-marker {
    display:none
}
.faq-list summary>span {
    font-weight:400;
    font-size:20px;
    color:#89979e;
    transition:transform .2s
}
.faq-list details[open] summary>span {
    transform:rotate(45deg);
    color:var(--blue)
}
.faq-list details[open] summary {
    color:#2665c7
}
.faq-list p {
    font-size:12px;
    line-height:1.9;
    color:#7c888f;
    padding:0 35px 23px 0
}
.cta-section {
    position:relative;
    overflow:hidden;
    border:1px solid #263c46;
    border-radius:25px;
    background:#14292f;
    color:#fff;
    text-align:center;
    padding:63px 30px 68px;
    background-image:radial-gradient(ellipse at 10% 100%,#164d4a66,transparent 60%),radial-gradient(ellipse at 90% 0%,#263c6233,transparent 70%)
}
.cta-section>.eyebrow {
    color:#8dbab3;
    font-size:8px;
    position:relative;
    z-index:1
}
.cta-section h2 {
    font-size:43px;
    line-height:1.3;
    font-weight:550;
    letter-spacing:-1.6px;
    margin-top:16px;
    position:relative;
    z-index:1
}
.cta-section p {
    font-size:12px;
    color:#94b0b5;
    margin:17px 0 24px;
    position:relative;
    z-index:1
}
.button-white {
    background:#fff;
    color:#183036;
    font-size:11px;
    position:relative;
    z-index:1
}
.cta-orbit {
    position:absolute;
    width:400px;
    height:400px;
    border:1px solid #adc8c01a;
    left:-180px;
    top:70px;
    border-radius:50%;
    box-shadow:0 0 0 35px #adc8c006,0 0 0 70px #adc8c006,0 0 0 105px #adc8c006,0 0 0 140px #adc8c006
}
.cta-spark {
    position:absolute;
    right:70px;
    top:40px;
    font-size:160px;
    line-height:1;
    color:#8ab9ab14;
    transform:rotate(12deg)
}
.site-footer {
    padding-top:66px
}
.footer-top {
    display:flex;
    justify-content:space-between;
    gap:40px;
    padding-bottom:48px
}
.footer-top .brand {
    font-size:21px
}
.footer-top .brand-mark {
    width:32px;
    height:32px;
    font-size:29px
}
.footer-top p {
    font-size:11px;
    line-height:1.9;
    color:#859198;
    margin-top:16px
}
.footer-links {
    display:flex;
    gap:100px;
    padding-right:60px
}
.footer-links h3 {
    font:600 10px var(--body);
    margin-bottom:15px
}
.footer-links a {
    display:block;
    font-size:10px;
    color:#7b8991;
    margin-top:10px
}
.footer-links a:hover {
    color:var(--blue)
}
.footer-bottom {
    border-top:1px solid var(--line);
    padding:23px 0 26px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:9px;
    color:#8b969d
}
.footer-bottom>span:last-child>span {
    padding-left:15px;
    color:#4a7e85
}
.toast {
    position:fixed;
    z-index:100;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    background:#172329;
    color:#fff;
    border-radius:12px;
    padding:12px 20px;
    font-size:12px;
    box-shadow:0 4px 20px #0002;
    max-width:calc(100% - 30px);
    text-align:center
}
@media(min-width:1450px) {
    .hero {
        padding-top:175px
    }
    .hero h1 {
        font-size:82px
    }
    .product-stage {
        margin-top:62px
    }
}
@media(max-width:1100px) {
    .wrap {
        width:calc(100% - 64px)
    }
    .desktop-nav {
        gap:18px;
        padding-inline:20px
    }
    .header-actions {
        gap:14px
    }
    .hero h1 {
        font-size:68px
    }
    .note-published {
        left:-6px
    }
    .note-api {
        right:-5px
    }
    .feature-card {
        padding:24px 20px 0
    }
    .feature-card>p {
        min-height:110px
    }
    .workflow-grid {
        gap:65px
    }
    .developer-grid {
        gap:45px
    }
    .developer-grid h2 {
        font-size:35px
    }
    .faq-grid {
        gap:65px
    }
    .stack-names>span {
        font-size:18px
    }
}
@media(max-width:1024px) {
    .desktop-nav {
        display:none
    }
    .header-actions {
        margin-left:auto
    }
    .menu-toggle {
        display:block
    }
    .site-header {
        top:20px
    }
    .preview-body {
        grid-template-columns:150px 1fr
    }
    .preview-main {
        padding:20px
    }
    .story-art {
        height:100px
    }
    .art-one>span {
        font-size:14px
    }
    .art-three>span {
        font-size:18px
    }
    .feature-card h3 {
        font-size:14px
    }
    .feature-card>p {
        font-size:11px
    }
    .mini-workspaces,.mini-editor,.mini-schedule {
        padding-inline:10px
    }
    .mini-count {
        display:none
    }
}
@media(max-width:800px) {
    .wrap {
        width:calc(100% - 48px)
    }
    .hero {
        padding-top:145px;
        padding-bottom:46px
    }
    .hero h1 {
        font-size:62px;
        letter-spacing:-3px
    }
    .hero-description {
        font-size:14px
    }
    .product-stage {
        padding:0;
        margin-top:45px
    }
    .floating-note {
        padding:9px 12px
    }
    .note-published {
        top:85px;
        left:-12px
    }
    .note-api {
        right:-10px;
        bottom:-18px
    }
    .floating-note strong {
        font-size:8px
    }
    .floating-note div>span {
        font-size:7px
    }
    .preview-body {
        grid-template-columns:125px 1fr;
        min-height:310px
    }
    .preview-sidebar {
        padding:15px 9px
    }
    .preview-brand {
        font-size:11px
    }
    .workspace-label {
        font-size:5px
    }
    .workspace-item {
        font-size:6px;
        padding:5px
    }
    .workspace-avatar {
        font-size:6px
    }
    .preview-main {
        padding:18px
    }
    .preview-heading h2 {
        font-size:16px
    }
    .preview-tabs {
        gap:12px
    }
    .preview-search {
        display:none
    }
    .story-grid {
        gap:9px
    }
    .third-story {
        display:none
    }
    .story-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .story-art {
        height:105px
    }
    .story-info h3 {
        font-size:9px
    }
    .preview-caption {
        font-size:5px
    }
    .stack-names {
        flex-wrap:wrap;
        justify-content:center;
        column-gap:32px;
        row-gap:12px
    }
    .stack-names>span:last-child {
        width:100%;
        font-size:10px
    }
    .stack-strip {
        padding-top:35px;
        padding-bottom:30px
    }
    .section {
        padding:70px 0
    }
    h2 {
        font-size:37px
    }
    .section-intro {
        gap:40px
    }
    .section-intro>p {
        font-size:12px;
        max-width:280px
    }
    .feature-grid {
        grid-template-columns:1fr;
        gap:18px
    }
    .feature-card {
        padding:25px 25px 0;
        display:grid;
        grid-template-columns:1fr 1fr;
        column-gap:35px
    }
    .feature-icon {
        grid-column:1;
        margin-bottom:20px
    }
    .feature-card h3 {
        grid-column:1;
        font-size:17px
    }
    .feature-card>p {
        grid-column:1;
        min-height:0;
        font-size:12px
    }
    .feature-card>a {
        grid-column:1;
        margin-bottom:27px;
        max-width:230px
    }
    .mini-workspaces,.mini-editor,.mini-schedule {
        grid-column:2;
        grid-row:2/5;
        align-self:end;
        height:160px;
        margin-top:0
    }
    .mini-workspaces {
        padding:22px 12px
    }
    .mini-workspaces>div {
        font-size:9px;
        margin-bottom:20px
    }
    .mini-workspaces small {
        font-size:7px
    }
    .mini-count {
        display:block;
        font-size:6px
    }
    .mini-editor>strong {
        margin-top:18px
    }
    .fake-line {
        margin-bottom:8px
    }
    .mini-schedule {
        padding-top:20px
    }
    .mini-schedule>div:first-child {
        font-size:8px
    }
    .schedule-track {
        margin-top:26px
    }
    .workflow-grid {
        grid-template-columns:1fr;
        gap:35px
    }
    .workflow-grid>div:first-child .section-copy {
        max-width:450px
    }
    .steps article {
        padding:22px 0
    }
    .steps p {
        max-width:100%
    }
    .developer-grid {
        grid-template-columns:1fr;
        gap:40px
    }
    .developer-grid h2 {
        font-size:39px
    }
    .developer-grid .section-copy {
        max-width:500px
    }
    .code-window {
        max-width:580px;
        width:100%;
        margin:auto;
        transform:none
    }
    .code-body {
        font-size:12px
    }
    .code-body .json-example {
        font-size:11px
    }
    .code-comment {
        font-size:10px
    }
    .faq-grid {
        grid-template-columns:1fr;
        gap:35px
    }
    .faq-grid .section-copy {
        max-width:400px
    }
    .faq-grid h2 {
        font-size:37px
    }
    .faq-list summary {
        font-size:13px
    }
    .cta-section {
        padding:50px 24px
    }
    .cta-section h2 {
        font-size:37px
    }
    .cta-spark {
        right:-30px
    }
    .footer-links {
        gap:50px;
        padding-right:0
    }
}
@media(max-width:480px) {
    .wrap {
        width:calc(100% - 36px)
    }
    .site-header {
        gap:9px;
        top:15px
    }
    .brand.pill {
        min-height:48px;
        padding:7px 16px 7px 7px;
        font-size:18px
    }
    .brand-mark {
        width:31px;
        height:31px;
        font-size:28px;
        margin-right:7px
    }
    .header-actions {
        background:transparent;
        border:0;
        box-shadow:none;
        padding:0;
        gap:0
    }
    .header-actions>a:first-child {
        display:none
    }
    .small-cta {
        font-size:10px;
        padding:11px 14px
    }
    .small-cta span {
        padding-left:5px
    }
    .menu-toggle {
        width:43px;
        height:43px;
        padding:12px;
        flex-shrink:0
    }
    .hero {
        padding-top:123px;
        padding-bottom:40px
    }
    .hero h1 {
        font-size:49px;
        letter-spacing:-2.6px;
        margin-top:22px
    }
    .hero-badge {
        font-size:9px;
        padding:6px 12px
    }
    .hero-description {
        font-size:12px;
        max-width:320px;
        margin:auto;
        line-height:1.9
    }
    .desktop-break {
        display:none
    }
    .button-row {
        gap:9px;
        margin-top:24px
    }
    .button {
        font-size:11px;
        padding:13px 18px;
        gap:14px
    }
    .hero-note {
        font-size:8px
    }
    .product-stage {
        margin-top:40px
    }
    .preview-top {
        height:27px;
        padding:0 9px;
        font-size:6px
    }
    .preview-lock {
        display:none
    }
    .preview-body {
        grid-template-columns:1fr;
        min-height:0
    }
    .preview-sidebar {
        display:none
    }
    .preview-main {
        padding:15px 14px 9px
    }
    .preview-breadcrumb {
        font-size:6px
    }
    .preview-heading {
        margin-top:10px
    }
    .preview-heading h2 {
        font-size:17px
    }
    .preview-heading p {
        font-size:6px
    }
    .preview-new {
        font-size:6px;
        padding:6px 9px
    }
    .preview-tabs {
        font-size:7px;
        margin-top:13px
    }
    .story-grid {
        margin-top:12px;
        gap:10px
    }
    .story-art {
        height:95px
    }
    .art-one>span {
        font-size:15px
    }
    .art-two>span {
        font-size:10px
    }
    .art-two b {
        font-size:16px
    }
    .story-info {
        padding:8px
    }
    .story-info h3 {
        font-size:9px;
        margin:8px 0 6px
    }
    .story-info p {
        font-size:5px
    }
    .preview-caption {
        font-size:5px
    }
    .floating-note {
        border-radius:8px
    }
    .note-published {
        display:none
    }
    .note-api {
        right:7px;
        bottom:-19px;
        padding:8px 10px;
        gap:7px
    }
    .floating-note strong {
        font-size:7px
    }
    .floating-note div>span {
        font-size:6px
    }
    .code-icon {
        font-size:9px
    }
    .connection-dot {
        margin-left:2px;
        width:4px;
        height:4px
    }
    .stack-strip>span {
        font-size:6px;
        letter-spacing:1.5px
    }
    .stack-names {
        column-gap:23px;
        row-gap:13px;
        margin-top:15px
    }
    .stack-names>span {
        font-size:15px
    }
    .stack-names>span:last-child {
        font-size:9px
    }
    .section {
        padding:55px 0
    }
    .section-intro {
        display:block;
        margin-bottom:28px
    }
    .section-intro>p {
        margin-top:20px;
        max-width:100%;
        font-size:12px
    }
    .section-label {
        font-size:8px;
        margin-bottom:14px
    }
    .section h2 {
        font-size:33px;
        letter-spacing:-1.5px
    }
    .feature-card {
        display:block;
        padding:25px 24px 0;
        border-radius:17px
    }
    .feature-icon {
        margin-bottom:20px
    }
    .feature-card h3 {
        font-size:17px
    }
    .feature-card>p {
        font-size:12px;
        line-height:1.9
    }
    .feature-card>a {
        font-size:11px;
        max-width:100%;
        margin-bottom:25px
    }
    .mini-workspaces,.mini-editor,.mini-schedule {
        height:132px;
        margin-top:0
    }
    .mini-workspaces {
        padding:15px 18px
    }
    .mini-workspaces>div {
        font-size:9px;
        margin-bottom:14px
    }
    .mini-count {
        font-size:7px
    }
    .mini-editor {
        padding-inline:18px
    }
    .mini-editor>strong {
        margin-top:11px
    }
    .mini-schedule {
        padding:15px 18px
    }
    .schedule-track {
        margin-top:20px
    }
    .workflow-grid {
        gap:32px
    }
    .steps article {
        gap:15px
    }
    .step-number {
        width:30px;
        height:30px;
        font-size:9px
    }
    .steps h3 {
        font-size:15px
    }
    .steps p {
        font-size:11px
    }
    .section-copy {
        font-size:12px;
        margin-top:20px
    }
    .text-link {
        font-size:11px
    }
    .check-list li {
        font-size:10px
    }
    .code-body {
        padding:19px 16px;
        font-size:9px
    }
    .code-comment {
        font-size:8px
    }
    .code-body .json-example {
        font-size:8px
    }
    .code-header {
        padding:12px 16px;
        font-size:9px
    }
    .code-footer {
        padding:10px 16px;
        font-size:7px
    }
    .faq-list summary {
        font-size:12px;
        padding:18px 0
    }
    .faq-list p {
        font-size:11px;
        padding-right:15px
    }
    .cta-section {
        padding:41px 20px 45px;
        border-radius:20px
    }
    .cta-section h2 {
        font-size:29px;
        letter-spacing:-1px
    }
    .cta-section p {
        font-size:11px
    }
    .cta-section>.eyebrow {
        font-size:6px;
        letter-spacing:1.4px
    }
    .cta-spark {
        font-size:110px;
        right:-40px;
        top:30px
    }
    .site-footer {
        padding-top:45px
    }
    .footer-top {
        flex-direction:column;
        gap:30px;
        padding-bottom:30px
    }
    .footer-links {
        gap:65px
    }
    .footer-links h3 {
        font-size:11px
    }
    .footer-links a {
        font-size:11px
    }
    .footer-bottom {
        flex-direction:column;
        gap:8px;
        font-size:8px;
        padding-block:20px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        transition:none!important;
        animation:none!important
    }
    .button:hover {
        transform:none
    }
}