/* =========================================================
   RAJA INVITATION
   PROFESSIONAL RESPONSIVE WEBSITE
   FINAL UTUH
   ========================================================= */

:root {
  --navy: #0c1220;
  --navy-2: #121b2c;
  --navy-3: #1b2638;

  --gold: #c7a86d;
  --gold-dark: #96743e;
  --gold-soft: #eadfc9;

  --cream: #f5f1ea;
  --cream-light: #fbf9f5;

  --white: #ffffff;
  --black: #111111;

  --text: #20242c;
  --muted: #6e7480;

  --line: rgba(15, 23, 42, .09);
  --line-dark: rgba(255,255,255,.09);

  --shadow-small:
    0 14px 35px rgba(16,24,40,.08);

  --shadow:
    0 30px 80px rgba(16,24,40,.13);

  --container:
    1220px;

  --radius-sm:
    14px;

  --radius:
    24px;

  --radius-lg:
    36px;

  --header-height:
    82px;
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html {
  width: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}


body {
  width: 100%;
  min-height: 100vh;

  overflow-x: hidden;

  background:
    var(--cream-light);

  color:
    var(--text);

  font-family:
    "DM Sans",
    sans-serif;

  font-size:
    16px;

  line-height:
    1.65;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}


body.menu-open,
body.modal-open {
  overflow: hidden;
}


a {
  color: inherit;
  text-decoration: none;
}


button,
input {
  font: inherit;
}


button {
  cursor: pointer;
}


img {
  display: block;
  max-width: 100%;
}


/* =========================================================
   GLOBAL
   ========================================================= */

.container {
  width:
    min(
      calc(100% - 48px),
      var(--container)
    );

  margin-inline:
    auto;
}


.section {
  position: relative;

  padding:
    118px 0;
}


.section-eyebrow {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  margin-bottom:
    16px;

  color:
    var(--gold-dark);

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    .72rem;

  font-weight:
    700;

  letter-spacing:
    .19em;

  text-transform:
    uppercase;
}


.section-eyebrow-light {
  color:
    #dec590;
}


.section-heading {
  max-width:
    700px;
}


.section-heading-center {
  margin-inline:
    auto;

  margin-bottom:
    52px;

  text-align:
    center;
}


.section-heading h2,
.feature-intro h2,
.personalization-content h2,
.faq-heading h2,
.contact-copy h2,
.why-copy h2 {
  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(
      2.4rem,
      4.3vw,
      4.3rem
    );

  line-height:
    1.04;

  letter-spacing:
    -.035em;
}


.section-heading p,
.feature-intro > p,
.personalization-content > p,
.faq-heading > p,
.contact-copy > p,
.why-copy > p {
  margin-top:
    20px;

  color:
    var(--muted);

  font-size:
    1rem;

  line-height:
    1.8;
}


/* =========================================================
   BUTTON
   ========================================================= */

.btn {
  min-height:
    52px;

  padding:
    0 23px;

  border:
    1px solid transparent;

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  text-align:
    center;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    .88rem;

  font-weight:
    700;

  transition:
    transform .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease;
}


.btn:hover {
  transform:
    translateY(-2px);
}


.btn-primary {
  background:
    var(--navy);

  color:
    var(--white);

  box-shadow:
    0 15px 35px rgba(12,18,32,.18);
}


.btn-primary:hover {
  background:
    #151f31;
}


.btn-outline {
  border-color:
    rgba(12,18,32,.16);

  background:
    rgba(255,255,255,.5);

  color:
    var(--navy);
}


.btn-white {
  background:
    var(--white);

  color:
    var(--navy);
}


.btn-glass {
  border-color:
    rgba(255,255,255,.24);

  background:
    rgba(255,255,255,.05);

  color:
    white;
}


.btn-full {
  width:
    100%;
}


.btn-arrow {
  font-size:
    1.15rem;
}


/* =========================================================
   LOADER
   ========================================================= */

.page-loader {
  position:
    fixed;

  z-index:
    99999;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  background:
    var(--cream-light);

  transition:
    opacity .5s ease,
    visibility .5s ease;
}


.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
}


.loader-inner {
  display:
    flex;

  align-items:
    center;

  gap:
    15px;
}


.loader-logo {
  width:
    58px;

  height:
    58px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(--navy);

  color:
    white;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    1.15rem;

  animation:
    loaderPulse 1.25s infinite ease-in-out;
}


.loader-copy {
  display:
    flex;

  flex-direction:
    column;
}


.loader-copy strong {
  font-size:
    .96rem;
}


.loader-copy span {
  margin-top:
    2px;

  color:
    var(--muted);

  font-size:
    .68rem;
}


@keyframes loaderPulse {
  50% {
    transform:
      scale(1.08);

    opacity:
      .75;
  }
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  position:
    fixed;

  z-index:
    1000;

  top:
    0;

  left:
    0;

  width:
    100%;

  padding:
    18px 0;

  transition:
    padding .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.site-header.scrolled {
  padding:
    11px 0;

  background:
    rgba(251,249,245,.91);

  border-bottom:
    1px solid var(--line);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  box-shadow:
    0 8px 30px rgba(15,23,42,.035);
}


.nav-container {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;
}


.brand {
  min-width:
    0;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    13px;
}


.brand-logo {
  width:
    46px;

  height:
    46px;

  flex-shrink:
    0;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(--navy);

  color:
    white;

  font-family:
    "Playfair Display",
    serif;

  font-weight:
    700;
}


.brand-text {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  line-height:
    1.1;
}


.brand-text strong {
  white-space:
    nowrap;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    .96rem;

  font-weight:
    700;
}


.brand-text small {
  margin-top:
    5px;

  color:
    var(--muted);

  font-size:
    .65rem;

  letter-spacing:
    .06em;
}


.main-nav {
  display:
    flex;

  align-items:
    center;

  gap:
    28px;
}


.nav-link {
  position:
    relative;

  padding:
    7px 0;

  color:
    #555d69;

  font-size:
    .86rem;

  font-weight:
    500;

  transition:
    color .2s ease;
}


.nav-link::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    0;

  width:
    0;

  height:
    1px;

  background:
    var(--gold-dark);

  transition:
    width .25s ease;
}


.nav-link:hover,
.nav-link.active {
  color:
    var(--navy);
}


.nav-link.active::after {
  width:
    100%;
}


.header-cta {
  min-height:
    43px;

  padding:
    0 18px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    999px;

  background:
    var(--navy);

  color:
    white;

  font-size:
    .82rem;

  font-weight:
    700;

  transition:
    .2s ease;
}


.header-cta:hover {
  background:
    #19253a;

  transform:
    translateY(-1px);
}


.menu-toggle {
  display:
    none;

  width:
    45px;

  height:
    45px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  gap:
    5px;
}


.menu-toggle span {
  display:
    block;

  width:
    23px;

  height:
    2px;

  border-radius:
    10px;

  background:
    var(--navy);

  transition:
    .25s ease;
}


.menu-toggle.active span:nth-child(1) {
  transform:
    translateY(7px)
    rotate(45deg);
}


.menu-toggle.active span:nth-child(2) {
  opacity:
    0;
}


.menu-toggle.active span:nth-child(3) {
  transform:
    translateY(-7px)
    rotate(-45deg);
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  position:
    relative;

  min-height:
    100vh;

  padding:
    155px 0 80px;

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  background:

    radial-gradient(
      circle at 86% 22%,
      rgba(199,168,109,.13),
      transparent 27%
    ),

    radial-gradient(
      circle at 12% 17%,
      rgba(210,221,234,.23),
      transparent 29%
    ),

    var(--cream-light);
}


.hero-layout {
  position:
    relative;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    1.04fr .96fr;

  align-items:
    center;

  gap:
    72px;
}


.hero-content {
  max-width:
    710px;
}


.hero-label {
  width:
    fit-content;

  max-width:
    100%;

  margin-bottom:
    28px;

  padding:
    9px 14px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  border:
    1px solid rgba(151,116,62,.17);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.55);

  color:
    #765b35;

  font-size:
    .77rem;

  font-weight:
    600;
}


.hero-label-icon {
  color:
    var(--gold-dark);
}


.hero-content h1 {
  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(
      4.1rem,
      6.7vw,
      7rem
    );

  line-height:
    .92;

  letter-spacing:
    -.055em;
}


.hero-content h1 span {
  display:
    block;

  margin-top:
    8px;

  color:
    #8b6c3f;
}


.hero-description {
  max-width:
    620px;

  margin-top:
    30px;

  color:
    var(--muted);

  font-size:
    1.04rem;

  line-height:
    1.85;
}


.hero-buttons {
  margin-top:
    34px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;
}


.hero-benefits {
  margin-top:
    40px;

  padding-top:
    28px;

  display:
    grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:
    22px;

  border-top:
    1px solid var(--line);
}


.hero-benefit {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}


.check-icon {
  width:
    32px;

  height:
    32px;

  flex-shrink:
    0;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #ede3cf;

  color:
    #846334;

  font-size:
    .7rem;

  font-weight:
    800;
}


.hero-benefit div {
  display:
    flex;

  flex-direction:
    column;
}


