@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@700;800&display=swap');

:root {
  --gosmar-green: #8bc936;
  --gosmar-green-dark: #6fae20;
  --gosmar-green-soft: #f2f8e8;
  --gosmar-brown: #3c2416;
  --gosmar-brown-2: #533522;
  --ink: #35261e;
  --muted: #756b65;
  --line: #e8e1dc;
  --cream: #fbfaf7;
  --white: #ffffff;
  --danger: #b42318;
  --shadow: 0 18px 60px rgba(60, 36, 22, .12);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--cream);
}
button, input { font: inherit; }
button { cursor: pointer; }
.container { width: min(1160px, calc(100% - 36px)); margin: 0 auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(232,225,220,.9);
}
.header-inner {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand { display: inline-flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.brand-logo { width: 152px; height: 68px; object-fit: contain; object-position: left center; display: block; }
.brand-copy { padding-left: 14px; border-left: 1px solid var(--line); }
.brand-copy small { color: var(--muted); font-size: 13px; font-weight: 600; }
.header-badge {
  padding: 10px 15px;
  border-radius: 999px;
  background: var(--gosmar-green-soft);
  color: var(--gosmar-brown);
  border: 1px solid rgba(139,201,54,.35);
  font-size: 13px;
  font-weight: 800;
}

.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(139,201,54,.22), transparent 28%),
    linear-gradient(145deg, #fff 0%, #f8f7f1 52%, #f0f6e5 100%);
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -145px;
  bottom: -190px;
  border-radius: 50%;
  border: 38px solid rgba(139,201,54,.15);
}
.hero::after {
  content: "";
  position: absolute;
  left: 4%;
  top: 38px;
  width: 72px;
  height: 5px;
  border-radius: 999px;
  background: var(--gosmar-green);
  opacity: .9;
}
.hero-grid {
  position: relative;
  z-index: 1;
  padding: 92px 0 82px;
  display: grid;
  grid-template-columns: 1.22fr .78fr;
  gap: 72px;
  align-items: center;
}
.eyebrow {
  display: inline-block;
  color: var(--gosmar-green-dark);
  font-size: 12px;
  letter-spacing: .17em;
  font-weight: 800;
}
h1, h2, h3 { font-family: "Manrope", sans-serif; margin-top: 0; }
h1 {
  max-width: 760px;
  margin: 14px 0 20px;
  color: var(--gosmar-brown);
  font-size: clamp(42px, 6vw, 69px);
  line-height: .98;
  letter-spacing: -.048em;
}
.hero p { max-width: 680px; margin: 0; font-size: 18px; line-height: 1.7; color: var(--muted); }
.hero-points { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-points span {
  padding: 10px 13px;
  border: 1px solid rgba(139,201,54,.35);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--gosmar-brown);
  font-size: 13px;
  font-weight: 800;
}

.hero-brand-card {
  overflow: hidden;
  border-radius: 34px;
  background: #fff;
  border: 1px solid rgba(83,53,34,.08);
  box-shadow: 0 28px 70px rgba(60,36,22,.13);
  transform: rotate(1.2deg);
}
.hero-logo-wrap {
  min-height: 325px;
  display: grid;
  place-items: center;
  padding: 42px 38px 32px;
  background: white;
}
.hero-logo-wrap img { width: min(100%, 365px); display: block; }
.hero-brand-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: var(--gosmar-green);
  color: var(--gosmar-brown);
}
.hero-brand-bottom p { color: var(--gosmar-brown); font-size: 13px; line-height: 1.45; font-weight: 700; }
.brand-dot { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; background: var(--gosmar-brown); }

