/* =========================================================
   Đẹp Cùng Ny — Design Tokens (v3 · official brand guideline)
   Source: brand guideline PDF, Section 03 (Bộ màu sắc)
   ========================================================= */

/* vietnamese */
@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/asset_9_69999151.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/asset_10_a6ab7aca.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/asset_11_fec1759e.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/asset_12_01be0311.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/asset_13_77e10e2e.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/asset_14_25a9d63f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/asset_15_6ead402f.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/asset_16_82ee322b.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/asset_17_77e4616f.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/asset_18_d6df4767.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/asset_19_74427473.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/asset_20_f0fc5d78.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/asset_21_99636294.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/asset_22_1b291c6f.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/asset_23_c6c4b24e.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/asset_24_39e9143e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/asset_25_23a661ae.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/asset_26_e4d6d9d5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* ---------- OFFICIAL 6-COLOR PALETTE ---------- */

  --navy:           #1A2332;   /* Navy Primary — nền chính */
  --navy-deep:      #131B26;   /* deeper navy — for bands, contrast */
  --navy-light:     #243447;   /* Light Navy — card / section */
  --navy-elev:      #2E4259;   /* elevated hover */

  --red:            #E63946;   /* Red Coral — accent / CTA / highlight */
  --red-dark:       #C82F3C;   /* hover */
  --red-darker:     #A82530;
  --red-light:      #ED5560;
  --red-soft-08:    rgba(230, 57, 70, 0.08);
  --red-soft-16:    rgba(230, 57, 70, 0.16);
  --red-soft-32:    rgba(230, 57, 70, 0.32);

  --cream:          #F5F1E8;   /* Cream — text chính / tiêu đề */
  --cream-dim:      #E0DCD0;
  --white:          #FFFFFF;   /* highest-contrast text on dark */

  --gray:           #8B9DB0;   /* Steel Gray — body / caption / mô tả */
  --gray-dim:       #6B7A8F;

  /* Hairlines */
  --line-soft:      rgba(245, 241, 232, 0.10);
  --line-strong:    rgba(245, 241, 232, 0.22);
  --line-red:       rgba(230, 57, 70, 0.40);

  /* ---------- LEGACY ALIASES (back-compat with v1/v2 cards) ---------- */
  --navy-950: var(--navy-deep);
  --navy-900: var(--navy-deep);
  --navy-800: var(--navy);
  --navy-700: var(--navy-light);
  --navy-600: var(--navy-elev);
  --red-700: var(--red-darker);
  --red-600: var(--red-dark);
  --red-500: var(--red);
  --red-400: var(--red-light);
  --red-300: #F47F88;
  --cream-100: var(--white);
  --cream-200: var(--cream);
  --cream-300: var(--cream-dim);
  --cream-400: var(--gray);
  --cream-500: var(--gray-dim);

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg:            var(--navy);
  --bg-deep:       var(--navy-deep);
  --bg-elev:       var(--navy-light);
  --fg:            var(--cream);        /* headlines + primary text */
  --fg-bright:     var(--white);        /* top-emphasis */
  --fg-muted:      var(--gray);         /* body, captions */
  --fg-soft:       var(--gray-dim);     /* disabled, low-emphasis */
  --accent:        var(--red);
  --accent-hover:  var(--red-dark);

  /* ---------- TYPOGRAPHY ----------
     Per guideline §04: Be Vietnam Pro (primary) → Inter / Montserrat (fallback)
     Max 2 typefaces per design. ALL CAPS allowed for impact in titles. */
  --font-display: "Be Vietnam Pro", "Montserrat", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Be Vietnam Pro", "Inter", "Montserrat", system-ui, -apple-system, sans-serif;
  --font-script:  "Allura", "Snell Roundhand", cursive;  /* signature use only */

  /* Web / document scale — per guideline */
  --type-h1:       48px;   /* Bold 700 · Cream */
  --type-h2:       32px;   /* SemiBold 600 · Cream */
  --type-h3:       24px;   /* Medium 500 · Cream/Red */
  --type-body:     16px;   /* Regular 400 · Gray · line-height 1.5x */
  --type-caption:  13px;   /* Regular 400 · Gray */
  --type-cta:      16px;   /* Bold 700 · White */

  /* Carousel scale — 1080² canvas, ~2.6× web scale for thumbnail legibility */
  --type-c-hero:    104px;
  --type-c-h1:       80px;
  --type-c-h2:       58px;
  --type-c-h3:       42px;
  --type-c-lead:     32px;
  --type-c-body:     26px;
  --type-c-meta:     22px;
  --type-c-caption:  20px;

  --tracking-tight:  -0.028em;
  --tracking-snug:   -0.012em;
  --tracking-normal: 0em;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.22em;

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;   /* min for body — per guideline */
  --leading-loose:   1.6;

  /* ---------- SPACING (8pt grid) ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --slide-margin: 64px;

  /* ---------- RADIUS ---------- */
  --radius-0:    0px;
  --radius-sm:   6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-deep:     0 24px 60px rgba(0, 0, 0, 0.48);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* =========================================================
   Semantic element classes — opt-in
   Web / document scale (use .dn-c-* for carousel scale)
   ========================================================= */

