:root {
    --font-heading: 'Bebas Neue', sans-serif;
    --font-body: 'Montserrat', sans-serif;
    --font-accent: 'Rajdhani', sans-serif;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.02em;
}

header nav ul li a,
#footer ul li a,
button,
a.inline-flex,
.btn,
.cta-link {
    font-family: var(--font-accent);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.small-label,
#footer h4,
#footer p,
#footer span {
    font-family: var(--font-body);
}

html {
    scroll-behavior: smooth;
}

/* ---- HERO BG (STATIC now) ---- */
.hero-wrap{
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(1200px 700px at 65% 50%, rgba(138,255,107,.18), transparent 60%),
      radial-gradient(900px 600px at 10% 10%, rgba(76,217,100,.12), transparent 70%),
      radial-gradient(700px 500px at 100% 0%, rgba(46,170,96,.10), transparent 70%),
      linear-gradient(180deg, #0D1A12 0%, #0B140F 60%, #0A120D 100%);
    /* animation: bgFloat 16s ease-in-out infinite alternate;  <-- removed */
  }
  
  /* (Optional) keeping keyframes in case you want later, but unused now */
  @keyframes bgFloat{
    0%{ transform: translate3d(0,0,0) scale(1); }
    100%{ transform: translate3d(0,-18px,0) scale(1.02); }
  }
  
  /* ---- ONLY RINGS animate ---- */
  .ring-blur{
    filter: blur(2px);
    opacity: .9;
    will-change: transform, opacity;
    transform: translateZ(0);       /* GPU hint to avoid flicker */
    backface-visibility: hidden;
    animation: ringPulse 7s ease-in-out infinite;
  }
  
  @keyframes ringPulse{
    0%, 100% { transform: translateZ(0) scale(1);   opacity: .85; }
    50%      { transform: translateZ(0) scale(1.08); opacity: 1;   }
  }
  
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .ring-blur{ animation: none !important; }
  }
  




/* spacing + speed */
.marquee { --gap: 3rem; --speed: 22s; }
@media (min-width: 768px){ .marquee { --gap: 5rem; } }

.marquee__track{
  display: flex;
  width: max-content;
  gap: 0;
  will-change: transform;
  animation: marquee var(--speed) linear infinite;
  transform: translate3d(0,0,0); /* GPU & subpixel smooth */
}

.marquee__group{
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding-right: var(--gap); /* loop seam spacing */
}

.marquee:hover .marquee__track{ animation-play-state: paused; }

@keyframes marquee{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-1 * var(--marquee-w, 0px)), 0, 0); }
}

@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
}



.side-vert {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: .3px;
}




.folder-card {
    position: relative;
    border-color: var(--edge);
}

.folder-card::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 14px;
    background: var(--edge);
    border-radius: 10px 10px 0 0;
}

.folder-card::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 24px;
    width: 44px;
    height: 16px;
    background: var(--edge);
    border-radius: 0 0 12px 12px;
}

.reco {
    position: relative;
}

.reco::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 62px;
    height: 12px;
    background: #c8ff5a;
    border-radius: 0 0 12px 12px;
}



.lime-card {
    background-color: #c8ff5a;
}

.lime-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(45deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
    background-size: 34px 34px;
    pointer-events: none;
}
\nsection h2 {\n    font-family: var(--font-heading);\n    text-transform: uppercase;\n    letter-spacing: 0.18em;\n    font-weight: 600;\n}\n\nsection h3 {\n    font-family: var(--font-heading);\n    text-transform: uppercase;\n    letter-spacing: 0.12em;\n    font-weight: 600;\n}\n\nsection p, section li, section span {\n    font-family: var(--font-body);\n    letter-spacing: 0.02em;\n    font-weight: 400;\n}\n\n.lead-text {\n    font-family: var(--font-body);\n    letter-spacing: 0.04em;\n    font-weight: 500;\n}\n