.events-section { padding: 74px 0 96px; }
.section-heading { margin-bottom: 28px; display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.section-heading h2 { margin: 8px 0 0; color: var(--gosmar-brown); font-size: clamp(30px,4vw,44px); letter-spacing: -.035em; }
.section-heading p { max-width: 420px; margin: 0; color: var(--muted); line-height: 1.6; }
.events-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.event-card {
  min-height: 100%; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: white;
  box-shadow: 0 10px 36px rgba(60,36,22,.06); transition: .22s ease;
}
.event-card:hover { transform: translateY(-4px); box-shadow: 0 16px 46px rgba(60,36,22,.11); }
.event-card-top { padding: 25px 25px 20px; background: linear-gradient(145deg,#fafcf5,#fff); border-bottom: 1px solid var(--line); }
.event-date { display: flex; gap: 12px; align-items: center; }
.date-box {
  width: 60px; height: 64px; display: grid; place-items: center; border-radius: 17px;
  background: var(--gosmar-green); color: var(--gosmar-brown); text-align: center; line-height: 1;
  box-shadow: 0 8px 20px rgba(139,201,54,.25);
}
.date-box strong { display: block; font: 800 24px/1 "Manrope",sans-serif; }
.date-box span { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .13em; font-weight: 800; }
.event-date-copy small { color: var(--muted); font-size: 12px; text-transform: capitalize; }
.event-date-copy strong { display: block; margin-top: 2px; color: var(--gosmar-brown); }
.event-card-body { padding: 24px 25px 25px; display: flex; flex: 1; flex-direction: column; }
.event-card h3 { margin-bottom: 10px; color: var(--gosmar-brown); font-size: 22px; letter-spacing: -.025em; }
.event-card p { margin: 0; color: var(--muted); line-height: 1.65; }
.event-meta { margin: 20px 0 22px; display: grid; gap: 8px; font-size: 13px; color: var(--ink); }
.event-meta span { display: flex; align-items: center; gap: 8px; }
.card-button,.primary-button { border: 0; border-radius: 13px; font-weight: 800; transition: .18s ease; }
.card-button { margin-top: auto; padding: 14px 16px; color: var(--gosmar-brown); background: var(--gosmar-green); }
.card-button:hover:not(:disabled) { background: #7dbc2b; transform: translateY(-1px); }
.card-button:disabled { opacity: .45; cursor: not-allowed; }
.primary-button { width:100%; padding:15px 20px; color:#fff; background:var(--gosmar-brown); box-shadow:0 8px 22px rgba(60,36,22,.2); }
.primary-button:hover:not(:disabled) { background:#2e1b10; transform:translateY(-1px); }
.primary-button:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.state-card,.demo-banner { padding:22px; border:1px solid var(--line); border-radius:var(--radius-lg); background:white; }
.state-card { min-height:180px; display:grid; place-items:center; text-align:center; color:var(--muted); }
.state-card h3 { margin:0 0 6px; color:var(--gosmar-brown); }
.demo-banner { margin-bottom:22px; color:#5f4712; border-color:#e6d591; background:#fff9df; font-size:14px; }
.spinner { width:30px; height:30px; border:3px solid #e8eadf; border-top-color:var(--gosmar-green); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

footer { padding:36px 0 44px; color:#e8ded8; background:var(--gosmar-brown); border-top:7px solid var(--gosmar-green); }
.footer-inner { display:flex; justify-content:space-between; gap:30px; }
footer strong { color:#fff; }
footer p { margin:5px 0 0; font-size:13px; line-height:1.55; }
.footer-note { max-width:480px; text-align:right; }

.modal { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:22px; }
.modal-backdrop { position:absolute; inset:0; background:rgba(47,29,18,.68); backdrop-filter:blur(7px); }
.modal-panel { position:relative; width:min(920px,100%); max-height:calc(100vh - 44px); overflow:auto; border-radius:26px; background:white; box-shadow:0 28px 100px rgba(0,0,0,.28); }
.modal-close { position:sticky; float:right; top:14px; right:14px; z-index:2; width:40px; height:40px; margin:14px 14px -54px 0; border:0; border-radius:50%; background:white; color:var(--gosmar-brown); font-size:24px; box-shadow:0 6px 24px rgba(0,0,0,.1); }
.modal-event-header { padding:30px 32px 25px; color:white; background:linear-gradient(135deg,var(--gosmar-brown),var(--gosmar-brown-2)); border-bottom:8px solid var(--gosmar-green); }
.modal-event-header h2 { margin:8px 0; font-size:31px; letter-spacing:-.035em; }
.modal-event-header p { margin:0; opacity:.83; }
.booking-layout { padding:30px 32px 34px; display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.step-heading { display:flex; gap:12px; align-items:flex-start; margin-bottom:18px; }
.step-heading > span { flex:0 0 32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--gosmar-green); color:var(--gosmar-brown); font-weight:800; }
.step-heading h3 { margin:1px 0 3px; color:var(--gosmar-brown); font-size:18px; }
.step-heading p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.slots-list { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.slot-button { padding:12px 8px; border:1px solid var(--line); border-radius:11px; background:white; color:var(--ink); font-weight:700; }
.slot-button:hover:not(:disabled) { border-color:var(--gosmar-green-dark); background:var(--gosmar-green-soft); }
.slot-button.active { border-color:var(--gosmar-green); color:var(--gosmar-brown); background:var(--gosmar-green); }
.slot-button:disabled { cursor:not-allowed; color:#aaa19c; text-decoration:line-through; background:#f5f3f1; }
.booking-form { display:grid; gap:15px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.booking-form label { display:grid; gap:7px; color:var(--gosmar-brown); font-size:13px; font-weight:700; }
.booking-form input[type="text"],.booking-form input[type="tel"] { width:100%; padding:13px 14px; border:1px solid #d8cec8; border-radius:11px; outline:none; background:white; }
.booking-form input:focus { border-color:var(--gosmar-green-dark); box-shadow:0 0 0 3px rgba(139,201,54,.14); }
.privacy-check { grid-template-columns:auto 1fr !important; align-items:start; gap:9px !important; color:var(--muted) !important; font-size:11px !important; font-weight:500 !important; line-height:1.45; }
.privacy-check input { margin-top:2px; accent-color:var(--gosmar-green-dark); }
.form-message { padding:11px 13px; border-radius:10px; font-size:12px; }
.form-message.error { color:#7a271a; background:#fef3f2; border:1px solid #fecdca; }
.success-state { padding:54px 34px; text-align:center; }
.success-state .primary-button { max-width:260px; margin-top:16px; }
.success-icon { width:70px; height:70px; display:grid; place-items:center; margin:0 auto 18px; border-radius:50%; color:var(--gosmar-brown); background:var(--gosmar-green); font-size:34px; font-weight:800; }
.success-state h2 { margin:10px 0; color:var(--gosmar-brown); font-size:30px; }
.success-state p { max-width:560px; margin:0 auto; color:var(--muted); line-height:1.65; }

.whatsapp-confirm-box {
  max-width: 560px;
  margin: 26px auto 0;
  padding: 20px;
  border: 1px solid #d8e8d5;
  border-radius: 18px;
  background: #f6fbf4;
}
.whatsapp-confirm-box strong {
  display: block;
  color: var(--gosmar-brown);
  font-size: 16px;
}
.whatsapp-confirm-box p {
  margin: 7px auto 16px;
  font-size: 13px;
  line-height: 1.55;
}
.whatsapp-button {
  width: 100%;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 18px;
  border-radius: 13px;
  color: #ffffff;
  background: #25D366;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .22);
  transition: transform .18s ease, filter .18s ease;
}
.whatsapp-button:hover {
  transform: translateY(-1px);
  filter: brightness(.96);
}
.whatsapp-icon {
  width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
}
.secondary-close-button {
  margin-top: 14px;
  padding: 10px 18px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}
.secondary-close-button:hover {
  color: var(--gosmar-brown);
}

.hidden { display:none !important; }

@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; gap:38px; padding:68px 0 62px; }
  .hero-brand-card { max-width:560px; transform:none; }
  .hero-logo-wrap { min-height:280px; }
  .events-grid { grid-template-columns:repeat(2,1fr); }
  .booking-layout { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .container { width:min(100% - 26px,1160px); }
  .header-badge,.brand-copy { display:none; }
  .header-inner { min-height:76px; }
  .brand-logo { width:132px; height:58px; }
  h1 { font-size:43px; }
  .hero-grid { padding-top:58px; }
  .hero p { font-size:16px; }
  .hero-points { gap:7px; }
  .hero-brand-card { border-radius:25px; }
  .hero-logo-wrap { min-height:230px; padding:30px 26px 24px; }
  .hero-brand-bottom { padding:17px 19px; }
  .section-heading { display:block; }
  .section-heading p { margin-top:12px; }
  .events-section { padding:56px 0 70px; }
  .events-grid { grid-template-columns:1fr; }
  .footer-inner { display:block; }
  .footer-note { margin-top:18px; text-align:left; }
  .modal { padding:0; align-items:end; }
  .modal-panel { width:100%; max-height:94vh; border-radius:24px 24px 0 0; }
  .modal-event-header { padding:28px 22px 22px; }
  .modal-event-header h2 { font-size:26px; padding-right:36px; }
  .booking-layout { padding:26px 22px 30px; }
  .form-row { grid-template-columns:1fr; }
  .slots-list { grid-template-columns:repeat(3,1fr); }
}

.whatsapp-return-note {
  margin-top: 18px !important;
  font-size: 12px;
  color: var(--muted);
}