/* ================================================================
   PHOTO ANH ĐỨC — 3D Cinematic Photography Landing Page
   Organized:
   01. Tokens  02. Base  03. Grain/Atmos  04. Header  05. Hero
   06. Hero Carousel  07. Sections  08. Services  09. Why Us
   10. Portfolio  11. Process  12. Pricing  13. Testimonials
   14. Final CTA  15. Footer  16. Motion  17. Responsive
   ================================================================ */

/* ================================================================
   01. DESIGN TOKENS
   ================================================================ */
:root {
  /* Brand colors: the only identity hues used by the page. */
  --color-base: #070A12;
  --color-primary: #5B21B6;
  --color-accent: #F6D17A;
  --rgb-base: 7, 10, 18;
  --rgb-primary: 91, 33, 182;
  --rgb-accent: 246, 209, 122;
  --rgb-text: 248, 250, 252;

  /* Derived surfaces and text. */
  --color-surface: rgba(var(--rgb-primary), .10);
  --color-surface-strong: rgba(var(--rgb-primary), .18);
  --color-surface-paper: rgba(var(--rgb-text), .96);
  --color-border: rgba(var(--rgb-text), .08);
  --color-border-strong: rgba(var(--rgb-text), .16);
  --color-border-accent: rgba(var(--rgb-accent), .45);
  --text-main: rgb(var(--rgb-text));
  --text-soft: rgba(var(--rgb-text), .72);
  --text-muted: rgba(var(--rgb-text), .48);
  --text-on-accent: var(--color-base);
  --image-fallback: linear-gradient(145deg, var(--color-surface-strong), var(--color-base));
  --brand-gradient: linear-gradient(115deg, var(--color-primary), var(--color-accent));
  --accent-gradient: linear-gradient(115deg, var(--color-accent), rgba(var(--rgb-accent), .78));
  --section-gradient: linear-gradient(145deg, var(--color-base), rgba(var(--rgb-primary), .38));

  /* Typography. */
  --font-main: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-hero-ghost: clamp(84px, 18vw, 300px);
  --fs-h1: clamp(26px, 4vw, 52px);
  --fs-h2: clamp(28px, 4vw, 50px);
  --fs-h3: clamp(17px, 1.6vw, 20px);
  --fs-body: clamp(14px, 1.3vw, 16px);
  --fs-label: clamp(10px, 1vw, 12px);
  --fs-button: clamp(13px, 1.2vw, 14.5px);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Spacing and layout. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --section-y: clamp(72px, 10vw, 130px);
  --maxw: 1580px;
  --padx: clamp(18px, 5vw, 64px);
  --hero-copy-left: max(var(--padx), 5.5vw);
  --hero-copy-width: clamp(240px, 24vw, 310px);
  --hero-carousel-shift: 12vw;

  /* Radius. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Shadows. */
  --shadow-soft: 0 4px 16px -6px rgba(var(--rgb-base), .60);
  --shadow-card: 0 16px 48px -16px rgba(var(--rgb-base), .75);
  --shadow-hero: 0 40px 90px -24px rgba(var(--rgb-base), .90);
  --shadow-glow: 0 16px 48px -18px rgba(var(--rgb-accent), .50);

  /* Motion. */
  --duration-fast: 180ms;
  --duration-normal: 320ms;
  --duration-slow: 550ms;
  --duration-carousel: 650ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Compatibility aliases keep the existing component layout stable. */
  --bg: var(--color-base);
  --bg-2: rgba(var(--rgb-primary), .06);
  --bg-card: rgba(var(--rgb-primary), .10);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-strong);
  --text: var(--text-main);
  --muted: var(--text-soft);
  --muted-2: var(--text-muted);
  --gold: var(--color-accent);
  --gold-2: var(--color-accent);
  --gold-grad: var(--accent-gradient);
  --gold-glow: rgba(var(--rgb-accent), .45);
  --scene-bg-a: var(--color-base);
  --scene-bg-b: var(--color-primary);
  --scene-panel: var(--color-accent);
  --scene-text: var(--text-main);
  --line: var(--color-border);
  --line-2: var(--color-border-strong);
  --line-gold: var(--color-border-accent);
  --r-sm: var(--radius-sm);
  --r-md: var(--radius-md);
  --r-lg: var(--radius-lg);
  --r-xl: var(--radius-xl);
  --shadow-sm: var(--shadow-soft);
  --shadow-md: var(--shadow-card);
  --shadow-gold: var(--shadow-glow);
  --ease: var(--ease-standard);
  --t-car: var(--duration-carousel);
  --t-fast: var(--duration-fast);
  --t-base: var(--duration-normal);
  --t-slow: var(--duration-slow);
}

/* ================================================================
   02. BASE RESET
   ================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-main);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
  object-fit: cover;
  background: var(--image-fallback);
}

img.img-failed {
  visibility: hidden;
}

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

button {
  font-family: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-main);
  font-weight: var(--fw-black);
  line-height: 1.14;
  margin: 0;
  letter-spacing: -.015em;
  text-wrap: balance;
}

em {
  font-style: normal;
  color: var(--color-accent);
}

.keep-phrase {
  white-space: nowrap;
}

/* icon utilities */
.icon-inline,
.btn i,
.svc-link i,
.pf-tab i,
.pkg-badge i,
.pkg-features i,
.final-pill i,
.foot-li i {
  flex-shrink: 0;
  line-height: 1;
}

.icon-inline,
.btn i,
.svc-link i {
  font-size: .92em;
}

.service-icon {
  width: 18px;
  color: var(--color-accent);
  font-size: .9em;
  text-align: center;
}

.footer-icon {
  width: 14px;
  color: var(--color-accent);
  text-align: center;
}

/* layout helpers */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--padx);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-main);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-2);
  white-space: nowrap;
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  background: var(--gold-grad);
  flex-shrink: 0;
}