.hero-benefit strong {
  font-size:
    .83rem;
}


.hero-benefit small {
  margin-top:
    2px;

  color:
    var(--muted);

  font-size:
    .72rem;
}


/* HERO PREVIEW */

.hero-preview {
  position:
    relative;

  min-height:
    640px;

  display:
    grid;

  place-items:
    center;
}


.preview-decoration {
  position:
    absolute;

  border-radius:
    50%;
}


.decoration-one {
  width:
    480px;

  height:
    480px;

  border:
    1px solid rgba(12,18,32,.07);
}


.decoration-two {
  width:
    390px;

  height:
    390px;

  background:
    linear-gradient(
      145deg,
      #e5d5ba,
      #c8ab7c
    );

  box-shadow:
    inset 0 0 90px rgba(255,255,255,.25);
}


.phone-wrapper {
  position:
    relative;

  z-index:
    3;

  transform:
    rotate(4deg);
}


.phone-frame {
  position:
    relative;

  width:
    288px;

  height:
    585px;

  padding:
    9px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    45px;

  background:
    #0b0e14;

  box-shadow:
    0 42px 90px rgba(12,18,32,.28);
}


.phone-island {
  position:
    absolute;

  z-index:
    6;

  top:
    18px;

  left:
    50%;

  width:
    92px;

  height:
    24px;

  transform:
    translateX(-50%);

  border-radius:
    999px;

  background:
    #06080b;
}


.phone-screen {
  width:
    100%;

  height:
    100%;

  overflow:
    hidden;

  border-radius:
    37px;

  background:
    #f2e7d8;
}


.invitation-demo {
  width:
    100%;

  height:
    100%;

  padding:
    70px 25px 35px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  text-align:
    center;

  background:

    radial-gradient(
      circle at center top,
      rgba(255,255,255,.6),
      transparent 34%
    ),

    linear-gradient(
      180deg,
      #f5ece2 0%,
      #e7d4bf 100%
    );
}


.demo-top {
  color:
    #816543;

  font-size:
    .56rem;

  font-weight:
    700;

  letter-spacing:
    .23em;
}


.demo-symbol {
  margin:
    23px 0;

  color:
    #a48253;

  font-size:
    1.15rem;
}


.invitation-demo h2 {
  display:
    flex;

  flex-direction:
    column;

  color:
    #182033;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    2.7rem;

  line-height:
    .82;
}


.invitation-demo h2 span {
  margin:
    11px 0;

  color:
    #9c7948;

  font-size:
    1.3rem;
}


.demo-date {
  margin-top:
    25px;

  color:
    #5c554c;

  font-size:
    .66rem;

  font-weight:
    700;

  letter-spacing:
    .16em;
}


.invitation-demo p {
  margin-top:
    40px;

  color:
    #857a6e;

  font-size:
    .67rem;
}


.invitation-demo strong {
  margin-top:
    3px;

  color:
    #242832;

  font-size:
    .77rem;
}


.invitation-demo button {
  margin-top:
    28px;

  padding:
    10px 18px;

  border:
    0;

  border-radius:
    999px;

  background:
    var(--navy);

  color:
    white;

  font-size:
    .68rem;
}


.preview-floating-card {
  position:
    absolute;

  z-index:
    7;

  min-width:
    175px;

  padding:
    12px 15px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  border:
    1px solid rgba(255,255,255,.7);

  border-radius:
    15px;

  background:
    rgba(255,255,255,.82);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  box-shadow:
    0 17px 42px rgba(15,23,42,.11);
}


.preview-floating-card > span {
  width:
    34px;

  height:
    34px;

  flex-shrink:
    0;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #f0e5d1;

  color:
    #866535;
}


.preview-floating-card div {
  display:
    flex;

  flex-direction:
    column;
}


.preview-floating-card strong {
  font-size:
    .75rem;
}


.preview-floating-card small {
  margin-top:
    1px;

  color:
    var(--muted);

  font-size:
    .65rem;
}


.card-design {
  top:
    21%;

  left:
    -2%;
}


.card-ready {
  right:
    -1%;

  bottom:
    20%;
}


.floating-check {
  background:
    #e0efe5 !important;

  color:
    #367049 !important;
}


.hero-orb {
  position:
    absolute;

  border-radius:
    50%;

  filter:
    blur(90px);

  pointer-events:
    none;
}


.orb-one {
  top:
    5%;

  left:
    -160px;

  width:
    370px;

  height:
    370px;

  background:
    rgba(190,206,225,.24);
}


.orb-two {
  right:
    -150px;

  bottom:
    0;

  width:
    400px;

  height:
    400px;

  background:
    rgba(213,183,130,.17);
}


/* HERO STATS */

.hero-stats {
  position:
    relative;

  z-index:
    3;

  margin-top:
    45px;

  padding-top:
    28px;

  border-top:
    1px solid var(--line);

  display:
    grid;

  grid-template-columns:
    repeat(4,1fr);
}


.hero-stat {
  min-width:
    0;

  padding:
    2px 25px;

  display:
    flex;

  flex-direction:
    column;

  border-right:
    1px solid var(--line);
}


.hero-stat:first-child {
  padding-left:
    0;
}


.hero-stat:last-child {
  border-right:
    0;
}


.hero-stat strong {
  color:
    var(--navy);

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    .8rem;
}


.hero-stat span {
  margin-top:
    4px;

  color:
    var(--muted);

  font-size:
    .73rem;
}


/* =========================================================
   INTRO CATEGORIES
   ========================================================= */

.intro-section {
  background:
    white;
}


.category-grid {
  display:
    grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:
    18px;
}


.category-card {
  position:
    relative;

  min-width:
    0;

  padding:
    31px 27px;

  overflow:
    hidden;

  border:
    1px solid var(--line);

  border-radius:
    var(--radius);

  background:
    #fffdf9;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}


.category-card:hover {
  transform:
    translateY(-6px);

  border-color:
    rgba(151,116,62,.16);

  box-shadow:
    var(--shadow-small);
}


.category-number {
  position:
    absolute;

  top:
    24px;

  right:
    25px;

  color:
    #c3b9aa;

  font-size:
    .7rem;

  font-weight:
    700;
}


.category-symbol {
  width:
    49px;

  height:
    49px;

  margin-bottom:
    25px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #efe5d3;

  color:
    #856436;

  font-size:
    1.1rem;
}


.category-card h3 {
  font-family:
    "Playfair Display",
    serif;

  font-size:
    1.4rem;
}


.category-card p {
  min-height:
    66px;

  margin-top:
    8px;

  color:
    var(--muted);

  font-size:
    .88rem;
}


.category-card a {
  display:
    inline-flex;

  margin-top:
    22px;

  color:
    #73562e;

  font-size:
    .77rem;

  font-weight:
    700;
}


/* =========================================================
   TEMPLATES
   ========================================================= */

.template-section {
  background:
    var(--cream);
}


.template-heading {
  margin-bottom:
    40px;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    35px;
}


.template-filter {
  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    flex-end;

  gap:
    8px;
}


.filter-button {
  padding:
    9px 15px;

  border:
    1px solid rgba(15,23,42,.1);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.55);

  color:
    #565d67;

  font-size:
    .76rem;

  font-weight:
    600;

  transition:
    .2s ease;
}


.filter-button.active,
.filter-button:hover {
  border-color:
    var(--navy);

  background:
    var(--navy);

  color:
    white;
}


.template-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    23px;
}


.template-card {
  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid rgba(15,23,42,.07);

  border-radius:
    25px;

  background:
    white;

  transition:
    transform .28s ease,
    box-shadow .28s ease;
}


.template-card:hover {
  transform:
    translateY(-6px);

  box-shadow:
    var(--shadow);
}


.template-card.hidden {
  display:
    none;
}


.template-art {
  position:
    relative;

  min-height:
    420px;

  overflow:
    hidden;

  display:
    grid;

  place-items:
    center;
}


.template-art::before {
  content:
    "";

  position:
    absolute;

  width:
    295px;

  height:
    295px;

  border:
    1px solid rgba(255,255,255,.22);

  border-radius:
    50%;
}


.template-art::after {
  content:
    "";

  position:
    absolute;

  width:
    230px;

  height:
    230px;

  border:
    1px solid rgba(255,255,255,.16);

  border-radius:
    50%;
}


.template-category {
  position:
    absolute;

  z-index:
    4;

  top:
    18px;

  left:
    18px;

  padding:
    7px 11px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.77);

  backdrop-filter:
    blur(12px);

  color:
    #3c4047;

  font-size:
    .66rem;

  font-weight:
    700;
}


.mini-invitation {
  position:
    relative;

  z-index:
    3;

  width:
    190px;

  height:
    335px;

  padding:
    25px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  border:
    1px solid rgba(255,255,255,.45);

  border-radius:
    24px;

  background:
    rgba(255,255,255,.9);

  text-align:
    center;

  box-shadow:
    0 25px 50px rgba(12,18,32,.16);

  transform:
    rotate(-2deg);
}


.mini-invitation > span {
  color:
    #786a59;

  font-size:
    .51rem;

  font-weight:
    700;

  letter-spacing:
    .16em;
}