.dn-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--cream);
}
.dn-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--type-h2);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  color: var(--cream);
}
.dn-h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--type-h3);
  line-height: var(--leading-snug);
  color: var(--cream);
}
.dn-h3.accent { color: var(--red); }

.dn-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  color: var(--gray);
}
.dn-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-caption);
  color: var(--gray);
}
.dn-cta-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-cta);
  color: var(--white);
}

.dn-stage  { background: var(--navy); color: var(--cream); }
.dn-panel  { background: var(--navy-light); border-radius: var(--radius-md); padding: var(--space-6); }
.dn-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 30px;
  background: var(--red); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: var(--type-cta);
  letter-spacing: 0.02em;
  border: none; border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.dn-cta:hover  { background: var(--red-dark); }
.dn-cta:active { transform: scale(0.98); }


* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--navy); color: var(--cream); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- Layout shell ---------- */
.page {
  width: 100%;
  overflow-x: hidden;
  background: var(--navy);
}
.wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 56px;
}

/* =========================================================
   NAV
   ========================================================= */
.nav-shell {
  position: sticky; top: 0; z-index: 50;
  background: rgba(19, 27, 38, 0.86);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 84px;
}
.nav .brand { display: flex; align-items: center; gap: 14px; }
.nav .brand img { width: 46px; height: 46px; object-fit: contain; }
.nav .brand .wm { display: flex; flex-direction: column; line-height: 1.05; }
.nav .brand .wm b {
  font-family: var(--font-display);
  font-weight: 800; font-size: 19px; letter-spacing: -0.012em;
  color: var(--cream);
}
.nav .brand .wm span {
  font-size: 9.5px; letter-spacing: 0.28em; font-weight: 700;
  color: var(--gray); margin-top: 3px;
}

.nav-links { display: flex; align-items: center; gap: 38px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--cream); opacity: 0.82;
  display: inline-flex; align-items: center; gap: 6px;
  transition: opacity var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  letter-spacing: 0.01em;
  position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { opacity: 1; color: var(--cream); }
.nav-links a.active::after { transform: scaleX(1); }
.nav-links .has-caret i { font-size: 12px; opacity: 0.7; }

.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav .icon-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--cream); opacity: 0.7; transition: opacity var(--dur-base) var(--ease-out);
}
.nav .icon-btn:hover { opacity: 1; }
.nav .icon-btn i { font-size: 20px; }

.dn-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  background: var(--red); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.02em;
  border: none; border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.dn-cta:hover { background: var(--red-dark); }
.dn-cta:active { transform: scale(0.98); }
.dn-cta i { font-size: 16px; }

.dn-cta.big { padding: 18px 32px; font-size: 16px; }
.dn-cta.outline {
  background: transparent; color: var(--cream);
  border: 1.5px solid var(--line-strong);
}
.dn-cta.outline:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  padding: 96px 0 88px;
  overflow: hidden;
  background:
    radial-gradient(72% 60% at 88% 12%, rgba(230,57,70,0.10) 0%, transparent 60%),
    radial-gradient(50% 40% at 6% 100%, rgba(245,241,232,0.04) 0%, transparent 60%),
    var(--navy);
}
.hero::after {
  /* faint grid */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(245,241,232,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,241,232,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%);
}
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }

.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: var(--radius-pill);
  background: rgba(230,57,70,0.10);
  border: 1px solid var(--line-red);
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  font-weight: 700; color: var(--cream);
}
.eyebrow-pill .dot {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--red); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.eyebrow-pill .dot i { font-size: 12px; }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 6.4vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.032em;
  color: var(--cream);
  margin-top: 28px;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--red); }
