/* =========================================================
   N.H PROTECTOR — design tokens
   void      #0B0F14  base background (charcoal-navy, not pure black)
   panel     #121820  raised panels
   panel-2   #1A222C  cards / inputs
   line      #26313D  hairlines
   amber     #FF8F3D  primary accent — sodium security-light warmth
   amber-2   #FFB877  amber tint for glows
   signal    #34D399  "verified" green — used sparingly, trust only
   alert     #E8465A  emergency red — used sparingly, urgent CTAs only
   fog       #AEB9C4  secondary text
   white     #F3F6F8  primary text
   ========================================================= */

:root{
  --void:#0B0F14;
  --panel:#121820;
  --panel-2:#1A222C;
  --line:#242E3A;
  --amber:#FF8F3D;
  --amber-2:#FFB877;
  --signal:#34D399;
  --alert:#E8465A;
  --fog:#AEB9C4;
  --white:#F3F6F8;

  --display: 'Rajdhani', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --container: 1180px;
  --radius: 4px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  background:var(--void);
  color:var(--white);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:0.01em;
  font-weight:700;
  margin:0 0 0.5em;
  color:var(--white);
}

p{margin:0 0 1em; color:var(--fog);}
a{color:inherit; text-decoration:none;}
ul,ol{margin:0; padding:0; list-style:none;}
button{font-family:inherit;}

.text-amber{color:var(--amber);}

/* ---------- shared bits ---------- */
.kicker{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 0.9em;
}
.kicker--alert{color:var(--alert);}

