/* ========================================
   FutureOne Sports — style.css
   ======================================== */

/* --- Font Faces --- */
@font-face {
   font-family: 'Druk Trial';
   src: url('../fonts/Druk-Bold-Trial.otf') format('opentype');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Druk Trial';
   src: url('../fonts/Druk-Medium-Trial.otf') format('opentype');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}

/* --- Root Variables --- */
:root {
   /* Colors */
   --color-charcoal: #21272A;
   --color-hot-orange: #DB3706;
   --color-white: #FFFFFF;
   --color-beige: #F5F2ED;
   --color-light-blue: #A9D6F4;
   --color-light-pink: #F3C5DF;

   /* Typography — sizes in rem (1rem = 16px) */
   --font-druk: 'Druk Trial', sans-serif;
   --font-montserrat: 'Montserrat', sans-serif;
   --font-fira: 'Fira Mono', monospace;

   --h1-size: 6.25rem;
   --h1-line: 6.4375rem;
   --h1-spacing: 0.125rem;

   --h2-size: 3.5rem;
   --h2-line: 4rem;
   --h2-spacing: 0.072rem;

   --h3-size: 2rem;
   --h3-line: 2.5rem;
   --h3-spacing: 0.061rem;

   --h4-size: 0.875rem;
   --h4-line: 1rem;
   --h4-spacing: -0.00125rem;

   --body-size: 1rem;
   --body-line: 1.375rem;

   --caption-size: 0.75rem;
   --caption-line: 0.875rem;

   /* Spacing */
   --section-px: 5rem;
   --section-py: 7.5rem;
   --gap-sm: 0.75rem;
   --gap-md: 1.5rem;
   --gap-lg: 3.75rem;

   /* Layout */
   --max-width: 90rem;
   --content-max: 82.5rem;
   --nav-height: 3.625rem;
}



/* --- Reset & Base --- */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   font-size: 16px;
   scroll-behavior: smooth;
}

body {
   font-family: var(--font-montserrat);
   font-size: var(--body-size);
   line-height: var(--body-line);
   color: var(--color-charcoal);
   background: var(--color-charcoal);
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

section[id] {
   scroll-margin-top: calc(var(--nav-height) + 2rem);
}

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

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

ul,
ol {
   list-style: none;
}

button {
   border: none;
   background: none;
   cursor: pointer;
   font-family: inherit;
}

.container {
   margin: 0 auto;
   padding: 0 1rem;
   max-width: 82.5rem;
   width: 100%;
}

body .page-content,
body .entry-content,
body .entry-summary {
   margin: 0;
}


/* --- Typography Helpers --- */
.font-druk-bold {
   font-family: var(--font-druk);
   font-weight: 700;
   text-transform: uppercase;
}

.font-druk-medium {
   font-family: var(--font-druk);
   font-weight: 500;
}

.font-montserrat {
   font-family: var(--font-montserrat);
   font-weight: 400;
}

.font-fira {
   font-family: var(--font-fira);
   font-weight: 500;
   text-transform: uppercase;
}

.text-white {
   color: var(--color-white);
}

.text-charcoal {
   color: var(--color-charcoal);
}

.text-orange {
   color: var(--color-hot-orange);
}

.text-muted {
   opacity: 0.6;
}

.text-half {
   opacity: 0.5;
}


/* --- Button Components --- */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-fira);
   font-weight: 500;
   font-size: var(--caption-size);
   line-height: var(--caption-line);
   text-transform: uppercase;
   letter-spacing: 0;
   white-space: nowrap;
   cursor: pointer;
   position: relative;
   overflow: hidden;
}

.btn:active {
   transform: scale(0.97);
}

.btn-primary {
   background: var(--color-hot-orange);
   color: var(--color-white);
   padding: 0.75rem 1.25rem;
   height: 3rem;
   transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
}

.btn-primary:hover {
   background: #c22f04;
   box-shadow: 0 0.25rem 1rem rgba(219, 55, 6, 0.4);
}

.btn-secondary {
   background: transparent;
   color: var(--color-white);
   padding: 0.75rem 1rem;
   height: 3rem;
   transition: background 0.3s ease, transform 0.15s ease;
   border: .0625rem solid rgb(255 255 255 / 12%);
}

.btn-secondary:hover {
   background: rgba(255, 255, 255, 0.08);
}

.btn-secondary-v2 {
   background: transparent;
   color: var(--color-charcoal);
   padding: 0.75rem 1rem;
   height: 3rem;
   border: 0.03125rem solid var(--color-charcoal);
   transition: background 0.3s ease, color 0.3s ease, transform 0.15s ease;
}

.btn-secondary-v2:hover {
   background: var(--color-charcoal);
   color: var(--color-white);
}

.btn-group {
   display: flex;
   gap: var(--gap-sm);
   align-items: center;
}


/* --- Section Label (e.g. [ The Problem ]) --- */
.section-label {
   font-family: var(--font-fira);
   font-weight: 500;
   font-size: var(--caption-size);
   line-height: var(--caption-line);
   text-transform: uppercase;
   letter-spacing: 0;
   opacity: 0.5;
   white-space: nowrap;
}


/* ========================================
    HEADER / NAV
    ======================================== */
.site-header {
   position: fixed;
   top: 1.5rem;
   left: var(--section-px);
   right: var(--section-px);
   z-index: 1000;
   height: var(--nav-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 1.875rem;
   background: rgba(255, 255, 255, 0.12);
   transition: background 0.4s ease, top 0.4s ease, left 0.4s ease, right 0.4s ease, border-radius 0.4s ease;
   border-bottom: .0625rem solid transparent;
}

.site-header.scrolled {
   background: var(--color-charcoal);
   top: 0;
   left: 0;
   right: 0;
   border-radius: 0;
   backdrop-filter: blur(.75rem);
   -webkit-backdrop-filter: blur(.75rem);
   height: calc(var(--nav-height) + 1rem);
   border-bottom: .0625rem solid #383838;
}

.header-logo {
   width: 14.3125rem;
   height: 1.375rem;
   display: flex;
   align-items: center;
   flex-shrink: 0;
   position: relative;
   z-index: 1101;
}

.header-logo img {
   width: 100%;
   height: auto;
}


/* Desktop nav layout */
.header-nav {
   display: contents;
}

.nav-links {
   display: flex;
   align-items: center;
   gap: 0;
   transform: translateX(-2.8125rem);
}

.nav-links a {
   font-family: var(--font-montserrat);
   font-weight: 500;
   font-size: var(--h4-size);
   line-height: var(--h4-line);
   color: var(--color-white);
   letter-spacing: var(--h4-spacing);
   white-space: nowrap;
   padding: 0 1.375rem;
   transition: opacity 0.25s ease;
   position: relative;
}

.nav-links a::before {
   content: '|';
   position: absolute;
   left: -0.125rem;
   top: 50%;
   transform: translateY(-50%);
   color: var(--color-white);
   opacity: 0.2;
   font-family: var(--font-montserrat);
   font-weight: 500;
   font-size: var(--h4-size);
   pointer-events: none;
}

.nav-links a:first-child::before {
   display: none;
}

.nav-links a::after {
   content: '';
   position: absolute;
   bottom: -0.25rem;
   left: 0.625rem;
   right: 0.625rem;
   height: .0625rem;
   background: var(--color-hot-orange);
   transform: scaleX(0);
   transform-origin: right;
   transition: transform 0.3s ease;
   width: calc(100% - 2.75rem);
   margin: 0 auto;
}

.nav-links a:hover {
   opacity: 0.9;
}

.nav-links a:hover::after {
   transform: scaleX(1);
   transform-origin: left;
}

.nav-links a.active {
   color: var(--color-hot-orange);
   opacity: 1;
}

.nav-links a.active::after {
   transform: scaleX(1);
}

.nav-actions {
   display: flex;
   gap: var(--gap-sm);
   align-items: center;
}


/* Hamburger */
.hamburger {
   display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 2rem;
   height: 2rem;
   cursor: pointer;
   z-index: 1101;
   position: relative;
}

.hamburger span {
   display: block;
   width: 1.25rem;
   height: .125rem;
   background: var(--color-white);
   transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger span:nth-child(1) {
   margin-bottom: 0.3rem;
}

.hamburger span:nth-child(2) {
   margin-bottom: 0.3rem;
}

.hamburger.open span:nth-child(1) {
   transform: translateY(0.425rem) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
   opacity: 0;
}

.hamburger.open span:nth-child(3) {
   transform: translateY(-0.425rem) rotate(-45deg);
}


/* ========================================
    HERO SECTION
    ======================================== */
.hero {
   position: relative;
   width: 100%;
   min-height: 49.125rem;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   background: var(--color-charcoal);
}

.hero-bg {
   position: absolute;
   inset: 0;
   z-index: 0;
}

.hero-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center bottom;
}

.hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), linear-gradient(5.37deg, rgba(33, 39, 42, 0.85) 9.89%, rgba(33, 39, 42, 0.85) 14.39%, rgba(33, 39, 42, 0.85) 33.63%, rgba(33, 39, 42, 0) 74.67%);
}

