/* ===================== Variables ===================== */
:root {
  /* ---- Brand palette (Casa Chromatica — Midnight Orchid) ---- */
  --midnight-orchid: #312a44;
  --dusky-lilac:     #88708e;
  --iris-mist:       #baaac8;
  --plum-blossom:    #d7c5d8;
  --silver-wisteria: #dad4df;

  /* ---- Shades & tints derived from the palette above ---- */
  --orchid-deep:    #1f1a2c;
  --orchid-soft:    #463c5e;
  --lilac-deep:     #6b5872;
  --wisteria-pale:  #f2eff5;
  --white:          #ffffff;

  /* ---- Ramp: the palette ordered dark -> light. Swapping these eight
         values re-themes the whole page; nothing outside :root and the
         theme blocks names a palette color directly. ---- */
  --ramp-1: var(--orchid-deep);
  --ramp-2: var(--midnight-orchid);
  --ramp-3: var(--orchid-soft);
  --ramp-4: var(--lilac-deep);
  --ramp-5: var(--dusky-lilac);
  --ramp-6: var(--iris-mist);
  --ramp-7: var(--plum-blossom);
  --ramp-8: var(--silver-wisteria);

  /* ---- Semantic tokens (everything below maps to the ramp) ---- */
  --ink: var(--ramp-2);
  --ink-soft: var(--ramp-4);
  --bg: var(--wisteria-pale);
  --card: var(--white);
  --border: var(--ramp-7);
  --primary: var(--ramp-2);
  --primary-dark: var(--ramp-1);
  --primary-hover: var(--ramp-3);
  --primary-light: var(--ramp-7);
  --accent: var(--ramp-6);
  --success: var(--ramp-5);
  --danger: var(--ramp-1);

  /* ---- Translucent layers (white / orchid only) ---- */
  --on-dark: var(--white);
  --on-dark-strong: rgba(255, 255, 255, .88);
  --on-dark-muted: rgba(255, 255, 255, .70);
  --on-dark-faint: rgba(255, 255, 255, .55);
  --on-dark-line: rgba(255, 255, 255, .14);
  --on-dark-veil: rgba(255, 255, 255, .09);
  --sheen: rgba(255, 255, 255, .35);
  --chip-light: rgba(255, 255, 255, .92);
  --header-bg: rgba(242, 239, 245, .85);

  --veil-dark: rgba(31, 26, 44, .55);
  --veil-dark-soft: rgba(31, 26, 44, .22);
  --glow-iris: rgba(186, 170, 200, .28);
  --glow-lilac: rgba(136, 112, 142, .45);
  --shadow-ink: rgba(49, 42, 68, .18);
  --shadow-ink-strong: rgba(49, 42, 68, .28);
  --shadow-deep: rgba(31, 26, 44, .38);

  /* ---- Signature gradients (palette only) ---- */
  --grad-night: linear-gradient(160deg, var(--ramp-1) 0%, var(--ramp-2) 55%, var(--ramp-4) 100%);
  --grad-brand: linear-gradient(135deg, var(--ramp-1), var(--ramp-4));

  --radius: 16px;
  --shadow: 0 10px 30px -12px var(--shadow-ink);
  --font: 'Cairo', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* ===================== Wedding-invitation theme =====================
   Applied to the catalog + pricing sections while the visitor is in
   "دعوات الفرح" mode. It only re-points the ramp and the semantic
   tokens — no rule below needs to know the theme exists. */
.theme-wedding {
  /* ---- Wedding palette (Burgundy — Indigo — Antique Gold) ---- */
  --midnight-indigo: #2D2C4A;
  --deep-burgundy:   #710927;
  --warm-walnut:     #92643E;
  --antique-gold:    #B58C4F;
  --champagne-cream: #D9C3A6;

  /* ---- Shades & tints derived from the palette above ---- */
  --burgundy-deep:  #55071d;
  --cream-soft:     #e7d8c3;
  --cream-pale:     #f3eadb;
  --cream-palest:   #faf4ea;
  --cream-wash:     #fdfaf4;

  --ramp-1: var(--midnight-indigo);
  --ramp-2: var(--deep-burgundy);
  --ramp-3: var(--warm-walnut);
  --ramp-4: var(--antique-gold);
  --ramp-5: var(--champagne-cream);
  --ramp-6: var(--cream-soft);
  --ramp-7: var(--cream-pale);
  --ramp-8: var(--cream-palest);

  /* Every ramp-derived token has to be re-declared here: a var() inside a
     custom-property declaration resolves against the element that declares
     it, so tokens left on :root would keep their purple values.
     Text is the midnight indigo — the palette carries everything else. */
  --ink: var(--midnight-indigo);
  --ink-soft: rgba(45, 44, 74, .75);
  --bg: var(--cream-wash);
  --border: var(--ramp-6);
  --primary: var(--ramp-2);
  --primary-dark: var(--burgundy-deep);
  --primary-hover: var(--burgundy-deep);
  --primary-light: var(--ramp-7);
  --accent: var(--ramp-4);
  --success: var(--ramp-3);
  --danger: var(--ramp-2);
  --header-bg: rgba(253, 250, 244, .85);

  --veil-dark: rgba(45, 44, 74, .55);
  --veil-dark-soft: rgba(45, 44, 74, .22);
  --glow-iris: rgba(217, 195, 166, .34);
  --glow-lilac: rgba(113, 9, 39, .42);
  --shadow-ink: rgba(45, 44, 74, .20);
  --shadow-ink-strong: rgba(45, 44, 74, .30);
  --shadow-deep: rgba(45, 44, 74, .42);

  /* No gradients in this theme — every surface is one flat palette colour. */
  --grad-night: var(--ramp-1);
  --grad-brand: var(--ramp-2);
  --shadow: 0 10px 30px -12px var(--shadow-ink);

  /* `color` inherits as a resolved value, so re-establish it here or the
     headings inside would keep the purple ink. */
  color: var(--ink);
}

/* Per-design card tones: one flat palette colour each, no blend. */
.theme-wedding .tpl-card[data-category="wedding_invitations"] .tpl-card__thumb { background: var(--ramp-2); }
.theme-wedding .tpl-card[data-tone="1"] .tpl-card__thumb { background: var(--deep-burgundy); }
.theme-wedding .tpl-card[data-tone="2"] .tpl-card__thumb { background: var(--midnight-indigo); }
.theme-wedding .tpl-card[data-tone="3"] .tpl-card__thumb { background: var(--warm-walnut); }
.theme-wedding .tpl-card[data-tone="4"] .tpl-card__thumb { background: var(--antique-gold); }
.theme-wedding .tpl-card[data-tone="5"] .tpl-card__thumb { background: var(--burgundy-deep); }


/* ===================== Systems / dashboard theme =====================
   Applied to the catalog + pricing sections while the visitor is in
   "نظام كامل ليك" mode. Same contract as .theme-wedding: it only
   re-points the ramp and the semantic tokens. */
.theme-systems {
  /* ---- Systems palette (Harbor navy — Teal — Mint) ---- */
  --ink-navy:    #0B1B2B;
  --harbor-blue: #12405F;
  --deep-teal:   #1B7F79;
  --aqua:        #3FA79B;
  --mint:        #8FCEC1;

  /* ---- Shades & tints derived from the palette above ---- */
  --mint-soft:  #c6e5dd;
  --mint-pale:  #e2f1ec;
  --mint-palest:#f0f8f5;
  --mint-wash:  #f6fbf9;

  --ramp-1: var(--ink-navy);
  --ramp-2: var(--harbor-blue);
  --ramp-3: var(--deep-teal);
  --ramp-4: var(--aqua);
  --ramp-5: var(--mint);
  --ramp-6: var(--mint-soft);
  --ramp-7: var(--mint-pale);
  --ramp-8: var(--mint-palest);

  /* Same caveat as the other themes: a var() inside a custom-property
     declaration resolves where it is declared, so every ramp-derived
     token has to be repeated here. */
  --ink: var(--ink-navy);
  --ink-soft: rgba(11, 27, 43, .70);
  --bg: var(--mint-wash);
  --border: var(--mint-soft);
  --primary: var(--ramp-2);
  --primary-dark: var(--ramp-1);
  --primary-hover: var(--ramp-3);
  --primary-light: var(--ramp-7);
  --accent: var(--ramp-4);
  --success: var(--ramp-3);
  --danger: var(--ramp-2);
  --header-bg: rgba(246, 251, 249, .85);

  --veil-dark: rgba(11, 27, 43, .55);
  --veil-dark-soft: rgba(11, 27, 43, .22);
  --glow-iris: rgba(143, 206, 193, .30);
  --glow-lilac: rgba(18, 64, 95, .42);
  --shadow-ink: rgba(11, 27, 43, .18);
  --shadow-ink-strong: rgba(11, 27, 43, .28);
  --shadow-deep: rgba(11, 27, 43, .38);

  --grad-night: linear-gradient(160deg, var(--ramp-1) 0%, var(--ramp-2) 58%, var(--ramp-3) 100%);
  --grad-brand: linear-gradient(135deg, var(--ramp-1), var(--ramp-3));
  --shadow: 0 10px 30px -12px var(--shadow-ink);

  color: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 800; }
p { margin: 0 0 1em; color: var(--ink-soft); }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--primary);
  color: var(--on-dark);
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 1000;
}
.skip-link:focus { inset-inline-start: 16px; top: 16px; }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