.eyebrow-light {
  color: rgba(var(--rgb-text), .7);
}

.eyebrow-light::before,
.eyebrow-light::after {
  background: rgba(var(--rgb-text), .4);
}

/* section head */
.sec-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.sec-head h2 {
  font-size: var(--fs-h2);
}

.sec-head p {
  margin: 0;
  max-width: 520px;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.72;
}

/* sections */
.section {
  padding: var(--section-y) 0;
  position: relative;
}

.section-dark {
  background: var(--bg-2);
}

.section-dark-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 800px 500px at 80% 20%, rgba(var(--rgb-primary), .10), transparent 65%),
    radial-gradient(ellipse 600px 400px at 10% 80%, rgba(var(--rgb-primary), .12), transparent 65%);
}

.section-dark .container,
.section-dark .sec-head {
  position: relative;
  z-index: 1;
}

.section-dark h2 {
  color: var(--text);
}

.section-dark .sec-head p {
  color: var(--muted);
}

/* ================================================================
   03. GRAIN / ATMOSPHERIC OVERLAY
   ================================================================ */
.page-grain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .032;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ================================================================
   04. BUTTONS
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-main);
  font-weight: var(--fw-bold);
  font-size: var(--fs-button);
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  min-height: 48px;
  position: relative;
  overflow: hidden;
  transition:
    transform var(--t-fast) var(--ease-snap),
    box-shadow var(--t-fast) var(--ease-snap),
    background var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast);
}

/* shimmer on gold */
.btn-gold::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--rgb-text), .25), transparent);
  transition: left .6s var(--ease);
  pointer-events: none;
}

.btn-gold {
  background: var(--gold-grad);
  color: var(--text-on-accent);
  font-weight: var(--fw-bold);
  box-shadow: 0 6px 24px -8px rgba(var(--rgb-accent), .5);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.btn-gold:hover::after {
  left: 130%;
}

.btn-ghost {
  background: rgba(var(--rgb-text), .05);
  color: var(--text);
  border-color: var(--line-2);
  backdrop-filter: blur(8px);
}

.btn-ghost:hover {
  border-color: var(--gold-2);
  color: var(--gold-2);
  transform: translateY(-2px);
  background: rgba(var(--rgb-accent), .07);
}

.btn:active {
  transform: translateY(0) scale(.97);
}

.btn-sm {
  padding: 9px 18px;
  font-size: 13px;
  min-height: 40px;
}

/* ================================================================
   05. HEADER
   ================================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px var(--padx);
  background: transparent;
  transition:
    background var(--t-base),
    backdrop-filter var(--t-base),
    border-color var(--t-base),
    padding var(--t-base),
    box-shadow var(--t-base);
  border-bottom: 1px solid transparent;
}

.site-header.hdr-scrolled {
  background: rgba(var(--rgb-base), .88);
  backdrop-filter: blur(20px) saturate(150%);
  border-bottom-color: var(--line);
  padding-top: 12px;
  padding-bottom: 12px;
  box-shadow: 0 4px 24px -8px rgba(var(--rgb-base), .5);
}

.hdr-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
  flex-shrink: 0;
}

.hdr-brand-name {
  font-family: var(--font-main);
  font-weight: var(--fw-black);
  font-size: 20px;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--text);
}

.hdr-brand-name b {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hdr-brand-tag {
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}

.hdr-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.hdr-nav a {
  position: relative;
  padding: 8px 13px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(var(--rgb-text), .72);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: color var(--t-fast);
}

.hdr-nav a::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 3px;
  height: 1.5px;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease-snap);
  border-radius: 2px;
}

.hdr-nav a:hover {
  color: var(--text);
}

.hdr-nav a:hover::after {
  transform: scaleX(1);
}

.hdr-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: 1.5px solid var(--line-2);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--t-fast);
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base);
}

.hamburger:hover {
  border-color: var(--gold-2);
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* mobile drawer */
.mob-drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  visibility: hidden;
}

.mob-drawer.open {
  display: block;
  visibility: visible;
}

.mob-scrim {
  position: absolute;
  inset: 0;
  background: rgba(var(--rgb-base), .7);
  backdrop-filter: blur(4px);
}

.mob-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(85vw, 340px);
  background: var(--surface);
  border-left: 1px solid var(--line);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateX(100%);
  transition: transform .35s var(--ease-snap);
}

.mob-drawer.open .mob-panel {
  transform: none;
}

.mob-panel-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.mob-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--muted);
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

.mob-link {
  display: block;
  padding: 13px 8px;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  transition: color var(--t-fast);
}

.mob-link:hover {
  color: var(--gold-2);
}

.mob-cta-btn {
  margin-top: 20px;
  width: 100%;
}

/* ================================================================
   06. HERO — 3D CINEMATIC CAROUSEL
   ================================================================ */
/* ================================================================
   HERO — 2-COLUMN CINEMATIC LAYOUT
   Desktop : [copy LEFT 40%] | [carousel RIGHT 60%]
   Mobile  : [carousel TOP]  / [copy BOTTOM]
   ================================================================ */

/* ---- Stage: full-viewport shell (height driven by .hero-layout) ---- */
.hero-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  perspective: 1600px;
  perspective-origin: 68% 50%;
  /* bias toward carousel column */
}

/* ---- 2-column layout wrapper ---- */
.hero-layout {
  position: relative;
  z-index: 5;
  display: flex;
  width: 100%;
  min-height: 100svh;
  padding-top: 72px;
  /* clear fixed header */
}

/* ---- Shared column base ---- */
.hero-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Left column (40%): text content — flush to .container content edge */
.hero-col--copy {
  flex: 2;
  position: relative;
  /* for hero-discover */
  align-items: flex-start;
  padding: clamp(40px, 5vw, 80px) 0;
  /* horizontal gutter handled by the .container wrapper */
}

