:root{
  /* TruLight logo palette */
  --navy:#0B2F54;
  --blue:#0072BC;
  --orange:#F58220;
  --yellow:#FFD200;
  --gray:#B8B8B8;

  /* Site theme mapping */
  --bg:#061624;               /* deep background that matches the navy */
  --panel:#071E33;            /* cards */
  --text:#ffffff;
  --muted:rgba(184,184,184,.90);
  --accent:var(--blue);       /* primary buttons/links */
  --accent2:var(--orange);    /* secondary accent */
  --border:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{color:inherit; text-decoration:none}
.container{max-width:1000px; margin:0 auto; padding:0 20px}

header{
  position:sticky; top:0;
    background:rgba(6,22,36,.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
  z-index:10;
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 -2px 0 rgba(0,114,188,.35);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.brand{display:flex; align-items:center; gap:12px}
.brand{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand::before{
  content:"";
  position:absolute;
  left:-4px;
  top:-8px;
  width:36px;
  height:36px;
  background: radial-gradient(
    circle,
    rgba(255,210,0,.38) 0%,
    rgba(255,210,0,.18) 40%,
    rgba(255,210,0,.08) 60%,
    transparent 75%
  );
  filter: blur(8px);
  z-index:0;
}

.brand img{
  height:44px;
  width:auto;
  position: relative;
  z-index:1;
}
.brand .name{font-weight:700; letter-spacing:.2px}
.links{display:flex; gap:14px; flex-wrap:wrap}
.links a{
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:10px;
  color:var(--muted);
}
.links a:hover{
  border-color:rgba(0,114,188,.45);
  color:var(--text);
}
.hero{padding:70px 0 40px;}
.hero h1{font-size:2.4rem; margin:0 0 10px}
.hero p{color:var(--muted); line-height:1.7; max-width:760px}
.cta{margin-top:20px; display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  transition: transform .08s ease, border-color .15s ease, background .15s ease;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(245,130,32,.45);
}
.btn.primary{
  background:var(--blue);
  color:#ffffff;
  border-color:transparent;
  font-weight:700;
}
.btn.primary:hover{
  background:#005fa3; /* darker TruLight blue */
}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:22px 0 50px;
}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow: 0 0 0 1px rgba(0,114,188,.10), 0 10px 30px rgba(0,0,0,.25);
}
.card h3{margin:0 0 8px}
.card p{margin:0; color:var(--muted); line-height:1.65}

.page-title{padding:40px 0 10px}
.page-title h1{margin:0 0 8px}
.page-title p{margin:0; color:var(--muted); line-height:1.7}

form{display:grid; gap:12px;}
input, textarea{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  color:var(--text);
}
textarea{min-height:140px; resize:vertical}
small{color:var(--muted)}
footer{
  border-top:1px solid var(--border);
  padding:24px 0;
  color:var(--muted);
  margin-top:40px;
}
@media (max-width: 820px){
  .grid{grid-template-columns:1fr}
  .hero{padding-top:50px}
}
/* Desktop-only logo size increase */
@media (min-width: 1024px) {
  .brand img {
    height: 52px; /* was ~44px */
  }

  .brand .name {
    font-size: 1.05rem;
  }
} 
/* Footer layout (logo + about left, contact right) */
.site-footer{
  margin-top: 56px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(6, 22, 36, .65);
}

.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 28px;
  padding: 28px 0;
  align-items: start;
}
/* Footer logo wrapper so it can use the SAME sun halo technique as header */
.footer-brand{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Exact same halo as header (.brand::before) */
.footer-brand::before{
  content:"";
  position:absolute;
  left:-4px;
  top:-8px;
  width:36px;
  height:36px;
  background: radial-gradient(
    circle,
    rgba(255,210,0,.38) 0%,
    rgba(255,210,0,.18) 40%,
    rgba(255,210,0,.08) 60%,
    transparent 75%
  );
  filter: blur(8px);
  z-index:0;
}

/* Make sure logo sits above halo */
.footer-logo{
  position: relative;
  z-index: 1;
}

.footer-left{
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.footer-logo{
  height: 56px;
  width: auto;
  flex: 0 0 auto;
}

.footer-title{
  font-weight: 800;
  margin-bottom: 8px;
}

.footer-about p{
  margin: 0;
  color: var(--muted);
  max-width: 520px;
  line-height: 1.55;
  font-size: .95rem;
}

.footer-right{
  text-align: left;
}

.footer-link{
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.footer-link:hover{
  text-decoration: underline;
}

.footer-bottom{
  padding: 14px 0 24px;
  color: rgba(255,255,255,.75);
  font-size: .9rem;
}

/* Mobile */
@media (max-width: 860px){
  .footer-grid{
    grid-template-columns: 1fr;
  }
  .footer-left{
    flex-direction: column;
  }
  .footer-logo{
    height: 52px;
  }
}