.hero h1 .accent-stack {
  display: inline-flex; align-items: baseline; gap: 18px;
}
.hero h1 .rule {
  display: inline-block; height: 10px; width: 110px;
  background: var(--red);
  transform: translateY(-14px);
}

.hero p.lead {
  margin-top: 28px;
  font-size: 19px; line-height: 1.55;
  color: var(--gray);
  max-width: 520px;
}
.hero .cta-row { margin-top: 36px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.hero .hero-meta { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-soft); padding-top: 28px; max-width: 580px;}
.hero .hero-meta .m {
  display: flex; flex-direction: column; gap: 6px;
  padding-right: 16px;
}
.hero .hero-meta .m + .m { border-left: 1px solid var(--line-soft); padding-left: 22px; }
.hero .hero-meta .m b {
  font-family: var(--font-display); font-weight: 800;
  font-size: 30px; letter-spacing: -0.02em; color: var(--cream);
}
.hero .hero-meta .m b em { color: var(--red); font-style: normal; }
.hero .hero-meta .m span {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gray);
}

/* ---- hero visual side ---- */
.hero-visual {
  position: relative;
  aspect-ratio: 4 / 4.6;
  display: flex;
  align-items: stretch;
}
.hero-visual .frame {
  position: relative;
  flex: 1;
  background: var(--navy-deep);
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
}
.hero-visual .frame img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(0.78) brightness(0.95) contrast(1.05);
}
.hero-visual .frame::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(160deg, rgba(26,35,50,0.15) 0%, rgba(26,35,50,0.0) 35%, rgba(26,35,50,0.45) 100%),
    radial-gradient(60% 40% at 80% 20%, rgba(230,57,70,0.18), transparent 70%);
}
.hero-visual .dash {
  position: absolute; inset: 18px;
  border: 1.5px dashed var(--cream);
  opacity: 0.4;
  border-radius: var(--radius-md);
  pointer-events: none;
  z-index: 2;
}
.hero-visual .corner {
  position: absolute; width: 28px; height: 28px;
  color: var(--red);
  z-index: 3;
}
.hero-visual .corner.tr { top: 0; right: 0; }
.hero-visual .corner.bl { bottom: 0; left: 0; }
.hero-visual .corner::before, .hero-visual .corner::after {
  content: ""; position: absolute; width: 0; height: 0; border-style: solid;
}
.hero-visual .corner.tr::before { top: 0; right: 0; border-width: 0 22px 22px 0; border-color: transparent currentColor transparent transparent; }
.hero-visual .corner.tr::after { top: 0; right: 26px; border-width: 0 9px 9px 0; border-color: transparent currentColor transparent transparent; opacity: 0.55; }
.hero-visual .corner.bl::before { bottom: 0; left: 0; border-width: 22px 0 0 22px; border-color: transparent transparent transparent currentColor; }
.hero-visual .corner.bl::after { bottom: 0; left: 26px; border-width: 9px 0 0 9px; border-color: transparent transparent transparent currentColor; opacity: 0.55; }

/* floating chips */
.hero-visual .chip {
  position: absolute; z-index: 4;
  background: var(--cream); color: var(--navy);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-family: var(--font-display);
  box-shadow: var(--shadow-floating);
  display: flex; align-items: center; gap: 12px;
}
.hero-visual .chip i { font-size: 22px; color: var(--red); }
.hero-visual .chip .l1 { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--gray-dim); }
.hero-visual .chip .l2 { font-weight: 700; font-size: 15px; line-height: 1.2; }
.hero-visual .chip.tl { top: 28px; left: -28px; }
.hero-visual .chip.br { bottom: 36px; right: -32px; background: var(--red); color: var(--white); }
.hero-visual .chip.br i { color: var(--white); }
.hero-visual .chip.br .l1 { color: rgba(255,255,255,0.7); }
.hero-visual .chip.br .l2 { color: var(--white); }

.hero-visual .label-strip {
  position: absolute; left: -18px; bottom: -18px;
  background: var(--navy-deep); border: 1px solid var(--line-soft);
  padding: 12px 18px; border-radius: var(--radius-pill);
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cream); font-weight: 700;
  z-index: 4;
}
.hero-visual .label-strip .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--red); box-shadow: 0 0 0 4px rgba(230,57,70,0.18);}

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--navy-deep);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 22px 0;
}
.trust-strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.trust-strip .tag {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gray); font-weight: 700;
}
.trust-strip ul { list-style: none; display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.trust-strip li {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--cream); letter-spacing: 0.01em;
}
.trust-strip li i { color: var(--red); font-size: 18px; }

