:root{
  /* Brand palette */
  --bg:#05070a;                 /* Black */
  --panel: rgba(11,18,32,.88);  /* Dark navy panel */
  --panel2: rgba(15,23,42,.86);
  --text:#e5e7eb;               /* Light text */
  --muted:rgba(226,232,240,.78);
  --line:rgba(148,163,184,.18);

  --green:#22c55e;              /* Green (primary) */
  --green2:#7CFF9E;
  --blue:#3b82f6;               /* Blue (secondary) */
  --blue2:#60a5fa;

  --accent: var(--green);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 18px;
}



*{box-sizing:border-box}
html,body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background:
    radial-gradient(900px 520px at 18% -10%, rgba(34,197,94,.20), transparent 60%),
    radial-gradient(900px 520px at 85% 10%, rgba(59,130,246,.18), transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.55;
}
body{margin:0}

a{color:inherit;text-decoration:none}
.container{width:min(1160px, 92%); margin:0 auto}
.small{font-size:.95rem;color:var(--muted)}
/* Kicker appears on dark sections across the site */
.kicker{letter-spacing:.18em;text-transform:uppercase;color:rgba(226,232,240,.72);font-weight:900;font-size:.82rem}
h1,h2,h3{line-height:1.15;margin:0 0 .6rem 0}
h1{font-size:clamp(2.1rem, 4vw, 3.3rem)}
h2{font-size:clamp(1.55rem, 2.5vw, 2.2rem)}
h3{font-size:1.25rem}
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.92rem 1.1rem; border-radius:999px;
  border:1px solid rgba(34,197,94,.55);
  background: linear-gradient(180deg, rgba(34,197,94,.28), rgba(34,197,94,.12));
  box-shadow: var(--shadow);
  font-weight:900;
  color: var(--text);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 70px rgba(34,197,94,.14), var(--shadow);
  border-color: rgba(34,197,94,.75);
}
.btn.secondary{
  border-color: rgba(96,165,250,.40);
  background: rgba(15,23,42,.40);
  box-shadow:none;
  color: var(--text);
}
.btn.secondary:hover{
  border-color: rgba(96,165,250,.70);
  box-shadow: 0 18px 60px rgba(59,130,246,.12);
}

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(11,15,20,.64);
  border-bottom:1px solid var(--line);
}
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 0;
}
.brand{
  display:flex; align-items:center; gap:.8rem;
}
.brand-mark{
  /* Logo only (no background patch) */
  width: clamp(90px, 9vw, 128px);
  height: clamp(90px, 9vw, 128px);
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: visible;
}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block;filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));}
.brand-title{display:flex;flex-direction:column}
.brand-title strong{font-size:1.08rem; letter-spacing:.02em}
.brand-title span{font-size:.86rem; color:rgba(231,238,247,.72)}

.nav-links{display:flex; align-items:center; gap:1.15rem}
.nav-links a{
  color:rgba(226,232,240,.86);
  font-weight:800; font-size:.98rem;
  padding:.45rem .25rem;
  border-bottom:2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav-links a:hover{color:var(--green2); border-bottom-color:rgba(34,197,94,.55)}
.nav-cta{display:flex; align-items:center; gap:.8rem}

.hamburger{
  display:none;
  width:46px;height:46px;border-radius:14px;
  border:1px solid rgba(148,163,184,.22);
  background: rgba(15,23,42,.55);
  color:var(--text);
}
.hamburger span{display:block;width:18px;height:2px;background:rgba(226,232,240,.86);margin:5px auto;border-radius:2px}

.mobile-panel{
  display:none;
  padding:.4rem 0 1.0rem 0;
}
.mobile-panel a{
  display:block;
  padding:.95rem 0;
  border-top:1px solid var(--line);
  color:rgba(226,232,240,.92);
  font-weight:900;
}
.mobile-panel a:last-child{border-bottom:1px solid var(--line)}
.mobile-panel .btn{justify-content:center; margin-top:.9rem; width:100%}

.hero{
  position:relative;
  min-height: 78vh;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: url('../img/hero.jpg');
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.06);
  transform: scale(1.04);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(5,7,10,.78) 0%, rgba(5,7,10,.62) 45%, rgba(5,7,10,.45) 70%, rgba(5,7,10,.65) 100%),
    radial-gradient(900px 520px at 18% 45%, rgba(34,197,94,.18), transparent 60%),
    radial-gradient(900px 520px at 85% 25%, rgba(59,130,246,.14), transparent 60%);
}
.hero-content{
  position:relative;
  padding: 5.2rem 0 4.2rem 0;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 2.2rem;
  align-items:end;
}
.hero-card{
  background: rgba(11,18,32,.78);
  border:1px solid rgba(148,163,184,.16);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.25rem 1.15rem 1.25rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-badges{
  display:flex; flex-wrap:wrap; gap:.55rem;
  margin-top:1rem;
}
.badge{
  display:inline-flex; gap:.4rem; align-items:center;
  padding:.46rem .78rem;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.35);
  background: rgba(15,23,42,.55);
  color: rgba(226,232,240,.92);
  font-weight:900;
  font-size:.86rem;
}
.hero-actions{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.4rem}
.hero-actions .btn{padding: 1.0rem 1.25rem}

