:root{
  --gold:#ffb347; --blue:#0579f2; --radius:16px;
  --mist-height:46vh;
}
*{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; color:#1a1a1a; background:#fff; line-height:1.55}
a{color:var(--blue); text-decoration:none}

/* Top-only brand mist */
.bg-mist{position:fixed; inset:0 0 auto 0; height:var(--mist-height); pointer-events:none; z-index:0; overflow:visible}
.bg-mist .mist{position:absolute; filter:blur(40px); opacity:.9; transform:translateZ(0)}
.bg-mist .gold{
  width:90vmax; height:90vmax; left:-25vmax; top:-40vmax;
  background:radial-gradient(circle at 55% 55%, rgba(255,179,71,.55) 0%, rgba(255,179,71,0) 55%);
  animation:drift1 28s ease-in-out infinite alternate;
}
.bg-mist .blue{
  width:95vmax; height:95vmax; right:-20vmax; top:-30vmax;
  background:radial-gradient(circle at 45% 45%, rgba(5,121,242,.45) 0%, rgba(5,121,242,0) 60%);
  animation:drift2 32s ease-in-out infinite alternate;
}
/* White cap that guarantees fade to white */
.bg-mist .cap{position:absolute; left:0; right:0; bottom:-30vh; height:40vh;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 70%, #fff 100%);
}
@keyframes drift1{0%{transform:translate(-3%,-1%)}100%{transform:translate(6%,4%)}}
@keyframes drift2{0%{transform:translate(3%,0%)}100%{transform:translate(-4%,5%)}}
@media (prefers-reduced-motion:reduce){.bg-mist .gold,.bg-mist .blue{animation:none}}

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(6px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:0.9rem 0}
.brand img{display:block; height:64px; width:auto} /* Bigger header logo */
@media (max-width:800px){ .brand img{height:52px} }
.nav a{margin-left:1rem; font-weight:600}
.menu-toggle{display:none}
@media (max-width:800px){
  .nav{display:none; position:absolute; right:1.25rem; top:84px; background:#fff; padding:.75rem 1rem; border-radius:var(--radius); box-shadow:0 16px 48px rgba(0,0,0,.08)}
  .nav.open{display:block}
  .menu-toggle{display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border:1px solid rgba(0,0,0,.1); background:#fff; border-radius:10px}
}

/* Containers & sections */
.container{max-width:1100px; margin:0 auto; padding:0 1.25rem}
.hero{position:relative; z-index:1; padding:clamp(3rem,7vw,6rem) 0 2rem}
.hero h1{font-size:clamp(2rem,4vw,3rem); letter-spacing:-.02em; margin:0 0 .5rem}
.hero .lead{font-size:clamp(1rem,1.6vw,1.125rem); color:#333; max-width:70ch}
.section{position:relative; z-index:1; padding:3.5rem 0}

/* Cards + hover shadows */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem}
.cards .card{background:#fff; padding:1.1rem; border-radius:var(--radius); border:1px solid rgba(0,0,0,.06); transition:transform .2s ease, box-shadow .2s ease}
.cards.gold .card:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,179,71,.35)}
.cards.blue .card:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(5,121,242,.35)}
.cards .card h3{margin-top:0; margin-bottom:.4rem}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cards{grid-template-columns:1fr}}

/* Media */
.media{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.media video{width:100%; height:auto; display:block; border-radius:var(--radius); background:#f5f5f5; border:1px solid rgba(0,0,0,.06)}
@media (max-width:800px){.media{grid-template-columns:1fr}}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:12px; font-weight:700; text-align:center}
.btn-primary{background:var(--blue); color:#fff}
.btn-outline{border:2px solid var(--blue); color:var(--blue); background:#fff}
.btn-outline:hover{background:var(--blue); color:#fff}

/* Footer */
.site-footer{border-top:1px solid rgba(0,0,0,.06); padding:2rem 0; margin-top:2rem; background:#fff}
.footer-inner{display:flex; align-items:center; gap:1rem}
.footer-inner img{width:64px; height:auto}
.footer-inner p{margin:0; color:#444}