.dot{
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--signal);
  vertical-align:middle;
  margin-right:6px;
}
.dot--live{animation:pulse-dot 1.8s ease-in-out infinite;}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,0.55);}
  50%{box-shadow:0 0 0 6px rgba(52,211,153,0);}
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0.85em 1.6em;
  border-radius:var(--radius);
  font-family:var(--display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-size:0.92rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn--primary{background:var(--amber); color:#1A0F04;}
.btn--primary:hover{background:var(--amber-2); box-shadow:0 6px 24px -6px rgba(255,143,61,0.55);}
.btn--alert{background:var(--alert); color:var(--white);}
.btn--alert:hover{box-shadow:0 6px 24px -6px rgba(232,70,90,0.55);}
.btn--ghost{background:transparent; color:var(--fog); border-color:var(--line);}
.btn--ghost:hover{color:var(--white); border-color:var(--fog);}
.btn--outline{background:transparent; color:var(--white); border-color:var(--amber);}
.btn--outline:hover{background:rgba(255,143,61,0.1);}
.btn--block{width:100%; justify-content:center;}

/* reveal-on-scroll */
.reveal{opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* =================== NAV =================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(11,15,20,0.75);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color 0.3s ease, background 0.3s ease;
}
.nav.is-scrolled{border-color:var(--line); background:rgba(11,15,20,0.92);}
.nav__inner{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:0.85em 1.5em;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand__mark{width:44px; height:44px; object-fit:contain; flex-shrink:0;}
.brand__mark--footer{width:56px; height:56px; margin-bottom:0.6em;}
.brand__word{
  font-family:var(--display); font-weight:700; font-size:1.05rem; letter-spacing:0.08em;
  display:flex; flex-direction:column; line-height:1.05;
}
.brand__word--sub{color:var(--amber); font-weight:600; font-size:0.62em; letter-spacing:0.22em; margin-top:2px;}
.nav__links{display:flex; gap:1.8em;}
.nav__links a{font-size:0.9rem; color:var(--fog); transition:color 0.2s;}
.nav__links a:hover{color:var(--white);}
.nav__actions{display:flex; align-items:center; gap:0.7em;}
.nav__burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.nav__burger span{width:22px; height:2px; background:var(--white);}

/* =================== HERO =================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  padding:7em 1.5em 3em;
}
.hero__canvas-wrap{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 70% 40%, rgba(255,143,61,0.10), transparent 60%),
             radial-gradient(ellipse at 20% 80%, rgba(52,211,153,0.06), transparent 55%),
             var(--void);
}
#sentinelCanvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.hero__scanline{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,143,61,0.7), transparent);
  animation:scan 6s linear infinite;
  pointer-events:none;
  opacity:0.5;
}
@keyframes scan{
  0%{top:-2%;}
  100%{top:102%;}
}
.hero__crest{
  position:absolute; top:50%; right:-3%; width:min(38vw, 460px); height:auto;
  transform:translateY(-52%);
  opacity:0.5;
  filter:drop-shadow(0 0 50px rgba(255,143,61,0.2));
  pointer-events:none;
}
@media (max-width:960px){ .hero__crest{display:none;} }
.hero__inner{position:relative; max-width:var(--container); margin:0 auto; width:100%;}
.eyebrow{
  font-family:var(--mono); font-size:0.85rem; color:var(--fog);
  display:flex; align-items:center; margin-bottom:1.2em;
}
.hero__title{
  font-size:clamp(2.6rem, 6vw, 5rem);
  line-height:0.98;
  max-width:14ch;
}
.hero__sub{font-size:1.1rem; max-width:44ch; margin-bottom:1.8em;}
.hero__cta{display:flex; gap:1em; flex-wrap:wrap; margin-bottom:3.5em;}
.hero__stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5em;
  border-top:1px solid var(--line); padding-top:1.6em;
  max-width:820px;
}
.hstat__num{
  display:block; font-family:var(--display); font-weight:700;
  font-size:1.9rem; color:var(--amber);
}
.hstat__label{font-size:0.78rem; color:var(--fog); line-height:1.3; display:block; margin-top:2px;}
.hero__scroll-cue{
  position:absolute; bottom:1.6em; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.14em; color:var(--fog);
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,6px);}}

/* =================== SECTION shell =================== */
section{padding:6.5em 1.5em;}
.feed__head, .protocol__head, .services__head, .credentials__head, .community__head{
  max-width:var(--container); margin:0 auto 2.6em;
}
.feed__head h2, .protocol__head h2, .services__head h2, .credentials__head h2, .community__head h2{
  font-size:clamp(1.8rem, 3.4vw, 2.6rem); max-width:16ch;
}
.feed__desc{max-width:56ch;}

/* =================== FEED / TERMINAL =================== */
.feed{background:var(--panel);}
.terminal{
  max-width:var(--container); margin:0 auto;
  background:var(--void);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
}
.terminal__bar{
  display:flex; align-items:center; gap:8px;
  padding:0.7em 1em; background:var(--panel-2); border-bottom:1px solid var(--line);
}
.terminal__dot{width:9px; height:9px; border-radius:50%; background:var(--line);}
.terminal__title{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; color:var(--fog);
  margin-left:6px;
}
.terminal__bar .dot--live{margin-left:auto;}
.terminal__log{
  height:280px; overflow:hidden; padding:0.8em 0;
  font-family:var(--mono); font-size:0.85rem;
}
.terminal__log li{
  padding:0.5em 1.2em;
  display:flex; gap:0.9em;
  border-bottom:1px dashed rgba(255,255,255,0.04);
  animation:log-in 0.5s ease;
}
@keyframes log-in{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:translateY(0);}}
.terminal__log .t{color:var(--fog); flex-shrink:0;}
.terminal__log .zone{color:var(--amber-2); flex-shrink:0;}
.terminal__log .msg{color:var(--white);}
.terminal__log .tag{
  font-size:0.68rem; padding:1px 7px; border-radius:99px; flex-shrink:0;
  align-self:flex-start; text-transform:uppercase; letter-spacing:0.06em;
}
.tag--resolved{background:rgba(52,211,153,0.15); color:var(--signal);}
.tag--patrol{background:rgba(255,143,61,0.15); color:var(--amber);}
.tag--watch{background:rgba(174,185,196,0.15); color:var(--fog);}

/* =================== PROTOCOL =================== */
.protocol{max-width:var(--container); margin:0 auto;}
.protocol__list{
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
}
.protocol__item{
  display:flex; gap:1.8em;
  padding:2em 0;
  border-bottom:1px solid var(--line);
  align-items:flex-start;
}
.protocol__num{
  font-family:var(--display); font-weight:700; font-size:2.2rem;
  color:var(--panel-2);
  -webkit-text-stroke:1.5px var(--amber);
  color:transparent;
  min-width:2.4ch;
}
.protocol__item h3{font-size:1.3rem; margin-bottom:0.3em;}
.protocol__item p{max-width:56ch; margin:0;}

/* =================== SERVICES =================== */
.services{background:var(--panel); max-width:none;}
.services__head, .services__grid{max-width:var(--container); margin-left:auto; margin-right:auto;}
.services__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4em;
}
.scard{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:6px;
  padding:1.8em;
  transition:border-color 0.25s ease, transform 0.25s ease;
}
.scard:hover{border-color:var(--amber); transform:translateY(-3px);}
.scard__icon{width:38px; height:38px; color:var(--white); margin-bottom:1em;}
.scard h3{font-size:1.1rem; margin-bottom:0.4em;}
.scard p{margin:0; font-size:0.92rem;}

/* =================== CREDENTIALS =================== */
.credentials{max-width:var(--container); margin:0 auto;}
.badges{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2em;}
.badge{
  display:flex; gap:1em; align-items:flex-start;
  padding:1.3em; border:1px solid var(--line); border-radius:6px; background:var(--panel);
}
.badge svg{width:26px; height:26px; flex-shrink:0; margin-top:2px;}
.badge strong{display:block; font-family:var(--display); font-size:1rem; letter-spacing:0.02em; margin-bottom:0.2em;}
.badge span{font-size:0.85rem; color:var(--fog);}

/* =================== COMMUNITY =================== */
.community{background:var(--panel);}
.community__head, .community__grid{max-width:var(--container); margin-left:auto; margin-right:auto;}
.community__grid{display:grid; grid-template-columns:1.1fr 1fr; gap:2em; align-items:stretch;}
.testimonials{
  background:var(--void); border:1px solid var(--line); border-radius:6px;
  padding:2.2em; display:flex; flex-direction:column; justify-content:space-between;
}
.tcard__quote{font-size:1.15rem; color:var(--white); font-style:normal; line-height:1.6;}
.tcard__author{font-family:var(--mono); font-size:0.8rem; color:var(--amber-2); margin:0;}
.tcard__dots{display:flex; gap:6px; margin-top:1.4em;}
.tcard__dots span{width:6px; height:6px; border-radius:50%; background:var(--line); cursor:pointer;}
.tcard__dots span.is-active{background:var(--amber);}

.join-form{
  background:var(--void); border:1px solid var(--line); border-radius:6px; padding:2.2em;
  display:flex; flex-direction:column; gap:1em;
}
.join-form h3{font-size:1.2rem; margin-bottom:0.1em;}
.join-form > p{margin-bottom:0.4em; font-size:0.9rem;}
.join-form label, .report-form label{
  display:flex; flex-direction:column; gap:0.4em;
  font-family:var(--mono); font-size:0.75rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--fog);
}
.join-form input, .report-form input, .report-form select, .report-form textarea{
  font-family:var(--body); font-size:0.95rem; color:var(--white);
  background:var(--panel-2); border:1px solid var(--line); border-radius:4px;
  padding:0.75em 0.9em; outline:none;
  transition:border-color 0.2s ease;
}
.join-form input:focus, .report-form input:focus, .report-form select:focus, .report-form textarea:focus{
  border-color:var(--amber);
}
.join-form__note{font-size:0.85rem; min-height:1.2em; color:var(--signal); margin:0;}

