/* ============================================
   DEAR MOMENTS — Design System
   Pink Love Theme | Premium Glassmorphism
   ============================================ */

/* ── Design Tokens ─────────────────────────── */
:root{
  --ivory:       #FFF8F9;
  --ivory-deep:  #FFF0F3;
  --ink:         #2B1A1F;
  --ink-soft:    #5C3D47;
  --ink-faint:   #8A6070;

  --love:        #E8426A;
  --love-deep:   #C4274E;
  --love-pale:   #FFE4EC;
  --love-light:  #FFD6E0;
  --love-blush:  #FBBDC7;

  --glass-bg:     rgba(255,255,255,0.65);
  --glass-border: rgba(255,220,230,0.75);
  --glass-shadow: 0 20px 60px -20px rgba(200,66,106,0.15);

  --radius-lg: 32px;
  --radius-md: 24px;
  --radius-sm: 16px;

  --ease: cubic-bezier(.22,1,.36,1);

  --font-display: 'Fraunces', serif;
  --font-body:    'Inter', sans-serif;
}

/* ── Reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body {
  font-family:var(--font-body);
  background:var(--ivory);
  color:var(--ink);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  animation:pageIn 0.35s ease;
}
@keyframes pageIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font-family:inherit; border:none; background:none; cursor:pointer; }
img { max-width:100%; display:block; }
::selection { background:var(--love-pale); color:var(--ink); }

/* ── Accessibility ──────────────────────────── */
.skip-link {
  position:absolute; top:-40px; left:0;
  background:var(--love); color:#fff;
  padding:8px 16px; border-radius:0 0 8px 0;
  font-weight:600; z-index:9999; transition:top .2s;
}
.skip-link:focus { top:0; }
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible {
  outline:2px solid var(--love);
  outline-offset:3px;
  border-radius:4px;
}

/* ── Grain texture ──────────────────────────── */
.grain {
  position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Ambient blobs ──────────────────────────── */
.blob-field { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.blob {
  position:absolute; border-radius:50%;
  filter:blur(70px); opacity:0.55; will-change:transform;
}
.blob-1 { width:520px; height:520px; top:-120px; left:-160px; background:radial-gradient(circle,rgba(255,182,193,.5),transparent 70%); animation:drift1 26s ease-in-out infinite; }
.blob-2 { width:460px; height:460px; top:10%; right:-180px; background:radial-gradient(circle,rgba(232,66,106,.2),transparent 70%); animation:drift2 32s ease-in-out infinite; }
.blob-3 { width:480px; height:480px; bottom:-160px; left:8%; background:radial-gradient(circle,rgba(255,200,215,.45),transparent 70%); animation:drift3 30s ease-in-out infinite; }
.blob-4 { width:380px; height:380px; bottom:5%; right:6%; background:radial-gradient(circle,rgba(240,180,200,.35),transparent 70%); animation:drift1 24s ease-in-out infinite reverse; }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,30px) scale(1.08)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-50px,40px) scale(.95)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-40px) scale(1.05)} }

/* ── Typography ─────────────────────────────── */
.eyebrow {
  font-size:0.78rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--love-deep); margin-bottom:14px;
}
.eyebrow-rose, .eyebrow-gold { color:var(--love-blush) !important; }

