:root {
  --pastel-green: #c8f5d2;
  --pastel-pink: #ffd5e5;
  --pastel-orange: #ffd9b3;
  --ink: #1a1a1a;
  --accent: #ff9a76;
  --bg: #f9fafb;
  --card: #ffffff;
  --muted: #6b7280;
  --radius: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; }
body { min-height:100vh; display:flex; flex-direction:column; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--ink); background: var(--bg); }
main { flex: 1; display:block; }
a { color: #0f766e; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 1rem; }

header.site-header {
  position: sticky; top:0; z-index: 50;
  backdrop-filter: saturate(1.2) blur(8px);
  background: linear-gradient(90deg, var(--pastel-green), var(--pastel-pink), var(--pastel-orange));
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem 1rem;}
.brand { display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.3px; font-size:1.1rem; text-decoration:none; }
.brand:hover { text-decoration:none; }
.brand-logo { width: 40px; height: 40px; border-radius: 24px; box-shadow: var(--shadow); background: #fff; }
.brand-title { position: relative; display:inline-block; }
.brand-title::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:#111; transform:scaleX(0); transform-origin:left; transition: transform .25s ease; }
.brand:hover .brand-title::after { transform:scaleX(1); }

nav.primary { display:none; gap:.75rem; flex-wrap:wrap; }
nav.primary a { padding:.5rem .75rem; border-radius: 999px; background: rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.05); }
nav.primary a:hover { background: #fff; }

button.burger {
  border:1px solid rgba(0,0,0,.06); background: linear-gradient(135deg, var(--pastel-green), var(--pastel-pink));
  border-radius: 14px; padding:.55rem .6rem; box-shadow: var(--shadow); width:44px; height:44px; display:grid; place-items:center;
}
.burger-lines, .burger-lines::before, .burger-lines::after {
  display:block; width:20px; height:2px; background:#111; border-radius:2px; position:relative; transition: transform .25s ease, opacity .2s ease;
}
.burger-lines::before, .burger-lines::after { content:""; position:absolute; left:0; }
.burger-lines::before { top:-6px; }
.burger-lines::after { top:6px; }
.burger-open .burger-lines { transform: rotate(45deg); }
.burger-open .burger-lines::before { transform: rotate(90deg) translateX(-6px); top:0; }
.burger-open .burger-lines::after { opacity:0; }

.mobile-nav { position: fixed; inset:0; background: rgba(0,0,0,.35); display:block; opacity:0; pointer-events:none; transition: opacity .25s ease; z-index: 100; }
.mobile-nav .sheet {
  background:#fff; position:absolute; left:0; top:0; bottom:0; width: 85%; max-width: 420px; padding: 1rem; overflow:auto;
  border-top-right-radius: 20px; border-bottom-right-radius:20px; transform: translateX(-100%); transition: transform .3s ease;
}
.mobile-nav.is-open { opacity:1; pointer-events:auto; }
.mobile-nav.is-open .sheet { transform: translateX(0); }
.mobile-nav a { display:block; padding: .9rem 1rem; border-radius: 12px; margin:.25rem 0; background: #f3f4f6; }
.mobile-nav .close {
  position:absolute; right:1rem; top:1rem;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  width:44px; height:44px; padding:0;
  display:grid; place-items:center;
}
.close-lines {
  position:relative;
  width:20px;
  height:20px;
  display:block;
}
.close-lines::before,
.close-lines::after {
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:20px;
  height:2px;
  background:#111;
  border-radius:2px;
  transform-origin:center;
}
.close-lines::before {
  transform:translateY(-50%) rotate(45deg);
}
.close-lines::after {
  transform:translateY(-50%) rotate(-45deg);
}

.hero { padding: 1.5rem 0 1rem; }
.hero h1 { font-size: clamp(1.35rem, 3vw, 2rem); margin:.5rem 0; }
.hero p { color: var(--muted); margin:0; }

.grid { display:grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } nav.primary { display:flex; } button.burger{ display:none; } }
@media (min-width: 1280px) { .grid { grid-template-columns: repeat(4, 1fr); } }

.card {
  position:relative; background: var(--card); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow); display:flex; flex-direction:column;
  border: 1px solid rgba(0,0,0,.06);
}
.card-thumb { width:100%; aspect-ratio: 16/9; object-fit: cover; background:#fff; }
.card-body { padding: .9rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.card h3 { margin:0; font-size: 1.05rem; line-height:1.25; }
.card .meta { display:flex; align-items:center; justify-content:space-between; color: var(--muted); font-size:.85rem; }
.card .excerpt { color:#374151; font-size:.95rem; }

.badge {
  position:absolute; top:.75rem; left:.75rem;
  background: linear-gradient(135deg, var(--pastel-pink), var(--pastel-orange));
  color:#111; font-weight:700; border-radius: 999px; padding:.35rem .6rem; box-shadow: var(--shadow);
  border:1px solid rgba(0,0,0,.06); font-size:.8rem;
}
.badge::after { content:" DEAL "; }

.pagination { display:flex; gap:.4rem; align-items:center; justify-content:center; margin: 1.25rem 0 2rem; }
.pagination a, .pagination span {
  display:inline-flex; min-width: 40px; height: 40px; align-items:center; justify-content:center; border-radius:10px;
  background:#fff; border:1px solid #e5e7eb; box-shadow: var(--shadow);
}
.pagination .active { background: var(--pastel-green); border-color: #c7f7d4; }

article { background:#fff; border-radius: var(--radius); box-shadow: var(--shadow); border:1px solid rgba(0,0,0,.06); overflow:hidden; }
article header img { width:100%; aspect-ratio: 16/9; object-fit: cover; }
article .content { padding: 1rem; }
article .content h1 { margin-top: 0.5rem; }
.prose p { line-height:1.7; color:#1f2937; }
.prose h2, .prose h3 { margin-top:1.5rem; }

.promo-block { margin: 1rem 0; padding: 1rem; border:2px dashed var(--pastel-orange); border-radius: 16px; background: #fff7ed; }
.promo-list { display:grid; grid-template-columns:1fr; gap:.75rem; }
.promo-code { display:flex; align-items:center; justify-content:space-between; gap:.75rem; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:.75rem .9rem; }
.code-mask { filter: blur(5px); user-select:none; pointer-events:none; }
.reveal-btn { border:0; padding:.6rem .8rem; border-radius:10px; background: var(--pastel-pink); box-shadow: var(--shadow); font-weight:700; }
.reveal-btn:hover { opacity:.9; cursor:pointer; }

footer.site-footer { background:#fff; border-top: 1px solid #e5e7eb; }
.footer-inner { display:grid; grid-template-columns:1fr; gap:1rem; padding:1.25rem; }
.footer-col h4 { margin:.25rem 0; }
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col li { margin:.35rem 0; }
@media (min-width: 768px) { .footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.smallprint { font-size:.85rem; color: var(--muted); padding: .5rem 1.25rem 1.5rem; }

.notice { background:linear-gradient(90deg, var(--pastel-green), var(--pastel-pink)); padding:.5rem 1rem; text-align:center; font-size:.9rem; }

/* Maintenance cover */
body.maintenance-mode {
  background: radial-gradient(circle at top left, rgba(200, 245, 210, 0.8), transparent 55%),
              radial-gradient(circle at bottom right, rgba(255, 213, 229, 0.7), transparent 50%),
              var(--bg);
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
}

body.preview-mode {
  background: var(--bg);
  align-items: stretch;
  justify-content: flex-start;
}

.maintenance {
  position: relative;
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.maintenance-card {
  position: relative;
  width: 100%;
  padding: 2.75rem clamp(1.5rem, 6vw, 3rem);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 32px;
  box-shadow: 0 30px 60px rgba(31, 41, 55, 0.15);
  backdrop-filter: blur(14px);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.maintenance-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.maintenance-logo {
  width: clamp(64px, 12vw, 88px);
  height: clamp(64px, 12vw, 88px);
  border-radius: 24px;
  box-shadow: var(--shadow);
  background: #fff;
}

.maintenance-brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.maintenance-name {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 800;
}

.maintenance-tagline {
  font-size: 0.95rem;
  color: var(--muted);
}

main.maintenance-content {
  flex: initial;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.maintenance-content h1 {
  font-size: clamp(2rem, 6vw, 2.8rem);
  margin: 0;
}

.maintenance-content p {
  margin: 0;
  font-size: 1.05rem;
  color: #374151;
  max-width: 32ch;
}

.maintenance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.maintenance-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pastel-green), var(--pastel-pink));
  font-weight: 700;
  color: #111;
  box-shadow: var(--shadow);
}

.maintenance-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.maintenance-link {
  font-weight: 600;
  color: #0f766e;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: rgba(15, 118, 110, 0.08);
}

.maintenance-link:hover {
  text-decoration: none;
  background: rgba(15, 118, 110, 0.15);
}

.maintenance-footer {
  font-size: 0.95rem;
  color: var(--muted);
}

.maintenance-footer a {
  font-weight: 600;
}

.maintenance-spark {
  position: absolute;
  inset: auto;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 154, 118, 0.35), rgba(255, 213, 229, 0));
  filter: blur(0px);
  transform: translate(45%, -35%);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 640px) {
  body.maintenance-mode {
    padding: 1.75rem 1rem;
  }

  .maintenance-card {
    padding: 2.25rem 1.5rem;
    border-radius: 24px;
  }

  .maintenance-spark {
    width: 320px;
    height: 320px;
    transform: translate(35%, -20%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .maintenance-btn:hover {
    transform: none;
  }
}