:root {
  --teal: #0F766E;
  --teal-bright: #14B8A6;
  --teal-light: #5eead4;
  --teal-frost: #F0FDFA;
  --teal-mist: #CCFBF1;
  --teal-pale: #CCFBF1;
  --teal-deep: #115E59;
  --midnight: #1A1A1A;
  --charcoal: #2D2D2D;
  --stone: #6B7280;
  --warm-white: #FAFFFE;
  --coral: #F97066;
  --green: #22C55E;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow-soft: 0 1px 3px rgba(15,118,110,.04), 0 8px 24px rgba(15,118,110,.03);
  --shadow-medium: 0 4px 12px rgba(15,118,110,.05), 0 16px 40px rgba(15,118,110,.04);
  --shadow-glow: 0 0 0 1px rgba(15,118,110,.12), 0 8px 30px rgba(15,118,110,.08);
  --ease-smooth: cubic-bezier(.22,1,.36,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; overflow-x:clip; }
body { font-family:var(--font-body); color:var(--midnight); background:#111114; line-height:1.6; overflow-x:clip; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* ===== ANIMATIONS ===== */
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{transform:scale(.9);opacity:.6} 50%{transform:scale(1);opacity:1} }
@keyframes orb-float { 0%,100%{transform:translate(0,0) scale(1)} 25%{transform:translate(30px,-20px) scale(1.05)} 50%{transform:translate(-20px,30px) scale(.95)} 75%{transform:translate(15px,15px) scale(1.02)} }
@keyframes gradient-flow { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes footerGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes ctaFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes ctaGlow { 0%,100%{opacity:.4;transform:scale(1) translate(0,0)} 25%{opacity:.7;transform:scale(1.05) translate(2%,-3%)} 50%{opacity:.5;transform:scale(1.08) translate(-1%,2%)} 75%{opacity:.65;transform:scale(1.02) translate(3%,1%)} }
@keyframes ctaShimmer { 0%{left:-60%;opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{left:120%;opacity:0} }
@keyframes shimmerCard { 0%{left:-80%} 100%{left:120%} }

.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.rd1{transition-delay:.1s} .rd2{transition-delay:.2s} .rd3{transition-delay:.3s} .rd4{transition-delay:.4s}
.reveal-delay-1{transition-delay:.1s} .reveal-delay-2{transition-delay:.2s} .reveal-delay-3{transition-delay:.3s} .reveal-delay-4{transition-delay:.4s}

/* ========================= HEADER STYLES ========================= */
/* ========================= PAGE STYLES =========================== */
.error-section { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:50px 24px 80px; background:#111114; position:relative; overflow:hidden; }
.error-orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(100px); }
.error-orb-1 { width:600px; height:600px; top:-200px; right:-100px; background:rgba(20,184,166,.05); }
.error-orb-2 { width:500px; height:500px; bottom:-200px; left:-100px; background:rgba(139,92,246,.04); }
.error-content { text-align:center; position:relative; z-index:2; }
.error-code { font-family:var(--font-display); font-size:clamp(120px,20vw,200px); font-weight:700; line-height:1; color:rgba(255,255,255,.1); letter-spacing:-.05em; margin-bottom:-20px; }
.error-content h1 { font-family:var(--font-display); font-size:clamp(32px,4vw,48px); font-weight:700; color:#fff; line-height:1.2; margin-bottom:16px; letter-spacing:-.02em; }
.error-content h1 em { font-style:italic; display:inline-block; padding:0 .25em; margin:0 -.1em; background:linear-gradient(135deg,var(--teal-bright),var(--teal-light)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.error-desc { font-size:17px; color:rgba(255,255,255,.45); max-width:440px; margin:0 auto 36px; line-height:1.7; }
.error-actions { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
/* ========================= /PAGE STYLES ========================== */

/* ===== RESPONSIVE ===== */
/* ========================= /FOOTER STYLES ======================== */

/* ===== SECTION HELPERS ===== */
.section-label { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--teal); margin-bottom:16px; }
.section-label::before { content:''; width:24px; height:2px; background:var(--teal-bright); border-radius:2px; }
.section-title { font-family:var(--font-display); font-size:clamp(30px,4vw,44px); font-weight:700; line-height:1.15; letter-spacing:-.02em; margin-bottom:16px; }
.section-sub { font-size:17px; color:var(--stone); max-width:560px; line-height:1.7; }