.section-title {
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.15; letter-spacing:-0.01em; max-width:18ch;
}
.section-sub {
  font-size:1.05rem; color:var(--ink-soft);
  max-width:48ch; margin-top:16px;
}
.hero-accent {
  font-style:italic; font-weight:500;
  background:linear-gradient(120deg,var(--love-deep),var(--love) 60%,#E8A0B0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ── Scroll reveal ──────────────────────────── */
[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-visible { opacity:1; transform:translateY(0); }

/* ── Layout ─────────────────────────────────── */
.section {
  position:relative; z-index:2;
  max-width:1240px; margin:0 auto;
  padding:120px 32px;
}
.section-head { margin-bottom:56px; }
.light-on-dark .section-title { color:#FFF8F9; }
.light-on-dark .section-sub   { color:rgba(255,248,249,.75); }

/* ── Buttons ────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:0.95rem; padding:13px 26px;
  border-radius:999px; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-lg    { padding:16px 32px; font-size:1rem; }
.btn-block { width:100%; }

.btn-love, .btn-gold {
  background:linear-gradient(135deg,var(--love),var(--love-deep));
  color:#fff;
  box-shadow:0 12px 28px -10px rgba(196,39,78,.55);
}
.btn-love:hover, .btn-gold:hover { transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(196,39,78,.65); }

.btn-outline {
  border:1.5px solid rgba(43,38,32,.16); color:var(--ink);
  background:rgba(255,255,255,.4); backdrop-filter:blur(8px);
}
.btn-outline:hover { border-color:var(--love); background:rgba(255,255,255,.7); }
.btn-outline .arrow { transition:transform .3s var(--ease); display:inline-block; }
.btn-outline:hover .arrow { transform:translateX(4px); }

.btn-outline-light {
  border:1.5px solid rgba(255,248,249,.35); color:#FFF8F9;
  padding:10px 20px; font-size:0.88rem;
}
.btn-outline-light:hover { background:rgba(255,248,249,.12); border-color:var(--love); }

.btn-ghost { color:var(--ink-soft); padding:13px 18px; }
.btn-ghost:hover { color:var(--ink); }

/* ── Nav ────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:18px 32px;
  transition:padding .4s var(--ease);
}
.nav.scrolled { padding:12px 32px; }
.nav.scrolled .nav-inner {
  box-shadow:0 16px 40px -18px rgba(196,39,78,.2);
  background:rgba(255,255,255,.8);
}
.nav-inner {
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:999px;
  padding:10px 12px 10px 22px;
  box-shadow:var(--glass-shadow);
}
.brand      { display:flex; align-items:center; gap:8px; }
.brand-mark { color:var(--love); font-size:1.1rem; }
.brand-text { font-family:var(--font-display); font-weight:600; font-size:1.15rem; letter-spacing:-.01em; }

.nav-links   { display:flex; gap:32px; }
.nav-links a { font-size:0.92rem; font-weight:500; color:var(--ink-soft); transition:color .25s; }
.nav-links a:hover, .nav-links a.active { color:var(--love-deep); font-weight:600; }

.nav-cta   { display:flex; align-items:center; gap:4px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:8px; }
.nav-toggle span { width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--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); }

/* ── Hero ───────────────────────────────────── */
.hero {
  position:relative; z-index:2;
  max-width:1320px; margin:0 auto;
  padding:170px 32px 100px;
  min-height:90vh; display:flex; align-items:center;
}
.hero-inner {
  display:flex; flex-direction:column;
  gap:40px; align-items:center;
  width:100%; max-width:1240px; margin:0 auto;
  padding:40px 20px 60px;
}
.hero-copy  { order:1; width:100%; }
.hero-stage { order:2; width:100%; display:flex; justify-content:center; }

@media(min-width:1000px){
  .hero-inner { flex-direction:row; gap:64px; padding:80px 32px; align-items:center; }
  .hero-copy  { order:1; flex:1.05; }
  .hero-stage { order:2; flex:0.95; }
}

.hero-title {
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.4rem,5.2vw,4.4rem);
  line-height:1.06; letter-spacing:-.015em; color:var(--ink);
}
.hero-sub { font-size:1.12rem; color:var(--ink-soft); max-width:46ch; margin-top:22px; }
.hero-actions { display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
.hero-trust { display:flex; align-items:center; gap:14px; margin-top:48px; }
.avatar-stack { display:flex; }
.avatar { width:38px; height:38px; border-radius:50%; border:2.5px solid var(--ivory); margin-left:-10px; box-shadow:0 4px 10px rgba(0,0,0,.06); }
.avatar:first-child { margin-left:0; }
.hero-trust p { font-size:0.9rem; color:var(--ink-soft); }
.hero-trust strong { color:var(--ink); }

/* hero stage */
.hero-stage { position:relative; height:460px; display:flex; align-items:center; justify-content:center; }
.stage-glow { position:absolute; inset:10%; background:radial-gradient(circle,rgba(232,66,106,.22),transparent 70%); filter:blur(40px); z-index:0; }

@keyframes gmFloat { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-14px) rotate(1deg)} }

/* ── Hero Showcase (ll-*) ───────────────────── */
.ll-showcase { position:relative; width:320px; height:420px; margin:0 auto; }
.ll-main-card { position:absolute; inset:0; z-index:3; border-radius:28px; animation:gmFloat 6s ease-in-out infinite; }
.ll-card-inner {
  width:100%; height:100%; border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,220,232,.85));
  border:1.5px solid rgba(255,255,255,.95);
  box-shadow:0 40px 80px -24px rgba(200,0,60,.3), inset 0 0 0 1px rgba(255,255,255,.7), inset 0 2px 0 rgba(255,255,255,1);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  padding:32px 28px; display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}