/* Right column (60%): carousel */
.hero-col--carousel {
  flex: 3;
  position: relative;
  /* carousel-stage, car-nav, dots are abs inside */
}

/* ---- Dynamic background ---- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--scene-bg-a) 0%, var(--scene-bg-b) 100%);
  transition: background var(--t-car) var(--ease);
}

.hero-bg-noise {
  position: absolute;
  inset: 0;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* diagonal light beam */
.hero-light-beam {
  position: absolute;
  top: -20%;
  right: 15%;
  width: 2px;
  height: 180%;
  background: linear-gradient(180deg,
      transparent 0%,
      rgba(var(--rgb-text), .12) 35%,
      rgba(var(--rgb-text), .18) 50%,
      rgba(var(--rgb-text), .12) 65%,
      transparent 100%);
  transform: rotate(25deg);
  pointer-events: none;
}

/* bokeh particles */
.bokeh-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---- Giant ghost text — pure decorative overlay, no layout influence ---- */
/* wrapper is a full-stage clip; text is independently positioned */
.ghost-text-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.ghost-text {
  /* purely decorative — behind the 2-column layout */
  position: absolute;
  top: 50%;
  left: 68%;
  /* centre of the right/carousel column (40 + 60/2)% */
  transform: translate(-50%, -50%);
  font-family: var(--font-main);
  font-size: var(--fs-hero-ghost);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -.08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--rgb-text), .09);
  text-shadow: none;
  user-select: none;
  transition: opacity var(--t-car) var(--ease);
}

/* ---- 3D Photo Carousel Stage (fills its column absolutely) ---- */
.carousel-stage {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transform: none;
  pointer-events: none;
}

/* Individual photo card — base size enlarged */
.car-card {
  position: absolute;
  width: clamp(220px, 30vw, 440px);
  aspect-ratio: 3/4;
  border-radius: var(--r-lg);
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform, opacity, filter;
  transition:
    transform var(--t-car) var(--ease),
    opacity var(--t-car) var(--ease),
    filter var(--t-car) var(--ease),
    z-index 0s;
  box-shadow:
    0 24px 64px -20px rgba(var(--rgb-base), .85),
    0 8px 24px -8px rgba(var(--rgb-base), .6);
}

.car-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}

.car-card:hover img {
  transform: scale(1.04);
}

/* Gradient fallback overlay when image fails */
.car-card-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-main);
  color: rgba(var(--rgb-text), .85);
  background: linear-gradient(160deg, var(--scene-bg-a), var(--scene-bg-b));
}

.car-card-fallback i {
  color: var(--color-accent);
  font-size: 48px;
}

.car-card-fallback span:last-child {
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Label on card */
.car-card-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 16px 16px;
  background: linear-gradient(0deg, rgba(var(--rgb-base), .75), transparent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(var(--rgb-text), .9);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--t-base);
}

.car-card[data-role="center"] .car-card-label {
  opacity: 1;
}

/* Panel accent edge */
.car-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(var(--rgb-text), .12);
  pointer-events: none;
}

/* Roles applied by JS — enlarged & deeper 3D */
.car-card[data-role="center"] {
  z-index: 15;
  transform: translateX(0) scale(1.1) translateZ(60px) rotateY(0deg);
  opacity: 1;
  filter: blur(0px) brightness(1.08);
  box-shadow:
    0 40px 90px -24px rgba(var(--rgb-base), .9),
    0 12px 36px -12px rgba(var(--rgb-base), .65),
    0 0 0 1.5px rgba(var(--rgb-text), .14);
}