/* ===================== Buttons ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 700;
  font-size: .95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--primary); color: var(--on-dark); box-shadow: 0 8px 20px -6px var(--shadow-ink-strong); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--ghost { background: var(--on-dark-veil); color: var(--on-dark); border-color: var(--sheen); }
.btn--ghost:hover { background: var(--on-dark-line); }
.btn--outline { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn--outline:hover { background: var(--primary); color: var(--on-dark); }
.btn--sm { padding: 9px 16px; font-size: .85rem; }
.btn--lg { padding: 15px 28px; font-size: 1rem; }
.btn--block { width: 100%; }

/* The header below is sticky, so a section arrived at by anchor would tuck its
   own heading underneath it. Hold every jump clear of the header's height. */
section[id], #paymentMethods { scroll-margin-top: 84px; }

/* ===================== Header ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.brand__logo-wrap {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--grad-brand);
}
.brand__logo { height: 26px; width: auto; display: block; }
.brand__logo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 20%, var(--sheen) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: brand-sheen 5s ease-in-out infinite;
}
.brand__logo-wrap { position: relative; overflow: hidden; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .5px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: brand-gradient 4s linear infinite, brand-rise .7s ease both;
}
.brand:hover .brand__name { animation-duration: 1.6s, .7s; }
.brand__slogan { font-size: .72rem; font-weight: 600; color: var(--ink-soft); animation: brand-rise .7s ease .08s both; }
@keyframes brand-gradient {
  to { background-position: 200% center; }
}
@keyframes brand-sheen {
  0%, 60% { transform: translateX(-120%); }
  80%, 100% { transform: translateX(120%); }
}
@keyframes brand-rise {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .brand__name, .brand__slogan, .brand__logo-wrap::after { animation: none; }
  .brand__name { background-position: 0 center; }
}
.main-nav { display: flex; gap: 28px; }
.main-nav a { font-weight: 600; color: var(--ink-soft); }
.main-nav a:hover { color: var(--primary); }
.header__actions { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: none; background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ===================== Hero ===================== */
.hero {
  position: relative;
  padding: 100px 0 70px;
  overflow: hidden;
  color: var(--on-dark);
  background: var(--grad-night);
}
.hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 85% 10%, var(--glow-iris), transparent 60%),
    radial-gradient(500px 260px at 10% 90%, var(--glow-lilac), transparent 60%);
  pointer-events: none;
}
.hero__inner { position: relative; max-width: 760px; }
.hero__brand {
  display: inline-block;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, var(--ramp-7), var(--accent), var(--ramp-7));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 20px var(--glow-lilac));
  animation: hero-brand-gradient 4s linear infinite, hero-brand-in .8s cubic-bezier(.2,.7,.3,1) both;
}
.hero__brand-dot {
  -webkit-text-fill-color: var(--accent);
  color: var(--accent);
  animation: hero-brand-pulse 1.8s ease-in-out infinite;
  display: inline-block;
}
@keyframes hero-brand-gradient {
  to { background-position: 200% center; }
}
@keyframes hero-brand-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); letter-spacing: 6px; }
  to { opacity: 1; transform: translateY(0) scale(1); letter-spacing: 1px; }
}
@keyframes hero-brand-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__brand, .hero__brand-dot { animation: none; }
  .hero__brand { background-position: 0 center; }
}
.hero .eyebrow { background: var(--on-dark-line); color: var(--ramp-7); }
.hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
.hero__lead { color: var(--on-dark-strong); font-size: 1.08rem; max-width: 640px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 40px; }
.hero__stats { display: flex; gap: 36px; flex-wrap: wrap; }
.hero__stats li { display: flex; flex-direction: column; }
.hero__stats strong { font-size: 1.8rem; font-weight: 800; }
.hero__stats span { color: var(--on-dark-muted); font-size: .85rem; }

