/* ------------------------------------------------------------
   Brand palette
------------------------------------------------------------ */
:root{
  --orange:#C1571E;
  --teal:#2D7A6A;
  --cream:#E2C187;
  --charcoal:#131615;
  --text:#ECECEC;
  --muted:#b7b7b7;
}

/* ------------------------------------------------------------
   Base
------------------------------------------------------------ */
*{ box-sizing:border-box }
html, body { height:100% }
body{
  margin:0;
  font-family:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--charcoal);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

/* ------------------------------------------------------------
   Hero background: layered gradients + optional topo texture.
   Drop a subtle texture at /assets/img/topo-texture.png to enable.
   SWA dir only gets deployed.
------------------------------------------------------------ */
.hero{
  position:relative;
  display:grid;
  place-items:center;
  padding: clamp(5rem, 8vw, 8rem) 1.25rem 3rem;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(193,87,30,.30), rgba(0,0,0,0) 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(45,122,106,.22), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(19,22,21,.85), rgba(19,22,21,.85)),
    url("../img/topo-texture.png");
  background-size: cover;
  background-position: center;
  overflow:hidden;
  isolation:isolate;
}

/* Subtle spark grain around the card (no JS) */
.hero::after{
  content:"";
  position:absolute; inset:-30vmax;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(193,87,30,.35), transparent 60%),
    radial-gradient(3px 3px at 70% 40%, rgba(226,193,135,.22), transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(45,122,106,.28), transparent 60%),
    radial-gradient(2px 2px at 85% 65%, rgba(193,87,30,.28), transparent 60%);
  opacity:.55;
  pointer-events:none;
  z-index:0;
  filter: blur(.2px);
}

/* ------------------------------------------------------------
   Glassy hero card
------------------------------------------------------------ */
.hero-card{
  position:relative;
  z-index:1;
  text-align:center;
  background: rgba(19,22,21,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(226,193,135,0.25);
  padding: clamp(1.5rem, 3.2vw, 2.25rem);
  border-radius: 20px;
  max-width: 860px;
  width: min(94vw, 860px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.40);
}

.brandmark{
  display:flex; align-items:center; justify-content:center;
  gap: .75rem;
  margin-bottom: .25rem;
}
.brandmark img{
  height: clamp(64px, 10vw, 120px);
  width: auto;
  display:block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.45));
}
.brandtext{
  font-size: clamp(1.35rem, 2.2vw + 1rem, 2rem);
  letter-spacing:.04em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--cream);
}

.headline{
  margin: .5rem 0 .25rem;
  font-size: clamp(1.4rem, 3.2vw + .8rem, 2.4rem);
  font-weight: 900;
}

.sub{
  margin: 0 0 1.15rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.1vw + .8rem, 1.125rem);
}

.cta{
  display:inline-block;
  padding:.9rem 1.2rem;
  border-radius: 12px;
  border:1px solid rgba(193,87,30,.45);
  background: linear-gradient(180deg, var(--orange), #9f4417);
  color: #FFF;
  font-weight: 800;
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.cta:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(193,87,30,.35); }
.cta:active{ transform: translateY(0); box-shadow:none; }

/* ------------------------------------------------------------
   Values / Teaser
------------------------------------------------------------ */
.values{
  padding: 2.75rem 1.25rem 2rem;
}
.values-list{
  list-style:none; margin:0 0 .75rem; padding:0;
  display:flex; gap:.5rem .75rem; flex-wrap:wrap; justify-content:center;
}
.values-list li{
  padding:.38rem .7rem;
  border:1px solid rgba(45,122,106,.35);
  border-radius:999px;
  font-weight:700;
  color:#d8efe9;
  background: linear-gradient(180deg, rgba(45,122,106,.35), rgba(45,122,106,.18));
}
.teaser{
  text-align:center;
  max-width:960px; margin:0 auto;
  color:#d7d7d7;
}

/* ------------------------------------------------------------
   Footer
------------------------------------------------------------ */
.footer{
  margin-top:auto;
  padding:2rem 1.25rem 2.75rem;
  text-align:center;
  color: var(--muted);
  border-top:1px solid rgba(226,193,135,0.18);
}
.footer .social{
  display:flex; gap:.5rem; justify-content:center; align-items:center;
  margin-bottom:.5rem;
}
.footer a{
  color: var(--cream);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.footer a:hover{ border-bottom-color: currentColor; }

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}