.section{padding: 4.3rem 0}
.section.tight{padding: 3.2rem 0}
.panel{
  background: rgba(11,18,32,.72);
  border: 1px solid rgba(148,163,184,.14);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-top:1.4rem;
}
.card{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(11,18,32,.78);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform: translateY(-4px); border-color: rgba(34,197,94,.28); box-shadow: 0 24px 70px rgba(0,0,0,.55);}
.card img{width:100%; height: 190px; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.05)}
.card .pad{padding: 1.0rem 1.0rem 1.1rem 1.0rem}
.card p{margin:.25rem 0 0 0; color:rgba(226,232,240,.78)}

.features{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  align-items:stretch;
}
.feature-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.0rem;
}
.feature{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.96);
  padding: 1.05rem;
  /* Ensure readable text on light cards */
  color: #0f172a;
}
.feature h3{color:#0b1220}
.feature .icon{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background: rgba(215,179,106,.12);
  border:1px solid rgba(215,179,106,.30);
  margin-bottom:.7rem;
}
.feature .icon svg{width:22px;height:22px;opacity:.92}
.feature p{margin:.25rem 0 0 0;color:rgba(15,23,42,.80)}

.about-split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:1.35rem;
  align-items:stretch;
}
.about-photo{
  min-height: 340px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background-image: url('../img/about.jpg');
  background-size:cover;
  background-position:center;
  box-shadow: var(--shadow);
  position:relative;
}
.about-photo::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,15,20,.10), rgba(11,15,20,.75));
}

.stats{
  margin-top: 1.2rem;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}
.stat{
  text-align:center;
  padding: 1.05rem .85rem;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.86);
  color:#0f172a;
}
.stat .num{
  font-size: 2.0rem;
  font-weight: 1000;
  color: var(--green2);
  letter-spacing: .02em;
}
.stat .label{margin-top:.25rem;color:rgba(15,23,42,.70); font-weight:700; font-size:.9rem}

.quote{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 1.25rem;
  align-items:start;
}
.form{
  padding: 1.25rem;
}
.form-row{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem;
}
label{font-weight:800; font-size:.92rem; color:rgba(15,23,42,.80)}
input, select, textarea{
  width:100%;
  padding:.85rem .9rem;
  margin-top:.45rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.04);
  color: var(--text);
  outline:none;
}
textarea{min-height:120px; resize:vertical}
input::placeholder, textarea::placeholder{color: rgba(231,238,247,.55)}
.help{color:rgba(15,23,42,.62); font-size:.9rem; margin:.55rem 0 0 0}
.checkbox{
  display:flex; gap:.7rem; align-items:flex-start;
  margin-top:.9rem;
}
.checkbox input{width:18px;height:18px;margin:0;margin-top:.15rem}
.form-actions{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.1rem}
.notice{
  padding: 1.05rem 1.05rem;
  border-radius: var(--radius);
  border:1px solid rgba(215,179,106,.28);
  background: rgba(201,162,74,.14);
}
.notice strong{color:var(--green2)}
hr.sep{border:0;border-top:1px solid var(--line); margin: 1.2rem 0}

.page-hero{
  position:relative;
  padding: 4.3rem 0 2.9rem 0;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: url('../img/footer.jpg');
  background-size: cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.05);
  transform: scale(1.05);
}
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(5,7,10,.88) 0%, rgba(5,7,10,.62) 50%, rgba(5,7,10,.90) 100%),
    radial-gradient(900px 520px at 20% 30%, rgba(59,130,246,.12), transparent 60%);
}
.page-hero .container{position:relative}
.breadcrumb{margin-top:.8rem;color:rgba(226,232,240,.70); font-weight:800}

.content{
  padding: 2.2rem 0 4.0rem 0;
}
.prose{
  padding: 1.3rem;
  color: var(--text);
}
.prose p{color:rgba(226,232,240,.82); margin:.6rem 0}
.prose ul{color:rgba(226,232,240,.82)}
.prose li{margin:.35rem 0}

