:root {
  color-scheme:dark;
  --bg:#171411;
  --surface:#211c18;
  --line:#3e3229;
  --text:#f9f0e4;
  --muted:#bdab98;
  --accent:#eea66f;
  --orange:#b94d29;
  --cream:#f4dfc1;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  font-synthesis:none;
  scroll-behavior:smooth;
  scroll-padding-top:95px
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
a {
  color:inherit;
  text-decoration:none
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px;
  border-radius:4px
}
::selection {
  background:#eea66f;
  color:#171411
}
img {
  display:block;
  max-width:100%
}
p {
  line-height:1.7
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  text-wrap:balance
}
em {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  color:var(--accent)
}
.container {
  width:min(1200px,calc(100% - 64px));
  margin-inline:auto
}
.skip-link {
  position:fixed;
  top:-80px;
  left:16px;
  z-index:100;
  background:var(--cream);
  color:var(--bg);
  padding:15px
}
.skip-link:focus {
  top:10px
}
.header {
  border-bottom:1px solid #ffffff0b;
  background:#171411ed;
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(16px)
}
.header-inner {
  height:88px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:26px;
  font-weight:650;
  letter-spacing:-1.2px;
  white-space:nowrap
}
.brand-suffix {
  font-weight:400;
  color:var(--muted)
}
nav {
  display:flex;
  gap:30px;
  font-size:13px;
  color:var(--muted)
}
nav a:hover,.footer a:hover {
  color:var(--accent)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  min-height:52px;
  padding:15px 23px;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  transition:background .2s,transform .2s;
  border:1px solid transparent;
  line-height:1.35
}
.button:hover {
  transform:translateY(-2px)
}
.button-primary {
  background:var(--orange);
  color:#fff8f0;
  border-color:#dd754b
}
.button-primary:hover {
  background:#a54122
}
.button-outline {
  border-color:#534133;
  background:#ffffff03
}
.button-outline:hover {
  background:#ffffff09
}
.button-small {
  min-height:42px;
  padding:11px 17px;
  font-size:12px;
  gap:18px
}
.button-cream {
  background:var(--cream);
  color:#332316
}
.button-cream:hover {
  background:#fff0d9
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:15px;
  font-size:13px;
  font-weight:500
}
.text-link:hover {
  color:var(--accent)
}
.eyebrow {
  font-size:10px;
  font-weight:600;
  letter-spacing:2px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--accent);
  line-height:1.8
}
.seed {
  height:6px;
  width:6px;
  display:inline-block;
  background:var(--accent);
  border-radius:50%;
  box-shadow:0 0 0 4px #eea66f12
}
.hero {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:center;
  gap:54px;
  padding-block:94px 100px
}
.hero h1 {
  font-size:clamp(54px,5.5vw,80px);
  font-weight:550;
  line-height:1.02;
  letter-spacing:-4.5px;
  margin:26px 0
}
.hero h1 em {
  line-height:1.06;
  letter-spacing:-3px
}
.hero-description {
  max-width:435px;
  color:var(--muted);
  font-size:15px;
  margin-bottom:28px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap
}
.hero-note {
  font-size:11px;
  color:#a89480;
  margin:19px 0 0
}
.hero-visual {
  position:relative;
  min-width:0;
  padding-top:30px
}
.orbit {
  position:absolute;
  border:1px solid #eea66f13;
  border-radius:50%;
  pointer-events:none;
  z-index:-1
}
.orbit-one {
  width:440px;
  height:440px;
  top:-35px;
  left:20px
}
.orbit-two {
  width:530px;
  height:530px;
  top:-80px;
  left:-25px
}
.floating-leaf {
  position:absolute;
  right:28px;
  top:-25px;
  transform:rotate(14deg);
  box-shadow:0 10px 50px #dc6b2b17;
  border-radius:16px
}
.console-preview {
  border:1px solid #6c4b35;
  background:linear-gradient(145deg,#30251d,#1c1815 65%);
  border-radius:13px;
  box-shadow:0 30px 80px #0005,0 0 100px #dc6b2b0a;
  overflow:hidden;
  transform:rotate(-2deg)
}
.console-top {
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  border-bottom:1px solid #ffffff0a;
  color:#bdab98;
  font:10px ui-monospace,monospace
}
.window-dots {
  display:flex;
  gap:5px
}
.window-dots i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#90684c
}
.window-dots i:nth-child(2) {
  background:#af885f
}
.window-dots i:nth-child(3) {
  background:#6c7752
}
.preview-label {
  font-size:8px;
  letter-spacing:1px;
  margin-left:auto;
  color:#ab927d
}
.console-content {
  padding:25px
}
.console-heading {
  display:flex;
  align-items:center;
  gap:12px
}
.app-icon {
  background:#b94d2925;
  border:1px solid #eea66f30;
  border-radius:10px;
  padding:11px;
  color:var(--accent);
  font-size:22px
}
.console-heading strong {
  font-size:13px;
  display:block;
  letter-spacing:-.2px
}
.console-heading div>span {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:6px
}
.branch {
  font:10px ui-monospace,monospace;
  margin-left:auto;
  border:1px solid var(--line);
  padding:6px;
  border-radius:5px;
  color:var(--muted)
}
.deploy-flow {
  margin:26px 0;
  display:grid;
  gap:17px
}
.deploy-flow>div {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:12px
}
.step-mark {
  display:grid;
  place-items:center;
  width:19px;
  height:19px;
  border-radius:50%;
  color:#b9ce9a;
  background:#7f9a4d20;
  font-size:11px
}
.flow-detail {
  margin-left:auto;
  font:9px ui-monospace,monospace;
  color:var(--muted)
}
.terminal {
  border:1px solid #ffffff09;
  border-radius:8px;
  padding:18px;
  background:#15120f
}
.terminal-label {
  font:8px ui-monospace,monospace;
  letter-spacing:1.5px;
  color:#bba38d
}
.terminal p {
  font:11px/1.8 ui-monospace,monospace;
  margin:14px 0 0;
  color:#f4dfc1
}
.terminal p>span {
  color:var(--accent)
}
.terminal .terminal-muted {
  font-size:10px;
  color:#ac9986;
  margin-top:3px
}
.cursor {
  margin-left:4px
}
.console-bottom {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:8px;
  color:var(--muted);
  padding-top:20px
}
.status-dot {
  display:inline-block;
  width:5px;
  height:5px;
  background:#a8bf80;
  border-radius:50%;
  margin-right:5px
}
.visual-caption {
  font-size:10px;
  color:var(--muted);
  margin:28px 12px;
  text-align:center
}
.visual-caption>span {
  color:var(--accent);
  font-size:18px;
  margin-right:8px
}
.technology-strip {
  border-block:1px solid #ffffff0a;
  background:#ffffff02
}
.technology-strip>.container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  min-height:88px;
  padding-block:22px
}
.technology-strip .container>span {
  font-size:9px;
  letter-spacing:1.8px;
  color:#aa937e
}
.technology-strip .container>div {
  display:flex;
  gap:40px;
  align-items:center;
  flex-wrap:wrap;
  font-size:15px;
  font-weight:500;
  color:#d1bdab
}
.section {
  padding-block:100px
}
.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:42px
}
.section-heading h2,.pricing-copy h2 {
  font-size:42px;
  line-height:1.18;
  font-weight:500;
  letter-spacing:-1.8px;
  margin:18px 0 0
}
.section-heading h2>span {
  color:var(--muted)
}
.section-heading>p {
  max-width:330px;
  font-size:13px;
  color:var(--muted);
  margin:0
}
.feature-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:18px
}
.feature {
  border:1px solid var(--line);
  border-radius:12px;
  padding:30px;
  position:relative;
  background:linear-gradient(135deg,#ffffff03,transparent);
  overflow:hidden
}
.feature-wide {
  background:linear-gradient(130deg,#3c2b20,#211b16)
}
.feature-icon {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid #eea66f25;
  border-radius:9px;
  color:var(--accent);
  font-size:25px;
  margin-bottom:26px
}
.feature-number {
  font-size:8px;
  color:var(--muted);
  letter-spacing:1.5px
}
.feature h3 {
  font-size:24px;
  font-weight:500;
  letter-spacing:-.6px;
  line-height:1.22;
  margin:15px 0
}
.feature p {
  font-size:12px;
  color:var(--muted);
  margin:0
}
.code-trail {
  display:flex;
  align-items:center;
  gap:13px;
  font:10px ui-monospace,monospace;
  margin-top:25px
}
.code-trail>span {
  border:1px solid #ffffff10;
  padding:7px;
  border-radius:5px
}
.code-trail>b {
  color:#957961;
  font-weight:400
}
.code-trail .trail-online {
  color:var(--accent)
}
.how-section {
  padding-block:75px;
  background:#f4dfc105;
  border-block:1px solid #ffffff09
}
.how-section .section-heading {
  align-items:center
}
.how-section h2 {
  font-size:36px
}
.steps {
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  margin:0
}
.step-number {
  display:inline-block;
  color:#cb956d;
  font:12px ui-monospace,monospace;
  border-top:1px solid #785138;
  width:100%;
  padding-top:20px;
  margin-bottom:25px
}
.steps h3 {
  font-weight:500;
  font-size:17px;
  margin-bottom:12px
}
.steps p {
  font-size:12px;
  color:var(--muted);
  margin:0;
  max-width:285px
}
.pricing-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:110px;
  align-items:center
}
.pricing-copy h2 {
  font-size:49px;
  margin-bottom:23px
}
.pricing-copy>p {
  font-size:14px;
  color:var(--muted);
  max-width:390px
}
.pricing-decoration {
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:40px
}
.pricing-decoration img {
  transform:rotate(-12deg)
}
.pricing-decoration>span {
  font-family:Georgia,serif;
  font-style:italic;
  color:#bfa38b;
  font-size:20px;
  line-height:1.4
}
.pricing-card {
  padding:35px;
  border:1px solid #795138;
  border-radius:14px;
  background:linear-gradient(130deg,#33261c,#221c17);
  box-shadow:0 15px 50px #0002
}
.plan-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.plan-badge {
  font-size:9px;
  letter-spacing:1.6px;
  background:#eea66f15;
  color:var(--accent);
  padding:6px 10px;
  border:1px solid #eea66f30;
  border-radius:4px
}
.plan-description {
  font-size:10px;
  color:var(--muted)
}
.pricing-card h3 {
  font-size:20px;
  font-weight:500;
  margin:25px 0 12px
}
.price {
  font-size:58px;
  letter-spacing:-3px;
  font-weight:500
}
.price>span {
  font-size:12px;
  color:var(--muted);
  letter-spacing:0;
  font-weight:400;
  margin-left:10px
}
.plan-intro {
  font-size:12px;
  color:var(--muted);
  margin:7px 0 22px
}
.plan-features {
  list-style:none;
  padding:24px 0 0;
  border-top:1px solid var(--line);
  display:grid;
  gap:15px;
  margin-bottom:27px
}
.plan-features li {
  font-size:12px;
  line-height:1.65;
  color:#cfbca7;
  padding-left:22px;
  position:relative
}
.plan-features li:before {
  content:'✓';
  position:absolute;
  left:0;
  color:var(--accent)
}
.plan-features strong {
  font-weight:600;
  color:var(--text)
}
.pricing-card .button {
  width:100%;
  justify-content:space-between
}
.plan-footnote {
  font-size:10px;
  color:#b39d86;
  line-height:1.6;
  margin:16px 0 0
}
.closing {
  position:relative;
  overflow:hidden;
  border:1px solid #6a4630;
  background:radial-gradient(ellipse at 85% 90%,#6b351f80,transparent 60%),#2b2018;
  border-radius:16px;
  text-align:center;
  padding:65px 24px
}
.closing h2 {
  font-size:49px;
  font-weight:500;
  line-height:1.12;
  letter-spacing:-1.5px;
  margin:20px 0 30px
}
.closing-leaf {
  position:absolute;
  right:20px;
  bottom:-110px;
  font-family:Georgia,serif;
  font-size:320px;
  color:#eea66f0d;
  transform:rotate(-25deg);
  pointer-events:none
}
.footer {
  padding-block:55px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.footer .brand {
  font-size:22px
}
.footer p {
  font-size:10px;
  color:var(--muted);
  margin:14px 0 0
}
.footer-links {
  display:flex;
  gap:26px;
  font-size:11px;
  color:var(--muted)
}
.footer-note {
  font-size:10px;
  color:#a9917b
}
@media(min-width:1500px) {
  .hero {
    padding-block:120px
  }
}
@media(max-width:1050px) {
  .hero {
    gap:30px
  }
  .hero h1 {
    font-size:60px
  }
  .hero-actions {
    gap:20px
  }
  .hero-visual .orbit {
    display:none
  }
  .technology-strip .container>div {
    gap:24px
  }
  .feature {
    padding:24px
  }
  .pricing-section {
    gap:60px
  }
  .footer-note {
    display:none
  }
}
@media(max-width:760px) {
  .container {
    width:calc(100% - 40px)
  }
  .header-inner {
    height:74px;
    gap:12px
  }
  .brand {
    font-size:22px
  }
  .brand img {
    width:32px;
    height:32px
  }
  .brand-suffix {
    display:none
  }
  nav {
    display:none
  }
  .button-small {
    font-size:11px;
    padding:10px 12px;
    gap:12px
  }
  .hero {
    grid-template-columns:1fr;
    padding-block:55px 35px;
    gap:55px
  }
  .hero h1 {
    font-size:67px;
    letter-spacing:-3px;
    margin-top:22px
  }
  .hero h1 em {
    letter-spacing:-2px
  }
  .desktop-break {
    display:none
  }
  .hero-description {
    font-size:14px;
    max-width:460px
  }
  .hero-actions {
    gap:20px
  }
  .hero-actions .button {
    padding-inline:17px;
    font-size:12px
  }
  .text-link {
    font-size:12px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.6px
  }
  .hero-visual {
    max-width:510px;
    width:100%;
    margin-inline:auto;
    padding:15px 3px 0
  }
  .console-preview {
    transform:rotate(-1deg)
  }
  .floating-leaf {
    width:48px;
    right:22px;
    top:-25px
  }
  .console-content {
    padding:22px 18px
  }
  .console-top {
    padding:14px 12px;
    font-size:9px
  }
  .console-heading strong {
    font-size:12px
  }
  .branch {
    font-size:9px
  }
  .terminal p {
    font-size:10px
  }
  .console-bottom {
    font-size:7px
  }
  .visual-caption {
    font-size:9px;
    margin-block:22px 5px
  }
  .technology-strip>.container {
    flex-direction:column;
    align-items:start;
    gap:20px;
    padding-block:26px
  }
  .technology-strip .container>div {
    gap:18px 26px;
    font-size:13px
  }
  .section {
    padding-block:65px
  }
  .section-heading {
    flex-direction:column;
    align-items:start;
    gap:22px;
    margin-bottom:30px
  }
  .section-heading h2 {
    font-size:35px;
    letter-spacing:-1.3px
  }
  .section-heading>p {
    max-width:420px;
    font-size:13px
  }
  .feature-grid {
    grid-template-columns:1fr
  }
  .feature {
    padding:26px
  }
  .feature-icon {
    margin-bottom:22px
  }
  .feature h3 {
    font-size:25px
  }
  .feature h3 br {
    display:none
  }
  .feature p {
    max-width:420px;
    font-size:13px
  }
  .how-section {
    padding-block:60px
  }
  .how-section .section-heading {
    align-items:start
  }
  .how-section h2 {
    font-size:32px
  }
  .steps {
    grid-template-columns:1fr;
    gap:30px
  }
  .steps li {
    position:relative;
    padding-left:45px
  }
  .step-number {
    position:absolute;
    left:0;
    top:0;
    width:28px;
    margin:0;
    padding-top:9px
  }
  .steps h3 {
    padding-top:8px;
    margin-bottom:10px
  }
  .steps p {
    max-width:420px;
    font-size:13px
  }
  .pricing-section {
    grid-template-columns:1fr;
    gap:32px
  }
  .pricing-copy h2 {
    font-size:42px
  }
  .pricing-decoration {
    display:none
  }
  .pricing-card {
    padding:26px
  }
  .closing {
    padding:48px 20px
  }
  .closing h2 {
    font-size:39px
  }
  .closing .button {
    font-size:12px
  }
  .closing-leaf {
    right:-30px
  }
  .footer {
    flex-direction:column;
    align-items:start;
    padding-block:40px;
    gap:25px
  }
  .footer-links {
    flex-wrap:wrap
  }
  .footer .brand-suffix {
    display:inline
  }
}
@media(max-width:370px) {
  .container {
    width:calc(100% - 32px)
  }
  .hero h1 {
    font-size:56px
  }
  .hero-actions {
    align-items:start;
    flex-direction:column
  }
  .console-heading {
    gap:8px
  }
  .console-content {
    padding:18px 12px
  }
  .console-top {
    gap:7px
  }
  .preview-label {
    font-size:6px
  }
  .console-bottom>span:last-child {
    display:none
  }
  .pricing-copy h2 {
    font-size:37px
  }
  .closing h2 {
    font-size:34px
  }
}
@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important
  }
}
.icon {
  display:inline-block;
  width:16px;
  height:16px;
  vertical-align:middle;
  flex-shrink:0
}
.app-icon .icon,.feature-icon .icon {
  width:22px;
  height:22px
}
.code-trail .icon {
  width:10px;
  height:10px
}
.footer-links .icon {
  width:12px;
  height:12px
}