:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-soft: #f1f3f6;
  --surface-dark: #171a20;

  --text: #171a1f;
  --text-soft: #67707c;
  --text-faint: #8e96a1;

  --border: #e2e6eb;
  --border-strong: #d3d8df;

  --accent: #4457d9;
  --accent-soft: #eef0ff;

  --progress: #325fe8;
  --success: #247653;

  --radius-small: 11px;
  --radius: 18px;
  --radius-large: 24px;

  --shadow:
    0 14px 34px rgba(23, 26, 31, 0.06);

  --shadow-strong:
    0 24px 60px rgba(23, 26, 31, 0.09);

  --max-width: 1180px;
  --header-height: 66px;
}


/* --------------------------------------------------
   Base
-------------------------------------------------- */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background: var(--bg);
  color: var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.55;
}


a {
  color: inherit;
  text-decoration: none;
}


button,
a {
  -webkit-tap-highlight-color: transparent;
}


button {
  font: inherit;
}


section {
  scroll-margin-top:
    calc(var(--header-height) + 20px);

  padding:
    90px 0;
}


.container {
  width:
    min(
      calc(100% - 40px),
      var(--max-width)
    );

  margin: 0 auto;
}


/* --------------------------------------------------
   Header
-------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;

  z-index: 100;

  background:
    rgba(247, 248, 250, 0.94);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  border-bottom:
    1px solid var(--border);
}


.header-inner {
  width:
    min(
      calc(100% - 32px),
      1440px
    );

  min-height:
    var(--header-height);

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:
    center;

  gap:
    16px;
}


.header-left {
  display:
    flex;

  justify-content:
    flex-start;
}


.header-right {
  display:
    flex;

  justify-content:
    flex-end;
}


.brand {
  justify-self:
    center;

  font-size:
    15px;

  font-weight:
    720;

  letter-spacing:
    -0.02em;
}


.about-link {
  color:
    var(--text-soft);

  font-size:
    13px;

  font-weight:
    650;
}


.about-link:hover {
  color:
    var(--text);
}


.header-icon-button {
  width:
    40px;

  height:
    40px;

  padding:
    0;

  display:
    inline-flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  background:
    transparent;

  border:
    1px solid transparent;

  border-radius:
    10px;

  cursor:
    pointer;
}


.header-icon-button:hover {
  background:
    var(--surface);
}


.burger-line {
  width:
    17px;

  height:
    1.5px;

  background:
    var(--text);

  border-radius:
    999px;

  transition:
    transform 160ms ease,
    opacity 160ms ease;
}


.header-icon-button.is-open
.burger-line:nth-child(1) {
  transform:
    translateY(5.5px)
    rotate(45deg);
}


.header-icon-button.is-open
.burger-line:nth-child(2) {
  opacity:
    0;
}


.header-icon-button.is-open
.burger-line:nth-child(3) {
  transform:
    translateY(-5.5px)
    rotate(-45deg);
}


.site-menu {
  position:
    absolute;

  left:
    16px;

  top:
    calc(var(--header-height) - 2px);

  min-width:
    220px;

  padding:
    8px;

  visibility:
    hidden;

  opacity:
    0;

  transform:
    translateY(-8px);

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius:
    14px;

  box-shadow:
    var(--shadow-strong);

  transition:
    opacity 150ms ease,
    transform 150ms ease,
    visibility 150ms ease;
}


.site-menu.is-open {
  visibility:
    visible;

  opacity:
    1;

  transform:
    translateY(0);
}


.site-menu-inner {
  display:
    grid;

  gap:
    2px;
}


.site-menu a {
  padding:
    11px 12px;

  color:
    var(--text-soft);

  border-radius:
    9px;

  font-size:
    13px;

  font-weight:
    620;
}


.site-menu a:hover {
  background:
    var(--surface-soft);

  color:
    var(--text);
}


.scroll-progress {
  position:
    absolute;

  left:
    0;

  bottom:
    -1px;

  width:
    0;

  height:
    3px;

  background:
    var(--progress);

  box-shadow:
    0 0 12px
    rgba(50, 95, 232, 0.2);

  pointer-events:
    none;
}


/* --------------------------------------------------
   Typography
-------------------------------------------------- */