/* subtle ground reflection under center card */
.car-card[data-role="center"]::before {
  content: "";
  position: absolute;
  bottom: -24px;
  left: 10%;
  right: 10%;
  height: 24px;
  background: radial-gradient(ellipse at 50% 0%,
      rgba(var(--rgb-base), .45) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.car-card[data-role="right"] {
  z-index: 12;
  transform: translateX(46%) scale(.78) rotateY(-14deg);
  opacity: .80;
  filter: blur(1.5px) brightness(.86);
}

.car-card[data-role="left"] {
  z-index: 12;
  transform: translateX(-46%) scale(.78) rotateY(14deg);
  opacity: .80;
  filter: blur(1.5px) brightness(.86);
}

.car-card[data-role="back"] {
  z-index: 8;
  transform: translateX(0) scale(.58) translateY(4%);
  opacity: .46;
  filter: blur(3.5px) brightness(.72);
}

/* ---- Navigation arrows (inside carousel column, top:50% = column centre) ---- */
.car-nav {
  position: absolute;
  z-index: 20;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(var(--rgb-text), .10);
  border: 1.5px solid rgba(var(--rgb-text), .20);
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.car-nav i {
  font-size: 20px;
}

.car-prev {
  left: clamp(12px, 3vw, 40px);
}

.car-next {
  right: clamp(12px, 3vw, 40px);
}

.car-nav:hover {
  background: rgba(var(--rgb-accent), .25);
  border-color: var(--gold-2);
  transform: translateY(-50%) scale(1.08);
}

.car-nav:active {
  transform: translateY(-50%) scale(.95);
}

/* ---- Hero Copy (in-flow inside .hero-col--copy) ---- */
.hero-copy {
  width: 100%;
  max-width: clamp(260px, 90%, 380px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.hero-service-label {
  display: inline-block;
  align-self: flex-start;
  /* left-aligned on desktop */
  font-family: var(--font-main);
  font-weight: var(--fw-bold);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-2);
  padding: 5px 14px;
  border: 1px solid rgba(var(--rgb-accent), .4);
  border-radius: var(--radius-pill);
  background: rgba(var(--rgb-accent), .08);
  backdrop-filter: blur(6px);
  white-space: nowrap;
  transition: all var(--t-car) var(--ease);
}

.hero-headline {
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  line-height: 1.1;
  letter-spacing: -.04em;
  text-transform: uppercase;
  /* TIÊU ĐỀ luôn viết hoa */
  color: var(--text-main);
  text-shadow: 0 2px 24px rgba(var(--rgb-base), .5);
  transition: opacity .4s var(--ease);
}

.hero-headline em {
  color: var(--gold-2);
}

.hero-desc {
  font-size: var(--fs-body);
  color: rgba(var(--rgb-text), .75);
  line-height: 1.72;
  margin: 0;
  transition: opacity .4s var(--ease);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* left-aligned on desktop */
  align-self: flex-start;
  gap: 10px;
  margin-top: 4px;
}

/* ---- Scene dots (inside carousel column, bottom-centred) ---- */
.hero-dots {
  position: absolute;
  z-index: 25;
  bottom: clamp(16px, 3vh, 36px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
}

.hero-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--rgb-text), .32);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--t-base), transform var(--t-base), width var(--t-base);
}

.hero-dot::before {
  content: "";
  position: absolute;
  inset: -5px;
}

.hero-dot.active {
  background: var(--gold-2);
  width: 24px;
  border-radius: 4px;
}

/* ---- Discover link (absolute inside .hero-col--copy) ---- */
.hero-discover {
  position: absolute;
  z-index: 25;
  bottom: clamp(28px, 4vh, 48px);
  right: clamp(16px, 2vw, 32px);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  color: rgba(var(--rgb-text), .7);
  transition: color var(--t-fast);
}

.hero-discover:hover {
  color: var(--gold-2);
}

.hero-discover-text {
  font-family: var(--font-main);
  font-weight: var(--fw-black);
  font-size: clamp(18px, 2.2vw, 28px);
  letter-spacing: .12em;
  white-space: nowrap;
  line-height: 1;
}

.hero-discover-arrow {
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: 1;
  transform: translateY(-2px);
}

/* ---- Aperture ring ---- */
.aperture-ring {
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%);
  z-index: 3;
  width: clamp(80px, 12vw, 180px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--rgb-text), .06);
  box-shadow:
    0 0 0 8px rgba(var(--rgb-text), .025),
    0 0 0 18px rgba(var(--rgb-text), .012);
  pointer-events: none;
  animation: apertureSpin 18s linear infinite;
}

@keyframes apertureSpin {
  from {
    transform: translateY(-50%) rotate(0deg);
  }

  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* ---- Lens flare ---- */
.lens-flare {
  position: absolute;
  top: 18%;
  left: 60%;
  z-index: 4;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-main);
  box-shadow:
    0 0 0 2px rgba(var(--rgb-text), .4),
    0 0 12px 4px rgba(var(--rgb-text), .15),
    0 0 40px 12px rgba(var(--rgb-accent), .10),
    80px 40px 0 2px rgba(var(--rgb-text), .06),
    160px -20px 0 1px rgba(var(--rgb-text), .04);
  pointer-events: none;
  animation: flareShift 6s ease-in-out infinite alternate;
}

@keyframes flareShift {
  from {
    opacity: .6;
    transform: translate(0, 0);
  }

  to {
    opacity: .9;
    transform: translate(-8px, 4px);
  }
}

/* ================================================================
   07. SECTIONS SHARED
   ================================================================ */
/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .7s var(--ease-snap),
    transform .7s var(--ease-snap);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.reveal.d1 {
  transition-delay: .08s;
}

.reveal.d2 {
  transition-delay: .16s;
}

.reveal.d3 {
  transition-delay: .24s;
}

/* ================================================================
   08. SERVICES — CINEMATIC PHOTO / FILM CARD DECK
   ================================================================ */
.svc-deck {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  perspective: 1400px;
}

.svc-frame {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transform-style: preserve-3d;
  transition:
    transform var(--t-base) var(--ease-snap),
    box-shadow var(--t-base),
    border-color var(--t-base);
  will-change: transform;
}

.svc-frame:hover {
  transform: translateY(-10px) rotateX(3deg);
  box-shadow:
    0 32px 64px -22px rgba(var(--rgb-base), .78),
    0 0 0 1px rgba(var(--rgb-accent), .22);
  border-color: rgba(var(--rgb-accent), .45);
}

/* top hue accent bar — sweeps in on hover */
.svc-frame::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 5;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-snap);
}

.svc-frame:hover::before {
  transform: scaleX(1);
}

.svc-frame::before {
  background: var(--brand-gradient);
}

/* photo / film-frame area */
.svc-img-wrap {
  position: relative;
  height: 196px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--image-fallback);
}

.svc-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.svc-frame:hover .svc-img-wrap img {
  transform: scale(1.07);
}

.svc-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(var(--rgb-base), .78) 0%, rgba(var(--rgb-base), .06) 55%, transparent 100%);
}

/* film perforation strip along top edge of the photo */
.svc-img-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 9px;
  z-index: 3;
  opacity: .55;
}

/* diagonal light sweep on hover */
.svc-img-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(var(--rgb-text), .18), transparent);
  transform: skewX(-12deg);
  pointer-events: none;
  transition: left .7s var(--ease);
}

.svc-frame:hover .svc-img-wrap::after {
  left: 130%;
}

/* category tag chip on the photo */
.svc-frame-tag {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 4;
  font-family: var(--font-main);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(var(--rgb-text), .92);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(var(--rgb-base), .42);
  border: 1px solid rgba(var(--rgb-text), .18);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

/* small lens marker, bottom-right of the photo */
.svc-lens {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 4;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--rgb-text), .6);
  box-shadow: inset 0 0 0 3px rgba(var(--rgb-text), .18);
}

/* Memorial service — no photo, calm neutral gradient, respectful */
.svc-memorial-img {
  height: 196px;
}

