/* ============================================
   F.L.A.R.E — Fire Localization and Response Engine
   Demo site stylesheet
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --red-dark: #4d0e0e;
  --red: #7a1414;
  --red-mid: #9e1b1b;
  --red-light: #b52626;
  --gold: #f4c430;
  --gold-soft: #ffe9a8;
  --ink: #1a1414;
  --white: #ffffff;
  --off-white: #fdf9f2;
  --gray: #5a4d4d;
  --shadow: 0 20px 50px -12px rgba(30, 5, 5, 0.45);
  --shadow-sm: 0 8px 20px -6px rgba(30, 5, 5, 0.35);
  --radius: 18px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family:'Poppins', sans-serif;
  color: var(--ink);
  background: var(--red);
  overflow-x: hidden;
}
h1,h2,h3,h4,.logo,.brand{
  font-family:'Baloo 2', sans-serif;
  letter-spacing: .5px;
}
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }
.container{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ============ Animated geometric background ============ */
.bg-scene{
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(160deg, var(--red-dark) 0%, var(--red) 45%, var(--red-mid) 100%);
  overflow: hidden;
}
.bg-scene::before{
  content:"";
  position:absolute;
  inset:-10%;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 34px);
  animation: driftGrid 60s linear infinite;
}
@keyframes driftGrid{
  0%{ transform: translate(0,0) rotate(0deg); }
  100%{ transform: translate(-4%, -4%) rotate(1deg); }
}
.shape{
  position:absolute;
  border: 2px solid rgba(255,255,255,.16);
  animation: floatShape 14s ease-in-out infinite;
}
.shape.tri{
  width:0; height:0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid rgba(255,255,255,.06);
  border-top: none;
  background: none;
}
.shape.hex{
  width: 90px; height: 52px;
  background: rgba(255,255,255,.03);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.shape.diamond{
  width: 70px; height:70px;
  transform: rotate(45deg);
}
@keyframes floatShape{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-30px) rotate(8deg); }
}
.shape.spin{ animation: spinShape 22s linear infinite; }
@keyframes spinShape{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }

/* Flame particle embers */
.ember{
  position:absolute;
  bottom:-10px;
  width:6px; height:6px;
  border-radius:50%;
  background: radial-gradient(circle, var(--gold) 0%, rgba(244,196,48,0) 70%);
  animation: emberRise linear infinite;
  opacity:0;
}
@keyframes emberRise{
  0%{ transform: translateY(0) translateX(0) scale(1); opacity:0; }
  10%{ opacity:.9; }
  90%{ opacity:.4; }
  100%{ transform: translateY(-100vh) translateX(20px) scale(.3); opacity:0; }
}

/* ============ Navbar ============ */
.navbar{
  position: sticky; top:0; z-index: 100;
  background: rgba(77, 14, 14, .55);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .3s var(--ease), padding .3s var(--ease), box-shadow .3s var(--ease);
}
.navbar.scrolled{
  background: rgba(58, 10, 10, .88);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 32px;
  max-width: 1240px; margin:0 auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  color: var(--white);
  font-weight:800;
  font-size: 1.7rem;
  letter-spacing: 2px;
}
.brand .flame{
  font-size: 1.5rem;
  display:inline-block;
  animation: flicker 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(244,196,48,.6));
}
@keyframes flicker{
  0%,100%{ transform: scale(1) rotate(0deg); }
  25%{ transform: scale(1.08) rotate(-4deg); }
  50%{ transform: scale(.96) rotate(3deg); }
  75%{ transform: scale(1.05) rotate(-2deg); }
}
.nav-links{
  display:flex; align-items:center; gap: 38px;
}
.nav-links a{
  position:relative;
  color: rgba(255,255,255,.85);
  font-weight:500;
  font-size:.95rem;
  letter-spacing:.5px;
  padding: 6px 0;
  transition: color .25s;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:0; height:2px;
  background: var(--gold);
  transition: width .3s var(--ease);
}
.nav-links a:hover{ color: var(--white); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color: var(--gold); }
.nav-cta{
  background: var(--gold);
  color: var(--red-dark) !important;
  padding: 10px 26px !important;
  border-radius: 999px;
  font-weight:700 !important;
  box-shadow: 0 6px 18px rgba(244,196,48,.35);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 24px rgba(244,196,48,.5); }