.mini-invitation h3 {
  margin-top:
    26px;

  display:
    flex;

  flex-direction:
    column;

  color:
    #1c2637;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    1.75rem;

  line-height:
    .95;
}


.mini-invitation h3 small {
  margin-top:
    7px;

  color:
    #8f6c3b;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    .9rem;
}


.mini-invitation p {
  margin-top:
    28px;

  color:
    #7a7065;

  font-size:
    .61rem;

  letter-spacing:
    .13em;
}


.mini-dark {
  background:
    rgba(24,31,45,.92);

  color:
    white;
}


.mini-dark h3 {
  color:
    white;
}


.mini-dark > span,
.mini-dark p {
  color:
    rgba(255,255,255,.66);
}


.art-romance {
  background:
    linear-gradient(
      145deg,
      #bd9492,
      #ead2c8
    );
}


.art-emerald {
  background:
    linear-gradient(
      145deg,
      #183e35,
      #55796c
    );
}


.art-dark {
  background:
    linear-gradient(
      145deg,
      #0e1727,
      #3e475a
    );
}


.art-sand {
  background:
    linear-gradient(
      145deg,
      #c5ac8b,
      #e9dac3
    );
}


.art-lilac {
  background:
    linear-gradient(
      145deg,
      #9e89b1,
      #d7cce3
    );
}


.art-blue {
  background:
    linear-gradient(
      145deg,
      #698499,
      #c1d1dc
    );
}


.template-meta {
  padding:
    21px;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    18px;
}


.template-meta > div {
  min-width:
    0;
}


.template-meta span {
  color:
    #96733f;

  font-size:
    .65rem;

  font-weight:
    700;

  letter-spacing:
    .11em;
}


.template-meta h3 {
  margin-top:
    3px;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    1.18rem;
}


.preview-button {
  flex-shrink:
    0;

  border:
    0;

  background:
    transparent;

  color:
    #384151;

  font-size:
    .73rem;

  font-weight:
    700;

  transition:
    color .2s ease;
}


.preview-button:hover {
  color:
    var(--gold-dark);
}


.template-bottom {
  margin-top:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  color:
    var(--muted);

  font-size:
    .83rem;
}


.template-bottom a {
  color:
    #755a32;

  font-weight:
    700;
}


/* =========================================================
   FEATURES
   ========================================================= */

.feature-section {
  background:
    white;
}


.feature-layout {
  display:
    grid;

  grid-template-columns:
    .72fr 1.28fr;

  gap:
    78px;

  align-items:
    start;
}


.feature-intro {
  position:
    sticky;

  top:
    125px;
}


.feature-intro .btn {
  margin-top:
    28px;
}


.feature-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    15px;
}


.feature-card {
  position:
    relative;

  min-width:
    0;

  padding:
    28px;

  border:
    1px solid var(--line);

  border-radius:
    22px;

  background:
    #fffdfa;

  transition:
    transform .22s ease,
    box-shadow .22s ease;
}


.feature-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    var(--shadow-small);
}


.feature-index {
  position:
    absolute;

  top:
    20px;

  right:
    21px;

  color:
    #c0b5a5;

  font-size:
    .65rem;

  font-weight:
    700;
}


.feature-icon {
  width:
    44px;

  height:
    44px;

  margin-bottom:
    22px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    13px;

  background:
    #f0e7d7;

  color:
    #72572f;

  font-family:
    "Manrope",
    sans-serif;

  font-size:
    .78rem;

  font-weight:
    800;
}


.feature-card h3 {
  font-family:
    "Playfair Display",
    serif;

  font-size:
    1.23rem;
}


.feature-card p {
  margin-top:
    8px;

  color:
    var(--muted);

  font-size:
    .85rem;

  line-height:
    1.7;
}


/* =========================================================
   PERSONALIZATION
   ========================================================= */

.personalization-section {
  overflow:
    hidden;

  background:

    radial-gradient(
      circle at 15% 30%,
      rgba(198,164,103,.14),
      transparent 29%
    ),

    radial-gradient(
      circle at 88% 75%,
      rgba(105,126,153,.15),
      transparent 30%
    ),

    var(--navy);

  color:
    white;
}


.personalization-layout {
  display:
    grid;

  grid-template-columns:
    1fr .9fr;

  gap:
    80px;

  align-items:
    center;
}


.personalization-content > p {
  color:
    rgba(255,255,255,.61);
}


.link-generator {
  margin-top:
    32px;

  padding:
    16px;

  border:
    1px solid rgba(255,255,255,.1);

  border-radius:
    20px;

  background:
    rgba(255,255,255,.045);
}


.fake-browser {
  min-height:
    47px;

  padding:
    0 14px;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  overflow:
    hidden;

  border-radius:
    12px;

  background:
    rgba(0,0,0,.18);
}


.fake-browser > span {
  width:
    7px;

  height:
    7px;

  flex-shrink:
    0;

  border-radius:
    50%;

  background:
    rgba(255,255,255,.27);
}


.fake-browser p {
  min-width:
    0;

  margin-left:
    8px;

  overflow:
    hidden;

  color:
    rgba(255,255,255,.71);

  font-size:
    .72rem;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.generator-form {
  margin-top:
    11px;

  display:
    flex;

  gap:
    9px;
}


.generator-form input {
  min-width:
    0;

  flex:
    1;

  padding:
    12px 13px;

  border:
    1px solid rgba(255,255,255,.1);

  border-radius:
    11px;

  outline:
    0;

  background:
    rgba(255,255,255,.07);

  color:
    white;
}


.generator-form input::placeholder {
  color:
    rgba(255,255,255,.4);
}


.generator-form button {
  flex-shrink:
    0;

  padding:
    0 17px;

  border:
    0;

  border-radius:
    11px;

  background:
    #d0b177;

  color:
    #172031;

  font-size:
    .76rem;

  font-weight:
    800;
}


.personalization-preview {
  position:
    relative;

  min-height:
    440px;

  display:
    grid;

  place-items:
    center;
}


.personalization-preview::before {
  content:
    "";

  position:
    absolute;

  width:
    390px;

  height:
    390px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius:
    50%;
}


.personalization-preview::after {
  content:
    "";

  position:
    absolute;

  width:
    310px;

  height:
    310px;

  border-radius:
    50%;

  background:
    rgba(201,169,109,.09);
}


.guest-invitation-card {
  position:
    relative;

  z-index:
    3;

  width:
    min(100%,395px);

  padding:
    47px 34px;

  border-radius:
    28px;

  background:
    var(--cream-light);

  color:
    var(--text);

  text-align:
    center;

  box-shadow:
    0 35px 75px rgba(0,0,0,.27);
}


.guest-small {
  color:
    #8b6a3c;

  font-size:
    .65rem;

  font-weight:
    700;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;
}


.guest-invitation-card h3 {
  margin-top:
    12px;

  overflow-wrap:
    anywhere;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    2.05rem;

  line-height:
    1.15;
}


.guest-invitation-card p {
  max-width:
    290px;

  margin:
    16px auto 0;

  color:
    var(--muted);

  font-size:
    .83rem;
}


.guest-divider {
  width:
    55px;

  height:
    1px;

  margin:
    26px auto;

  display:
    block;

  background:
    var(--gold);
}


.guest-invitation-card strong {
  display:
    block;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    1.05rem;
}


.guest-invitation-card small {
  display:
    block;

  margin-top:
    4px;

  color:
    var(--muted);

  font-size:
    .68rem;
}


/* =========================================================
   PRICING
   ========================================================= */

.pricing-section {
  background:
    var(--cream);
}


.pricing-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    20px;

  align-items:
    stretch;
}


.pricing-card {
  position:
    relative;

  min-width:
    0;

  padding:
    35px 31px;

  border:
    1px solid var(--line);

  border-radius:
    25px;

  background:
    white;
}


.pricing-card-featured {
  transform:
    translateY(-10px);

  border-color:
    transparent;

  background:
    var(--navy);

  color:
    white;

  box-shadow:
    0 30px 70px rgba(12,18,32,.18);
}


.recommended-label {
  position:
    absolute;

  top:
    18px;

  right:
    18px;

  padding:
    6px 9px;

  border-radius:
    999px;

  background:
    #d0b275;

  color:
    #182132;

  font-size:
    .55rem;

  font-weight:
    800;

  letter-spacing:
    .1em;
}


.pricing-type {
  color:
    #8b6939;

  font-size:
    .65rem;

  font-weight:
    800;

  letter-spacing:
    .16em;
}


.pricing-card-featured .pricing-type {
  color:
    #d7bd89;
}


.pricing-card h3 {
  margin-top:
    13px;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    2rem;
}


.pricing-description {
  min-height:
    52px;

  margin-top:
    8px;

  color:
    var(--muted);

  font-size:
    .84rem;
}


.pricing-card-featured .pricing-description {
  color:
    rgba(255,255,255,.57);
}


.pricing-value {
  margin:
    28px 0;

  padding:
    14px 15px;

  border-radius:
    13px;

  background:
    var(--cream);

  color:
    #755a32;

  font-size:
    .88rem;

  font-weight:
    700;
}


