/* =========================================================
   Sensus — Under Construction
   Tokens
   ========================================================= */
:root{
  --navy-950:#050B16;
  --navy-900:#0A1A2E;
  --navy-850:#0D2038;
  --navy-800:#12294A;

  --blue-700:#003B66;
  --blue-600:#004778;
  --blue-500:#005AA9;
  --blue-400:#0C79C4;
  --blue-300:#4FA3DE;
  --blue-200:#9CCBEF;

  --green-500:#6BA436;
  --green-400:#7CB93E;
  --green-300:#A6D65C;

  --ink-50:#F2F6FA;
  --ink-200:#C7D5E3;
  --ink-300:#8FA6BF;
  --ink-500:#5C7690;

  --font-display:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --ease:cubic-bezier(.22,.9,.3,1);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--navy-900);
  color:var(--ink-200);
  font-family:var(--font-body);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

.page{ position:relative; z-index:2; }

/* =========================================================
   Ambient background — deep navy with brand-blue glow
   ========================================================= */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 900px 600px at 12% -5%, rgba(0,90,169,0.28), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(124,185,62,0.10), transparent 55%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-850) 100%);
  z-index:0;
}

.glow{
  position:fixed;
  border-radius:50%;
  filter:blur(120px);
  pointer-events:none;
  z-index:0;
  opacity:.55;
}
.glow-a{
  width:520px; height:520px;
  background:radial-gradient(circle, rgba(0,90,169,.55), transparent 70%);
  bottom:-220px; left:-160px;
}
.glow-b{
  width:380px; height:380px;
  background:radial-gradient(circle, rgba(124,185,62,.22), transparent 70%);
  top:-140px; right:-100px;
}

.noise-layer{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   Top bar
   ========================================================= */
.top-bar{ position:relative; z-index:5; }

.wordmark{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.02em;
  color:var(--ink-50);
}
.wordmark .dot{ color:var(--green-400); }

.lang-switch{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.06em;
}
.lang-btn{
  background:none;
  border:none;
  color:var(--ink-500);
  cursor:pointer;
  padding:.2rem .3rem;
  transition:color .2s var(--ease);
}
.lang-btn.active,
.lang-btn:hover{ color:var(--blue-200); }
.lang-sep{ color:var(--ink-500); opacity:.5; }

/* =========================================================
   Hero
   ========================================================= */
.logo-wrap{
  margin-bottom:2.25rem;
  opacity:0;
  transform:translateY(10px);
  animation:reveal .9s var(--ease) .1s forwards;
}
.logo-img{
  height:56px;
  width:auto;
  filter:drop-shadow(0 8px 30px rgba(0,90,169,.35));
}

.tagline{
  font-family:var(--font-body);
  font-weight:500;
  font-size:1rem;
  letter-spacing:.01em;
  color:var(--blue-200);
  margin-bottom:1.75rem;
  opacity:0;
  animation:reveal .8s var(--ease) .18s forwards;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.28em;
  color:var(--green-300);
  margin-bottom:1.1rem;
  opacity:0;
  animation:reveal .8s var(--ease) .25s forwards;
}

.headline{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2rem, 5vw, 3.4rem);
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--ink-50);
  margin-bottom:1.15rem;
  opacity:0;
  animation:reveal .8s var(--ease) .35s forwards;
}

.subhead{
  font-family:var(--font-body);
  font-size:1.05rem;
  line-height:1.65;
  color:var(--ink-300);
  max-width:560px;
  margin:0 auto 2.75rem;
  opacity:0;
  animation:reveal .8s var(--ease) .45s forwards;
}

@keyframes reveal{
  to{ opacity:1; transform:translateY(0); }
}

/* =========================================================
   Signal — signature element
   ========================================================= */
