:root {
  --cinema: #091d18;
  --cinema-soft: #102b23;
  --cinema-panel: #17352c;
  --ivory: #f4eedf;
  --ivory-soft: #ddd2ba;
  --antique-gold: #c9a65c;
  --coral-bright: #ff7455;
  --cinema-line: rgba(201, 166, 92, .25);
}

body {
  background: var(--cinema);
}

main {
  display: flex;
  flex-direction: column;
  overflow: clip;
}

main > * { width: 100%; }
.hero { order: 0; }
.trust-strip { order: 1; }
.occasions-section { order: 2; }
.gallery-section { order: 3; }
.why-section { order: 4; }
.package-section { order: 5; }
.order-section { order: 6; }
.social-section { order: 7; }
.faq-section { order: 8; }

.site-header {
  background: rgba(7, 24, 19, .9);
  border-color: rgba(244, 238, 223, .1);
  box-shadow: none;
}

.nav { max-width: 1280px; padding: 18px 34px; }
.logo { box-shadow: 0 0 0 1px rgba(201, 166, 92, .35); }
.logo-name { color: var(--ivory); }
.logo-name em { color: var(--antique-gold); }
.nav-links { color: rgba(244, 238, 223, .76); }
.nav-links a:hover { color: var(--ivory); }
.landing-language { border-color: rgba(201, 166, 92, .35); background: rgba(255, 255, 255, .04); }
.landing-language button { color: var(--ivory-soft); }
.landing-language button.active { background: var(--antique-gold); color: var(--cinema); }
.nav > .whatsapp-btn,
.nav-links .whatsapp-btn {
  border-color: var(--antique-gold);
  color: var(--ivory);
  border-radius: 999px;
  background: transparent;
}
.nav > .whatsapp-btn:hover,
.nav-links .whatsapp-btn:hover { background: var(--antique-gold); color: var(--cinema); }
.menu-toggle { border-color: rgba(201, 166, 92, .35); background: transparent; color: var(--ivory); }

.hero {
  min-height: 850px;
  color: var(--ivory);
  background:
    radial-gradient(circle at 72% 28%, rgba(201, 166, 92, .13), transparent 28%),
    radial-gradient(circle at 10% 90%, rgba(42, 92, 74, .28), transparent 34%),
    var(--cinema);
}

.hero:before {
  inset: 0;
  opacity: .19;
  transform: none;
  background-image:
    linear-gradient(rgba(9, 29, 24, .2), rgba(9, 29, 24, .65)),
    repeating-linear-gradient(90deg, transparent 0 68px, rgba(244, 238, 223, .025) 69px 70px);
}

.hero:after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 150px;
  background: linear-gradient(transparent, rgba(4, 15, 12, .85));
  pointer-events: none;
}

.hero-inner {
  max-width: 1280px;
  min-height: 850px;
  grid-template-columns: minmax(430px, .9fr) minmax(560px, 1.1fr);
  gap: 56px;
  padding: 92px 34px 96px;
}

.hero-copy { position: relative; z-index: 3; }
.hero-kicker {
  padding: 0 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--antique-gold);
  font-size: .67rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.hero-kicker:before { display: none; }
.hero h1 {
  max-width: 610px;
  color: var(--ivory);
  font-size: clamp(4rem, 6.4vw, 6.8rem);
  font-weight: 500;
  line-height: .88;
  letter-spacing: -.055em;
}
.hero-copy p {
  max-width: 540px;
  margin: 30px 0 34px;
  color: rgba(244, 238, 223, .72);
  font-size: 1.02rem;
  line-height: 1.8;
}
.hero .actions { align-items: center; }
.hero .primary-btn {
  min-width: 190px;
  background: var(--coral-bright);
  color: var(--cinema);
  border-radius: 999px;
  box-shadow: 0 16px 36px rgba(255, 116, 85, .2);
}
.hero .secondary-btn {
  width: auto;
  padding-inline: 8px;
  border: 0;
  border-bottom: 1px solid rgba(244, 238, 223, .45);
  border-radius: 0;
  background: transparent;
  color: var(--ivory);
}
.hero-price { color: rgba(244, 238, 223, .62); margin-top: 24px; }
.hero-price b { color: var(--antique-gold); }
.hero-note { color: rgba(244, 238, 223, .52); }
.hero-note span { color: var(--antique-gold); }
.proof-row { margin-top: 42px; color: rgba(244, 238, 223, .64); }
.proof-mark { border-color: rgba(201, 166, 92, .55); color: var(--antique-gold); }

