/* ============================================================
   Cyber Forge — landing page styles
   ============================================================ */
:root {
  --black: #000000;
  --raisin: #1F1A1B;
  --raisin-2: #2A2425;
  --dusty: #EFE9DD;
  --dusty-2: #E2DBCD;
  --orange: #F69D39;
  --sage: #869B7E;
  --ink: #0B0908;
  --line: rgba(239,233,221,0.14);
  --line-strong: rgba(239,233,221,0.32);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--raisin); color: var(--dusty); }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
img { max-width: 100%; }
body {
  font-family: "DM Sans", system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.mono { font-family: "JetBrains Mono", monospace; letter-spacing: -0.01em; }
.display { font-family: "Space Grotesk", sans-serif; letter-spacing: -0.035em; line-height: 0.92; font-weight: 600; }
::selection { background: var(--orange); color: var(--black); }

/* ── keyframes ─────────────────────────────────────────────── */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
@keyframes marqueeRev { from { transform: translateX(-33.333%); } to { transform: translateX(0); } }
@keyframes rowIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes forgePulse { from { transform: scale(1); opacity: 0.5; } to { transform: scale(2.4); opacity: 0; } }
@keyframes fadeUp { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes floatYsm { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes sheen { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes glowPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes scanDown { 0% { transform: translateY(-100%); opacity: 0; } 10%,90% { opacity: 1; } 100% { transform: translateY(2200%); opacity: 0; } }
@keyframes ringExpand { 0% { transform: scale(0.4); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes shimmerBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* section entrance */
section { animation: fadeUp 700ms cubic-bezier(.2,.7,.2,1) both; }
button:hover { filter: brightness(1.05); }

/* ── scroll-reveal utility ─────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 720ms cubic-bezier(.2,.7,.2,1), transform 720ms cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 80ms; }
.reveal-d2 { transition-delay: 160ms; }
.reveal-d3 { transition-delay: 240ms; }
.reveal-d4 { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  section { animation: none; }
}

/* animated helpers */
.float-y { animation: floatY 6s ease-in-out infinite; }
.float-y-sm { animation: floatYsm 5s ease-in-out infinite; }
.sheen-text {
  background: linear-gradient(100deg, var(--dusty) 30%, var(--orange) 50%, var(--dusty) 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: sheen 5s linear infinite;
}
.hover-lift { transition: transform 240ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms ease, border-color 240ms ease; }
.hover-lift:hover { transform: translateY(-4px); }

/* ── mobile responsiveness ─────────────────────────────────── */
@media (max-width: 860px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
  .mobile-flex { display: flex !important; }
  .status-bar-inner { display: none !important; }
  .primary-nav { display: none !important; }
  .header-actions { display: none !important; }
  
  .mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--raisin);
    border-bottom: 1px solid var(--line);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fadeUp 300ms ease forwards;
  }
}

@media (min-width: 861px) {
  .mobile-only { display: none !important; }
  .hamburger { display: none !important; }
}