.svc-memorial-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) brightness(.82);
}

.svc-memorial-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg, rgba(var(--rgb-base), .18), rgba(var(--rgb-primary), .32));
}

.svc-memorial .svc-frame-tag {
  background: rgba(var(--rgb-base), .3);
  border-color: rgba(var(--rgb-text), .22);
}

.svc-memorial .svc-body h3 {
  color: var(--text-main);
}

.svc-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.svc-num {
  font-family: var(--font-main);
  font-weight: var(--fw-black);
  font-size: 12px;
  letter-spacing: .26em;
  color: var(--muted-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.svc-num::after {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--line-2);
}

.svc-body h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: 1.22;
}

.svc-body p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
}

.svc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-2);
  letter-spacing: .04em;
  white-space: nowrap;
  margin-top: 4px;
  transition: gap var(--t-fast), color var(--t-fast);
}

.svc-link:hover {
  gap: 10px;
}

.svc-link i {
  font-size: 12px;
}

/* ================================================================
   09. WHY US — CINEMATIC STUDIO PROMISE BOARD
   ================================================================ */
/* focus grid + aperture glow scoped to the Why section */
#why .section-dark-bg {
  background:
    radial-gradient(ellipse 760px 480px at 78% 18%, rgba(var(--rgb-primary), .12), transparent 64%),
    radial-gradient(ellipse 620px 420px at 12% 82%, rgba(var(--rgb-accent), .06), transparent 64%);
}

#why .section-dark-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(var(--rgb-text), .028) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(var(--rgb-text), .028) 0 1px, transparent 1px 60px);
  -webkit-mask: radial-gradient(ellipse 72% 64% at 50% 46%, var(--color-base) 28%, transparent 82%);
  mask: radial-gradient(ellipse 72% 64% at 50% 46%, var(--color-base) 28%, transparent 82%);
}

.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  position: relative;
  z-index: 1;
}

.promise-card {
  position: relative;
  background: linear-gradient(160deg, rgba(var(--rgb-text), .055), rgba(var(--rgb-text), .018));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition:
    transform var(--t-base) var(--ease-snap),
    border-color var(--t-base),
    box-shadow var(--t-base);
}

/* gold edge that draws in on hover */
.promise-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-snap);
}

.promise-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--rgb-accent), .32);
  box-shadow: 0 22px 48px -20px rgba(var(--rgb-primary), .4);
}

.promise-card:hover::after {
  transform: scaleX(1);
}

/* aperture / lens icon bubble */
.promise-icon {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 23px;
  line-height: 1;
  color: var(--gold-2);
  background: radial-gradient(circle at 36% 30%, rgba(var(--rgb-accent), .2), rgba(var(--rgb-text), .02));
  border: 1px solid rgba(var(--rgb-accent), .3);
  box-shadow: inset 0 0 14px rgba(var(--rgb-accent), .12);
  transition: box-shadow var(--t-base);
}

.promise-icon::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dashed rgba(var(--rgb-accent), .22);
  transition: transform .8s var(--ease);
}

.promise-card:hover .promise-icon {
  box-shadow: inset 0 0 14px rgba(var(--rgb-accent), .2), 0 0 22px -4px rgba(var(--rgb-accent), .4);
}

.promise-card:hover .promise-icon::after {
  transform: rotate(90deg);
}

.promise-icon i {
  color: var(--color-accent);
  font-size: 20px;
}

.promise-card h4 {
  font-family: var(--font-main);
  font-weight: var(--fw-bold);
  font-size: 18px;
  color: var(--text);
  line-height: 1.22;
}

/* micro separator under the title */
.promise-card h4::after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  margin-top: 12px;
  background: var(--gold-grad);
  border-radius: 2px;
  opacity: .6;
}

.promise-card p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
}

/* ================================================================
   10. PORTFOLIO — CINEMATIC CONTACT SHEET
   ================================================================ */
/* camera-mode selector bar */
.pf-filters {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 36px;
  padding: 6px;
  background: rgba(var(--rgb-text), .03);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.pf-filters::-webkit-scrollbar {
  display: none;
}

.pf-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-main);
  font-weight: var(--fw-semibold);
  font-size: 13px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.pf-tab:hover {
  color: var(--text);
  background: rgba(var(--rgb-text), .06);
}

.pf-tab.active {
  background: var(--gold-grad);
  color: var(--text-on-accent);
  box-shadow: 0 6px 18px -8px rgba(var(--rgb-accent), .55);
}

.pf-tab i {
  font-size: 12px;
}

.pf-masonry {
  columns: 4;
  column-gap: 14px;
}

.pf-shot {
  position: relative;
  break-inside: avoid;
  margin: 0 0 14px;
  border-radius: var(--r-md);
  overflow: hidden;
  height: var(--shot-height, 280px);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  background: var(--image-fallback);
  transition:
    transform var(--t-base) var(--ease-snap),
    box-shadow var(--t-base);
}

.pf-shot--xl {
  --shot-height: 360px;
}

.pf-shot--tall {
  --shot-height: 330px;
}

.pf-shot--lg {
  --shot-height: 305px;
}

.pf-shot--md {
  --shot-height: 275px;
}

.pf-shot--sm {
  --shot-height: 250px;
}

.pf-shot--xs {
  --shot-height: 240px;
}

.pf-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

/* contact-sheet frame edge */
.pf-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(var(--rgb-text), .08);
  pointer-events: none;
  z-index: 3;
  transition: box-shadow var(--t-base);
}

.pf-shot:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 64px -24px rgba(var(--rgb-base), .85);
}

.pf-shot:hover::after {
  box-shadow: inset 0 0 0 1.5px rgba(var(--rgb-accent), .4);
}

.pf-shot:hover img {
  transform: scale(1.06);
}