/* ===================== Section head ===================== */
.section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.section-head p { margin: 0 auto; }
.templates-section, .how-section, .pricing-section { padding: 90px 0; }
.templates-section, .pricing-section {
  background: var(--bg);
  transition: background-color .45s ease, color .45s ease;
}
.how-section { background: var(--card); }

/* ===================== Filters ===================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
}
.filter-btn {
  border: 1px solid var(--border);
  background: var(--card);
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all .15s ease;
}
.filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.filter-btn.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-dark); }

/* ===================== Project-type switch ===================== */
.type-switch {
  display: grid;
  /* three modes now: portfolios, wedding invitations, systems */
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1020px;
  margin: 0 auto 32px;
}
.type-switch__btn {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: start;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: border-color .38s ease, background-color .38s ease, color .38s ease,
              transform .18s ease, box-shadow .38s ease;
}
.type-switch__btn:hover { transform: translateY(-3px); border-color: var(--ramp-5); }
.type-switch__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity .38s ease;
}
.type-switch__btn.is-active::before { opacity: 1; }
.type-switch__btn.is-active {
  border-color: var(--ramp-2);
  color: var(--on-dark);
  box-shadow: 0 14px 30px -14px var(--shadow-ink-strong);
}
.type-switch__icon { font-size: 1.7rem; line-height: 1; flex: none; }
.type-switch__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.type-switch__text strong { font-size: 1rem; font-weight: 800; }
.type-switch__text small { font-size: .78rem; color: var(--ink-soft); font-weight: 600; transition: color .38s ease; }
.type-switch__btn.is-active .type-switch__text small { color: var(--ramp-7); }
.type-switch--compact { margin-bottom: 28px; max-width: 780px; }
.type-switch--compact .type-switch__btn { padding: 13px 16px; justify-content: center; }
.type-switch--compact .type-switch__icon { font-size: 1.25rem; }
.type-switch--compact .type-switch__text strong { font-size: .92rem; }

/* ===================== "Our Work" theme =====================
   The أعمالنا section only — real client projects get their own palette so
   they read as our own work rather than as another catalog entry. Applied
   statically in the markup (it never toggles), same token pattern as
   .theme-wedding. */
.theme-work {
  /* ---- Jacaranda palette ---- */
  --amethyst: #8e72bc;
  --lavender: #a38ed2;
  --wisteria: #b8aae7;
  --olivine:  #bace89;
  --reseda:   #768163;

  /* ---- Shades & tints derived from the palette above ---- */
  --amethyst-deep: #4a3a66;
  --amethyst-mid:  #63508a;
  --lavender-pale: #ebe5f7;
  --lavender-wash: #f4f1fb;
  --lavender-line: #d9cff0;

  --ramp-1: var(--amethyst-deep);
  --ramp-2: var(--amethyst-mid);
  --ramp-3: var(--amethyst);
  --ramp-4: var(--reseda);
  --ramp-5: var(--lavender);
  --ramp-6: var(--wisteria);
  --ramp-7: var(--olivine);
  --ramp-8: var(--lavender-pale);

  /* Same caveat as .theme-wedding: a var() inside a custom-property
     declaration resolves where it is declared, so every ramp-derived token
     has to be repeated here. */
  --ink: var(--ramp-1);
  --ink-soft: var(--ramp-2);
  --bg: var(--lavender-wash);
  --border: var(--lavender-line);
  --primary: var(--ramp-2);
  --primary-dark: var(--ramp-1);
  --primary-hover: var(--ramp-3);
  --primary-light: var(--ramp-8);
  --accent: var(--ramp-7);
  --success: var(--ramp-4);
  --danger: var(--ramp-1);

  --shadow-ink: rgba(74, 58, 102, .18);
  --shadow-ink-strong: rgba(74, 58, 102, .28);
  --shadow-deep: rgba(74, 58, 102, .38);
  --shadow: 0 10px 30px -12px var(--shadow-ink);
  --grad-brand: linear-gradient(135deg, var(--ramp-1), var(--ramp-3));

  color: var(--ink);
}
/* the section keeps a white ground; the cards carry the lavender wash */
.work-section.theme-work { background: var(--card); }
/* one purple project, one green — between them they use all five colors */
.theme-work .work-card__thumb--joo { background: linear-gradient(135deg, var(--amethyst), var(--wisteria)); }
.theme-work .work-card__thumb--nokhba { background: linear-gradient(135deg, var(--olivine), var(--reseda)); }

/* ===================== Mode-switch transitions =====================
   Switching modes swaps both the content and the palette at once, so the two
   swap regions fade out, change underneath, then ease back to their new
   height. Gradients can't be transitioned, so the fade covers the snap. */