.pricing-card-featured .pricing-value {
  background:
    rgba(255,255,255,.07);

  color:
    #dfc692;
}


.pricing-card ul {
  margin-bottom:
    30px;

  list-style:
    none;
}


.pricing-card li {
  position:
    relative;

  padding:
    8px 0 8px 24px;

  color:
    #555d67;

  font-size:
    .83rem;
}


.pricing-card-featured li {
  color:
    rgba(255,255,255,.71);
}


.pricing-card li::before {
  content:
    "✓";

  position:
    absolute;

  left:
    0;

  color:
    #977340;

  font-weight:
    800;
}


.pricing-card-featured li::before {
  color:
    #d8be89;
}


/* =========================================================
   PROCESS
   ========================================================= */

.process-section {
  background:
    white;
}


.process-top {
  margin-bottom:
    45px;
}


.process-list {
  display:
    grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:
    0;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}


.process-item {
  min-width:
    0;

  padding:
    31px 29px;

  display:
    flex;

  gap:
    18px;

  border-right:
    1px solid var(--line);
}


.process-item:last-child {
  border-right:
    0;
}


.process-number {
  color:
    #a28252;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    1.6rem;
}


.process-item h3 {
  font-family:
    "Playfair Display",
    serif;

  font-size:
    1.2rem;
}


.process-item p {
  margin-top:
    8px;

  color:
    var(--muted);

  font-size:
    .82rem;
}


/* =========================================================
   WHY SECTION
   ========================================================= */

.why-section {
  padding-top:
    30px;

  background:
    white;
}


.why-card {
  padding:
    55px;

  display:
    grid;

  grid-template-columns:
    1.25fr .75fr;

  gap:
    70px;

  align-items:
    center;

  border-radius:
    34px;

  background:

    radial-gradient(
      circle at 90% 20%,
      rgba(206,171,106,.13),
      transparent 30%
    ),

    var(--navy);

  color:
    white;
}


.why-copy > p {
  color:
    rgba(255,255,255,.58);
}


.why-points {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    12px;
}


.why-point {
  min-height:
    95px;

  padding:
    18px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    15px;

  background:
    rgba(255,255,255,.04);
}


.why-point strong {
  color:
    #d6bd8d;

  font-size:
    .68rem;
}


.why-point span {
  color:
    rgba(255,255,255,.78);

  font-size:
    .79rem;

  font-weight:
    600;
}


/* =========================================================
   FAQ
   ========================================================= */

.faq-section {
  background:
    var(--cream-light);
}


.faq-layout {
  display:
    grid;

  grid-template-columns:
    .78fr 1.22fr;

  gap:
    75px;

  align-items:
    start;
}


.faq-heading {
  position:
    sticky;

  top:
    125px;
}


.faq-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;
}


.faq-item {
  overflow:
    hidden;

  border:
    1px solid var(--line);

  border-radius:
    17px;

  background:
    white;
}


.faq-question {
  width:
    100%;

  padding:
    20px 21px;

  border:
    0;

  background:
    transparent;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  color:
    var(--text);

  text-align:
    left;

  font-size:
    .87rem;

  font-weight:
    600;
}


.faq-question strong {
  flex-shrink:
    0;

  color:
    #9b7b4a;

  font-size:
    1.3rem;

  font-weight:
    400;

  transition:
    transform .25s ease;
}


.faq-item.open .faq-question strong {
  transform:
    rotate(45deg);
}


.faq-answer {
  max-height:
    0;

  overflow:
    hidden;

  transition:
    max-height .3s ease;
}


.faq-answer p {
  padding:
    0 21px 21px;

  color:
    var(--muted);

  font-size:
    .84rem;
}


/* =========================================================
   CONTACT CTA
   ========================================================= */

.contact-section {
  padding-top:
    65px;

  padding-bottom:
    65px;

  background:
    var(--cream-light);
}


.contact-card {
  padding:
    55px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    50px;

  border-radius:
    35px;

  background:

    radial-gradient(
      circle at 85% 20%,
      rgba(210,177,111,.15),
      transparent 31%
    ),

    linear-gradient(
      135deg,
      #0c1220,
      #172236
    );

  color:
    white;
}


.contact-copy {
  max-width:
    760px;
}


.contact-copy > p {
  color:
    rgba(255,255,255,.59);
}


.contact-actions {
  min-width:
    180px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  padding:
    75px 0 30px;

  background:
    #080d16;

  color:
    white;
}


.footer-layout {
  display:
    grid;

  grid-template-columns:
    1.5fr .7fr .7fr 1fr;

  gap:
    48px;
}


.footer-brand .brand-logo {
  background:
    #d2b478;

  color:
    var(--navy);
}


.footer-brand .brand-text small {
  color:
    rgba(255,255,255,.46);
}


.footer-brand-section > p {
  max-width:
    360px;

  margin-top:
    20px;

  color:
    rgba(255,255,255,.48);

  font-size:
    .84rem;
}


.footer-group {
  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;
}


.footer-group h3 {
  margin-bottom:
    8px;

  color:
    white;

  font-size:
    .76rem;
}


.footer-group a,
.footer-group span {
  color:
    rgba(255,255,255,.47);

  font-size:
    .79rem;

  transition:
    color .2s ease;
}


.footer-group a:hover {
  color:
    white;
}


.footer-bottom {
  margin-top:
    58px;

  padding-top:
    22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  border-top:
    1px solid rgba(255,255,255,.07);

  color:
    rgba(255,255,255,.34);

  font-size:
    .7rem;
}


/* =========================================================
   FLOATING WHATSAPP
   ========================================================= */

.floating-whatsapp {
  position:
    fixed;

  z-index:
    850;

  right:
    max(
      20px,
      env(safe-area-inset-right)
    );

  bottom:
    max(
      20px,
      env(safe-area-inset-bottom)
    );

  min-height:
    52px;

  padding:
    5px 16px 5px 6px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  border-radius:
    999px;

  background:
    #1fbf69;

  color:
    white;

  box-shadow:
    0 16px 38px rgba(31,191,105,.29);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.floating-whatsapp:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 20px 42px rgba(31,191,105,.34);
}


.wa-icon {
  width:
    40px;

  height:
    40px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    rgba(255,255,255,.15);

  font-size:
    .7rem;

  font-weight:
    800;
}


.wa-text {
  font-size:
    .76rem;

  font-weight:
    700;
}


/* =========================================================
   MODAL
   ========================================================= */

.modal {
  position:
    fixed;

  z-index:
    5000;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  opacity:
    0;

  visibility:
    hidden;

  transition:
    opacity .25s ease,
    visibility .25s ease;
}


.modal.open {
  opacity:
    1;

  visibility:
    visible;
}


.modal-overlay {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(6,10,17,.72);

  backdrop-filter:
    blur(8px);
}


.modal-card {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      calc(100% - 36px),
      490px
    );

  padding:
    36px;

  border-radius:
    27px;

  background:
    var(--cream-light);

  box-shadow:
    0 40px 100px rgba(0,0,0,.3);
}


.modal-card h2 {
  font-family:
    "Playfair Display",
    serif;

  font-size:
    2.15rem;
}


.modal-card > p {
  margin-top:
    12px;

  color:
    var(--muted);

  font-size:
    .87rem;
}


.modal-close {
  position:
    absolute;

  top:
    15px;

  right:
    15px;

  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    50%;

  background:
    #eee8dd;

  color:
    var(--navy);

  font-size:
    1.25rem;
}


.modal-actions {
  margin-top:
    27px;

  display:
    flex;

  gap:
    10px;
}


/* =========================================================
   REVEAL
   ========================================================= */

.reveal {
  opacity:
    0;

  transform:
    translateY(25px);

  transition:
    opacity .68s ease,
    transform .68s ease;
}


.reveal.visible {
  opacity:
    1;

  transform:
    translateY(0);
}


/* =========================================================
   TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width:1100px) {

  .main-nav {
    gap:
      19px;
  }


  .hero-layout {
    gap:
      40px;
  }


  .card-design {
    left:
      -5%;
  }


  .card-ready {
    right:
      -5%;
  }


  .feature-layout {
    gap:
      45px;
  }

}


/* =========================================================
   TABLET 768 - 1023
   ========================================================= */