.eyebrow,
.section-kicker,
.product-label {
  color:
    var(--accent);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


h1 {
  max-width:
    900px;

  margin:
    0;

  font-size:
    clamp(
      42px,
      6vw,
      72px
    );

  line-height:
    1.02;

  letter-spacing:
    -0.055em;

  font-weight:
    750;
}


h2 {
  margin:
    0;

  font-size:
    clamp(
      30px,
      4vw,
      46px
    );

  line-height:
    1.12;

  letter-spacing:
    -0.035em;
}


/* --------------------------------------------------
   Hero
-------------------------------------------------- */

.hero {
  padding:
    112px 0
    104px;
}


.hero-inner {
  max-width:
    920px;
}


.eyebrow {
  margin-bottom:
    22px;
}


.hero-copy {
  max-width:
    790px;

  margin:
    28px 0 0;

  color:
    var(--text-soft);

  font-size:
    18px;

  line-height:
    1.7;
}


.hero-links {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    24px;

  margin-top:
    30px;
}


.hero-links a {
  padding-bottom:
    3px;

  border-bottom:
    1px solid var(--border-strong);

  color:
    var(--text);

  font-size:
    13px;

  font-weight:
    650;
}


.hero-links a:hover {
  border-color:
    var(--text);
}


/* --------------------------------------------------
   Section headings
-------------------------------------------------- */

.section-heading {
  max-width:
    780px;

  margin-bottom:
    46px;
}


.section-kicker {
  margin-bottom:
    10px;
}


.section-heading p {
  margin:
    16px 0 0;

  color:
    var(--text-soft);

  font-size:
    16px;

  line-height:
    1.7;
}


/* --------------------------------------------------
   Buttons
-------------------------------------------------- */

.button {
  min-height:
    42px;

  padding:
    0 15px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius:
    var(--radius-small);

  color:
    var(--text);

  font-size:
    12px;

  font-weight:
    650;

  cursor:
    pointer;

  transition:
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}


.button:hover {
  transform:
    translateY(-1px);

  border-color:
    var(--border-strong);
}


.button.primary {
  background:
    var(--text);

  border-color:
    var(--text);

  color:
    #ffffff;
}


.icon-button {
  gap:
    8px;
}


.github-icon {
  width:
    16px;

  height:
    16px;

  display:
    block;

  fill:
    currentColor;
}


/* --------------------------------------------------
   Products
-------------------------------------------------- */

.products {
  display:
    grid;

  gap:
    34px;
}


.product-card {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(360px, 0.92fr);

  overflow:
    hidden;

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius:
    var(--radius-large);

  box-shadow:
    var(--shadow);
}


.product-card-reverse {
  grid-template-columns:
    minmax(360px, 0.92fr)
    minmax(0, 1.08fr);
}


.product-content {
  padding:
    44px;
}


.product-content h3 {
  margin:
    12px 0 14px;

  font-size:
    34px;

  letter-spacing:
    -0.03em;
}


.product-content p {
  max-width:
    640px;

  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    14px;

  line-height:
    1.75;
}


.project-note {
  margin-top:
    22px;

  padding:
    13px 15px;

  background:
    var(--accent-soft);

  border-radius:
    12px;

  color:
    #3949b8;

  font-size:
    12px;

  line-height:
    1.55;
}


.feature-list {
  margin:
    24px 0 0;

  padding:
    0;

  display:
    grid;

  gap:
    10px;

  list-style:
    none;
}


.feature-list li {
  position:
    relative;

  padding-left:
    17px;

  color:
    var(--text-soft);

  font-size:
    13px;

  line-height:
    1.55;
}


.feature-list li::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    8px;

  width:
    5px;

  height:
    5px;

  background:
    var(--accent);

  border-radius:
    50%;
}