.catalog-swap, .pricing-swap {
  transition: opacity .24s ease, transform .24s ease;
}
.catalog-swap.is-swapping, .pricing-swap.is-swapping {
  opacity: 0;
  transform: translateY(10px);
}
.catalog-swap.is-resizing, .pricing-swap.is-resizing {
  overflow: hidden;
  transition: opacity .24s ease, transform .24s ease, height .42s cubic-bezier(.4, 0, .2, 1);
}
.section-head p { transition: opacity .24s ease; }
.section-head p.is-swapping { opacity: 0; }

@keyframes card-in {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
/* `backwards` (not `both`) so the finished card drops back to its own styles
   and the :hover lift keeps working. */
.tpl-card {
  animation: card-in .42s cubic-bezier(.2, .7, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.eyebrow, .wedding-note, .duration-note, .tpl-card__duration, .addon-icon,
.pricing-showcase__addons li, .tpl-card__price-tag, .tpl-card__cat-tag {
  transition: background-color .45s ease, border-color .45s ease, color .45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .catalog-swap, .pricing-swap, .section-head p,
  .templates-section, .pricing-section,
  .type-switch__btn, .type-switch__btn::before { transition: none; }
  .tpl-card { animation: none; }
}

/* ===================== Wedding note ===================== */
.wedding-note {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto 40px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px dashed var(--ramp-5);
  background: var(--primary-light);
}
.wedding-note[hidden] { display: none; }
.wedding-note__icon { font-size: 1.4rem; flex: none; }
.wedding-note p { margin: 0; font-size: .9rem; color: var(--ramp-2); }
.wedding-note strong { font-weight: 800; }

/* ===================== Custom Wedding Sub-section ===================== */
.custom-wedding-block {
  margin: 0 0 42px;
  padding: 32px 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: background-color .45s ease, border-color .45s ease;
}
.custom-wedding-block[hidden] { display: none; }
.custom-wedding-block::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ramp-2), var(--ramp-4), var(--ramp-5));
}
.custom-wedding-head {
  margin-bottom: 24px;
}
.custom-wedding-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 999px;
  margin-bottom: 12px;
}
.custom-wedding-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.3;
}
.custom-wedding-desc {
  font-size: .95rem;
  color: var(--ink-soft);
  margin: 0;
  max-width: 720px;
  line-height: 1.65;
}
.custom-wedding-card-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
  gap: 24px;
}

/* ===================== Ready Wedding Templates Header ===================== */
.ready-wedding-block {
  margin: 0 0 24px;
}
.ready-wedding-block[hidden] { display: none; }
.ready-wedding-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.ready-wedding-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 6px;
}
.ready-wedding-desc {
  font-size: .9rem;
  color: var(--ink-soft);
  margin: 0;
}


/* ===================== Systems: custom dashboards =====================
   Systems have nothing to preview in an iframe — the block sells the idea
   with a mock dashboard, then lets the visitor tick the modules they need
   so the enquiry arrives as a concrete list. */
.systems-block[hidden] { display: none; }
.grid[hidden] { display: none; }

.sys-hero {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 34px;
  align-items: center;
  margin: 0 0 52px;
  padding: 34px 30px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: background-color .45s ease, border-color .45s ease;
}
.sys-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ramp-1), var(--ramp-3), var(--ramp-5));
}
.sys-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 999px;
  margin-bottom: 12px;
}
.sys-hero__title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.3;
}
.sys-hero__desc {
  font-size: .95rem;
  color: var(--ink-soft);
  line-height: 1.75;
  margin: 0 0 18px;
}
.sys-hero__desc strong { color: var(--primary); font-weight: 800; }
.sys-hero__points { display: flex; flex-direction: column; gap: 9px; }
.sys-hero__points li {
  font-size: .88rem;
  color: var(--ink);
  padding-inline-start: 24px;
  position: relative;
}
.sys-hero__points li::before {
  content: '✓';
  position: absolute; inset-inline-start: 0; top: 0;
  color: var(--ramp-3); font-weight: 800;
}

/* ---- Mock dashboard ---- */
.sys-mock {
  border-radius: 14px;
  overflow: hidden;
  background: var(--ramp-1);
  box-shadow: 0 24px 48px -22px var(--shadow-deep);
  border: 1px solid var(--ramp-3);
  direction: rtl;
  min-width: 0;
}
.sys-mock__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--ramp-2);
  border-bottom: 1px solid var(--on-dark-line);
}
.sys-mock__chrome span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--on-dark-faint);
}
.sys-mock__chrome em {
  margin-inline-start: auto;
  font-style: normal;
  font-size: .68rem;
  color: var(--on-dark-muted);
  direction: ltr;
}
.sys-mock__body { display: grid; grid-template-columns: 116px 1fr; min-height: 300px; }
.sys-mock__side {
  padding: 14px 10px;
  background: var(--ramp-1);
  border-inline-end: 1px solid var(--on-dark-line);
}
.sys-mock__logo {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  color: var(--ramp-5);
  margin-bottom: 12px;
  padding-inline-start: 6px;
}
.sys-mock__side ul { display: flex; flex-direction: column; gap: 4px; }
.sys-mock__side li {
  font-size: .7rem;
  color: var(--on-dark-muted);
  padding: 7px 8px;
  border-radius: 8px;
}
.sys-mock__side li.is-active { background: var(--on-dark-veil); color: var(--on-dark); font-weight: 700; }
.sys-mock__main { padding: 14px; background: var(--ramp-2); display: flex; flex-direction: column; gap: 12px; }
.sys-mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sys-mock__kpi {
  background: var(--on-dark-veil);
  border: 1px solid var(--on-dark-line);
  border-radius: 10px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sys-mock__kpi span { font-size: .62rem; color: var(--on-dark-muted); }
.sys-mock__kpi strong { font-size: .95rem; color: var(--on-dark); font-weight: 800; }
.sys-mock__kpi em { font-style: normal; font-size: .6rem; font-weight: 700; }
.sys-mock__kpi em.is-up { color: var(--ramp-5); }
.sys-mock__kpi em.is-down { color: var(--ramp-6); }
.sys-mock__chart {
  background: var(--on-dark-veil);
  border: 1px solid var(--on-dark-line);
  border-radius: 10px;
  padding: 10px;
}
.sys-mock__chart-head { font-size: .64rem; color: var(--on-dark-muted); margin-bottom: 8px; }
.sys-mock__bars { display: flex; align-items: flex-end; gap: 6px; height: 62px; }
.sys-mock__bars i {
  flex: 1;
  height: var(--h);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--ramp-5), var(--ramp-3));
  transform-origin: bottom;
  animation: sys-bar-grow .7s cubic-bezier(.2, .7, .3, 1) backwards;
}
.sys-mock__bars i:nth-child(2) { animation-delay: .06s; }
.sys-mock__bars i:nth-child(3) { animation-delay: .12s; }
.sys-mock__bars i:nth-child(4) { animation-delay: .18s; }
.sys-mock__bars i:nth-child(5) { animation-delay: .24s; }
.sys-mock__bars i:nth-child(6) { animation-delay: .30s; }
.sys-mock__bars i:nth-child(7) { animation-delay: .36s; }
@keyframes sys-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.sys-mock__table {
  background: var(--on-dark-veil);
  border: 1px solid var(--on-dark-line);
  border-radius: 10px;
  overflow: hidden;
}
.sys-mock__row {
  display: grid;
  grid-template-columns: 1.4fr .7fr .7fr .8fr;
  gap: 6px;
  align-items: center;
  padding: 7px 10px;
  font-size: .66rem;
  color: var(--on-dark-strong);
  border-bottom: 1px solid var(--on-dark-line);
}
.sys-mock__row:last-child { border-bottom: none; }
.sys-mock__row--head { color: var(--on-dark-faint); font-weight: 700; font-size: .6rem; }
.sys-mock__row .is-low { color: var(--ramp-6); font-weight: 800; }
.sys-mock__ops { display: flex; gap: 5px; justify-content: flex-end; }
.sys-mock__ops b {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 5px;
  background: var(--on-dark-line);
  font-size: .6rem;
  font-weight: 400;
}

