:root {
  --leaf: #1DBF73;
  --leaf-deep: #0F9F5C;
  --leaf-mid: #34D399;
  --maize: #D4B038;
  --maize-dark: #B8941A;
  --coral: #E07A5F;
  --sky: #3D8BDB;
  --mist: #FFFFFF;
  --mist-deep: #F3FBF7;
  --ink: #143028;
  --muted: #4A6358;
  --white: #ffffff;
  --radius: 16px;
  --shadow: 0 10px 28px rgba(15, 159, 92, 0.08);
  --focus: 0 0 0 3px rgba(29, 191, 115, 0.28);
  --font-display: "Outfit", "Segoe UI", sans-serif;
  --font-body: "Outfit", "Segoe UI", system-ui, sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --grad-text: linear-gradient(110deg, #0B8A4E 0%, #0F9F5C 30%, #0D9488 60%, #B8941A 100%);
  --grad-text-on-dark: linear-gradient(110deg, #FFFFFF 0%, #FFF7CC 28%, #FFD666 55%, #FFE9A0 78%, #FFFFFF 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  background:
    radial-gradient(ellipse 48% 32% at 100% 0%, rgba(52,211,153,.1), transparent 55%),
    radial-gradient(ellipse 42% 28% at 0% 18%, rgba(29,191,115,.08), transparent 50%),
    #FFFFFF;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.text-gradient {
  background: var(--grad-text);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradShift 5s ease-in-out infinite;
  font-weight: 800;
  /* fallback jika clip tidak support */
  -webkit-text-fill-color: transparent;
}
/* Di atas hijau cerah: gradien putih–emas biar tetap terbaca */
.hero .text-gradient,
.cta-band .text-gradient,
.cta-band-vivid .text-gradient {
  background: var(--grad-text-on-dark);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(7, 60, 36, 0.45)) drop-shadow(0 0 1px rgba(0,0,0,.2));
}
.price-now.text-gradient {
  background: linear-gradient(110deg, #0B8A4E 0%, #1DBF73 45%, #0D9488 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .text-gradient { animation: none; background-position: 0% 50%; }
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(1100px, calc(100% - 1.5rem)); margin: 0 auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: none; box-shadow: var(--focus); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid rgba(29, 191, 115, 0.12);
}
.site-header.is-scrolled { box-shadow: 0 4px 16px rgba(10, 61, 44, 0.08); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 0; gap: .75rem;
}
.brand { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(145deg, var(--leaf-mid), var(--leaf-deep));
  color: white; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: .78rem;
  letter-spacing: .02em;
}
.brand-text {
  display: flex; flex-direction: column; line-height: 1.15;
  font-family: var(--font-display); min-width: 0;
}
.brand-text strong {
  font-size: .92rem; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-text em {
  font-style: normal; font-weight: 800; color: var(--maize-dark); font-size: .95rem;
}
.site-nav { display: flex; gap: 1rem; flex-wrap: wrap; font-weight: 600; font-size: .92rem; }
.site-nav a {
  position: relative;
  transition: color .2s ease, transform .2s ease;
}
.site-nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--leaf); transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.site-nav a:hover { color: var(--leaf); transform: translateY(-1px); }
.site-nav a:hover::after { transform: scaleX(1); }
.nav-muted { opacity: .55; }
.nav-toggle {
  display: none; width: 42px; height: 42px; border: 1px solid rgba(20,107,74,.18);
  border-radius: 11px; background: #fff; cursor: pointer; padding: 0;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span {
  display: block; width: 18px; height: 2px; background: var(--leaf-deep); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.header-cta {
  display: none;
  padding: .55rem .9rem; border-radius: 10px; font-weight: 700; font-size: .88rem;
  background: linear-gradient(135deg, var(--maize), var(--maize-dark));
  color: #1A1405;
}

.hero {
  position: relative;
  min-height: min(72vh, 560px);
  display: flex;
  align-items: flex-end;
  padding: 3.5rem 0 2.5rem;
  color: var(--white);
  overflow: hidden;
}
.hero-plane { position: absolute; inset: 0; }
.hero-mesh {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 78% 18%, rgba(212,176,56,.28), transparent 55%),
    radial-gradient(ellipse 60% 50% at 12% 82%, rgba(52,211,153,.4), transparent 50%),
    linear-gradient(155deg, #0F9F5C 0%, #1DBF73 48%, #34D399 100%);
}
.hero-pattern {
  position: absolute; inset: 0; opacity: .1;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.55) 1px, transparent 0);
  background-size: 22px 22px;
}
.hero-content { position: relative; z-index: 1; max-width: 680px; color: #fff; }
.hero-brand {
  margin: 0 0 .7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: 0.02em;
  color: #F3E3A0;
}
.hero h1 {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.85rem, 5.5vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 .85rem;
  max-width: 16ch;
}
.hero-lead {
  margin: 0;
  max-width: 44ch;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255,255,255,.94);
}
.hero-deal {
  margin: 1rem 0 0;
  padding: .9rem 1rem;
  border-radius: 16px;
  background: rgba(8, 40, 28, .42);
  border: 1px solid rgba(255, 214, 102, .35);
  backdrop-filter: blur(6px);
  max-width: 420px;
}
.hero-deal-prices {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem .65rem;
}
.hero-deal-was {
  font-size: .95rem; font-weight: 700; text-decoration: line-through;
  color: rgba(255,255,255,.72);
}
.hero-deal-off {
  font-size: .72rem; font-weight: 800; padding: .15rem .45rem;
  border-radius: 999px; background: #ffe0d6; color: #b83d1a;
}
.hero-deal-now {
  font-size: 1.55rem; font-weight: 800; color: #ffe08a; line-height: 1.1;
}
.hero-deal-now small {
  display: inline-block; margin-left: .3rem; font-size: .75rem;
  font-weight: 700; color: rgba(255,255,255,.85);
}
.hero-deal-note {
  margin: .45rem 0 .75rem; font-size: .88rem; font-weight: 650;
  color: rgba(255,255,255,.92); line-height: 1.4;
}
.hero-deal-cta { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-deal-cta .btn-light {
  background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.4);
}

.fomo-deal {
  background:
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(224,122,95,.16), transparent 55%),
    linear-gradient(180deg, #fff 0%, #f3faf6 50%, #fff 100%);
}
.fomo-eyebrow { color: #c2410c !important; }
.fomo-deal-grid {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 1.25rem; align-items: start;
}
.fomo-price-card {
  background: linear-gradient(165deg, #fff 0%, #eef9f4 50%, #fff6ef 100%);
  border: 2px solid rgba(15,159,92,.28);
  border-radius: 18px; padding: 1.25rem 1.35rem;
  box-shadow: 0 16px 40px rgba(15,159,92,.12);
  display: grid; gap: .65rem;
}
.fomo-badge {
  width: fit-content; font-size: .72rem; font-weight: 800;
  background: rgba(201,162,39,.22); color: #7a5f0a;
  padding: .25rem .55rem; border-radius: 999px;
}
.fomo-price-card h3 { margin: 0; font-size: 1.25rem; }
.fomo-price-stack { display: grid; gap: .25rem; justify-items: start; }
.fomo-was {
  font-size: 1rem; font-weight: 700; color: #8a9790; text-decoration: line-through;
}
.fomo-was small { font-weight: 600; text-decoration: none; display: inline; margin-left: .25rem; color: #8a9790; }
.fomo-off {
  font-size: .75rem; font-weight: 800; padding: .15rem .5rem;
  border-radius: 999px; background: #ffe0d6; color: #b83d1a;
}
.fomo-now {
  font-size: 2rem; font-weight: 800; color: var(--leaf-mid); line-height: 1.1;
}
.fomo-now small {
  display: block; font-size: .85rem; font-weight: 700; color: var(--muted); margin-top: .15rem;
}
.fomo-deal-line {
  margin: 0; font-size: .9rem; font-weight: 700; color: #9a3412; line-height: 1.4;
}
.fomo-link {
  text-align: center; font-weight: 700; font-size: .9rem; color: var(--leaf-deep);
}
.fomo-feat-panel {
  background: #fff; border-radius: 18px; padding: 1rem 1.15rem;
  border: 1px solid rgba(20,107,74,.12);
}
.fomo-feat-title { margin: 0 0 .65rem; font-weight: 800; font-size: .95rem; }
.fomo-feat-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.fomo-feat-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: .75rem;
  padding: .55rem 0; border-bottom: 1px dashed #d5e0d8; font-size: .9rem;
}
.fomo-feat-name { font-weight: 650; color: var(--ink); line-height: 1.3; }
.fomo-feat-prices { white-space: nowrap; font-weight: 700; }
.fomo-feat-prices s { color: #8a9790; margin-right: .4rem; font-weight: 600; }
.fomo-feat-prices em { font-style: normal; font-weight: 800; color: var(--leaf-mid); }
.fomo-feat-total {
  display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
  margin-top: .75rem; padding: .75rem .85rem; border-radius: 12px;
  background: #eef9f4; font-weight: 700;
}
.fomo-feat-total s { color: #8a9790; margin-right: .35rem; }
.fomo-addon-row {
  margin-top: 1.25rem; display: grid;
  grid-template-columns: 1.4fr auto auto; gap: 1rem; align-items: center;
  padding: 1rem 1.15rem; border-radius: 16px;
  background: #fff7ed; border: 1px solid rgba(194,65,12,.18);
}
.fomo-addon-row p { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }
.fomo-addon-price { display: grid; justify-items: end; gap: .1rem; text-align: right; }
.fomo-addon-price s { color: #8a9790; font-weight: 600; }
.fomo-addon-price span { font-size: 1.25rem; font-weight: 800; color: #c2410c; }
.fomo-addon-price small { font-size: .75rem; font-weight: 700; }
.fomo-compare {
  margin-top: 1.25rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem;
}
.fomo-compare-item {
  padding: .9rem 1rem; border-radius: 14px; background: #fff;
  border: 1px solid rgba(20,107,74,.1);
}
.fomo-compare-item strong { display: block; margin-bottom: .3rem; }
.fomo-compare-item p { margin: 0; font-size: .9rem; color: var(--muted); line-height: 1.4; }
.fomo-compare-item s { color: #8a9790; }
.fomo-compare-item em { font-style: normal; font-weight: 800; color: var(--leaf-mid); }
.fomo-compare-hot {
  background: linear-gradient(135deg, #fff7ed, #fff); border-color: rgba(194,65,12,.25);
}
.fomo-fear {
  margin: 1.1rem 0 0; text-align: center; font-weight: 800;
  color: #9a3412; font-size: .95rem; line-height: 1.45;
}
.print-magnet-benefits em { font-style: normal; font-weight: 800; color: #c2410c; }
@media (max-width: 900px) {
  .fomo-deal-grid { grid-template-columns: 1fr; }
  .fomo-addon-row { grid-template-columns: 1fr; }
  .fomo-addon-price { justify-items: start; text-align: left; }
  .fomo-compare { grid-template-columns: 1fr; }
}

.hero-search {
  display: flex; align-items: center; gap: .35rem;
  margin-top: 1.4rem;
  padding: .35rem .35rem .35rem .9rem;
  background: rgba(255,255,255,.97);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  max-width: 520px;
}
.hero-search .search-icon { color: var(--leaf); flex-shrink: 0; }
.hero-search input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  padding: .75rem .45rem; font: inherit; font-size: 1rem; color: var(--ink);
}
.hero-search input:focus { outline: none; }
.hero-search button, .btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1.05rem; border-radius: 11px; border: none; cursor: pointer;
  font: inherit; font-weight: 700; transition: transform .15s ease, filter .15s ease;
  overflow: hidden; isolation: isolate; z-index: 0;
  text-decoration: none;
}
.hero-search button, .btn-accent {
  background: linear-gradient(135deg, #FFD666, #C9A227);
  color: #1A1405;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, #34D399, #0F9F5C);
  color: #fff;
}
.btn-block { width: 100%; }

/* Kilau bergeser + glow mengelilingi */
.btn-primary,
.btn-accent,
.header-cta,
.hero-search button,
.btn-pulse {
  animation: btnGlow 2.4s ease-in-out infinite;
}
.btn-primary::after,
.btn-accent::after,
.header-cta::after,
.hero-search button::after,
.btn-pulse::after,
.btn-wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg,
    transparent 32%,
    rgba(255,255,255,.45) 50%,
    transparent 68%);
  background-size: 220% 100%;
  animation: btnShine 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes btnGlow {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(52,211,153,.0),
      0 6px 18px rgba(15,159,92,.18);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(52,211,153,.28),
      0 0 22px rgba(255,214,102,.35),
      0 8px 22px rgba(15,159,92,.22);
  }
}
.btn-accent,
.header-cta,
.hero-search button {
  animation-name: btnGlowGold;
}
@keyframes btnGlowGold {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(255,214,102,.0),
      0 6px 18px rgba(201,162,39,.2);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(255,214,102,.4),
      0 0 24px rgba(255,214,102,.45),
      0 8px 22px rgba(201,162,39,.25);
  }
}
@keyframes btnShine {
  0% { background-position: 130% 0; opacity: 0; }
  20% { opacity: 1; }
  55% { background-position: -30% 0; opacity: .85; }
  100% { background-position: -50% 0; opacity: 0; }
}
@media (hover: hover) {
  .hero-search button:hover, .btn:hover { transform: translateY(-1px); filter: brightness(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-accent, .header-cta, .hero-search button, .btn-pulse,
  .btn-primary::after, .btn-accent::after, .header-cta::after, .hero-search button::after,
  .btn-pulse::after, .btn-wa::after { animation: none !important; }
}

.trust-strip {
  background: var(--white);
  border-bottom: 1px solid rgba(20,107,74,.08);
  padding: 1rem 0;
}
.trust-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
.trust-item { display: flex; align-items: center; gap: .65rem; }
.trust-item svg { color: var(--leaf); flex-shrink: 0; }
.trust-item strong {
  display: block; font-family: var(--font-display); font-size: .95rem; font-weight: 700;
}
.trust-item span { color: var(--muted); font-size: .85rem; font-weight: 500; }

.section { padding: 3.25rem 0; }
.section-muted { background: rgba(255,255,255,.55); }
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 .4rem;
}
.section-head p { color: var(--muted); max-width: 52ch; margin: 0; }

/* CSS-only shop rail — no Swiper JS */
.shop-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 300px);
  gap: 1rem;
  margin-top: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: .25rem;
  padding: .25rem .25rem 1.25rem;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.shop-rail::-webkit-scrollbar { height: 6px; }
.shop-rail::-webkit-scrollbar-thumb {
  background: rgba(20,107,74,.25); border-radius: 99px;
}

.shop-card {
  display: block;
  scroll-snap-align: start;
  background: white;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  content-visibility: auto;
  contain-intrinsic-size: 320px;
}
@media (hover: hover) {
  .shop-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(10,61,44,.14); }
  .shop-card { transition: transform .2s ease, box-shadow .2s ease; }
}
.shop-card-cover { height: 140px; background: var(--mist-deep) center/cover; }
.shop-card-body { padding: 1.05rem 1.1rem 1.2rem; }
.shop-card-logo {
  width: 52px; height: 52px; border-radius: 12px; object-fit: cover;
  border: 3px solid white; margin-top: -38px; margin-bottom: .6rem; box-shadow: var(--shadow);
}
.shop-card h3 {
  margin: 0 0 .25rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 750;
}
.shop-card p { margin: 0; color: var(--muted); font-size: .92rem; }
.shop-card-cta {
  display: inline-block; margin-top: .85rem; color: var(--leaf); font-weight: 700;
}

.feature-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 1.5rem;
}
.feature {
  background: white; border-radius: var(--radius);
  padding: 1.25rem; box-shadow: var(--shadow);
}
.feature-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(20,107,74,.1); color: var(--leaf); margin-bottom: .75rem;
}
.feature h3 {
  margin: 0 0 .35rem;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 1.02rem;
}
.feature p { margin: 0; color: var(--muted); font-size: .95rem; }

.price-card-hero { max-width: 520px; margin: 0 auto 1.5rem; text-align: center; }
.price-card-hero .price-deal { justify-items: center; }
.feature-value-list {
  display: grid; gap: .65rem; max-width: 820px; margin: 0 auto;
}
.feature-value-row {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: center;
  padding: .9rem 1rem; background: #fff; border-radius: 14px;
  border: 1px solid rgba(20,107,74,.1);
}
.feature-value-row p { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }
.feature-value-row .price-deal { justify-items: end; text-align: right; }
.feature-value-total {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
  padding: 1rem 1.1rem; border-radius: 14px; background: #eef9f4;
  font-weight: 700; border: 1px solid rgba(20,107,74,.15);
}
.compare-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.compare-card {
  background: #fff; border-radius: 14px; padding: 1.1rem 1.15rem;
  border: 1px solid rgba(20,107,74,.1);
}
.compare-card h3 { margin: 0 0 .4rem; font-size: 1.02rem; }
.compare-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.plan-option-solo {
  display: block; padding: 1rem 1.1rem; border-radius: 14px;
  border: 1px solid var(--leaf); background: rgba(20,107,74,.06); margin-bottom: .75rem;
}
.reg-feature-values {
  margin: .5rem 0 0; padding: 0; list-style: none; display: grid; gap: .35rem;
}
.reg-feature-values li {
  display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  font-size: .88rem; padding: .4rem 0; border-bottom: 1px dashed #d5e0d8;
}
.reg-feature-values s { color: #8a9790; margin-right: .35rem; }
.reg-feature-values em { font-style: normal; font-weight: 800; color: var(--leaf); }
.reg-compare-hint {
  margin: .85rem 0 0; font-size: .88rem; font-weight: 650; color: #9a3412; line-height: 1.45;
}
@media (max-width: 860px) {
  .feature-value-row { grid-template-columns: 1fr; }
  .feature-value-row .price-deal { justify-items: start; text-align: left; }
  .compare-grid { grid-template-columns: 1fr; }
}

.print-magnet { background: linear-gradient(180deg, #fff 0%, #fff7ed 45%, #fff 100%); }
.print-magnet-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.5rem; align-items: center;
}
.print-magnet-frame {
  position: relative; display: block; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(194,65,12,.18); border: 1px solid rgba(194,65,12,.15);
  background: #1a120c; aspect-ratio: 3 / 4; max-height: 560px;
}
.print-magnet-frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform .4s ease;
}
.print-magnet-frame:hover img { transform: scale(1.03); }
.print-magnet-zoom {
  position: absolute; left: .75rem; right: .75rem; bottom: .75rem;
  text-align: center; font-weight: 800; font-size: .88rem; color: #1a120c;
  background: rgba(255,214,102,.95); padding: .55rem .75rem; border-radius: 999px;
}
.print-magnet-copy { display: grid; gap: .85rem; }
.print-magnet-benefits {
  margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem;
}
.print-magnet-benefits li {
  position: relative; padding: .75rem .9rem .75rem 1rem;
  background: #fff; border-radius: 12px; border: 1px solid rgba(194,65,12,.12);
  font-size: .95rem; color: var(--muted); line-height: 1.45;
}
.print-magnet-benefits strong { color: var(--ink); }
.print-magnet-fear {
  margin: 0; font-weight: 700; color: #9a3412; font-size: .92rem; line-height: 1.45;
}
.print-magnet-cta { display: flex; flex-wrap: wrap; gap: .65rem; }
@media (max-width: 860px) {
  .print-magnet-grid { grid-template-columns: 1fr; }
  .print-magnet-frame { max-height: 420px; }
}

.cta-band {
  background: linear-gradient(135deg, var(--leaf-deep), var(--leaf-mid));
  color: white; padding: 2.5rem 0;
}
.cta-band-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
}
.cta-band h2 {
  font-family: var(--font-display);
  margin: 0 0 .4rem;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
}
.cta-band p { margin: 0; opacity: .93; max-width: 48ch; }

.site-footer {
  padding: 2rem 0 calc(1.75rem + var(--safe-bottom));
  color: var(--muted);
  background: #e8eeea;
  border-top: 1px solid rgba(20,107,74,.08);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
.footer-brand { display: flex; gap: .75rem; align-items: flex-start; }
.footer-brand strong { display: block; color: var(--ink); font-size: 1rem; }
.footer-brand p { margin: .25rem 0 0; font-size: .9rem; }
.footer-links { display: grid; gap: .45rem; font-weight: 600; }
.footer-links a:hover { color: var(--leaf); }
.footer-credit p { margin: 0 0 .35rem; font-size: .88rem; }
.nestina-link {
  display: inline-block;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--leaf-deep);
  border-bottom: 2px solid var(--maize);
}
.nestina-link:hover { color: var(--leaf); }
.footer-bottom {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(20,107,74,.1);
  font-size: .88rem;
}
.footer-note { font-size: .92rem; color: #334840; margin: .35rem 0 0; font-weight: 500; }

.empty-state {
  text-align: center; padding: 2.5rem 1rem; background: white;
  border-radius: var(--radius); margin-top: 1.5rem;
}

/* Auth */
.auth-shell {
  min-height: calc(100vh - 220px);
  display: grid;
  place-items: center;
  padding: 2rem 1rem 3rem;
}
.auth-card {
  width: min(430px, 100%);
  background: var(--white);
  border-radius: 20px;
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow);
}
.auth-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .65rem; border-radius: 999px;
  background: rgba(20,107,74,.1); color: var(--leaf-deep);
  font-size: .8rem; font-weight: 700; margin-bottom: .9rem;
}
.auth-card h1 {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 800; margin: 0 0 .4rem;
}
.auth-lead { margin: 0 0 1.2rem; color: var(--muted); font-size: .95rem; }
.auth-form { display: grid; gap: .9rem; }
.auth-form label { display: grid; gap: .35rem; font-weight: 700; font-size: .9rem; }
.auth-form input {
  width: 100%; font: inherit; padding: .8rem .9rem;
  border: 1px solid #cfd9d3; border-radius: 12px; background: #fff;
}
.auth-form .password-field input { padding-right: 4.6rem; }
.auth-form input:focus {
  outline: none; border-color: var(--leaf);
  box-shadow: 0 0 0 3px rgba(20,107,74,.15);
}
.auth-foot { margin: 1rem 0 0; text-align: center; font-size: .9rem; font-weight: 600; }
.auth-foot a { color: var(--leaf); }
.alert { padding: .7rem .9rem; border-radius: 10px; margin-bottom: .9rem; font-size: .9rem; font-weight: 600; }
.alert-error { background: #ffe8e8; color: #8f1d1d; }

/* Shop catalog */
.shop-page { background: var(--shop-bg, var(--mist)); padding-bottom: calc(var(--safe-bottom) + .5rem); }
.shop-page.has-cart { padding-bottom: calc(5.5rem + var(--safe-bottom)); }
.shop-topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.shop-topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .65rem 0; min-height: 48px;
}
.shop-back { font-weight: 700; color: var(--shop-primary, var(--leaf)); white-space: nowrap; }
.shop-topbar-name {
  font-weight: 700; font-size: .92rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45vw;
}

/* Banner: show cover fully, keep text readable via shade + solid info card */
.shop-banner {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  padding: 1.5rem 0 1.25rem;
}
.shop-banner.has-cover { min-height: 340px; color: #fff; }
.shop-banner-media {
  position: absolute; inset: 0;
  background: center/cover no-repeat;
  transform: scale(1.02);
}
.shop-banner-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,28,21,.55) 0%, rgba(8,28,21,.35) 45%, rgba(8,28,21,.72) 100%),
    linear-gradient(90deg, rgba(8,28,21,.45) 0%, transparent 55%);
}
.shop-banner-fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 80% 20%, rgba(201,162,39,.28), transparent 55%),
    linear-gradient(155deg, #0F9F5C, #1DBF73 55%, #34D399);
}
.shop-banner-content { position: relative; z-index: 1; display: grid; gap: 1rem; }
.shop-identity { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.shop-logo {
  width: 84px; height: 84px; border-radius: 20px; object-fit: cover;
  border: 3px solid rgba(255,255,255,.95); box-shadow: 0 10px 28px rgba(0,0,0,.25);
  background: #fff;
}
.shop-logo-fallback {
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.8rem;
  background: linear-gradient(145deg, var(--shop-primary, var(--leaf)), #0F9F5C);
  color: #fff;
}
.shop-identity-text { min-width: 0; flex: 1; }
.shop-banner.has-cover .shop-identity-text h1,
.shop-banner.has-cover .shop-identity-text p { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.shop-banner.no-cover .shop-identity-text h1,
.shop-banner.no-cover .shop-identity-text p { color: #fff; }
.shop-badge {
  display: inline-block; padding: .22rem .6rem; border-radius: 999px;
  background: rgba(255,255,255,.18); color: #fff;
  font-size: .75rem; font-weight: 700; backdrop-filter: none;
  border: 1px solid rgba(255,255,255,.25);
}
.shop-banner h1 {
  font-family: var(--font-display);
  margin: .3rem 0;
  font-size: clamp(1.55rem, 4.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.shop-identity-text p { margin: 0; opacity: .95; max-width: 42ch; }

.shop-status-pill {
  font-size: .75rem; font-weight: 800; padding: .3rem .55rem; border-radius: 999px; white-space: nowrap;
}
.shop-status-pill.is-open { background: #d8f5e5; color: #0f6b3c; }
.shop-status-pill.is-closed { background: #ffe4e4; color: #9b1c1c; }
.shop-info-card {
  background: rgba(255,255,255,.96);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: .85rem 1rem;
  display: grid; gap: .55rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  max-width: 520px;
}
.shop-info-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: .5rem;
  align-items: start;
  font-size: .92rem;
}
.shop-info-label { color: var(--muted); font-weight: 600; }
.text-open { color: #0f6b3c; }
.text-closed { color: #9b1c1c; }
.shop-closed-note {
  margin: .15rem 0 0;
  font-size: .88rem;
  color: #7a3a12;
  background: #fff4e5;
  border-radius: 10px;
  padding: .55rem .7rem;
}

.shop-content { padding: 1.25rem 0 2.5rem; }
.shop-desc { color: var(--muted); max-width: 70ch; margin-top: 0; }
.catalog-hint {
  background: rgba(255,255,255,.7);
  border: 1px dashed rgba(20,107,74,.25);
  border-radius: 12px;
  padding: .7rem .9rem;
  margin-bottom: 1rem;
  font-size: .9rem;
  color: var(--muted);
}
.catalog-hint p { margin: 0; }

.category-tabs {
  display: flex; gap: .5rem; flex-wrap: nowrap; margin: 0 0 1.35rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: .25rem; scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs a {
  flex: 0 0 auto;
  padding: .45rem .85rem; border-radius: 999px; background: white;
  border: 1px solid rgba(0,0,0,.07); font-weight: 650; font-size: .88rem;
}
.category-tabs a.active {
  background: var(--shop-primary, var(--leaf));
  color: var(--shop-text-on-primary, white);
}

.product-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-card {
  background: white; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.product-image-wrap {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  border: 0; padding: 0; cursor: zoom-in; background: var(--mist-deep); width: 100%;
}
.product-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.product-badge {
  position: absolute; top: .55rem; left: .55rem;
  background: var(--shop-accent, var(--maize));
  color: var(--shop-text-on-accent, #1A1405);
  padding: .18rem .45rem; border-radius: 999px; font-size: .7rem; font-weight: 700;
}
.product-soldout {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,.45); color: white; font-weight: 800; letter-spacing: .05em;
}
.product-body {
  padding: .75rem .8rem .9rem;
  display: flex; flex-direction: column; flex: 1;
}
.product-cat { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.product-body h3 { margin: .2rem 0; font-size: .95rem; font-family: var(--font-display); font-weight: 750; line-height: 1.25; }
.product-body p {
  margin: 0 0 .55rem; color: var(--muted); font-size: .82rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-price { display: flex; align-items: baseline; gap: .35rem; margin-bottom: .65rem; flex-wrap: wrap; }
.price-old { text-decoration: line-through; color: var(--muted); font-size: .8rem; }
.price-new { font-weight: 800; color: var(--shop-primary, var(--leaf)); font-size: .98rem; }
.product-actions { display: grid; grid-template-columns: 1fr auto; gap: .4rem; margin-top: auto; }
.shop-page.multi-cart .product-actions { grid-template-columns: 1fr; }
.shop-page.multi-cart [data-wa-single] { display: none !important; }
.btn-ghost {
  background: var(--shop-primary-soft, rgba(20,107,74,.12));
  color: var(--shop-primary, var(--leaf));
  border-radius: 11px; padding: .65rem .5rem; font-size: .8rem;
}
.btn-ghost.is-on { background: var(--shop-primary, var(--leaf)); color: #fff; }
.btn-wa {
  background: #25D366; color: white; border-radius: 11px;
  padding: .65rem .75rem; font-size: .8rem; text-align: center;
}
.btn-disabled { width: 100%; margin-top: auto; background: #ddd; color: #666; }
.btn-lg { padding: 1rem 1.1rem; font-size: 1rem; }

.cart-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: .65rem .85rem calc(.65rem + var(--safe-bottom));
  background: rgba(255,255,255,.97);
  border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 -8px 24px rgba(0,0,0,.08);
}
.cart-bar-inner {
  width: min(1100px, 100%); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.cart-bar-info { display: flex; flex-direction: column; gap: .15rem; }
.cart-clear {
  border: 0; background: none; color: var(--muted); font: inherit; font-size: .8rem;
  font-weight: 600; cursor: pointer; padding: 0; text-align: left;
}
.cart-bar .btn-wa { padding: .85rem 1.1rem; font-size: .92rem; }

.product-modal[hidden] { display: none !important; }
.product-modal {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: stretch; justify-content: center;
}
.product-modal-backdrop { position: absolute; inset: 0; background: rgba(8,28,20,.62); }
.product-modal-sheet {
  position: relative; z-index: 1; width: 100%; height: 100%;
  max-width: none; max-height: none; overflow: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border-radius: 0;
  display: flex; flex-direction: column;
  box-shadow: none;
}
.modal-close {
  position: fixed; top: calc(.65rem + env(safe-area-inset-top, 0px)); right: .75rem; z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.5); color: #fff; font-size: 1.5rem; cursor: pointer;
  backdrop-filter: blur(4px);
}
.modal-gallery {
  position: relative; flex: 0 0 auto; width: 100%;
  background: #0f1f18; overflow: hidden;
  aspect-ratio: 1 / 1; max-height: 55vh;
}
.modal-gallery-track {
  display: flex; height: 100%; width: 100%;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
  touch-action: pan-x;
  will-change: transform;
}
.modal-slide {
  flex: 0 0 100%; height: 100%;
  display: grid; place-items: center;
}
.modal-slide img {
  width: 100%; height: 100%; object-fit: contain; background: #0f1f18;
}
.modal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.9); color: #0F9F5C; font-size: 1.5rem;
  font-weight: 700; cursor: pointer; z-index: 2;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.modal-nav-prev { left: .55rem; }
.modal-nav-next { right: .55rem; }
.modal-dots {
  position: absolute; left: 0; right: 0; bottom: .65rem;
  display: flex; justify-content: center; gap: .4rem; z-index: 2;
}
.modal-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(255,255,255,.45); cursor: pointer;
}
.modal-dot.is-on { background: #fff; transform: scale(1.2); }
.modal-swipe-hint {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  margin: 0; z-index: 2; font-size: .72rem; font-weight: 700;
  color: rgba(255,255,255,.85); background: rgba(0,0,0,.35);
  padding: .25rem .55rem; border-radius: 999px; pointer-events: none;
}
.modal-body {
  flex: 1; padding: 1rem 1.15rem calc(1.35rem + env(safe-area-inset-bottom, 0px));
  display: grid; gap: .5rem; align-content: start;
}
.modal-body h2 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; }
.modal-body p { margin: 0; color: var(--muted); font-size: .95rem; }
.modal-detail-link { margin-top: .35rem; font-weight: 700; color: var(--shop-primary, var(--leaf)); font-size: .9rem; }
body.modal-open { overflow: hidden; }
.product-photo-count {
  position: absolute; left: .45rem; bottom: .45rem; z-index: 2;
  font-size: .7rem; font-weight: 800; color: #fff;
  background: rgba(0,0,0,.5); padding: .2rem .45rem; border-radius: 999px;
}

.shop-footer.site-footer { margin-top: 1rem; text-align: left; }
.shop-footer .footer-grid { grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) {
  .shop-footer .footer-grid { grid-template-columns: 1.5fr 1fr; }
  .product-modal-sheet { max-width: 560px; margin: 0 auto; }
  .modal-gallery { max-height: 60vh; }
}

.password-field { position: relative; display: grid; }
.password-field input { width: 100%; padding-right: 4.5rem; }
.password-field button {
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .82rem;
  font-weight: 700; cursor: pointer; padding: .35rem .45rem;
}

.share-card {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1.3fr auto;
  gap: 1.25rem;
  align-items: center;
  background: #fff;
  border-radius: 18px;
  padding: 1.15rem 1.2rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(20,107,74,.08);
}
.share-card h2 {
  margin: 0 0 .35rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
}
.share-card p { margin: 0 0 .65rem; color: var(--muted); font-size: .92rem; }
.share-link {
  font-size: .88rem !important;
  color: var(--shop-primary, var(--leaf)) !important;
  font-weight: 700;
  word-break: break-all;
}
.share-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.share-actions .btn { padding: .65rem .9rem; font-size: .88rem; }
.share-card-qr {
  text-align: center;
  background: #fafcfa;
  border-radius: 14px;
  padding: .75rem;
  border: 1px dashed rgba(20,107,74,.2);
}
.share-card-qr img {
  width: 160px; height: 160px; margin: 0 auto;
  image-rendering: pixelated;
}
.share-card-qr small { display: block; margin-top: .4rem; color: var(--muted); font-weight: 600; }

.product-detail-page .product-detail-header { padding: 1rem 0; }
.product-detail {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.5rem; padding: 1rem 0 5.5rem;
}
.product-detail-main {
  border-radius: 18px; width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: var(--shadow);
}
.product-detail-info h1 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
}
.product-detail-info .lead { color: var(--muted); }
.product-price-lg .price-new { font-size: 1.4rem; }
.variant-note {
  background: var(--shop-primary-soft); display: inline-block;
  padding: .35rem .65rem; border-radius: 10px;
}
.product-desc { margin-top: 1rem; color: var(--muted); }
.sticky-wa {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: .65rem 1rem calc(.65rem + var(--safe-bottom));
  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(0,0,0,.06);
}
.sticky-wa a {
  display: block; text-align: center; background: #25D366; color: white;
  padding: .9rem; border-radius: 12px; font-weight: 700;
}
.qr-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.qr-wrap {
  display: grid; place-items: center;
  padding: 1rem; background: #fff; border-radius: 16px;
  border: 1px solid rgba(20,107,74,.1); width: fit-content; margin: 1rem 0;
}

/* Register & banking */
.register-shell {
  min-height: 70vh; display: grid; place-items: center; padding: 2rem 1rem 3rem;
  background:
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(201,162,39,.18), transparent 55%),
    linear-gradient(180deg, #f3f7f4 0%, #eaf1ec 100%);
}
.register-card {
  width: min(720px, 100%); background: #fff; border-radius: 20px; padding: 1.5rem 1.4rem 1.6rem;
  box-shadow: 0 18px 50px rgba(10,61,44,.1); border: 1px solid rgba(20,107,74,.08);
}
.register-card h1 { margin: .35rem 0 .5rem; font-size: clamp(1.35rem, 4vw, 1.7rem); line-height: 1.2; }
.auth-badge {
  display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--leaf); background: rgba(20,107,74,.1);
  padding: .3rem .55rem; border-radius: 999px;
}
.auth-lead { color: var(--muted); margin: 0 0 1rem; line-height: 1.5; }
.auth-foot { margin: 1rem 0 0; text-align: center; color: var(--muted); font-size: .9rem; }
.register-form { display: grid; gap: 1rem; }
.register-form label { display: grid; gap: .35rem; font-weight: 650; font-size: .9rem; }
.register-form input, .register-form textarea, .register-form select {
  font: inherit; padding: .75rem .85rem; border: 1px solid #d5e0d8; border-radius: 12px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease; width: 100%;
}
.register-form input:focus, .register-form textarea:focus, .register-form select:focus {
  outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(20,107,74,.12);
}
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.slug-field { display: flex; align-items: stretch; border: 1px solid #d5e0d8; border-radius: 12px; overflow: hidden; background: #fff; }
.slug-prefix {
  display: flex; align-items: center; padding: 0 .65rem; background: #f3f7f4; color: var(--muted);
  font-size: .72rem; font-weight: 600; white-space: nowrap; border-right: 1px solid #d5e0d8;
}
.slug-field input { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; flex: 1; min-width: 0; }
.reg-block {
  display: grid; gap: .75rem; padding: 1rem; border-radius: 16px; background: #f7faf8;
  border: 1px solid #e3ebe6;
}
.reg-block-title { margin: 0; font-size: 1.05rem; }
.reg-block-lead { margin: -.25rem 0 .15rem; color: var(--muted); font-size: .9rem; }
.plan-pick { display: grid; gap: .65rem; }
.plan-pick-title { margin: 0; font-weight: 750; }
.plan-options, .addon-options { display: grid; gap: .55rem; }
.plan-option, .addon-option {
  display: grid !important; grid-template-columns: auto 1fr; gap: .75rem; align-items: start;
  padding: .9rem 1rem; border: 1px solid #d5e0d8; border-radius: 14px; cursor: pointer; background: #fff;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.plan-option:hover, .addon-option:hover { border-color: var(--leaf); transform: translateY(-1px); }
.plan-option:has(input:checked), .addon-option:has(input:checked) {
  border-color: var(--leaf); background: rgba(20,107,74,.06);
}
.plan-option input, .addon-option input { margin-top: .35rem; accent-color: var(--leaf); }
.plan-option-body, .addon-option-body { display: grid; gap: .2rem; }
.plan-option-body strong, .addon-option-body strong { font-size: 1rem; }
.plan-option-body em, .addon-option-body em { font-style: normal; font-weight: 800; color: var(--leaf); }
.plan-option-body small, .addon-option-body small { color: var(--muted); line-height: 1.4; }
.plan-badge {
  display: inline-block; width: fit-content; font-size: .7rem; font-weight: 800;
  background: rgba(201,162,39,.2); color: #7a5f0a; padding: .15rem .45rem; border-radius: 999px;
}
.plan-year { font-size: .82rem; color: var(--muted); }
.plan-pitch { display: block; }
.cycle-label select { width: 100%; }
.addon-note { font-size: .88rem; line-height: 1.45; }
.addon-receipt { margin: .4rem 0; padding-left: 1.1rem; color: var(--muted); }
.bank-card {
  background: #f4f8f5; border: 1px solid #d5e4db; border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 0;
}
.bank-card-center { max-width: 420px; margin: 2rem auto 0; text-align: center; }
.bank-card .bank-num {
  font-size: 1.25rem; font-weight: 800; letter-spacing: .04em; margin: .25rem 0; color: #0F9F5C;
}
.feature-hot { border: 1px solid rgba(20,107,74,.35); box-shadow: 0 10px 28px rgba(20,107,74,.08); }
.btn-block { width: 100%; }
.password-field { position: relative; display: grid; }
.password-field input { padding-right: 4.5rem; }
.password-field button {
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .82rem;
  font-weight: 700; cursor: pointer; padding: .35rem .45rem;
}

.pricing-hero-copy { max-width: 640px; }
.pricing-hero-copy .eyebrow {
  margin: 0 0 .35rem; font-size: .8rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--leaf);
}
.print-magnet .eyebrow {
  margin: 0 0 .4rem; font-size: .78rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #c2410c;
}
  display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--leaf); margin: 0 0 .35rem;
}
.pricing-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;
}
.pricing-grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.price-card {
  position: relative; background: #fff; border-radius: 18px; padding: 1.25rem 1.2rem 1.35rem;
  border: 1px solid rgba(20,107,74,.1); box-shadow: 0 12px 32px rgba(10,61,44,.06);
  display: grid; gap: .55rem; align-content: start;
}
.price-card-hot { border-color: rgba(20,107,74,.4); box-shadow: 0 14px 36px rgba(20,107,74,.12); }
.price-card-pick { border-color: rgba(201,162,39,.45); }
.price-badge {
  position: absolute; top: .85rem; right: .85rem; font-size: .7rem; font-weight: 800;
  background: rgba(201,162,39,.22); color: #7a5f0a; padding: .2rem .5rem; border-radius: 999px;
}
.price-card h3 { margin: 0; font-size: 1.15rem; }
.price-amount { margin: 0; color: var(--leaf); }
.price-amount strong { font-size: 1.45rem; font-weight: 800; }
.price-amount span { font-size: .88rem; font-weight: 650; margin-left: .15rem; }
.price-year { margin: 0; font-size: .88rem; color: var(--muted); }
.price-pitch { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.price-feats { margin: .25rem 0 .5rem; padding-left: 1.1rem; color: var(--muted); font-size: .92rem; }
.price-feats .muted { opacity: .75; }

@media (max-width: 640px) {
  .form-two { grid-template-columns: 1fr; }
  .slug-prefix { font-size: .65rem; padding: 0 .45rem; }
}

@media (min-width: 720px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
  .header-cta { display: inline-flex; }
}

@media (min-width: 980px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shop-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: unset;
    overflow: visible;
    scroll-snap-type: none;
  }
}

@media (max-width: 768px) {
  .trust-row { grid-template-columns: 1fr; gap: .65rem; }
  .product-detail { grid-template-columns: 1fr; }
  .nav-toggle { display: inline-flex; order: 3; }
  .header-inner { flex-wrap: wrap; }
  .brand { flex: 1; min-width: 0; }
  .header-cta { display: inline-flex; order: 2; margin-left: auto; }
  .site-nav {
    display: none; width: 100%; order: 4; flex-direction: column; gap: .15rem;
    padding: .35rem 0 .5rem; border-top: 1px solid rgba(20,107,74,.1);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    padding: .75rem .65rem; border-radius: 10px;
  }
  .site-nav a:hover { transform: none; background: rgba(20,107,74,.06); }
  .site-nav a::after { display: none; }
  .brand-text strong { font-size: .78rem; max-width: 42vw; }
  .hero { min-height: auto; align-items: center; padding: 2.5rem 0 2rem; }
  .hero-search { flex-wrap: wrap; padding: .55rem; }
  .hero-search input { width: 100%; padding: .55rem .35rem; }
  .hero-search button { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .shop-logo { width: 64px; height: 64px; }
  .product-body h3 { font-size: .9rem; }
  .btn-wa { font-size: .8rem; padding: .65rem .5rem; }
  .share-card { grid-template-columns: 1fr; text-align: left; }
  .share-card-qr { justify-self: center; }
  .shop-info-row { grid-template-columns: 3.6rem 1fr; font-size: .88rem; }
  .register-shell { padding: 1.25rem .75rem 2.5rem; }
  .register-card { padding: 1.15rem 1rem 1.35rem; border-radius: 16px; }
  .register-card h1 { font-size: 1.3rem; }
  .pricing-grid { grid-template-columns: 1fr !important; }
  .cta-band-inner { flex-direction: column; text-align: center; gap: 1rem; }
  .cta-band-inner .btn { width: 100%; }
  .category-chips { justify-content: flex-start; }
  .urgency-banner { text-align: left; }
}

/* —— Vivid UI + deals —— */
.hero-vivid .hero-mesh {
  background:
    radial-gradient(ellipse 55% 45% at 85% 10%, rgba(224,122,95,.4), transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(46,196,182,.35), transparent 50%),
    radial-gradient(ellipse 40% 35% at 50% 40%, rgba(201,162,39,.25), transparent 60%),
    linear-gradient(155deg, #0F9F5C 0%, #1DBF73 42%, #34D399 78%, #2EC4B6 100%);
}
.hero-blob {
  position: absolute; border-radius: 50%; filter: blur(40px); opacity: .45; pointer-events: none;
}
.hero-blob-a {
  width: 220px; height: 220px; top: 12%; right: 8%;
  background: #e07a5f; animation: blobFloat 9s ease-in-out infinite;
}
.hero-blob-b {
  width: 180px; height: 180px; bottom: 18%; left: 6%;
  background: #2ec4b6; animation: blobFloat 11s ease-in-out infinite reverse;
}
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(12px, -18px) scale(1.08); }
}
.category-strip {
  padding: 1.1rem 0 1.25rem;
  background: linear-gradient(90deg, rgba(46,196,182,.12), rgba(201,162,39,.14), rgba(224,122,95,.12));
  border-bottom: 1px solid rgba(20,107,74,.08);
}
.category-strip-title { margin: 0 0 .65rem; font-weight: 700; text-align: center; }
.category-chips {
  display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center;
}
.chip {
  display: inline-flex; padding: .35rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 700;
  background: #fff; color: var(--leaf-deep); border: 1px solid rgba(20,107,74,.15);
  box-shadow: 0 4px 12px rgba(10,61,44,.06);
}
.feature-grid-vivid .feature {
  background: linear-gradient(165deg, #fff 0%, #f3faf7 100%);
  border: 1px solid rgba(20,107,74,.1);
  border-radius: 16px; padding: 1.1rem 1.15rem;
  box-shadow: 0 10px 28px rgba(10,61,44,.06);
}
.cta-band-vivid {
  background:
    radial-gradient(ellipse 50% 80% at 90% 50%, rgba(224,122,95,.35), transparent 55%),
    linear-gradient(120deg, #0F9F5C, #1DBF73 55%, #34D399);
}
.btn-light {
  background: rgba(255,255,255,.95); color: #0F9F5C; font-weight: 800;
}
.btn-pulse {
  animation: softPulse 2.2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(201,162,39,.55);
}
@keyframes softPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,162,39,.45); }
  50% { box-shadow: 0 0 0 10px rgba(201,162,39,0); }
}
.urgency-banner {
  display: grid; gap: .45rem; text-align: center;
  padding: 1rem 1.15rem; border-radius: 16px; margin: 0 0 1.25rem;
  background: linear-gradient(135deg, #fff8e8, #ffe8e0 55%, #e8fff8);
  border: 1px solid rgba(224,122,95,.35);
  box-shadow: 0 12px 28px rgba(224,122,95,.12);
}
.urgency-badge {
  justify-self: center; font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; background: #e07a5f; color: #fff;
  padding: .3rem .65rem; border-radius: 999px;
}
.urgency-banner strong { font-size: 1.05rem; color: var(--ink); }
.urgency-banner .text-gradient {
  background: linear-gradient(120deg, #0F9F5C, #c2410c);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.urgency-banner p { margin: 0; color: #3d5248; font-size: .92rem; font-weight: 550; }
.urgency-fear { font-weight: 700 !important; color: #9b3b1c !important; }
.urgency-benefits {
  margin: .65rem 0; padding: 0; list-style: none; text-align: left;
  display: grid; gap: .45rem;
}
.urgency-benefits li {
  position: relative; padding-left: 1.35rem; font-size: .88rem; color: var(--ink); font-weight: 600;
}
.urgency-benefits li::before {
  content: ""; position: absolute; left: 0; top: .45rem; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--leaf-mid), var(--maize));
}
.urgency-compete {
  margin: .5rem 0 0 !important; font-weight: 800 !important; color: #0F9F5C !important;
  font-size: .9rem !important; line-height: 1.45 !important;
}

/* Section reveal — ringan, biar scroll tidak stuck */
.anim-section {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity .7s cubic-bezier(.22,1,.36,1),
    transform .7s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.anim-section.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.anim-section.is-visible .section-head,
.anim-section.is-visible .price-pitch,
.anim-section.is-visible .reg-block-lead {
  animation: textLift .65s cubic-bezier(.22,1,.36,1) both;
}
@keyframes textLift {
  from { opacity: .35; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.hero-content { animation: heroIn .75s cubic-bezier(.22,1,.36,1) both; }
@keyframes heroIn {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to { opacity: 1; transform: none; }
}
.anim-section:nth-child(2) { transition-delay: .05s; }
.anim-section:nth-child(3) { transition-delay: .1s; }
.price-card.anim-section:nth-child(2) { transition-delay: .08s; }
.price-card.anim-section:nth-child(3) { transition-delay: .16s; }
.reg-block.anim-section:nth-child(2) { transition-delay: .06s; }
.reg-block.anim-section:nth-child(3) { transition-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shop-card, .btn, .hero-search button, .btn-pulse, .hero-blob, .anim-section, .hero-content {
    transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

.price-deal {
  display: grid; gap: .25rem; justify-items: start; margin: .15rem 0 .35rem;
}
.price-was {
  font-size: .9rem; color: #8a9790; text-decoration: line-through; font-weight: 600;
}
.price-off {
  display: inline-flex; font-size: .72rem; font-weight: 800; padding: .15rem .45rem;
  border-radius: 999px; background: #ffe0d6; color: #b83d1a; width: fit-content;
}
.price-now {
  font-size: 1.45rem; font-weight: 800; line-height: 1.15;
}
.price-now small { font-size: .85rem; font-weight: 700; margin-left: .2rem; opacity: .9; }
.price-deal-note {
  font-size: .82rem; font-weight: 700; color: #9b3b1c; line-height: 1.35;
}
.price-year-block {
  margin-top: .35rem; padding-top: .4rem; border-top: 1px dashed #d5e0d8; width: 100%;
}
.price-card {
  background: linear-gradient(180deg, #fff 0%, #f7fbf8 100%);
}
.price-card-hot {
  background: linear-gradient(165deg, #fff 0%, #eef9f4 45%, #fff6ef 100%);
}
.register-shell {
  background:
    radial-gradient(ellipse 55% 40% at 90% 0%, rgba(224,122,95,.2), transparent 55%),
    radial-gradient(ellipse 45% 35% at 0% 30%, rgba(46,196,182,.16), transparent 50%),
    linear-gradient(180deg, #f3f7f4 0%, #eaf1ec 100%);
}
.plan-option:has(input:checked), .addon-option:has(input:checked) {
  background: linear-gradient(135deg, rgba(20,107,74,.08), rgba(201,162,39,.1));
  border-color: var(--leaf);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shop-card, .btn, .hero-search button, .btn-pulse, .hero-blob { transition: none !important; animation: none !important; }
}