/* ===== Vihar Tours • Festive Kerala — Colorful Theme (with 4-offer grid) ===== */
:root{
  --ink:#0b1021;
  --muted:#334155;
  --bg1:#ffedd5; --bg2:#f3e8ff; --bg3:#dcfce7; --bg4:#e0f2fe;
  --pri:#0284c7;
  --grad1:linear-gradient(135deg,#ff6b6b,#f7b733);
  --grad2:linear-gradient(135deg,#36d1dc,#5b86e5);
  --grad3:linear-gradient(135deg,#a1ffce,#faffd1);
  --grad4:linear-gradient(135deg,#f6d365,#fda085);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:
    radial-gradient(1200px 600px at 10% -10%, var(--bg1), transparent),
    radial-gradient(1000px 500px at 90% 0%, var(--bg2), transparent),
    radial-gradient(800px 600px at 10% 100%, var(--bg3), transparent),
    radial-gradient(900px 700px at 100% 100%, var(--bg4), transparent), #fff;
  overflow-x:hidden;
}

/* Sparkly overlay */
.sparkles{
  position:fixed; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:.7;
  background-image:
    radial-gradient(6px 6px at 10% 20%, rgba(255,255,255,.8), rgba(255,255,255,0)),
    radial-gradient(6px 6px at 30% 80%, rgba(255,255,255,.6), rgba(255,255,255,0)),
    radial-gradient(8px 8px at 70% 30%, rgba(255,255,255,.75), rgba(255,255,255,0)),
    radial-gradient(8px 8px at 85% 70%, rgba(255,255,255,.6), rgba(255,255,255,0));
  filter: blur(.4px);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.55;transform:scale(1)} to{opacity:.95;transform:scale(1.02)}}

/* Layout helpers */
.container{ width:min(1200px,92%); margin:0 auto; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width: 900px){ .grid3{ grid-template-columns:1fr; } }

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: linear-gradient(90deg, rgba(255,255,255,.7), rgba(255,255,255,.25));
  border-bottom:1px solid rgba(255,255,255,.4);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.4px; }
.brand-badge{ font-family:Pacifico,cursive; padding:6px 10px; border-radius:12px; color:#fff; background:var(--grad2); box-shadow:0 6px 18px rgba(91,134,229,.35) }
.brand-sub{ opacity:.7; font-weight:600 }
nav a{ text-decoration:none; color:#111827; padding:10px 14px; border-radius:999px; font-weight:600; }
nav a:hover{ background:rgba(0,0,0,.06) }

/* Hero */
.hero{ position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center; padding: clamp(28px, 4vw, 44px) 0; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr; } }
.title{
  font-size:clamp(38px,6.4vw,68px); line-height:1.05; margin:0 0 10px; font-weight:800; letter-spacing:-.5px;
  background: conic-gradient(from 0deg, #ff6b6b, #f7b733, #36d1dc, #5b86e5, #a1ffce, #faffd1, #f6d365, #fda085, #ff6b6b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.1));
}
.sub{ color:#1f2937; font-size:clamp(16px,2.6vw,22px); }
.cta-wrap{ margin:16px 0 8px; display:flex; flex-wrap:wrap; gap:12px; }
.btn{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; padding:14px 20px; border-radius:16px; font-weight:700; border:1px solid transparent; cursor:pointer; }
.btn.primary{ background:var(--grad1); color:#111; box-shadow:0 10px 25px rgba(247,183,51,.35) }
.btn.ghost{ background:#fff; color:#0b1021; border:2px solid #e5e7eb }
.badges{ list-style:none; padding:0; margin:10px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.chip{ background:rgba(255,255,255,.75); padding:8px 12px; border-radius:999px; border:1px solid rgba(0,0,0,.08); font-weight:600; }

/* Kerala scene */
.scene{
  position:relative; aspect-ratio:1.1/1; border-radius:24px; overflow:hidden;
  background: linear-gradient(180deg,#a7f3d0 0%, #06b6d4 60%, #0ea5e9 100%);
  box-shadow:0 18px 60px rgba(6,182,212,.35);
}
.sun{ position:absolute; top:8%; left:10%; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff7, #FDE68A 20%, #F59E0B 60%, #EA580C 100%);
  animation: floatSun 10s ease-in-out infinite;
}
@keyframes floatSun{50%{transform:translateY(10px)}}
.wave{ position:absolute; left:0; width:140%; height:40%; bottom:-6%;
  background: radial-gradient(60% 80% at 50% 10%, rgba(255,255,255,.9), rgba(255,255,255,.5) 60%, transparent 61%),
              linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
  border-radius:50% 50% 0 0; transform:rotate(-2deg); box-shadow:0 -10px 40px rgba(255,255,255,.6) inset;
}
.houseboat{ position:absolute; bottom:20%; left:8%; width:60%; height:34%;
  background:linear-gradient(180deg,#f59e0b,#b45309); border-radius:40px 40px 20px 20px;
  transform:rotate(-1deg); box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.boat-top{ position:absolute; inset:8% 8% auto 8%; height:38%; background:#78350f; border-radius:28px; box-shadow:inset 0 8px 0 rgba(0,0,0,.2) }
.window{ position:absolute; bottom:26%; width:12%; height:18%; background:#fde68a; border-radius:10px; box-shadow:0 0 0 4px #a16207 inset }
.window.w1{ left:14% } .window.w2{ left:30% } .window.w3{ left:46% }

/* Coconut tree */
.coconut{ position:absolute; bottom:46%; right:6%; transform-origin:bottom center; animation:sway 3.6s ease-in-out infinite }
@keyframes sway{50%{transform:rotate(3deg)}}
.trunk{ width:16px; height:160px; background:#a16207; border-radius:8px; transform:skewX(-6deg); margin:0 auto; box-shadow:inset 0 -10px 0 #78350f }
.leaf-wrap{ position:absolute; bottom:160px; right:-16px; display:grid; gap:6px }
.leaf{ width:120px; height:40px; background: radial-gradient(60% 150% at 0% 50%, #16a34a, #22c55e); border-radius:40px; transform-origin:left center }
.leaf.l1{ transform:rotate(-8deg) } .leaf.l2{ transform:rotate(8deg) } .leaf.l3{ transform:rotate(24deg) }

/* OFFERS — 4 cards */
.offers{ padding: 10px 0 34px; }
.section-title{
  text-align:center; font-size: clamp(24px,4.6vw,36px);
  margin: 6px 0 16px; font-weight:800;
  background: conic-gradient(from 0deg,#f59e0b,#ef4444,#22c55e,#06b6d4,#8b5cf6,#f59e0b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.options-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px){ .options-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 680px){ .options-grid{ grid-template-columns: 1fr;} }

.option-card{
  position:relative; border-radius:22px; padding:20px; color:#0b1021;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.82));
  border: 1px solid rgba(255,255,255,.6); box-shadow: 0 14px 34px rgba(0,0,0,.08);
  overflow:hidden;
}
.option-card:before{
  content:""; position:absolute; inset:-1px; border-radius:24px; padding:1px;
  background: conic-gradient(from 0deg, #ff6b6b, #f7b733, #36d1dc, #5b86e5, #a1ffce, #f6d365, #ff6b6b);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite: exclude; pointer-events:none; opacity:.65;
}
.option-head h3{ margin:6px 0 6px; font-size:22px; }
.option-sub{ margin:0 0 10px; color:#334155 }
.option-tag{
  display:inline-block; font-size:12px; padding:6px 10px; border-radius:999px; color:#111;
  background:var(--grad3); border:1px solid rgba(0,0,0,.06); font-weight:700; letter-spacing:.2px;
}
.option-points{ margin:0 0 12px; padding-left:18px; }
.option-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.option-card.op1 .option-tag{ background:var(--grad1) }
.option-card.op2 .option-tag{ background:var(--grad2) }
.option-card.op3 .option-tag{ background:linear-gradient(135deg,#fca5a5,#f97316) }
.option-card.op4 .option-tag{ background:linear-gradient(135deg,#fde68a,#f59e0b) }

/* Perks row under hero */
.perks-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:10px; }
.perk{ background:var(--grad2); color:#fff; padding:16px; border-radius:18px; font-weight:700; text-align:center; box-shadow:0 12px 28px rgba(91,134,229,.35) }
@media (max-width: 900px){ .perks-grid{ grid-template-columns:1fr; } }

/* How cards */
.how{ padding:32px 0 40px; }
.card{
  position:relative; border-radius:22px; padding:20px; color:#0b1021;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
  border: 1px solid rgba(255,255,255,.6); box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.card:before{
  content:""; position:absolute; inset:-1px; border-radius:24px; padding:1px;
  background: conic-gradient(from 0deg, #ff6b6b, #f7b733, #36d1dc, #5b86e5, #a1ffce, #f6d365, #ff6b6b);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite: exclude; pointer-events:none; opacity:.6;
}
.card h3{ margin:4px 0 10px; font-size:22px }

/* Footer */
.site-footer{ background:linear-gradient(90deg,#fdf2f8,#eef2ff,#ecfeff); border-top:1px solid rgba(0,0,0,.05); margin-top:36px; padding:24px 0 36px; }
.fgrid{ display:grid; grid-template-columns:1.2fr 1fr; gap:18px; align-items:start; }
.copy{ grid-column:1/-1; color:#475569; margin-top:10px; font-size:14px; opacity:.8 }
@media (max-width: 900px){ .fgrid{ grid-template-columns:1fr; } }

/* Confetti pieces */
.confetti{ position:fixed; left:0; top:0; width:100%; height:100%; pointer-events:none; overflow:hidden; z-index:5 }
.piece{ position:absolute; width:10px; height:18px; background:red; opacity:.95; transform:translate3d(0,0,0) rotate(0deg); animation:fall linear forwards; }
@keyframes fall{ to{ transform: translate3d(var(--x), 110vh, 0) rotate(720deg); opacity:1 } }
/* Shared styles for buy pages */

.offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 3rem auto;
}

.offer-card {
  padding: 2rem;
  border-radius: 1rem;
  color: #fff;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.offer-card h2 { margin-bottom: 1rem; }
.offer-card p { margin-bottom: 1.5rem; }
.offer-card .btn { background: rgba(255,255,255,0.9); color:#000; }

/* Theme colors */
.offer-card.gold { background: linear-gradient(135deg,#FFD700,#FFA500); }
.offer-card.red { background: linear-gradient(135deg,#FF4B2B,#FF416C); }
.offer-card.teal { background: linear-gradient(135deg,#20c997,#0dcaf0); }
.offer-card.purple { background: linear-gradient(135deg,#8e2de2,#4a00e0); }

.hero.small-hero { padding: 3rem 0; background: #f5f5f5; }
.gold-hero { background: linear-gradient(135deg,#FFD700,#FFA500); color: #000; }

.buy-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 3rem auto;
}
.buy-info { flex: 1 1 50%; }
.buy-info ul { padding-left: 1.2rem; }
.buy-box {
  flex: 1 1 40%;
  background: #fff;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  text-align: center;
}
.buy-box h3 { margin-bottom: 1.5rem; }
.buy-box .btn.big { font-size: 1.2rem; padding: 1rem 2rem; }
/* THEME HEROES */
.red-hero   { background: linear-gradient(135deg,#FF4B2B,#FF416C); color:#fff; }
.teal-hero  { background: linear-gradient(135deg,#20c997,#0dcaf0); color:#001b1f; }
.purple-hero{ background: linear-gradient(135deg,#8e2de2,#4a00e0); color:#fff; }
.gold-hero  { background: linear-gradient(135deg,#FFD700,#FFA500); color:#000; } /* already used */

/* Hero sizes */
.hero .hero-inner { padding: 3rem 0; }
.hero .hero-inner h1 { margin: 0 0 .4rem; }
.hero .hero-inner .sub { margin: 0; }

/* Countdown widget */
.countdown-wrap{ margin-top: 10px; display:inline-block; padding:10px 14px; border-radius:12px; background: rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35) }
.cd-label{ font-size:12px; opacity:.9; margin-bottom:4px; text-align:center }
.cd{ font-weight:800; font-size: clamp(18px, 4.6vw, 28px); letter-spacing: .5px; }

/* Notes */
.note{
  margin-top: 10px; font-size: .95rem; color:#334155;
  background: #fff; border:1px dashed #e5e7eb; padding:10px 12px; border-radius:10px;
}

/* Buy details layout (already defined earlier, these ensure consistency) */
.buy-detail { display:flex; flex-wrap:wrap; gap:2rem; margin: 2.2rem auto 3.2rem; }
.buy-info   { flex:1 1 50%; }
.buy-info ul{ padding-left: 1.2rem; }
.buy-box    { flex:1 1 40%; background:#fff; padding:2rem; border-radius:1rem; box-shadow:0 5px 15px rgba(0,0,0,0.1); text-align:center; }
.buy-box h3 { margin-bottom: 1.5rem; }
.buy-box .btn.big { font-size:1.2rem; padding:1rem 2rem; }

/* Active nav */
nav a.active { background: rgba(0,0,0,.06); border-radius:999px; }