/* always-visible category chip */
.pf-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(var(--rgb-text), .92);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(var(--rgb-base), .4);
  border: 1px solid rgba(var(--rgb-text), .18);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

/* caption — gradient always present, title reveals on hover */
.pf-ov {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 52px 14px 16px;
  background: linear-gradient(0deg, rgba(var(--rgb-base), .55), transparent 70%);
  transition: background var(--t-base);
}

.pf-shot:hover .pf-ov {
  background: linear-gradient(0deg, rgba(var(--rgb-base), .92), transparent 78%);
}

.pf-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  color: rgba(var(--rgb-text), .95);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-base), transform var(--t-base);
}

.pf-shot:hover .pf-title {
  opacity: 1;
  transform: none;
}

.pf-shot.pf-hide {
  display: none;
}

.pf-more {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

/* ================================================================
   11. PROCESS — FILM TIMELINE
   ================================================================ */
.film-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 1;
}

/* film strip row */
.ft-strip {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 10px 0;
  border-top: 2px solid rgba(var(--rgb-text), .06);
  border-bottom: 2px solid rgba(var(--rgb-text), .06);
}

.ft-strip span {
  display: block;
  width: 24px;
  height: 16px;
  background: rgba(var(--rgb-text), .06);
  border-radius: 3px;
  flex-shrink: 0;
}

.ft-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding: 40px 0;
  position: relative;
}

/* horizontal connector */
.ft-steps::before {
  content: "";
  position: absolute;
  top: 72px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg,
      transparent, rgba(var(--rgb-accent), .4) 15%,
      rgba(var(--rgb-accent), .4) 85%, transparent);
  z-index: 0;
}

.ft-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.ft-num {
  font-family: var(--font-main);
  font-weight: var(--fw-black);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--gold-2);
}

.ft-node {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid rgba(var(--rgb-accent), .4);
  display: grid;
  place-items: center;
  font-size: 26px;
  box-shadow: 0 8px 24px -10px rgba(var(--rgb-base), .5);
  transition:
    transform var(--t-base) var(--ease-snap),
    border-color var(--t-base),
    box-shadow var(--t-base),
    background var(--t-base);
}

.ft-node i {
  color: var(--color-accent);
  font-size: 24px;
}

.ft-step:hover .ft-node {
  transform: translateY(-6px);
  background: rgba(var(--rgb-accent), .15);
  border-color: var(--gold-2);
  box-shadow: 0 16px 36px -12px rgba(var(--rgb-accent), .45);
}

.ft-step h4 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: 1.2;
}

.ft-step p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.62;
  max-width: 220px;
}

/* ================================================================
   12. PRICING — TICKET / PASS CARDS
   ================================================================ */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  padding-top: var(--space-5);
}

.pkg-ticket {
  position: relative;
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    transform var(--t-base) var(--ease-snap),
    box-shadow var(--t-base),
    border-color var(--t-base);
}

.pkg-ticket:hover {
  transform: translateY(-6px);
  border-color: var(--line-2);
  box-shadow: 0 28px 64px -24px rgba(var(--rgb-base), .7);
}

.pkg-ticket-top {
  padding: 32px 28px 24px;
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg-card) 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pkg-type {
  font-family: var(--font-main);
  font-weight: var(--fw-black);
  font-size: 12px;
  letter-spacing: .28em;
  color: var(--muted-2);
}

.pkg-price {
  font-family: var(--font-main);
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--gold-2);
  white-space: nowrap;
}

.pkg-for {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* ticket perforation divider */
.pkg-divider {
  position: relative;
  height: 2px;
  border-top: 2px dashed rgba(var(--rgb-text), .1);
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.pkg-hole {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--line);
}

.pkg-hole.l {
  left: -10px;
}

.pkg-hole.r {
  right: -10px;
}

.pkg-features {
  list-style: none;
  margin: 0;
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.pkg-features li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}

.pkg-features i {
  color: var(--color-accent);
  font-size: 11px;
}

.pkg-features em {
  font-style: normal;
  color: var(--muted-2);
}

.pkg-cta {
  margin: 0 28px 28px;
}

/* featured */
.pkg-featured {
  background: var(--section-gradient);
  border-color: rgba(var(--rgb-accent), .5);
  box-shadow: 0 24px 60px -24px rgba(var(--rgb-accent), .3);
  transform: translateY(-10px);
  overflow: visible;
  z-index: 2;
}

.pkg-featured:hover {
  transform: translateY(-18px);
  box-shadow: 0 36px 80px -24px rgba(var(--rgb-accent), .45);
  z-index: 3;
}

.pkg-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold-grad);
  color: var(--text-on-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(var(--rgb-accent), .5);
  z-index: 4;
  pointer-events: none;
}

.pkg-badge i {
  font-size: 10px;
}

.pkg-featured .pkg-ticket-top {
  background: linear-gradient(160deg, var(--color-surface-strong), var(--color-surface));
  padding-top: 52px;
}

.pkg-note {
  text-align: center;
  color: var(--muted-2);
  font-size: 12px;
  margin-top: 28px;
  line-height: 1.5;
}

/* ================================================================
   13. TESTIMONIALS — POLAROID CARDS
   ================================================================ */
.polaroid-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  position: relative;
  z-index: 1;
}

.polaroid {
  background: var(--color-surface-paper);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 8px 32px -12px rgba(var(--rgb-base), .5), 0 2px 8px rgba(var(--rgb-base), .25);
  transition:
    transform var(--t-base) var(--ease-snap),
    box-shadow var(--t-base);
  position: relative;
}

/* paper texture / slight tilt */
.polaroid:nth-child(odd) {
  transform: rotate(-.6deg);
}

.polaroid:nth-child(even) {
  transform: rotate(.5deg);
}

.polaroid:hover {
  transform: rotate(0) translateY(-8px) scale(1.02);
  box-shadow: 0 24px 56px -18px rgba(var(--rgb-base), .6);
}