.signal-wrap{
  max-width:620px;
  margin:0 auto 2.75rem;
  opacity:0;
  animation:reveal 1s var(--ease) .55s forwards;
}
.signal-svg{
  width:100%;
  height:56px;
  display:block;
  overflow:visible;
}
.signal-path{
  stroke-dasharray:1600;
  stroke-dashoffset:1600;
  animation:draw 2.4s var(--ease) .7s forwards;
}
@keyframes draw{
  to{ stroke-dashoffset:0; }
}
.signal-dot{
  fill:var(--green-400);
  filter:drop-shadow(0 0 8px rgba(124,185,62,.9));
}

@media (prefers-reduced-motion: reduce){
  .signal-path{ stroke-dashoffset:0; animation:none; }
  .signal-dot animateMotion{ display:none; }
  .logo-wrap, .eyebrow, .headline, .subhead, .signal-wrap, .notify-form{
    opacity:1; transform:none; animation:none;
  }
}

/* =========================================================
   Notify form
   ========================================================= */
.notify-form{
  max-width:460px;
  margin:0 auto;
  opacity:0;
  animation:reveal .8s var(--ease) .65s forwards;
}
.notify-row{
  display:flex;
  gap:.6rem;
  background:rgba(18,41,74,.55);
  border:1px solid rgba(159,193,224,.16);
  border-radius:999px;
  padding:.35rem .35rem .35rem 1.15rem;
  backdrop-filter:blur(6px);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.notify-row:focus-within{
  border-color:var(--blue-300);
  box-shadow:0 0 0 4px rgba(79,163,222,.14);
}
.notify-input{
  flex:1;
  background:none;
  border:none;
  outline:none;
  color:var(--ink-50);
  font-family:var(--font-body);
  font-size:.95rem;
  padding:.55rem 0;
}
.notify-input::placeholder{ color:var(--ink-500); }

.notify-btn{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  white-space:nowrap;
  background:linear-gradient(135deg, var(--blue-500), var(--blue-400));
  color:#fff;
  border:none;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.9rem;
  padding:.65rem 1.25rem;
  cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.notify-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(0,90,169,.4);
  filter:brightness(1.06);
}
.notify-btn:active{ transform:translateY(0); }
.notify-btn svg{ transition:transform .2s var(--ease); }
.notify-btn:hover svg{ transform:translateX(2px); }

.notify-note{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.02em;
  color:var(--ink-500);
  margin:.85rem 0 0;
}

.notify-success{
  display:none;
  font-family:var(--font-body);
  font-size:.9rem;
  color:var(--green-300);
  margin:.85rem 0 0;
}
.notify-form.sent .notify-row{ opacity:.5; pointer-events:none; }
.notify-form.sent .notify-note{ display:none; }
.notify-form.sent .notify-success{ display:block; }

/* =========================================================
   Status line
   ========================================================= */
.status-line{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin-top:2.75rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  color:var(--ink-500);
  opacity:0;
  animation:reveal .8s var(--ease) .8s forwards;
}
.status-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--green-400);
  box-shadow:0 0 0 0 rgba(124,185,62,.6);
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(124,185,62,.55); }
  70%{ box-shadow:0 0 0 9px rgba(124,185,62,0); }
  100%{ box-shadow:0 0 0 0 rgba(124,185,62,0); }
}

/* =========================================================
   Footer
   ========================================================= */
.footer{
  position:relative;
  z-index:5;
  border-top:1px solid rgba(159,193,224,.1);
}
.footer-email{
  font-family:var(--font-mono);
  font-size:.82rem;
  color:var(--ink-300);
  text-decoration:none;
  transition:color .2s var(--ease);
}
.footer-email:hover{ color:var(--blue-200); }

.footer-copy{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--ink-500);
}

.social-link{
  color:var(--ink-500);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.social-link:hover{
  color:var(--blue-200);
  transform:translateY(-2px);
}

/* =========================================================
   Focus visibility
   ========================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline:2px solid var(--blue-300);
  outline-offset:3px;
  border-radius:6px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 576px){
  .logo-img{ height:42px; }
  .notify-row{
    flex-direction:column;
    border-radius:20px;
    padding:.85rem;
    gap:.7rem;
  }
  .notify-btn{ justify-content:center; }
  .subhead{ font-size:1rem; }
}