/* =========================================================
   SECTION HEADER
   ========================================================= */
.section { padding: 112px 0; position: relative; }
.section.alt { background: var(--navy-deep); }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: end; margin-bottom: 56px; }
.section-head.center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.eyebrow {
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: 700; color: var(--red);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 2px; background: var(--red);
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 3.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.024em;
  color: var(--cream);
  margin-top: 16px;
  text-wrap: balance;
}
.section-head h2 em { color: var(--red); font-style: normal; }
.section-head p { color: var(--gray); font-size: 17px; line-height: 1.55; max-width: 460px; }
.section-head .right { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.section-head.center p { max-width: 620px; }

/* =========================================================
   SERVICES (3 cards)
   ========================================================= */
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.svc-card {
  background: var(--navy-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--line-soft);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  position: relative;
}
.svc-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.svc-card .ph {
  aspect-ratio: 4 / 3;
  position: relative;
  background:
    radial-gradient(80% 60% at 50% 50%, rgba(230,57,70,0.10), transparent 70%),
    linear-gradient(180deg, var(--navy-elev), var(--navy-deep));
  overflow: hidden;
}
.svc-card .ph::after {
  content: ""; position: absolute; inset: 18px;
  border: 1.5px dashed var(--cream); opacity: 0.28; border-radius: 6px;
}
.svc-card .ph .badge {
  position: absolute; top: 18px; left: 18px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgba(19,27,38,0.65); backdrop-filter: blur(6px);
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--cream); font-weight: 700;
  border: 1px solid var(--line-soft);
}
.svc-card .ph .num {
  position: absolute; right: 22px; bottom: 16px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 84px; color: var(--cream); opacity: 0.12;
  letter-spacing: -0.04em; line-height: 1;
}
.svc-card .ph .glyph {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: var(--cream); opacity: 0.92;
  font-size: 72px;
}
.svc-card .body { padding: 32px 30px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.svc-card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1.2; letter-spacing: -0.012em;
  color: var(--cream);
}
.svc-card p {
  color: var(--gray); font-size: 15px; line-height: 1.6;
}
.svc-card ul.feats { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.svc-card ul.feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--cream); }
.svc-card ul.feats li i { color: var(--red); font-size: 16px; margin-top: 1px; }
.svc-card .foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
}
.svc-card .foot .price { color: var(--gray); font-size: 13px; }
.svc-card .foot .price b { color: var(--cream); font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.svc-card .foot a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  color: var(--cream); letter-spacing: 0.02em;
}
.svc-card .foot a i { color: var(--red); transition: transform var(--dur-base) var(--ease-out); }
.svc-card:hover .foot a i { transform: translateX(4px); }

/* =========================================================
   MECHANISM (4 steps with vertical red divider motif)
   ========================================================= */
.mech-wrap {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px;
  align-items: stretch;
}
.mech-left { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding-right: 24px; }
.mech-left h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(34px, 3vw, 46px); line-height: 1.05; letter-spacing: -0.024em;
  color: var(--cream); text-wrap: balance;
}
.mech-left h3 em { color: var(--red); font-style: normal; }
.mech-left p { color: var(--gray); font-size: 16px; line-height: 1.6; }

.mech-quote {
  border-left: 6px solid var(--red);
  padding: 18px 0 18px 22px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 20px; line-height: 1.4; color: var(--cream);
  letter-spacing: -0.01em;
}
.mech-quote span { color: var(--gray); font-weight: 400; font-size: 14px; display: block; margin-top: 8px; letter-spacing: 0.18em; text-transform: uppercase; }

.mech-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.step {
  background: var(--navy-light);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  min-height: 220px;
}
.step .head { display: flex; align-items: center; justify-content: space-between; }
.step .num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 13px; letter-spacing: 0.22em;
  color: var(--red);
}
.step .ico { color: var(--cream); font-size: 28px; opacity: 0.9; }
.step h4 {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: var(--cream); line-height: 1.2; letter-spacing: -0.012em;
}
.step p { color: var(--gray); font-size: 14px; line-height: 1.55; }

