:root{
  --bg:#07131f;
  --bg-2:#0c1c2b;
  --surface:#f7f8fb;
  --surface-strong:#ffffff;
  --surface-dark:#0f2133;
  --text:#142235;
  --text-soft:#5d6b7d;
  --text-inverse:#edf3f8;
  --line:rgba(20,34,53,.1);
  --line-strong:rgba(255,255,255,.1);
  --primary:#e5672f;
  --primary-dark:#c9521d;
  --accent:#7bd1c5;
  --accent-soft:rgba(123,209,197,.14);
  --shadow:0 18px 48px rgba(5,16,30,.12);
  --shadow-soft:0 12px 28px rgba(5,16,30,.08);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --shell:min(1120px, calc(100vw - 32px));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:400 15px/1.65 "Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(123,209,197,.12), transparent 24%),
    radial-gradient(circle at 88% 8%, rgba(229,103,47,.12), transparent 20%),
    linear-gradient(180deg, #08131f 0%, #0c1827 52%, #0e1b2a 100%);
}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}

.theme-slate{
  background:
    radial-gradient(circle at 15% 12%, rgba(123,209,197,.12), transparent 22%),
    linear-gradient(180deg, #08121c 0%, #111e2d 52%, #0f1a28 100%);
}

.theme-deep{
  background:
    radial-gradient(circle at 85% 10%, rgba(229,103,47,.1), transparent 20%),
    radial-gradient(circle at 10% 16%, rgba(123,209,197,.12), transparent 18%),
    linear-gradient(180deg, #07121d 0%, #0b2234 56%, #0d1828 100%);
}

.site-header{
  position:sticky;
  top:0;
  z-index:40;
  padding:16px 16px 0;
}

.site-header__inner{
  width:var(--shell);
  margin:0 auto;
  min-height:68px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  backdrop-filter:blur(18px);
  background:rgba(7,19,31,.72);
  box-shadow:0 16px 40px rgba(5,16,30,.22);
}

.brand-mark{
  display:flex;
  flex-direction:column;
  gap:1px;
  color:var(--text-inverse);
  min-width:max-content;
}

.brand-mark strong{
  font:700 1.25rem/1.05 ui-serif,Georgia,serif;
  letter-spacing:-.03em;
}

.brand-mark__eyebrow{
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(237,243,248,.62);
}

.nav-toggle{
  display:none;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:transparent;
  color:var(--text-inverse);
}

.site-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.site-nav a{
  padding:9px 13px;
  border-radius:999px;
  color:rgba(237,243,248,.76);
  font-size:.94rem;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}

.site-nav a:hover,
.site-nav a.is-active{
  color:#fff;
  background:rgba(255,255,255,.08);
}

.site-nav__cta{
  background:var(--primary);
  color:#fff !important;
}

.site-nav__cta:hover{background:var(--primary-dark)}

.site-shell{
  width:var(--shell);
  margin:0 auto;
  padding:28px 0 72px;
  display:grid;
  gap:22px;
}

.hero,
.feature-grid,
.showcase,
.demo-form-section,
.timeline,
.comparison-grid,
.demo-surface,
.role-split,
.matrix,
.page-hero{
  position:relative;
}

.hero{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(300px,.88fr);
  gap:20px;
  align-items:stretch;
}

.hero__copy,
.hero__panel,
.page-hero,
.showcase,
.demo-form-section,
.demo-surface,
.matrix,
.timeline,
.comparison-grid,
.role-split{
  padding:28px;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
}

.hero__copy,
.page-hero,
.showcase,
.demo-form-section,
.demo-surface,
.matrix,
.timeline,
.comparison-grid,
.role-split{
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.96)),
    var(--surface);
}

.hero__copy{
  background:
    radial-gradient(circle at top right, rgba(123,209,197,.14), transparent 26%),
    radial-gradient(circle at bottom left, rgba(229,103,47,.1), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.98));
}

.hero__copy > :first-child,
.page-hero > :first-child{margin-top:0}

.hero h1,
.page-hero h1,
.section-heading h2,
.feature-card h2,
.showcase-card h3,
.role-card h2,
.matrix-card h3,
.timeline-step h2,
.demo-modal__dialog h3{
  margin:0;
  font-family:ui-serif,Georgia,serif;
  letter-spacing:-.04em;
  line-height:1.02;
}

