:root {
      --bg: #090d13;
      --bg-soft: #10161f;
      --card: #141c26;
      --card-2: #1a2430;

      --text: #f5f7fa;
      --muted: #9aa8b7;
      --soft-text: #c5ced8;

      --line: rgba(255,255,255,.09);
      --line-strong: rgba(255,255,255,.15);

      --orange: #fc4c02;
      --orange-light: #ff7440;

      --brand-blue: #27c2ee;
      --brand-blue-soft: #8fe3f8;

      --green: #4ade80;
      --yellow: #fbbf24;
      --blue: #61a9ff;

      --radius-sm: 12px;
      --radius: 18px;
      --radius-lg: 26px;

      --max: 1120px;

      --shadow:
        0 30px 80px rgba(0,0,0,.34),
        0 8px 24px rgba(0,0,0,.18);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--text);

      background:
        radial-gradient(
          circle at 85% 0%,
          rgba(252,76,2,.13),
          transparent 34rem
        ),
        radial-gradient(
          circle at 0% 35%,
          rgba(39,194,238,.08),
          transparent 34rem
        ),
        var(--bg);

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

      line-height: 1.65;
    }

    img {
      display: block;
      max-width: 100%;
    }

    a {
      color: inherit;
    }

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    .container {
      width: min(calc(100% - 32px), var(--max));
      margin-inline: auto;
    }


    /* =========================================================
       TOP NAV
       ========================================================= */

    .topbar {
      position: sticky;
      top: 0;
      z-index: 100;

      border-bottom: 1px solid rgba(255,255,255,.06);

      background: rgba(9,13,19,.76);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .topbar-inner {
      display: flex;
      min-height: 68px;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;

      color: white;
      text-decoration: none;
      font-weight: 800;
      letter-spacing: -.02em;
    }

    .brand img {
      width: 36px;
      height: 36px;
      border-radius: 10px;
    }

    .brand small {
      display: block;
      margin-top: -3px;
      color: var(--muted);
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .01em;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 22px;

      color: #c4ced8;
      font-size: .92rem;
    }

    .nav-links a {
      text-decoration: none;
    }

    .nav-links a:hover {
      color: white;
    }


    /* =========================================================
       HERO
       ========================================================= */

    .hero {
      padding: 86px 0 62px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;

      margin-bottom: 21px;
      padding: 7px 12px;

      border: 1px solid rgba(252,76,2,.34);
      border-radius: 999px;

      background: rgba(252,76,2,.07);

      color: #ff9b74;

      font-size: .82rem;
      font-weight: 800;
      letter-spacing: .075em;
      text-transform: uppercase;
    }

    .eyebrow-dot {
      width: 7px;
      height: 7px;

      border-radius: 50%;
      background: var(--orange);

      box-shadow: 0 0 14px rgba(252,76,2,.7);
    }

    .eyebrow.compact {
      margin-bottom: 16px;
      padding: 6px 10px;
      font-size: .74rem;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 190px;
      gap: 44px;
      align-items: center;
    }

    .hero-logo {
      position: relative;
    }

    .hero-logo::before {
      position: absolute;
      content: "";

      inset: 12%;
      z-index: -1;

      border-radius: 38%;
      background: rgba(39,194,238,.16);
      filter: blur(32px);
    }

    .hero-logo img {
      width: 180px;
      height: 180px;

      margin-inline: auto;

      border-radius: 37px;

      box-shadow:
        0 32px 80px rgba(39,194,238,.12),
        0 14px 30px rgba(0,0,0,.25);
    }

    h1 {
      max-width: 850px;
      margin: 0;

      font-size: clamp(2.7rem, 7vw, 5.65rem);
      line-height: .98;
      letter-spacing: -.057em;
    }

    h1 span {
      color: var(--orange-light);
    }

    .lead {
      max-width: 760px;

      margin: 28px 0 0;

      color: #c2ccd7;

      font-size: clamp(1.08rem, 2vw, 1.33rem);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;

      margin-top: 31px;
    }

    .button {
      display: inline-flex;
      min-height: 47px;

      align-items: center;
      justify-content: center;

      padding: 0 18px;

      border: 1px solid var(--line);
      border-radius: 12px;

      background: var(--card);

      color: var(--text);
      text-decoration: none;

      font-weight: 750;

      transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease;
    }

    .button.primary {
      border-color: transparent;

      background:
        linear-gradient(
          135deg,
          var(--orange),
          #ff6f32
        );
    }

    .button:hover {
      transform: translateY(-2px);
      border-color: var(--line-strong);
    }


    /* =========================================================
       GENERAL TYPOGRAPHY
       ========================================================= */

    main {
      padding-bottom: 110px;
    }

    section {
      margin-top: 92px;
    }

    .section-kicker {
      margin-bottom: 7px;

      color: var(--orange-light);

      font-size: .82rem;
      font-weight: 850;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    h2 {
      max-width: 820px;

      margin: 0 0 20px;

      font-size: clamp(1.8rem, 4vw, 2.7rem);
      line-height: 1.08;
      letter-spacing: -.04em;
    }

    h3 {
      margin-top: 0;
      margin-bottom: 8px;

      font-size: 1.35rem;
      letter-spacing: -.025em;
    }

    p {
      color: var(--soft-text);
    }

    strong {
      color: white;
    }


    /* =========================================================
       SCREENSHOT / BROWSER FRAME
       ========================================================= */

    .showcase {
      margin-top: 48px;
    }

    .browser-frame {
      overflow: hidden;

      border: 1px solid var(--line);
      border-radius: var(--radius-lg);

      background: #080b10;

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

    .browser-bar {
      display: flex;
      min-height: 48px;

      align-items: center;
      gap: 8px;

      padding: 0 16px;

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

      background:
        linear-gradient(
          180deg,
          rgba(255,255,255,.055),
          rgba(255,255,255,.02)
        );
    }

    .browser-dot {
      width: 10px;
      height: 10px;

      border-radius: 50%;
    }

    .browser-dot.red {
      background: #ff5f57;
    }

    .browser-dot.yellow {
      background: #febc2e;
    }

    .browser-dot.green {
      background: #28c840;
    }

    .browser-title {
      margin-left: 9px;

      color: #8593a3;

      font-size: .78rem;
      font-weight: 700;
    }

    .screenshot-link {
      position: relative;

      display: block;

      cursor: zoom-in;
    }

    .screenshot-link img {
      width: 100%;
      height: auto;
    }

    .screenshot-link::after {
      position: absolute;
      content: "Klik om te vergroten";

      right: 15px;
      bottom: 15px;

      padding: 7px 10px;

      border: 1px solid rgba(255,255,255,.15);
      border-radius: 9px;

      background: rgba(0,0,0,.68);

      color: white;

      font-size: .72rem;
      font-weight: 750;

      opacity: 0;

      transform: translateY(4px);

      transition:
        opacity .15s ease,
        transform .15s ease;
    }

    .screenshot-link:hover::after {
      opacity: 1;
      transform: translateY(0);
    }

    figcaption {
      margin-top: 12px;

      color: var(--muted);

      font-size: .88rem;
      line-height: 1.5;
    }

    .hero-screenshot {
      margin-top: 58px;
    }

    .home-hero {
      padding-bottom: 26px;
    }


    /* =========================================================
       ARCHITECTURE
       ========================================================= */

    .architecture {
      display: grid;
      grid-template-columns: repeat(7, auto);
      gap: 12px;

      align-items: center;
      justify-content: center;

      margin-top: 52px;
      padding: 27px;

      overflow-x: auto;

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

      background:
        linear-gradient(
          135deg,
          rgba(23,30,39,.88),
          rgba(15,21,29,.82)
        );

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

    .architecture .node {
      min-width: 135px;

      padding: 17px 15px;

      border: 1px solid var(--line);
      border-radius: 14px;

      background: var(--card-2);

      text-align: center;
      font-weight: 800;
      white-space: nowrap;
    }

    .architecture .node.strava {
      border-color: rgba(252,76,2,.38);

      background: rgba(252,76,2,.10);

      color: #ff9a72;
    }

    .architecture .node.brand-node {
      border-color: rgba(39,194,238,.29);

      background: rgba(39,194,238,.075);

      color: var(--brand-blue-soft);
    }

    .home-architecture {
      grid-template-columns: repeat(5, auto);
      margin-top: 0;
      align-self: center;
    }

    .arrow {
      color: #748292;
      font-size: 1.4rem;
    }


    /* =========================================================
       CARDS
       ========================================================= */

    .intro-grid,
    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;

      margin-top: 30px;
    }

    .card {
      padding: 24px;

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

      background:
        linear-gradient(
          145deg,
          rgba(26,36,48,.80),
          rgba(17,23,32,.79)
        );
    }

    .card strong {
      display: block;

      margin-bottom: 6px;

      color: white;

      font-size: 1.06rem;
    }

    .card p:last-child {
      margin-bottom: 0;
    }

    .feature-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
      gap: 28px;
      align-items: center;
    }

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

    .article-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .article-card .button {
      margin-top: auto;
    }

    .compact-actions {
      margin-top: 24px;
    }

    .metric {
      display: block;

      color: var(--orange-light);

      font-size: 1.85rem;
      font-weight: 850;
      line-height: 1;
      letter-spacing: -.04em;
    }

    .metric-label {
      display: block;

      margin-top: 8px;

      color: #aab7c4;
      font-size: .9rem;
    }


    /* =========================================================
       STEPS
       ========================================================= */

    .step {
      display: grid;
      grid-template-columns: 64px minmax(0,1fr);
      gap: 24px;

      margin-top: 47px;
    }

    .step-number {
      display: grid;

      width: 56px;
      height: 56px;

      place-items: center;

      border-radius: 16px;

      background:
        linear-gradient(
          135deg,
          var(--orange),
          #ff7a45
        );

      color: white;

      font-size: 1.24rem;
      font-weight: 900;

      box-shadow:
        0 14px 36px rgba(252,76,2,.18);
    }

    .step-visual {
      margin: 25px 0 10px;
    }


    /* =========================================================
       CODE
       ========================================================= */

    code {
      font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;
    }

    pre {
      position: relative;

      margin: 18px 0;

      padding: 20px;

      overflow-x: auto;

      border: 1px solid var(--line);
      border-radius: 14px;

      background: #06090d;

      color: #dce6ef;

      font-size: .87rem;
      line-height: 1.55;

      white-space: pre;
    }

    .inline-code {
      padding: 2px 7px;

      border: 1px solid var(--line);
      border-radius: 6px;

      background: rgba(255,255,255,.055);

      color: #e7eef5;
    }

    .copy-button {
      position: absolute;

      top: 10px;
      right: 10px;

      padding: 6px 9px;

      border: 1px solid var(--line);
      border-radius: 8px;

      background: #18212c;

      color: #aab7c4;

      cursor: pointer;

      font-size: .74rem;
      font-weight: 800;
    }

    .copy-button:hover {
      color: white;
    }


    /* =========================================================
       NOTES
       ========================================================= */

    .note {
      margin: 20px 0;

      padding: 17px 20px;

      border: 1px solid rgba(97,169,255,.24);
      border-left: 4px solid var(--blue);
      border-radius: 12px;

      background: rgba(97,169,255,.055);
    }

    .note.warning {
      border-color: rgba(251,191,36,.22);
      border-left-color: var(--yellow);

      background: rgba(251,191,36,.05);
    }

    .note.success {
      border-color: rgba(74,222,128,.22);
      border-left-color: var(--green);

      background: rgba(74,222,128,.05);
    }

    .note p {
      margin: 0;
    }

    ul,
    ol {
      color: #c4ced8;
    }

    li + li {
      margin-top: 6px;
    }


    /* =========================================================
       CONVERSATION
       ========================================================= */

    .conversation {
      display: grid;
      gap: 13px;

      max-width: 780px;

      margin-top: 28px;
    }

    .bubble {
      max-width: 84%;

      padding: 15px 18px;

      border-radius: 18px;
    }

    .bubble.user {
      justify-self: end;

      border-bottom-right-radius: 5px;

      background: #224d84;

      color: white;
    }

    .bubble.gpt {
      justify-self: start;

      border: 1px solid rgba(252,76,2,.18);
      border-bottom-left-radius: 5px;

      background: rgba(252,76,2,.07);

      color: #f0ddd5;
    }


    /* =========================================================
       DETAILS
       ========================================================= */

    details {
      margin-top: 14px;

      overflow: hidden;

      border: 1px solid var(--line);
      border-radius: 14px;

      background: rgba(22,30,40,.67);
    }

    summary {
      padding: 18px 20px;

      cursor: pointer;

      color: white;

      font-weight: 800;
    }

    details > div {
      padding: 0 20px 20px;
    }

    details pre {
      max-height: 520px;
    }


    /* =========================================================
       LIGHTBOX
       ========================================================= */

    .lightbox {
      position: fixed;
      inset: 0;

      z-index: 9999;

      display: none;

      align-items: center;
      justify-content: center;

      padding: 28px;

      background: rgba(0,0,0,.91);

      cursor: zoom-out;
    }

    .lightbox.open {
      display: flex;
    }

    .lightbox img {
      max-width: min(1500px, 95vw);
      max-height: 91vh;

      border: 1px solid rgba(255,255,255,.14);
      border-radius: 15px;

      box-shadow: 0 40px 100px rgba(0,0,0,.6);
    }

    .lightbox-close {
      position: absolute;

      top: 19px;
      right: 22px;

      width: 42px;
      height: 42px;

      border: 1px solid rgba(255,255,255,.14);
      border-radius: 50%;

      background: rgba(255,255,255,.08);

      color: white;

      cursor: pointer;

      font-size: 1.4rem;
    }


    /* =========================================================
       FOOTER
       ========================================================= */

    .footer {
      padding: 43px 0;

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

      color: var(--muted);

      font-size: .91rem;
    }

    .footer-content {
      display: flex;

      align-items: center;
      justify-content: space-between;

      gap: 24px;
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .footer-brand img {
      width: 34px;
      height: 34px;

      border-radius: 9px;
    }


    /* =========================================================
       RESPONSIVE
       ========================================================= */

    @media (max-width: 900px) {

      .hero {
        padding-top: 58px;
      }

      .hero-grid {
        grid-template-columns: 1fr;
      }

      .hero-logo {
        display: none;
      }

      .architecture {
        justify-content: start;
      }

      .intro-grid,
      .cards {
        grid-template-columns: 1fr;
      }

      .feature-card {
        grid-template-columns: 1fr;
      }

      .home-architecture {
        margin-top: 8px;
      }

      .step {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .step-number {
        width: 46px;
        height: 46px;

        border-radius: 13px;
      }

      .nav-links {
        display: none;
      }

      .footer-content {
        align-items: flex-start;
        flex-direction: column;
      }

    }

    @media (max-width: 560px) {

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

      h1 {
        font-size: 2.8rem;
      }

      .hero-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .button {
        width: 100%;
      }

      .browser-frame {
        border-radius: 17px;
      }

      .lightbox {
        padding: 10px;
      }

    }