/* =========================================================
   PRODUCTS
   ========================================================= */
.products-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
}
.prod {
  background: var(--navy-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--line-soft);
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.prod:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.prod .ph {
  aspect-ratio: 1 / 1;
  position: relative;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(230,57,70,0.18), transparent 75%),
    linear-gradient(180deg, var(--navy-elev), var(--navy-deep));
  display: flex; align-items: center; justify-content: center;
  color: var(--cream);
  overflow: hidden;
}
.prod .ph::before {
  content: ""; position: absolute; inset: 12px;
  border: 1px dashed var(--cream); opacity: 0.18; border-radius: 4px;
}
.prod .ph .bottle {
  position: relative;
  width: 38%; height: 64%;
  display: flex; flex-direction: column; align-items: center;
}
.prod .ph .bottle .cap {
  width: 38%; height: 14%; background: var(--cream); border-radius: 3px 3px 1px 1px;
  position: relative;
}
.prod .ph .bottle .neck { width: 28%; height: 6%; background: var(--cream); opacity: 0.6; }
.prod .ph .bottle .body {
  width: 100%; flex: 1;
  background: linear-gradient(180deg, rgba(245,241,232,0.95) 0%, rgba(245,241,232,0.78) 100%);
  border-radius: 6px;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--navy);
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  text-align: center;
  padding: 0 8px;
  box-shadow: inset 0 -12px 24px rgba(26,35,50,0.08);
}
.prod .ph .bottle .body .line { width: 40%; height: 2px; background: var(--red); margin: 6px 0; }
.prod .ph .bottle .body .ln1 { font-size: 13px; line-height: 1; }
.prod .ph .bottle .body .ln2 { font-size: 9px; letter-spacing: 0.18em; color: var(--gray-dim); font-weight: 600; }

.prod .ph .badge-sale {
  position: absolute; top: 12px; left: 12px;
  background: var(--red); color: var(--white);
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 10px; border-radius: var(--radius-sm);
}
.prod .ph .badge-cat {
  position: absolute; top: 12px; right: 12px;
  background: rgba(19,27,38,0.7); backdrop-filter: blur(4px);
  color: var(--cream);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius-pill);
  font-weight: 700;
  border: 1px solid var(--line-soft);
}
.prod .body-txt { padding: 18px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.prod h4 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; line-height: 1.3; color: var(--cream);
  letter-spacing: -0.005em;
}
.prod .sub { color: var(--gray); font-size: 12px; line-height: 1.4; }
.prod .prices { margin-top: auto; padding-top: 12px; display: flex; align-items: baseline; gap: 10px; }
.prod .prices .now {
  font-family: var(--font-display); font-weight: 800;
  font-size: 17px; color: var(--red); letter-spacing: -0.012em;
}
.prod .prices .was {
  font-size: 12px; color: var(--gray); text-decoration: line-through; text-decoration-color: var(--gray);
}
.prod .add {
  position: absolute; bottom: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--navy-deep); border: 1px solid var(--line-soft);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cream);
  transition: background var(--dur-base) var(--ease-out);
}
.prod .add:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.prod .add i { font-size: 16px; }

/* =========================================================
   BEFORE / AFTER teaser (vertical red bar motif)
   ========================================================= */
.ba {
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line-soft);
}
.ba::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 6px; background: var(--red); transform: translateX(-50%);
  z-index: 5;
}
.ba .col { padding: 56px 44px; display: flex; flex-direction: column; align-items: stretch; gap: 22px; position: relative; }
.ba .col.left { background: var(--navy-deep); }
.ba .col.right { background: var(--navy-light); }
.ba .lbl-row { display: flex; align-items: baseline; justify-content: space-between; }
.ba .lbl {
  font-family: var(--font-display); font-weight: 800;
  font-size: 56px; letter-spacing: 0.04em; line-height: 1;
  text-transform: uppercase;
}
.ba .col.left .lbl { color: var(--red); }
.ba .col.right .lbl { color: var(--cream); }
.ba .meta { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray); font-weight: 700; }
.ba .frame {
  aspect-ratio: 1 / 1.05;
  position: relative;
  background: rgba(0,0,0,0.18);
  border-radius: 6px;
}
.ba .frame .dash { position: absolute; inset: 14px; border: 2px dashed currentColor; border-radius: 4px; pointer-events: none; opacity: 0.7; }
.ba .col.left .frame { color: var(--red); }
.ba .col.right .frame { color: var(--cream); }
.ba .frame .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--gray); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
}
/* triangle corners */
.ba .frame .corner { position: absolute; width: 26px; height: 26px; }
.ba .frame .corner.tr { top: 0; right: 0; }
.ba .frame .corner.bl { bottom: 0; left: 0; }
.ba .frame .corner::before, .ba .frame .corner::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; }
.ba .frame .corner.tr::before { top: 0; right: 0; border-width: 0 20px 20px 0; border-color: transparent currentColor transparent transparent; }
.ba .frame .corner.tr::after { top: 0; right: 24px; border-width: 0 9px 9px 0; border-color: transparent currentColor transparent transparent; opacity: 0.55; }
.ba .frame .corner.bl::before { bottom: 0; left: 0; border-width: 20px 0 0 20px; border-color: transparent transparent transparent currentColor; }
.ba .frame .corner.bl::after { bottom: 0; left: 24px; border-width: 9px 0 0 9px; border-color: transparent transparent transparent currentColor; opacity: 0.55; }