.hamburger{
  display:none;
  flex-direction:column; gap:5px;
  background:none; border:none; padding:8px;
}
.hamburger span{
  width:26px; height:3px; background:var(--white); border-radius:2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.hamburger.open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 860px){
  .hamburger{ display:flex; }
  .nav-links{
    position:fixed; top:70px; right:0; left:0;
    flex-direction:column; align-items:flex-start;
    background: rgba(40,7,7,.98);
    padding: 24px 32px;
    gap: 22px;
    transform: translateY(-130%);
    transition: transform .4s var(--ease);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-links.open{ transform: translateY(0); }
}

/* ============ Buttons ============ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 15px 34px;
  border-radius: 999px;
  border:none;
  font-weight:600;
  font-size: .98rem;
  overflow:hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:active{ transform: scale(.96); }
.btn-primary{
  background: linear-gradient(135deg, var(--gold), #e0a91f);
  color: var(--red-dark);
  box-shadow: 0 10px 26px rgba(244,196,48,.35);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 16px 32px rgba(244,196,48,.5); }
.btn-outline{
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,.4);
}
.btn-outline:hover{ border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }
.btn-dark{
  background: var(--ink);
  color: var(--white);
}
.btn-dark:hover{ background:#000; transform: translateY(-2px); }
.btn .ripple{
  position:absolute; border-radius:50%;
  background: rgba(255,255,255,.5);
  transform: scale(0);
  animation: rippleAnim .6s linear;
  pointer-events:none;
}
@keyframes rippleAnim{ to{ transform: scale(3); opacity:0; } }
.btn.loading .btn-label{ visibility:hidden; }
.btn .spinner{
  position:absolute; width:18px; height:18px;
  border:3px solid rgba(0,0,0,.25); border-top-color: currentColor;
  border-radius:50%; display:none;
  animation: spin .7s linear infinite;
}
.btn.loading .spinner{ display:block; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ============ Reveal on scroll ============ */
.reveal{
  opacity:0; transform: translateY(36px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in{ opacity:1; transform: translateY(0); }
.reveal-stagger > * { transition-delay: calc(var(--i,0) * 90ms); }

/* ============ Hero ============ */
.hero{
  min-height: 92vh;
  display:flex; align-items:center;
  padding: 80px 0 60px;
}
.hero-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--gold-soft);
  background: rgba(244,196,48,.12);
  border: 1px solid rgba(244,196,48,.3);
  padding: 8px 18px; border-radius: 999px;
  font-size:.8rem; font-weight:600; letter-spacing:1.5px;
  margin-bottom: 24px;
}
.pulse-dot{
  width:8px; height:8px; border-radius:50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(244,196,48,.7);
  animation: pulseDot 1.8s infinite;
}
@keyframes pulseDot{
  0%{ box-shadow: 0 0 0 0 rgba(244,196,48,.6); }
  70%{ box-shadow: 0 0 0 10px rgba(244,196,48,0); }
  100%{ box-shadow: 0 0 0 0 rgba(244,196,48,0); }
}
.hero h1{
  color: var(--white);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 22px;
}
.hero h1 .accent{ color: var(--gold); }
.hero p.lead{
  color: rgba(255,255,255,.82);
  font-size: 1.15rem; line-height:1.7;
  max-width: 540px;
  margin-bottom: 36px;
}
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; }

.hero-stats{ display:flex; gap:40px; margin-top: 56px; }
.stat b{
  display:block; font-family:'Baloo 2'; font-size:2.2rem; color: var(--gold);
}
.stat span{ color: rgba(255,255,255,.7); font-size:.85rem; }