.polaroid-img {
  width: 100%;
  height: 180px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--image-fallback);
}

.polaroid-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.polaroid-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.polaroid-stars {
  display: flex;
  gap: 3px;
  color: var(--color-accent);
  font-size: 14px;
}

.polaroid-body p {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-base);
  line-height: 1.7;
  font-style: italic;
}

.polaroid-name {
  font-weight: var(--fw-bold);
  font-size: 14px;
  color: var(--color-base);
}

.polaroid-role {
  font-size: 12px;
  color: rgba(var(--rgb-base), .62);
}

/* ================================================================
   14. FINAL CTA
   ================================================================ */
.final-cta {
  position: relative;
  padding: clamp(80px, 12vw, 160px) 0;
  overflow: hidden;
  background: linear-gradient(130deg, var(--color-base), var(--color-primary));
  text-align: center;
}

.final-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.final-ghost-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-main);
  font-size: clamp(72px, 16vw, 260px);
  font-weight: 900;
  letter-spacing: -.08em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--rgb-text), .055);
  user-select: none;
}

.final-bokeh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 20% 80%, rgba(var(--rgb-primary), .18), transparent 65%),
    radial-gradient(ellipse 400px 300px at 80% 20%, rgba(var(--rgb-accent), .10), transparent 65%),
    radial-gradient(ellipse 700px 500px at 50% 110%, rgba(var(--rgb-primary), .25), transparent 70%);
}

.final-flare {
  position: absolute;
  top: 22%;
  right: 18%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-main);
  box-shadow:
    0 0 0 2px rgba(var(--rgb-text), .3),
    0 0 18px 6px rgba(var(--rgb-accent), .18),
    0 0 60px 20px rgba(var(--rgb-text), .06);
  animation: flareShift 5s ease-in-out infinite alternate;
}

.final-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.final-h2 {
  font-size: clamp(28px, 5vw, 58px);
  color: var(--text-main);
  max-width: 720px;
  text-wrap: balance;
}

.final-h2 em {
  color: var(--gold-2);
}

.final-sub {
  color: rgba(var(--rgb-text), .7);
  max-width: 480px;
  margin: 0;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.72;
}

.final-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.final-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

.final-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: rgba(var(--rgb-text), .06);
  border: 1.5px solid rgba(var(--rgb-text), .12);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(var(--rgb-text), .85);
  transition: border-color var(--t-fast), background var(--t-fast);
}

.final-pill:hover {
  border-color: var(--gold-2);
  background: rgba(var(--rgb-accent), .08);
}

/* ================================================================
   15. FOOTER
   ================================================================ */
.site-footer {
  background: var(--color-base);
  border-top: 1px solid var(--line);
  padding: clamp(56px, 7vw, 80px) 0 32px;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 48px;
}

.foot-brand-name {
  font-family: var(--font-main);
  font-weight: var(--fw-black);
  font-size: 22px;
  letter-spacing: .04em;
  white-space: nowrap;
  display: block;
  margin-bottom: 14px;
}

.foot-brand-name b {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.foot-brand p {
  color: var(--muted-2);
  font-size: 13.5px;
  max-width: 280px;
  line-height: 1.65;
  margin-bottom: 18px;
}

.foot-socials {
  display: flex;
  gap: 8px;
}

.foot-socials a {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  color: var(--muted);
  font-size: 15px;
  transition: all var(--t-fast);
}

.foot-socials a:hover {
  border-color: var(--gold-2);
  color: var(--gold-2);
  transform: translateY(-3px);
  background: rgba(var(--rgb-accent), .06);
}

.foot-col h5 {
  font-family: var(--font-main);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 16px;
  font-weight: 700;
}

.foot-col a,
.foot-col .foot-li {
  display: block;
  color: var(--muted-2);
  font-size: 13.5px;
  padding: 5px 0;
  transition: color var(--t-fast);
  line-height: 1.5;
}

.foot-col a:hover {
  color: var(--gold-2);
}

.foot-col .foot-li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.foot-bottom {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted-2);
  font-size: 12.5px;
}

/* Mobile sticky CTA */
.mob-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  display: none;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(var(--rgb-base), .94);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px -6px rgba(var(--rgb-base), .5);
}

.mob-sticky-cta .btn {
  flex: 1;
}

/* ================================================================
   16. MOTION / EFFECTS
   ================================================================ */
/* bokeh circles */
.bokeh-circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--rgb-text), .15) 0%, transparent 70%);
  pointer-events: none;
  animation: bokehFloat linear infinite;
}

@keyframes bokehFloat {
  from {
    transform: translateY(0) scale(1);
    opacity: .6;
  }

  50% {
    opacity: .35;
  }

  to {
    transform: translateY(-120px) scale(.85);
    opacity: 0;
  }
}

/* text crossfade helper */
.hero-headline.fading,
.hero-desc.fading,
.hero-service-label.fading {
  opacity: 0;
  transition: opacity .25s var(--ease);
}

/* ================================================================
   17. REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .reveal,
  .reveal.in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  @keyframes apertureSpin {}

  @keyframes bokehFloat {}

  @keyframes flareShift {}
}

/* ================================================================
   18. RESPONSIVE — 1080px
   ================================================================ */
@media (max-width: 1280px) {
  .svc-deck {
    grid-template-columns: repeat(2, 1fr);
  }

  .pf-masonry {
    columns: 3;
  }

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

  :root {
    --hero-copy-width: clamp(220px, 28vw, 290px);
    --hero-carousel-shift: 13vw;
  }
}

/* ================================================================
   19. RESPONSIVE — 900px (tablet)
   ================================================================ */
