/* Flavor Pop – brand, layout, and image styles */
:root{
  --bg:#0b0c10;
  --card:#12141b;
  --text:#f4f7ff;
  --muted:#b8c2de;
  --brand-start:#32f3f8;
  --brand-end:#e34eed;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 700px at 85% -10%, rgba(227,78,237,.18), transparent 60%),
              radial-gradient(900px 600px at -20% -20%, rgba(50,243,248,.16), transparent 50%),
              var(--bg);
}

.container{max-width:1140px;margin:0 auto;padding:0 20px}
.site-header{
  position:sticky;top:0;z-index:60;
  backdrop-filter:saturate(160%) blur(8px);
  background:rgba(11,12,16,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo-img{height:44px;width:auto;display:block}

nav a{color:var(--text);text-decoration:none;margin-left:14px;font-weight:600;opacity:.9;position:relative}
nav a:hover{opacity:1}
nav a:hover::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:linear-gradient(90deg,var(--brand-start),var(--brand-end));
  border-radius:2px;
}

.hero{position:relative;padding:96px 0 84px;background:#0e1016}
.hero.has-bg{background-size:cover;background-position:center;background-repeat:no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,.35));}
.hero > .container{position:relative;z-index:1}
.hero h1{font-size:46px;line-height:1.1;margin:0 0 14px;font-weight:800}
.pop{background:linear-gradient(90deg,var(--brand-start),var(--brand-end));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:18px;margin:0 0 24px}
.btn{display:inline-block;padding:12px 18px;border-radius:14px;text-decoration:none;font-weight:700;border:0;cursor:pointer}
.btn-primary{background:linear-gradient(90deg,var(--brand-start),var(--brand-end));color:#111;box-shadow:0 10px 24px rgba(50,243,248,.25)}
.section{padding:60px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}
.grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:20px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card img{width:100%;height:220px;object-fit:cover;border-radius:12px}
.card .cap{margin-top:10px;font-weight:700}

.form{margin-top:20px;display:grid;gap:16px;max-width:680px}
.form-row{display:flex;flex-direction:column;gap:6px}
input,textarea{
  background:#0e1016;color:var(--text);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:12px;font-size:16px;
}
.hidden{display:none}
.footer-note{color:var(--muted);margin-top:10px}
.map-frame{width:100%;height:330px;border:0;border-radius:14px;overflow:hidden}

.site-footer{padding:24px 0;border-top:1px solid rgba(255,255,255,.06);margin-top:36px}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media (max-width:900px){
  .cards{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .hero h1{font-size:38px}
}
@media (max-width:600px){
  .cards{grid-template-columns:1fr}
  .hero{padding-top:72px}
}

/* Anchor offset for sticky header */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
#contact { scroll-margin-top: 88px; }


/* Hover: turn buttons logo blue */
.btn:hover,
.btn-primary:hover{
  background: #6FBBF4 !important;
  color:#111 !important;
  box-shadow:0 12px 26px rgba(111,187,244,.35) !important;
  transform: translateY(-1px);
}
.btn:active,
.btn-primary:active{ transform: translateY(0); }
.btn:active,
.btn-primary:active{ transform: translateY(0); }