@media
(
  min-width:768px
)
and
(
  max-width:1023px
) {

  .container {
    width:
      calc(100% - 44px);
  }


  .section {
    padding:
      95px 0;
  }


  .menu-toggle {
    display:
      flex;
  }


  .main-nav {
    position:
      fixed;

    top:
      76px;

    left:
      22px;

    right:
      22px;

    padding:
      20px;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      3px;

    border:
      1px solid var(--line);

    border-radius:
      23px;

    background:
      rgba(251,249,245,.98);

    box-shadow:
      var(--shadow);

    opacity:
      0;

    visibility:
      hidden;

    transform:
      translateY(-12px);

    transition:
      .25s ease;
  }


  .main-nav.open {
    opacity:
      1;

    visibility:
      visible;

    transform:
      translateY(0);
  }


  .main-nav a {
    padding:
      11px 12px;
  }


  .nav-link::after {
    display:
      none;
  }


  .header-cta {
    margin-top:
      7px;
  }


  .hero {
    min-height:
      auto;

    padding-top:
      125px;
  }


  .hero-layout {
    grid-template-columns:
      1fr;

    gap:
      20px;
  }


  .hero-content {
    max-width:
      760px;
  }


  .hero-content h1 {
    font-size:
      clamp(4rem,9vw,6rem);
  }


  .hero-preview {
    min-height:
      600px;
  }


  .hero-stats {
    margin-top:
      25px;
  }


  .category-grid {
    grid-template-columns:
      repeat(2,1fr);
  }


  .template-heading {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .template-filter {
    justify-content:
      flex-start;
  }


  .template-grid {
    grid-template-columns:
      repeat(2,1fr);
  }


  .feature-layout {
    grid-template-columns:
      1fr;

    gap:
      40px;
  }


  .feature-intro {
    position:
      static;

    max-width:
      680px;
  }


  .personalization-layout {
    grid-template-columns:
      1fr;

    gap:
      35px;
  }


  .pricing-grid {
    grid-template-columns:
      repeat(2,1fr);
  }


  .pricing-card-featured {
    transform:
      none;
  }


  .process-list {
    grid-template-columns:
      repeat(2,1fr);
  }


  .process-item:nth-child(2) {
    border-right:
      0;
  }


  .process-item:nth-child(-n+2) {
    border-bottom:
      1px solid var(--line);
  }


  .why-card {
    grid-template-columns:
      1fr;
  }


  .faq-layout {
    grid-template-columns:
      1fr;

    gap:
      35px;
  }


  .faq-heading {
    position:
      static;
  }


  .footer-layout {
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* =========================================================
   ALL MOBILE
   ========================================================= */

@media (max-width:767px) {

  :root {
    --radius:
      20px;
  }


  body {
    font-size:
      15px;
  }


  .container {
    width:
      calc(100% - 28px);
  }


  .section {
    padding:
      76px 0;
  }


  .section-heading-center {
    margin-bottom:
      34px;
  }


  .section-heading h2,
  .feature-intro h2,
  .personalization-content h2,
  .faq-heading h2,
  .contact-copy h2,
  .why-copy h2 {
    font-size:
      clamp(
        2.15rem,
        10vw,
        2.7rem
      );

    line-height:
      1.08;
  }


  /* HEADER */

  .site-header {
    padding:
      9px 0;
  }


  .site-header.scrolled {
    padding:
      7px 0;
  }


  .brand-logo {
    width:
      40px;

    height:
      40px;
  }


  .brand-text strong {
    font-size:
      .87rem;
  }


  .brand-text small {
    display:
      none;
  }


  .menu-toggle {
    display:
      flex;
  }


  .main-nav {
    position:
      fixed;

    top:
      65px;

    left:
      14px;

    right:
      14px;

    max-height:
      calc(100vh - 85px);

    overflow-y:
      auto;

    padding:
      16px;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      2px;

    border:
      1px solid var(--line);

    border-radius:
      21px;

    background:
      rgba(251,249,245,.99);

    box-shadow:
      0 25px 65px rgba(15,23,42,.16);

    opacity:
      0;

    visibility:
      hidden;

    transform:
      translateY(-12px);

    transition:
      .25s ease;
  }


  .main-nav.open {
    opacity:
      1;

    visibility:
      visible;

    transform:
      translateY(0);
  }


  .main-nav a {
    width:
      100%;

    padding:
      11px 12px;
  }


  .nav-link::after {
    display:
      none;
  }


  .header-cta {
    margin-top:
      5px;
  }


  /* HERO */

  .hero {
    min-height:
      auto;

    padding:
      103px 0 55px;
  }


  .hero-layout {
    display:
      flex;

    flex-direction:
      column;

    gap:
      28px;
  }


  .hero-content {
    width:
      100%;
  }


  .hero-label {
    margin-bottom:
      20px;

    padding:
      8px 11px;

    border-radius:
      15px;

    font-size:
      .68rem;
  }


  .hero-content h1 {
    font-size:
      clamp(
        3rem,
        14.3vw,
        4.3rem
      );

    line-height:
      .94;
  }


  .hero-description {
    margin-top:
      22px;

    font-size:
      .92rem;

    line-height:
      1.75;
  }


  .hero-buttons {
    margin-top:
      26px;

    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      9px;
  }


  .hero-buttons .btn {
    width:
      100%;
  }


  .hero-benefits {
    margin-top:
      27px;

    padding-top:
      22px;

    grid-template-columns:
      1fr;

    gap:
      12px;
  }


  .hero-preview {
    width:
      100%;

    min-height:
      500px;
  }


  .decoration-one {
    width:
      min(90vw,360px);

    height:
      min(90vw,360px);
  }


  .decoration-two {
    width:
      min(75vw,300px);

    height:
      min(75vw,300px);
  }


  .phone-frame {
    width:
      215px;

    height:
      440px;

    border-radius:
      35px;
  }


  .phone-screen {
    border-radius:
      28px;
  }


  .phone-island {
    top:
      15px;

    width:
      78px;

    height:
      20px;
  }


  .invitation-demo {
    padding:
      55px 18px 25px;
  }


  .invitation-demo h2 {
    font-size:
      2rem;
  }


  .demo-symbol {
    margin:
      16px 0;
  }


  .invitation-demo p {
    margin-top:
      25px;
  }


  .preview-floating-card {
    min-width:
      140px;

    padding:
      9px 10px;
  }


  .preview-floating-card > span {
    width:
      29px;

    height:
      29px;
  }


  .preview-floating-card strong {
    font-size:
      .65rem;
  }


  .preview-floating-card small {
    font-size:
      .57rem;
  }


  .card-design {
    top:
      17%;

    left:
      0;
  }


  .card-ready {
    right:
      0;

    bottom:
      17%;
  }


  .hero-stats {
    margin-top:
      15px;

    grid-template-columns:
      repeat(2,1fr);
  }


  .hero-stat {
    padding:
      14px 7px;

    border-right:
      0;

    border-bottom:
      1px solid var(--line);
  }


  .hero-stat:first-child {
    padding-left:
      7px;
  }


  /* CATEGORY */

  .category-grid {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }


  .category-card {
    padding:
      25px 22px;
  }


  .category-card p {
    min-height:
      auto;
  }


  /* TEMPLATE */

  .template-heading {
    margin-bottom:
      28px;

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      20px;
  }


  .template-filter {
    width:
      100%;

    padding-bottom:
      4px;

    overflow-x:
      auto;

    flex-wrap:
      nowrap;

    justify-content:
      flex-start;

    scrollbar-width:
      none;
  }


  .template-filter::-webkit-scrollbar {
    display:
      none;
  }


  .filter-button {
    flex-shrink:
      0;
  }


  .template-grid {
    grid-template-columns:
      1fr;

    gap:
      16px;
  }


  .template-art {
    min-height:
      370px;
  }


  .mini-invitation {
    width:
      168px;

    height:
      296px;
  }


  .template-meta {
    padding:
      18px;
  }


  .template-bottom {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  /* FEATURES */

  .feature-layout {
    display:
      block;
  }


  .feature-intro {
    position:
      static;
  }


  .feature-grid {
    margin-top:
      36px;

    grid-template-columns:
      1fr;

    gap:
      11px;
  }


  .feature-card {
    padding:
      24px 22px;
  }


  /* PERSONALIZATION */

  .personalization-layout {
    grid-template-columns:
      1fr;

    gap:
      30px;
  }


  .link-generator {
    padding:
      12px;
  }


  .generator-form {
    flex-direction:
      column;
  }


  .generator-form button {
    min-height:
      45px;
  }


  .personalization-preview {
    min-height:
      340px;
  }


  .personalization-preview::before {
    width:
      min(85vw,300px);

    height:
      min(85vw,300px);
  }


  .personalization-preview::after {
    width:
      min(70vw,245px);

    height:
      min(70vw,245px);
  }


  .guest-invitation-card {
    padding:
      35px 22px;

    border-radius:
      23px;
  }


  .guest-invitation-card h3 {
    font-size:
      1.72rem;
  }


  /* PRICING */

  .pricing-grid {
    grid-template-columns:
      1fr;

    gap:
      13px;
  }


  .pricing-card {
    padding:
      27px 22px;
  }


  .pricing-card-featured {
    transform:
      none;
  }


  .recommended-label {
    position:
      static;

    width:
      fit-content;

    margin-bottom:
      15px;

    display:
      block;
  }


  .pricing-description {
    min-height:
      auto;
  }


  /* PROCESS */

  .process-list {
    grid-template-columns:
      1fr;

    border-bottom:
      0;
  }


  .process-item {
    padding:
      24px 8px;

    border-right:
      0;

    border-bottom:
      1px solid var(--line);
  }


  /* WHY */

  .why-section {
    padding-top:
      5px;
  }


  .why-card {
    padding:
      34px 22px;

    grid-template-columns:
      1fr;

    gap:
      30px;

    border-radius:
      27px;
  }


  .why-points {
    grid-template-columns:
      1fr 1fr;

    gap:
      8px;
  }


  .why-point {
    min-height:
      85px;

    padding:
      14px;
  }


  /* FAQ */

  .faq-layout {
    grid-template-columns:
      1fr;

    gap:
      30px;
  }


  .faq-heading {
    position:
      static;
  }


  .faq-question {
    padding:
      17px;

    font-size:
      .82rem;
  }


  .faq-answer p {
    padding:
      0 17px 18px;

    font-size:
      .79rem;
  }


  /* CONTACT */

  .contact-section {
    padding:
      45px 0;
  }


  .contact-card {
    padding:
      34px 23px;

    align-items:
      stretch;

    flex-direction:
      column;

    gap:
      27px;

    border-radius:
      27px;
  }


  .contact-actions {
    width:
      100%;
  }


  .contact-actions .btn {
    width:
      100%;
  }


  /* FOOTER */

  .site-footer {
    padding:
      55px 0 25px;
  }


  .footer-layout {
    grid-template-columns:
      1fr;

    gap:
      31px;
  }


  .footer-bottom {
    margin-top:
      40px;

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      7px;
  }


  /* WHATSAPP */

  .floating-whatsapp {
    right:
      max(
        14px,
        env(safe-area-inset-right)
      );

    bottom:
      max(
        14px,
        env(safe-area-inset-bottom)
      );

    min-height:
      50px;

    padding-right:
      6px;
  }


  .wa-icon {
    width:
      38px;

    height:
      38px;
  }


  .wa-text {
    display:
      none;
  }


  /* MODAL */

  .modal-card {
    width:
      calc(100% - 28px);

    padding:
      30px 21px;
  }


  .modal-actions {
    flex-direction:
      column;
  }


  .modal-actions .btn {
    width:
      100%;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width:380px) {

  .container {
    width:
      calc(100% - 22px);
  }


  .hero-content h1 {
    font-size:
      2.75rem;
  }


  .hero-label {
    font-size:
      .62rem;
  }


  .hero-preview {
    min-height:
      450px;
  }


  .phone-frame {
    width:
      195px;

    height:
      400px;
  }


  .invitation-demo h2 {
    font-size:
      1.75rem;
  }


  .card-design {
    left:
      -5px;
  }


  .card-ready {
    right:
      -5px;
  }


  .preview-floating-card {
    min-width:
      125px;
  }


  .preview-floating-card small {
    display:
      none;
  }


  .template-art {
    min-height:
      335px;
  }


  .mini-invitation {
    width:
      150px;

    height:
      265px;
  }


  .why-points {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   LANDSCAPE MOBILE
   ========================================================= */

@media
(
  max-height:560px
)
and
(
  orientation:landscape
)
and
(
  max-width:950px
) {

  .hero {
    padding-top:
      90px;
  }


  .hero-layout {
    display:
      grid;

    grid-template-columns:
      1fr 1fr;

    gap:
      25px;
  }


  .hero-content h1 {
    font-size:
      2.8rem;
  }


  .hero-description {
    font-size:
      .8rem;
  }


  .hero-benefits {
    display:
      none;
  }


  .hero-preview {
    min-height:
      380px;
  }


  .phone-frame {
    width:
      175px;

    height:
      350px;
  }


  .preview-floating-card {
    display:
      none;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }


  .reveal {
    opacity:
      1;

    transform:
      none;
  }

}

/* =========================================================
   TEMPLATE PUBLIK FIREBASE V2 — FINAL
   Thumbnail dari Template Manager tampil pada katalog publik.
   ========================================================= */

.public-template-status{
  margin:0 0 22px;
  padding:13px 16px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  background:rgba(255,255,255,.55);
  color:var(--muted);
  font-size:.82rem;
}

.public-template-status.is-error{
  color:#8a4f45;
  background:#fff6f3;
  border-color:rgba(138,79,69,.18);
}

.template-card[data-firebase-template="true"] .template-art{
  position:relative;
  overflow:hidden;
}

.template-card[data-firebase-template="true"] .template-art.has-real-thumbnail{
  background:#e9e5dd;
}

.template-card[data-firebase-template="true"] .template-thumbnail-image{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.template-card[data-firebase-template="true"] .template-art.has-real-thumbnail::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(12,18,32,.06) 0%,
    rgba(12,18,32,0) 34%,
    rgba(12,18,32,.08) 100%
  );
}

.template-card[data-firebase-template="true"] .template-category{
  z-index:4;
}

.template-card[data-firebase-template="true"] .firebase-template-placeholder{
  position:relative;
  z-index:3;
  width:48%;
  min-width:150px;
  max-width:210px;
  min-height:72%;
  margin:auto;
  padding:24px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px solid rgba(255,255,255,.50);
  border-radius:28px 28px 18px 18px;
  background:rgba(255,255,255,.88);
  box-shadow:0 26px 54px rgba(15,23,42,.12);
  transform:rotate(-1deg);
  backdrop-filter:blur(5px);
}

.template-card[data-firebase-template="true"] .firebase-template-placeholder span{
  color:#8b6c3f;
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.template-card[data-firebase-template="true"] .firebase-template-placeholder strong{
  margin-top:18px;
  color:var(--navy);
  font-family:"Playfair Display",serif;
  font-size:1.35rem;
  line-height:1.05;
}

.template-card[data-firebase-template="true"] .firebase-template-placeholder small{
  margin-top:17px;
  color:#8b6c3f;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.08em;
}

.template-card[data-firebase-template="true"] .template-meta{
  position:relative;
  z-index:5;
}

.template-card[data-firebase-template="true"] .template-meta > div{
  min-width:0;
}

.template-card[data-firebase-template="true"] .template-meta h3{
  overflow-wrap:anywhere;
}

.template-card.template-loading-card{
  min-height:480px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.48);
}

.template-card.template-loading-card::before{
  content:"";
  width:34px;
  height:34px;
  border:3px solid rgba(12,18,32,.12);
  border-top-color:var(--gold-dark);
  border-radius:50%;
  animation:publicTemplateSpin .75s linear infinite;
}

@keyframes publicTemplateSpin{
  to{transform:rotate(360deg)}
}

@media(max-width:640px){
  .template-card[data-firebase-template="true"] .firebase-template-placeholder{
    min-width:140px;
    width:52%;
  }
}


/* =========================================================
   RAJA INVITATION — CATALOG PRODUCTION V2
   Konsisten, rapi, tidak overflow, siap desktop/tablet/mobile
   ========================================================= */

.template-section .container{
  max-width:1320px;
}

.template-heading{
  gap:28px;
}

.template-filter{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  max-width:620px;
}

.filter-button{
  min-height:40px;
  padding:0 16px;
  border-radius:999px;
  white-space:nowrap;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.01em;
}

.template-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:start;
}

.template-card{
  border-radius:22px;
  border:1px solid rgba(15,23,42,.07);
  box-shadow:0 10px 30px rgba(15,23,42,.035);
  transform:translateZ(0);
}

.template-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 48px rgba(15,23,42,.10);
}

.template-art{
  min-height:0 !important;
  aspect-ratio:1 / 1.06;
  place-items:stretch;
  background:#e9e5dd;
}

.template-card[data-firebase-template="true"] .template-thumbnail-image{
  object-fit:cover;
  object-position:center;
}

.template-card[data-firebase-template="true"] .template-art.has-real-thumbnail::after{
  background:
    linear-gradient(180deg,rgba(12,18,32,.04),transparent 30%,rgba(12,18,32,.035));
}

.template-category{
  top:18px;
  left:18px;
  max-width:calc(100% - 36px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:8px 13px;
  border-radius:999px;
  font-size:.70rem;
  font-weight:700;
  letter-spacing:.01em;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 5px 18px rgba(15,23,42,.06);
}

.template-meta{
  min-height:104px;
  padding:20px 20px 18px;
  gap:16px;
  align-items:flex-end;
}

.template-meta > div{
  min-width:0;
  flex:1 1 auto;
}

.template-meta span{
  display:block;
  margin-bottom:8px;
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.14em;
}

.template-card[data-firebase-template="true"] .template-meta h3{
  margin:0;
  max-width:100%;
  font-size:clamp(1rem,1.25vw,1.28rem);
  line-height:1.18;
  overflow-wrap:normal;
  word-break:normal;
  text-wrap:balance;
}

.preview-button{
  flex:0 0 auto;
  min-height:38px;
  padding:0 4px;
  font-size:.72rem;
  font-weight:700;
  white-space:nowrap;
}

@media (max-width:1100px){
  .template-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .template-filter{
    justify-content:flex-start;
    max-width:none;
  }
}

@media (max-width:700px){
  .template-heading{
    gap:20px;
  }

  .template-filter{
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width:none;
  }

  .template-filter::-webkit-scrollbar{
    display:none;
  }

  .template-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .template-art{
    aspect-ratio:1 / 1.02;
  }

  .template-meta{
    min-height:94px;
    padding:18px;
  }

  .template-card[data-firebase-template="true"] .template-meta h3{
    font-size:1.08rem;
  }
}

/* Large desktop: cards remain elegant, never stretched too wide */
@media (min-width:1450px){
  .template-grid{
    gap:26px;
  }
}


/* =========================================================
   RAJA INVITATION - SIMPLE THEME + QUICK NAV
   Revisi 12 September 2026
   ========================================================= */

.quick-nav {
  width: 100%;
  max-width: 620px;
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.quick-nav-item {
  min-width: 0;
  min-height: 70px;
  padding: 13px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(12,18,32,.10);
  border-radius: 14px;
  background: #fff;
  color: var(--navy);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.quick-nav-item:hover {
  transform: translateY(-2px);
  border-color: rgba(150,116,62,.28);
  box-shadow: 0 10px 25px rgba(15,23,42,.06);
}

.quick-nav-item span {
  font-family: "Manrope", sans-serif;
  font-size: .84rem;
  font-weight: 700;
}

.quick-nav-item small {
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.35;
}

/* Hero dibuat lebih sederhana */
.hero {
  background: var(--cream-light);
}

.hero-orb {
  display: none;
}

.hero-label {
  margin-bottom: 20px;
  padding: 7px 11px;
  background: transparent;
}

.hero-content h1 {
  font-size: clamp(3.5rem, 5.6vw, 5.8rem);
  line-height: .98;
}

.hero-content h1 span {
  color: var(--gold-dark);
}

.hero-description {
  max-width: 560px;
  margin-top: 22px;
  line-height: 1.7;
}

.hero-buttons {
  margin-top: 26px;
}

.hero-benefits {
  margin-top: 24px;
  padding-top: 20px;
}

/* Tablet: shortcut tetap langsung terlihat */
@media (min-width:768px) and (max-width:1023px) {
  .quick-nav {
    max-width: 650px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Mobile: menu penting langsung di halaman, hamburger hanya menu tambahan */
@media (max-width:767px) {
  .hero {
    padding: 88px 0 42px;
  }

  .hero-layout {
    gap: 18px;
  }

  .hero-label {
    margin-bottom: 14px;
    padding: 5px 0;
    border: 0;
    font-size: .66rem;
    letter-spacing: .04em;
  }

  .hero-label-icon {
    display: none;
  }

  .hero-content h1 {
    max-width: 420px;
    font-size: clamp(2.55rem, 11.5vw, 3.45rem);
    line-height: 1.02;
    letter-spacing: -.04em;
  }

  .hero-content h1 span {
    margin-top: 4px;
  }

  .hero-description {
    margin-top: 17px;
    font-size: .9rem;
    line-height: 1.65;
  }

  .hero-buttons {
    margin-top: 21px;
  }

  .hero-buttons .btn {
    min-height: 50px;
  }

  .quick-nav {
    margin-top: 17px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .quick-nav-item {
    min-height: 64px;
    padding: 11px 12px;
    border-radius: 13px;
  }

  .quick-nav-item span {
    font-size: .82rem;
  }

  .quick-nav-item small {
    font-size: .65rem;
  }

  .hero-benefits {
    margin-top: 19px;
    padding-top: 17px;
  }

  /* Preview besar tidak memenuhi layar pertama di HP */
  .hero-preview {
    display: none;
  }

  .hero-stats {
    margin-top: 28px;
  }

  .main-nav {
    top: 62px;
    padding: 10px;
    border-radius: 16px;
  }

  .main-nav a {
    padding: 12px;
  }
}

@media (max-width:380px) {
  .quick-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-content h1 {
    font-size: 2.45rem;
  }
}


/* =========================================================
   PRICING MOBILE CLEANUP V2
   Lebih ringkas, rapi, dan mudah dibandingkan konsumen
   ========================================================= */

@media (max-width: 767px) {

  .pricing-section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .pricing-grid {
    gap: 14px !important;
  }

  .pricing-card {
    padding: 24px 20px !important;
    border-radius: 20px !important;
  }

  .pricing-card h3 {
    margin-top: 8px !important;
    font-size: 1.75rem !important;
    line-height: 1.1 !important;
  }

  .pricing-card > p,
  .pricing-card .pricing-description {
    margin-top: 10px !important;
    font-size: .86rem !important;
    line-height: 1.55 !important;
  }

  .pricing-label,
  .pricing-card .section-eyebrow {
    font-size: .62rem !important;
    letter-spacing: .14em !important;
  }

  .pricing-price,
  .price-box,
  .pricing-card .price {
    margin-top: 20px !important;
    padding: 12px 14px !important;
    min-height: 50px !important;
    border-radius: 12px !important;
  }

  .pricing-features,
  .package-features {
    margin-top: 20px !important;
    gap: 10px !important;
  }

  .pricing-features li,
  .package-features li {
    min-height: 0 !important;
    font-size: .82rem !important;
    line-height: 1.45 !important;
  }

  .pricing-card .btn,
  .pricing-card button,
  .pricing-card .package-select-button {
    min-height: 48px !important;
    margin-top: 22px !important;
  }

  .pricing-card.featured,
  .pricing-card.recommended {
    transform: none !important;
  }

  .pricing-badge,
  .recommended-badge {
    font-size: .55rem !important;
    padding: 6px 10px !important;
  }
}

@media (max-width: 380px) {
  .pricing-card {
    padding: 22px 18px !important;
  }

  .pricing-card h3 {
    font-size: 1.6rem !important;
  }
}


/* =========================================================
   PRICING MOBILE HORIZONTAL - 1 BARIS KE KANAN
   ========================================================= */
@media (max-width: 767px) {
  .pricing-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;

    width: calc(100% + 24px) !important;
    margin-right: -24px !important;
    padding-right: 24px !important;
    padding-bottom: 12px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }

  .pricing-grid::-webkit-scrollbar {
    display: none;
  }

  .pricing-card {
    flex: 0 0 84% !important;
    width: 84% !important;
    max-width: 360px !important;
    min-width: 280px !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }

  .pricing-card.featured,
  .pricing-card.recommended {
    transform: none !important;
  }
}

@media (max-width: 380px) {
  .pricing-card {
    flex-basis: 88% !important;
    width: 88% !important;
    min-width: 260px !important;
  }
}


/* =========================================================
   PRICING MOBILE UNIVERSAL ANDROID V3
   - Cocok dari HP kecil sampai layar Android besar
   - Tetap 1 baris horizontal ke kanan
   - Card tidak kepotong berlebihan
   ========================================================= */

@media (max-width: 767px) {

  .pricing-section {
    overflow: hidden !important;
  }

  .pricing-section .container {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  .pricing-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;

    gap: 12px !important;

    width: calc(100% + 12px) !important;
    margin: 0 !important;
    padding: 0 12px 14px 0 !important;

    overflow-x: auto !important;
    overflow-y: visible !important;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    scrollbar-width: none;
  }

  .pricing-grid::-webkit-scrollbar {
    display: none;
  }

  .pricing-card {
    flex: 0 0 calc(100vw - 44px) !important;
    width: calc(100vw - 44px) !important;
    max-width: 380px !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 22px 20px !important;

    border-radius: 20px !important;

    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .pricing-card h3 {
    font-size: clamp(1.55rem, 7vw, 1.9rem) !important;
    line-height: 1.08 !important;
  }

  .pricing-card > p,
  .pricing-card .pricing-description {
    font-size: clamp(.8rem, 3.3vw, .9rem) !important;
    line-height: 1.5 !important;
  }

  .pricing-price,
  .price-box,
  .pricing-card .price {
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  .pricing-features,
  .package-features {
    margin-top: 18px !important;
    gap: 9px !important;
  }

  .pricing-features li,
  .package-features li {
    font-size: clamp(.78rem, 3.1vw, .86rem) !important;
    line-height: 1.4 !important;
  }

  .pricing-card .btn,
  .pricing-card button,
  .pricing-card .package-select-button {
    width: 100% !important;
    min-height: 48px !important;
    margin-top: 20px !important;
  }

  .pricing-card.featured,
  .pricing-card.recommended {
    transform: none !important;
  }

  .pricing-badge,
  .recommended-badge {
    max-width: calc(100% - 8px);
    white-space: nowrap;
    font-size: .53rem !important;
    padding: 6px 9px !important;
  }
}

/* HP Android kecil: 320px - 359px */
@media (max-width: 359px) {
  .pricing-section .container {
    width: calc(100% - 16px) !important;
  }

  .pricing-grid {
    gap: 9px !important;
    padding-right: 8px !important;
  }

  .pricing-card {
    flex-basis: calc(100vw - 28px) !important;
    width: calc(100vw - 28px) !important;
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }

  .pricing-card h3 {
    font-size: 1.5rem !important;
  }
}

/* HP Android umum: 360px - 399px */
@media (min-width: 360px) and (max-width: 399px) {
  .pricing-card {
    flex-basis: calc(100vw - 38px) !important;
    width: calc(100vw - 38px) !important;
  }
}

/* HP Android 400px - 479px */
@media (min-width: 400px) and (max-width: 479px) {
  .pricing-card {
    flex-basis: calc(100vw - 50px) !important;
    width: calc(100vw - 50px) !important;
  }
}

/* HP Android besar / fold outer screen */
@media (min-width: 480px) and (max-width: 767px) {
  .pricing-card {
    flex-basis: 410px !important;
    width: 410px !important;
    max-width: 410px !important;
  }
}


/* =========================================================
   PRICING MOBILE - SEMUA PAKET TERLIHAT SEKALIGUS V4
   3 kartu sejajar dalam satu layar HP, tanpa geser horizontal
   ========================================================= */
@media (max-width: 767px) {

  .pricing-section {
    overflow: visible !important;
  }

  .pricing-section .container {
    width: calc(100% - 16px) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  .pricing-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    gap: 6px !important;

    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .pricing-card,
  .pricing-card.featured,
  .pricing-card.recommended {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;

    margin: 0 !important;
    padding: 14px 9px !important;

    border-radius: 15px !important;
    transform: none !important;
  }

  .pricing-label,
  .pricing-card .section-eyebrow {
    margin-bottom: 7px !important;
    font-size: .48rem !important;
    letter-spacing: .11em !important;
    white-space: nowrap;
  }

  .pricing-card h3 {
    margin-top: 4px !important;
    font-size: clamp(.92rem, 4.2vw, 1.2rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;
    overflow-wrap: anywhere;
  }

  .pricing-card > p,
  .pricing-card .pricing-description {
    margin-top: 7px !important;
    font-size: clamp(.56rem, 2.35vw, .68rem) !important;
    line-height: 1.4 !important;
  }

  .pricing-price,
  .price-box,
  .pricing-card .price {
    min-height: 0 !important;
    margin-top: 11px !important;
    padding: 8px 7px !important;

    border-radius: 9px !important;

    font-size: clamp(.56rem, 2.2vw, .68rem) !important;
    line-height: 1.25 !important;
  }

  .pricing-features,
  .package-features {
    margin-top: 13px !important;
    gap: 7px !important;
  }

  .pricing-features li,
  .package-features li {
    gap: 4px !important;
    min-height: 0 !important;
    font-size: clamp(.54rem, 2.15vw, .66rem) !important;
    line-height: 1.32 !important;
  }

  .pricing-features li::before,
  .package-features li::before {
    flex-shrink: 0 !important;
  }

  .pricing-card .btn,
  .pricing-card button,
  .pricing-card .package-select-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;

    margin-top: 14px !important;
    padding: 5px 5px !important;

    border-radius: 999px !important;

    font-size: clamp(.56rem, 2.2vw, .68rem) !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  .pricing-badge,
  .recommended-badge {
    position: static !important;
    width: fit-content !important;
    max-width: 100% !important;

    margin-bottom: 8px !important;
    padding: 4px 6px !important;

    font-size: .43rem !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;

    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

/* Android sangat kecil */
@media (max-width: 359px) {
  .pricing-section .container {
    width: calc(100% - 10px) !important;
  }

  .pricing-grid {
    gap: 4px !important;
  }

  .pricing-card,
  .pricing-card.featured,
  .pricing-card.recommended {
    padding: 11px 6px !important;
    border-radius: 12px !important;
  }

  .pricing-card h3 {
    font-size: .86rem !important;
  }

  .pricing-card > p,
  .pricing-card .pricing-description {
    font-size: .52rem !important;
  }

  .pricing-features li,
  .package-features li {
    font-size: .50rem !important;
  }

  .pricing-card .btn,
  .pricing-card button,
  .pricing-card .package-select-button {
    font-size: .52rem !important;
  }
}


/* =========================================================
   TEMPLATE MOBILE COMPACT GRID V5
   - Semua tombol kategori terlihat
   - Tidak ada filter yang kepotong ke kanan
   - Kartu template dibuat 2 kolom agar lebih banyak terlihat
   ========================================================= */
@media (max-width: 767px) {

  .template-section .container {
    width: calc(100% - 20px) !important;
    max-width: none !important;
  }

  .template-heading {
    gap: 18px !important;
  }

  .template-filter {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    justify-content: stretch !important;

    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .filter-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;

    padding: 7px 4px !important;

    border-radius: 999px !important;

    font-size: clamp(.56rem, 2.45vw, .68rem) !important;
    line-height: 1.15 !important;

    white-space: normal !important;
    text-align: center !important;
  }

  .public-template-status {
    margin-top: 18px !important;
    padding: 10px 12px !important;
    font-size: .72rem !important;
    line-height: 1.4 !important;
  }

  .template-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .template-card {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 15px !important;
  }

  .template-art {
    min-height: 235px !important;
  }

  .template-art::before {
    width: 175px !important;
    height: 175px !important;
  }

  .template-art::after {
    width: 135px !important;
    height: 135px !important;
  }

  .template-category {
    top: 9px !important;
    left: 9px !important;

    padding: 5px 7px !important;

    font-size: .52rem !important;
  }

  .mini-invitation {
    width: 102px !important;
    height: 180px !important;

    padding: 10px !important;

    border-radius: 14px !important;
  }

  .mini-invitation > span {
    font-size: .34rem !important;
    letter-spacing: .09em !important;
  }

  .mini-invitation h3 {
    font-size: clamp(.76rem, 3.5vw, 1rem) !important;
    line-height: 1.08 !important;
  }

  .mini-invitation h3 small {
    font-size: .66em !important;
  }

  .mini-invitation p {
    font-size: .42rem !important;
  }

  .template-meta {
    padding: 11px 9px !important;
    gap: 6px !important;
  }

  .template-meta > div {
    min-width: 0 !important;
  }

  .template-meta span {
    font-size: .49rem !important;
  }

  .template-meta h3 {
    margin-top: 2px !important;
    font-size: clamp(.68rem, 3vw, .84rem) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
  }

  .preview-button {
    flex-shrink: 0 !important;
    min-height: 32px !important;
    padding: 5px 7px !important;
    font-size: .52rem !important;
  }
}

/* HP Android sangat kecil */
@media (max-width: 359px) {
  .template-filter {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .template-grid {
    gap: 5px !important;
  }

  .template-art {
    min-height: 205px !important;
  }

  .mini-invitation {
    width: 90px !important;
    height: 160px !important;
  }

  .template-meta {
    padding: 9px 7px !important;
  }
}


/* =========================================================
   MOBILE: KATALOG TEMPLATE LANGSUNG DI BAWAH QUICK MENU V6
   ========================================================= */
@media (max-width: 767px) {

  /* Hilangkan blok tambahan hero agar katalog langsung terlihat */
  .hero-benefits,
  .hero-stats {
    display: none !important;
  }

  .hero {
    min-height: auto !important;
    padding-bottom: 18px !important;
  }

  .quick-nav {
    margin-bottom: 0 !important;
  }

  /* Katalog langsung rapat setelah hero */
  .template-section {
    padding-top: 26px !important;
  }

  .template-section .template-heading {
    margin-top: 0 !important;
  }

  .template-section .section-heading {
    margin-top: 0 !important;
  }

  .template-section .section-eyebrow {
    margin-top: 0 !important;
  }
}


/* =========================================================
   TEMPLATE SHOW MORE / HIDE V7
   Maksimal 4 kartu, sisanya dibuka dengan tombol
   ========================================================= */

.template-toggle-wrap {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.template-toggle-wrap[hidden] {
  display: none !important;
}

.template-toggle-button {
  min-width: 220px;
  min-height: 48px;
  padding: 0 20px;

  border: 1px solid rgba(12,18,32,.16);
  border-radius: 999px;

  background: rgba(255,255,255,.72);
  color: var(--navy);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-family: "Manrope", sans-serif;
  font-size: .82rem;
  font-weight: 700;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.template-toggle-button:hover {
  transform: translateY(-1px);
  border-color: rgba(150,116,62,.35);
  background: #fff;
}

.template-toggle-icon {
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 767px) {
  .template-toggle-wrap {
    margin-top: 14px;
  }

  .template-toggle-button {
    width: min(100%, 270px);
    min-width: 0;
    min-height: 44px;
    padding: 0 16px;
    font-size: .74rem;
  }
}


/* =========================================================
   PUBLIC TEMPLATE STATUS - PROFESSIONAL V8
   ========================================================= */

.public-template-status {
  display: flex;
  align-items: center;
  gap: 9px;

  margin-top: 18px;
  padding: 11px 14px;

  border: 1px solid rgba(12, 18, 32, .08);
  border-radius: 12px;

  background: rgba(255, 255, 255, .68);
  color: #626a76;

  font-size: .76rem;
  line-height: 1.45;

  box-shadow: none;
}

.public-template-status::before {
  content: "✓";

  width: 20px;
  height: 20px;
  flex: 0 0 20px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(199, 168, 109, .16);
  color: var(--gold-dark);

  font-size: .66rem;
  font-weight: 800;
}

.public-template-status[hidden] {
  display: none !important;
}

@media (max-width: 767px) {
  .public-template-status {
    margin-top: 14px !important;
    padding: 10px 12px !important;

    border-radius: 11px !important;

    font-size: .69rem !important;
    line-height: 1.4 !important;
  }

  .public-template-status::before {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    font-size: .60rem;
  }
}