.occasion-reel {
  position: relative;
  min-height: 610px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1300px;
}
.reel-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(201, 166, 92, .2);
  border-radius: 50%;
  box-shadow: 0 0 90px rgba(201, 166, 92, .08), inset 0 0 60px rgba(201, 166, 92, .06);
}
.reel-card {
  position: relative;
  width: 20%;
  max-width: 126px;
  height: 410px;
  overflow: hidden;
  border: 1px solid rgba(244, 238, 223, .24);
  border-radius: 0;
  background: #142a23;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
  transform-origin: 50% 100%;
}
.reel-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(3, 14, 11, .88));
}
.reel-card-copy {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 18px;
  color: var(--ivory);
}
.reel-card-copy small { display: block; color: var(--antique-gold); font-size: .52rem; letter-spacing: .18em; text-transform: uppercase; }
.reel-card-copy strong { display: block; margin-top: 5px; font: 500 1.35rem/1 'Cormorant Garamond', Georgia, serif; }
.reel-card:nth-of-type(1),
.reel-card:nth-of-type(5) { transform: translateY(18px); z-index: 1; }
.reel-card:nth-of-type(2),
.reel-card:nth-of-type(4) { transform: translateY(5px); z-index: 2; }
.reel-card:nth-of-type(3) { transform: translateY(-8px); z-index: 3; }
.reel-caption {
  position: absolute;
  right: 4px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(244, 238, 223, .55);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.reel-caption:before { content: ""; width: 42px; height: 1px; background: var(--antique-gold); }

.hero-product {
  position: relative;
  z-index: 2;
  min-height: 650px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-video-stage {
  position: relative;
  /* Reserve the phone's full rotated height so the labels below never sit
     underneath the video. */
  min-height: 800px;
}
.hero-video-stage .reel-glow {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.hero-video-stage .phone {
  width: min(330px, 72vw);
  padding: 8px;
  border: 7px solid #14261f;
  background: #14261f;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .48), 0 0 0 1px rgba(201, 166, 92, .24);
}
.hero-video-stage .phone-screen { background: #eee7d9; }
.hero-peek-card {
  width: 210px;
  border: 1px solid rgba(201, 166, 92, .28);
  border-radius: 3px;
  opacity: .7;
  filter: saturate(.72) brightness(.72);
  transform: translate(-50%, -50%) translate(-145px, 10px) rotate(-9deg);
}
.hero-occasion-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: -18px;
}
.hero-occasion-tags span {
  padding: 7px 11px;
  border: 1px solid rgba(201, 166, 92, .28);
  border-radius: 999px;
  color: rgba(244, 238, 223, .72);
  font-size: .65rem;
  letter-spacing: .04em;
}
.hero-product-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  color: rgba(244, 238, 223, .48);
  font-size: .65rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.hero-product-caption:before { content: ""; width: 34px; height: 1px; background: var(--antique-gold); }

.trust-strip {
  max-width: 1050px;
  margin: -36px auto 0;
  background: rgba(17, 44, 35, .97);
  border-color: var(--cinema-line);
  border-radius: 0;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .28);
}
.trust-item { color: rgba(244, 238, 223, .72); }
.trust-item + .trust-item { border-color: var(--cinema-line); }
.trust-icon { border: 1px solid rgba(201, 166, 92, .35); background: transparent; color: var(--antique-gold); }

.occasions-section {
  padding-top: 130px;
  color: var(--ivory);
  background: var(--cinema);
}
.occasions-section .section-heading { max-width: 820px; }
.occasions-section .eyebrow,
.gallery-section .eyebrow,
.why-section .eyebrow,
.social-section .eyebrow { color: var(--antique-gold); }
.occasions-section .section-heading h2,
.gallery-section .section-heading h2,
.why-section .section-heading h2,
.social-section .section-heading h2 { color: var(--ivory); }
.occasions-section .section-heading p,
.gallery-section .section-heading p,
.why-section .section-heading p,
.social-section .section-heading p { color: rgba(244, 238, 223, .58); }

.occasions-grid {
  max-width: 1180px;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.occasion {
  position: relative;
  min-height: 390px;
  justify-content: flex-end;
  align-items: flex-start;
  overflow: hidden;
  padding: 24px 20px;
  border-color: rgba(244, 238, 223, .16);
  border-radius: 2px;
  background: #132a22;
  text-align: left;
  box-shadow: none;
}
.occasion:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--occasion-image);
  background-size: cover;
  background-position: center;
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.occasion:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 18, 14, .05) 25%, rgba(4, 14, 11, .92) 100%);
}
.occasion:hover { transform: none; box-shadow: none; }
.occasion:hover:before { transform: scale(1.055); }
.occasion:nth-child(1) { --occasion-image: url('occasions/wedding.webp'); }
.occasion:nth-child(2) { --occasion-image: url('occasions/aqiqah.webp'); }
.occasion:nth-child(3) { --occasion-image: url('occasions/birthday.webp'); }
.occasion:nth-child(4) { --occasion-image: url('occasions/raya.webp'); }
.occasion:nth-child(5) { display: none; }
.occasion:nth-child(6) { --occasion-image: url('occasions/corporate.webp'); }
.occasion .occ-ic { display: none; }
.occasion h3,
.occasion p { position: relative; z-index: 2; }
.occasion h3 { color: var(--ivory); font-size: 1.65rem; }
.occasion p { color: rgba(244, 238, 223, .65); }
.occasions-note { color: rgba(244, 238, 223, .5); }