.hero h1{font-size:clamp(2.2rem, 5vw, 3.7rem);max-width:10ch}
.page-hero h1{font-size:clamp(2rem, 4.6vw, 3.2rem);max-width:13ch}
.section-heading h2{font-size:clamp(1.45rem, 2.6vw, 2rem);max-width:18ch}
.feature-card h2,
.showcase-card h3,
.role-card h2,
.matrix-card h3,
.timeline-step h2{font-size:1.35rem}

.hero__lead{
  margin:14px 0 0;
  max-width:62ch;
  color:var(--text-soft);
  font-size:.98rem;
}

.section-tag{
  margin:0 0 10px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#758295;
}

.hero__actions,
.demo-form__actions,
.demo-modal__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.primary-button,
.ghost-button{
  padding:12px 16px;
  border-radius:999px;
  font-size:.94rem;
  transition:transform .16s ease, background .16s ease, border-color .16s ease;
}

.primary-button{
  border:none;
  background:var(--primary);
  color:#fff;
}

.primary-button:hover{
  background:var(--primary-dark);
  transform:translateY(-1px);
}

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

.ghost-button:hover{
  background:#fff;
  transform:translateY(-1px);
}

.hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

.hero__chips span{
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:#47556a;
  font-size:.84rem;
}

.hero__panel{
  display:grid;
  gap:14px;
  background:
    radial-gradient(circle at top right, rgba(123,209,197,.14), transparent 24%),
    linear-gradient(180deg, rgba(13,31,48,.98), rgba(10,23,36,.96));
  color:var(--text-inverse);
}

.stat-card,
.mini-board{
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
}

.stat-card span{
  display:block;
  color:rgba(237,243,248,.66);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.stat-card strong{
  display:block;
  margin-top:8px;
  font-size:1.08rem;
  line-height:1.35;
  font-weight:650;
}

.stat-card--accent{
  background:linear-gradient(135deg, rgba(123,209,197,.18), rgba(123,209,197,.06));
}

.mini-board{
  display:grid;
  gap:12px;
}

.mini-board__row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.mini-board__row:last-child{
  padding-bottom:0;
  border-bottom:none;
}

.mini-board__row strong{
  font-size:.95rem;
}

.mini-board__row span{
  font-size:.84rem;
  color:rgba(237,243,248,.72);
  text-align:right;
}

.feature-grid,
.showcase__grid,
.comparison-grid,
.demo-surface__grid,
.role-split,
.matrix__grid{
  display:grid;
  gap:16px;
}

.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.showcase__grid,
.comparison-grid,
.demo-surface__grid,
.role-split,
.matrix__grid{grid-template-columns:repeat(2,minmax(0,1fr))}

.feature-card,
.showcase-card,
.compare-card,
.role-card,
.matrix-card{
  padding:22px;
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.78);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

.feature-card p:last-child,
.showcase-card p,
.matrix-card p,
.role-card ul,
.compare-card ul{
  margin:10px 0 0;
  color:var(--text-soft);
  font-size:.94rem;
}

.compare-card--positive,
.role-card--accent{
  background:
    radial-gradient(circle at top right, rgba(123,209,197,.12), transparent 28%),
    rgba(255,255,255,.82);
}

.section-heading{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:62ch;
}

.pricing-switch,
.status-switch{
  display:grid;
  gap:12px;
}

.pricing-switch__buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.pricing-switch__buttons button{
  padding:8px 13px;
  border:none;
  border-radius:999px;
  background:#edf1f5;
  color:#5d6b7d;
  font-size:.88rem;
}

.pricing-switch__buttons button.is-active{
  background:var(--text);
  color:#fff;
}

.pricing-switch__panel{
  display:none;
  padding:16px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--text-soft);
  font-size:.93rem;
}

.pricing-switch__panel.is-active{display:grid;gap:6px}
.pricing-switch__panel strong{
  color:var(--text);
  font-size:1.35rem;
}

.faq-list{display:grid;gap:8px}

.faq-item{
  width:100%;
  display:grid;
  gap:4px;
  padding:14px 16px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}