.ba-caption {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  border-top: 1px solid currentColor;
  padding-top: 16px;
  opacity: 0.9;
}
.ba-caption .l { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.ba-caption .r { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray); }
.ba .col.left .ba-caption { color: var(--red); }
.ba .col.right .ba-caption { color: var(--cream); }
.ba .col.left .ba-caption .r, .ba .col.right .ba-caption .r { color: var(--gray); }

/* red action band under the BA */
.ba-band {
  background: var(--red);
  padding: 22px 32px;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: var(--radius-md);
  margin-top: 18px;
}
.ba-band .ttl {
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white);
}
.ba-band .mini {
  background: var(--navy-deep); padding: 10px 14px; border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 10px;
}
.ba-band .mini img { width: 26px; height: 26px; }
.ba-band .mini b {
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
  color: var(--cream); letter-spacing: 0.02em;
}

/* =========================================================
   TESTIMONIAL / Authority strip
   ========================================================= */
.authority {
  background: var(--navy-deep);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 80px 0;
}
.authority .wrap { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: center; }
.testimonial {
  display: flex; flex-direction: column; gap: 24px;
}
.testimonial .quote-icon {
  font-family: var(--font-display); font-weight: 800; font-size: 80px;
  color: var(--red); line-height: 0.6; letter-spacing: -0.04em;
}
.testimonial blockquote {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(22px, 2vw, 30px); line-height: 1.35;
  color: var(--cream); letter-spacing: -0.014em;
  text-wrap: balance;
}
.testimonial blockquote em { color: var(--red); font-style: normal; }
.testimonial .who {
  display: flex; align-items: center; gap: 16px; margin-top: 12px;
}
.testimonial .who .av {
  width: 52px; height: 52px; border-radius: 999px;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; color: var(--white);
  font-size: 18px;
}
.testimonial .who .info b {
  display: block; color: var(--cream); font-weight: 700; font-size: 15px;
}
.testimonial .who .info span { color: var(--gray); font-size: 13px; }

.proof-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.proof {
  background: var(--navy);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.proof b {
  font-family: var(--font-display); font-weight: 800;
  font-size: 44px; color: var(--cream); letter-spacing: -0.028em; line-height: 1;
}
.proof b em { color: var(--red); font-style: normal; }
.proof span { color: var(--gray); font-size: 13px; line-height: 1.5; }
.proof .label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--red); margin-bottom: 8px; }

/* =========================================================
   FINAL CTA
   ========================================================= */