.tags {
  margin-top:
    24px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;
}


.tag {
  padding:
    6px 10px;

  background:
    var(--surface-soft);

  border-radius:
    999px;

  color:
    var(--text-soft);

  font-size:
    10px;

  font-weight:
    650;
}


.product-actions {
  margin-top:
    28px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    9px;
}


.product-visual {
  min-height:
    470px;

  padding:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    linear-gradient(
      145deg,
      #f5f7fb,
      #eef2f8
    );
}


/* --------------------------------------------------
   WTPulse visual
-------------------------------------------------- */

.wt-graphic {
  width:
    100%;

  max-width:
    470px;

  padding:
    20px;

  background:
    #ffffff;

  border:
    1px solid var(--border);

  border-radius:
    18px;

  box-shadow:
    0 12px 28px
    rgba(23, 26, 31, 0.07);
}


.wt-header {
  padding-bottom:
    15px;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    20px;

  border-bottom:
    1px solid var(--border);
}


.wt-header div {
  display:
    grid;

  gap:
    2px;
}


.wt-header strong {
  font-size:
    13px;
}


.wt-header > span,
.wt-overline {
  color:
    var(--text-faint);

  font-size:
    9px;
}


.wt-summary {
  margin-top:
    15px;

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    8px;
}


.wt-summary-card {
  padding:
    11px;

  background:
    var(--surface-soft);

  border-radius:
    10px;
}


.wt-summary-card span {
  display:
    block;

  color:
    var(--text-faint);

  font-size:
    8px;

  text-transform:
    uppercase;
}


.wt-summary-card strong {
  display:
    block;

  margin-top:
    5px;

  font-size:
    13px;
}


.wt-table {
  margin-top:
    17px;

  overflow:
    hidden;

  border:
    1px solid var(--border);

  border-radius:
    11px;
}


.wt-row {
  min-height:
    43px;

  padding:
    0 10px;

  display:
    grid;

  grid-template-columns:
    1.35fr
    0.8fr
    0.8fr
    0.65fr;

  align-items:
    center;

  gap:
    8px;

  border-bottom:
    1px solid var(--border);

  color:
    var(--text-soft);

  font-size:
    9px;
}


.wt-row:last-child {
  border-bottom:
    0;
}


.wt-row strong {
  color:
    var(--text);

  font-size:
    10px;
}


.wt-table-header {
  min-height:
    35px;

  background:
    var(--surface-soft);

  color:
    var(--text-faint);

  font-size:
    8px;

  font-weight:
    700;

  text-transform:
    uppercase;
}


.wt-meta {
  margin-top:
    15px;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    8px;
}


.wt-meta div {
  padding:
    10px;

  background:
    var(--surface-soft);

  border-radius:
    10px;
}


.wt-meta span,
.wt-meta strong {
  display:
    block;
}


.wt-meta span {
  color:
    var(--text-faint);

  font-size:
    8px;
}


.wt-meta strong {
  margin-top:
    3px;

  font-size:
    9px;
}


/* --------------------------------------------------
   EDS visual
-------------------------------------------------- */

.eds-graphic {
  width:
    100%;

  max-width:
    430px;

  display:
    grid;

  gap:
    16px;
}


.eds-flow {
  display:
    grid;

  grid-template-columns:
    1fr
    30px
    1fr
    30px
    1fr;

  align-items:
    center;
}


.eds-node {
  min-height:
    105px;

  padding:
    18px 14px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  background:
    #ffffff;

  border:
    1px solid var(--border);

  border-radius:
    16px;

  box-shadow:
    0 8px 20px
    rgba(23, 26, 31, 0.05);
}


.eds-node strong {
  font-size:
    13px;
}


.eds-node span {
  margin-top:
    5px;

  color:
    var(--text-soft);

  font-size:
    11px;
}


.eds-arrow {
  text-align:
    center;

  color:
    var(--text-faint);

  font-size:
    18px;
}


.eds-actions {
  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap:
    8px;
}