.ll-card-shine {
  position:absolute; top:-30%; left:-15%; width:130%; height:65%;
  background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.15) 40%,transparent 60%);
  pointer-events:none; border-radius:50%;
}
.ll-card-emoji  { font-size:2.8rem; margin-bottom:auto; filter:drop-shadow(0 4px 12px rgba(200,0,60,.25)); display:block; }
.ll-card-label  { font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--love); margin-top:28px; }
.ll-card-title  { font-family:var(--font-display); font-weight:600; font-size:1.55rem; color:var(--ink); margin-top:6px; line-height:1.2; }
.ll-card-divider{ width:40px; height:2px; background:linear-gradient(90deg,var(--love),transparent); margin:14px 0 10px; border-radius:1px; }
.ll-card-sub    { font-size:.84rem; color:var(--ink-soft); }
.ll-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:24px; }
.ll-badge { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; background:linear-gradient(135deg,var(--love),var(--love-deep)); color:#fff; padding:4px 12px; border-radius:999px; }
.ll-stars { font-size:.8rem; color:var(--love); letter-spacing:2px; }

.ll-mini   { position:absolute; z-index:4; animation:gmFloat 6s ease-in-out infinite; }
.ll-mini-1 { top:-30px; right:-48px; animation-delay:1s; }
.ll-mini-2 { bottom:30px; right:-52px; animation-delay:2s; }
.ll-mini-3 { bottom:-20px; left:-36px; animation-delay:.5s; }
.ll-mini-inner {
  width:90px; padding:14px 12px; border-radius:18px; text-align:center;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,210,225,.85));
  border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 16px 36px -12px rgba(200,0,60,.2), inset 0 1px 0 rgba(255,255,255,1);
  backdrop-filter:blur(16px);
}
.ll-mini-inner span { font-size:1.5rem; display:block; margin-bottom:6px; }
.ll-mini-inner p   { font-size:.68rem; font-weight:700; color:var(--ink-soft); }

.ll-stat-pill {
  position:absolute; top:-18px; left:-40px; z-index:5;
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.95); backdrop-filter:blur(12px);
  border:1px solid rgba(255,200,215,.9); border-radius:999px; padding:10px 18px;
  box-shadow:0 12px 28px -10px rgba(200,0,60,.2);
  animation:gmFloat 5s ease-in-out infinite; animation-delay:1.5s;
  white-space:nowrap;
}
.ll-stat-pill span   { color:var(--love); font-size:1rem; }
.ll-stat-pill p      { font-size:.78rem; color:var(--ink-soft); }
.ll-stat-pill strong { color:var(--love-deep); }

.ll-glow {
  position:absolute; top:50%; left:50%; z-index:0;
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,rgba(232,66,106,.22),transparent 70%);
  filter:blur(36px); transform:translate(-50%,-50%); pointer-events:none;
}

.scroll-hint { position:absolute; bottom:36px; left:50%; transform:translateX(-50%); width:26px; height:42px; border:1.5px solid rgba(43,38,32,.25); border-radius:14px; }
.scroll-hint span { display:block; width:4px; height:8px; background:var(--love); border-radius:2px; margin:8px auto; animation:scrollPulse 1.8s ease-in-out infinite; }
@keyframes scrollPulse { 0%{opacity:1;transform:translateY(0)} 70%{opacity:0;transform:translateY(10px)} 100%{opacity:0} }