.hero-noise {
   position: absolute;
   inset: 0;
   opacity: 0.1;
   overflow: hidden;
}

.hero-noise img {
   width: 117%;
   height: 134%;
   object-fit: cover;
   position: absolute;
   top: -17%;
   left: -9%;
}

.hero-orb {
   position: absolute;
   top: -12.5rem;
   right: -12.5rem;
   width: 40.375rem;
   height: 40.375rem;
   pointer-events: none;
}

.hero-orb img {
   width: 100%;
   height: 100%;
}

.hero-content {
   position: relative;
   z-index: 2;
   flex: 1;
   display: flex;
   align-items: flex-end;
   padding: 0 var(--section-px) 9.3125rem;
   background-repeat: no-repeat;
   background-size: cover;
}

.hero-inner {
   display: flex;
   gap: 2.625rem;
   align-items: flex-end;
   width: 100%;
}

.hero-headline {
   width: 48.75rem;
   flex-shrink: 0;
}

.hero-headline h1 {
   font-family: var(--font-druk);
   font-weight: 700;
   font-size: var(--h1-size);
   line-height: var(--h1-line);
   letter-spacing: var(--h1-spacing);
   text-transform: uppercase;
   color: var(--color-white);
}

.hero-headline h1 .highlight {
   color: var(--color-hot-orange);
}

.hero-right {
   flex: 1;
   min-width: 0;
   padding-bottom: 1.1875rem;
   display: flex;
   flex-direction: column;
   gap: var(--gap-md);
   max-width: 30rem;
   margin-left: auto;
}

.hero-right p {
   font-family: var(--font-montserrat);
   font-weight: 400;
   font-size: var(--body-size);
   line-height: var(--body-line);
   color: rgba(255, 255, 255, 0.8);
}

.hero-ellipse-left {
   position: absolute;
   left: -13.5625rem;
   bottom: -2.5rem;
   width: 38rem;
   height: 38rem;
   pointer-events: none;
   opacity: 0.5;
}

.hero-ellipse-right {
   position: absolute;
   right: -3rem;
   top: 0;
   width: 33.375rem;
   height: 33.375rem;
   pointer-events: none;
   opacity: 0.5;
}


/* ========================================
    PROBLEM SECTION
    ======================================== */
.section-problem {
   background: var(--color-charcoal);
   padding: var(--section-py) var(--section-px);
   position: relative;
   overflow: hidden;
}

.section-problem::before {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 24.75rem;
   height: 12.875rem;
   background-repeat: no-repeat;
   background-size: 100%;
   background-image: url('data:image/svg+xml,<svg width="396" height="206" viewBox="0 0 396 206" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.03"><path d="M200.133 0L198.27 34.3023C198.083 38.2173 201.251 41.7594 205.164 41.7594H259.018L200.319 65.8083C197.897 66.7404 196.22 69.164 196.033 71.9604L193.983 109.246L160.628 85.7559C158.764 84.4509 156.155 84.078 153.919 85.0102L94.8477 109.246L129.322 73.4518C132.303 70.2825 131.744 65.4354 128.39 62.8255L98.5746 41.7594H156.901C158.764 41.7594 160.628 41.0137 161.932 39.7087L199.946 0.186409L200.133 0Z" fill="white"/><path d="M106.776 96.9409L103.608 130.87C103.235 134.972 106.403 138.514 110.503 138.514H164.17L105.472 162.563C103.049 163.495 101.372 165.918 101.186 168.715L99.1358 206L65.78 182.51C63.9165 181.205 61.3076 180.833 59.0715 181.765L0 206L34.4739 170.206C37.4555 167.037 36.8964 162.19 33.5422 159.58L3.72691 138.514H62.0531C63.9165 138.514 65.5936 137.768 66.898 136.463L106.59 96.9409H106.776Z" fill="white"/><path d="M243.737 96.9409L240.569 130.87C240.196 134.972 243.364 138.514 247.464 138.514H301.131L242.433 162.563C240.01 163.495 238.333 165.918 238.146 168.715L236.097 206L202.741 182.51C200.877 181.205 198.269 180.833 196.032 181.765L136.961 206L171.435 170.206C174.416 167.037 173.857 162.19 170.503 159.58L140.688 138.514H199.014C200.877 138.514 202.555 137.768 203.859 136.463L243.551 96.9409H243.737Z" fill="white"/><path d="M336.911 0L335.048 34.3023C334.861 38.2173 338.029 41.7594 341.943 41.7594H395.797L337.098 65.8083C334.675 66.7404 332.998 69.164 332.812 71.9604L330.762 109.246L297.406 85.7559C295.543 84.4509 292.934 84.078 290.698 85.0102L231.626 109.246L266.1 73.4518C269.081 70.2825 268.522 65.4354 265.168 62.8255L235.353 41.7594H293.679C295.543 41.7594 297.406 41.0137 298.71 39.7087L336.725 0.186409L336.911 0Z" fill="white"/></g></svg>');
}

.problem-grid {
   display: flex;
   gap: 9.125rem;
   align-items: flex-start;
}

.problem-left {
   width: 33.6875rem;
   flex-shrink: 0;
   border-top: .0625rem solid rgba(255, 255, 255, 0.2);
   padding-top: 1.875rem;
   display: flex;
   gap: 3.75rem;
   align-items: flex-start;
}

.problem-left .section-label {
   color: var(--color-white);
   flex-shrink: 0;
}

.problem-left h2 {
   font-family: var(--font-druk);
   font-weight: 700;
   font-size: var(--h2-size);
   line-height: var(--h2-line);
   letter-spacing: var(--h2-spacing);
   text-transform: uppercase;
   color: var(--color-white);
   width: 24.1875rem;
}

.problem-left h2 .muted {
   color: rgba(255, 255, 255, 0.6);
}

.problem-right {
   flex: 1;
   border-top: .0625rem solid rgba(255, 255, 255, 0.2);
   padding-top: 1.875rem;
   display: flex;
   flex-direction: column;
   gap: 3.875rem;
}

.problem-body p {
   font-family: var(--font-montserrat);
   font-weight: 400;
   font-size: var(--body-size);
   line-height: var(--body-line);
   color: var(--color-white);
   opacity: 0.6;
   margin-bottom: 0.25rem;
}

.problem-cta-box {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 28.9375rem;
   height: 7.5625rem;
   padding: 1rem 3rem;
   border: .125rem solid rgba(255, 255, 255, 0.2);
   background: rgba(255, 255, 255, 0.05);
}

.problem-cta-box h2 {
   font-family: var(--font-druk);
   font-weight: 700;
   font-size: var(--h2-size);
   line-height: var(--h2-line);
   letter-spacing: var(--h2-spacing);
   text-transform: uppercase;
   color: var(--color-white);
   white-space: nowrap;
}

