@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --background: 201 100% 13%;
  --foreground: 0 0% 100%;
  --muted-foreground: 240 4% 66%;
  --primary: 0 0% 100%;
  --primary-foreground: 0 0% 4%;
  --secondary: 0 0% 10%;
  --muted: 0 0% 10%;
  --accent: 0 0% 10%;
  --border: 0 0% 18%;
  --input: 0 0% 18%;
  --font-display: 'Instrument Serif', serif;
  --font-body: 'Inter', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height:1.5;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:1280px;margin:0 auto;padding:0 24px;}

/* ---------- Liquid glass ---------- */
.liquid-glass{
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before{
  content:'';
  position:absolute; inset:0; border-radius:inherit; padding:1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

/* ---------- Animations ---------- */
@keyframes fade-rise{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
.animate-fade-rise{ animation: fade-rise .8s ease-out both; }
.animate-fade-rise-delay{ animation: fade-rise .8s ease-out .2s both; }
.animate-fade-rise-delay-2{ animation: fade-rise .8s ease-out .4s both; }

/* ---------- Nav ---------- */
.navbar{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 32px; max-width:1280px; margin:0 auto;
}
.nav-logo{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-size:1.9rem; letter-spacing:-0.02em;
  color:hsl(var(--foreground));
}
.nav-logo img{height:36px; width:auto;}
.nav-links{ display:none; gap:32px; align-items:center; }
.nav-links a{ font-size:.9rem; color:hsl(var(--muted-foreground)); transition:color .2s; }
.nav-links a:hover, .nav-links a.active{ color:hsl(var(--foreground)); }
.nav-cta{
  border-radius:999px; padding:10px 24px; font-size:.9rem; color:hsl(var(--foreground));
  transition: transform .2s;
}
.nav-cta:hover{ transform:scale(1.03); }
@media(min-width:768px){ .nav-links{ display:flex; } }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:90px 24px; overflow:hidden;
}
.hero video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.hero::after{
  content:''; position:absolute; inset:0; background:rgba(2,25,38,0.35); z-index:0;
}
.hero-content{ position:relative; z-index:1; max-width:1100px; }
.hero h1{
  font-family: var(--font-display); font-weight:400;
  font-size: clamp(2.6rem, 7vw, 6.5rem);
  line-height:0.95; letter-spacing:-2.46px;
}
.hero h1 em{ font-style:normal; color:hsl(var(--muted-foreground)); }
.hero p{
  color:hsl(var(--muted-foreground)); font-size:1.05rem; max-width:640px;
  margin:32px auto 0; line-height:1.7;
}
.hero-cta{
  display:inline-block; margin-top:48px; border-radius:999px; padding:20px 56px;
  font-size:1rem; color:hsl(var(--foreground)); cursor:pointer; transition:transform .2s;
}
.hero-cta:hover{ transform:scale(1.03); }

/* ---------- Sections ---------- */
section{ padding:96px 0; }
.section-title{ font-family: var(--font-display); font-size:2.6rem; font-weight:400; margin-bottom:16px; }
.section-sub{ color:hsl(var(--muted-foreground)); max-width:600px; margin-bottom:48px; }
.grid{ display:grid; gap:28px; }
.grid-3{ grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }

.card{
  border-radius:20px; padding:32px; background:hsl(var(--secondary));
  border:1px solid hsl(var(--border)); transition: transform .25s, border-color .25s;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,0.3); }
.card img{ border-radius:12px; margin-bottom:20px; aspect-ratio:16/10; object-fit:cover; width:100%; }
.card h3{ font-family:var(--font-display); font-size:1.5rem; font-weight:400; margin-bottom:10px; }
.card p{ color:hsl(var(--muted-foreground)); font-size:.92rem; }
.badge{ display:inline-block; font-size:.75rem; color:hsl(var(--muted-foreground)); border:1px solid hsl(var(--border)); border-radius:999px; padding:4px 12px; margin-bottom:14px; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid hsl(var(--border)); padding:56px 0; color:hsl(var(--muted-foreground)); font-size:.9rem; }
footer .container{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; }

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:50;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35); transition:transform .2s;
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:30px; height:30px; fill:#fff; }

/* ---------- Forms (admin reuse) ---------- */
.btn{ display:inline-block; border-radius:10px; padding:12px 24px; font-size:.9rem; cursor:pointer; border:none; }
.btn-light{ background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); }