:root {
        --bg: #05070c;
        --panel: #0d1018;
        --panel-soft: #111625;
        --line: #1f2940;
        --text: #eaf2ff;
        --muted: #8f9ec0;
        --accent: #5ce7ff;
        --accent-2: #6c74ff;
        --safe-space: clamp(1rem, 2vw, 1.5rem);
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
        color: var(--text);
        background:
          radial-gradient(85rem 80rem at -10% -10%, rgba(108, 116, 255, 0.18), transparent 40%),
          radial-gradient(70rem 65rem at 120% -15%, rgba(92, 231, 255, 0.16), transparent 38%),
          var(--bg);
        min-height: 100vh;
        line-height: 1.5;
      }
      .grid {
        display: grid;
        gap: 1.5rem;
      }
      .container {
        width: min(1120px, calc(100% - 2rem));
        margin: 0 auto;
      }
      .section {
        padding: clamp(2.6rem, 7vw, 5rem) 0;
      }
      .eyebrow {
        color: var(--accent);
        text-transform: uppercase;
        letter-spacing: 0.18em;
        font-size: 0.75rem;
        font-weight: 700;
        margin-bottom: 0.65rem;
      }
      h1, h2, h3 {
        margin: 0;
        line-height: 1.1;
        font-family: Sora, Manrope, system-ui, -apple-system, Segoe UI, sans-serif;
      }
      h1 { font-size: clamp(2rem, 4vw, 3.9rem); }
      h2 { font-size: clamp(1.4rem, 2.5vw, 2.4rem); }
      .subtitle {
        color: var(--muted);
        margin-top: 0.85rem;
        max-width: 70ch;
      }
      p { margin: 0; color: var(--text); }
      a { color: inherit; }

      .site-header {
        position: sticky;
        top: 0;
        z-index: 40;
        backdrop-filter: blur(12px);
        background: rgba(5, 7, 12, 0.72);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }
      .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 68px;
      }
      .brand {
        font-family: Sora, Manrope, sans-serif;
        letter-spacing: 0.03em;
        font-size: 1.2rem;
        font-weight: 700;
      }
      .brand span { color: var(--accent); }
      .nav {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
      }
      .nav a {
        color: #c5d2f0;
        text-decoration: none;
        font-size: 0.92rem;
        font-weight: 500;
      }
      .nav a:hover { color: #fff; }

      .hero {
        padding-top: 4.8rem;
        padding-bottom: 3.5rem;
        position: relative;
        overflow: hidden;
      }
      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(120deg, rgba(92, 231, 255, 0.06), transparent 35%, transparent 65%, rgba(108, 116, 255, 0.06));
        pointer-events: none;
      }
      .hero-panel {
        position: relative;
        z-index: 2;
        border: 1px solid var(--line);
        background:
          linear-gradient(180deg, rgba(12, 18, 29, 0.7), rgba(12, 16, 24, 0.95)),
          var(--panel-soft);
        padding: clamp(1rem, 3vw, 2rem);
      }
      .tagline {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        color: var(--muted);
        font-size: 0.95rem;
        margin-bottom: 0.9rem;
      }
      .hero-actions {
        margin-top: 1.3rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem;
      }
      .btn {
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #f5f8ff;
        background: transparent;
        padding: 0.8rem 1.05rem;
        border-radius: 0.8rem;
        font: inherit;
        text-decoration: none;
        font-weight: 600;
        display: inline-block;
        transition: transform 0.2s ease, border-color 0.2s ease;
      }
      .btn:hover,
      .btn:focus-visible { border-color: #fff; transform: translateY(-2px); }
      .btn-primary {
        background: linear-gradient(135deg, #5ce7ff 0%, #6c74ff 100%);
        border: none;
        color: #080b14;
      }
      .btn-primary:hover,
      .btn-primary:focus-visible { filter: brightness(1.07); }
      .microgrid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin-top: 1.15rem;
        gap: 0.75rem;
      }
      .chip {
        background: #0a1020;
        border: 1px solid rgba(255, 255, 255, 0.08);
        padding: 0.7rem 0.8rem;
        border-radius: .75rem;
        font-size: 0.9rem;
        color: #d2dcf8;
        text-align: center;
      }

      .card-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
      }
      .card {
        border-radius: 1rem;
        border: 1px solid var(--line);
        background: linear-gradient(180deg, rgba(18, 28, 46, 0.88), rgba(13, 19, 30, 0.95));
        padding: 1.2rem;
        min-height: 260px;
        transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
      }
      .card:hover {
        transform: translateY(-4px);
        border-color: rgba(108, 116, 255, 0.55);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
      }
      .card h3 { margin-bottom: 0.45rem; }
      .card .meta {
        color: var(--muted);
        font-size: 0.85rem;
      }
      .card p {
        margin-top: 0.6rem;
        color: #d3dcf6;
      }
      .inline-link {
        display: inline-block;
        margin-top: 1rem;
        color: #b7f0ff;
        text-decoration: none;
        font-weight: 600;
      }
      .inline-link:hover { text-decoration: underline; }

      .split {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 1rem;
      }
      .kpi-card {
        border: 1px solid var(--line);
        background: var(--panel-soft);
        padding: 1rem;
        border-radius: 0.85rem;
        display: grid;
        gap: .4rem;
      }
      .kpi-value {
        font-family: Sora, Manrope, sans-serif;
        color: var(--accent);
        font-size: 1.95rem;
        font-weight: 700;
      }
      .kpi-label {
        color: var(--muted);
        font-size: 0.9rem;
      }
      .news-list {
        display: grid;
        gap: 0.8rem;
      }
      .news-card {
        display: grid;
        gap: .2rem;
        background: #0f1524;
        border: 1px solid var(--line);
        padding: 0.9rem;
        border-radius: .85rem;
      }
      .news-card time { color: var(--muted); font-size: 0.85rem; }
      .news-card .tag {
        color: #7cf6c7;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.72rem;
      }
      .contact-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
      }
      .contact-card {
        border: 1px dashed var(--line);
        border-radius: 1rem;
        padding: 1rem;
        background: #0b1220;
      }
      .contact-card strong { color: #e3ebff; }
      .small {
        color: var(--muted);
        font-size: 0.9rem;
        margin-top: .4rem;
      }

      .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.55s ease, transform 0.55s ease;
      }
      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }

      .site-footer {
        border-top: 1px solid var(--line);
        padding: 2rem 0;
        color: #9eb1d5;
        font-size: 0.92rem;
      }
      .foot-grid {
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
      }

      .hero-art {
        margin-top: 1rem;
        border-radius: 1rem;
        border: 1px solid var(--line);
        height: 220px;
        position: relative;
        overflow: hidden;
        background:
          linear-gradient(180deg, rgba(255,255,255,.02), transparent),
          repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 44px),
          repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 52px);
      }
      .hero-art .node {
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        opacity: .9;
        animation: float 8s ease-in-out infinite;
      }
      .hero-art .node:nth-child(1) { top: 28%; left: 16%; animation-delay: 0s; }
      .hero-art .node:nth-child(2) { top: 70%; left: 40%; animation-delay: 1.2s; }
      .hero-art .node:nth-child(3) { top: 22%; left: 70%; animation-delay: 0.5s; }
      .hero-art .node:nth-child(4) { top: 62%; left: 80%; animation-delay: 1.7s; }
      .hero-art .line {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(90deg, transparent, rgba(92, 231, 255, 0.2), transparent);
        transform: translateX(-100%);
        animation: sweep 12s linear infinite;
      }
      @keyframes float {
        0%,100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
      }
      @keyframes sweep {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
      }

      .audiences {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: .9rem;
      }
      .audience-card {
        border: 1px solid rgba(255,255,255, .14);
        background: #0a101d;
        border-radius: .8rem;
        padding: .9rem;
      }
      .audience-card h4 { font-size: 1rem; margin-bottom: .35rem; }
      .audience-card p { color: #c4d2ef; font-size: .92rem; }
      .timeline {
        border-left: 2px solid var(--line);
        padding-left: 1rem;
        margin: 0;
        display: grid;
        gap: .7rem;
      }
      .timeline li {
        list-style: none;
        position: relative;
        padding-bottom: .85rem;
      }
      .timeline li::before {
        content: '';
        position: absolute;
        left: -1.48rem;
        top: .28rem;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--accent);
      }
      .timeline strong { color: #f6faff; display: inline-block; width: 6.2rem; }

      @media (max-width: 980px) {
        .card-grid,
        .microgrid,
        .split,
        .contact-grid,
        .audiences {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 700px) {
        .header-inner {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.7rem;
          padding-top: .6rem;
          padding-bottom: .6rem;
        }
        .nav { gap: .65rem; }
        .card-grid,
        .microgrid,
        .split,
        .contact-grid,
        .audiences {
          grid-template-columns: 1fr;
        }
        .hero-art { height: 160px; }
        .foot-grid {
          flex-direction: column;
          align-items: flex-start;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .reveal,
        .hero-art .node,
        .hero-art .line {
          transition: none;
          animation: none;
        }
      }

      html { scroll-padding-top: 95px; }
      .brand { display:flex; align-items:center; gap:1rem; text-decoration:none; }
      .brand img { width:160px; height:44px; object-fit:contain; }
      .brand .corporate-label { color:var(--muted); font:500 .7rem Manrope,sans-serif; letter-spacing:.15em; border-left:1px solid var(--line); padding-left:1rem; }
      .hero-panel { border-radius:1.1rem; padding:clamp(1.5rem,4vw,3.5rem); }
      .hero h1 { font-size:clamp(2.5rem,5.3vw,4.5rem); max-width:900px; letter-spacing:-.045em; line-height:1.08; }
      .hero h1 span { color:var(--accent); }
      .hero .subtitle { max-width:660px; font-size:1.08rem; line-height:1.8; }
      .hero-art { display:flex; align-items:center; justify-content:center; gap:clamp(.5rem,5vw,4rem); }
      .ecosystem-label { position:relative; z-index:1; border:1px solid var(--line); background:#0d1422; border-radius:12px; padding:1rem 1.2rem; color:#d4e3ff; font-family:Sora,sans-serif; font-size:clamp(.7rem,1.5vw,.95rem); }
      .ecosystem-label:nth-of-type(2) { border-color:#5ce7ff70; color:var(--accent); }
      .section-heading { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:1.6rem; }
      .card { display:flex; flex-direction:column; min-height:300px; }
      .card .inline-link { margin-top:auto; padding-top:1.6rem; }
      .product-number { font-size:.8rem; color:var(--accent); letter-spacing:.15em; margin-bottom:1.5rem; }
      .product-tags { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.1rem; }
      .product-tags span { border:1px solid var(--line); border-radius:5px; padding:.2rem .5rem; color:var(--muted); font-size:.75rem; }
      .about-copy p + p { margin-top:1rem; }
      .audiences { grid-template-columns:1fr 1fr; }
      .audience-card h3 { font-size:1rem; margin:.3rem 0 .7rem; }
      .investor-panel { background:var(--panel); border:1px solid var(--line); border-radius:1rem; padding:clamp(1.4rem,4vw,2.8rem); }
      .investor-panel .split { gap:2rem; align-items:center; }
      .news-card h3 { font-size:1.12rem; line-height:1.4; }
      .news-card { padding:1.3rem; text-decoration:none; }
      .news-card:hover { border-color:var(--accent); }
      .contact-card a { overflow-wrap:anywhere; }
      .contact-grid { grid-template-columns:1fr 1fr; }
      .section + .section { border-top:1px solid #1f294070; }
      .reveal { opacity:1; transform:none; }
      .js-motion .reveal { opacity:0; transform:translateY(15px); }
      .js-motion .reveal.visible { opacity:1; transform:none; }
      a:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
      .skip-link { position:absolute; left:1rem; top:-100px; z-index:100; padding:1rem; background:var(--text); color:var(--bg); }
      .skip-link:focus { top:1rem; }
      .menu-toggle { display:none; }
      .footer-links { display:flex; flex-wrap:wrap; gap:1rem; }
      .footer-links a { text-decoration:none; }
      @media(max-width:700px) { .header-inner { flex-direction:row; align-items:center; position:relative; } .brand img{width:135px} .corporate-label{display:none} .menu-toggle{display:block;background:var(--panel);color:var(--text);border:1px solid var(--line);padding:.6rem .8rem;border-radius:6px;font:inherit} .nav{position:absolute;top:100%;left:-1rem;right:-1rem;background:#0d1018;padding:1rem;display:flex;border-bottom:1px solid var(--line)} .js-nav .nav{display:none} .js-nav .nav.is-open{display:flex} .section-heading{display:block}.section-heading .inline-link{margin-top:.6rem} .contact-grid{grid-template-columns:1fr}.hero{padding-top:2rem}.ecosystem-label{padding:.6rem}.hero-art{height:150px}.audiences{grid-template-columns:1fr 1fr} }
      @media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important}.reveal,.js-motion .reveal{opacity:1;transform:none} }
    
/* Homepage refinements */
:root{--muted:#a7b5d1}
body{overflow-wrap:break-word}
.site-header{background:rgba(5,7,12,.96);backdrop-filter:none}
.header-inner{min-height:82px}
.nav a{position:relative;padding:.6rem 0}
.nav a[aria-current="location"]{color:var(--accent)}
.nav a[aria-current="location"]::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent)}
.hero{padding-top:3.5rem}
.hero-panel{background:#0c121e}
.hero .eyebrow{margin-bottom:1.2rem}
.hero .subtitle{margin-top:1.5rem}
.hero-actions{margin-top:1.7rem}
.btn-primary{background:var(--accent)}
.btn{border-radius:.5rem;min-height:46px}
.microgrid{margin-top:2rem}
.chip{background:#101929;border-color:#2b3850;font-size:.85rem}
.hero-art{height:170px;margin-top:1.25rem}
.hero-art::before{content:"";position:absolute;left:15%;right:15%;top:50%;height:1px;background:#5ce7ff66}
.ecosystem-label{text-decoration:none;transition:border-color .2s,transform .2s}
.ecosystem-label:hover{border-color:var(--accent);transform:translateY(-3px)}
.ecosystem-label:nth-of-type(2){box-shadow:0 0 35px #5ce7ff0c}
.card{padding:1.6rem;background:#0e1624;min-height:350px}
.card h3{font-size:1.45rem;letter-spacing:-.025em}
.card p{line-height:1.75}
.product-number{font-size:.75rem;letter-spacing:.11em}
.product-tags{margin-bottom:.4rem}
.section-heading .subtitle{max-width:680px}
.about-copy{padding-right:1rem}
.about-copy .subtitle{line-height:1.85}
.audience-card{padding:1.3rem}
.audience-card p{line-height:1.7}
.investor-panel{width:min(1120px,calc(100% - 2rem))}
.investor-panel h2{line-height:1.25}
.kpi-card{padding:1.6rem}
.kpi-value{font-size:1.6rem}
.news-card{gap:.7rem}
.contact-card{padding:1.6rem;border-style:solid}
.contact-card h3{font-size:1.2rem}
.contact-card .small{line-height:1.7;margin-top:.8rem}
.contact-options{margin-top:1rem;display:flex;gap:1rem;flex-wrap:wrap}
.contact-options .inline-link{margin-top:0}
.site-footer{padding:2.8rem 0}
.footer-bottom{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.8rem}
.footer-bottom a{text-decoration:none}
@media(min-width:701px) and (max-width:980px){.brand .corporate-label{display:none}.nav{gap:.8rem}.nav a{font-size:.85rem}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card{padding:1.1rem}.card h3{font-size:1.15rem}.audiences{grid-template-columns:1fr 1fr}.product-number{font-size:.7rem}}
@media(max-width:700px){html{scroll-padding-top:92px}.header-inner{min-height:74px}.hero{padding-top:1.5rem}.hero h1{font-size:clamp(2rem,8.5vw,3.6rem)}.hero .subtitle{font-size:1rem}.microgrid{grid-template-columns:1fr}.hero-art{height:auto;min-height:150px;padding:1.5rem .6rem;gap:.5rem}.ecosystem-label{font-size:.65rem;padding:.65rem .4rem;text-align:center}.card{min-height:0}.card .inline-link{padding-top:1rem}.about-copy{padding-right:0}.audiences{margin-top:1rem}.footer-bottom{flex-direction:column}.nav{gap:1rem}.nav a{padding:.5rem 0}.section{padding-top:3rem;padding-bottom:3rem}.hero{padding-top:1.5rem}}
@media(max-width:360px){.audiences{grid-template-columns:1fr}.hero-art{flex-direction:column}.hero-art::before{width:1px;left:50%;top:15%;bottom:15%;height:auto}.ecosystem-label{font-size:.8rem;min-width:155px}}

/* Four-product portfolio */
#products .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.trail-card .product-number{color:#a9edc9}
.trail-card{border-color:#324c49}
.availability{margin-top:auto!important;padding-top:1.6rem;color:#a9edc9!important;font-size:.9rem;font-weight:600}
.availability span{color:var(--muted);font-weight:400;font-size:.85rem}
@media(max-width:700px){#products .card-grid{grid-template-columns:1fr}}

/* Include the athlete app in the complete product family. */
.hero-art{gap:1rem;padding:1.25rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center}
.ecosystem-label{text-align:center;padding:1rem .6rem;font-size:clamp(.7rem,1.2vw,.9rem)}
.ecosystem-trail{border-color:#42695b;color:#a9edc9}
@media(max-width:700px){.hero-art{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;min-height:170px}.hero-art::before{display:none}.ecosystem-label{font-size:.75rem;min-width:0;padding:.8rem .4rem}}