.problem-cta-box h2 .highlight {
   color: var(--color-hot-orange);
}

/* ========================================
    PLATFORM SECTION
    ======================================== */
.section-platform {
   background: var(--color-white);
   padding: 6rem var(--section-px);
   display: flex;
   align-items: center;
   gap: var(--gap-md);
   position: relative;
   overflow: hidden;
   min-height: 36.5625rem;
}

.platform-left {
   width: 34.1875rem;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   gap: var(--gap-md);
   align-items: flex-start;
}

.platform-header {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.platform-header .section-label {
   color: var(--color-charcoal);
}

.platform-header h2 {
   font-family: var(--font-druk);
   font-weight: 700;
   font-size: var(--h2-size);
   line-height: var(--h2-line);
   letter-spacing: var(--h2-spacing);
   text-transform: uppercase;
   color: var(--color-charcoal);
}

.platform-header h2 .muted {
   color: rgba(33, 39, 42, 0.6);
}

.platform-body {
   width: 28.875rem;
}

.platform-body p {
   font-family: var(--font-montserrat);
   font-weight: 400;
   font-size: var(--body-size);
   line-height: var(--body-line);
   color: var(--color-charcoal);
   opacity: 0.6;
}

.platform-image {
   position: absolute;
   right: var(--section-px);
   top: 50%;
   transform: translateY(-50%);
   width: 40.5625rem;
   height: 25.625rem;
   top: 0;
   height: calc(100% + .2rem);
   line-height: 0;
   width: 50%;
   right: 0;
}

.platform-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* ======================================== WHO IT'S FOR SECTION ======================================== */
.section-who {
   background: var(--color-charcoal);
   padding: var(--section-py) var(--section-px);
   display: flex;
   flex-direction: column;
   gap: var(--gap-lg);
   align-items: center;
}

.who-header {
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   align-items: center;
}

.who-header .section-label {
   color: var(--color-white);
}

.who-header h2 {
   font-family: var(--font-druk);
   font-weight: 700;
   font-size: var(--h2-size);
   line-height: var(--h2-line);
   letter-spacing: var(--h2-spacing);
   text-transform: uppercase;
   color: var(--color-white);
}

.who-header h2 .muted {
   color: rgba(255, 255, 255, 0.6);
}

.who-card,
.who-card:not(.active) {
   flex: 1 1 25%;
   transition: .35s linear;
}

.who-cards {
   display: flex;
   width: 100%;
}

.who-card {
   padding: 2rem;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   overflow: hidden;
   min-width: 0;

   transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease, background 0.4s ease;
   cursor: pointer;
}

.who-card-icon {
   width: 5.884rem;
   height: 3.0625rem;
}

.who-card-icon img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.who-card h3 {
   font-family: var(--font-druk);
   font-weight: 500;
   font-size: var(--h3-size);
   line-height: var(--h3-line);
   letter-spacing: var(--h3-spacing);
   color: var(--color-white);
}

.who-card p {
   font-family: var(--font-montserrat);
   font-weight: 400;
   font-size: var(--body-size);
   line-height: var(--body-line);
   color: var(--color-white);
   opacity: 0.6;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
   opacity: 0;
}

.who-card .who-card-number {
   font-family: var(--font-druk);
   font-weight: 500;
   font-size: var(--h2-size);
   line-height: var(--h2-line);
   letter-spacing: 0.375rem;
   color: var(--color-white);
   opacity: 0;
   white-space: nowrap;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

.who-card.active {
   flex: 1 1 36%;
   border-top: 0.1875rem solid var(--color-light-blue);
   background: linear-gradient(125.8deg, rgba(169, 214, 244, 0.1) 0%, rgba(243, 197, 223, 0.1) 97%);
   gap: 3rem;
}


.who-card p {
   max-height: unset;
   height: unset;
   min-height: 4.125rem;
}

.who-card.active p {

   opacity: 0.6;
}

.who-card.active .who-card-number {
   max-height: 5rem;
   opacity: 0.2;
}

.who-card:not(.active) {
   flex: 1;
   background: var(--color-charcoal);
   min-height: 24.1875rem;
   border-top: 0.1875rem solid transparent;
}

.who-card:not(.active)+.who-card:not(.active) {
   border-left: .0625rem solid rgba(255, 255, 255, 0.1);
}

.who-card .who-card-icon+div p {
   transform: translateY(2rem);
   transition: transform 0.5s linear, opacity 0.5s linear;
   transition-delay: .4s;
   width: 100%;
   max-width: 35rem;
   min-width: 0;
   height: 0;
   margin-top: .5rem;
   box-sizing: border-box;
}

.who-card:hover .who-card-icon+div p,
.who-card.active .who-card-icon+div p {
   transform: translateY(0);
   visibility: visible;
   opacity: 1;
   position: relative;
   min-height: 6.125rem;
}

.who-card .who-card-icon+div {
   min-width: 0;
   overflow: hidden;
}

.who-card .who-card-number {
   max-height: unset;
   transform: translateY(4rem);
   margin-top: auto;
   transition-delay: .8s;
   transition: .5s ease all;
   transition-delay: .8s;
}

.who-card.active .who-card-number {
   max-height: unset;
   transform: translateY(0rem);
}

.who-card-icon {
   margin-bottom: .5rem;
   position: relative;
}

.who-card-icon::before {
   content: "";
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-size: cover;
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="95" height="49" viewBox="0 0 95 49" fill="none"><path d="M47.6045 0L47.1612 8.15928C47.1169 9.0905 47.8704 9.93304 48.8012 9.93304H61.6111L47.6488 15.6534C47.0726 15.8751 46.6736 16.4516 46.6293 17.1168L46.1417 25.9856L38.2076 20.3982C37.7643 20.0878 37.1438 19.9991 36.6119 20.2208L22.5609 25.9856L30.761 17.4715C31.4702 16.7177 31.3372 15.5647 30.5394 14.9439L23.4474 9.93304H37.3211C37.7643 9.93304 38.2076 9.75566 38.5179 9.44525L47.5601 0.0443399L47.6045 0Z" fill="%23DB3706"/><path d="M25.3981 23.0588L24.6446 31.1294C24.556 32.105 25.3095 32.9475 26.2846 32.9475H39.0502L25.0879 38.6679C24.5116 38.8896 24.1127 39.4661 24.0684 40.1313L23.5808 49L15.6467 43.4127C15.2034 43.1023 14.5829 43.0136 14.051 43.2353L0 49L8.2001 40.486C8.9093 39.7322 8.77633 38.5792 7.97848 37.9584L0.886498 32.9475H14.7602C15.2034 32.9475 15.6023 32.7702 15.9126 32.4597L25.3538 23.0588H25.3981Z" fill="%23DB3706"/><path d="M57.9762 23.0588L57.2227 31.1294C57.1341 32.105 57.8876 32.9475 58.8627 32.9475H71.6283L57.666 38.6679C57.0898 38.8896 56.6908 39.4661 56.6465 40.1313L56.1589 49L48.2248 43.4127C47.7815 43.1023 47.161 43.0136 46.6291 43.2353L32.5781 49L40.7782 40.486C41.4874 39.7322 41.3545 38.5792 40.5566 37.9584L33.4646 32.9475H47.3383C47.7815 32.9475 48.1805 32.7702 48.4908 32.4597L57.9319 23.0588H57.9762Z" fill="%23DB3706"/><path d="M80.1389 0L79.6956 8.15928C79.6513 9.0905 80.4049 9.93304 81.3357 9.93304H94.1456L80.1833 15.6534C79.607 15.8751 79.2081 16.4516 79.1638 17.1168L78.6762 25.9856L70.742 20.3982C70.2988 20.0878 69.6783 19.9991 69.1464 20.2208L55.0953 25.9856L63.2954 17.4715C64.0046 16.7177 63.8717 15.5647 63.0738 14.9439L55.9818 9.93304H69.8555C70.2988 9.93304 70.742 9.75566 71.0523 9.44525L80.0946 0.0443399L80.1389 0Z" fill="%23DB3706"/></svg>');
}

.who-card:not(.active) {
   flex: 1 1 5%;
   transition: none;
   transition-delay: 0s;
}



/* ========================================
    FEATURES SECTION
    ======================================== */
.section-features {
   background: var(--color-charcoal);
   padding: 0 var(--section-px) var(--section-py);
   overflow: visible;
   position: relative;
}

.section-features .container .sf-wrap {
   display: flex;
   justify-content: space-between;
   position: relative;
   align-items: flex-start;
}

.section-features::before {
   content: "";
   position: absolute;
   left: 3.8125rem;
   bottom: 0;
   width: 36.25rem;
   height: 17.625rem;
   background-repeat: no-repeat;
   background-size: cover;
   background-image: url('data:image/svg+xml,<svg width="581" height="283" viewBox="0 0 581 283" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.03"><path d="M293.472 0L290.739 46.9717C290.466 52.3326 295.111 57.1829 300.85 57.1829H379.82L293.745 90.1141C290.193 91.3905 287.733 94.7092 287.46 98.5384L284.454 149.595L235.542 117.429C232.809 115.642 228.984 115.132 225.705 116.408L139.083 149.595L189.635 100.581C194.007 96.2409 193.188 89.6035 188.269 86.0296L144.548 57.1829H230.077C232.809 57.1829 235.542 56.1618 237.455 54.3748L293.198 0.255258L293.472 0Z" fill="white"/><path d="M156.574 132.745L151.929 179.206C151.383 184.823 156.028 189.673 162.04 189.673H240.737L154.662 222.604C151.11 223.881 148.65 227.199 148.377 231.029L145.371 282.085L96.4587 249.919C93.7262 248.132 89.9005 247.622 86.6215 248.898L0 282.085L50.552 233.071C54.9241 228.731 54.1043 222.094 49.1858 218.52L5.46508 189.673H90.9936C93.7262 189.673 96.1854 188.652 98.0982 186.865L156.301 132.745H156.574Z" fill="white"/><path d="M357.412 132.745L352.766 179.206C352.22 184.823 356.865 189.673 362.877 189.673H441.574L355.499 222.604C351.947 223.881 349.487 227.199 349.214 231.029L346.208 282.085L297.296 249.919C294.563 248.132 290.738 247.622 287.459 248.898L200.837 282.085L251.389 233.071C255.761 228.731 254.941 222.094 250.023 218.52L206.302 189.673H291.831C294.563 189.673 297.023 188.652 298.935 186.865L357.138 132.745H357.412Z" fill="white"/><path d="M494.042 0L491.309 46.9717C491.036 52.3326 495.681 57.1829 501.42 57.1829H580.39L494.315 90.1141C490.763 91.3905 488.303 94.7092 488.03 98.5384L485.024 149.595L436.112 117.429C433.379 115.642 429.554 115.132 426.275 116.408L339.653 149.595L390.205 100.581C394.577 96.2409 393.757 89.6035 388.839 86.0296L345.118 57.1829H430.647C433.379 57.1829 436.112 56.1618 438.024 54.3748L493.768 0.255258L494.042 0Z" fill="white"/></g></svg>');
}

.features-left {
   width: 29.0625rem;
   display: flex;
   flex-direction: column;
   gap: 2.5rem;
   position: sticky;
   top: 6rem;
}

.features-copy {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
}

.features-header {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
}

.features-header .section-label {
   color: var(--color-white);
}

.features-header h2 {
   font-family: var(--font-druk);
   font-weight: 700;
   font-size: var(--h2-size);
   line-height: var(--h2-line);
   letter-spacing: var(--h2-spacing);
   text-transform: uppercase;
   color: var(--color-white);
}

.features-header h2 .muted {
   color: rgba(255, 255, 255, 0.6);
}

.features-copy p {
   font-family: var(--font-montserrat);
   font-weight: 400;
   font-size: var(--body-size);
   line-height: var(--body-line);
   color: var(--color-white);
   opacity: 0.6;
}

.features-nav {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   align-items: flex-start;
}

.features-nav-link {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   font-family: var(--font-fira);
   font-weight: 500;
   font-size: var(--caption-size);
   line-height: var(--caption-line);
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.85);
   transition: color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
   pointer-events: none;
}

.features-nav-link::before {
   content: "/";
   color: var(--color-hot-orange);
   opacity: 0;
   transition: opacity 0.25s ease;
}

.features-nav-link:hover {
   color: var(--color-white);
}

.features-nav-link.active {
   color: var(--color-hot-orange);
}

.features-nav-link.active::before {
   opacity: 1;
}

.features-grid {
   width: 42.5625rem;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}

.feature-card {
   width: 100%;
   scroll-margin-top: calc(var(--nav-height) + 3rem);
   padding: 3rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   border-top: .0625rem solid rgba(255, 255, 255, 0.1);
   transition: background 0.35s ease, border-color 0.35s ease, width 0.35s ease, transform 0.35s ease;
   border-left: .25rem solid transparent;
   transition: .5s ease all;
}

.feature-card-number {
   font-family: var(--font-fira);
   font-weight: 500;
   font-size: var(--caption-size);
   line-height: var(--caption-line);
   text-transform: uppercase;
   letter-spacing: 0;
   white-space: nowrap;
}

.feature-card-number .num {
   color: var(--color-hot-orange);
}

.feature-card-number .label {
   color: var(--color-white);
}

.feature-card h3 {
   font-family: var(--font-druk);
   font-weight: 500;
   font-size: var(--h3-size);
   line-height: var(--h3-line);
   letter-spacing: var(--h3-spacing);
   color: var(--color-white);
}

.feature-card p {
   font-family: var(--font-montserrat);
   font-weight: 400;
   font-size: var(--body-size);
   line-height: var(--body-line);
   color: var(--color-white);
   opacity: 0.6;
}

.feature-card.active {
   width: 100%;
   align-self: flex-start;
   border-top-color: transparent;
   border-left: .25rem solid var(--color-light-blue);
   background: linear-gradient(to right, rgba(169, 214, 244, 0.1), rgba(243, 197, 223, 0.1));
   gap: 1.5rem;
}

.feature-card.active .feature-card-number .num {
   color: var(--color-white);
}


/* ========================================
    WHO BUILT IT / STORY SECTION
    ======================================== */
.section-story {
   display: flex;
   align-items: stretch;
   overflow: hidden;
   background: var(--color-beige);
}

.story-content {
   flex: 1;
   background: var(--color-white);
   padding: var(--section-py) var(--section-px) var(--section-py) var(--section-px);
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-right: 1.5rem;
}

.story-inner {
   width: 36.125rem;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
}

.story-inner .section-label {
   color: var(--color-charcoal);
}

.story-inner h2 {
   font-family: var(--font-druk);
   font-weight: 700;
   font-size: var(--h2-size);
   line-height: var(--h2-line);
   letter-spacing: var(--h2-spacing);
   text-transform: uppercase;
   color: var(--color-charcoal);
}

.story-inner h2 .muted {
   color: rgba(33, 39, 42, 0.6);
}

.story-inner p {
   font-family: var(--font-montserrat);
   font-weight: 400;
   font-size: var(--body-size);
   line-height: var(--body-line);
   color: var(--color-charcoal);
   opacity: 0.7;
}

.story-image {
   flex-shrink: 0;
   width: 50%;
   position: relative;
}

.story-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* ========================================
    FAQ SECTION
    ======================================== */
.section-faq {
   position: relative;
   padding: var(--section-py) var(--section-px);
   min-height: 54.5rem;
   overflow: visible;
}

.section-faq .faq-wrap {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
}

.faq-bg {
   position: absolute;
   inset: 0;
   z-index: 0;
}

.faq-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.faq-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), linear-gradient(90deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), linear-gradient(233.15deg, rgba(33, 39, 42, 0) 18.76%, rgba(33, 39, 42, 0.7) 28.53%, rgb(33, 39, 42) 91.33%);
}