.cta-final {
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(230,57,70,0.22), transparent 60%),
    var(--navy);
  padding: 120px 0 140px;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: var(--red);
}
.cta-final .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.cta-final h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(40px, 4.4vw, 72px);
  line-height: 1.0; letter-spacing: -0.03em;
  color: var(--cream); text-wrap: balance;
}
.cta-final h2 em { color: var(--red); font-style: normal; }
.cta-final p { margin-top: 24px; color: var(--gray); font-size: 18px; line-height: 1.55; max-width: 520px; }
.cta-final .cta-row { margin-top: 36px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cta-final .side {
  background: var(--navy-light);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.cta-final .side h4 {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  color: var(--cream); margin-bottom: 22px; letter-spacing: -0.005em;
}
.cta-final .side .row {
  display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line-soft);
}
.cta-final .side .row:first-of-type { border-top: 0; padding-top: 4px; }
.cta-final .side .row i { color: var(--red); font-size: 22px; margin-top: 2px; }
.cta-final .side .row b { display: block; color: var(--cream); font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.cta-final .side .row span { color: var(--gray); font-size: 13px; line-height: 1.5; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--navy-deep);
  padding: 80px 0 28px;
  border-top: 1px solid var(--line-soft);
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line-soft);
}
.footer .brand-block { display: flex; flex-direction: column; gap: 22px; }
.footer .brand-block .logo { display: flex; align-items: center; gap: 14px; }
.footer .brand-block .logo img { width: 56px; height: 56px; }
.footer .brand-block .logo b {
  font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--cream); letter-spacing: -0.012em;
  display: block; line-height: 1;
}
.footer .brand-block .logo span {
  font-size: 10.5px; letter-spacing: 0.28em; font-weight: 700; color: var(--gray);
  display: block; margin-top: 6px;
}
.footer .brand-block p { color: var(--gray); font-size: 14px; line-height: 1.6; max-width: 320px; }
.footer .socials { display: flex; gap: 10px; }
.footer .socials a {
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--line-soft);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cream); transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.footer .socials a:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.footer h5 {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--red); font-weight: 700; margin-bottom: 22px;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer ul a {
  font-size: 14px; color: var(--cream); opacity: 0.78;
  transition: opacity var(--dur-base) var(--ease-out);
  display: inline-flex; align-items: center; gap: 8px;
}
.footer ul a:hover { opacity: 1; color: var(--red); }
.footer ul a i { font-size: 14px; }
.footer .bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px; color: var(--gray); font-size: 12.5px; letter-spacing: 0.04em;
}
.footer .bottom .meta-links { display: flex; gap: 24px; }
.footer .bottom a { color: var(--gray); transition: color var(--dur-base) var(--ease-out); }
.footer .bottom a:hover { color: var(--cream); }

/* =========================================================
   Reveal animations on scroll
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); }
  .reveal.in { opacity: 1; transform: none; }
}

/* =========================================================
   MOBILE RESPONSIVE STYLES (Added for Mobile Compatibility)
   ========================================================= */