.sys-request {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 22px 26px;
  border-radius: var(--radius);
  background: var(--grad-night);
  color: var(--on-dark);
  box-shadow: 0 18px 40px -20px var(--shadow-deep);
}
.sys-request__summary { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sys-request__summary strong { font-size: 1rem; font-weight: 800; }
.sys-request__summary span { font-size: .84rem; color: var(--on-dark-muted); line-height: 1.6; }
.sys-request__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sys-request__actions .btn--outline { border-color: var(--on-dark-line); color: var(--on-dark); }
.sys-request__actions .btn--outline:hover { background: var(--on-dark-veil); color: var(--on-dark); }

@media (prefers-reduced-motion: reduce) {
  .sys-mock__bars i { animation: none; }
}

/* ===================== Duration note (pricing) ===================== */
.duration-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--on-dark-veil);
  border: 1px solid var(--on-dark-line);
  margin: 0 0 22px;
}
.duration-note__icon { font-size: 1.25rem; line-height: 1.3; flex: none; }
.duration-note div { display: flex; flex-direction: column; gap: 4px; }
.duration-note strong { font-size: .88rem; color: var(--ramp-6); font-weight: 800; }
.duration-note span { font-size: .8rem; color: var(--on-dark-muted); line-height: 1.6; }

/* ===================== Template grid & cards ===================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
}
.tpl-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease,
              background-color .45s ease, border-color .45s ease;
}
.tpl-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -16px var(--shadow-ink-strong); }

.tpl-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ramp-1), var(--ramp-3));
}
.tpl-card__icon {
  font-size: 4.2rem;
  filter: drop-shadow(0 8px 18px var(--shadow-deep));
}
.tpl-card__thumb-chrome {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: var(--veil-dark-soft);
}
.tpl-card__thumb-chrome span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sheen);
}

.tpl-card[data-category="accountants"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-5), var(--ramp-1)); }
.tpl-card[data-category="doctors"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-6), var(--ramp-2)); }
.tpl-card[data-category="engineers"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-3), var(--ramp-5)); }
.tpl-card[data-category="graphic_designers"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-7), var(--ramp-4)); }
.tpl-card[data-category="gym"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-2), var(--ramp-6)); }
.tpl-card[data-category="interior_design"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-4), var(--ramp-1)); }
.tpl-card[data-category="lawyers"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-1), var(--ramp-5)); }
.tpl-card[data-category="photographers"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-8), var(--ramp-3)); }
.tpl-card[data-category="teachers"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-5), var(--ramp-7)); }
.tpl-card[data-category="wedding_invitations"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-7), var(--ramp-2)); }
.tpl-card__overlay {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--veil-dark);
  opacity: 0;
  transition: opacity .2s ease;
}
.tpl-card:hover .tpl-card__overlay { opacity: 1; }
.tpl-card__price-tag {
  position: absolute;
  top: 40px; inset-inline-end: 12px;
  background: var(--white);
  color: var(--primary-dark);
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .82rem;
  box-shadow: 0 4px 12px var(--shadow-ink);
  z-index: 2;
  white-space: nowrap;
}
.tpl-card__price-tag s { font-weight: 500; font-size: .7rem; color: var(--ink-soft); opacity: .8; margin-inline-end: 3px; }
.tpl-card__cat-tag {
  position: absolute;
  top: 40px; inset-inline-start: 12px;
  background: var(--chip-light);
  color: var(--ink);
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .72rem;
  z-index: 2;
}

.tpl-card__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.tpl-card__title { font-size: 1.05rem; margin: 0; }
.tpl-card__desc { font-size: .88rem; margin: 0; flex: 1; }
.tpl-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}
.tpl-card__price { font-weight: 800; font-size: 1.15rem; color: var(--primary-dark); }
.tpl-card__price-old { font-weight: 500; font-size: .85rem; color: var(--ink-soft); opacity: .75; margin-inline-end: 2px; }
.tpl-card__actions { display: flex; gap: 8px; }

.tpl-card--coming-soon .tpl-card__thumb { filter: grayscale(.35); }
.tpl-card--coming-soon .tpl-card__icon { opacity: .75; }
.tpl-card__price-tag--soon {
  background: var(--primary);
  color: var(--on-dark);
}
.tpl-card__soon-label {
  font-weight: 700;
  font-size: .85rem;
  color: var(--ink-soft);
}


/* Per-design tones so each wedding invitation card reads differently */
.tpl-card[data-tone="1"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-7), var(--ramp-2)); }
.tpl-card[data-tone="2"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-6), var(--ramp-4)); }
.tpl-card[data-tone="3"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-8), var(--ramp-5)); }
.tpl-card[data-tone="4"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-5), var(--ramp-1)); }
.tpl-card[data-tone="5"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-3), var(--ramp-6)); }
.tpl-card[data-tone="6"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-4), var(--ramp-8)); }
.tpl-card[data-tone="7"] .tpl-card__thumb { background: linear-gradient(135deg, var(--ramp-2), var(--ramp-6)); }