/* ── Occasion Cards ─────────────────────────── */
.occ-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.occ-card {
  position:relative; overflow:hidden; border-radius:26px;
  padding:28px 24px; display:flex; flex-direction:column; gap:14px;
  text-decoration:none; color:var(--ink);
  border:1.5px solid rgba(255,255,255,.92);
  box-shadow:0 16px 40px -16px rgba(200,66,106,.22), inset 0 1.5px 0 rgba(255,255,255,1);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transition:transform .38s var(--ease), box-shadow .38s var(--ease);
}
.occ-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 28px 56px -18px rgba(200,66,106,.38), inset 0 1.5px 0 rgba(255,255,255,1); }
.occ-shine { position:absolute; top:-40%; left:-15%; width:130%; height:65%; background:linear-gradient(135deg,rgba(255,255,255,.65),rgba(255,255,255,.1) 45%,transparent 65%); pointer-events:none; border-radius:50%; transition:opacity .4s; }
.occ-card:hover .occ-shine { opacity:.8; }

.occ-rose    { background:linear-gradient(145deg,rgba(255,235,240,.95),rgba(255,210,225,.8)); }
.occ-pink    { background:linear-gradient(145deg,rgba(255,228,240,.95),rgba(252,200,220,.8)); }
.occ-red     { background:linear-gradient(145deg,rgba(255,220,230,.95),rgba(255,170,195,.8)); }
.occ-blush   { background:linear-gradient(145deg,rgba(255,235,245,.95),rgba(255,195,220,.8)); }
.occ-lavender{ background:linear-gradient(145deg,rgba(245,235,255,.95),rgba(225,210,250,.8)); }
.occ-peach   { background:linear-gradient(145deg,rgba(255,238,225,.95),rgba(250,218,185,.8)); }
.occ-mint    { background:linear-gradient(145deg,rgba(220,248,235,.95),rgba(190,238,218,.8)); }
.occ-sky     { background:linear-gradient(145deg,rgba(220,238,255,.95),rgba(185,218,252,.8)); }

.occ-emoji { font-size:2.2rem; filter:drop-shadow(0 4px 8px rgba(0,0,0,.12)); display:block; }
.occ-body  { flex:1; }
.occ-body h3 { font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--ink); margin-bottom:5px; line-height:1.2; }
.occ-body p  { font-size:.8rem; color:var(--ink-soft); line-height:1.5; }
.occ-arrow { font-size:1.1rem; color:var(--ink-faint); align-self:flex-end; transition:transform .3s var(--ease), color .3s; }
.occ-card:hover .occ-arrow { transform:translateX(5px); color:var(--love-deep); }

/* ── Template Cards ─────────────────────────── */
.tmpl-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.tmpl-card {
  border-radius:var(--radius-md);
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,210,225,.5)) !important;
  border:1.5px solid rgba(255,255,255,.92) !important;
  box-shadow:0 16px 40px -18px rgba(200,66,106,.2), inset 0 1px 0 rgba(255,255,255,1) !important;
  backdrop-filter:blur(18px) !important; -webkit-backdrop-filter:blur(18px) !important;
  overflow:hidden; position:relative;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tmpl-card:hover { transform:translateY(-10px) rotateX(2deg); box-shadow:0 30px 60px -20px rgba(200,66,106,.35) !important; }