.eds-action {
  min-height:
    64px;

  padding:
    10px 6px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  background:
    rgba(255, 255, 255, 0.85);

  border:
    1px solid var(--border);

  border-radius:
    12px;
}


.eds-action strong {
  font-size:
    10px;
}


.eds-action span {
  margin-top:
    3px;

  color:
    var(--text-faint);

  font-size:
    8px;
}


.eds-output {
  padding:
    14px 16px;

  background:
    #20252d;

  color:
    #dbe3ec;

  border-radius:
    13px;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size:
    10px;

  line-height:
    1.55;

  white-space:
    pre-wrap;
}


/* --------------------------------------------------
   Installation panel
-------------------------------------------------- */

.installation-panel {
  margin-top:
    14px;

  padding:
    13px;

  background:
    #20252d;

  border-radius:
    12px;

  color:
    #e2e7ee;
}


.installation-heading {
  margin-bottom:
    9px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  font-size:
    10px;

  font-weight:
    650;
}


.installation-panel code {
  display:
    block;

  overflow-x:
    auto;

  color:
    #dbe3ec;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  font-size:
    10px;

  white-space:
    nowrap;
}


.copy-button {
  padding:
    3px 7px;

  background:
    transparent;

  border:
    1px solid #444b55;

  border-radius:
    7px;

  color:
    #dbe3ec;

  font-size:
    9px;

  cursor:
    pointer;
}


/* --------------------------------------------------
   Approach
-------------------------------------------------- */

.stack-section {
  background:
    var(--surface-dark);

  color:
    #ffffff;
}


.stack-section
.section-kicker {
  color:
    #aeb7ff;
}


.stack-section
.section-heading p {
  color:
    #aeb4bd;
}


.stack-shell {
  max-width:
    960px;

  margin:
    0 auto;
}


.stack-layer {
  width:
    100%;

  margin-top:
    10px;

  padding:
    22px 26px;

  display:
    grid;

  grid-template-columns:
    210px 1fr;

  gap:
    28px;

  align-items:
    center;

  background:
    rgba(255, 255, 255, 0.04);

  border:
    1px solid rgba(255, 255, 255, 0.09);

  border-radius:
    14px;
}


.stack-title {
  font-size:
    13px;

  font-weight:
    750;
}


.stack-description {
  color:
    #bac0c8;

  font-size:
    12px;

  line-height:
    1.55;
}


.stack-tags {
  margin-top:
    10px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;
}


.stack-tag {
  padding:
    4px 8px;

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius:
    999px;

  color:
    #d7dce2;

  font-size:
    9px;

  font-weight:
    600;
}


/* --------------------------------------------------
   Technology
-------------------------------------------------- */

.technology-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    16px;
}


.technology-card {
  padding:
    24px;

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  box-shadow:
    0 8px 22px
    rgba(23, 26, 31, 0.035);
}


.technology-card h3 {
  margin:
    0;

  font-size:
    15px;

  letter-spacing:
    -0.015em;
}


.technology-card p {
  margin:
    7px 0 0;

  color:
    var(--text-soft);

  font-size:
    11px;

  line-height:
    1.55;
}


.tool-list {
  margin-top:
    18px;

  display:
    grid;

  gap:
    8px;
}


.tool-item {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    6px;
}


.tool {
  padding:
    6px 9px;

  background:
    var(--surface-soft);

  border-radius:
    999px;

  color:
    var(--text-soft);

  font-size:
    10px;

  font-weight:
    650;
}


.product-reference {
  padding:
    4px 7px;

  border:
    1px solid #d8ddf5;

  border-radius:
    999px;

  color:
    var(--accent);

  font-size:
    8px;

  font-weight:
    700;
}


.product-reference:hover {
  background:
    var(--accent-soft);
}


/* --------------------------------------------------
   About
-------------------------------------------------- */

.about-grid {
  display:
    grid;

  grid-template-columns:
    minmax(240px, 0.55fr)
    minmax(0, 1.45fr);

  gap:
    70px;

  align-items:
    start;
}