.tpl-card__duration {
  align-self: flex-start;
  font-size: .75rem;
  font-weight: 700;
  color: var(--ramp-2);
  background: var(--primary-light);
  border-radius: 999px;
  padding: 4px 11px;
}

/* ===================== Wedding invitation cards =====================
   The invitation's own photo fills the tile. At rest only the title sits at
   the bottom edge; hover (or keyboard focus) slides the rest up into view and
   deepens the scrim behind it. Below 600px — and on any touch device — the
   whole card is shown expanded, since there is no hover to reveal it with. */
.wed-card {
  --wed-d: 620ms;
  --wed-e: cubic-bezier(.19, 1, .22, 1);
  --slide-hold: 4200ms; /* keep in sync with SLIDE_HOLD_MS in script.js */
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: 400px;
  padding: 20px;
  border-radius: var(--radius);
  color: var(--on-dark);
  background: var(--ramp-1);
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: card-in .42s cubic-bezier(.2, .7, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.wed-card:hover,
.wed-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -18px var(--shadow-ink-strong);
}

/* The photos. A stack of shots of the invitation itself, cross-fading one by
   one; the layer is taller than the card so it can drift on hover. */
.wed-card__media {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 110%;
  overflow: hidden;
  transition: transform calc(var(--wed-d) * 1.5) var(--wed-e);
  pointer-events: none;
}
.wed-card__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 20%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 900ms ease-in-out;
}
/* Full-page screenshots are wider than the tile, so they sit centred rather
   than framed near their top edge. The motion itself stays the same. */
.wed-card__slide.is-wide { background-position: 50% 50%; }

/* Every slide moves the same way: a slow push in, then the next photo takes
   over. */
.wed-card__slide.is-active {
  opacity: 1;
  will-change: opacity, transform;  /* only the slide on show gets a layer */
  animation: wed-zoom calc(var(--slide-hold, 4200ms) + 900ms) linear forwards;
}

@keyframes wed-zoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1.14); }
}

/* Legibility scrim — the one gradient this theme allows, because text sits on
   a photo here. Twice the card's height: the pale top half shows at rest, the
   deep bottom half slides in on hover. */
.wed-card::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 200%;
  background-image: linear-gradient(
    to bottom,
    rgba(45, 44, 74, 0) 0%,
    rgba(45, 44, 74, .04) 12%,
    rgba(45, 44, 74, .12) 25%,
    rgba(45, 44, 74, .26) 37%,
    rgba(45, 44, 74, .48) 50%,
    rgba(45, 44, 74, .60) 62%,
    rgba(45, 44, 74, .70) 75%,
    rgba(45, 44, 74, .78) 88%,
    rgba(45, 44, 74, .82) 100%
  );
  transform: translateY(-50%);
  transition: transform calc(var(--wed-d) * 2) var(--wed-e);
  pointer-events: none;
}

/* Whole-card preview link, under the content so the buttons stay clickable. */
.wed-card__open {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.wed-card__open:focus-visible { outline: 2px solid var(--ramp-5); outline-offset: -6px; }

.wed-card__price-tag {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  z-index: 2;
  background: var(--chip-light);
  color: var(--primary-dark);
  font-weight: 800;
  font-size: .78rem;
  padding: 6px 13px;
  border-radius: 999px;
}

.wed-card__content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--wed-d) var(--wed-e);
  pointer-events: none; /* clicks fall through to the card link */
}
.wed-card__content a { pointer-events: auto; }

/* A plate that travels with the text, so a pale invitation photo can't wash
   the title out. Bleeds past the card padding to reach the edges. */
.wed-card__content::before {
  content: "";
  position: absolute;
  inset: -22px -20px -20px;
  z-index: -1;
  background-image: linear-gradient(
    to top,
    rgba(45, 44, 74, .70) 0%,
    rgba(45, 44, 74, .52) 45%,
    rgba(45, 44, 74, .22) 78%,
    rgba(45, 44, 74, 0) 100%
  );
}

.wed-card__title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--on-dark);
  text-shadow: 0 1px 12px rgba(45, 44, 74, .55);
}
.wed-card__desc {
  margin: 0;
  font-size: .87rem;
  line-height: 1.7;
  color: var(--on-dark-strong);
}
.wed-card__duration {
  align-self: flex-start;
  font-size: .74rem;
  font-weight: 700;
  color: var(--ramp-6);
  background: var(--on-dark-veil);
  border: 1px solid var(--on-dark-line);
  border-radius: 999px;
  padding: 4px 11px;
}
.wed-card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

/* Fallback tint per invitation, visible until its photo loads. */
.wed-card[data-tone="1"] { background: var(--ramp-1); }
.wed-card[data-tone="2"] { background: var(--ramp-2); }
.wed-card[data-tone="3"] { background: var(--ramp-3); }
.wed-card[data-tone="4"] { background: var(--ramp-4); }
.wed-card[data-tone="5"] { background: var(--ramp-2); }
.wed-card[data-tone="6"] { background: var(--ramp-3); }
.wed-card[data-tone="7"] { background: var(--ramp-1); }
.wed-card[data-tone="8"] { background: var(--ramp-4); }