@media (max-width: 1280px) {

  /* header */
  .hdr-nav {
    display: none;
  }

  .hdr-actions .btn-gold {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* hero — tablet: keep 2-column layout (copy stays flush to container) */
  .hero-discover {
    display: none;
  }

  /* hide side cards on tablet to avoid crowding */
  .car-card[data-role="left"],
  .car-card[data-role="right"] {
    transform: translateX(0) scale(.68) rotateY(0);
    opacity: 0;
    pointer-events: none;
  }

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

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

  .ft-steps::before {
    display: none;
  }

  .pkg-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }

  .pkg-featured {
    transform: none;
  }

  .pkg-featured:hover {
    transform: translateY(-8px);
  }

  .polaroid-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  .polaroid:nth-child(odd),
  .polaroid:nth-child(even) {
    transform: none;
  }

  /* mobile CTA */
  .mob-sticky-cta {
    display: flex;
  }

  body {
    padding-bottom: 78px;
  }
}

/* ================================================================
   20. RESPONSIVE — 600px (phone)
   ================================================================ */
@media (max-width: 1200px) {
  .keep-phrase {
    white-space: normal;
  }

  /* hero — font tweaks only; layout handled by ≤900px breakpoint */
  .hero-headline {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.14;
  }

  .hero-desc {
    font-size: 14px;
    line-height: 1.65;
  }

  .aperture-ring {
    display: none;
  }

  /* services */
  .svc-deck {
    grid-template-columns: 1fr;
  }

  /* why */
  .promise-grid {
    grid-template-columns: 1fr;
  }

  /* portfolio */
  .pf-masonry {
    columns: 2;
  }

  /* process */
  .ft-steps {
    grid-template-columns: 1fr;
    padding: 24px 0;
  }

  .ft-step {
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-areas:
      "num num"
      "node title"
      "node copy";
    align-items: start;
    gap: 8px 14px;
    text-align: left;
  }

  .ft-num {
    grid-area: num;
  }

  .ft-node {
    grid-area: node;
    width: 52px;
    height: 52px;
    font-size: 22px;
  }

  .ft-step h4 {
    grid-area: title;
    margin-top: 4px;
  }

  .ft-step p {
    grid-area: copy;
    max-width: none;
  }

  /* footer */
  .foot-grid {
    grid-template-columns: 1fr;
  }

  .foot-bottom {
    flex-direction: column;
  }

  /* final */
  .final-h2 {
    font-size: clamp(24px, 7vw, 36px);
  }

  .final-ghost-text {
    font-size: clamp(56px, 18vw, 96px);
  }

  .final-pill {
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }
}

/* ================================================================
   21. RESPONSIVE — 400px
   ================================================================ */
@media (max-width: 1200px) {
  .pf-masonry {
    columns: 1;
  }

  /* hero layout is handled by the ≤900px block */
}

/* ================================================================
   22. HERO — MOBILE STACKED LAYOUT  (≤ 900 px)
   Carousel goes on top  (order:-1)
   Copy panel sits below, centred
   ================================================================ */
@media (max-width: 900px) {

  /* Switch to single column */
  .hero-layout {
    flex-direction: column;
    padding-top: 0;
    /* no header clearance needed — columns handle it */
    min-height: max(680px, 100svh);
  }

  /* ── Carousel column: top of the stack ── */
  .hero-col--carousel {
    order: -1;
    /* move above copy regardless of DOM order */
    flex: 0 0 auto;
    height: max(360px, 52vh);
    /* taller: chừa chỗ cho card + dots bên dưới */
    margin-top: 72px;
    /* clear fixed header */
  }

  /* Chừa dải dưới để dots nằm RÕ DƯỚI các card, không bị lệch */
  .carousel-stage {
    inset: 0 0 48px;
  }

  /* Dots flow trong dải dưới — luôn ở dưới phần card */
  .hero-dots {
    bottom: 16px;
  }

  /* ── Copy column: below carousel ── */
  .hero-col--copy {
    flex: 1;
    align-items: center;
    /* centre children horizontally */
    padding: 24px 16px;
    padding-bottom: 20px;
    /* room for sticky CTA */
  }

  /* Copy frame: centred card */
  .hero-copy {
    text-align: center;
    align-items: center;
    max-width: min(360px, calc(100% - 16px));
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: rgba(var(--rgb-primary), .12);
    backdrop-filter: blur(14px);
  }

  .hero-service-label {
    align-self: center;
  }

  /* Stacked full-width buttons */
  .hero-ctas {
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    width: 100%;
  }

  .hero-ctas .btn {
    width: 100%;
    min-height: 44px;
  }

  /* Ghost text centred behind carousel */
  .ghost-text {
    left: 50%;
    top: 36%;
    font-size: clamp(54px, 20vw, 104px);
    letter-spacing: -.06em;
    transform: translate(-50%, -50%);
  }

  /* Narrow card on mobile */
  .car-card {
    width: clamp(200px, 55vw, 280px);
  }

  .car-card[data-role="center"] {
    transform: translateX(0) scale(1.04) translateZ(20px) rotateY(0deg);
  }

  /* Only centre card visible */
  .car-card[data-role="left"],
  .car-card[data-role="right"],
  .car-card[data-role="back"] {
    opacity: 0;
    pointer-events: none;
  }

  /* Smaller nav arrows, căn giữa theo vùng card (trừ dải dots) */
  .car-nav {
    top: calc((100% - 48px) / 2);
    width: 42px;
    height: 42px;
  }

  .car-prev {
    left: 12px;
  }

  .car-next {
    right: 12px;
  }

  .hero-discover {
    display: none;
  }
}

/* Very small phones ≤ 480 px */
@media (max-width: 480px) {
  .hero-col--carousel {
    height: max(260px, 40vh);
  }

  .ghost-text {
    font-size: clamp(44px, 15vw, 72px);
  }

  .car-card {
    width: clamp(180px, 52vw, 240px);
  }
}