.faq-noise {
   position: absolute;
   inset: 0;
   opacity: 0.12;
   overflow: hidden;
}

.faq-noise img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.faq-left {
   z-index: 2;
   width: 18.125rem;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   position: sticky;
   top: 6rem;
   align-self: flex-start;
}

.faq-left .section-label {
   color: var(--color-white);
}

.faq-left h2 {
   font-family: var(--font-druk);
   font-weight: 700;
   font-size: var(--h2-size);
   line-height: var(--h2-line);
   letter-spacing: var(--h2-spacing);
   text-transform: uppercase;
   color: var(--color-white);
}

.faq-list {
   position: relative;
   z-index: 2;
   width: 56.125rem;
   display: flex;
   flex-direction: column;
}

.faq-item {
   border-bottom: .0625rem solid rgba(255, 255, 255, 0.1);
   transition: background 0.3s ease;
}

.faq-item:hover {
   background: rgba(255, 255, 255, 0.02);
}

.faq-question {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.875rem 0;
   cursor: pointer;
   width: 100%;
   gap: 1rem;
}

.faq-question-left {
   display: flex;
   align-items: center;
   gap: 1.5rem;
   flex: 1;
}

.faq-num {
   font-family: var(--font-montserrat);
   font-weight: 400;
   font-size: var(--body-size);
   line-height: var(--body-line);
   color: var(--color-white);
   opacity: 0.3;
   transition: opacity 0.3s ease, color 0.3s ease;
}