@media (hover: hover) and (min-width: 600px) {
  .wed-card::after { transform: translateY(0); }

  /* Only the title's strip stays above the bottom edge. */
  .wed-card__content { transform: translateY(calc(100% - 5rem)); }
  .wed-card__content > *:not(.wed-card__title) {
    opacity: 0;
    transform: translateY(1rem);
    transition: transform var(--wed-d) var(--wed-e), opacity var(--wed-d) var(--wed-e);
  }

  .wed-card:hover .wed-card__media,
  .wed-card:focus-within .wed-card__media { transform: translateY(-4%); }
  .wed-card:hover::after,
  .wed-card:focus-within::after { transform: translateY(-50%); }
  .wed-card:hover .wed-card__content,
  .wed-card:focus-within .wed-card__content { transform: translateY(0); }
  .wed-card:hover .wed-card__content > *:not(.wed-card__title),
  .wed-card:focus-within .wed-card__content > *:not(.wed-card__title) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--wed-d) / 8);
  }

  /* Keyboard focus should land on the finished state, not animate into it. */
  .wed-card:focus-within .wed-card__media,
  .wed-card:focus-within::after,
  .wed-card:focus-within .wed-card__content,
  .wed-card:focus-within .wed-card__content > *:not(.wed-card__title) {
    transition-duration: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wed-card { animation: none; }
  .wed-card,
  .wed-card__media,
  .wed-card::after,
  .wed-card__content,
  .wed-card__content > * { transition: none; }
  /* No autoplay motion: the first shot simply stays put. */
  .wed-card__slide { transition: none; }
  .wed-card__slide.is-active { animation: none; transform: scale(1.02); }
}

.filters[hidden] { display: none; }
.pricing-showcase[hidden] { display: none; }

/* ===================== Our Work ===================== */
.work-section { padding: 90px 0; background: var(--card); }
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 26px;
  max-width: 980px;
  margin: 0 auto;
}
.work-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.work-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -16px var(--shadow-ink-strong); }
.work-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.work-card__thumb--joo { background: linear-gradient(135deg, var(--ramp-1), var(--ramp-5)); }
.work-card__thumb--nokhba { background: linear-gradient(135deg, var(--ramp-6), var(--ramp-2)); }
.work-card__icon { font-size: 4rem; filter: drop-shadow(0 8px 18px var(--shadow-deep)); }
.work-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.work-card__tag {
  align-self: flex-start;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: .74rem;
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.work-card__body h3 { font-size: 1.15rem; margin: 0; }
.work-card__body p { font-size: .88rem; margin: 0; }
.work-card__link { font-weight: 700; font-size: .88rem; color: var(--primary); margin-top: 8px; }
.work-card:hover .work-card__link { text-decoration: underline; }

/* ===================== How it works ===================== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.step {
  padding: 26px 22px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border);
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-dark);
  font-weight: 800;
  margin-bottom: 14px;
}
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { font-size: .9rem; margin: 0; }

/* ===================== Pricing ===================== */
.pricing-showcase {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 20px);
  box-shadow: var(--shadow-lg, var(--shadow));
  overflow: hidden;
}

.pricing-showcase__main {
  position: relative;
  padding: 44px 40px;
  color: var(--on-dark);
  background: var(--grad-night);
  display: flex;
  flex-direction: column;
}
.pricing-showcase__badge {
  align-self: flex-start;
  background: var(--on-dark-line);
  color: var(--ramp-7);
  font-size: .72rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.pricing-showcase__price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 10px;
}
.pricing-showcase__price {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  margin: 0;
}
.pricing-showcase__price span { font-size: 1.15rem; font-weight: 700; color: var(--on-dark-muted); margin-inline-start: 6px; }
.pricing-showcase__old-price {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--on-dark-faint);
  text-decoration: line-through;
}
.pricing-showcase__discount {
  font-size: .78rem;
  font-weight: 800;
  color: var(--ramp-2);
  background: var(--ramp-6);
  padding: 4px 10px;
  border-radius: 999px;
}
.pricing-showcase__desc { font-size: .92rem; color: var(--on-dark-muted); margin: 0 0 22px; max-width: 40ch; }

.sections-info {
  background: var(--on-dark-veil);
  border: 1px solid var(--on-dark-line);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 22px;
}
.sections-info summary {
  cursor: pointer;
  font-size: .85rem;
  font-weight: 700;
  color: var(--on-dark);
  list-style: none;
}
.sections-info summary::-webkit-details-marker { display: none; }
.sections-info summary::after {
  content: '＋';
  display: inline-block;
  margin-inline-start: 8px;
  color: var(--on-dark-muted);
  transition: transform .2s ease;
}
.sections-info[open] summary::after { transform: rotate(45deg); }
.sections-info__intro { font-size: .82rem; color: var(--on-dark-muted); margin: 12px 0 10px; }
.sections-info__like { font-size: 1.05rem; font-weight: 800; color: var(--ramp-6); }
.sections-info__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin: 0 0 12px;
}
.sections-info__list li { display: flex; flex-direction: column; gap: 2px; }
.sections-info__list strong { font-size: .82rem; color: var(--on-dark); font-weight: 700; }
.sections-info__list span { font-size: .76rem; color: var(--on-dark-faint); line-height: 1.5; }
.sections-info__note { font-size: .76rem; color: var(--on-dark-faint); margin: 0; }
.pricing-showcase__features { display: flex; flex-direction: column; gap: 11px; margin: 0 0 28px; }
.pricing-showcase__features li {
  font-size: .9rem;
  color: var(--on-dark-strong);
  padding-inline-start: 24px;
  position: relative;
}
.pricing-showcase__features li::before {
  content: '✓';
  position: absolute; inset-inline-start: 0; top: 0;
  color: var(--accent); font-weight: 800;
}
.pricing-showcase__main .btn { align-self: flex-start; margin-top: auto; }
.pricing-showcase__note { font-size: .78rem; color: var(--on-dark-muted); margin-top: 12px; }
.pricing-showcase__note-price {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--ramp-6);
  letter-spacing: 0.5px;
}