.gallery-section {
  color: var(--ivory);
  background: #0d261f;
  border-color: var(--cinema-line);
}
.gallery-hint { color: rgba(244, 238, 223, .52); }
.gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 24px 14px; }
.design-preview { border-radius: 3px; box-shadow: 0 22px 42px rgba(0, 0, 0, .28); }
.design-preview:after { inset: 8px; border-radius: 0; border-color: rgba(244, 238, 223, .4); }
.design-copy { color: var(--ivory); }
.design-copy span { color: rgba(244, 238, 223, .52); }
.preview-link { border-color: rgba(201, 166, 92, .55); color: var(--ivory); }
.preview-link:hover { border-color: var(--antique-gold); background: var(--antique-gold); color: var(--cinema); }
.order-link { border-color: var(--coral-bright); background: var(--coral-bright); color: var(--cinema); }

.why-section { color: var(--ivory); background: var(--cinema); }
.why-grid { max-width: 1120px; gap: 0; border-top: 1px solid var(--cinema-line); border-bottom: 1px solid var(--cinema-line); }
.why-card {
  padding: 40px 32px;
  border: 0;
  border-right: 1px solid var(--cinema-line);
  border-radius: 0;
  background: transparent;
}
.why-card:last-child { border-right: 0; }
.why-card b { width: auto; height: auto; display: block; margin-bottom: 46px; border-radius: 0; background: transparent; color: var(--antique-gold); font-size: .68rem; letter-spacing: .14em; }
.why-card h3 { color: var(--ivory); font-size: 2rem; }
.why-card p { color: rgba(244, 238, 223, .58); }