.faq-item.active .faq-num {
   opacity: 1;
   color: var(--color-hot-orange);
}

.faq-question-left h3 {
   font-family: var(--font-druk);
   font-weight: 500;
   font-size: var(--h3-size);
   line-height: var(--h3-line);
   letter-spacing: var(--h3-spacing);
   color: var(--color-white);
   transition: color 0.3s ease;
}

.faq-item.active .faq-question-left h3 {
   color: var(--color-hot-orange);
}

.faq-icon {
   width: 1.25rem;
   height: 1.25rem;
   flex-shrink: 0;
   position: relative;
}

.faq-icon::before,
.faq-icon::after {
   content: '';
   position: absolute;
   background: var(--color-white);
   transition: transform 0.3s ease;
}

.faq-icon::before {
   width: 100%;
   height: .125rem;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
}

.faq-icon::after {
   width: .125rem;
   height: 100%;
   left: 50%;
   top: 0;
   transform: translateX(-50%);
}

.faq-item.active .faq-icon::after {
   transform: translateX(-50%) rotate(90deg);
}

.faq-answer {
   overflow: hidden;
   max-height: 0;
   transition: max-height 0.4s ease;
}

.faq-answer-inner {
   padding: 0.3125rem 0 1.875rem 2.75rem;
   padding-right: 3.5rem;
}

.faq-answer-inner p {
   font-family: var(--font-montserrat);
   font-weight: 400;
   font-size: var(--body-size);
   line-height: var(--body-line);
   color: #D1D5DC;
}

.faq-item.active .faq-answer {
   max-height: 12.5rem;
}

.faq-question {
   transition: .4s ease all;
}

.faq-question:hover {
   padding: 1.875rem 1rem;
}

.faq-item.active .faq-question {
   padding-bottom: 0.3125rem;
}

.faq-answer-inner a {
   text-decoration: underline;
}

/* ========================================
    FINAL CTA SECTION
    ======================================== */
