/* Way4Tech Full‑Page Scroll (modulare) */
:root {
  --fp-accent: #ff4d3d;
  --fp-bg-dark: #0b0c10;
  --fp-text: #e8e8ea;
  --fp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fp-footer-height: 100vh;
  --fp-shutter-dur: 1.2s;
  --fp-shutter-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fp-ring: #ff4d3d;
}

/* Neutralize native smooth to avoid double-easing */
html, body { scroll-behavior: auto !important; }

/* Avoid hiding non-active sections to prevent content being cut */
.fp-ready .fp-section { opacity: 1; transform: none; }
.fp-ready .fp-section.is-active { opacity: 1; transform: none; }
.fp-section { min-height: 100vh; transition: opacity .6s var(--fp-ease), transform .6s var(--fp-ease); will-change: opacity, transform; }

/* Dots navigation */
.fp-dots { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 30px; z-index: 1100; pointer-events: auto; }
.fp-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--fp-accent); border: 1px solid rgba(10,28,96,0.4); transition: transform .45s var(--fp-ease), background-color .35s var(--fp-ease), box-shadow .35s var(--fp-ease); cursor: pointer; outline: none; }
.fp-dot:hover { transform: scale(1.25); }
.fp-dot.is-active { transform: scale(1.6); box-shadow: 0 0 0 6px rgba(10, 28, 96, 0.18); }
/* Label on hover: section name with same color */
.fp-dot .fp-dot-label { position: absolute; right: 200%; top: 50%; transform: translateY(-50%) translateX(12px); color: var(--fp-accent); font: 500 11px/1 Inter, Poppins, ui-sans-serif, system-ui, -apple-system, sans-serif; opacity: 0; white-space: nowrap; pointer-events: none; transition: opacity .25s var(--fp-ease), transform .25s var(--fp-ease); letter-spacing: .2px; }
.fp-dot:hover .fp-dot-label, .fp-dot:focus-visible .fp-dot-label, .fp-dot.is-active .fp-dot-label { opacity: 1; transform: translateY(-50%) translateX(0); }
/* Ring progress that draws around the active dot (thin) */
.fp-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; background:
  conic-gradient(var(--fp-ring) calc(var(--fp-progress, 0) * 360deg), rgba(255,255,255,0.12) 0);
  -webkit-mask: radial-gradient(circle 10px, transparent 9.4px, #000 9.4px);
  mask: radial-gradient(circle 10px, transparent 9.4px, #000 9.4px);
  transition: background .2s linear; pointer-events: none; }
/* When inactive, hide the ring */
.fp-dot:not(.is-active)::after { background: conic-gradient(rgba(255,255,255,0.18) 0turn, rgba(255,255,255,0.18) 1turn); }

/* Hide dots on responsive (mobile/tablet) */
@media (max-width: 768px) {
  .fp-dots { display: none !important; }
}

/* Responsive footer: enable internal scroll without visible scrollbar */
@media (max-width: 768px) {
  .fp-footer {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge legacy */
  }
  .fp-footer::-webkit-scrollbar { /* Chrome/Safari */
    width: 0; height: 0;
  }
}

/* Footer reveal */
.fp-footer { position: fixed; left: 0; right: 0; bottom: 0; transform: translateY(100%); transition: transform var(--fp-shutter-dur) var(--fp-shutter-ease); z-index: 1200; box-shadow: 0 -30px 60px rgba(0,0,0,0.25); overflow: hidden; height: var(--fp-footer-height); max-height: 100vh; border-top: 1px solid rgba(0,0,0,0.08); will-change: transform; backface-visibility: hidden; }
.fp-footer.is-open { transform: translateY(0); }
.fp-footer__handle { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 48px; height: 4px; border-radius: 3px; background: rgba(0,0,0,0.2); }
.fp-footer__inner { /* not used when keeping original footer intact */ }
.fp-footer__title { /* not used */ }
.fp-footer__grid { /* not used */ }

/* Optional scrim while footer is open */
.fp-scrim { position: fixed; inset: 0; background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0.45), rgba(0,0,0,0.65)); opacity: 0; pointer-events: none; transition: opacity var(--fp-shutter-dur) var(--fp-shutter-ease); z-index: 1150; }
.fp-scrim.is-visible { opacity: 1; pointer-events: auto; }

/* Scroll lock helper */
body.fp-scroll-locked { overscroll-behavior: none; }

/* Improve reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .fp-section { transition: none; }
  .fp-dot { transition: none; }
  .fp-footer { transition: none; }
}

/* Index labels like the mock (top/bottom numbers) */
.fp-index { color: var(--fp-accent); font: 600 14px/1.2 Inter, Poppins, ui-sans-serif, system-ui, -apple-system, sans-serif; opacity: .9; text-align: center; }
.fp-index--top { margin-bottom: 10px; }
.fp-index--bottom { margin-top: 10px; }

/* Page-change feel during programmatic navigation */
.fp-swapping .fp-section { pointer-events: none; }
.fp-section.fp-outgoing { opacity: 1; transform: none; }
.fp-swapping .fp-section.fp-outgoing { opacity: 0; transform: translateY(-16px); transition: opacity .45s var(--fp-ease), transform .45s var(--fp-ease); }
.fp-swapping .fp-section.fp-incoming { opacity: 0; transform: translateY(22px); }
.fp-swapping .fp-section.fp-incoming.fp-arrive { opacity: 1; transform: translateY(0); transition: opacity .55s var(--fp-ease), transform .55s var(--fp-ease); }

/* Hero framed look and glow */
.hero-fullscreen { position: relative; }
.hero-frame { position: absolute; inset: 2.5vh 2.5vw; border: 12px solid #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,.25); transition: transform .8s var(--fp-ease), clip-path 1s var(--fp-ease); background:#0b0c10; }
.hero-frame .hero-red-glow { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, rgba(255,68,48,.45), rgba(255,68,48,.15) 60%, transparent 75%); filter: blur(30px); z-index: 0; }
.hero-frame .hero-video, .hero-frame .hero-overlay, .hero-frame .hero-content-center { position: relative; z-index: 1; }
.hero-frame .hero-video { transform: scale(.96); border-radius: 12px; background:#000; }
.hero-frame .hero-overlay { border-radius: 12px; }
.hero-frame .hero-content-center { padding: 2vh 2vw; }
.hero-closed .hero-frame { clip-path: inset(50% round 18px); transform: scale(.88); }