/* =================== REPORT =================== */
.report{background:var(--void);}
.report__panel{max-width:760px; margin:0 auto;}
.report-form{display:flex; flex-direction:column; gap:1.1em; margin-top:1.4em;}
.report-form__row{display:grid; grid-template-columns:1fr 1fr; gap:1em;}

/* =================== CTA =================== */
.cta{
  background:linear-gradient(180deg, var(--panel), var(--void));
  text-align:center;
}
.cta__inner{max-width:640px; margin:0 auto;}
.cta__inner h2{font-size:clamp(1.7rem,3.6vw,2.4rem);}
.cta__actions{display:flex; gap:1em; justify-content:center; flex-wrap:wrap; margin-top:1.4em;}

/* =================== FOOTER =================== */
.footer{background:var(--void); border-top:1px solid var(--line); padding:4em 1.5em 1.5em;}
.footer__inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2em;
}
.footer__brand{display:flex; flex-direction:column; align-items:flex-start;}
.footer__brand p{font-size:0.85rem; max-width:32ch; margin-top:0.8em;}
.footer__col h4{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--fog); margin-bottom:1em;
}
.footer__col a{display:block; font-size:0.9rem; color:var(--fog); margin-bottom:0.7em; transition:color 0.2s;}
.footer__col a:hover{color:var(--white);}
.footer__bottom{
  max-width:var(--container); margin:3em auto 0; padding-top:1.5em; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:0.72rem; color:var(--fog);
}

/* =================== RESPONSIVE =================== */
@media (max-width: 960px){
  .nav__links, .nav__actions{display:none;}
  .nav__burger{display:flex;}
  .nav.is-open .nav__links{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:var(--void); padding:1.5em; border-top:1px solid var(--line); gap:1em;
  }
  .nav.is-open .nav__actions{
    display:flex; position:absolute; top:calc(100% + 13.5em); left:0; right:0;
    padding:0 1.5em 1.5em; background:var(--void); flex-direction:column; align-items:stretch;
  }
  .hero__stats{grid-template-columns:repeat(2,1fr);}
  .services__grid{grid-template-columns:repeat(2,1fr);}
  .community__grid{grid-template-columns:1fr;}
  .badges{grid-template-columns:1fr;}
  .footer__inner{grid-template-columns:1fr 1fr;}
}
@media (max-width: 640px){
  .hero__stats{grid-template-columns:repeat(2,1fr);}
  .services__grid{grid-template-columns:1fr;}
  .report-form__row{grid-template-columns:1fr;}
  .footer__inner{grid-template-columns:1fr;}
  .protocol__item{gap:1em;}
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--amber); outline-offset:2px;
}