.tmpl-card::before { content:''; position:absolute; top:-35%; left:-10%; width:120%; height:55%; background:linear-gradient(135deg,rgba(255,255,255,.45),transparent 55%); pointer-events:none; z-index:0; }
.tmpl-preview { position:relative; aspect-ratio:4/3; background:linear-gradient(160deg,var(--tint),rgba(255,228,236,.3) 130%); display:flex; align-items:center; justify-content:center; }
.tmpl-emoji     { font-size:3rem; opacity:.85; filter:drop-shadow(0 8px 16px rgba(0,0,0,.08)); }
.tmpl-emoji.big { font-size:3.6rem; }
.badge         { position:absolute; top:14px; left:14px; font-size:.72rem; font-weight:700; letter-spacing:.03em; padding:6px 12px; border-radius:999px; }
.badge-trend   { background:rgba(255,255,255,.85); color:var(--ink); backdrop-filter:blur(6px); }
.badge-gold    { background:linear-gradient(135deg,var(--love),var(--love-deep)); color:#fff; }
.tmpl-actions  { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; opacity:0; transition:opacity .35s var(--ease), background .35s var(--ease); }
.tmpl-card:hover .tmpl-actions { opacity:1; background:rgba(43,26,31,.25); }
.chip        { background:rgba(255,255,255,.9); color:var(--ink); font-size:.82rem; font-weight:600; padding:9px 16px; border-radius:999px; backdrop-filter:blur(6px); transform:translateY(8px); transition:transform .35s var(--ease); }
.chip-solid  { background:var(--love); color:#fff; }
.tmpl-card:hover .chip { transform:translateY(0); }
.tmpl-body   { padding:20px; }
.tmpl-row    { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tmpl-row h3 { font-family:var(--font-display); font-weight:600; font-size:1.1rem; }
.tmpl-price  { font-weight:700; color:var(--love-deep); font-size:.95rem; }
.tmpl-price.gold { color:var(--love); font-size:1.1rem; }
.tmpl-meta   { font-size:.85rem; color:var(--ink-faint); margin-top:4px; }
.tmpl-stats  { display:flex; gap:6px; font-size:.82rem; color:var(--ink-soft); margin:10px 0 16px; }
.tmpl-card .btn-block { width:100%; text-align:center; }


/* ── Loading / Skeleton ─────────────────────── */
.loading-row { grid-column:1/-1; text-align:center; padding:48px 20px; color:var(--ink-faint); font-size:.95rem; }
.loading-row.light-on-dark { color:rgba(255,248,249,.55); }
@keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
.sk-thumb, .sk-premium-thumb, .sk-line {
  background:linear-gradient(90deg,#fceef2 25%,#f9dee6 50%,#fceef2 75%);
  background-size:800px 100%; animation:shimmer 1.4s ease-in-out infinite; border-radius:10px;
}
.skeleton-card        { pointer-events:none; }
.sk-thumb             { width:100%; height:200px; border-radius:14px 14px 0 0; }
.sk-premium-thumb     { width:100%; height:220px; border-radius:14px 14px 0 0; }
.sk-body              { padding:16px; display:flex; flex-direction:column; gap:10px; }
.sk-title             { height:18px; width:70%; }
.sk-meta              { height:13px; width:50%; }
.sk-btn               { height:36px; width:100%; border-radius:999px; margin-top:4px; }

/* ── Premium Section ────────────────────────── */
.premium     { max-width:none; padding:120px 32px; position:relative; }
.premium-bg  { position:absolute; inset:0; background:linear-gradient(160deg,#2B1A1F,#5C1A2E 50%,#8B0035); z-index:-1; }
.premium .section-head { max-width:1240px; margin-left:auto; margin-right:auto; }
.premium-grid { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.premium-card { border-radius:var(--radius-md); background:rgba(255,248,249,.06); border:1px solid rgba(255,248,249,.12); backdrop-filter:blur(10px); overflow:hidden; transition:transform .4s var(--ease), border-color .4s var(--ease); }
.premium-card:hover { transform:translateY(-8px); border-color:rgba(232,66,106,.5); }
.premium-preview { position:relative; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,var(--tint),rgba(255,248,249,.08)); }
.premium-body h3 { font-family:var(--font-display); font-weight:600; font-size:1.25rem; color:#FFF8F9; }
.premium-body p  { font-size:.88rem; color:rgba(255,248,249,.6); margin-top:6px; }
.premium-body    { padding:22px; }
.premium-body .tmpl-row { margin-top:18px; }

/* ── Why cards ──────────────────────────────── */
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.why-card {
  border-radius:var(--radius-md); padding:32px 26px;
  background:linear-gradient(145deg,rgba(255,255,255,.92),color-mix(in srgb,var(--tint) 30%,rgba(255,255,255,.7))) !important;
  border:1.5px solid rgba(255,255,255,.92) !important;
  box-shadow:0 20px 50px -22px rgba(200,66,106,.2), inset 0 1px 0 rgba(255,255,255,1) !important;
  backdrop-filter:blur(18px) !important; -webkit-backdrop-filter:blur(18px) !important;
  position:relative; overflow:hidden;
  transition:transform .4s var(--ease);
}
.why-card::before { content:''; position:absolute; top:-35%; left:-10%; width:120%; height:55%; background:linear-gradient(135deg,rgba(255,255,255,.5),transparent 55%); pointer-events:none; }
.why-card:hover { transform:translateY(-6px); }
.why-icon   { font-size:1.8rem; display:block; margin-bottom:18px; }
.why-card h3{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; margin-bottom:8px; }
.why-card p { font-size:.92rem; color:var(--ink-soft); }

/* ── Reviews ────────────────────────────────── */
.reviews-track { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.review-card {
  border-radius:var(--radius-md); padding:28px 24px;
  background:linear-gradient(145deg,rgba(255,255,255,.92),color-mix(in srgb,var(--tint) 35%,rgba(255,255,255,.75))) !important;
  border:1.5px solid rgba(255,255,255,.9) !important;
  box-shadow:0 16px 40px -18px rgba(200,66,106,.2), inset 0 1px 0 rgba(255,255,255,1) !important;
  backdrop-filter:blur(20px) !important; -webkit-backdrop-filter:blur(20px) !important;
  position:relative; overflow:hidden;
}
.review-card::before { content:''; position:absolute; top:-40%; left:-10%; width:120%; height:60%; background:linear-gradient(135deg,rgba(255,255,255,.55),transparent 55%); pointer-events:none; }
.review-stars { color:var(--love); letter-spacing:2px; margin-bottom:14px; }
.review-text  { font-size:.95rem; line-height:1.55; color:var(--ink); min-height:96px; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.review-who   { display:flex; align-items:center; gap:10px; margin-top:20px; }
.review-avatar{ width:36px; height:36px; border-radius:50%; }
.review-who strong { display:block; font-size:.88rem; }
.review-who span   { font-size:.78rem; color:var(--ink-faint); }
              /* ── FAQ ────────────────────────────────────── */
.faq-list { max-width:780px; }
.faq-item { background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:blur(14px); border-radius:var(--radius-sm); padding:22px 26px; margin-bottom:14px; }
.faq-item summary { cursor:pointer; font-weight:600; font-size:1.02rem; list-style:none; display:flex; align-items:center; justify-content:space-between; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; font-size:1.4rem; color:var(--love); font-weight:400; transition:transform .3s var(--ease); }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item p { margin-top:14px; color:var(--ink-soft); font-size:.95rem; line-height:1.6; }

/* ── Contact ────────────────────────────────── */
.contact-card {
  background:linear-gradient(150deg,rgba(255,255,255,.75),var(--love-pale) 160%);
  border:1px solid rgba(255,255,255,.85); border-radius:var(--radius-lg);
  padding:64px; display:grid; grid-template-columns:1.1fr .9fr; gap:56px;
  box-shadow:0 30px 70px -30px rgba(200,66,106,.25);
}
.contact-links { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.contact-pill {
  background:rgba(200,0,60,.08) !important; border:1px solid rgba(200,0,60,.2) !important;
  color:var(--love-deep) !important; padding:10px 18px; border-radius:999px;
  font-size:.88rem; font-weight:600; transition:transform .3s var(--ease), background .3s;
}
.contact-pill:hover { transform:translateY(-2px); background:rgba(200,0,60,.15) !important; }
.contact-form { display:flex; flex-direction:column; gap:16px; }
.contact-form label { font-size:.85rem; font-weight:600; color:var(--ink-soft); display:flex; flex-direction:column; gap:6px; }
.contact-form input, .contact-form textarea { font-family:inherit; font-size:.95rem; padding:13px 16px; border-radius:14px; border:1px solid rgba(43,38,32,.12); background:rgba(255,255,255,.85); resize:none; }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--love); box-shadow:0 0 0 3px rgba(232,66,106,.15); }

/* ── Footer ─────────────────────────────────── */
.footer { position:relative; z-index:2; background:linear-gradient(160deg,#2B1A1F,#3D0A1E) !important; color:rgba(255,248,249,.7); padding:80px 32px 32px; }
.footer-inner { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(255,248,249,.1); }
.footer-brand .brand-text { color:#FFF8F9; }
.footer-brand p { margin-top:14px; font-size:.9rem; max-width:28ch; }
.footer-col h4  { color:#FFF8F9; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px; }
.footer-col a   { display:block; font-size:.9rem; margin-bottom:10px; transition:color .25s; }
.footer-col a:hover { color:var(--love-blush); }
.footer-bottom {
  max-width:1240px; margin:0 auto; padding-top:28px;
  font-size:.82rem; color:rgba(255,248,249,.45);
  display:flex; justify-content:space-between; align-items:center;
}
.footer-social { display:flex; gap:12px; margin-top:16px; }
.footer-social a { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,248,249,.1); border:1px solid rgba(255,248,249,.15); font-size:1rem; transition:background .25s, transform .25s; }
.footer-social a:hover { background:rgba(255,248,249,.18); transform:translateY(-2px); }
.admin-footer-link { font-size:.75rem; color:rgba(255,180,200,.2); text-decoration:none; transition:color .3s; }
.admin-footer-link:hover { color:rgba(255,180,200,.6) !important; }

/* ── Category cards ─────────────────────────── */
.cat-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.cat-card {
  background:linear-gradient(145deg,rgba(255,255,255,.9),color-mix(in srgb,var(--tint) 35%,rgba(255,255,255,.7))) !important;
  border:1.5px solid rgba(255,255,255,.92) !important;
  box-shadow:0 10px 28px -14px rgba(200,66,106,.18), inset 0 1px 0 rgba(255,255,255,1) !important;
  border-radius:var(--radius-md); padding:30px 18px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cat-card:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 24px 50px -16px rgba(200,66,106,.28) !important; }
.cat-emoji { font-size:1.9rem; }
.cat-name  { font-weight:600; font-size:.92rem; }

/* ── Responsive ─────────────────────────────── */
@media(max-width:1080px){
  .cat-grid      { grid-template-columns:repeat(4,1fr); }
  .tmpl-grid     { grid-template-columns:repeat(2,1fr); }
  .why-grid      { grid-template-columns:repeat(2,1fr); }
  .reviews-track { grid-template-columns:repeat(2,1fr); }
  .premium-grid  { grid-template-columns:1fr; max-width:560px; }
  .contact-card  { grid-template-columns:1fr; padding:40px; }
  .occ-grid      { grid-template-columns:repeat(3,1fr); }
  .ll-showcase   { width:260px; height:360px; }
  .ll-mini-1     { right:-28px; }
  .ll-mini-2     { right:-32px; }
  .ll-mini-3     { left:-20px; }
  .ll-stat-pill  { left:-20px; font-size:.72rem; }
}

@media(max-width:720px){
  .nav-links, .nav-cta { display:none; }
  .nav-toggle { display:flex; }
  .nav-inner.is-open { flex-wrap:wrap; border-radius:28px; }
  .nav-inner.is-open .nav-links { display:flex; flex-direction:column; width:100%; gap:4px; padding:16px 10px 6px; order:3; }
  .nav-inner.is-open .nav-links a { padding:10px 12px; border-radius:12px; }
  .nav-inner.is-open .nav-links a:hover { background:rgba(232,66,106,.12); }
  .nav-inner.is-open .nav-cta { display:flex; width:100%; padding:0 10px 14px; order:4; gap:10px; }
  .nav-inner.is-open .nav-cta .btn { flex:1; }

  .hero { padding:140px 20px 60px; }
  .hero-stage { height:300px !important; }
  .hero-actions { flex-direction:column; gap:10px; }
  .hero-actions .btn { width:100%; justify-content:center; }
  .hero-trust { flex-wrap:wrap; gap:8px; font-size:.82rem; }
  .ll-showcase  { width:220px; height:280px; }
  .ll-mini      { display:none; }
  .ll-stat-pill { top:auto; bottom:-18px; left:50%; transform:translateX(-50%); font-size:.72rem; }

  .section { padding:80px 20px; }
  .cat-grid      { grid-template-columns:repeat(2,1fr); }
  .tmpl-grid     { grid-template-columns:1fr; }
  .why-grid      { grid-template-columns:1fr; }
  .reviews-track { grid-template-columns:1fr; }
  .occ-grid      { grid-template-columns:repeat(2,1fr); gap:12px; }
  .occ-card      { padding:20px 16px; }
  .footer-inner  { grid-template-columns:1fr 1fr; gap:32px; }
}

@media(max-width:480px){
  .occ-grid           { grid-template-columns:1fr 1fr; gap:10px; }
  .footer-bottom      { flex-direction:column; gap:8px; text-align:center; }
  .admin-footer-link  { margin-top:4px; }
             }