:root {
      color-scheme: light;
      --bg: #e8eef6;
      --surface: #e8eef6;
      --light: #ffffff;
      --shadow: #c5cedb;
      --text: #303947;
      --muted: #687383;
      --soft: #8792a2;
      --accent: #d94645;
      --accent-dark: #bb3332;
      --accent-soft: #f4d8da;
      --line: rgba(69, 82, 101, 0.12);
      --radius-lg: 34px;
      --radius-md: 24px;
      --radius-sm: 17px;
      --raised:
        14px 14px 30px var(--shadow),
        -14px -14px 30px var(--light);
      --raised-soft:
        8px 8px 18px rgba(197, 206, 219, 0.88),
        -8px -8px 18px rgba(255, 255, 255, 0.92);
      --pressed:
        inset 5px 5px 11px rgba(197, 206, 219, 0.85),
        inset -5px -5px 11px rgba(255, 255, 255, 0.92);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      background: var(--bg);
    }

    body {
      min-width: 320px;
      min-height: 100vh;
      margin: 0;
      overflow-x: hidden;
      font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
      -webkit-font-smoothing: antialiased;
      color: var(--text);
      background:
        radial-gradient(circle at 8% 5%, rgba(255, 255, 255, 0.82), transparent 24rem),
        radial-gradient(circle at 92% 46%, rgba(217, 70, 69, 0.065), transparent 30rem),
        var(--bg);
    }

    a {
      color: inherit;
    }

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

    .skip-link {
      position: fixed;
      z-index: 100;
      top: 12px;
      left: 12px;
      padding: 10px 14px;
      border-radius: 12px;
      background: var(--text);
      color: white;
      transform: translateY(-160%);
      transition: transform 180ms ease;
    }

    .skip-link:focus {
      transform: translateY(0);
    }

    .page {
      width: min(1180px, calc(100% - 36px));
      margin: 0 auto;
      padding:
        max(22px, env(safe-area-inset-top))
        0
        max(32px, env(safe-area-inset-bottom));
    }

    .topbar {
      min-height: 82px;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      border-radius: var(--radius-md);
      background: rgba(232, 238, 246, 0.84);
      box-shadow: var(--pressed);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .brand {
      min-width: 0;
      display: inline-flex;
      align-items: center;
      padding: 7px 12px;
      border-radius: 16px;
      background: var(--surface);
      box-shadow: var(--raised-soft);
      text-decoration: none;
      transition: transform 160ms ease, box-shadow 160ms ease;
    }

    .brand:hover,
    .brand:focus-visible {
      transform: translateY(-2px);
      outline: none;
    }

    .brand:active {
      transform: translateY(1px);
      box-shadow: var(--pressed);
    }

    .brand-logo {
      display: block;
      width: clamp(78px, 9vw, 99px);
      height: auto;
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nav-link {
      padding: 11px 14px;
      border-radius: 13px;
      color: var(--muted);
      background: var(--surface);
      box-shadow: var(--raised-soft);
      font-size: 14px;
      font-weight: 650;
      text-decoration: none;
      transition: color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    }

    .nav-link:hover,
    .nav-link:focus-visible {
      color: var(--text);
      transform: translateY(-2px);
      outline: none;
    }

    .nav-link:active {
      transform: translateY(1px);
      box-shadow: var(--pressed);
    }

    .hero {
      position: relative;
      isolation: isolate;
      min-height: 590px;
      margin-top: 42px;
      padding: clamp(38px, 7vw, 82px);
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
      align-items: center;
      gap: clamp(34px, 7vw, 86px);
      border-radius: var(--radius-lg);
      background: var(--surface);
      box-shadow: var(--pressed);
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      z-index: -1;
      width: 430px;
      height: 430px;
      right: -190px;
      top: -190px;
      border-radius: 50%;
      border: 74px solid rgba(217, 70, 69, 0.06);
    }

    .eyebrow {
      width: fit-content;
      margin: 0 0 23px;
      padding: 10px 14px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      border-radius: 999px;
      color: var(--accent-dark);
      background: var(--surface);
      box-shadow: var(--pressed);
      font-size: 12px;
      font-weight: 780;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .label-mark {
      width: 15px;
      height: 15px;
      flex: 0 0 15px;
      object-fit: contain;
    }

    h1 {
      max-width: 740px;
      margin: 0;
      font-size: clamp(34px, 5.4vw, 60px);
      line-height: 0.99;
      letter-spacing: -0.052em;
    }

    .accent {
      color: var(--accent);
    }

    .lead {
      max-width: 650px;
      margin: 26px 0 0;
      color: var(--muted);
      font-size: clamp(13px, 1.54vw, 16px);
      line-height: 1.62;
    }

    .actions {
      margin-top: 36px;
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .button {
      min-height: 54px;
      padding: 0 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: 0;
      border-radius: var(--radius-sm);
      font: inherit;
      font-size: 15px;
      font-weight: 760;
      text-decoration: none;
      cursor: pointer;
      transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
    }

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

    .button:active {
      transform: translateY(1px);
    }

    .button:focus-visible {
      outline: 3px solid rgba(217, 70, 69, 0.24);
      outline-offset: 4px;
    }

    .button-primary {
      color: white;
      background: var(--accent);
      box-shadow:
        8px 8px 18px rgba(190, 197, 208, 0.92),
        -8px -8px 18px rgba(255, 255, 255, 0.92),
        inset 0 -2px 0 rgba(115, 20, 20, 0.15);
    }

    .button-primary:hover {
      filter: brightness(1.035);
    }

    .button-secondary {
      color: var(--text);
      background: var(--surface);
      box-shadow: var(--raised-soft);
    }

    .button svg {
      width: 18px;
      height: 18px;
    }

    .fabric {
      position: relative;
      width: min(100%, 350px);
      aspect-ratio: 1;
      margin: 0 auto;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--surface);
      box-shadow: var(--pressed);
    }

    .fabric::before,
    .fabric::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .fabric::before {
      inset: 12%;
      box-shadow: var(--pressed);
    }

    .fabric::after {
      inset: 28%;
      background: var(--surface);
      box-shadow: var(--pressed);
    }

    .fabric-core {
      position: relative;
      z-index: 2;
      width: 31.5%;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
    }

    .fabric-core img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .node {
      position: absolute;
      z-index: 3;
      width: 17px;
      height: 17px;
      border: 4px solid var(--bg);
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 3px 3px 8px rgba(155, 165, 179, 0.65);
    }

    .node-a { top: 13%; left: 48%; }
    .node-b { top: 46%; right: 12%; }
    .node-c { bottom: 12%; left: 47%; }
    .node-d { top: 46%; left: 12%; }

    .section {
      padding-top: 112px;
      scroll-margin-top: 28px;
    }

    .section-kicker {
      width: fit-content;
      margin: 0 auto 16px;
      padding: 9px 13px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 999px;
      background: var(--surface);
      box-shadow: var(--pressed);
      color: var(--accent);
      font-size: 12px;
      font-weight: 820;
      letter-spacing: 0.14em;
      text-align: center;
      text-transform: uppercase;
    }

    h2 {
      max-width: 760px;
      margin: 0 auto;
      font-size: clamp(31px, 4.7vw, 50px);
      line-height: 1.08;
      letter-spacing: -0.038em;
      text-align: center;
    }

    .section-intro {
      max-width: 700px;
      margin: 19px auto 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.65;
      text-align: center;
    }

    .service-grid {
      margin-top: 42px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }

    .service-card {
      min-height: 294px;
      padding: 30px;
      border-radius: var(--radius-md);
      background: var(--surface);
      box-shadow: var(--pressed);
    }

    .service-icon {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      color: var(--accent);
      box-shadow: var(--pressed);
    }

    .service-icon svg {
      width: 28px;
      height: 28px;
    }

    .service-card h3 {
      margin: 25px 0 12px;
      font-size: 21px;
      line-height: 1.25;
      letter-spacing: -0.02em;
    }

    .service-card p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.7;
    }

    .principles {
      margin-top: 42px;
      padding: clamp(26px, 5vw, 54px);
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: clamp(28px, 6vw, 76px);
      align-items: center;
      border-radius: var(--radius-lg);
      box-shadow: var(--pressed);
    }

    .principles-copy h3 {
      margin: 0;
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.1;
      letter-spacing: -0.036em;
    }

    .principles-copy p {
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.65;
    }

    .principle-list {
      display: grid;
      gap: 13px;
    }

    .principle {
      padding: 18px 20px;
      display: flex;
      align-items: center;
      gap: 14px;
      border-radius: var(--radius-sm);
      background: var(--surface);
      box-shadow: var(--pressed);
      color: var(--text);
      font-size: 15px;
      font-weight: 680;
    }

    .check {
      width: 26px;
      height: 26px;
      flex: 0 0 26px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: white;
      background: var(--accent);
    }

    .check svg {
      width: 15px;
      height: 15px;
    }

    .access-section {
      margin-top: 112px;
      scroll-margin-top: 28px;
    }

    .access-kicker {
      margin: 0 auto 18px;
    }

    .access-card {
      margin-top: 0;
      padding: clamp(38px, 7vw, 74px);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 32px;
      border-radius: var(--radius-lg);
      background: var(--surface);
      box-shadow: var(--pressed);
    }

    .access-card h2 {
      margin: 0;
      text-align: left;
    }

    .access-card p {
      max-width: 670px;
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.65;
    }

    footer {
      margin-top: 46px;
      padding: 18px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      color: var(--muted);
      font-size: 13px;
      border-radius: var(--radius-md);
      background: var(--surface);
      box-shadow: var(--pressed);
    }

    .footer-logo {
      display: block;
      width: clamp(66px, 8.5vw, 87px);
      height: auto;
    }

    .copyright {
      color: var(--text);
      line-height: 1.5;
      text-align: right;
    }

    .back-to-top {
      --footer-overlap: 0px;
      position: fixed;
      z-index: 30;
      right: max(20px, env(safe-area-inset-right));
      bottom: calc(max(20px, env(safe-area-inset-bottom)) + var(--footer-overlap));
      min-width: 70px;
      min-height: 46px;
      padding: 0 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 15px;
      color: var(--text);
      background: var(--surface);
      box-shadow: var(--raised-soft);
      font-size: 13px;
      font-weight: 760;
      text-decoration: none;
      opacity: 0;
      pointer-events: none;
      transform: translateY(12px);
      transition: opacity 180ms ease, transform 180ms ease, bottom 120ms linear, box-shadow 160ms ease;
    }

    .back-to-top.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .back-to-top:hover,
    .back-to-top:focus-visible {
      transform: translateY(-2px);
      outline: none;
    }

    .back-to-top:active {
      transform: translateY(1px);
      box-shadow: var(--pressed);
    }

    .back-to-top svg {
      width: 16px;
      height: 16px;
    }

    @media (max-width: 900px) {
      .nav-link[data-nav="technology"] {
        display: none;
      }

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

      .hero-visual {
        order: -1;
      }

      .fabric {
        width: min(74vw, 310px);
      }

      .hero-copy {
        text-align: center;
      }

      .eyebrow,
      .actions {
        margin-left: auto;
        margin-right: auto;
      }

      .lead {
        margin-left: auto;
        margin-right: auto;
      }

      .actions {
        justify-content: center;
      }

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

      .service-card {
        min-height: 0;
      }

      .principles,
      .access-card {
        grid-template-columns: 1fr;
      }

      .access-card h2,
      .access-card p {
        text-align: center;
      }

      .access-card .button {
        justify-self: center;
      }
    }

    @media (max-width: 620px) {
      .page {
        width: min(100% - 24px, 1180px);
      }

      .topbar {
        min-height: 72px;
        padding: 11px 13px;
      }

      .brand {
        padding: 7px 9px;
      }

      .brand-logo {
        width: 66px;
      }

      .nav-link:not(.nav-cta) {
        display: none;
      }

      .nav-cta {
        padding: 10px 12px;
        color: var(--accent-dark);
      }

      .hero {
        margin-top: 24px;
        padding: 34px 22px 40px;
        border-radius: 28px;
      }

      h1 {
        font-size: clamp(31px, 10.15vw, 46px);
      }

      .lead {
        font-size: 12.3px;
      }

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

      .button {
        width: 100%;
      }

      .section {
        padding-top: 84px;
      }

      .service-grid {
        gap: 18px;
      }

      .service-card {
        padding: 25px;
      }

      .principles {
        padding: 26px 18px;
        border-radius: 26px;
      }

      .access-section {
        margin-top: 84px;
      }

      .access-card {
        padding: 38px 22px;
        border-radius: 28px;
      }

      footer {
        align-items: center;
        flex-direction: column;
      }

      .footer-logo {
        width: 78px;
      }

      .copyright {
        text-align: center;
      }

      .back-to-top {
        right: max(14px, env(safe-area-inset-right));
        min-width: 62px;
        min-height: 42px;
        padding: 0 13px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
      }
    }
/* SDS ecosystem edition. Original AXELUS identity retained. */
:root { --muted: #526071; --accent: #c33838; --accent-dark: #a62b2b; }
.topbar { gap: 14px; flex-wrap: wrap; }
.nav { flex-wrap: wrap; justify-content: flex-end; }
.nav-link.nav-cta { background: var(--accent); color: #fff; }
.nav-link.nav-cta:hover, .nav-link.nav-cta:focus-visible { background: var(--accent-dark); color: #fff; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 4px; }
.brand:focus-visible, .nav-link:focus-visible, .back-to-top:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 4px; }
h1 { line-height: 1.06; font-size: clamp(38px, 5.1vw, 61px); }
.lead { font-size: 16px; }
.hero { gap: 38px; padding: clamp(32px, 6vw, 68px); }
.eyebrow { font-size: 10px; letter-spacing: .065em; }
.ecosystem-label { margin: 24px 0 0; color: var(--accent-dark); font-size: 14px; letter-spacing: .07em; font-weight: 750; }
.fabric { width: min(100%, 320px); }
.fabric-core { width: 35%; }
.fabric-label { position: absolute; z-index: 4; padding: 10px 15px; border-radius: 14px; background: var(--surface); box-shadow: var(--raised-soft); color: var(--accent-dark); font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.fabric-sdn { top: 7%; left: 36%; }
.fabric-sdm { bottom: 15%; left: 1%; }
.fabric-sdt { bottom: 15%; right: 1%; }
.service-card { display: flex; flex-direction: column; min-height: 410px; }
.service-card h3 { font-size: 32px; margin-bottom: 6px; }
.service-card .service-name { color: var(--text); font-size: 12px; font-weight: 650; margin-bottom: 18px; }
.service-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.status { color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 7px 10px; font-size: 10px; line-height: 1.4; font-weight: 700; }
.status-live { color: #356746; border-color: #35674650; }
.card-link { width: fit-content; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 24px; color: var(--accent-dark); text-decoration: none; font-size: 14px; font-weight: 750; }
.card-note { margin-top: auto !important; padding-top: 24px; font-size: 12px !important; }
.account-button { margin-top: auto; align-self: flex-start; }
.principle { align-items: flex-start; }
.principle strong { display: block; margin-bottom: 5px; }
.principle p { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--muted); }
.section-kicker { max-width: 100%; }
.access-card h2 { font-size: clamp(30px, 4vw, 43px); }
.access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.access-option { padding: clamp(26px, 4vw, 40px); border-radius: var(--radius-md); box-shadow: var(--pressed); display: flex; flex-direction: column; }
.access-option h3 { font-size: 29px; line-height: 1.15; letter-spacing: -.03em; margin: 24px 0 14px; }
.access-option p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0; }
.access-option ol { padding-left: 23px; color: var(--muted); font-size: 15px; line-height: 1.65; margin: 22px 0; }
.access-option li { padding-left: 5px; margin-bottom: 12px; }
.access-option li::marker { color: var(--accent-dark); font-weight: 750; }
.access-option .access-buttons { display: grid; gap: 12px; margin-top: auto; padding-top: 20px; }
.payment-methods { display: grid; gap: 13px; margin: 24px 0; }
.payment-method { padding: 17px 18px; border-radius: 16px; box-shadow: var(--pressed); }
.payment-method strong { display: block; font-size: 15px; margin-bottom: 4px; }
.payment-method p { font-size: 13px; }
.payment-notice { border-top: 1px solid var(--line); padding-top: 22px; margin-top: auto !important; }
.existing-access { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 30px; color: var(--muted); font-size: 14px; text-align: center; }
.existing-access a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-dark); font-weight: 750; }
@media (max-width: 900px) { .access-grid { grid-template-columns: 1fr; } }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.footer-links a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
footer { justify-content: space-between; flex-direction: row !important; flex-wrap: nowrap; gap: 12px; padding: 18px 22px; }
footer .footer-logo { width: clamp(56px, 8.5vw, 87px); height: auto; flex-shrink: 0; }
footer .copyright { margin-left: auto; font-size: clamp(9px, 2.55vw, 12px); white-space: nowrap; text-align: right; }
@media (max-width: 900px) { .hero-visual { order: 0; } .fabric { width: min(72vw, 270px); } .hero { gap: 38px; } .service-card { min-height: 360px; } }
@media (max-width: 620px) { .nav { gap: 6px; } .nav-cta { font-size: 12px; padding: 10px; } .brand-logo { width: 72px; } .topbar { padding: 12px; gap: 10px; } .hero { padding: 34px 22px; } .lead { font-size: 15px; } .hero-visual { margin-top: 10px; } h1 { font-size: clamp(36px, 10vw, 48px); } .service-card { min-height: 365px; } .section-intro { font-size: 16px; } .principles { padding: 28px 20px; } footer { padding: 20px 16px; } }
@media (max-width: 620px) { footer { gap: 8px; padding: 18px 12px; } footer .footer-logo { width: 48px; } }
@media (max-width: 380px) { .nav-link.nav-cta { display: inline-flex; } footer .copyright { font-size: 8px; } .eyebrow { font-size: 9px; padding: 10px; } }

/* v018: one footer-logo size shared by all header/footer controls. */
:root{--chrome-width:clamp(56px,8.5vw,87px);--chrome-height:calc(var(--chrome-width)*110/313)}
body .topbar,body .account-topbar{min-height:0;padding:18px 22px;flex-direction:row;flex-wrap:nowrap;align-items:center}
body .topbar .brand,body .topbar>a,body .account-brand{width:var(--chrome-width);height:var(--chrome-height);min-width:0;padding:0;margin:0;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
body .topbar .brand-logo,body .topbar img,body .account-brand .brand-logo,body footer .footer-logo,body .account-footer .footer-logo{display:block;width:var(--chrome-width);height:var(--chrome-height);object-fit:contain;flex-shrink:0}
body .topbar .header-login,body .topbar .nav-link,body .account-topbar .logout-button,body .account-topbar .preview-header-login{width:var(--chrome-width);height:var(--chrome-height);min-height:0;padding:0;margin:0;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;white-space:nowrap}
body .wallet{height:var(--chrome-height);align-items:center}
body footer,body .account-footer{padding:18px 22px;min-height:0;flex-direction:row;flex-wrap:nowrap;align-items:center}
@media(max-width:620px){:root{--chrome-width:48px}body .topbar,body .account-topbar,body footer,body .account-footer{padding:18px 12px}body .topbar .header-login,body .topbar .nav-link,body .account-topbar .logout-button,body .account-topbar .preview-header-login{font-size:8px}body .wallet-label{font-size:9px}body .wallet-balance{font-size:12px}body .account-header-actions{gap:8px}}