.section-cta {
   background: var(--color-charcoal);
   display: flex;
   align-items: center;
   justify-content: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.cta-outer {
   flex: 1;
   overflow: hidden;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 5rem;
   min-height: 34rem;
}

.cta-gradient {
   position: absolute;
   inset: 0;
   z-index: 0;
   background: radial-gradient(ellipse at 50% 100%, rgba(219, 55, 6, 0.25) 0%, rgba(169, 214, 244, 0.1) 50%, rgba(67, 99, 194, 0) 100%);
}

.cta-container {
   position: relative;
   z-index: 1;
   background: var(--color-white);
   width: 80rem;
   max-width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: var(--gap-md);
   padding: 2rem;
   min-height: 25.75rem;
}

.cta-text {
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.cta-text h2 {
   font-family: var(--font-druk);
   font-weight: 500;
   font-size: 9.375rem;
   line-height: 9.875rem;
   letter-spacing: var(--h1-spacing);
   text-transform: uppercase;
   color: var(--color-charcoal);
}

.cta-text h2 .highlight {
   color: var(--color-hot-orange);
}

.cta-text p {
   font-family: var(--font-montserrat);
   font-weight: 400;
   font-size: var(--body-size);
   line-height: var(--body-line);
   color: var(--color-charcoal);
   opacity: 0.6;
   width: 49.625rem;
   max-width: 100%;
}

/* ========================================
    FOOTER
    ======================================== */
.site-footer {
   background: var(--color-charcoal);
   padding: 5rem var(--section-px);
   position: relative;
}

.footer-line {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: .125rem;
   background: linear-gradient(90deg, rgba(169, 214, 244, 0.00) 0%, #F3C5DF 24.04%, #A9D6F4 56.25%, rgba(243, 197, 223, 0.00) 88.46%);
}

.footer-grid {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
}

.footer-col {
   display: flex;
   gap: 3.125rem;
   align-items: flex-start;
}

.footer-divider {
   width: .0625rem;
   height: 11rem;
   background: rgba(255, 255, 255, 0.06);
   flex-shrink: 0;
}

.footer-logo {
   width: 14.1875rem;
   height: 1.375rem;
   margin-bottom: 2rem;
}

.footer-logo img {
   width: 100%;
   height: auto;
}

.footer-nav {
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
}

.footer-nav a {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-family: var(--font-montserrat);
   font-weight: 500;
   font-size: var(--h4-size);
   line-height: var(--h4-line);
   color: var(--color-white);
   letter-spacing: var(--h4-spacing);
   transition: .3s ease all;
}

.footer-nav a:hover {
   color: var(--color-hot-orange);
}

.footer-nav .dot {
   opacity: 0.3;
   font-family: 'Inter', sans-serif;
   font-weight: 400;
   font-size: var(--h4-size);
}

.footer-support-label {
   font-family: var(--font-montserrat);
   font-weight: 300;
   font-size: 0.75rem;
   color: rgba(255, 255, 255, 0.7);
   margin-bottom: 0.625rem;
}

.footer-support-links {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.footer-support-email {
   display: flex;
   max-width: 18rem;
   font-size: var(--h4-size);
   font-weight: 500;
   line-height: 1.5;
   align-items: flex-start;
   gap: 0.625rem;
   font-family: var(--font-montserrat);
   color: rgba(255, 255, 255, 0.7);
   letter-spacing: var(--h4-spacing);
   transition: .3s ease all;
}

.footer-support-email svg,
.footer-support-email img {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
   object-fit: contain;
   transition: .3s ease all;
   position: relative;
   top: .25rem;
}

.footer-support-email svg :is(path, rect) {
   transition: .3s ease all;
}

.footer-support-email:hover {
   color: var(--color-hot-orange);
}

.footer-support-email:hover svg :is(path, rect) {
   stroke: var(--color-hot-orange);
}

.footer-app-label {
   font-family: var(--font-montserrat);
   font-weight: 300;
   font-size: 0.75rem;
   color: rgba(255, 255, 255, 0.7);
   margin-bottom: 0.75rem;
}

.footer-app-btn {
   display: flex;
   align-items: center;
   gap: 0.875rem;
   border: 0.03125rem solid rgba(255, 255, 255, 0.3);
   border-radius: 0.25rem;
   padding: 0.75rem;
   width: 12.3125rem;
   height: 3.0625rem;
   margin-bottom: 0.75rem;
   transition: border-color 0.25s ease;
}

.footer-app-btn:hover {
   border-color: rgba(255, 255, 255, 0.6);
}

.footer-app-btn svg {
   width: 1.0625rem;
   height: 1.3125rem;
   flex-shrink: 0;
}

.footer-app-btn i {
   display: inline-block;
}

.footer-app-btn i img {
   width: 1.25rem;
   height: 1.25rem;
}

.footer-app-text {
   display: flex;
   flex-direction: column;
   font-family: var(--font-montserrat);
   font-weight: 500;
   color: var(--color-white);
}

.footer-app-text small {
   font-size: 0.5rem;
   margin-bottom: -0.125rem;
   line-height: 1.5;
}

.footer-app-text span {
   font-size: 1rem;
   letter-spacing: -0.07rem;
}

.footer-bottom {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   border-top: .0625rem solid rgba(255, 255, 255, 0.06);
   padding: 1rem 3rem 0;
}

.footer-bottom p {
   font-family: var(--font-fira);
   font-weight: 500;
   font-size: var(--caption-size);
   line-height: var(--caption-line);
   color: var(--color-white);
   text-transform: uppercase;
   letter-spacing: 0;
   white-space: nowrap;
}

.footer-bottom-links {
   display: flex;
   gap: 1.5rem;
}

.footer-bottom-links a {
   font-family: var(--font-fira);
   font-weight: 500;
   font-size: var(--caption-size);
   line-height: var(--caption-line);
   color: var(--color-white);
   text-transform: uppercase;
   letter-spacing: 0;
   white-space: nowrap;
   transition: opacity 0.25s ease;
   transition: .3s ease all;
}

.footer-bottom-links a:hover {
   color: var(--color-hot-orange);
}

/* ========================================
    PAGE BANNER (Privacy, Terms, etc.)
    ======================================== */
.page-banner {
   background: var(--color-charcoal);
   padding: 10rem var(--section-px) 4rem;
   position: relative;
   overflow: hidden;
}

.page-banner-inner {
   max-width: var(--content-max);
}

.page-banner .section-label {
   display: block;
   margin-bottom: 0.75rem;
}

.page-banner h1 {
   font-family: var(--font-druk);
   font-weight: 700;
   font-size: var(--h1-size);
   line-height: var(--h1-line);
   letter-spacing: var(--h1-spacing);
   text-transform: uppercase;
   color: var(--color-white);
}

/* ========================================
    PAGE CONTENT (Legal pages typography)
    ======================================== */
.page-content {
   background: var(--color-white);
   padding: var(--section-py) var(--section-px);
}

.content-container {
   max-width: 52rem;
   margin: 0 auto;
}

.content-container h2 {
   font-family: var(--font-druk);
   font-weight: 700;
   font-size: var(--h2-size);
   line-height: var(--h2-line);
   letter-spacing: var(--h2-spacing);
   text-transform: uppercase;
   color: var(--color-charcoal);
   margin: 3rem 0 1rem;
}

.content-container h3 {
   font-family: var(--font-druk);
   font-weight: 500;
   font-size: var(--h3-size);
   line-height: var(--h3-line);
   letter-spacing: var(--h3-spacing);
   color: var(--color-charcoal);
   margin: 2.5rem 0 0.75rem;
}

.content-container h4 {
   font-family: var(--font-montserrat);
   font-weight: 600;
   font-size: 1.125rem;
   line-height: 1.625rem;
   color: var(--color-charcoal);
   margin: 2rem 0 0.625rem;
}

.content-container h5 {
   font-family: var(--font-montserrat);
   font-weight: 600;
   font-size: 1rem;
   line-height: 1.5rem;
   color: var(--color-charcoal);
   margin: 1.5rem 0 0.5rem;
}

.content-container h6 {
   font-family: var(--font-montserrat);
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.375rem;
   color: var(--color-charcoal);
   margin: 1.25rem 0 0.5rem;
}

.content-container p {
   font-family: var(--font-montserrat);
   font-weight: 400;
   font-size: var(--body-size);
   line-height: var(--body-line);
   color: var(--color-charcoal);
   margin-bottom: 1rem;
   opacity: 0.8;
}

.content-container p:first-child>strong:only-child {
   font-family: var(--font-druk);
   font-weight: 700;
   font-size: 1.5rem;
   line-height: 2rem;
   text-transform: uppercase;
   display: block;
   opacity: 1;
   margin-bottom: 0.25rem;
}

.content-container a {
   color: var(--color-hot-orange);
   text-decoration: underline;
   text-underline-offset: 0.15em;
   transition: opacity 0.25s ease;
}

.content-container a:hover {
   opacity: 0.7;
}

.content-container strong {
   font-weight: 600;
   color: var(--color-charcoal);
}

.content-container em {
   font-style: italic;
}

.content-container ul,
.content-container ol {
   margin: 0.75rem 0 1.25rem 1.5rem;
}

.content-container ul {
   list-style: disc;
}

.content-container ol {
   list-style: decimal;
}

.content-container ul ul {
   list-style: circle;
   margin: 0.25rem 0 0.25rem 1.25rem;
}

.content-container ol ol {
   list-style: lower-alpha;
   margin: 0.25rem 0 0.25rem 1.25rem;
}

.content-container ol ol ol {
   list-style: lower-roman;
}

.content-container li {
   font-family: var(--font-montserrat);
   font-weight: 400;
   font-size: var(--body-size);
   line-height: var(--body-line);
   color: var(--color-charcoal);
   opacity: 0.8;
   margin-bottom: 0.5rem;
}

.content-container li>strong {
   opacity: 1;
}

.content-container table {
   width: 100%;
   border-collapse: collapse;
   margin: 1.5rem 0 2rem;
   font-size: 0.875rem;
   line-height: 1.375rem;
}

.content-container table th,
.content-container table td {
   border: .0625rem solid rgba(33, 39, 42, 0.15);
   padding: 0.75rem 1rem;
   text-align: left;
   vertical-align: top;
   font-family: var(--font-montserrat);
   font-weight: 400;
   color: var(--color-charcoal);
   opacity: 0.85;
}

.content-container table th {
   background: rgba(33, 39, 42, 0.05);
   font-weight: 600;
   opacity: 1;
}

.content-container table td ul {
   margin: 0.25rem 0 0.25rem 1rem;
}

.content-container table td li {
   font-size: 0.875rem;
   line-height: 1.375rem;
   margin-bottom: 0.25rem;
}

/* ========================================
    404 PAGE
    ======================================== */
.section-404 {
   background: var(--color-charcoal);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 8rem var(--section-px) 4rem;
   text-align: center;
   gap: 2rem;
   position: relative;
   overflow: hidden;
}

.four-oh-four-text {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
}

.four-oh-four-num {
   font-family: var(--font-druk);
   font-weight: 700;
   font-size: 12.5rem;
   line-height: 1;
   text-transform: uppercase;
   color: var(--color-white);
   letter-spacing: 0.25rem;
}

.four-oh-four-num.zero {
   color: var(--color-hot-orange);
   animation: pulse404 2.5s ease-in-out infinite;
}

.four-oh-four-info {
   font-family: var(--font-montserrat);
   font-weight: 400;
   font-size: var(--body-size);
   line-height: var(--body-line);
   color: rgba(255, 255, 255, 0.6);
   max-width: 28rem;
}

.section-404 .btn-secondary-v2 {
   border-color: rgba(255, 255, 255, 0.3);
   color: var(--color-white);
}

.section-404 .btn-secondary-v2:hover {
   background: rgba(255, 255, 255, 0.08);
   color: var(--color-white);
}

@keyframes pulse404 {

   0%,
   100% {
      opacity: 1;
      transform: scale(1);
      text-shadow: 0 0 0 transparent;
   }

   50% {
      opacity: 0.7;
      transform: scale(1.05);
      text-shadow: 0 0 2.5rem rgba(219, 55, 6, 0.5), 0 0 5rem rgba(219, 55, 6, 0.2);
   }
}

/* ========================================
    SCROLL ANIMATIONS
    ======================================== */
.reveal {
   opacity: 0;
   transform: translateY(1.5rem);
   transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
   opacity: 1;
   transform: translateY(0);
}

/* --- Fluid scaling for ultra-wide --- */
@media (min-width: 1921px) {
   html {
      font-size: 1vw;
   }

   .container {
      max-width: 100%;
   }
}

/* ========================================
    RESPONSIVE — Tablet (> 991px)
    ======================================== */
@media (min-width:992px) {
   .nav-links li {
      list-style: none;
      position: relative;
   }

   .nav-links li:after {
      content: '|';
      position: absolute;
      left: -0.125rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--color-white);
      opacity: 0.2;
      font-family: var(--font-montserrat);
      font-weight: 500;
      font-size: var(--h4-size);
      pointer-events: none;
   }

   .nav-links li:first-child::after {
      display: none;
   }

   .who-cards {
      /* height: 25rem; */
   }

   .footer-nav li {
      list-style: none;
      position: relative;
      display: flex;
      align-items: center;
      gap: .5rem;
   }

   .footer-nav li::before {
      content: "·";
      display: inline-flex;
      opacity: 0.3;
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      color: #fff;
      font-size: .75rem;
      line-height: 1;
   }
}

/* ========================================
    RESPONSIVE — Tablet (< 1366px)
    ======================================== */
@media (max-width:1366px) {
   .hero-right p br {
      display: none;
   }
}


/* ========================================
    RESPONSIVE — Tablet (< 1366px)
    ======================================== */
@media (max-width:1199px) {
   .hero-right p br {
      display: none;
   }

   .nav-links a {
      padding: 0 1rem;
   }

   .nav-links {
      transform: none;
   }

   .hero-headline br {
      display: none;
   }

   .hero-headline h1 {
      font-size: 70px;
      line-height: 1;
   }

   .hero-headline {
      width: 50%;
   }

   .container {
      max-width: 100%;
   }

   .hero-content {
      padding: 0rem 1rem 5rem;
   }

   .hero-right {
      padding-bottom: 0;
   }

   .section-problem {
      padding: 5rem 1rem;
   }

   .problem-left,
   .problem-right {
      width: 100%;
      justify-content: center;
      align-items: center;
      gap: 30px;
   }

   .problem-grid {
      flex-direction: column;
      gap: 20px;
   }

   .section-platform {
      padding: 4rem 1rem;
      min-height: unset;
   }

   .platform-left {
      width: 50%;
   }

   .section-who {
      padding: 5rem 0;
   }

   .section-features {
      padding: 0 0 5rem;
   }

   .section-faq {
      padding: 4rem 0;
      min-height: unset;
   }

   .section-features .container .sf-wrap {
      gap: 1.5rem;
   }

   .site-footer {
      padding: 5rem 0;
   }

   .footer-col {
      gap: 1.25rem;
   }

   .footer-grid {
      padding: 0 1rem;
   }

   .footer-bottom {
      max-width: calc(100% - 32px);
      margin: 0 auto;
   }

   .cta-text h2 {
      font-size: 6rem;
      line-height: 1;
   }

   .cta-container {
      min-height: unset;
   }

   .cta-outer {
      min-height: unset;
   }
}


/* ========================================
    RESPONSIVE — Tablet (< 992px)
    ======================================== */
@media (max-width: 991px) {
   :root {
      --section-px: 2.5rem;
      --section-py: 5rem;
      --h1-size: 3.75rem;
      --h1-line: 4rem;
      --h2-size: 2.5rem;
      --h2-line: 3rem;
      --h3-size: 1.5rem;
      --h3-line: 2rem;
   }

   .nav-links,
   .nav-actions {
      display: none;
   }

   .hamburger {
      display: flex;
   }

   .site-header {
      left: 1.5rem;
      right: 1.5rem;
      top: 1rem;
   }

   .site-header.scrolled {
      left: 0;
      right: 0;
   }

   /* Mobile: nav becomes fullscreen overlay when .open */
   .header-nav.open {
      display: flex;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: var(--color-charcoal);
      z-index: 1100;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2rem;
   }

   .header-nav.open .nav-links {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2rem;
   }

   .header-nav.open .nav-links a {
      font-size: 1.25rem;
      padding: 0;
   }

   .header-nav.open .nav-links a::before {
      display: none;
   }

   .header-nav.open .nav-links a::after {
      display: none;
   }

   .header-nav.open .nav-links a.active {
      color: var(--color-hot-orange);
   }

   .header-nav.open .nav-actions {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 1rem;
   }

   .hero {
      min-height: auto;
      padding-top: 5.5rem;
   }

   .hero-content {
      padding: 0 var(--section-px) 4rem;
   }

   .hero-inner {
      flex-direction: column;
      align-items: flex-start;
      gap: 2rem;
   }

   .hero-headline {
      width: 100%;
   }

   .hero-right {
      padding-bottom: 0;
   }

   .hero-orb {
      width: 20rem;
      height: 20rem;
      top: -6rem;
      right: -6rem;
   }

   .problem-grid {
      flex-direction: column;
      gap: 3rem;
   }

   .problem-left {
      width: 100%;
      flex-direction: column;
      gap: 1.5rem;
   }

   .problem-left h2 {
      width: 100%;
   }

   .problem-right {
      width: 100%;
   }

   .problem-cta-box {
      width: 100%;
      height: auto;
      padding: 1.5rem 2rem;
   }

   .problem-cta-box h2 {
      font-size: var(--h2-size);
      white-space: normal;
   }

   .section-platform {
      flex-direction: column;
      min-height: auto;
      padding: var(--section-py) var(--section-px);
   }

   .platform-left {
      width: 100%;
   }

   .platform-body {
      width: 100%;
   }

   .platform-image {
      position: relative;
      right: auto;
      top: auto;
      transform: none;
      width: 100%;
      height: auto;
      margin-top: 2rem;
      aspect-ratio: 649/410;
   }

   .who-cards {
      flex-direction: column;
   }

   .who-card.active {
      flex: none;
   }

   .who-card:not(.active) {
      min-height: auto;
      padding: 1.5rem 2rem;
   }

   .who-card:not(.active)+.who-card:not(.active) {
      border-left: none;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
   }

   .who-card p {
      max-height: 10rem !important;
      opacity: 0.6 !important;
   }

   .who-card .who-card-number {
      max-height: 5rem !important;
      opacity: 0.2 !important;
   }

   .section-features {
      flex-direction: column;
      gap: 3rem;
      padding: var(--section-py) var(--section-px);
   }

   .features-left {
      width: 100%;
      position: static;
      gap: 2rem;
   }

   .features-grid {
      width: 100%;
   }

   .features-nav {
      gap: 1rem;
   }

   .feature-card.active {
      width: 100%;
   }

   .section-story {
      flex-direction: column;
   }

   .story-content {
      padding: var(--section-py) var(--section-px);
   }

   .story-inner {
      width: 100%;
   }

   .story-image {
      width: 100%;
      height: 20rem;
   }

   .section-faq {
      flex-direction: column;
      gap: 3rem;
      min-height: auto;
   }

   .faq-left {
      width: 100%;
      position: static;
   }

   .faq-list {
      width: 100%;
   }

   .faq-question-left h3 {
      font-size: 1.25rem;
      line-height: 1.75rem;
   }

   .cta-text h2 {
      font-size: 4rem;
      line-height: 4.5rem;
   }

   .cta-container {
      padding: 2rem 1rem;
   }

   .cta-text p {
      width: 100%;
   }

   .cta-outer {
      padding: 3rem var(--section-px);
      min-height: auto;
   }

   .footer-grid {
      flex-wrap: wrap;
      gap: 2.5rem;
   }

   .footer-col {
      gap: 0;
   }

   .footer-divider {
      display: none;
   }

   .footer-bottom {
      flex-direction: column;
      gap: 1rem;
   }

   .page-banner {
      padding: 7rem var(--section-px) 3rem;
   }

   .four-oh-four-num {
      font-size: 8rem;
   }

   .content-container table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }

   .site-header {
      padding: 0 1rem;
   }

   .hero-content {
      padding: 13rem 0 4rem;
      background-position: center;
   }

   .hero-headline h1 {
      max-width: 30rem;
   }

   .hero-right {
      margin-left: 0;
      max-width: 100%;
   }

   #hero {
      padding-top: 0;
   }

   .section-platform {
      padding: 4rem 0;
   }

   .section-who {
      gap: 2rem;
      padding: 5rem 0 0rem;
   }

   .who-card,
   .who-card:not(.active) {
      min-height: unset;
      height: 100%;
      flex: none;
      border-top: 0.1875rem solid var(--color-light-blue);
      background: linear-gradient(125.8deg, rgba(169, 214, 244, 0.1) 0%, rgba(243, 197, 223, 0.1) 97%);
      gap: 2rem;
      padding: 2rem;
   }

   .who-card .who-card-icon+div p {
      width: 100%;
      transform: none;
      max-width: 100%;
      height: 100%;
   }

   .who-card:hover .who-card-icon+div p,
   .who-card.active .who-card-icon+div p {
      min-height: unset;
      height: 100%;
   }

   .who-card .who-card-number {
      transform: none;
   }

   .who-cards {
      gap: 1.5rem;
   }

   .who-card.active {
      gap: 2rem;
   }

   .who-card:not(.active)+.who-card:not(.active) {
      border-top: 0.1875rem solid var(--color-light-blue);
   }


   .who-card.active .who-card-number {
      margin-top: 0;
      transform: none;
   }

   .who-card .who-card-number {
      margin-top: 0;
      transform: none;
   }

   .who-card .who-card-icon+div p {
      min-height: unset;
      height: 100%;
   }

   .section-features .container .sf-wrap {
      flex-direction: column;
      gap: 2rem;
   }

   .section-features {
      padding: 4rem 0;
   }

   .section-faq .faq-wrap {
      flex-direction: column;
      gap: 1.25rem;
   }

   .faq-question:hover,
   .faq-question {
      padding: 18px 0;
   }

   .footer-grid {
      gap: 2rem;
	  margin-bottom: 20px;
   }

   .footer-bottom {
      flex-direction: row;
      padding: 1rem 0 0;
   }

   .footer-col:first-child {
      width: 100%;
      justify-content: center;
      text-align: center;
   }

   .footer-col:first-child .footer-divider+div {
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   .site-footer {
      padding: 4rem 0;
   }

}

/* ========================================
    RESPONSIVE — Mobile (< 576px)
    ======================================== */
@media (max-width: 575px) {
   :root {
      --section-px: 1.25rem;
      --section-py: 3.75rem;
      --h1-size: 2.5rem;
      --h1-line: 2.75rem;
      --h2-size: 1.75rem;
      --h2-line: 2.25rem;
      --h3-size: 1.25rem;
      --h3-line: 1.75rem;
   }

   .site-header {
      left: 1rem;
      right: 1rem;
      top: 0.75rem;
      padding: 0 1rem;
   }

   .header-logo {
      width: 10rem;
   }

   .hero-content {
      padding: 0 var(--section-px) 3rem;
   }

   .hero-headline h1 {
      font-size: var(--h1-size);
      line-height: var(--h1-line);
   }

   .problem-left {
      gap: 1rem;
   }

   .problem-cta-box h2 {
      font-size: 1.5rem;
   }

   .who-card {
      padding: 1.5rem;
   }

   .features-nav-link {
      gap: 0.35rem;
   }

   .feature-card {
      padding: 2rem 1.25rem;
   }

   .feature-card.active {
      width: 100%;
   }

   .faq-question-left h3 {
      font-size: 1rem;
      line-height: 1.5rem;
   }

   .faq-question-left {
      gap: 0.75rem;
   }

   .cta-text h2 {
      font-size: 2.25rem;
      line-height: 2.75rem;
   }

   .footer-grid {
      flex-direction: column;
	  margin-bottom: 20px;
   }

   .footer-col {
      width: 100%;
   }

   .btn-group {
      flex-wrap: wrap;
   }

   .four-oh-four-num {
      font-size: 5rem;
   }

   .page-banner {
      padding: 6rem var(--section-px) 2rem;
   }

   .section-features::before {
      width: 200px;
      height: 100px;
      left: 0;
   }

   .footer-bottom {
      flex-direction: column;
   }

   .site-footer {
      padding: 3rem 0;
   }

   .footer-logo {
      margin-bottom: 1rem;
   }

   .footer-col:first-child {
      justify-content: flex-start;
      text-align: left;
   }

   .footer-col:first-child .footer-divider+div {
      align-items: flex-start;
   }

   .footer-app-btn {
      width: auto;
   }

   .hero-content {
      padding: 13rem 0 2.5rem;
      background-position: center left;
   }

   .hero-inner {
      gap: .5rem;
   }

   .site-header.scrolled {
      height: 60px;
   }

   .section-problem {
      padding: 2.5rem 0;
   }

   .problem-left {
      text-align: left;
      justify-content: flex-start;
      align-items: flex-start;
      padding-top: 1rem;
   }

   .problem-grid {
      gap: 2rem;
   }

   .problem-right {
      padding-top: 1rem;
   }

   .problem-right p {
      margin-bottom: .5rem;
   }

   .section-problem::before {
      width: 230px;
      height: 130px;
   }

   .section-platform {
      padding: 2.5rem 0;
   }

   .platform-header {
      gap: .5rem;
   }

   .platform-left {
      gap: 1rem;
   }

   .section-who {
      padding: 2.5rem 0;
      gap: 1.5rem;
   }

   .who-header {
      gap: .5rem;
   }

   .who-card.active {
      gap: 1rem;
   }

   .who-card-icon {
      width: 3.8rem;
      height: 2rem;
      margin-bottom: 0;
   }

   .who-card .who-card-icon+div p {
      font-size: 14px;
      line-height: 1.4;
      transition: none;
   }

   .who-card,
   .who-card:not(.active) {
      gap: 1rem;
      padding: 1.5rem;
   }

   .section-features {
      padding: 2.5rem 0;
   }

   .feature-card,
   .feature-card.active {
      gap: .5rem;
      padding: 1.25rem;
   }

   .feature-card p {
      font-size: .75rem;
      line-height: 1.5;
   }

   .features-nav {
      display: none;
   }

   .section-faq {
      padding: 2.5rem 0;
   }

   .section-faq .faq-wrap {
      gap: .5rem;
   }

   .faq-answer-inner {
      padding: 0 0 0 2rem;
   }

   .faq-answer-inner p {
      font-size: .675rem;
      line-height: 1.4;
   }

   .faq-item.active {
      padding-bottom: 1.125rem;
   }

   .faq-icon {
      width: .75rem;
      height: .75rem;
   }

   .faq-icon::before {
      height: .0625rem;
   }

   .faq-icon::after {
      width: .0625rem;
   }

   .faq-num {
      font-size: .875rem;
      line-height: 1;
      margin-bottom: .1rem;
   }

   .footer-bottom p {
      white-space: pre-line;
      line-height: 1.5;
   }

   .cta-text p {
      font-size: .875rem;
      line-height: 1.35;
   }

   .content-container a {
      word-break: break-word;
   }

   .page-content {
      padding: 2.5rem 1rem;
   }
}