footer{
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
}
footer::before{
  content:"";
  position:absolute; inset:0;
  background-image: url('../img/footer.jpg');
  background-size: cover;
  background-position:center;
  filter: blur(1px) saturate(1.05) contrast(1.03);
  transform: scale(1.05);
  opacity:.35;
}
footer::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,7,10,.88), rgba(5,7,10,.96));
}
.footer-inner{
  position:relative;
  padding: 3.2rem 0 1.6rem 0;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 1.2rem;
}
.footer-grid h3{margin-bottom:.65rem}
.footer-links a{display:block;color:rgba(226,232,240,.86);font-weight:900;padding:.35rem 0;transition:color .18s ease;}
.footer-links a:hover{color:var(--blue2)}
.footer-bottom{
  position:relative;
  padding: 1.05rem 0 1.2rem 0;
  color:rgba(226,232,240,.70);
  font-weight:700;
  border-top:1px solid var(--line);
  margin-top: 1.2rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.callouts{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
  margin-top: 1.2rem;
}
.callout{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.96);
  padding: 1.05rem;
  color:#0f172a;
}
.callout .small{color:rgba(15,23,42,.72)}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  .about-split{grid-template-columns:1fr}
  .stats{grid-template-columns: repeat(2,1fr)}
  .quote{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .nav-links, .nav-cta{display:none}
  .hamburger{display:inline-block}
  .mobile-panel.show{display:block}

  /* Performance: reduce expensive blur effects on smaller devices */
  header, .panel, .hero-card{backdrop-filter:none; -webkit-backdrop-filter:none;}
}


/* Forms (readability on dark theme) */
.form label{color:rgba(226,232,240,.86)!important;font-weight:700;}
.form input,.form select,.form textarea{
  background: rgba(15,23,42,.70)!important;
  border:1px solid rgba(148,163,184,.18)!important;
  color:rgba(226,232,240,.92)!important;
}
.form input::placeholder,.form textarea::placeholder{color:rgba(226,232,240,.45)!important;}
.form .hint{color:rgba(226,232,240,.62)!important;}

/* Reveal animations */
.reveal{opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform: translateY(0);}
.reveal.fade{transform:none;}
.reveal.fade.in{opacity:1;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* Footer readability */
footer, footer *{color:rgba(226,232,240,.86);}
footer h3{color:rgba(226,232,240,.94);}
footer .muted, footer .small{color:rgba(226,232,240,.70)!important;}
footer .footer-bottom{color:rgba(226,232,240,.70)!important;}

/* Hero readability */
.hero h1{color:rgba(226,232,240,.98)!important; text-shadow: 0 12px 40px rgba(0,0,0,.55);}
.hero p{color:rgba(226,232,240,.78)!important;}
.hero .chip, .hero .pill{color:rgba(226,232,240,.82)!important;}



/* FIX: keep overlays behind content (so text is not faded) */
.hero, .page-hero, footer{position:relative; isolation:isolate;}
.hero::after, .page-hero::after, footer::after, footer::before{z-index:0; pointer-events:none;}
.hero-content, .page-hero .container, footer .container{position:relative; z-index:1;}

/* Hero chips + buttons readability */
.chips .pill, .pill{
  background: rgba(15,23,42,.55);
  border:1px solid rgba(148,163,184,.18);
  color:rgba(226,232,240,.88);
  font-weight:900;
}
.chips .pill strong{color:rgba(226,232,240,.96);}

/* Hero glass card */
.hero .hero-left{
  background: rgba(11,18,32,.72);
  border: 1px solid rgba(148,163,184,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  padding: 30px;
}
@media (max-width: 920px){
  .hero .hero-left{padding:20px}
}

/* Hero highlight text */
.hero .hero-left strong{
  color: var(--green2);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}


/* Subtle brand animations */
@keyframes neonPulse{
  0%,100%{ box-shadow: 0 18px 55px rgba(0,0,0,.40), 0 0 0 rgba(34,197,94,0); }
  50%{ box-shadow: 0 22px 70px rgba(0,0,0,.55), 0 0 28px rgba(34,197,94,.18); }
}
.brand-mark{animation: neonPulse 4.2s ease-in-out infinite;}

@keyframes shimmer{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
.hero::after{
  background-size: 200% 200%;
  animation: shimmer 14s ease-in-out infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .brand-mark{animation:none;}
  .hero::after{animation:none;}
}