@media (max-width: 991px) {
  body.page-template-template-homepage-dcn .wrap {
    padding: 0 24px !important;
  }
  
  /* Section Head */
  body.page-template-template-homepage-dcn .section-head {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
  }
  body.page-template-template-homepage-dcn .section-head .right {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* Hero */
  body.page-template-template-homepage-dcn .hero .wrap {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: center !important;
  }
  body.page-template-template-homepage-dcn .hero-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  body.page-template-template-homepage-dcn .hero-text h1 {
    font-size: clamp(32px, 8vw, 48px) !important;
    line-height: 1.1 !important;
  }
  body.page-template-template-homepage-dcn .hero-text p.lead {
    font-size: 16px !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.page-template-template-homepage-dcn .hero-text .cta-row {
    justify-content: center !important;
    width: 100% !important;
  }
  body.page-template-template-homepage-dcn .hero-meta {
    grid-template-columns: repeat(3, 1fr) !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 32px !important;
    width: 100% !important;
  }
  body.page-template-template-homepage-dcn .hero-meta .m {
    padding-right: 0 !important;
  }
  body.page-template-template-homepage-dcn .hero-meta .m + .m {
    padding-left: 0 !important;
  }
  
  /* Services */
  body.page-template-template-homepage-dcn .services-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  body.page-template-template-homepage-dcn .svc-card .ph {
    aspect-ratio: 16 / 9 !important;
  }
  
  /* Mechanism */
  body.page-template-template-homepage-dcn .mech-wrap {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }
  body.page-template-template-homepage-dcn .mech-left {
    text-align: center !important;
    padding-right: 0 !important;
  }
  body.page-template-template-homepage-dcn .mech-quote {
    margin: 24px auto 0 !important;
    text-align: left !important;
  }
  body.page-template-template-homepage-dcn .mech-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Products */
  body.page-template-template-homepage-dcn .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  
  /* Authority / Testimonial */
  body.page-template-template-homepage-dcn .authority .wrap {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    text-align: center !important;
  }
  body.page-template-template-homepage-dcn .testimonial {
    align-items: center !important;
  }
  body.page-template-template-homepage-dcn .testimonial blockquote {
    font-size: 20px !important;
  }
  body.page-template-template-homepage-dcn .proof-grid {
    width: 100% !important;
    grid-template-columns: 1fr 1fr !important;
  }
  
  /* Final CTA */
  body.page-template-template-homepage-dcn .cta-final .wrap {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    text-align: center !important;
  }
  body.page-template-template-homepage-dcn .cta-final p {
    margin: 24px auto 0 !important;
  }
  body.page-template-template-homepage-dcn .cta-final .cta-row {
    justify-content: center !important;
  }
  body.page-template-template-homepage-dcn .cta-final .side {
    text-align: left !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  
  /* Footer */
  body.page-template-template-homepage-dcn .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px !important;
  }
}

@media (max-width: 767px) {
  /* Navigation Bar */
  body.page-template-template-homepage-dcn .nav-links {
    display: none !important;
  }
  body.page-template-template-homepage-dcn .nav-actions {
    gap: 12px !important;
  }
  body.page-template-template-homepage-dcn .nav-actions .icon-btn {
    display: none !important;
  }
  body.page-template-template-homepage-dcn .nav {
    height: 70px !important;
    padding: 0 16px !important;
  }
  body.page-template-template-homepage-dcn .nav .brand img {
    width: 36px !important;
    height: 36px !important;
  }
  body.page-template-template-homepage-dcn .nav .brand .wm b {
    font-size: 15px !important;
  }
  body.page-template-template-homepage-dcn .nav .brand .wm span {
    font-size: 8px !important;
  }
  body.page-template-template-homepage-dcn .nav .dn-cta {
    padding: 8px 16px !important;
    font-size: 12px !important;
  }
  
  /* Hero Visual */
  body.page-template-template-homepage-dcn .hero-visual {
    max-width: 320px !important;
    margin: 0 auto !important;
    width: 100% !important;
    aspect-ratio: 1 !important;
  }
  body.page-template-template-homepage-dcn .hero-visual .chip.tl {
    top: -10px !important;
    left: -10px !important;
    transform: scale(0.85) !important;
  }
  body.page-template-template-homepage-dcn .hero-visual .chip.br {
    bottom: -10px !important;
    right: -10px !important;
    transform: scale(0.85) !important;
  }
  
  /* Trust Strip */
  body.page-template-template-homepage-dcn .trust-strip ul {
    justify-content: center !important;
    gap: 16px 24px !important;
  }
  
  /* Before / After Slider */
  body.page-template-template-homepage-dcn .ba {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    border: none !important;
    background: transparent !important;
  }
  body.page-template-template-homepage-dcn .ba::before {
    display: none !important;
  }
  body.page-template-template-homepage-dcn .ba .col {
    border: 1px solid var(--line-soft) !important;
    border-radius: var(--radius-md) !important;
    background: var(--navy-light) !important;
    padding: 16px !important;
  }
  body.page-template-template-homepage-dcn .ba-band {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
    padding: 20px 16px !important;
  }
  body.page-template-template-homepage-dcn .ba-band .ttl {
    font-size: 16px !important;
    letter-spacing: 0.08em !important;
  }
  body.page-template-template-homepage-dcn .ba-band .mini {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 567px) {
  /* Footer Stacking */
  body.page-template-template-homepage-dcn .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    text-align: center !important;
  }
  body.page-template-template-homepage-dcn .footer .brand-block {
    align-items: center !important;
  }
  body.page-template-template-homepage-dcn .footer .brand-block p {
    max-width: 100% !important;
  }
  body.page-template-template-homepage-dcn .footer .brand-block .logo {
    justify-content: center !important;
  }
  body.page-template-template-homepage-dcn .footer ul {
    align-items: center !important;
  }
  body.page-template-template-homepage-dcn .footer ul a {
    justify-content: center !important;
  }
  body.page-template-template-homepage-dcn .footer .bottom {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
  }
  body.page-template-template-homepage-dcn .footer .bottom .meta-links {
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  /* Products */
  body.page-template-template-homepage-dcn .products-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Proof */
  body.page-template-template-homepage-dcn .proof-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Hero typography */
  body.page-template-template-homepage-dcn .hero-text h1 {
    font-size: 32px !important;
  }
  
  /* CTA Row wrap on tiny screens */
  body.page-template-template-homepage-dcn .cta-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  body.page-template-template-homepage-dcn .dn-cta.big {
    width: 100% !important;
    justify-content: center !important;
  }
}