/* MOORLI Shared Site Styles
   Used by: index.html, about.html, contact.html, terms.html, privacy.html
*/

:root{
  --navy-deep:#030712;
  --navy-card:#0A1628;

  --gold:#EBA937;
  --gold-light:#FDE68A;
  --gold-glow:rgba(235,169,55,0.45);
  --blue-accent:#3B82F6;

  --white:#FFFFFF;
  --silver:#E2E8F0;
  --muted:#94A3B8;

  --border:rgba(255,255,255,0.08);
  --border-gold:rgba(235,169,55,0.35);

  /* Legacy alias variables (legal pages previously used these) */
  --color-primary-navy:var(--navy-card);
  --color-deep-navy:var(--navy-deep);
  --color-accent-gold:var(--gold);
  --border-light:var(--border);
  --text-white:var(--white);
  --text-silver:var(--silver);
  --text-muted:var(--muted);

  /* Layout tokens */
  --header-pad:24px 40px;
  --logo-pad:14px 36px;
  --logo-radius:14px;
  --logo-img-h:48px;
  --nav-gap:40px;

  --scan-height:1px;
  --scan-opacity:0.18;
  --scan-animation:scan 10s linear infinite;
}

/* Smooth page entrance */
@keyframes pageIn{
  from{opacity:0;}
  to{opacity:1;}
}
main{animation:pageIn 0.6s ease-out;}

/* Gold accent bar at very top of every page */
body::before{
  content:'';
  position:fixed;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg, transparent 10%, var(--gold) 50%, transparent 90%);
  opacity:0.4;
  z-index:1000;
  pointer-events:none;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  font-family:'Inter',sans-serif;
  background:var(--navy-deep);
  color:var(--white);
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.bg-layer{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* Drift background variant (used by about/contact/terms/privacy) */
.bg-layer--drift::after{
  content:'';
  position:absolute;
  inset:-50%;
  background:
    radial-gradient(800px 500px at 30% 20%, rgba(235,169,55,0.10), transparent 50%),
    radial-gradient(600px 400px at 70% 70%, rgba(59,130,246,0.06), transparent 50%),
    radial-gradient(400px 300px at 50% 50%, rgba(235,169,55,0.03), transparent 50%);
  animation:drift 25s ease-in-out infinite;
}

@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(2%,1%) scale(1.01);}
  66%{transform:translate(-1%,-1%) scale(0.99);}
}

/* Privacy page background (kept for compatibility) */
.forensic-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:var(--color-deep-navy);
}
.forensic-bg::after{
  content:'';
  position:absolute;
  inset:-50%;
  background:
    radial-gradient(800px 500px at 20% 20%, rgba(235,169,55,0.06), transparent 50%),
    radial-gradient(600px 400px at 80% 60%, rgba(100,140,255,0.04), transparent 50%);
}

.scan-line{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--scan-height);
  background:linear-gradient(90deg, transparent 15%, rgba(235,169,55,0.5) 50%, transparent 85%);
  opacity:var(--scan-opacity);
  animation:var(--scan-animation);
  z-index:2;
  filter:blur(0.5px);
}

@keyframes scan{
  0%{top:-2px; opacity:0;}
  8%{opacity:var(--scan-opacity);}
  92%{opacity:var(--scan-opacity);}
  100%{top:100vh; opacity:0;}
}

@keyframes scanMove{
  0%{top:-4px;}
  100%{top:100vh;}
}

/* Header / Nav */
header,.site-header{
  position:relative;
  z-index:100;
  padding:var(--header-pad);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* Sticky header with backdrop blur for sub-pages */
.bg-layer--drift ~ .scan-line ~ header,
.forensic-bg ~ .scan-line ~ header{
  position:sticky;
  top:0;
  background:rgba(3,7,18,0.6);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}

.logo-box,.logo-platform{
  display:flex;
  align-items:center;
  background:rgba(255,255,255,0.97);
  padding:var(--logo-pad);
  border-radius:var(--logo-radius);
  box-shadow:0 0 80px rgba(235,169,55,0.2), 0 8px 32px rgba(0,0,0,0.4);
  text-decoration:none;
  transition:transform 0.4s ease;
}
.logo-box:hover,.logo-platform:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 0 100px rgba(235,169,55,0.25), 0 12px 40px rgba(0,0,0,0.5);
}

.logo-box img,.logo-platform img,.main-logo{
  height:var(--logo-img-h);
  width:auto;
  display:block;
}

