*, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 80px; }
  body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  ::selection { background: rgba(100,201,130,0.2); color: #dce6f5; }

  /* ── NAV ── */
  #nav { background: transparent; }
  #nav.scrolled { background: rgba(6,14,26,0.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(100,201,130,0.08); }
  .nav-link { position: relative; }
  .nav-link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:rgba(100,201,130,0.6); transition:width 0.3s ease; }
  .nav-link:hover::after { width:100%; }

  /* ── MOBILE MENU ── */
  #mobile-menu.open { opacity:1; pointer-events:auto; }
  .mobile-link { opacity:0; transform:translateY(12px); transition:opacity 0.3s ease, transform 0.3s ease; }
  #mobile-menu.open .mobile-link { opacity:1; transform:translateY(0); }
  #mobile-menu.open .mobile-link:nth-child(1) { transition-delay:0.05s; }
  #mobile-menu.open .mobile-link:nth-child(2) { transition-delay:0.1s; }
  #mobile-menu.open .mobile-link:nth-child(3) { transition-delay:0.15s; }
  #mobile-menu.open .mobile-link:nth-child(4) { transition-delay:0.2s; }
  #mobile-menu.open .mobile-link:nth-child(5) { transition-delay:0.25s; }

  /* ── HAMBURGER ── */
  #menu-btn.open .line-1 { transform: rotate(45deg) translate(3px, 3px); }
  #menu-btn.open .line-2 { transform: rotate(-45deg) translate(3px, -3px); }

  /* ── HERO ANIMATIONS ── */
  .hero-anim { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; }
  .hero-anim.visible { opacity:1; transform:translateY(0); }
  .hero-anim:nth-child(1) { transition-delay:0.1s; }
  .hero-anim:nth-child(2) { transition-delay:0.25s; }
  .hero-anim:nth-child(3) { transition-delay:0.4s; }
  .hero-anim:nth-child(4) { transition-delay:0.55s; }
  .hero-anim:nth-child(5) { transition-delay:0.7s; }

  .hero-img-anim { opacity:0; transform:translateY(40px); transition:opacity 0.9s ease 0.3s, transform 0.9s ease 0.3s; }
  .hero-img-anim.visible { opacity:1; transform:translateY(0); }

  /* ── SCROLL LINE ── */
  @keyframes scrollPulse { 0%,100%{opacity:0.5;transform:scaleY(1)} 50%{opacity:0.15;transform:scaleY(0.6)} }
  .scroll-line { animation: scrollPulse 2s ease-in-out infinite; transform-origin: top; }

  /* ── REVEAL (below fold only, progressive enhancement) ── */
  @media (prefers-reduced-motion: no-preference) {
    .reveal { opacity:0; transform:translateY(24px); transition:opacity 0.65s ease, transform 0.65s ease; }
    .reveal.visible { opacity:1; transform:translateY(0); }
    .reveal-left { opacity:0; transform:translateX(-28px); transition:opacity 0.7s ease, transform 0.7s ease; }
    .reveal-left.visible { opacity:1; transform:translateX(0); }
    .reveal-right { opacity:0; transform:translateX(28px); transition:opacity 0.7s ease, transform 0.7s ease; }
    .reveal-right.visible { opacity:1; transform:translateX(0); }
  }
  /* Fallback: content always visible if JS disabled or reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right, .hero-anim, .hero-img-anim { opacity:1; transform:none; }
  }

  /* ── INPUTS ── */
  input::placeholder, textarea::placeholder { color: rgba(168,230,207,0.25); }
  input:focus, textarea:focus { border-color: rgba(100,201,130,0.7) !important; }

  /* ── FOCUS VISIBLE ── */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 1px solid rgba(100,201,130,0.6); outline-offset: 4px; }

  /* ── RESPONSIVE ── */
  @media (max-width: 767px) {
    .font-serif { font-size: clamp(2rem, 8vw, 3.2rem); }
  }