.pricing-showcase__addons { padding: 44px 40px; }
.pricing-showcase__addons h3 { font-size: 1.15rem; margin-bottom: 6px; }
.pricing-showcase__addons > p { font-size: .88rem; color: var(--ink-soft); margin: 0 0 22px; }
.pricing-showcase__addons ul { display: flex; flex-direction: column; gap: 4px; }
.pricing-showcase__addons li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.pricing-showcase__addons li:last-child { border-bottom: none; padding-bottom: 0; }
.addon-icon {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light);
  color: var(--primary-dark);
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 700;
}
.addon-label { flex: 1; font-size: .92rem; color: var(--ink); font-weight: 600; }
.addon-label small { display: block; font-size: .78rem; color: var(--ink-soft); font-weight: 500; }
.pricing-showcase__addons strong { color: var(--primary-dark); font-weight: 800; font-size: .92rem; white-space: nowrap; }
.pricing-showcase__addons strong.is-free { color: var(--success); }

/* ===================== Payment Methods ===================== */
.payment-methods {
  margin-top: 48px;
  padding: 36px 32px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: background-color .45s ease, border-color .45s ease;
}

.payment-methods__head {
  margin-bottom: 24px;
  text-align: center;
}

.payment-methods__head .eyebrow {
  margin-bottom: 8px;
}

.payment-methods__head h3 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 6px;
}

.payment-methods__head p {
  font-size: .92rem;
  color: var(--ink-soft);
  margin: 0;
}

.payment-methods__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

.payment-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.payment-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -10px var(--shadow-ink);
  border-color: var(--primary);
}

.payment-card__logo-wrap {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.payment-card__logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.payment-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
  min-width: 0;
}

.payment-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.payment-card__number-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.payment-card__label {
  font-size: .82rem;
  color: var(--ink-soft);
}

.payment-card__number {
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary);
  font-family: 'Cairo', 'Manrope', monospace;
  background: var(--card);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  letter-spacing: 0.5px;
}

.btn-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: .78rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--primary);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s ease;
}

.btn-copy:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.btn-copy.is-copied {
  background: var(--success);
  color: var(--white);
  border-color: var(--success);
}

.payment-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 2px;
  transition: color .2s ease;
}

.payment-card__link:hover {
  color: var(--accent);
}

@media (max-width: 600px) {
  .payment-methods {
    padding: 24px 16px;
  }
  .payment-card {
    padding: 16px;
    gap: 14px;
  }
  .payment-card__logo-wrap {
    width: 50px;
    height: 50px;
  }
}

/* ===================== Contact ===================== */
.contact-section { padding: 90px 0; background: var(--grad-night); color: var(--on-dark); }
.contact__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: start;
}
.contact-section .eyebrow { background: var(--on-dark-line); color: var(--ramp-7); }
.contact-section h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.contact-section p { color: var(--on-dark-muted); }

.contact__list { display: flex; flex-direction: column; gap: 20px; margin: 28px 0; }
.contact__list li { display: flex; align-items: center; gap: 16px; }
.contact__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--on-dark-veil);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.contact__label { display: block; font-size: .78rem; color: var(--on-dark-faint); margin-bottom: 2px; }
.contact__list a { font-weight: 700; font-size: 1.02rem; }
.contact__list a:hover { color: var(--accent); }
.contact__quick { display: flex; gap: 12px; flex-wrap: wrap; }

.contact-form {
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-form h3 { margin-bottom: 4px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--ink-soft); }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-family: inherit;
  font-size: .95rem;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  resize: vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.contact-form input.is-invalid,
.contact-form textarea.is-invalid { border-color: var(--danger); border-width: 2px; }
.contact-form input.is-invalid:focus,
.contact-form textarea.is-invalid:focus { outline-color: var(--danger); }
.field-error { font-size: .78rem; font-weight: 700; color: var(--danger); }
.contact-form__note { font-size: .78rem; color: var(--ink-soft); margin: 0; text-align: center; }

/* ===================== Footer ===================== */
.site-footer { background: var(--ramp-1); color: var(--on-dark-muted); padding: 34px 0; }
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.brand--footer .brand__slogan { color: var(--on-dark-faint); }
.footer__copy { margin: 0; font-size: .85rem; color: var(--on-dark-faint); }
.footer__links { display: flex; gap: 20px; }
.footer__links a:hover { color: var(--accent); }

/* ===================== Responsive ===================== */
@media (max-width: 900px) {
  .contact__inner { grid-template-columns: 1fr; }
  .pricing-showcase { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .main-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg);
    flex-direction: column;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    display: none;
    gap: 16px;
  }
  .main-nav.is-open { display: flex; }
  .nav-toggle { display: flex; }
  .header__actions .btn--sm { display: none; }
  .hero { padding: 70px 0 50px; }
  .hero__cta .btn { flex: 1; }
  .templates-section, .work-section, .how-section, .pricing-section, .contact-section { padding: 60px 0; }
  .pricing-showcase__main, .pricing-showcase__addons { padding: 30px 24px; }
}

@media (max-width: 480px) {
  .header__actions .btn--sm { display: inline-flex; }
  .hero__stats { gap: 22px; }
  .type-switch { grid-template-columns: 1fr; }
  .sections-info__list { grid-template-columns: 1fr; }
  .custom-wedding-block { padding: 22px 16px; }
  .custom-wedding-title { font-size: 1.3rem; }
}

/* ---- Systems block: three-up switch and mock dashboard on small screens ---- */
@media (max-width: 940px) {
  .type-switch { grid-template-columns: 1fr; }
  .sys-hero { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px) {
  .sys-hero { padding: 24px 18px; }
  .sys-hero__title { font-size: 1.35rem; }
  .sys-mock__body { grid-template-columns: 1fr; }
  .sys-mock__side { border-inline-end: none; border-bottom: 1px solid var(--on-dark-line); }
  .sys-mock__side ul { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .sys-mock__kpis { grid-template-columns: 1fr; }
  .sys-request { flex-direction: column; align-items: stretch; }
  .sys-request__actions .btn { flex: 1; justify-content: center; }
}