.package-section,
.faq-section {
  color: var(--ivory);
  background: #0b231c;
  border-top: 1px solid var(--cinema-line);
}
.package-section .section-heading h2,
.faq-section .section-heading h2 { color: var(--ivory); }
.package-section .section-heading p,
.faq-section .section-heading p,
.package-footnote { color: rgba(244, 238, 223, .58); }
.package-section .eyebrow,
.faq-section .eyebrow { color: var(--antique-gold); }
.order-section {
  color: var(--ivory);
  background: #10271f;
  border-color: var(--cinema-line);
}
.order-section .section-heading h2,
.order-section .step h3,
.order-section .order-cta h3 { color: var(--ivory); }
.order-section .section-heading p,
.order-section .step p { color: rgba(244, 238, 223, .6); }
.order-section .eyebrow { color: var(--antique-gold); }
.package {
  color: var(--ivory);
  background: rgba(255, 255, 255, .045);
  border-radius: 3px;
  border-color: rgba(244, 238, 223, .16);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .2);
}
.package.recommended {
  background: linear-gradient(180deg, rgba(201, 166, 92, .11), rgba(255, 255, 255, .045));
  border-color: var(--antique-gold);
  box-shadow: 0 24px 65px rgba(0, 0, 0, .25);
}
.package h3,
.package .price strong,
.package .feat-list li.hl,
.package .feat-list li.new { color: var(--ivory); }
.package .package-note,
.package .price s { color: rgba(244, 238, 223, .5); }
.package .feat-list li { color: rgba(244, 238, 223, .7); }
.package .package-mark,
.package .package-mark.m-basic,
.package .package-mark.m-advance,
.package .package-mark.m-premium {
  color: var(--antique-gold);
  background: rgba(201, 166, 92, .1);
  border: 1px solid rgba(201, 166, 92, .45);
}
.package .feat-list li:before {
  color: var(--antique-gold);
  background: rgba(201, 166, 92, .1);
}
.package .primary-btn,
.order-wa { border-radius: 999px; }
.package .primary-btn { color: var(--cinema); }
.package .price small { color: #ff9a82; }
.package .ribbon { color: var(--cinema); }
.package .secondary-btn {
  border-radius: 999px;
  border-color: rgba(244, 238, 223, .42);
  background: transparent;
  color: var(--ivory);
}
.package .secondary-btn:hover,
.package .secondary-btn:focus-visible {
  border-color: var(--antique-gold);
  background: rgba(201, 166, 92, .11);
  color: var(--ivory);
}
.addons-block { border-radius: 3px; background: rgba(255, 255, 255, .035); border-color: rgba(201, 166, 92, .55); box-shadow: none; }
.addons-title { color: var(--ivory); }
.addons-sub { color: rgba(244, 238, 223, .56); }
.addons-block .addon-pill { border-color: var(--cinema-line); background: rgba(255, 255, 255, .05); color: rgba(244, 238, 223, .72); }
.order-section:before { display: none; }
.order-section .step-number { border-color: var(--antique-gold); color: var(--antique-gold); }
.order-cta {
  border: 1px solid rgba(201, 166, 92, .45);
  border-radius: 3px;
  background: rgba(255, 255, 255, .045);
}
.order-cta .order-selected { color: rgba(244, 238, 223, .7); }
.order-cta .order-wa { color: #153027; background: var(--ivory); }

.social-section {
  color: var(--ivory);
  background: #0d261f;
  border-color: var(--cinema-line);
}
.stat { border-color: var(--cinema-line); border-radius: 2px; background: rgba(255, 255, 255, .035); box-shadow: none; }
.stat strong { color: var(--antique-gold); }
.stat span { color: rgba(244, 238, 223, .55); }
.tcard { border-color: var(--cinema-line); border-radius: 2px; background: rgba(255, 255, 255, .035); box-shadow: none; }
.tcard blockquote { color: rgba(244, 238, 223, .72); }
.tcard figcaption b { background: var(--antique-gold); color: var(--cinema); }
.tcard figcaption strong { color: var(--ivory); }
.tcard figcaption span { color: rgba(244, 238, 223, .5); }
.faq-grid details { border-color: var(--cinema-line); border-radius: 2px; background: rgba(255, 255, 255, .035); color: var(--ivory); }
.faq-grid summary { color: var(--ivory); }
.faq-grid p { color: rgba(244, 238, 223, .62); }
.faq-grid summary:after { color: var(--antique-gold); }

#majlis,
#contoh,
#pakej,
#cara,
#faq { scroll-margin-top: 78px; }

.site-footer {
  border-color: var(--cinema-line);
  background: #071812;
  color: rgba(244, 238, 223, .56);
}
.footer-column h2 { color: var(--ivory); }
.site-footer a { color: rgba(244, 238, 223, .58); }
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--antique-gold); }
.footer-contact svg { fill: var(--antique-gold); }
.site-footer .social-link { border-color: var(--cinema-line); background: rgba(255, 255, 255, .06); filter: invert(1); }
.footer-copyright { border-color: var(--cinema-line); }
.floating-order { display: none; }
.package .feat-list li:before { content: "✓"; }