nav,.header-nav{
  display:flex;
  gap:var(--nav-gap);
  align-items:center;
}
nav a,.header-nav a{
  color:var(--silver);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  transition:color 0.2s;
  position:relative;
}
nav a::before,.header-nav a::before{
  content:'';
  position:absolute;
  bottom:-6px;
  left:50%;
  width:0;
  height:2px;
  background:var(--gold);
  border-radius:1px;
  transform:translateX(-50%);
  transition:width 0.3s ease;
}
nav a:hover::before,.header-nav a:hover::before,
nav a.active::before,.header-nav a.active::before{
  width:100%;
}
nav a:hover,nav a.active,
.header-nav a:hover,.header-nav a.active{color:var(--gold);}

/* Shared "page hero" primitives (pages can override via CSS vars) */
.page-hero{
  position:relative;
  z-index:5;
  text-align:center;
  padding:var(--page-hero-pad, 100px 24px 80px);
}
.page-hero::before{
  content:'';
  position:absolute;
  top:-20%;
  left:50%;
  transform:translateX(-50%);
  width:600px;
  height:400px;
  background:radial-gradient(ellipse, rgba(235,169,55,0.08) 0%, transparent 70%);
  pointer-events:none;
  z-index:-1;
}

.hero-kicker{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:var(--hero-kicker-mb, 16px);
}

.page-hero h1{
  font-family:'Lora',serif;
  font-size:var(--page-hero-h1-size, 56px);
  font-weight:600;
  line-height:1.25;
  padding-bottom:0.1em;
  margin:0 auto var(--page-hero-h1-mb, 24px);
  background:linear-gradient(180deg, var(--white) 60%, var(--silver) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.page-hero p,
.page-hero .meta,
.page-hero .hero-meta{
  font-size:var(--page-hero-meta-size, 15px);
  color:var(--muted);
}

/* Buttons (used by About CTA + can be reused elsewhere) */
.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:20px 36px;
  font-size:15px;
  font-weight:700;
  border-radius:12px;
  text-decoration:none;
  transition:all 0.3s ease;
}
.btn.primary{background:var(--gold); color:var(--navy-deep); position:relative; overflow:hidden;}
.btn.primary::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%);
  opacity:0;
  transition:opacity 0.3s;
}
.btn.primary:hover{transform:translateY(-4px); box-shadow:0 16px 40px -10px var(--gold-glow);}
.btn.primary:hover::after{opacity:1;}
.btn.secondary{background:transparent; color:var(--gold); border:2px solid var(--gold); position:relative;}
.btn.secondary:hover{background:var(--gold); color:var(--navy-deep); box-shadow:0 12px 30px -8px var(--gold-glow);}

.btn-label{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.2;
}
.btn-label .brand{
  font-family:'Manrope','Inter',sans-serif;
  font-size:10px;
  font-weight:200;
  opacity:0.7;
  letter-spacing:1px;
  text-transform:uppercase;
}
.btn-label .name{
  font-family:'Manrope','Inter',sans-serif;
  font-size:15px;
  font-weight:600;
}

/* Product reference styling (used on legal pages and elsewhere) */
.product-ref .brand{
  font-family:'Manrope','Inter',sans-serif;
  font-weight:800;
  color:var(--muted);
  letter-spacing:0.5px;
}
.product-ref .name{
  font-family:'Manrope','Inter',sans-serif;
  font-weight:600;
  color:var(--white);
}

/* Footer (standard pages) */
footer,.site-footer{
  position:relative;
  z-index:5;
  padding:48px 24px 32px;
  border-top:1px solid var(--border);
}
footer::before,.site-footer::before{
  content:'';
  position:absolute;
  top:-1px;left:5%;right:5%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0.4;
}

.footer-content{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
}

.footer-brand{
  font-family:'Manrope','Inter',sans-serif;
  font-size:20px;
  color:var(--white);
}

.footer-nav{
  display:flex;
  gap:32px;
  flex-wrap:wrap;
}

.footer-nav a{
  color:var(--silver);
  text-decoration:none;
  font-size:14px;
  transition:color 0.2s;
}
.footer-nav a:hover{color:var(--gold);}

.footer-copy{
  width:100%;
  text-align:center;
  font-size:13px;
  color:var(--muted);
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--border);
}

/* Footer copy segments — stack cleanly on mobile */
.fc-line{ white-space:nowrap; }
.fc-sep{ margin:0 4px; opacity:0.5; }