.about-card {
  padding:
    26px;

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  box-shadow:
    0 8px 22px
    rgba(23, 26, 31, 0.035);
}


.about-card h3 {
  margin:
    0;

  font-size:
    24px;
}


.about-card p {
  margin:
    7px 0 20px;

  color:
    var(--text-soft);

  font-size:
    12px;
}


.about-location {
  margin-bottom:
    20px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  color:
    var(--text-soft);

  font-size:
    11px;

  font-weight:
    600;
}


.about-location::before {
  content:
    "";

  width:
    7px;

  height:
    7px;

  background:
    var(--success);

  border-radius:
    50%;
}


.about-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;
}


.about-copy {
  color:
    var(--text-soft);

  font-size:
    16px;

  line-height:
    1.85;
}


.about-copy p {
  margin:
    0 0 18px;
}


/* --------------------------------------------------
   Footer
-------------------------------------------------- */

footer {
  padding:
    36px 0 42px;

  background:
    #f1f3f6;

  border-top:
    1px solid var(--border);
}


.footer-content {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    24px;
}


.footer-content > div {
  display:
    grid;

  gap:
    5px;
}


.footer-content strong {
  font-size:
    13px;
}


.footer-content span {
  color:
    var(--text-faint);

  font-size:
    10px;
}


/* --------------------------------------------------
   Responsive
-------------------------------------------------- */

@media (
  max-width: 1024px
) {
  .technology-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}


@media (
  max-width: 900px
) {
  section {
    padding:
      76px 0;
  }


  .product-card,
  .product-card-reverse {
    grid-template-columns:
      1fr;
  }


  .product-card
  .product-content {
    order:
      1;
  }


  .product-card
  .product-visual {
    order:
      2;
  }


  .product-card-reverse
  .product-visual {
    order:
      1;
  }


  .product-card-reverse
  .product-content {
    order:
      2;
  }


  .product-visual {
    min-height:
      390px;
  }


  .about-grid {
    grid-template-columns:
      1fr;

    gap:
      34px;
  }
}


@media (
  max-width: 720px
) {
  .technology-grid {
    grid-template-columns:
      1fr;
  }


  .stack-layer {
    grid-template-columns:
      1fr;

    gap:
      10px;
  }
}


@media (
  max-width: 640px
) {
  :root {
    --header-height:
      60px;
  }


  .container {
    width:
      min(
        calc(100% - 28px),
        var(--max-width)
      );
  }


  .header-inner {
    width:
      calc(100% - 20px);
  }


  .brand {
    font-size:
      14px;
  }


  .about-link {
    font-size:
      12px;
  }


  .site-menu {
    left:
      10px;

    right:
      10px;

    min-width:
      auto;
  }


  .hero {
    padding:
      74px 0 64px;
  }


  h1 {
    font-size:
      clamp(
        38px,
        12vw,
        54px
      );
  }


  .hero-copy {
    font-size:
      16px;
  }


  .product-content {
    padding:
      28px;
  }


  .product-visual {
    min-height:
      330px;

    padding:
      20px;
  }


  .eds-flow {
    grid-template-columns:
      1fr;

    gap:
      8px;
  }


  .eds-arrow {
    transform:
      rotate(90deg);
  }


  .eds-actions {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }


  .wt-summary {
    grid-template-columns:
      1fr;
  }


  .wt-row {
    grid-template-columns:
      1.4fr
      0.8fr
      0.7fr
      0.6fr;

    padding:
      0 7px;

    gap:
      5px;
  }


  .wt-meta {
    grid-template-columns:
      1fr;
  }


  .footer-content {
    align-items:
      flex-start;

    flex-direction:
      column;
  }
}


@media (
  max-width: 420px
) {
  .header-inner {
    grid-template-columns:
      44px
      1fr
      54px;

    gap:
      6px;
  }


  .brand {
    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;
  }


  .product-actions,
  .about-actions {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .button {
    width:
      100%;
  }
}