.promo-dialog { border: 1px solid var(--cinema-line); border-radius: 3px; background: var(--cinema-soft); color: var(--ivory); }
.promo-copy h2 { color: var(--ivory); }
.promo-copy > p,
.promo-note { color: rgba(244, 238, 223, .58) !important; }
.promo-price-row { border-color: var(--cinema-line); }
.promo-price-row span { color: var(--ivory); }
.promo-price-row s { color: rgba(244, 238, 223, .45); }
.promo-art { background: var(--cinema); }

@media (max-width: 1040px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 74px; }
  .hero-copy { max-width: 760px; }
  .hero-product { width: min(100%, 720px); min-height: 820px; margin: -10px auto 0; }
  .occasions-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 850px) {
  .why-card { border-right: 0; border-bottom: 1px solid var(--cinema-line); }
  .why-card:last-child { border-bottom: 0; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .site-header { position: sticky; }
  .nav { padding: 12px 16px; }
  .nav-links { background: #0b231c; border-color: var(--cinema-line); }
  .nav-links a { border-color: var(--cinema-line); }
  .hero { min-height: auto; }
  .hero:before { background-image: repeating-linear-gradient(90deg, transparent 0 42px, rgba(244, 238, 223, .025) 43px 44px); }
  .hero-inner { display: flex; flex-direction: column; align-items: stretch; gap: 16px; min-height: auto; padding: 62px 18px 72px; }
  .hero h1 { max-width: 340px; font-size: clamp(3.65rem, 17vw, 5.1rem); }
  .hero-copy p { font-size: .91rem; margin: 24px 0 28px; }
  .hero .actions { display: grid; gap: 14px; }
  .hero .secondary-btn { justify-self: center; }
  .proof-row { margin-top: 30px; }
  .hero-product { width: calc(100% + 20px); min-height: 660px; margin: 0 -10px; }
  .hero-video-stage { min-height: 590px; }
  .hero-video-stage .reel-glow { width: 340px; height: 340px; }
  .hero-video-stage .phone { width: 250px; }
  .hero-peek-card { width: 165px; transform: translate(-50%, -50%) translate(-105px, 8px) rotate(-9deg); }
  .hero-occasion-tags { margin-top: -4px; gap: 6px; }
  .hero-occasion-tags span { padding: 6px 9px; font-size: .6rem; }
  .hero-product-caption { max-width: 290px; margin: 14px auto 0; text-align: center; line-height: 1.5; }
  .trust-strip { margin: 0 18px; border-radius: 0; }
  .occasions-section { padding-top: 86px; }
  .occasions-grid { display: flex; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; padding-right: 22px; }
  .occasions-grid::-webkit-scrollbar { display: none; }
  .occasion { flex: 0 0 78vw; min-height: 410px; scroll-snap-align: start; }
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 22px 10px; }
  .design-copy { font-size: .76rem; }
  .card-actions { grid-template-columns: 1fr; }
  .why-card { padding: 34px 8px; }
  .why-card b { margin-bottom: 26px; }
  .promo-dialog { border-radius: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .occasion:before { transition: none; }
}