/* Selection highlight */
::selection{
  background:rgba(235,169,55,0.3);
  color:var(--white);
}

/* Smooth link underlines for footer-nav */
.footer-nav a{
  position:relative;
}
.footer-nav a::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:1px;
  background:var(--gold);
  transition:width 0.3s ease;
}
.footer-nav a:hover::after{
  width:100%;
}

/* Footer brand subtle glow */
.footer-brand{
  position:relative;
}

/* Footer copy refined spacing */
.footer-copy{
  letter-spacing:0.3px;
}
.footer-copy em{
  display:inline-block;
  margin-top:8px;
  opacity:0.7;
  font-size:12px;
}

/* ========== MOBILE NAV ========== */

/* Hamburger toggle — hidden on desktop */
.mobile-nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  z-index:200;
  -webkit-tap-highlight-color:transparent;
}
.mobile-nav-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:var(--silver);
  border-radius:1px;
  transition:transform 0.3s ease, opacity 0.3s ease;
}
/* Animate to ✕ when open */
.mobile-nav-toggle.active span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.mobile-nav-toggle.active span:nth-child(2){
  opacity:0;
}
.mobile-nav-toggle.active span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* Fullscreen overlay */
.mobile-nav-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(3,7,18,0.96);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  z-index:150;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:96px 24px 40px;
  opacity:0;
  transition:opacity 0.3s ease;
}
.mobile-nav-close{
  position:absolute;
  top:max(20px, env(safe-area-inset-top));
  right:max(16px, env(safe-area-inset-right));
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;
  color:var(--silver);
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color:transparent;
}
.mobile-nav-close::before,
.mobile-nav-close::after{
  content:'';
  position:absolute;
  width:18px;
  height:2px;
  background:currentColor;
  border-radius:999px;
}
.mobile-nav-close::before{ transform:rotate(45deg); }
.mobile-nav-close::after{ transform:rotate(-45deg); }
.mobile-nav-close:hover,
.mobile-nav-close:focus-visible{
  background:rgba(235,169,55,0.08);
  border-color:var(--border-gold);
  color:var(--gold);
  transform:scale(1.04);
  outline:none;
}
body.mobile-nav-open{
  overflow:hidden;
}
.mobile-nav-overlay.open{
  display:flex;
  opacity:1;
}
.mobile-nav-overlay a{
  color:var(--silver);
  text-decoration:none;
  font-family:'Inter',sans-serif;
  font-size:20px;
  font-weight:500;
  letter-spacing:0.5px;
  transition:color 0.2s;
  position:relative;
  width:min(100%, 320px);
  text-align:center;
  padding:4px 0;
}
.mobile-nav-overlay a::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:50%;
  width:0;
  height:2px;
  background:var(--gold);
  border-radius:1px;
  transform:translateX(-50%);
  transition:width 0.3s ease;
}
.mobile-nav-overlay a:hover,
.mobile-nav-overlay a.active{
  color:var(--gold);
}
.mobile-nav-overlay a:hover::after,
.mobile-nav-overlay a.active::after{
  width:100%;
}

/* Responsive base */
@media (max-width: 768px){
  nav,.header-nav{display:none;}
  .mobile-nav-toggle{display:flex;}

  .footer-content{flex-direction:column; text-align:center;}
  .footer-nav{justify-content:center; gap:20px;}
  .page-hero h1{font-size:var(--page-hero-h1-size-mobile, 42px);}

  /* Fix footer-copy wrapping — stack the segments */
  .footer-copy{
    font-size:12px;
    line-height:1.8;
    padding-left:16px;
    padding-right:16px;
  }
  .fc-sep{ display:none; }
  .fc-line{ display:block; }
}

@media (max-width: 480px){
  header,.site-header{
    padding:20px 16px;
  }
  .mobile-nav-overlay{
    padding:88px 20px 32px;
    gap:22px;
  }
  .mobile-nav-close{
    top:max(16px, env(safe-area-inset-top));
    right:max(12px, env(safe-area-inset-right));
  }
  .logo-box,.logo-platform{
    padding:10px 24px;
  }
  .logo-box img,.logo-platform img,.main-logo{
    height:38px;
  }
  .page-hero{
    padding:70px 20px 60px;
  }
  .page-hero h1{
    font-size:var(--page-hero-h1-size-mobile, 34px);
  }
  .footer-copy{
    font-size:11px;
  }
  .footer-nav{
    gap:16px;
  }
  .footer-nav a{
    font-size:13px;
  }
}