:root {
   --bg: #07111f;
   --bg-soft: #0e1c30;
   --panel: #12243b;
   --panel-light: #f6f8fb;
   --text: #f8fbff;
   --muted: #b7c5d8;
   --ink: #162033;
   --ink-muted: #526070;
   --line: rgba(255, 255, 255, 0.14);
   --accent: #f3b23c;
   --accent-dark: #a86e10;
   --blue: #54a7ff;
   --shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
   font-family: Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

* {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   margin: 0;
   background: var(--bg);
   color: var(--text);
   line-height: 1.6;
}

a {
   color: inherit;
}

.site-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;
   padding: 1rem clamp(1rem, 4vw, 4rem);
   position: sticky;
   top: 0;
   z-index: 10;
   background: rgba(7, 17, 31, 0.9);
   border-bottom: 1px solid var(--line);
   backdrop-filter: blur(16px);
}

.brand {
   display: inline-flex;
   align-items: center;
   gap: 0.75rem;
   text-decoration: none;
}

.brand-mark {
   width: 2.6rem;
   height: 2.6rem;
   display: grid;
   place-items: center;
   color: #08111d;
   background: linear-gradient(135deg, var(--accent), #ffe39c);
   border-radius: 0.7rem;
   font-weight: 900;
   letter-spacing: -0.08em;
}

.brand-mark img {
   width: 1.9rem;
   height: 1.9rem;
   display: block;
}

.brand strong,
.brand small {
   display: block;
}

.brand small {
   color: var(--muted);
   font-size: 0.78rem;
}

.main-nav {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 0.35rem;
}

.main-nav a {
   color: var(--muted);
   padding: 0.55rem 0.8rem;
   border-radius: 999px;
   text-decoration: none;
   font-size: 0.95rem;
}

.main-nav a:hover,
.main-nav a.active {
   color: var(--text);
   background: rgba(255, 255, 255, 0.1);
}

.hero {
   min-height: 78vh;
   display: grid;
   grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
   gap: clamp(2rem, 5vw, 5rem);
   align-items: center;
   padding: clamp(3rem, 8vw, 7rem) clamp(1rem, 5vw, 6rem);
   background:
      radial-gradient(circle at 18% 18%, rgba(84, 167, 255, 0.23), transparent 32rem),
      radial-gradient(circle at 86% 24%, rgba(243, 178, 60, 0.18), transparent 30rem),
      linear-gradient(145deg, #07111f 0%, #0b1829 52%, #10243e 100%);
}

.hero h1,
.page-hero h1 {
   margin: 0;
   font-size: clamp(2.4rem, 6vw, 5.6rem);
   line-height: 0.98;
   letter-spacing: -0.06em;
}

.lead {
   font-size: clamp(1.08rem, 2vw, 1.35rem);
   color: var(--muted);
   max-width: 62rem;
}

.eyebrow {
   margin: 0 0 0.9rem;
   color: var(--accent);
   font-size: 0.82rem;
   font-weight: 800;
   letter-spacing: 0.14em;
   text-transform: uppercase;
}

.button-row {
   display: flex;
   flex-wrap: wrap;
   gap: 0.9rem;
   margin-top: 1.8rem;
}

.button-row.center {
   justify-content: center;
}

.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 3rem;
   padding: 0.8rem 1.15rem;
   border-radius: 999px;
   font-weight: 800;
   text-decoration: none;
}

.button.primary {
   color: #101826;
   background: linear-gradient(135deg, var(--accent), #ffd978);
   box-shadow: 0 12px 30px rgba(243, 178, 60, 0.28);
}

.button.secondary {
   color: var(--text);
   border: 1px solid var(--line);
   background: rgba(255, 255, 255, 0.08);
}

.hero-panel {
   background: rgba(18, 36, 59, 0.74);
   border: 1px solid var(--line);
   border-radius: 2rem;
   padding: clamp(1.2rem, 3vw, 2rem);
   box-shadow: var(--shadow);
}

.code-card {
   display: grid;
   gap: 0.8rem;
   padding: 1.2rem;
   border: 1px solid var(--line);
   border-radius: 1.4rem;
   background: #07111f;
   font-family: Consolas, Monaco, monospace;
}

.code-card span,
.code-card strong {
   display: block;
   padding: 0.8rem 1rem;
   border-radius: 0.9rem;
   background: rgba(255, 255, 255, 0.06);
}

.code-card strong {
   color: var(--accent);
   font-size: 1.2rem;
}

.check-list {
   margin: 1.4rem 0 0;
   padding: 0;
   list-style: none;
}

.check-list li {
   padding: 0.65rem 0 0.65rem 1.7rem;
   position: relative;
   color: var(--muted);
}

.check-list li::before {
   content: "";
   width: 0.52rem;
   height: 0.52rem;
   border-radius: 999px;
   background: var(--accent);
   position: absolute;
   left: 0.25rem;
   top: 1.15rem;
}

.section,
.split-section,
.page-hero,
.cta-band {
   padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 5vw, 6rem);
}

.section.tight {
   padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

.section.alt {
   background: #eef3f8;
   color: var(--ink);
}

.section-heading {
   max-width: 56rem;
   margin: 0 auto 2.2rem;
   text-align: center;
}

.section-heading h2,
.split-section h2,
.cta-band h2 {
   margin: 0;
   font-size: clamp(2rem, 4vw, 3.5rem);
   line-height: 1.05;
   letter-spacing: -0.05em;
}

.section-heading p,
.split-section p {
   color: inherit;
}

.card-grid {
   display: grid;
   gap: 1.1rem;
}

.card-grid.three {
   grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid.two {
   grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card,
.price-card {
   color: var(--ink);
   background: var(--panel-light);
   border: 1px solid rgba(10, 21, 35, 0.1);
   border-radius: 1.4rem;
   padding: 1.4rem;
   box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12);
}

.card h2,
.card h3,
.price-card h2 {
   margin: 0 0 0.75rem;
   letter-spacing: -0.03em;
}

.card p,
.price-card p {
   margin-bottom: 0;
   color: var(--ink-muted);
}

.screenshot-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1.2rem;
   margin-top: 2rem;
}

.screenshot-card,
.brand-banner {
   margin: 0;
}

.screenshot-card {
   color: var(--ink);
   background: #fff;
   border: 1px solid rgba(10, 21, 35, 0.1);
   border-radius: 1.5rem;
   padding: 0.85rem;
   box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16);
}

.screenshot-frame {
   overflow: hidden;
   border-radius: 1rem;
   border: 1px solid rgba(10, 21, 35, 0.14);
   background: #dfe4ea;
}

.screenshot-frame img {
   width: 100%;
   display: block;
}

.screenshot-card figcaption {
   padding: 0.9rem 0.25rem 0.2rem;
}

.screenshot-card strong,
.screenshot-card span,
.brand-banner figcaption {
   display: block;
}

.screenshot-card span {
   color: var(--ink-muted);
}

.brand-banner {
   max-width: 58rem;
   margin: -0.4rem auto 2rem;
   padding: 1rem;
   background: #fff;
   border: 1px solid rgba(10, 21, 35, 0.1);
   border-radius: 1.4rem;
   box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}

.brand-banner img {
   width: 100%;
   display: block;
   border-radius: 0.9rem;
}

.brand-banner figcaption {
   margin-top: 0.8rem;
   color: var(--ink-muted);
   text-align: center;
}

.feature-card {
   min-height: 15rem;
}

.split-section {
   display: grid;
   grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
   gap: clamp(2rem, 5vw, 4rem);
   align-items: center;
}

.feature-list {
   display: grid;
   gap: 0.9rem;
}

.feature-list div {
   padding: 1rem 1.1rem;
   border: 1px solid var(--line);
   border-radius: 1rem;
   background: rgba(255, 255, 255, 0.08);
}

.section.alt .feature-list div {
   border-color: rgba(10, 21, 35, 0.12);
   background: #fff;
}

.feature-list strong,
.feature-list span {
   display: block;
}

.feature-list span {
   color: var(--muted);
}

.section.alt .feature-list span {
   color: var(--ink-muted);
}

.timeline {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 1rem;
}

.timeline div {
   background: #fff;
   border: 1px solid rgba(10, 21, 35, 0.1);
   border-radius: 1.2rem;
   padding: 1.2rem;
}

.timeline span {
   width: 2.2rem;
   height: 2.2rem;
   display: grid;
   place-items: center;
   color: #101826;
   background: var(--accent);
   border-radius: 999px;
   font-weight: 900;
}

.timeline strong {
   display: block;
   margin-top: 1rem;
   font-size: 1.15rem;
}

.timeline p {
   color: var(--ink-muted);
}

.page-hero {
   background: linear-gradient(145deg, #07111f, #10243e);
}

.page-hero h1 {
   max-width: 70rem;
}

.pricing-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 1rem;
}

.price-card {
   min-height: 15rem;
}

.price-card.highlight {
   border-color: rgba(243, 178, 60, 0.7);
   box-shadow: 0 20px 55px rgba(243, 178, 60, 0.2);
}

.price {
   margin: 0.4rem 0;
   color: var(--ink);
   font-size: clamp(2.5rem, 6vw, 4.2rem);
   font-weight: 900;
   letter-spacing: -0.08em;
}

.capability-cloud {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.7rem;
   max-width: 74rem;
   margin: 0 auto;
}

.capability-cloud span {
   padding: 0.65rem 0.9rem;
   border-radius: 999px;
   color: var(--ink);
   background: #fff;
   border: 1px solid rgba(10, 21, 35, 0.11);
   font-weight: 700;
}

.stat-panel {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 1rem;
}

.stat-panel div {
   padding: 1.2rem;
   border-radius: 1.2rem;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid var(--line);
}

.stat-panel strong {
   display: block;
   color: var(--accent);
   font-size: clamp(2rem, 5vw, 3.3rem);
   line-height: 1;
   letter-spacing: -0.07em;
}

.stat-panel span {
   display: block;
   margin-top: 0.7rem;
   color: var(--muted);
}

.cta-band {
   text-align: center;
   background:
      radial-gradient(circle at 50% 0%, rgba(243, 178, 60, 0.18), transparent 24rem),
      #0a1728;
}

.cta-band p {
   max-width: 52rem;
   margin: 1rem auto 1.8rem;
   color: var(--muted);
}

.site-footer {
   padding: 2rem clamp(1rem, 5vw, 6rem);
   color: var(--muted);
   border-top: 1px solid var(--line);
   text-align: center;
}

.site-footer p {
   margin: 0.35rem 0;
}

.site-footer a {
   color: var(--text);
}

@media (max-width: 900px) {
   .site-header,
   .hero,
   .split-section {
      grid-template-columns: 1fr;
   }

   .site-header {
      display: grid;
      justify-items: start;
   }

   .main-nav {
      justify-content: flex-start;
   }

   .card-grid.three,
   .card-grid.two,
   .screenshot-grid,
   .pricing-grid,
   .timeline,
   .stat-panel {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 520px) {
   .main-nav a {
      padding: 0.45rem 0.55rem;
      font-size: 0.88rem;
   }

   .button {
      width: 100%;
   }
}