:root {
    --cream: #F2EEE3;
    --cream-soft: #EAE5D6;
    --cream-warm: #E8DFC8;
    --stone: #DDD5C2;
    --ink: #0F0F0F;
    --ink-soft: #1A1A1A;
    --brand: #1F4D3D;          
    --brand-soft: #5A8F7B;     
    --brand-light: #8FB5A4;    
    --tomato: #DC4E2C;         
    --grey: #6B6862;
    --grey-soft: #3A3A38;
    --green-deep: #1F2A24;     
    --green-soft: #76C893;     
    --shadow-soft: 0 1px 0 rgba(15, 15, 15, 0.04), 0 12px 32px -8px rgba(15, 15, 15, 0.08);
    --shadow-hover: 0 1px 0 rgba(15, 15, 15, 0.06), 0 28px 56px -14px rgba(15, 15, 15, 0.18);
    --shadow-dark: 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 32px -8px rgba(0, 0, 0, 0.4);
    --shadow-dark-hover: 0 1px 0 rgba(255, 255, 255, 0.08), 0 32px 64px -16px rgba(0, 0, 0, 0.55);
    --shadow-mega: 0 24px 80px -20px rgba(15, 15, 15, 0.25), 0 8px 32px -8px rgba(15, 15, 15, 0.1);
    --inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  html { scroll-behavior: smooth; overflow-x: clip; }
  body { font-family: 'Hanken Grotesk', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; padding-top: 80px; }

  [data-anim] { opacity: 0; will-change: opacity, transform; }
  .word { display: inline-block; will-change: transform, opacity; }

  .arrow { display: inline-block; transition: transform 360ms var(--ease-out); }
  .group:hover .arrow { transform: translateX(6px); }

  
  .card {
    box-shadow: var(--shadow-soft), var(--inset-light);
    transition: box-shadow 480ms var(--ease-out), transform 480ms var(--ease-out), border-color 480ms ease;
    will-change: transform, box-shadow;
  }
  .card:hover {
    box-shadow: var(--shadow-hover), var(--inset-light);
    transform: translateY(-4px);
  }
  .card-dark {
    box-shadow: var(--shadow-dark);
    transition: box-shadow 480ms var(--ease-out), transform 480ms var(--ease-out);
  }
  .card-dark:hover {
    box-shadow: var(--shadow-dark-hover);
    transform: translateY(-4px);
  }

  
  .glow {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform-style: preserve-3d;
  }
  .glow::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: radial-gradient(700px circle at var(--mx, 50%) var(--my, 50%), rgba(31, 77, 61, 0.14), transparent 42%);
    opacity: 0;
    transition: opacity 700ms ease;
    pointer-events: none;
    z-index: 0;
  }
  .glow:hover::before { opacity: 1; }
  .glow > * { position: relative; z-index: 1; }
  .glow-green::before {
    background: radial-gradient(700px circle at var(--mx, 50%) var(--my, 50%), rgba(118, 200, 147, 0.16), transparent 42%);
  }

  
  .bento-card {
    transition: transform 540ms var(--ease-out), box-shadow 540ms var(--ease-out);
  }
  .bento-card .signal-row {
    overflow: hidden;
    position: relative;
  }
  .bento-card .signal-rule {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: rgba(15, 15, 15, 0.10);
    transform-origin: left;
    transform: scaleX(1);
    transition: transform 540ms var(--ease-out);
  }
  .bento-card.dark .signal-rule { background: rgba(242, 238, 227, 0.15); }
  .bento-card:hover .signal-rule {
    transform-origin: right;
    transform: scaleX(0.001);
  }
  .bento-card .signal-rule::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    height: 1px;
    width: 100%;
    background: var(--brand);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 700ms var(--ease-out) 200ms;
  }
  .bento-card:hover .signal-rule::after { transform: scaleX(1); }

  .bento-card .eyebrow { transition: transform 540ms var(--ease-out), color 540ms ease; }
  .bento-card:hover .eyebrow { transform: translateY(-2px); color: var(--brand); }

  
  .bento-card .corner-mark {
    position: absolute;
    top: 28px; right: 28px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: rgba(15, 15, 15, 0.06);
    transition: background 480ms ease, transform 480ms var(--ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bento-card .corner-mark::after {
    content: '↗';
    font-size: 12px;
    color: var(--ink);
    opacity: 0.4;
    transition: opacity 480ms ease, transform 480ms var(--ease-out);
  }
  .bento-card:hover .corner-mark {
    background: var(--brand);
    transform: scale(1.15);
  }
  .bento-card:hover .corner-mark::after {
    color: white;
    opacity: 1;
    transform: rotate(0deg) translate(1px, -1px);
  }
  .bento-card.dark .corner-mark {
    background: rgba(242, 238, 227, 0.08);
  }
  .bento-card.dark .corner-mark::after { color: var(--cream); }
  .bento-card.dark:hover .corner-mark { background: var(--brand); }
  .bento-card.factor1 .corner-mark { background: rgba(118, 200, 147, 0.15); }
  .bento-card.factor1 .corner-mark::after { color: var(--green-soft); }
  .bento-card.factor1:hover .corner-mark { background: var(--green-soft); }
  .bento-card.factor1:hover .corner-mark::after { color: var(--green-deep); }

  
  

  .everyday-ribbon {
    position: relative;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    min-height: 700px;
    box-shadow: 0 32px 80px -32px rgba(15, 15, 15, 0.30);
  }
  @media (min-width: 768px) {
    .everyday-ribbon {
      min-height: 480px;
    }
  }
  @media (min-width: 1024px) {
    .everyday-ribbon {
      min-height: 520px;
    }
  }

  
  .ribbon-gradient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      #1F4D3D 0%,
      #2A5C4B 18%,
      #1F3D44 38%,
      #2D5A64 58%,
      #5C3F2C 78%,
      #6B4128 100%
    );
    background-size: 100% 220%;
    background-position: 0% 0%;
    animation: ribbonFlowVertical 28s ease-in-out infinite;
  }
  @media (min-width: 768px) {
    .ribbon-gradient {
      background: linear-gradient(
        118deg,
        #1F4D3D 0%,
        #2A5C4B 18%,
        #1F3D44 38%,
        #2D5A64 58%,
        #5C3F2C 78%,
        #6B4128 100%
      );
      background-size: 220% 100%;
      background-position: 0% 0%;
      animation: ribbonFlowHorizontal 28s ease-in-out infinite;
    }
  }

  @keyframes ribbonFlowVertical {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
  }
  @keyframes ribbonFlowHorizontal {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 0%; }
    100% { background-position: 0% 0%; }
  }

  
  .ribbon-grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.14;
    mix-blend-mode: overlay;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.12) 0.5px, transparent 1px),
      radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.10) 0.5px, transparent 1px),
      radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.08) 0.5px, transparent 1px),
      radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.10) 0.5px, transparent 1px);
    background-size: 80px 80px, 110px 110px, 95px 95px, 70px 70px;
  }

  
  .ribbon-zones {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 700px;
  }
  @media (min-width: 768px) {
    .ribbon-zones {
      flex-direction: row;
      min-height: 480px;
    }
  }
  @media (min-width: 1024px) {
    .ribbon-zones {
      min-height: 520px;
    }
  }

  .ribbon-zone {
    flex: 1;
    display: block;
    padding: 36px 28px;
    text-decoration: none;
    color: var(--cream);
    transition: background 480ms ease;
    position: relative;
  }
  @media (min-width: 768px) {
    .ribbon-zone {
      padding: 48px 32px;
    }
  }
  @media (min-width: 1024px) {
    .ribbon-zone {
      padding: 64px 48px;
    }
  }

  
  .ribbon-zone:hover {
    background: rgba(0, 0, 0, 0.15);
  }

  .ribbon-zone-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 380px;
  }

  
  .ribbon-zone-mark {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(242, 238, 227, 0.75);
    margin-bottom: 22px;
    transition: color 320ms ease;
  }
  @media (min-width: 1024px) {
    .ribbon-zone-mark {
      font-size: 12px;
      margin-bottom: 32px;
    }
  }

  
  .ribbon-zone-headline {
    font-size: 24px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--cream);
    margin-bottom: 16px;
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @media (min-width: 768px) {
    .ribbon-zone-headline {
      font-size: 22px;
      letter-spacing: -0.020em;
      margin-bottom: 18px;
    }
  }
  @media (min-width: 1024px) {
    .ribbon-zone-headline {
      font-size: 28px;
      letter-spacing: -0.024em;
      margin-bottom: 22px;
    }
  }
  @media (min-width: 1280px) {
    .ribbon-zone-headline {
      font-size: 32px;
    }
  }

  .ribbon-zone-body {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(242, 238, 227, 0.78);
    margin-bottom: 22px;
    flex: 1;
  }
  @media (min-width: 1024px) {
    .ribbon-zone-body {
      font-size: 15.5px;
      margin-bottom: 28px;
    }
  }

  .ribbon-zone-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cream);
    transition: color 320ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    align-self: flex-start;
  }
  @media (min-width: 1024px) {
    .ribbon-zone-cta {
      font-size: 14px;
    }
  }
  .ribbon-zone:hover .ribbon-zone-cta {
    color: var(--brand-light);
    transform: translateX(8px);
  }
  .ribbon-zone:hover .ribbon-zone-headline {
    transform: translateX(6px);
  }

  
  @media (prefers-reduced-motion: reduce) {
    .ribbon-gradient {
      animation: none;
    }
    .ribbon-zone:hover .ribbon-zone-cta,
    .ribbon-zone:hover .ribbon-zone-headline {
      transform: none;
    }
  }

    
  

  .slideshow {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
    min-height: 480px;
    background: #0F0F0F;
  }
  @media (min-width: 768px) {
    .slideshow {
      min-height: 500px;
    }
  }
  @media (min-width: 1024px) {
    .slideshow {
      min-height: 520px;
    }
  }

  .slideshow-track {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 480px;
  }
  @media (min-width: 768px) {
    .slideshow-track {
      min-height: 500px;
    }
  }
  @media (min-width: 1024px) {
    .slideshow-track {
      min-height: 520px;
    }
  }

  .slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    padding: 56px 28px 52px 28px;
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    transition: opacity 560ms ease, transform 720ms var(--ease-out);
    color: var(--cream);
    text-decoration: none;
    overflow: hidden;
  }
  @media (min-width: 768px) {
    .slide {
      padding: 80px 56px 60px 56px;
    }
  }
  @media (min-width: 1024px) {
    .slide {
      padding: 104px 80px 64px 80px;
    }
  }
  .slide.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    z-index: 2;
  }

  
  .slide-gradient,
  .slide-glow,
  .slide-content {
    pointer-events: none;
  }

  
  .slide-gradient {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  
  .slide[data-slide-theme="green-teal"] .slide-gradient {
    background:
      linear-gradient(125deg, #1F4D3D 0%, #2A5C4B 35%, #1F3D44 70%, #163536 100%);
  }
  .slide[data-slide-theme="plum-indigo"] .slide-gradient {
    background:
      linear-gradient(125deg, #3D2A40 0%, #2D2540 40%, #1F2540 75%, #1A1F38 100%);
  }
  .slide[data-slide-theme="teal-copper"] .slide-gradient {
    background:
      linear-gradient(125deg, #1F3D44 0%, #2C4944 38%, #5C3F2C 75%, #6B4128 100%);
  }
  .slide[data-slide-theme="slate-green"] .slide-gradient {
    background:
      linear-gradient(125deg, #2A3540 0%, #283A3C 40%, #1F4D3D 80%, #1A4136 100%);
  }
  .slide[data-slide-theme="copper-plum"] .slide-gradient {
    background:
      linear-gradient(125deg, #5C3F2C 0%, #4D3331 40%, #3D2A40 80%, #2E2238 100%);
  }
  .slide[data-slide-theme="spectrum"] .slide-gradient {
    background:
      linear-gradient(118deg,
        #1F4D3D 0%,
        #1F3D44 22%,
        #3D2A40 44%,
        #5C3F2C 66%,
        #1F4D3D 88%,
        #2A5C4B 100%
      );
    background-size: 220% 220%;
    animation: spectrumDrift 18s ease-in-out infinite;
  }
  @keyframes spectrumDrift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  
  .slide-glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.10), transparent 50%),
      radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0.30), transparent 60%);
  }

  
  .slide-content {
    position: relative;
    z-index: 2;
    max-width: 880px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  
  .slide-headline {
    font-size: 30px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.030em;
    color: var(--cream);
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 560ms ease, transform 720ms var(--ease-out);
  }
  @media (min-width: 640px) {
    .slide-headline {
      font-size: 40px;
      letter-spacing: -0.034em;
    }
  }
  @media (min-width: 1024px) {
    .slide-headline {
      font-size: 60px;
      letter-spacing: -0.036em;
      margin-bottom: 26px;
    }
  }
  @media (min-width: 1280px) {
    .slide-headline {
      font-size: 72px;
      letter-spacing: -0.038em;
    }
  }

  .slide-body {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(242, 238, 227, 0.82);
    max-width: 620px;
    margin-bottom: 24px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 560ms ease, transform 720ms var(--ease-out);
  }
  @media (min-width: 1024px) {
    .slide-body {
      font-size: 17px;
      margin-bottom: 28px;
    }
  }

  .slide-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cream);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 560ms ease, transform 720ms var(--ease-out), color 280ms ease;
  }
  @media (min-width: 1024px) {
    .slide-cta {
      font-size: 15px;
    }
  }
  .slide:hover .slide-cta {
    color: var(--brand-light);
  }

  
  .slide.is-active .slide-headline {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 240ms;
  }
  .slide.is-active .slide-body {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 480ms;
  }
  .slide.is-active .slide-cta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 720ms;
  }

  
  .slideshow-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 20px 24px 20px;
    pointer-events: none;
  }
  @media (min-width: 1024px) {
    .slideshow-controls {
      padding: 0 44px 32px 44px;
    }
  }

  
  .slideshow-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
  }
  .slide-dot {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: transform 320ms var(--ease-out);
  }
  
  .slide-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(242, 238, 227, 0.30);
    transition: background 320ms ease, width 360ms var(--ease-out), border-radius 360ms var(--ease-out);
  }
  .slide-dot:hover::before {
    background: rgba(242, 238, 227, 0.55);
  }
  .slide-dot.is-active::before {
    width: 24px;
    border-radius: 5px;
    background: var(--cream);
  }
  
  .slide-dot[data-dot-theme="green-teal"].is-active::before   { background: linear-gradient(90deg, #76C893, #8FC0CC); }
  .slide-dot[data-dot-theme="plum-indigo"].is-active::before  { background: linear-gradient(90deg, #B89FBE, #9FAEC8); }
  .slide-dot[data-dot-theme="teal-copper"].is-active::before  { background: linear-gradient(90deg, #8FC0CC, #C99772); }
  .slide-dot[data-dot-theme="slate-green"].is-active::before  { background: linear-gradient(90deg, #98A4B0, #76C893); }
  .slide-dot[data-dot-theme="copper-plum"].is-active::before  { background: linear-gradient(90deg, #C99772, #B89FBE); }
  .slide-dot[data-dot-theme="spectrum"].is-active::before     { background: linear-gradient(90deg, #76C893, #8FC0CC, #B89FBE, #C99772); }

  
  .slideshow-progress {
    flex: 1;
    max-width: 240px;
    height: 1px;
    background: rgba(242, 238, 227, 0.18);
    border-radius: 1px;
    overflow: hidden;
  }
  .slideshow-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #76C893, #8FC0CC, #B89FBE, #C99772);
    animation: slideshowProgress 6000ms linear infinite;
    transform-origin: left;
  }
  @keyframes slideshowProgress {
    0%   { width: 0%; }
    100% { width: 100%; }
  }
  
  .slideshow.is-paused .slideshow-progress-fill {
    animation-play-state: paused;
  }
  .slideshow.is-paused .slide[data-slide-theme="spectrum"] .slide-gradient {
    animation-play-state: paused;
  }

  
  @media (prefers-reduced-motion: reduce) {
    .slideshow {
      min-height: 0;
      background: transparent;
    }
    .slideshow-track {
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .slide {
      position: relative;
      inset: auto;
      opacity: 1;
      transform: none;
      pointer-events: auto;
      min-height: 360px;
      border-radius: 20px;
    }
    .slide-headline,
    .slide-body,
    .slide-cta {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .slideshow-controls {
      display: none;
    }
    .slide[data-slide-theme="spectrum"] .slide-gradient {
      animation: none;
    }
  }


  
  

  .benefit-spotlight {
    position: relative;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    background: #0A0C0D;
    box-shadow: 0 32px 80px -32px rgba(15, 15, 15, 0.40);
  }

  
  .spotlight-glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
      circle 720px at var(--spot-x, 50%) var(--spot-y, 50%),
      var(--spot-color, rgba(118, 200, 147, 0.55)) 0%,
      transparent 70%
    );
    transition: background 600ms ease-out;
    will-change: background;
  }
  @media (min-width: 1024px) {
    .spotlight-glow {
      background: radial-gradient(
        circle 920px at var(--spot-x, 50%) var(--spot-y, 50%),
        var(--spot-color, rgba(118, 200, 147, 0.55)) 0%,
        transparent 65%
      );
    }
  }

  
  .benefit-spotlight::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.16;
    mix-blend-mode: overlay;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.10) 0.5px, transparent 1px),
      radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.08) 0.5px, transparent 1px),
      radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.08) 0.5px, transparent 1px),
      radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.10) 0.5px, transparent 1px);
    background-size: 80px 80px, 110px 110px, 95px 95px, 70px 70px;
  }

  
  .spotlight-canvas {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 80px 28px 100px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 80px;
  }
  @media (min-width: 768px) {
    .spotlight-canvas {
      padding: 120px 60px 140px 60px;
      gap: 120px;
    }
  }
  @media (min-width: 1024px) {
    .spotlight-canvas {
      padding: 160px 96px 180px 96px;
      gap: 160px;
      max-width: 1200px;
      margin: 0 auto;
    }
  }

  
  .spot {
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: var(--cream);
    font-family: inherit;
    display: block;
    width: 100%;
    max-width: 720px;
    transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  
  .spot-name {
    font-size: 28px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.028em;
    color: rgba(242, 238, 227, 0.28);
    margin-bottom: 18px;
    transition: color 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @media (min-width: 768px) {
    .spot-name {
      font-size: 44px;
      letter-spacing: -0.034em;
      margin-bottom: 22px;
    }
  }
  @media (min-width: 1024px) {
    .spot-name {
      font-size: 64px;
      letter-spacing: -0.038em;
      margin-bottom: 28px;
    }
  }
  @media (min-width: 1280px) {
    .spot-name {
      font-size: 76px;
    }
  }

  
  .spot-body {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(242, 238, 227, 0.0);
    max-width: 540px;
    max-height: 0;
    overflow: hidden;
    transform: translateY(8px);
    transition: color 600ms cubic-bezier(0.22, 1, 0.36, 1), max-height 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @media (min-width: 1024px) {
    .spot-body {
      font-size: 18px;
      max-width: 600px;
    }
  }

  
  .spot.is-active .spot-name {
    color: var(--cream);
    transform: translateX(8px);
  }
  .spot.is-active .spot-body {
    color: rgba(242, 238, 227, 0.78);
    max-height: 200px;
    transform: translateY(0);
  }

  
  .spot::before {
    content: '';
    position: absolute;
    left: 0;
    top: -16px;
    width: 0;
    height: 2px;
    background: var(--brand-light);
    transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1), background 320ms ease;
    border-radius: 1px;
  }
  @media (min-width: 1024px) {
    .spot::before {
      top: -24px;
      height: 3px;
    }
  }
  .spot.is-active::before { width: 48px; }
  @media (min-width: 1024px) {
    .spot.is-active::before { width: 72px; }
  }
  .spot[data-spot-theme="green-teal"].is-active::before  { background: #76C893; }
  .spot[data-spot-theme="plum-indigo"].is-active::before { background: #B89FBE; }
  .spot[data-spot-theme="teal-copper"].is-active::before { background: #8FC0CC; }
  .spot[data-spot-theme="slate-green"].is-active::before { background: #9FAEC8; }
  .spot[data-spot-theme="copper-plum"].is-active::before { background: #C99772; }
  .spot[data-spot-theme="green-deep"].is-active::before  { background: #76C893; }
  .spot[data-spot-theme="teal-deep"].is-active::before   { background: #8FC0CC; }
  .spot[data-spot-theme="copper-deep"].is-active::before { background: #C99772; }

  
  @media (prefers-reduced-motion: reduce) {
    .spotlight-glow {
      display: none;
    }
    .spot-name {
      color: var(--cream) !important;
      transform: none !important;
    }
    .spot-body {
      color: rgba(242, 238, 227, 0.78) !important;
      max-height: 200px !important;
      transform: none !important;
    }
    .spot::before {
      width: 48px !important;
    }
  }

  
  

  .proof-section {
    position: relative;
  }

  
  .proof-pin-area {
    position: relative;
    width: 100%;
    height: 320vh;
  }
  @media (max-width: 767px) {
    .proof-pin-area {
      height: 280vh;
    }
  }

  .proof-pin-inner {
    position: sticky;
    top: 80px;
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 12px 0;
  }
  @media (min-width: 1024px) {
    .proof-pin-inner {
      padding: 24px 0;
    }
  }

  
  .proof-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: 1400px;
    padding: 0 16px;
  }
  @media (min-width: 768px) {
    .proof-stage {
      padding: 0 24px;
      max-height: 600px;
    }
  }
  @media (min-width: 1024px) {
    .proof-stage {
      padding: 0 40px;
    }
  }

  
  
  .proof-card {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    opacity: 0;
    transform: scale(0.985);
    pointer-events: none;
    transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
    color: var(--cream);
    box-shadow: 0 32px 80px -32px rgba(15, 15, 15, 0.45);
  }
  .proof-card.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    z-index: 2;
  }

  
  
  .proof-card-surface {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }
  .proof-card--green .proof-card-surface {
    background:
      radial-gradient(ellipse 70% 50% at 8% 8%, rgba(118, 200, 147, 0.20), transparent 55%),
      radial-gradient(ellipse 60% 50% at 95% 100%, rgba(31, 61, 68, 0.50), transparent 60%),
      linear-gradient(135deg, #1F4D3D 0%, #2A5C4B 45%, #1F3D44 100%);
  }
  .proof-card--copper .proof-card-surface {
    background:
      radial-gradient(ellipse 70% 50% at 8% 8%, rgba(201, 151, 114, 0.22), transparent 55%),
      radial-gradient(ellipse 60% 50% at 95% 100%, rgba(61, 42, 64, 0.45), transparent 60%),
      linear-gradient(135deg, #5C3F2C 0%, #6B4F38 45%, #4D3331 100%);
  }
  .proof-card--plum .proof-card-surface {
    background:
      radial-gradient(ellipse 70% 50% at 8% 8%, rgba(184, 159, 190, 0.20), transparent 55%),
      radial-gradient(ellipse 60% 50% at 95% 100%, rgba(31, 37, 64, 0.50), transparent 60%),
      linear-gradient(135deg, #3D2A40 0%, #2D2540 45%, #1F2540 100%);
  }

  
  .proof-card-grain {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    mix-blend-mode: overlay;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.12) 0.5px, transparent 1px),
      radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.10) 0.5px, transparent 1px),
      radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.08) 0.5px, transparent 1px),
      radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.10) 0.5px, transparent 1px);
    background-size: 80px 80px, 110px 110px, 95px 95px, 70px 70px;
  }

  
  
  .proof-card-corner {
    display: none;
    position: absolute;
    top: 18px;
    right: 18px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(242, 238, 227, 0.16);
    z-index: 2;
  }
  @media (min-width: 1024px) {
    .proof-card-corner {
      top: 28px;
      right: 28px;
      width: 28px;
      height: 28px;
    }
  }
  .proof-card-corner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cream);
  }
  .proof-card--green .proof-card-corner::after  { background: #76C893; }
  .proof-card--copper .proof-card-corner::after { background: #C99772; }
  .proof-card--plum .proof-card-corner::after   { background: #B89FBE; }

  
  .proof-card-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 32px 24px;
  }
  @media (min-width: 768px) {
    .proof-card-content {
      padding: 48px 40px;
    }
  }
  @media (min-width: 1024px) {
    .proof-card-content {
      padding: 64px 64px;
    }
  }
  @media (min-width: 1280px) {
    .proof-card-content {
      padding: 80px 80px;
    }
  }

  
  .proof-card-eyebrow {
    font-family: \'JetBrains Mono\', monospace;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 36px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @media (min-width: 1024px) {
    .proof-card-eyebrow {
      font-size: 12px;
      margin-bottom: 56px;
    }
  }
  .proof-card--green .proof-card-eyebrow  { color: #8FC0CC; }
  .proof-card--copper .proof-card-eyebrow { color: #C99772; }
  .proof-card--plum .proof-card-eyebrow   { color: #B89FBE; }

  
  
  .proof-card-headline {
    font-size: 28px;
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.026em;
    margin-bottom: auto;
    max-width: 880px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @media (min-width: 768px) {
    .proof-card-headline {
      font-size: 40px;
      letter-spacing: -0.032em;
    }
  }
  @media (min-width: 1024px) {
    .proof-card-headline {
      font-size: 60px;
      letter-spacing: -0.036em;
      line-height: 1.04;
    }
  }
  @media (min-width: 1280px) {
    .proof-card-headline {
      font-size: 72px;
    }
  }

  .proof-card-lead {
    color: rgba(242, 238, 227, 0.45);
    display: inline;
  }
  .proof-card-payoff {
    color: var(--cream);
    display: inline;
  }

  
  .proof-card-body {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(242, 238, 227, 0.72);
    max-width: 620px;
    margin-top: 36px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @media (min-width: 768px) {
    .proof-card-body {
      font-size: 16px;
      margin-top: 44px;
    }
  }
  @media (min-width: 1024px) {
    .proof-card-body {
      font-size: 17.5px;
      line-height: 1.65;
      max-width: 660px;
      margin-top: 56px;
    }
  }

  
  
  .proof-card-signal {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 36px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @media (min-width: 1024px) {
    .proof-card-signal {
      gap: 22px;
      margin-top: 48px;
    }
  }

  .proof-card-signal-rule {
    height: 1px;
    width: 100%;
    max-width: 80px;
  }
  @media (min-width: 1024px) {
    .proof-card-signal-rule {
      max-width: 120px;
    }
  }
  .proof-card--green .proof-card-signal-rule  { background: rgba(143, 192, 204, 0.50); }
  .proof-card--copper .proof-card-signal-rule { background: rgba(201, 151, 114, 0.50); }
  .proof-card--plum .proof-card-signal-rule   { background: rgba(184, 159, 190, 0.50); }

  .proof-card-signal-items {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
  }

  .proof-scope-item {
    font-family: \'JetBrains Mono\', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(242, 238, 227, 0.70);
    font-weight: 500;
  }
  @media (min-width: 1024px) {
    .proof-scope-item {
      font-size: 12px;
      letter-spacing: 0.20em;
    }
  }
  .proof-scope-item + .proof-scope-item::before {
    content: \'·\';
    margin: 0 12px;
    font-size: 16px;
    font-weight: 700;
    vertical-align: 1px;
  }
  @media (min-width: 1024px) {
    .proof-scope-item + .proof-scope-item::before {
      margin: 0 14px;
    }
  }
  .proof-card--green .proof-scope-item + .proof-scope-item::before  { color: rgba(143, 192, 204, 0.65); }
  .proof-card--copper .proof-scope-item + .proof-scope-item::before { color: rgba(201, 151, 114, 0.65); }
  .proof-card--plum .proof-scope-item + .proof-scope-item::before   { color: rgba(184, 159, 190, 0.65); }

  
  .proof-card.is-active .proof-card-eyebrow {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 160ms;
  }
  .proof-card.is-active .proof-card-headline {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 280ms;
  }
  .proof-card.is-active .proof-card-body {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 440ms;
  }
  .proof-card.is-active .proof-card-signal {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 580ms;
  }

  
  .proof-progress {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 14px;
    pointer-events: none;
  }
  @media (min-width: 768px) {
    .proof-progress {
      right: 20px;
      gap: 18px;
    }
  }
  @media (min-width: 1024px) {
    .proof-progress {
      right: 28px;
      gap: 22px;
    }
  }

  .proof-progress-mark {
    width: 2px;
    height: 18px;
    background: rgba(242, 238, 227, 0.20);
    border-radius: 1px;
    transition: background 480ms ease, height 480ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @media (min-width: 1024px) {
    .proof-progress-mark {
      width: 2.5px;
      height: 24px;
    }
  }
  .proof-progress-mark.is-active {
    height: 36px;
  }
  @media (min-width: 1024px) {
    .proof-progress-mark.is-active {
      height: 48px;
    }
  }
  .proof-progress-mark.is-active[data-mark-theme="green-teal"]   { background: #8FC0CC; }
  .proof-progress-mark.is-active[data-mark-theme="copper-amber"] { background: #C99772; }
  .proof-progress-mark.is-active[data-mark-theme="plum-indigo"]  { background: #B89FBE; }

  
  @media (prefers-reduced-motion: reduce) {
    .proof-pin-area {
      height: auto !important;
    }
    .proof-pin-inner {
      position: static;
      height: auto;
      display: block;
      padding: 0;
    }
    .proof-stage {
      height: auto;
      padding: 0;
      max-width: none;
    }
    .proof-card {
      position: relative;
      inset: auto;
      opacity: 1 !important;
      transform: none !important;
      pointer-events: auto !important;
      margin-bottom: 16px;
      min-height: 480px;
    }
    .proof-card:last-child {
      margin-bottom: 0;
    }
    .proof-card-eyebrow,
    .proof-card-headline,
    .proof-card-body,
    .proof-card-signal {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    .proof-progress {
      display: none;
    }
  }

    
  .bento-card.ai-card {
    background: #0F1614;
    color: var(--cream);
    isolation: isolate;
  }
  .ai-card-gradient {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 8% 0%, rgba(118, 200, 147, 0.22), transparent 45%),
      radial-gradient(circle at 100% 100%, rgba(31, 77, 61, 0.55), transparent 55%),
      radial-gradient(circle at 65% 25%, rgba(31, 61, 68, 0.40), transparent 50%);
    pointer-events: none;
    z-index: 0;
    transition: opacity 600ms var(--ease-out);
  }
  .ai-card-grid {
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle at 1px 1px, rgba(143, 181, 164, 0.10) 1px, transparent 0);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
    transition: opacity 600ms var(--ease-out);
  }
  .bento-card.ai-card:hover .ai-card-gradient { opacity: 1.15; }
  .bento-card.ai-card:hover .ai-card-grid { opacity: 0.9; }

  
  .magnetic { transition: transform 280ms var(--ease-out); will-change: transform; }

  
  .link-underline { position: relative; display: inline-block; }
  .link-underline::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 420ms var(--ease-out);
  }
  .group:hover .link-underline::after { transform-origin: left; transform: scaleX(1); }
  .link-underline.subtle::after { background: rgba(15, 15, 15, 0.25); }
  .link-underline.subtle-light::after { background: rgba(242, 238, 227, 0.3); }

  ::selection { background: var(--ink); color: var(--cream); }

  @media (prefers-reduced-motion: reduce) {
    [data-anim], .word { opacity: 1 !important; transform: none !important; }
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(circle at 25% 25%, rgba(31, 77, 61, 0.018) 0%, transparent 40%),
      radial-gradient(circle at 75% 75%, rgba(15, 15, 15, 0.018) 0%, transparent 40%);
    z-index: 1;
  }
  main, footer { position: relative; z-index: 2; }
  header { z-index: 30; }

  .display-numeral {
    font-family: 'JetBrains Mono', monospace;
    font-feature-settings: "ss01";
  }

  .scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    background: var(--brand);
    width: 0%;
    z-index: 60;
    transition: width 80ms linear;
  }

  .tilt { transform-style: preserve-3d; transition: transform 400ms var(--ease-out); }

  
  .nav-item { position: relative; }

  
  .nav-trigger-wrap {
    position: relative;
  }

  .mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s linear 320ms;
    z-index: 40;
    padding-top: 12px;
  }

  .nav-item.menu-open .mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s linear 0s;
  }

  
  .nav-trigger {
    position: relative;
  }
  .nav-trigger::after {
    content: '';
    position: absolute;
    left: 16px; right: 16px;
    bottom: -22px;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 360ms var(--ease-out);
  }
  .nav-item:hover .nav-trigger::after,
  .nav-item.menu-open .nav-trigger::after {
    transform: scaleX(1);
  }
  .nav-link {
    position: relative;
  }
  .nav-link::after {
    content: '';
    position: absolute;
    left: 16px; right: 16px;
    bottom: -22px;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 360ms var(--ease-out);
  }
  .nav-link:hover::after { transform: scaleX(1); }

  
  .mega-area {
    transition: background 280ms ease;
    border-radius: 12px;
  }
  .mega-area:hover .mega-area-name {
    color: var(--brand);
  }
  .mega-area:hover .mega-area-arrow {
    transform: translateX(6px);
    opacity: 1;
    color: var(--brand);
  }
  .mega-area-arrow {
    transition: transform 320ms var(--ease-out), opacity 320ms ease, color 320ms ease;
    opacity: 0.3;
  }
  .mega-area-name {
    transition: color 320ms ease;
  }

  
  
  .mega-cat {
    color: var(--cream);
    position: relative;
  }
  .mega-cat-name {
    transition: color 320ms ease;
  }
  .mega-cat-arrow {
    transition: transform 320ms var(--ease-out), opacity 320ms ease, color 320ms ease;
    opacity: 0.35;
    color: var(--cream);
  }

  
  .mega-cat:hover,
  .mega-cat.active {
    background: rgba(118, 200, 147, 0.08);
  }
  .mega-cat.active {
    background: rgba(143, 181, 164, 0.12);
  }
  .mega-cat:hover .mega-cat-name,
  .mega-cat.active .mega-cat-name {
    color: var(--brand-light);
  }
  .mega-cat:hover .mega-cat-arrow,
  .mega-cat.active .mega-cat-arrow {
    transform: translateX(5px);
    opacity: 1;
    color: var(--brand-light);
  }

  
  
  .mega-cat-ai {
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(
        118deg,
        rgba(31, 77, 61, 0.55) 0%,
        rgba(31, 61, 68, 0.45) 22%,
        rgba(61, 42, 64, 0.45) 44%,
        rgba(92, 63, 44, 0.40) 66%,
        rgba(31, 77, 61, 0.50) 88%,
        rgba(118, 200, 147, 0.30) 100%
      );
    background-size: 280% 280%;
    background-position: 0% 50%;
    border: 1px solid rgba(143, 181, 164, 0.20);
    animation: aiCatDrift 16s ease-in-out infinite;
  }

  
  .mega-cat-ai::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 220px;
    transform: translate(-50%, -50%);
    background:
      radial-gradient(ellipse at 20% 50%, rgba(118, 200, 147, 0.28) 0%, transparent 55%),
      radial-gradient(ellipse at 80% 50%, rgba(184, 159, 190, 0.20) 0%, transparent 55%),
      radial-gradient(ellipse at 50% 50%, rgba(143, 192, 204, 0.18) 0%, transparent 60%);
    filter: blur(32px);
    pointer-events: none;
    opacity: 0.75;
    transition: opacity 600ms ease;
    z-index: 0;
  }

  
  .mega-cat-ai::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
      105deg,
      transparent 0%,
      rgba(143, 181, 164, 0.20) 45%,
      rgba(242, 238, 227, 0.14) 50%,
      rgba(184, 159, 190, 0.20) 55%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 1;
    transition: left 900ms var(--ease-out);
  }
  .mega-cat-ai:hover::after,
  .mega-cat-ai.active::after {
    left: 130%;
  }

  
  .mega-cat-ai:hover,
  .mega-cat-ai.active {
    background:
      linear-gradient(
        118deg,
        rgba(31, 77, 61, 0.75) 0%,
        rgba(31, 61, 68, 0.65) 22%,
        rgba(61, 42, 64, 0.65) 44%,
        rgba(92, 63, 44, 0.55) 66%,
        rgba(31, 77, 61, 0.70) 88%,
        rgba(118, 200, 147, 0.45) 100%
      );
    background-size: 280% 280%;
    border-color: rgba(143, 181, 164, 0.42);
  }
  .mega-cat-ai:hover::before,
  .mega-cat-ai.active::before {
    opacity: 1;
  }

  
  @keyframes aiCatDrift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  
  .ai-mobile-label,
  .ai-footer-label {
    background: linear-gradient(118deg, #1F4D3D 0%, #1F3D44 33%, #3D2A40 66%, #5C3F2C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-size: 200% 200%;
    animation: aiCatDrift 16s ease-in-out infinite;
  }
  
  .mega-depth {
    position: absolute;
    top: 28px;
    left: 28px;
    right: 28px;
    bottom: 28px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(8px);
    transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
  }
  .mega-depth.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  

  
  :root {
    --card-green: #1F4D3D;
    --card-slate: #2A3540;
    --card-plum:  #3D2A40;
    --card-teal:  #1F3D44;
    --card-copper: #5C3F2C;
    --card-green-soft: #76C893;
    --card-slate-soft: #8FA3B8;
    --card-plum-soft:  #B89FBE;
    --card-teal-soft:  #8FC0CC;
    --card-copper-soft: #D9A380;
  }

  .mega-group {
    display: block;
    background: white;
    border: 1px solid rgba(15, 15, 15, 0.08);
    border-radius: 16px;
    padding: 22px 22px 20px;
    min-height: 178px;
    position: relative;
    overflow: hidden;
    transition: background-color 240ms ease, border-color 240ms ease, box-shadow 360ms var(--ease-out);
    box-shadow: 0 1px 0 rgba(15, 15, 15, 0.04);
    
    will-change: background-color;
  }

  .mega-group-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 134px;
  }

  
  .mega-group-name {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin-bottom: 10px;
    transform: scale(0.818);
    transform-origin: left top;
    transition: transform 280ms var(--ease-out), color 240ms ease;
    
    font-kerning: none;
  }

  .mega-group-arrow {
    font-size: 13px;
    opacity: 0.4;
    display: inline-block;
    transition: transform 280ms var(--ease-out), opacity 240ms ease, color 240ms ease;
  }

  .mega-group-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--grey-soft);
    margin: 0 0 auto;
    transition: color 240ms ease;
  }

  .mega-scan {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--grey);
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 15, 15, 0.08);
    transition: color 240ms ease, border-color 240ms ease;
  }

  
  .mega-group:hover {
    border-color: transparent;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px -12px rgba(15, 15, 15, 0.28);
  }

  .mega-group:hover .mega-group-name {
    transform: scale(1);
    color: var(--cream);
  }

  .mega-group:hover .mega-group-arrow {
    transform: translateX(6px);
    opacity: 1;
    color: var(--cream);
  }

  
  .mega-group:hover .mega-group-desc {
    color: rgba(255, 250, 240, 0.85);
    animation: megaSweep 420ms var(--ease-out) 80ms both;
  }
  .mega-group:hover .mega-scan {
    color: rgba(255, 250, 240, 0.65);
    border-top-color: rgba(255, 255, 255, 0.18);
    animation: megaSweep 420ms var(--ease-out) 160ms both;
  }

  @keyframes megaSweep {
    from {
      transform: translateY(10px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  
  .mega-group[data-theme="green"]:hover  { background-color: var(--card-green);  }
  .mega-group[data-theme="slate"]:hover  { background-color: var(--card-slate);  }
  .mega-group[data-theme="plum"]:hover   { background-color: var(--card-plum);   }
  .mega-group[data-theme="teal"]:hover   { background-color: var(--card-teal);   }
  .mega-group[data-theme="copper"]:hover { background-color: var(--card-copper); }

  
  
  .mega-group[data-theme="ai-copilot"]:hover {
    background:
      linear-gradient(125deg,
        #1F4D3D 0%,
        #1F3D44 35%,
        #2A5C4B 65%,
        #3D2A40 100%
      );
  }
  
  .mega-group[data-theme="ai-openai"]:hover {
    background:
      linear-gradient(125deg,
        #3D2A40 0%,
        #2D2540 35%,
        #1F3D44 65%,
        #1F4D3D 100%
      );
  }
  
  .mega-group[data-theme="ai-governance"]:hover {
    background:
      linear-gradient(125deg,
        #2A3540 0%,
        #3D2A40 40%,
        #5C3F2C 75%,
        #2A3540 100%
      );
  }

  
  .mega-group[data-theme="green"]:hover  .mega-scan { color: var(--card-green-soft);  }
  .mega-group[data-theme="slate"]:hover  .mega-scan { color: var(--card-slate-soft);  }
  .mega-group[data-theme="plum"]:hover   .mega-scan { color: var(--card-plum-soft);   }
  .mega-group[data-theme="teal"]:hover   .mega-scan { color: var(--card-teal-soft);   }
  .mega-group[data-theme="copper"]:hover .mega-scan { color: var(--card-copper-soft); }

  
  .mega-group[data-theme="ai-copilot"]:hover    .mega-scan { color: var(--card-green-soft); }
  .mega-group[data-theme="ai-openai"]:hover     .mega-scan { color: var(--card-plum-soft); }
  .mega-group[data-theme="ai-governance"]:hover .mega-scan { color: var(--card-copper-soft); }

  .mega-bottom-link {
    transition: color 280ms ease;
  }
  .mega-bottom-link:hover { color: var(--brand); }

  
  #mobile-drawer { overflow: hidden; }
  #mobile-drawer.open { pointer-events: auto; }
  #mobile-drawer.open #mobile-backdrop { opacity: 1; }
  #mobile-drawer.open #mobile-panel { translate: 0; }
  body.no-scroll { overflow: hidden; }
  .mega-bottom-link:hover .arrow { transform: translateX(4px); }

  
  .hero-split {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw - 72px);
    max-width: 1720px;
    overflow: hidden;
    min-height: clamp(520px, 70svh, 760px);
    margin: 5px 0 clamp(40px, 5vw, 80px);
    border-radius: clamp(22px, 2.6vw, 40px);
    display: flex; align-items: stretch;
    z-index: 2;
    background: #FFFFFF;
    box-shadow: var(--shadow-soft);
  }
  .hero-split-copy {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(40px, 4.4vw, 84px) clamp(24px, 3vw, 56px) clamp(40px, 4.4vw, 84px) clamp(24px, 3.4vw, 72px);
  }
  .hero-split-title {
    font-weight: 700;
    font-size: clamp(40px, 6.8vw, 112px);
    line-height: 0.94;
    letter-spacing: -0.043em;
    color: var(--ink);
  }
  .hero-split-line { display: block; }
  .hero-split-green { color: var(--brand); }
  .hero-split-copper { color: #6B4128; }
  .hero-split-lead {
    margin-top: clamp(20px, 1.8vw, 32px);
    max-width: 620px;
    font-size: clamp(15px, 1.15vw, 20px);
    line-height: 1.6;
    color: var(--grey-soft);
  }
  .hero-split-cta {
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
    margin-top: clamp(28px, 2.6vw, 46px);
  }
  .hero-split-btn {
    font-size: 14px; font-weight: 600; color: #FFFFFF; background: var(--ink);
    padding: 13px 24px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background 300ms ease;
  }
  .hero-split-btn:hover { background: var(--ink-soft); }
  .hero-split-alt {
    font-size: 14px; font-weight: 500; color: var(--grey-soft);
    display: inline-flex; align-items: center; gap: 8px;
    transition: color 300ms ease;
  }
  .hero-split-alt:hover { color: var(--ink); }

  .hero-split-panel {
    position: relative;
    flex: 0 0 clamp(280px, 32%, 520px);
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(40px, 4.4vw, 84px) clamp(22px, 2.2vw, 40px) clamp(40px, 4.4vw, 84px) clamp(26px, 2.4vw, 44px);
    overflow: hidden;
    background: #14201C;
    text-decoration: none;
    transition: background 1100ms ease;
  }
  .hero-split-wash {
    position: absolute; top: -18%; right: -22%;
    width: 78%; height: 62%; border-radius: 50%;
    background-color: #76C893; opacity: 0.16;
    filter: blur(64px); pointer-events: none;
    transition: background-color 1100ms ease;
  }
  .hero-split-track { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: rgba(255,255,255,0.14); }
  .hero-split-fill { position: absolute; left: 0; top: 0; width: 5px; height: 0; background: #76C893; }
  .hero-split-label {
    position: relative;
    font-size: clamp(13px, 1.1vw, 17px); font-weight: 600; color: #76C893;
    margin-bottom: clamp(10px, 0.9vw, 16px);
    transition: opacity 400ms ease, color 900ms ease;
  }
  .hero-split-head {
    position: relative;
    display: block; margin: 0 0 clamp(18px, 1.8vw, 30px);
    font-weight: 700; font-size: clamp(21px, 2.1vw, 32px); line-height: 1.12;
    letter-spacing: -0.028em; color: #FFFFFF;
    transition: opacity 400ms ease, transform 460ms var(--ease-out);
  }
  .hero-split-link {
    position: relative;
    font-size: clamp(13px, 1.05vw, 16px); font-weight: 600; color: #FFFFFF;
    display: inline-flex; align-items: center; gap: 8px;
    transition: opacity 400ms ease;
  }
  @media (max-width: 1023px) {
    .hero-split { width: calc(100vw - 24px); min-height: 0; flex-direction: column; }
    
    .hero-split-title { font-size: clamp(28px, 9.2vw, 76px); }
    .hero-split-panel { flex: 0 0 auto; min-height: 320px; }
    .hero-split-cta { margin-top: 32px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-split-panel, .hero-split-label, .hero-split-head, .hero-split-link { transition: none; }
    .hero-split-fill { height: 100%; }
  }


  
  .ctl-off {
    position: relative; overflow: hidden;
    border-radius: clamp(16px, 1.6vw, 24px);
    background: transparent;   
  }
  .ctl-off-img {
    display: block; width: 100%; height: clamp(280px, 34vw, 520px);
    object-fit: cover; object-position: 30% center;
    
    -webkit-mask-image: linear-gradient(95deg, #000 0%, #000 42%, rgba(0,0,0,0.72) 58%, rgba(0,0,0,0.26) 75%, rgba(0,0,0,0) 90%);
    mask-image: linear-gradient(95deg, #000 0%, #000 42%, rgba(0,0,0,0.72) 58%, rgba(0,0,0,0.26) 75%, rgba(0,0,0,0) 90%);
  }
  .ctl-off-scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(96deg, rgba(12,9,6,0.80) 0%, rgba(12,9,6,0.46) 28%, rgba(12,9,6,0.04) 50%, rgba(12,9,6,0) 62%);
  }
  .ctl-off-head {
    position: absolute; left: clamp(22px, 3.2vw, 56px); top: 50%; transform: translateY(-50%);
    margin: 0; max-width: min(60%, 700px);
    font-weight: 700; font-size: clamp(19px, 2.35vw, 35px);
    line-height: 1.12; letter-spacing: -0.03em; color: #FFFFFF;
    text-shadow: 0 2px 24px rgba(0,0,0,0.45);
    
    min-height: calc(2 * 1.12em);
  }
  .ctl-off-l1, .ctl-off-l2 {
    display: block; will-change: opacity, transform;
    transition: opacity 300ms var(--ease-out), transform 420ms var(--ease-out), color 700ms ease;
  }
  .ctl-off-l2 { color: #8FB5A4; }
  @media (prefers-reduced-motion: reduce) {
    .ctl-off-l1, .ctl-off-l2 { transition: color 700ms ease; }
  }
  .ctl-off-card {
    position: relative; z-index: 2;
    width: min(880px, 88%); margin: clamp(-104px, -6.2vw, -60px) 0 0 auto;
    background: var(--ivory); border: 1px solid rgba(15,15,15,0.09);
    border-radius: clamp(14px, 1.4vw, 20px);
    padding: clamp(22px, 2.4vw, 40px) clamp(22px, 2.6vw, 44px);
    box-shadow: var(--shadow-soft);
  }
  .ctl-off-card p {
    margin: 0; font-size: clamp(15px, 1.15vw, 19px); line-height: 1.62; color: var(--grey-soft);
  }
  @media (max-width: 700px) {
    .ctl-off-img {
      height: 260px; object-position: 26% center;
      -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 46%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0) 94%);
      mask-image: linear-gradient(100deg, #000 0%, #000 46%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0) 94%);
    }
    
    .ctl-off-head {
      max-width: 88%;
      font-size: clamp(15px, 4.4vw, 20px);
      min-height: calc(3 * 1.12em);
    }
    .ctl-off-scrim { background: linear-gradient(100deg, rgba(12,9,6,0.9) 0%, rgba(12,9,6,0.6) 40%, rgba(12,9,6,0.1) 72%); }
    .ctl-off-card { width: 100%; margin-top: 16px; }
  }

  
  .how-diag {
    position: relative; overflow: hidden;
    border-radius: clamp(16px, 1.8vw, 26px);
    background: var(--ivory, #F7F7F5);
    box-shadow: var(--shadow-soft);
  }
  .how-diag-pane {
    position: relative; display: flex; align-items: stretch;
    min-height: clamp(300px, 30vw, 440px);
  }
  .how-diag-over {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, #1F4D3D, #0D4E5A, #14201C);
    clip-path: polygon(46% 0, 100% 0, 100% 100%, 30% 100%);
    animation: howTrade 14s infinite;
  }
  .how-diag-over .how-diag-pane { height: 100%; }
  
  @keyframes howTrade {
    0%,  43% { clip-path: polygon(46% 0, 100% 0, 100% 100%, 30% 100%); animation-timing-function: cubic-bezier(.7,0,.3,1); }
    50%, 93% { clip-path: polygon(0 0, 54% 0, 70% 100%, 0 100%);       animation-timing-function: cubic-bezier(.7,0,.3,1); }
    100%     { clip-path: polygon(46% 0, 100% 0, 100% 100%, 30% 100%); }
  }
  
  @keyframes howTradeStack {
    0%,  43% { clip-path: polygon(0 47%, 100% 41%, 100% 100%, 0 100%); animation-timing-function: cubic-bezier(.7,0,.3,1); }
    50%, 93% { clip-path: polygon(0 0, 100% 0, 100% 59%, 0 53%);       animation-timing-function: cubic-bezier(.7,0,.3,1); }
    100%     { clip-path: polygon(0 47%, 100% 41%, 100% 100%, 0 100%); }
  }
  
  .how-diag:not(.how-live) .how-diag-over { animation-play-state: paused; }

  .how-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
  .how-side-map   { padding: clamp(26px,3vw,52px) clamp(30px,3.4vw,60px) clamp(26px,3vw,52px) clamp(26px,3vw,52px); justify-content: flex-start; }
  .how-side-prove { padding: clamp(26px,3vw,52px) clamp(26px,3vw,52px) clamp(26px,3vw,52px) clamp(34px,3.8vw,68px); justify-content: flex-end; text-align: right; }

  .how-verb {
    display: block; width: fit-content;
    font-weight: 700; letter-spacing: -0.05em; line-height: 0.88;
    font-size: clamp(44px, 5vw, 78px); margin-bottom: clamp(12px, 1.2vw, 20px);
  }
  .how-side-prove .how-verb { margin-left: auto; }

  .how-side h3 { font-weight: 700; letter-spacing: -0.024em; line-height: 1.1;
    font-size: clamp(17px, 1.5vw, 23px); margin-bottom: 12px; }
  .how-side p { font-size: clamp(14px, 1.05vw, 16.5px); line-height: 1.62; max-width: min(34ch, 62%); }
  .how-side-prove p { margin-left: auto; }

  
  .how-diag .how-verb-map    { color: #1F4D3D; }
  .how-diag .how-verb-prove  { color: #7A4A1F; }
  .how-diag .how-side h3     { color: var(--ink); }
  .how-diag .how-side p      { color: var(--grey-soft); }
  .how-diag-over .how-verb-map   { color: #7FD1B9; }
  .how-diag-over .how-verb-prove { color: #F0C9A0; }
  .how-diag-over .how-side h3    { color: #FFFFFF; }
  .how-diag-over .how-side p     { color: rgba(255,255,255,0.80); }

  
  @media (max-width: 900px) {
    .how-diag-over { animation-name: howTradeStack;
      clip-path: polygon(0 47%, 100% 41%, 100% 100%, 0 100%); }
    .how-diag-pane { flex-direction: column; min-height: 0; }
    .how-side-map   { padding: 30px 26px 22px; }
    .how-side-prove { padding: 30px 26px 32px; text-align: left; }
    .how-side-prove .how-verb, .how-side-prove p { margin-left: 0; }
    .how-side p { max-width: 48ch; }
  }
  @media (prefers-reduced-motion: reduce) {
    .how-diag-over { animation: none; }
  }

  
  .svc-stack { display: flex; flex-direction: column; gap: 20px; }
  .svc-row {
    display: flex; flex-direction: column; gap: 20px;
    transition: min-height 520ms var(--ease-out);
  }
  
  .svc-card { flex: 1 1 0%; min-width: 0; transition: flex-grow 520ms var(--ease-out); }

  
  .bento-card .svc-hit { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
  
  .bento-card.card .svc-hit { inset: -1px; }
  .bento-card .svc-more { position: relative; z-index: 3; }

  
  .svc-card h3.svc-head { margin-bottom: 18px; }
  .svc-card .signal-row { margin-top: auto; }

  .svc-more {
    display: grid; grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows 460ms var(--ease-out), opacity 300ms ease;
  }
  .svc-more-in { overflow: hidden; min-height: 0; }
  .svc-scan {
    font-size: 12.5px; line-height: 1.5; letter-spacing: 0.015em;
    padding-bottom: 14px; color: var(--grey);
  }
  .bento-card.dark .svc-scan { color: rgba(242, 238, 227, 0.6); }
  .svc-more a {
    display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline;
    padding: 11px 0; text-decoration: none;
    border-top: 1px solid rgba(15, 15, 15, 0.14);
  }
  .bento-card.dark .svc-more a { border-top-color: rgba(242, 238, 227, 0.18); }
  .svc-more a b { font-size: 13.5px; font-weight: 700; color: var(--brand); flex: none; }
  .bento-card.dark .svc-more a b { color: var(--brand-soft); }
  .bento-card.factor1 .svc-more a b { color: var(--green-soft); }
  .svc-more a span { font-size: 13px; line-height: 1.45; color: var(--grey-soft); }
  .bento-card.dark .svc-more a span { color: rgba(242, 238, 227, 0.72); }
  .svc-more a:hover b { text-decoration: underline; }

  @media (min-width: 768px) {
    .svc-row-2up { flex-direction: row; }
  }
  @media (min-width: 1024px) {
    .svc-row { flex-direction: row; min-height: clamp(280px, 27vw, 380px); }
    .svc-row-band { min-height: clamp(150px, 14vw, 210px); }
    .svc-w7 { flex-grow: 7; } .svc-w6 { flex-grow: 6; } .svc-w5 { flex-grow: 5; }
  }
  
  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    
    .svc-row:hover .svc-card { flex-grow: 3.6; }
    .svc-row .svc-card:hover { flex-grow: 8; }
    
    .svc-row:hover .svc-card:not(:hover) h3.svc-head { font-size: 19px; line-height: 1.25; }
    .svc-card h3.svc-head { transition: font-size 460ms var(--ease-out); }
    .svc-stack .svc-row:hover { min-height: clamp(400px, 36vw, 500px); }
    .svc-stack .svc-row-band:hover { min-height: clamp(250px, 23vw, 320px); }
    .svc-card:hover .svc-more { grid-template-rows: 1fr; opacity: 1; }
    .svc-row-solo .svc-card:hover { flex-grow: 1; }
  }
  @media not all and (min-width: 1024px), not all and (hover: hover) {
    .svc-more { grid-template-rows: 1fr; opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .svc-row, .svc-card, .svc-more { transition: none; }
  }



.fmh { position: relative; border-radius: 24px; background: #0E241C; overflow: hidden; }
.fmh.glow::before { background: radial-gradient(900px circle at var(--mx, 72%) var(--my, 15%), rgba(143, 181, 164, 0.16), transparent 44%); opacity: 1; }
.fmh::after { content: ""; position: absolute; inset: 0; opacity: 0.09; mix-blend-mode: overlay; background-image: radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.5) 0.5px, transparent 1px); background-size: 60px 60px; pointer-events: none; }
.fmh-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 56px); padding: clamp(36px, 4.8vw, 64px) clamp(24px, 4.4vw, 64px); align-items: center; }
.fmh-t1 { display: block; font-weight: 300; font-size: clamp(28px, 3.4vw, 50px); letter-spacing: -0.03em; line-height: 1.05; color: var(--cream); }
.fmh-t2 { display: block; font-weight: 800; font-size: clamp(34px, 4.2vw, 60px); letter-spacing: -0.04em; line-height: 1; color: var(--brand-light); margin-top: 2px; }
.fmh-lead { margin-top: 16px; font-size: clamp(14px, 1.25vw, 16.5px); line-height: 1.7; color: rgba(242, 238, 227, 0.82); max-width: 470px; }
.fmh-ctas { display: flex; align-items: center; gap: 20px; margin-top: 24px; flex-wrap: wrap; }
.fmh-btn { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; background: var(--cream); color: var(--ink); padding: 12px 24px; border-radius: 999px; transition: background 300ms ease; }
.fmh-btn:hover { background: #FFFFFF; }
.fmh-alt { font-size: 14px; font-weight: 700; color: var(--brand-light); }
.fmh-led { border-top: 1px solid rgba(242, 238, 227, 0.14); align-self: center; }
.fmh-r { display: flex; gap: 14px; align-items: baseline; padding: 13px 10px; border-bottom: 1px solid rgba(242, 238, 227, 0.14); position: relative; opacity: 0.42; transition: opacity 550ms ease, background 250ms ease; border-radius: 8px; text-decoration: none; }
.fmh-r::before { content: ""; position: absolute; left: -2px; top: 16%; bottom: 16%; width: 3px; border-radius: 2px; background: var(--brand-light); opacity: 0; transition: opacity 450ms ease; }
.fmh-r.lit { opacity: 1; }
.fmh-r.lit::before { opacity: 1; }
.fmh-r:hover { background: rgba(143, 181, 164, 0.07); }
.fmh-r b { flex: 0 0 clamp(130px, 13vw, 170px); font-size: clamp(13.5px, 1.2vw, 15.5px); font-weight: 800; color: var(--cream); letter-spacing: -0.01em; line-height: 1.3; display: inline-flex; align-items: baseline; gap: 6px; }
.fmh-r span { font-size: clamp(12px, 1.05vw, 13.5px); line-height: 1.55; color: rgba(242, 238, 227, 0.72); }
.fmh-bolt { width: 14px; height: 14px; color: #E8A13C; transform: translateY(2px); flex: 0 0 auto; }
@media (max-width: 900px) { .fmh-in { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .fmh-r { flex-direction: column; gap: 5px; } .fmh-r b { flex: 0 0 auto; } }
.fmh-t { margin: 0; }



.f1h { position: relative; border-radius: 24px; background: #484848; overflow: hidden; }
.f1h::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #F7B500, #EC5A4E 46%, #E0009B); z-index: 2; }
.f1h-geo { position: absolute; right: -5%; bottom: -18px; width: 34%; height: clamp(70px, 9vw, 120px); background: linear-gradient(250deg, #F7B500, #F08A2C); clip-path: polygon(100% 100%, 100% 20%, 0 100%); opacity: 0.4; pointer-events: none; }
.f1h-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 56px); padding: clamp(34px, 4.6vw, 60px) clamp(24px, 4.4vw, 64px); align-items: center; }
.f1h-logo { height: clamp(24px, 2.6vw, 32px); width: auto; display: block; }
.f1h-mot { font-family: Verdana, Geneva, sans-serif; font-weight: 700; font-size: clamp(30px, 4vw, 54px); letter-spacing: -0.028em; line-height: 1; color: #F0F0F0; margin-top: clamp(14px, 1.8vw, 22px); }
.f1h-mot i { font-style: normal; color: #E0009B; }
.f1h-lead { font-size: clamp(13px, 1.15vw, 15.5px); color: #C9C9C9; margin-top: 12px; max-width: 470px; line-height: 1.65; }
.f1h-ctas { display: flex; align-items: center; gap: 18px; margin-top: 20px; flex-wrap: wrap; }
.f1h-btn { display: inline-block; background: #E0009B; color: #FFFFFF; font-weight: 700; font-size: clamp(12.5px, 1.05vw, 14px); border-radius: 999px; padding: 10px 19px; transition: background 0.25s; }
.f1h-btn:hover { background: #C60088; }
.f1h-lnk { font-size: clamp(12.5px, 1.05vw, 14px); font-weight: 700; color: #E0009B; text-decoration: none; }
.f1h-lnk:hover { text-decoration: underline; }
.f1h-led { display: flex; flex-direction: column; }
.f1h-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: clamp(13px, 1.5vw, 17px) 2px; border-top: 1px solid rgba(240, 240, 240, 0.14); text-decoration: none; transition: padding-left 0.25s; }
.f1h-row:last-child { border-bottom: 1px solid rgba(240, 240, 240, 0.14); }
.f1h-row:hover { padding-left: 8px; }
.f1h-row span { font-size: clamp(13px, 1.1vw, 15px); font-weight: 600; color: #F0F0F0; }
.f1h-row em { font-style: normal; color: #C9C9C9; font-size: 15px; transition: color 0.25s; }
.f1h-row:hover em { color: #E0009B; }
@media (max-width: 860px) { .f1h-in { grid-template-columns: 1fr; } }



.tsr { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: #FFFFFF; border: 1px solid rgba(20, 20, 20, 0.08); border-radius: 24px; padding: clamp(24px, 3vw, 40px) clamp(24px, 3.2vw, 48px); text-decoration: none; transition: border-color 0.3s, transform 0.3s; }
.tsr:hover { border-color: rgba(20, 20, 20, 0.22); transform: translateY(-2px); }
.tsr-h { font-size: clamp(20px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1.12; }
.tsr-h span { color: var(--grey); }
.tsr-p { font-size: clamp(12.5px, 1.1vw, 14.5px); color: var(--grey); margin-top: 6px; }
.tsr-l { font-size: clamp(13px, 1.15vw, 15px); font-weight: 600; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.tsr .arrow { transition: transform 0.3s; color: var(--green-deep, #1F4D3D); }
.tsr-c .arrow { color: #B33A22; }
.tsr:hover .arrow { transform: translateX(4px); }



.why-chapters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(28px, 3.4vw, 44px); }
.whyc { background: #FFFFFF; border: 1px solid rgba(20, 20, 20, 0.08); border-radius: 20px; padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 28px); text-decoration: none; display: flex; flex-direction: column; transition: border-color 0.3s, transform 0.3s; }
.whyc:hover { border-color: rgba(20, 20, 20, 0.22); transform: translateY(-2px); }
.whyc b { font-size: clamp(15px, 1.4vw, 18px); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.whyc span { font-size: clamp(12px, 1.05vw, 13.5px); color: var(--grey); margin-top: 5px; }
.whyc em { font-style: normal; margin-top: clamp(12px, 1.6vw, 20px); color: var(--brand); font-size: 15px; transition: transform 0.3s; }
.whyc:hover em { transform: translateY(3px); }
@media (max-width: 720px) { .why-chapters { grid-template-columns: 1fr; } }



.why-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(56px, 7vw, 104px); }
.why-h1 span { display: block; font-weight: 800; font-size: clamp(38px, 5.2vw, 74px); letter-spacing: -0.036em; line-height: 1.02; color: var(--ink); }
.why-h1-g { color: var(--brand); }
.why-lead { font-size: clamp(14px, 1.2vw, 17px); color: var(--grey); max-width: 560px; margin-top: clamp(18px, 2.2vw, 28px); line-height: 1.7; }
.why-ctas { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 30px); margin-top: clamp(22px, 2.8vw, 36px); flex-wrap: wrap; }
.why-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--cream); font-weight: 600; font-size: clamp(13px, 1.15vw, 15px); border-radius: 999px; padding: 13px 24px; text-decoration: none; }
.why-alt { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: clamp(13px, 1.15vw, 15px); color: var(--ink); text-decoration: none; }
.why-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(26px, 3.4vw, 48px); background: var(--green-deep, #0E241C); border-radius: 20px; padding: clamp(24px, 2.6vw, 36px) clamp(24px, 2.8vw, 38px); min-height: clamp(260px, 26vw, 360px); text-decoration: none; transition: transform 0.3s; }
.why-panel:hover { transform: translateY(-3px); }
.why-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(460px circle at 78% 6%, rgba(143, 181, 164, 0.22), transparent 55%); pointer-events: none; }
.why-pl { position: relative; font-size: clamp(12.5px, 1.05vw, 14px); color: #8FB5A4; }
.why-pline { position: relative; font-weight: 800; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -0.03em; line-height: 1.08; color: var(--cream); max-width: 340px; min-height: 2.2em; }
.why-pline i { font-style: normal; color: #8FB5A4; }
.why-pfoot { position: relative; }
.why-ptrack { display: flex; gap: 6px; }
.why-ptrack i { height: 2px; flex: 1; background: rgba(242, 239, 230, 0.18); transition: background 0.4s; }
.why-ptrack i.on { background: #8FB5A4; }
.why-plink { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(12px, 1.05vw, 13.5px); font-weight: 600; color: var(--cream); margin-top: 14px; }
@media (max-width: 900px) { .why-hero { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .why-panel { transition: none; } }