/* ═══════════════════════════════════════════════════════════
   NAFOS STUDIOS — 3D Floating Hero Section
   Inter · #050505 · Glass blur(24px) · preserve-3d stage
   ═══════════════════════════════════════════════════════════ */

   .nafos-hero {
    --nafos-hero-glow:           #FFFFFF;
    --nafos-hero-glow-rgb:       255, 255, 255;
    --nafos-hero-body-color:     #FFFFFF;
    --nafos-hero-radius:         24px;
    --nafos-hero-float-speed:    4s;
    --nafos-hero-shard-gap:      6px;
    --nafos-hero-title-d:        40px;
    --nafos-hero-title-m:        34px;
    --nafos-hero-sub-d:          14px;
    --nafos-hero-sub-m:          14px;
    --nafos-hero-grad-start:     #FFFFFF;
    --nafos-hero-grad-end:       #2D2D2D;
    --nafos-hero-glass-blur:     20px;
    --nafos-hero-card-blur:      0px;
    --nafos-hero-header-gap:     clamp(15px, 2vh, 25px);
    --nafos-hero-offset-top:     calc(
      var(--nafos-header-top, 1.25rem) + var(--nafos-header-height, 52px) + var(--nafos-hero-header-gap)
    );
  
    position:     relative;
    overflow-x:   clip;
    padding:      var(--nafos-hero-offset-top) 60px 144px;
    background-color: transparent;
    background-image: radial-gradient(ellipse 90% 70% at 50% -15%, rgba(255, 255, 255, 0.07) 0%, transparent 55%);
    isolation:    auto;
  }
  
  .nafos-hero *,
  .nafos-hero *::before,
  .nafos-hero *::after {
    box-sizing: border-box;
  }
  
  /* ── Grid Layout ── */
  .nafos-hero__inner {
    position:              relative;
    z-index:               2;
    max-width:             1380px;
    margin:                0 auto;
    display:               grid;
    grid-template-columns: 1fr 1fr;
    align-items:           center;
    gap:                   56px;
    min-height:            640px;
  }
  
  /* ── Left Column ── */
  .nafos-hero__content {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--nafos-hero-shard-gap);
  }
  
  .nafos-hero__shard {
    position:      relative;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(var(--nafos-hero-glass-blur)) saturate(190%) brightness(1.08);
    -webkit-backdrop-filter: blur(var(--nafos-hero-glass-blur)) saturate(190%) brightness(1.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      inset 0  1.5px  1px rgba(255, 255, 255, 0.20),
      inset 0 -1.5px  1px rgba(0, 0, 0, 0.20),
      0 35px 75px -15px rgba(0, 0, 0, 0.60);
    animation: nafos-hero-shard-in 0.80s var(--nafos-anim-delay, 0ms) cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  
  @keyframes nafos-hero-shard-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  
  /* ── Main Glass Panel ── */
  .nafos-hero__glass-panel {
    width:          100%;
    padding:        52px 48px 44px;
    border-radius:  28px;
    display:        flex;
    flex-direction: column;
    gap:            22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(var(--nafos-hero-glass-blur)) saturate(200%) brightness(1.10);
    -webkit-backdrop-filter: blur(var(--nafos-hero-glass-blur)) saturate(200%) brightness(1.10);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      inset 0  1.5px  1px rgba(255, 255, 255, 0.28),
      inset 0 -1.5px  1px rgba(0, 0, 0, 0.22),
      0 35px 75px -15px rgba(0, 0, 0, 0.65),
      0 8px 28px -8px rgba(var(--nafos-hero-glow-rgb), 0.10);
  }
  
  .nafos-hero__divider {
    width:      100%;
    height:     1px;
    flex-shrink: 0;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.20) 20%, rgba(255, 255, 255, 0.20) 80%, transparent);
  }
  
  /* ── Eyebrow ── */
  .nafos-hero__eyebrow {
    display:       inline-flex;
    align-items:   center;
    gap:           9px;
    background:    rgba(255, 255, 255, 0.06);
    border:        1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    padding:       6px 16px;
    width:         fit-content;
  }
  
  .nafos-hero__eyebrow-pip {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--nafos-hero-glow);
    box-shadow:    0 0 10px var(--nafos-hero-glow), 0 0 22px var(--nafos-hero-glow);
    flex-shrink:   0;
    animation:     nafos-hero-pip 2.4s ease-in-out infinite;
  }
  
  @keyframes nafos-hero-pip {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(0.5); opacity: 0.3; }
  }
  
  .nafos-hero__eyebrow-text {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color:          var(--nafos-hero-glow);
    white-space:    nowrap;
  }
  
  /* ── Headline ── */
  .nafos-hero__headline {
    font-size:      var(--nafos-hero-title-d);
    font-weight:    800;
    line-height:    1.03;
    letter-spacing: -0.04em;
    margin:         0;
    background: linear-gradient(135deg, var(--nafos-hero-grad-start) 0%, var(--nafos-hero-grad-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .nafos-hero__subtitle {
    font-size:   var(--nafos-hero-sub-d);
    line-height: 1.72;
    color:       var(--nafos-hero-body-color);
    margin:      0;
  }
  
  /* ── Stats Row ── */
  .nafos-hero__stats {
    display:     flex;
    align-items: center;
    gap:         28px;
    flex-wrap:   wrap;
    width:       100%;
  }
  
  .nafos-hero__stat {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            5px;
  }
  
  .nafos-hero__stat-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           22px;
    height:          22px;
    opacity:         0.88;
  }
  
  .nafos-hero__stat-icon svg {
    display: block;
    width:   20px;
    height:  20px;
  }

  .nafos-hero__stat-icon img {
    display:    block;
    width:      20px;
    height:     20px;
    object-fit: contain;
  }

  .nafos-hero__stat-icon:not(:has(svg)):not(:has(img)) {
    font-size:   18px;
    line-height: 1;
    color:       #fff;
  }
  
  .nafos-hero__stat-value {
    font-size:      26px;
    font-weight:    800;
    letter-spacing: -0.03em;
    color:          #fff;
    line-height:    1;
  }
  
  .nafos-hero__stat-label {
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          rgba(255, 255, 255, 0.42);
  }
  
  .nafos-hero__stat-sep {
    width:  1px;
    height: 44px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.20) 30%, rgba(255, 255, 255, 0.20) 70%, transparent);
    flex-shrink: 0;
  }
  
  /* ── CTA Buttons ── */
  .nafos-hero__actions {
    display:     flex;
    flex-wrap:   wrap;
    gap:         12px;
    align-items: center;
    width:       100%;
  }
  
  .nafos-hero__btn {
    display:         inline-flex;
    align-items:     center;
    gap:             9px;
    padding:         14px 30px;
    font-size:       14px;
    font-weight:     700;
    letter-spacing:  0.02em;
    border-radius:   100px;
    text-decoration: none;
    cursor:          pointer;
    font-family:     inherit;
    border:          none;
    white-space:     nowrap;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1), background 0.22s ease;
  }
  
  .nafos-hero__btn--primary {
    background: var(--nafos-hero-glow);
    color:      #021510;
    box-shadow: 0 0 28px -4px var(--nafos-hero-glow), 0 4px 20px -4px rgba(0, 0, 0, 0.40);
  }
  
  .nafos-hero__btn--primary:hover {
    transform:  translateY(-3px) scale(1.03);
    box-shadow: 0 0 52px -2px var(--nafos-hero-glow), 0 8px 28px -4px rgba(0, 0, 0, 0.50);
  }
  
  .nafos-hero__btn--ghost {
    background:      rgba(255, 255, 255, 0.06);
    color:           rgba(255, 255, 255, 0.88);
    border:          1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  
  .nafos-hero__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.10);
    transform:  translateY(-3px);
  }
  
  /* ═══════════════════════════════════════════════════════════
     RIGHT COLUMN — 3D STAGE
     ═══════════════════════════════════════════════════════════ */
  .nafos-hero__visual {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    animation: nafos-hero-slide-in 0.9s 0.12s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  
  @keyframes nafos-hero-slide-in {
    from { opacity: 0; transform: translateX(36px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  
  .nafos-hero__stage {
    position:           relative;
    width:              100%;
    max-width:          500px;
    height:             500px;
    perspective:        900px;
    perspective-origin: 50% 50%;
    transform-style:    preserve-3d;
    margin:             0 auto;
    will-change:        transform;
  }
  
  .nafos-hero__orb {
    position:       absolute;
    left:           50%;
    top:            50%;
    translate:      -50% -50%;
    width:          240px;
    height:         240px;
    border-radius:  50%;
    background:     radial-gradient(circle, var(--nafos-hero-glow) 0%, transparent 68%);
    opacity:        0.13;
    filter:         blur(44px);
    pointer-events: none;
    z-index:        0;
    animation:      nafos-hero-orb 7s ease-in-out infinite alternate;
  }
  
  @keyframes nafos-hero-orb {
    from { transform: scale(1) translateY(0); opacity: 0.13; }
    to   { transform: scale(1.4) translateY(-18px); opacity: 0.22; }
  }
  
  /* ── Mobile Cards (embedded in glass panel) ── */
  .nafos-hero__mobile-cards {
    display:     none;
    width:       100%;
    flex-shrink: 0;
  }
  
  .nafos-hero__mobile-cards-wrap {
    display:    block;
    width:      100%;
    position:   relative;
    overflow:   hidden;
    flex-shrink: 0;
  }
  
  .nafos-hero__mobile-stage {
    position:           relative;
    width:              500px;
    height:             500px;
    perspective:        900px;
    perspective-origin: 50% 50%;
    transform-style:    preserve-3d;
    margin:             0 auto;
  }
  
  /* ═══════════════════════════════════════════════════════════
     3D FLOATING CARDS
     ═══════════════════════════════════════════════════════════ */
  .nafos-hero__3d-card {
    display:         flex;
    flex-direction:  row;
    align-items:     stretch;
    text-decoration: none;
    color:           #ffffff !important;
    position:        absolute;
    left:            50%;
    top:             50%;
    width:           88%;
    max-width:       430px;
    aspect-ratio:    21 / 9;
    border-radius:   var(--nafos-hero-radius);
    overflow:        hidden;
    cursor:          pointer;
    will-change:     transform, filter;
    pointer-events:  auto !important;
    transition:      all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    background: linear-gradient(135deg, rgba(15, 15, 15, 0.45) 0%, rgba(25, 25, 25, 0.25) 100%);
    backdrop-filter: blur(var(--nafos-hero-card-blur));
    -webkit-backdrop-filter: blur(var(--nafos-hero-card-blur));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 20px 40px rgba(0, 0, 0, 0.6);
  }
  
  .nafos-hero__3d-card-bg {
    position:      relative;
    z-index:       2;
    flex:          1;
    overflow:      hidden;
    border-radius: calc(var(--nafos-hero-radius) - 3px);
    margin:        8px 8px 8px 0;
    background:    linear-gradient(135deg, #060918 0%, #0d1626 100%);
  }
  
  .nafos-hero__3d-card-gradient {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    display:         block;
    object-fit:      cover;
    object-position: center;
    border:          0;
    transition:      transform 0.55s ease;
  }
  
  .nafos-hero__3d-card:hover .nafos-hero__3d-card-gradient { transform: scale(1.05); }
  
  .nafos-hero__3d-card:hover .nafos-hero__3d-card-bg {
    box-shadow: inset 0 0 0 1px rgba(var(--nafos-hero-glow-rgb), 0.25);
  }
  
  .nafos-hero__3d-card::before {
    content:       '';
    position:      absolute;
    inset:         0;
    z-index:       1;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(var(--nafos-hero-card-blur)) saturate(180%) brightness(1.06);
    -webkit-backdrop-filter: blur(var(--nafos-hero-card-blur)) saturate(180%) brightness(1.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      inset 0  1.5px  1px rgba(255, 255, 255, 0.28),
      inset 0 -1.5px  1px rgba(0, 0, 0, 0.22);
    pointer-events: none;
    transition: backdrop-filter 0.35s ease, background 0.35s ease, border-color 0.35s ease;
  }
  
  .nafos-hero__3d-card:hover::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-color: rgba(255, 255, 255, 0.14);
  }
  
  .nafos-hero__3d-card-body {
    position:        relative;
    z-index:         2;
    width:           42%;
    flex-shrink:     0;
    padding:         16px 18px 16px 20px;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             6px;
  }
  
  .nafos-hero__3d-card-body::after {
    content:    '';
    position:   absolute;
    right:      0;
    top:        10%;
    height:     80%;
    width:      1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.14) 25%, rgba(255, 255, 255, 0.14) 75%, transparent);
    pointer-events: none;
  }
  
  .nafos-hero__3d-card-tag {
    font-size:      10px;
    font-weight:    800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--nafos-card-glow, var(--nafos-hero-glow));
    line-height:    1;
    margin-bottom:  2px;
  }
  
  .nafos-hero__3d-card-title {
    font-size:      clamp(14px, 2.4vw, 20px);
    font-weight:    800;
    color:          #fff;
    letter-spacing: -0.025em;
    margin:         0;
    line-height:    1.12;
  }
  
  .nafos-hero__3d-card-sub {
    font-size: 10px;
    color:     rgba(255, 255, 255, 0.46);
    margin:    0;
  }
  
  .nafos-hero__3d-card-price {
    display:        inline-block;
    margin-top:     5px;
    font-size:      11px;
    font-weight:    800;
    letter-spacing: 0.07em;
    color:          #000;
    background:     var(--nafos-card-glow, var(--nafos-hero-glow));
    padding:        3px 10px;
    border-radius:  100px;
    width:          fit-content;
    box-shadow:     0 0 16px -3px var(--nafos-card-glow, var(--nafos-hero-glow));
  }
  
  .nafos-hero__3d-card::after {
    content:        '';
    position:       absolute;
    inset:          -1px;
    z-index:        5;
    border-radius:  inherit;
    pointer-events: none;
    border:         1.5px solid transparent;
    background:
      linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)) padding-box,
      linear-gradient(135deg, var(--nafos-card-glow, var(--nafos-hero-glow)) 0%, transparent 52%) border-box;
    opacity:    0;
    transition: opacity 0.35s ease;
  }
  
  .nafos-hero__3d-card:hover::after { opacity: 1; }
  
  .nafos-hero__3d-card--1:hover,
  .nafos-hero__3d-card--2:hover,
  .nafos-hero__3d-card--3:hover {
    filter:  drop-shadow(0 0 22px var(--nafos-card-glow, var(--nafos-hero-glow))) brightness(1.07) !important;
    z-index: 25 !important;
  }
  
  /* Card 3 JS forward-hover */
  .nafos-hero__3d-card--3.is-forward-hover {
    filter:  drop-shadow(0 0 22px var(--nafos-card-glow, var(--nafos-hero-glow))) brightness(1.07) !important;
    z-index: 25 !important;
    cursor:  pointer;
  }
  
  .nafos-hero__3d-card--3.is-forward-hover::after { opacity: 1; }
  .nafos-hero__3d-card--3.is-forward-hover .nafos-hero__3d-card-gradient { transform: scale(1.06); }
  .nafos-hero__3d-card--3.is-forward-hover .nafos-hero__3d-card-bg {
    box-shadow: inset 0 0 0 1px rgba(var(--nafos-hero-glow-rgb), 0.25);
  }
  
  /* ── Card Positions & Breath Animations ── */
  .nafos-hero__3d-card--1 {
    translate: -50% -122%;
    transform: rotateX(6deg) rotateY(-8deg) rotateZ(-4deg) translateZ(60px);
    z-index:   10;
    box-shadow:
      inset 0  1.5px  1px rgba(255, 255, 255, 0.28),
      inset 0 -1.5px  1px rgba(0, 0, 0, 0.20),
      0 28px 72px -12px rgba(0, 0, 0, 0.72),
      0 0 0 1px rgba(255, 255, 255, 0.07),
      0 0 55px -22px var(--nafos-card-glow, var(--nafos-hero-glow));
    animation: nafos-hero-breath-1 var(--nafos-hero-float-speed) ease-in-out infinite;
  }
  
  .nafos-hero__3d-card--2 {
    translate: -48% -46%;
    transform: rotateX(-2deg) rotateY(5deg) rotateZ(6deg) translateZ(0);
    z-index:   9;
    box-shadow:
      inset 0  1.5px  1px rgba(255, 255, 255, 0.28),
      inset 0 -1.5px  1px rgba(0, 0, 0, 0.20),
      0 18px 56px -12px rgba(0, 0, 0, 0.62),
      0 0 0 1px rgba(255, 255, 255, 0.05),
      0 0 44px -26px var(--nafos-card-glow, var(--nafos-hero-glow));
    animation: nafos-hero-breath-2 var(--nafos-hero-float-speed) ease-in-out infinite;
    animation-delay: -2.67s;
  }
  
  .nafos-hero__3d-card--3 {
    translate: -46% 30%;
    transform: rotateX(15deg) rotateY(-7deg) rotateZ(-2deg) translateZ(-60px);
    z-index:   15;
    pointer-events: auto !important;
    box-shadow:
      inset 0  1.5px  1px rgba(255, 255, 255, 0.28),
      inset 0 -1.5px  1px rgba(0, 0, 0, 0.20),
      0 8px 40px -12px rgba(0, 0, 0, 0.52),
      0 0 0 1px rgba(255, 255, 255, 0.04),
      0 0 36px -28px var(--nafos-card-glow, var(--nafos-hero-glow));
    animation: nafos-hero-breath-3 var(--nafos-hero-float-speed) ease-in-out infinite;
    animation-delay: -5.33s;
  }
  
  .nafos-hero__3d-card--3::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.08) 100%);
  }
  
  .nafos-hero__3d-card--3:hover::before,
  .nafos-hero__3d-card--3.is-forward-hover::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
  }
  
  @keyframes nafos-hero-breath-1 {
    0%, 100% { translate: -50% -122%; }
    50%      { translate: -50% calc(-122% - 4px); }
  }
  
  @keyframes nafos-hero-breath-2 {
    0%, 100% { translate: -48% -46%; }
    50%      { translate: -48% calc(-46% - 3px); }
  }
  
  @keyframes nafos-hero-breath-3 {
    0%, 100% { translate: -46% 30%; }
    50%      { translate: -46% calc(30% - 4px); }
  }
  
  /* ── Scroll Arrow ── */
  .nafos-hero__scroll-arrow {
    position:        absolute;
    bottom:          28px;
    left:            50%;
    translate:       -50% 0;
    z-index:         20;
    background:      rgba(255, 255, 255, 0.06);
    border:          1px solid rgba(255, 255, 255, 0.08);
    cursor:          pointer;
    padding:         0;
    font:            inherit;
    width:           46px;
    height:          46px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(var(--nafos-hero-glass-blur)) saturate(170%) brightness(1.06);
    -webkit-backdrop-filter: blur(var(--nafos-hero-glass-blur)) saturate(170%) brightness(1.06);
    box-shadow:
      inset 0  1.5px  1px rgba(255, 255, 255, 0.28),
      inset 0 -1.5px  1px rgba(0, 0, 0, 0.15),
      0 8px 32px -8px rgba(0, 0, 0, 0.55),
      0 0 24px -8px rgba(var(--nafos-hero-glow-rgb), 0.22);
    animation:
      nafos-hero-arrow-in  1s   1.2s cubic-bezier(0.22, 1, 0.36, 1) both,
      nafos-hero-arrow-bob 2.6s 2.4s ease-in-out infinite;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
    outline: none;
  }
  
  .nafos-hero__scroll-arrow:hover {
    background:   rgba(255, 255, 255, 0.10);
    border-color: rgba(var(--nafos-hero-glow-rgb), 0.55);
    color:        var(--nafos-hero-glow);
    box-shadow:
      inset 0  1.5px  1px rgba(255, 255, 255, 0.30),
      inset 0 -1.5px  1px rgba(0, 0, 0, 0.18),
      0 8px 32px -8px rgba(0, 0, 0, 0.65),
      0 0 40px -6px rgba(var(--nafos-hero-glow-rgb), 0.50);
  }
  
  .nafos-hero__scroll-arrow:focus-visible {
    outline:        2px solid var(--nafos-hero-glow);
    outline-offset: 3px;
  }
  
  @keyframes nafos-hero-arrow-in {
    from { opacity: 0; transform: translateY(12px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  
  @keyframes nafos-hero-arrow-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
  }
  
  /* ── Dots ── */
  .nafos-hero__dots {
    display:         none;
    gap:             7px;
    justify-content: center;
    margin-top:      18px;
  }
  
  .nafos-hero__dot {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    rgba(255, 255, 255, 0.20);
    transition:    all 0.28s ease;
    cursor:        pointer;
  }
  
  .nafos-hero__dot.is-active {
    background:  var(--nafos-hero-glow);
    box-shadow:  0 0 8px var(--nafos-hero-glow);
    transform:   scale(1.35);
  }
  
  /* ── Next Section (scroll target) ── */
  .nafos-hero__next {
    padding:      120px 24px;
    background-color: transparent;
    background-image: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(0, 229, 192, 0.04) 0%, transparent 60%);
    border-top:   1px solid rgba(255, 255, 255, 0.06);
  }
  
  .nafos-hero__next-inner {
    max-width:  640px;
    margin:     0 auto;
    text-align: center;
  }
  
  .nafos-hero__next-label {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--nafos-hero-glow, #00e5c0);
    margin:         0 0 12px;
  }
  
  .nafos-hero__next-title {
    font-size:      clamp(1.75rem, 4vw, 2.5rem);
    font-weight:    800;
    letter-spacing: -0.03em;
    color:          #fff;
    margin:         0 0 16px;
  }
  
  .nafos-hero__next-desc {
    font-size:   1rem;
    line-height: 1.7;
    color:       rgba(255, 255, 255, 0.55);
    margin:      0;
  }
  
  /* ═══════════════════════════════════════════════════════════
     RESPONSIVE
     ═══════════════════════════════════════════════════════════ */
  @media (prefers-reduced-motion: reduce) {
    .nafos-hero__shard,
    .nafos-hero__3d-card--1,
    .nafos-hero__3d-card--2,
    .nafos-hero__3d-card--3,
    .nafos-hero__visual,
    .nafos-hero__eyebrow-pip,
    .nafos-hero__orb,
    .nafos-hero__scroll-arrow {
      animation: none !important;
    }
  }
  
  @media (max-width: 991px) {
    .nafos-hero {
      padding-top: var(--nafos-hero-offset-top);
      padding-bottom: 72px;
    }
  
    .nafos-hero__inner {
      grid-template-columns: 1fr;
      gap:         32px;
      min-height:  unset;
      align-items: start;
    }
  
    .nafos-hero__content {
      order:       1;
      width:       100%;
      align-items: center;
    }
  
    .nafos-hero__glass-panel {
      text-align:  center;
      align-items: center;
    }
  
    .nafos-hero__stats { justify-content: center; }
    .nafos-hero__actions { justify-content: center; }
  
    .nafos-hero__headline { font-size: var(--nafos-hero-title-m) !important; }
    .nafos-hero__subtitle { font-size: var(--nafos-hero-sub-m) !important; text-align: center; }
  
    .nafos-hero__visual {
      order:          2;
      width:          100%;
      height:         460px;
      overflow:       hidden;
      position:       relative;
      pointer-events: auto;
    }
  
    .nafos-hero__stage {
      transform:        scale(0.80) !important;
      transform-origin: top center !important;
      transform-style:  preserve-3d;
      left:             50%;
      translate:        -50% 0;
      position:         absolute;
      top:              0;
    }
  
    .nafos-hero__scroll-arrow { bottom: 20px; }
    .nafos-hero__dots:not(.nafos-hero__dots--mobile) { display: none; }
  }
  
  @media (max-width: 768px) {
    .nafos-hero {
      --nafos-hero-header-gap: clamp(15px, 2.5vw, 22px);
      padding-top:    var(--nafos-hero-offset-top);
      padding-bottom: 56px;
      padding-left:   0;
      padding-right:  0;
    }
  
    .nafos-hero__inner {
      gap:          24px;
      min-height:   unset;
      padding-left: 16px;
      padding-right: 16px;
    }
  
    .nafos-hero__glass-panel { padding: 32px 26px 28px; }
  
    .nafos-hero__headline {
      font-size:               var(--nafos-hero-title-m) !important;
      letter-spacing:          -0.028em !important;
      line-height:             1.08 !important;
      -webkit-text-stroke:     0 !important;
      text-shadow:             none !important;
    }
  
    .nafos-hero__subtitle {
      font-size:   var(--nafos-hero-sub-m) !important;
      line-height: 1.62;
    }
  
    .nafos-hero__stats {
      flex-wrap:       nowrap;
      gap:             12px;
      justify-content: center;
    }
  
    .nafos-hero__stat-icon { width: 18px; height: 18px; }
    .nafos-hero__stat-icon svg { width: 16px; height: 16px; }
    .nafos-hero__stat-icon img { width: 16px; height: 16px; }
    .nafos-hero__actions { gap: 10px; }
    .nafos-hero__stat-value { font-size: 18px; }
    .nafos-hero__stat-label { font-size: 8px; letter-spacing: 0.05em; }
    .nafos-hero__stat-sep { height: 54px; }
    .nafos-hero__btn { padding: 12px 24px; font-size: 13px; }
  
    .nafos-hero__visual { display: none !important; }
  
    .nafos-hero__mobile-cards {
      display:        flex;
      flex-direction: column;
    }
  
    .nafos-hero__mobile-cards-wrap {
      height:        335px;
      margin-left:   -26px;
      margin-right:  -26px;
      width:         calc(100% + 52px);
      border-radius: 16px;
    }
  
    .nafos-hero__mobile-stage {
      transform:        scale(0.68) !important;
      transform-origin: top center !important;
      transform-style:  preserve-3d !important;
      position:         absolute !important;
      left:             50% !important;
      top:              0 !important;
      translate:        -50% 0 !important;
      height:           500px !important;
      will-change:      transform;
    }
  
    .nafos-hero__mobile-cards .nafos-hero__orb { display: none; }
  
    .nafos-hero__3d-card-body { padding: 12px 14px; gap: 5px; }
    .nafos-hero__3d-card-title { font-size: 15px !important; }
    .nafos-hero__3d-card-sub { font-size: 10px !important; }
  
    .nafos-hero__dots--mobile { display: flex; margin-top: 10px; }
  
    .nafos-hero__scroll-arrow {
      bottom: 14px;
      width:  40px;
      height: 40px;
    }
  }
  
  @media (max-width: 430px) {
    .nafos-hero {
      --nafos-hero-header-gap: clamp(15px, 3vw, 20px);
      padding-top:    var(--nafos-hero-offset-top);
      padding-bottom: 48px;
    }
  
    .nafos-hero__inner {
      padding-left:  14px;
      padding-right: 14px;
      gap:           20px;
    }
  
    .nafos-hero__glass-panel { padding: 24px 20px 22px; }
  
    .nafos-hero__mobile-cards-wrap {
      height:       280px;
      margin-left:  -20px;
      margin-right: -20px;
      width:        calc(100% + 40px);
      border-radius: 14px;
    }
  
    .nafos-hero__mobile-stage {
      transform:        scale(0.55) !important;
      transform-origin: top center !important;
    }
  
    .nafos-hero__stat-sep { display: none; }
    .nafos-hero__stat-value { font-size: 17px; }
    .nafos-hero__stat-icon svg { width: 14px; height: 14px; }
    .nafos-hero__stat-icon img { width: 14px; height: 14px; }
    .nafos-hero__stats { gap: 14px; flex-wrap: wrap; }
  
    .nafos-hero__actions {
      flex-direction: column;
      align-items:    stretch;
      width:          100%;
    }
  
    .nafos-hero__btn {
      width:           100%;
      justify-content: center;
      padding:         14px 20px;
    }
  }