.faq-item span{
  font-size:.95rem;
  font-weight:650;
}

.faq-item small{
  color:#718096;
  font-size:.84rem;
}

.faq-panel{
  display:none;
  padding:2px 4px 10px 6px;
  color:var(--text-soft);
  font-size:.93rem;
}

.faq-panel.is-open{display:block}

.demo-form{
  display:grid;
  gap:14px;
  margin-top:18px;
}

.demo-form--compact{max-width:760px}

.demo-form label{
  display:grid;
  gap:7px;
  color:#334358;
  font-size:.92rem;
  font-weight:600;
}

.demo-form input,
.demo-form select,
.demo-form textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--text);
}

.demo-form__row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.check-row{
  display:flex !important;
  align-items:center;
  gap:10px;
  font-weight:500 !important;
}

.check-row input{width:auto}

.timeline{
  display:grid;
  gap:12px;
}

.timeline-step{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:16px;
  align-items:start;
  padding:20px;
  border-radius:18px;
  background:rgba(255,255,255,.82);
  border:1px solid var(--line);
}

.timeline-step span{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:var(--text);
  color:#fff;
  font:700 1.2rem/1 ui-serif,Georgia,serif;
}

.inline-menu{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  gap:10px;
}

.inline-menu__panel{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:220px;
  display:grid;
  gap:8px;
  padding:10px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

.inline-menu__panel a,
.inline-menu__panel button{
  padding:10px 12px;
  border:none;
  border-radius:12px;
  background:#f3f6f8;
  color:var(--text);
  text-align:left;
}

.demo-modal[hidden]{display:none}

.demo-modal{
  position:fixed;
  inset:0;
  z-index:70;
}

.demo-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(7,19,31,.58);
  backdrop-filter:blur(4px);
}

.demo-modal__dialog{
  position:relative;
  width:min(580px, calc(100vw - 24px));
  margin:min(11vh, 76px) auto 0;
  padding:24px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 28px 60px rgba(5,16,30,.2);
}

.demo-modal__dialog h3{
  font-size:1.8rem;
}

.demo-modal__dialog p:last-of-type{
  color:var(--text-soft);
  font-size:.95rem;
}

.demo-modal__close{
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:#eef2f5;
  color:var(--text);
  font-size:1.4rem;
}

.site-footer{
  padding:0 16px 24px;
}

.site-footer__inner{
  width:var(--shell);
  margin:0 auto;
  padding:20px 22px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  border-radius:22px;
  border:1px solid var(--line-strong);
  background:rgba(7,19,31,.8);
  color:var(--text-inverse);
}

.site-footer__copy strong{
  display:block;
  font-size:.98rem;
}

.site-footer__copy p{
  margin:6px 0 0;
  color:rgba(237,243,248,.7);
  font-size:.88rem;
}

.site-footer__links{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  align-content:flex-start;
}

.site-footer__links a{
  color:rgba(237,243,248,.78);
  font-size:.9rem;
}

@media (max-width: 980px){
  .hero,
  .feature-grid,
  .showcase__grid,
  .comparison-grid,
  .demo-surface__grid,
  .role-split,
  .matrix__grid{
    grid-template-columns:1fr;
  }

  .hero__copy,
  .hero__panel,
  .page-hero,
  .showcase,
  .demo-form-section,
  .demo-surface,
  .matrix,
  .timeline,
  .comparison-grid,
  .role-split{
    padding:22px;
  }
}

@media (max-width: 760px){
  body{font-size:14px}

  .site-header__inner{
    min-height:auto;
    border-radius:24px;
    align-items:flex-start;
  }

  .nav-toggle{display:inline-flex}

  .site-nav{
    width:100%;
    display:none;
    flex-direction:column;
    align-items:stretch;
    padding-top:6px;
  }

  .site-nav.is-open{display:flex}

  .site-nav a,
  .site-nav__cta{
    width:100%;
    text-align:center;
  }

  .hero h1,
  .page-hero h1{max-width:none}

  .timeline-step{
    grid-template-columns:1fr;
  }

  .timeline-step span{
    width:48px;
    height:48px;
  }

  .demo-modal__dialog{
    padding:22px 18px;
  }
}