/* Hero visual: mock dashboard card */
.hero-visual{
  position:relative;
}
.mock-card{
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  position:relative;
  animation: floatCard 6s ease-in-out infinite;
}
@keyframes floatCard{
  0%,100%{ transform: translateY(0) rotate(-1deg); }
  50%{ transform: translateY(-18px) rotate(1deg); }
}
.mock-card .mock-feed{
  height: 190px; border-radius: 12px;
  background: repeating-linear-gradient(-45deg, #ffe9a8, #ffe9a8 12px, #f4c430 12px, #f4c430 24px);
  position:relative; overflow:hidden;
  margin-bottom: 18px;
}
.mock-card .mock-feed::after{
  content:"CAMERA FEED · LIVE";
  position:absolute; inset:auto 0 0 0;
  background: rgba(0,0,0,.55); color:#fff; font-size:.7rem; letter-spacing:1px;
  padding: 8px 12px; font-weight:600;
}
.scan-line{
  position:absolute; left:0; right:0; height:3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  animation: scan 2.6s linear infinite;
}
@keyframes scan{ 0%{ top:0; } 100%{ top:100%; } }
.mock-row{ display:flex; gap:14px; }
.mock-tile{
  flex:1; background: var(--off-white); border-radius:10px; padding:14px;
  border: 1px solid #f0e4c4;
}
.mock-tile .label{ font-size:.72rem; color:var(--gray); font-weight:600; letter-spacing:.5px; }
.mock-tile .value{ font-family:'Baloo 2'; font-size:1.4rem; margin-top:4px; display:flex; align-items:center; gap:8px; }
.dot-ok{ width:9px; height:9px; border-radius:50%; background:#2fb355; box-shadow:0 0 0 0 rgba(47,179,85,.6); animation:pulseDot 2s infinite; }
.mini-bar{ height:6px; border-radius:4px; background:#eee2c0; overflow:hidden; margin-top:8px; }
.mini-bar i{ display:block; height:100%; background: linear-gradient(90deg,#2fb355,#8fd67f); border-radius:4px; animation: growBar 3s ease-in-out infinite alternate; }
@keyframes growBar{ from{ width:20%; } to{ width:68%; } }
.floaty-badge{
  position:absolute; top:-18px; right:-18px;
  background: var(--red-dark); color:#fff;
  padding: 12px 18px; border-radius: 14px;
  font-size:.8rem; font-weight:600;
  box-shadow: var(--shadow-sm);
  display:flex; align-items:center; gap:8px;
  animation: floatCard 5s ease-in-out infinite reverse;
}

/* ============ Sections ============ */
.section{ padding: 110px 0; position:relative; }
.section-tight{ padding: 70px 0; }
.section-white{
  background: var(--off-white);
  border-radius: 48px 48px 0 0;
  margin-top: -40px;
}
.section-head{ text-align:center; max-width:680px; margin: 0 auto 60px; }
.section-head h2{
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  margin: 12px 0 16px;
  color: var(--ink);
}
.section-head p{ color: var(--gray); font-size:1.05rem; line-height:1.7; }
.on-dark .section-head h2{ color:#fff; }
.on-dark .section-head p{ color: rgba(255,255,255,.75); }
.tag{
  display:inline-block; color: var(--red);
  background: rgba(122,20,20,.08);
  border-radius:999px; padding:6px 16px;
  font-size:.75rem; font-weight:700; letter-spacing:1.5px;
}
.on-dark .tag{ color: var(--gold); background: rgba(244,196,48,.12); }

/* Feature grid */
.feature-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.feature-card{
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  border: 1px solid rgba(0,0,0,.04);
}
.feature-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 26px 50px -14px rgba(122,20,20,.28);
}
.feature-icon{
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  margin-bottom: 20px;
  transition: transform .4s var(--ease);
}
.feature-card:hover .feature-icon{ transform: rotate(-8deg) scale(1.08); }
.feature-card h3{ margin: 0 0 10px; font-size:1.2rem; }
.feature-card p{ color: var(--gray); font-size:.95rem; line-height:1.65; margin:0; }

/* How it works timeline */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; counter-reset: step; }
.step{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  padding: 30px 22px;
  color: #fff;
  position:relative;
}
.step::before{
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family:'Baloo 2'; font-size:2.2rem; color: var(--gold);
  opacity:.5;
}
.step h4{ margin:14px 0 8px; }
.step p{ color: rgba(255,255,255,.72); font-size:.9rem; line-height:1.6; margin:0; }

/* Team */
.team-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.team-card{
  background:#fff; border-radius:var(--radius); padding:28px 22px; text-align:center;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease);
}
.team-card:hover{ transform: translateY(-8px); }
.avatar{
  width:76px; height:76px; border-radius:50%; margin:0 auto 16px;
  background: linear-gradient(135deg, var(--red), var(--gold));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Baloo 2'; font-size:1.5rem; font-weight:700;
}
.team-card h4{ margin:0 0 4px; }
.team-card span{ color:var(--gray); font-size:.85rem; }

/* CTA band */
.cta-band{
  background: linear-gradient(120deg, var(--red-dark), var(--red-mid));
  border-radius: var(--radius);
  padding: 60px;
  text-align:center;
  position:relative; overflow:hidden;
}
.cta-band h2{ color:#fff; margin:0 0 14px; }
.cta-band p{ color: rgba(255,255,255,.78); margin-bottom: 30px; }

/* Footer */
.footer{
  background: var(--red-dark);
  color: rgba(255,255,255,.75);
  padding: 60px 0 26px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:40px; margin-bottom: 40px; }
.footer h5{ color:#fff; margin: 0 0 16px; font-family:'Baloo 2'; }
.footer ul li{ margin-bottom:10px; }
.footer ul a{ transition: color .2s; }
.footer ul a:hover{ color: var(--gold); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.85rem;
}

/* ============ Auth pages ============ */
.auth-wrap{
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  padding: 120px 24px 60px;
}
.auth-card{
  width: 100%; max-width: 460px;
  background: var(--white);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: 46px 42px;
  position:relative;
  overflow:hidden;
  animation: cardIn .7s var(--ease);
}
@keyframes cardIn{
  from{ opacity:0; transform: translateY(40px) scale(.97); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.auth-card h2{ font-size:1.9rem; margin:0 0 6px; text-align:center; }
.auth-card .sub{ text-align:center; color:var(--gray); margin-bottom:32px; font-size:.92rem; }
.field{ margin-bottom: 20px; position:relative; }
.field label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:8px; color: var(--ink); }
.input-wrap{
  display:flex; align-items:center; gap:10px;
  border: 2px solid #ece2e2; border-radius: 12px;
  padding: 13px 16px;
  background: #fbf8f5;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.input-wrap:focus-within{
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(122,20,20,.08);
  background: #fff;
}
.input-wrap .ic{ color: var(--gray); flex-shrink:0; display:flex; }
.input-wrap input{
  border:none; outline:none; background:transparent;
  font-family:inherit; font-size:.96rem; flex:1; color: var(--ink);
}
.input-wrap .toggle-eye{ background:none; border:none; color:var(--gray); display:flex; padding:0; }
.field.shake .input-wrap{ animation: shake .45s; border-color:#c0392b; }
@keyframes shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-8px); }
  40%{ transform: translateX(8px); }
  60%{ transform: translateX(-5px); }
  80%{ transform: translateX(5px); }
}
.error-msg{
  color:#c0392b; font-size:.78rem; margin-top:6px;
  max-height:0; overflow:hidden; opacity:0;
  transition: max-height .3s var(--ease), opacity .3s var(--ease);
}
.field.shake .error-msg{ max-height:30px; opacity:1; }
.row-between{ display:flex; align-items:center; justify-content:space-between; margin: 4px 0 26px; font-size:.85rem; }
.checkbox{ display:flex; align-items:center; gap:8px; color: var(--gray); cursor:pointer; }
.checkbox input{ accent-color: var(--red); width:16px; height:16px; }
.row-between a{ color: var(--red); font-weight:600; }
.row-between a:hover{ text-decoration:underline; }
.auth-card .btn{ width:100%; }
.auth-switch{ text-align:center; margin-top: 24px; font-size:.92rem; color: var(--gray); }
.auth-switch a{ color: var(--red); font-weight:700; }
.auth-switch a:hover{ text-decoration:underline; }
.strength-meter{ display:flex; gap:5px; margin-top:8px; }
.strength-meter i{ height:4px; flex:1; border-radius:3px; background:#ece2e2; transition: background .3s; }
.divider{ display:flex; align-items:center; gap:14px; margin: 26px 0; color: var(--gray); font-size:.8rem; }
.divider::before, .divider::after{ content:""; flex:1; height:1px; background:#ece2e2; }
.social-row{ display:flex; gap:12px; }
.social-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding: 11px; border-radius:12px; border:2px solid #ece2e2;
  background:#fff; font-weight:600; font-size:.85rem; color:var(--ink);
  transition: border-color .2s, transform .2s;
}
.social-btn:hover{ border-color: var(--red); transform: translateY(-2px); }

/* ============ Toast ============ */
.toast{
  position:fixed; top:26px; right:26px; z-index:999;
  background: var(--ink); color:#fff;
  padding: 16px 22px; border-radius:14px;
  display:flex; align-items:center; gap:12px;
  box-shadow: var(--shadow);
  transform: translateX(140%);
  transition: transform .5s var(--ease);
}
.toast.show{ transform: translateX(0); }
.toast .tic{ color: var(--gold); font-size:1.2rem; }

/* ============ Dashboard ============ */
.dash-wrap{ padding: 130px 0 80px; }
.dash-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 36px; flex-wrap:wrap; gap:16px; }
.dash-head h1{ color:#fff; font-size:2.1rem; margin:0; }
.dash-head p{ color: rgba(255,255,255,.7); margin:6px 0 0; }
.status-pill{
  display:flex; align-items:center; gap:10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  padding: 10px 20px; border-radius: 999px; color:#fff; font-size:.88rem; font-weight:600;
}
.dash-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap: 26px; }
.panel{
  background:#fff; border-radius: var(--radius); padding:26px; box-shadow: var(--shadow-sm);
}
.panel h3{ display:flex; align-items:center; gap:10px; margin:0 0 18px; font-size:1.1rem; }
.feed-box{
  height: 340px; border-radius:14px; overflow:hidden; position:relative;
  background: repeating-linear-gradient(-45deg, #ffe9a8, #ffe9a8 14px, #f4c430 14px, #f4c430 28px);
}
.feed-box .scan-line{ box-shadow: 0 0 12px 2px rgba(255,255,255,.7); }
.feed-tag{
  position:absolute; top:14px; left:14px;
  background: rgba(0,0,0,.6); color:#fff; font-size:.72rem; font-weight:700;
  padding:6px 12px; border-radius:999px; display:flex; align-items:center; gap:6px;
}
.feed-tag .rec-dot{ width:8px; height:8px; border-radius:50%; background:#ff4d4d; animation: pulseDot 1.4s infinite; }
.feed-crosshair{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.feed-crosshair svg{ opacity:.35; }
.stack{ display:flex; flex-direction:column; gap:18px; }
.metric-row{ display:flex; gap:18px; }
.metric{
  flex:1; background: var(--off-white); border-radius:14px; padding:18px;
  border:1px solid #f0e4c4; text-align:center;
}
.metric .label{ font-size:.75rem; color:var(--gray); font-weight:600; letter-spacing:.5px; }
.metric .value{ font-family:'Baloo 2'; font-size:1.8rem; margin:8px 0 2px; }
.gauge-wrap{ background: var(--off-white); border-radius:14px; padding:20px; border:1px solid #f0e4c4; }
.gauge-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:.85rem; font-weight:600; }
.gauge-top .val{ font-family:'Baloo 2'; font-size:1.1rem; }
.gauge-bar{ height:10px; border-radius:6px; background:#eee2c0; overflow:hidden; }
.gauge-bar i{ display:block; height:100%; border-radius:6px; }
.gauge-bar.safe i{ background: linear-gradient(90deg,#2fb355,#8fd67f); }
.gauge-bar.warn i{ background: linear-gradient(90deg,#e6a417,#f4c430); }
.clock-card{ display:flex; gap:14px; }
.clock-tile{
  flex:1; background:var(--off-white); border-radius:14px; padding:18px; text-align:center;
  border:1px solid #f0e4c4;
}
.clock-tile .big{ font-family:'Baloo 2'; font-size:1.7rem; }
.clock-tile .label{ font-size:.72rem; color:var(--gray); font-weight:600; margin-top:4px; }
.history-btn{ width:100%; }

.alert-banner{
  background: linear-gradient(120deg,#8a1616,#c0392b);
  color:#fff; border-radius:14px; padding:16px 22px;
  display:flex; align-items:center; gap:14px;
  margin-bottom:22px; box-shadow: 0 12px 26px rgba(192,57,43,.35);
  transform: translateY(-20px); opacity:0; max-height:0; overflow:hidden;
  transition: all .5s var(--ease);
}
.alert-banner.show{ transform:translateY(0); opacity:1; max-height:100px; padding:16px 22px; }
.alert-banner .siren{ font-size:1.5rem; animation: shakeIcon .5s infinite; }
@keyframes shakeIcon{ 0%,100%{ transform: rotate(0);} 25%{ transform: rotate(-15deg);} 75%{ transform: rotate(15deg);} }
.sim-btn{ margin-top:16px; }

/* Log history grid */
.history-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.snap-card{
  background:#fff; border-radius:14px; overflow:hidden; box-shadow: var(--shadow-sm);
  border: 3px solid var(--gold);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.snap-card:hover{ transform: translateY(-8px) scale(1.02); box-shadow: 0 22px 40px -12px rgba(0,0,0,.35); }
.snap-thumb{
  height: 170px;
  background: linear-gradient(135deg,#fdf6e3,#f7ecc8);
  display:flex; align-items:center; justify-content:center; color:#c9b264; font-size:2rem;
}
.snap-date{ background: var(--gold); padding:12px; text-align:center; font-weight:700; font-size:.88rem; }
.filter-bar{ display:flex; gap:12px; margin-bottom:30px; flex-wrap:wrap; }
.filter-chip{
  padding:9px 20px; border-radius:999px; background: rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.18); font-size:.85rem; font-weight:600;
  transition: all .25s;
}
.filter-chip.active, .filter-chip:hover{ background: var(--gold); color: var(--red-dark); border-color: var(--gold); }

/* About / contact pages */
.about-hero{ padding: 150px 0 60px; text-align:center; }
.about-hero h1{ color:#fff; font-size: clamp(2.2rem,4vw,3.2rem); margin:14px 0; }
.about-hero p{ color:rgba(255,255,255,.8); max-width:680px; margin:0 auto; font-size:1.08rem; line-height:1.7; }
.info-card{
  background:#fff; border-radius:var(--radius); padding:40px; box-shadow: var(--shadow-sm);
  margin-bottom:30px;
}
.info-card p{ line-height:1.8; color: var(--gray); }
.hotline{
  display:flex; gap:18px; padding:22px 0; border-bottom:1px solid #f0e4d8;
}
.hotline:last-child{ border-bottom:none; }
.hotline .hicon{
  width:54px; height:54px; border-radius:14px; flex-shrink:0;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.hotline h4{ margin:0 0 6px; }
.hotline .num{ color: var(--red); font-weight:700; font-family:'Baloo 2'; font-size:1.15rem; }
.hotline p{ margin:6px 0 0; color:var(--gray); font-size:.9rem; }

.contact-form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; }

/* Utility */
.text-center{ text-align:center; }
.mt-40{ margin-top:40px; }
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .feature-grid, .steps, .team-grid{ grid-template-columns: repeat(2,1fr); }
  .dash-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: repeat(2,1fr); }
  .history-grid{ grid-template-columns: repeat(2,1fr); }
  .contact-form-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .feature-grid, .steps, .team-grid, .footer-grid, .history-grid{ grid-template-columns: 1fr; }
  .metric-row, .clock-card{ flex-direction:column; }
  .auth-card{ padding: 34px 24px; }
}