/* ============================================================
   B-USA Theme — main.css v2.0.0
   Design: Tech-Premium  |  Energy · Finance · Future
   Palette: Tech Blue #0B3B82 · Gold #F5B915 · Navy #0A1A3A
   Font: Inter (200 ExtraLight → 800 ExtraBold)
   ============================================================ */

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  /* Brand */
  --blue:        #0B3B82;
  --blue-dark:   #072a5e;
  --blue-mid:    #1050aa;
  --blue-light:  #1775E5;
  --blue-pale:   #e8f0fb;
  --gold:        #F5B915;
  --gold-dark:   #c9940e;
  --gold-light:  #fef9e7;
  --silver:      #C8CED4;
  --silver-light:#f0f2f4;
  --navy:        #0A1A3A;
  --navy-light:  #142550;
  --navy-mist:   rgba(10,26,58,.06);

  /* Semantic */
  --text-primary:   var(--navy);
  --text-secondary: #3a4d6b;
  --text-muted:     #64748b;
  --text-white:     #ffffff;
  --bg:             #ffffff;
  --bg-alt:         #f7f9fc;
  --bg-dark:        var(--navy);
  /* Innox Silver-based borders — zero harsh edges */
  --border:         rgba(200,206,212,.48);
  --border-strong:  rgba(200,206,212,.78);

  /* Shadows */
  --shadow-xs:  0 1px 4px rgba(10,26,58,.05);
  --shadow-sm:  0 2px 12px rgba(10,26,58,.07);
  --shadow-md:  0 6px 28px rgba(10,26,58,.10);
  --shadow-lg:  0 12px 48px rgba(10,26,58,.13);
  --shadow-xl:  0 20px 64px rgba(10,26,58,.18);
  --shadow-gold: 0 8px 32px rgba(245,185,21,.28);
  /* Premium hover elevation — multi-layer diffused soft shadow */
  --shadow-hover:
    0 2px 4px   rgba(10,26,58,.03),
    0 8px 20px  rgba(10,26,58,.07),
    0 24px 52px rgba(10,26,58,.11),
    0 52px 96px rgba(10,26,58,.10);

  /* Border radius */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-full:100px;

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --max-w:   1200px;
  --nav-h:   76px;
  --topbar-h:40px;

  /* Motion */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1);
  --transition: 0.5s var(--ease);
  --transition-fast: 0.22s ease;
}

/* ── RESET ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--text-primary);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
button{border:none;background:none;cursor:pointer;font-family:inherit}
input,textarea,select{font-family:inherit;font-size:inherit}
h1,h2,h3,h4,h5,h6{font-weight:800;line-height:1.15;color:var(--text-primary)}

/* ── SKIP LINK ─────────────────────────────────────────────── */
.skip-link{position:absolute;top:-100px;left:1rem;z-index:9999;background:var(--blue);color:#fff;padding:8px 18px;border-radius:var(--r-sm);font-size:14px;font-weight:600;transition:top .2s}
.skip-link:focus{top:1rem}

/* ── LAYOUT ────────────────────────────────────────────────── */
.container{max-width:var(--max-w);margin:0 auto;padding:0 32px}
.section{padding:120px 0}
.section-sm{padding:72px 0}
.section-alt{background:var(--bg-alt)}
.section-dark{background:var(--navy);color:var(--text-white)}
.section-blue{background:var(--blue);color:var(--text-white)}

/* ── SECTION HEADER ────────────────────────────────────────── */
.section-header{margin-bottom:68px}
.section-header.center{text-align:center}
.section-header.center .section-sub{margin:0 auto}
.section-label{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-light);background:var(--blue-pale);padding:5px 14px;border-radius:var(--r-full);margin-bottom:16px}
.section-dark .section-label,.section-blue .section-label{background:rgba(255,255,255,.12);color:rgba(255,255,255,.85)}
.section-title{font-size:clamp(26px,3.5vw,44px);font-weight:800;color:var(--text-primary);margin-bottom:16px}
.section-dark .section-title,.section-blue .section-title{color:#fff}
.section-title .accent{color:var(--gold)}
.section-sub{font-size:17px;color:var(--text-muted);max-width:580px;line-height:1.8}
.section-dark .section-sub{color:rgba(255,255,255,.65)}
.section-cta-link{text-align:center;margin-top:48px}

/* ── TOPBAR ────────────────────────────────────────────────── */
.topbar{background:var(--navy);color:rgba(255,255,255,.8);font-size:13px;font-weight:400}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:var(--topbar-h);gap:16px}
.topbar-left{display:flex;align-items:center;gap:20px}
.topbar-item{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.7);transition:color var(--transition-fast)}
.topbar-item svg{color:var(--gold);flex-shrink:0}
.topbar-item:hover{color:var(--gold)}
.topbar-right{display:flex;gap:8px;align-items:center}
.topbar-social{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);font-size:12px;font-weight:800;transition:background var(--transition-fast)}
.topbar-social:hover{background:var(--gold);color:var(--navy)}

/* ── HEADER ────────────────────────────────────────────────── */
.site-header{position:fixed;top:var(--topbar-h);left:0;right:0;z-index:900;height:var(--nav-h);background:rgba(255,255,255,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);transition:box-shadow .3s,top .3s,background .3s}
.site-header.scrolled{box-shadow:var(--shadow-md);top:0;background:rgba(255,255,255,.98)}
.site-header.hidden{transform:translateY(-100%);transition:transform .3s}
.site-header.visible{transform:translateY(0)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:24px}

/* Logo (header) — sized independently from footer logo via --logo-h/--logo-w, set inline per admin settings */
.site-logo{--logo-h:40px;--logo-w:auto}
.site-logo a,.logo-wrap{display:flex;align-items:center;gap:10px;text-decoration:none}
.site-logo img,.site-logo .custom-logo{height:var(--logo-h);width:var(--logo-w);max-width:100%;max-height:calc(var(--nav-h) - 16px);object-fit:contain}
.logo-text{font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.logo-text span{color:var(--blue)}
.logo-icon{color:var(--gold);flex-shrink:0}

/* Primary Navigation */
.main-nav{flex:1}
.nav-list{display:flex;align-items:center;gap:2px;justify-content:center}
.nav-list > li{position:relative}
.nav-link{display:flex;align-items:center;gap:5px;padding:8px 14px;font-size:14.5px;font-weight:500;color:var(--text-secondary);border-radius:var(--r-sm);transition:color var(--transition-fast),background var(--transition-fast)}
.nav-link:hover,.nav-list > li.current-menu-item > .nav-link,.nav-list > li.current-menu-ancestor > .nav-link{color:var(--blue);background:var(--blue-pale)}
.nav-link svg{color:var(--text-muted);transition:transform var(--transition-fast);flex-shrink:0}
.menu-item-has-children:hover > .nav-link svg,.menu-item-has-children.open > .nav-link svg{transform:rotate(180deg);color:var(--blue)}

/* Dropdown */
.sub-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:240px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:8px;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:100}
.menu-item-has-children.open > .sub-menu{opacity:1;pointer-events:auto;transform:translateY(0)}
.sub-menu a{display:block;padding:9px 14px;font-size:14px;font-weight:500;color:var(--text-secondary);border-radius:var(--r-sm);transition:color var(--transition-fast),background var(--transition-fast)}
.sub-menu a:hover{color:var(--blue);background:var(--blue-pale)}

/* Header Actions */
.header-actions{display:flex;align-items:center;gap:10px}
.header-cta{display:inline-flex}
.mobile-nav-cta{display:none}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--r-sm);border:1.5px solid var(--border)}
.hamburger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:.25s var(--ease)}
.hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(10,26,58,.5);z-index:800}
.mobile-overlay.show{display:block}

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:var(--r-md);font-family:var(--font);font-size:15px;font-weight:600;cursor:pointer;transition:all var(--transition);white-space:nowrap;border:2px solid transparent;letter-spacing:-.01em;line-height:1}
.btn-sm{padding:9px 18px;font-size:13px;gap:6px}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-xl{padding:18px 36px;font-size:17px}
.btn-full{width:100%;justify-content:center}

/* Primary: Deep Navy frame · Light Blue typography */
.btn-primary{background:var(--navy);color:var(--blue-light);border-color:var(--navy);letter-spacing:.01em}
.btn-primary:hover{background:#0f2347;border-color:#0f2347;color:#fff;transform:translateY(-2px);box-shadow:0 8px 32px rgba(10,26,58,.38)}

.btn-gold{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-dark);border-color:var(--gold-dark);transform:translateY(-2px);box-shadow:var(--shadow-gold)}

.btn-outline{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:#fff;transform:translateY(-1px)}

.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-outline-white:hover{background:#fff;color:var(--navy);border-color:#fff}

.btn-ghost{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.20)}
.btn-ghost:hover{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.40)}

.btn-link{background:none;color:var(--blue-light);border:none;padding:0;gap:4px;font-size:14px}
.btn-link:hover{color:var(--blue);gap:8px}

/* ── HERO ──────────────────────────────────────────────────── */
.hero{position:relative;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(140deg,var(--navy) 0%,var(--blue-dark) 50%,#0e3570 100%);padding-top:calc(var(--nav-h) + var(--topbar-h) + 30px)}
.hero-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.12;mix-blend-mode:luminosity;pointer-events:none}
.hero-matrix{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.04}
.hero-matrix svg{width:100%;height:100%}
.hero > .container{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-start}
.hero-inner{display:grid;grid-template-columns:1fr 560px;gap:48px;align-items:center;padding:0}

/* Hero content */
.hero-badge{display:inline-flex;align-items:flex-start;gap:8px;background:rgba(245,185,21,.12);border:1px solid rgba(245,185,21,.28);color:var(--gold);padding:10px 16px;border-radius:var(--r-lg);font-size:12px;font-weight:600;line-height:1.6;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px;max-width:100%}
.hero-badge svg{flex-shrink:0;margin-top:3px}
.hero-badge svg{color:var(--gold)}
.hero-badge-line{display:block}
.hero-title{font-size:clamp(30px,3.6vw,44px);font-weight:800;color:#fff;line-height:1.15;margin-bottom:14px;letter-spacing:-.03em}
.hero-title-line{display:block}
.hero-title-accent{background:linear-gradient(135deg,var(--gold) 0%,#ffd875 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:17px;color:rgba(255,255,255,.72);line-height:1.65;max-width:540px;margin-bottom:20px;font-weight:300}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 12px;font-size:12.5px;color:rgba(255,255,255,.7)}
.hero-trust-item{display:flex;align-items:center;gap:8px;flex:0 0 auto;max-width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 16px 8px 12px}
.hero-trust-item svg{color:var(--gold);flex-shrink:0}
.hero-trust-line{line-height:1.4}

/* Hero card */
.hero-card{background:#fff;border-radius:var(--r-xl);padding:32px;box-shadow:var(--shadow-xl)}
.hero-card-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--border)}
.hc-icon{width:48px;height:48px;border-radius:var(--r-md);background:var(--blue-pale);display:flex;align-items:center;justify-content:center;color:var(--blue);flex-shrink:0}
.hc-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);font-weight:600;margin-bottom:2px}
.hc-title{font-size:18px;font-weight:800;color:var(--navy)}
.hero-card-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.hcs{padding:16px;background:var(--bg-alt);border-radius:var(--r-md);text-align:center;border:1px solid var(--border)}
.hcs-val{font-size:22px;font-weight:800;color:var(--blue);line-height:1.1}
.hcs-lbl{font-size:11px;color:var(--text-muted);margin-top:4px;font-weight:500}

/* ═══════════════════════════════════════════════════════════
   HERO CALCULATOR CARD
   ═══════════════════════════════════════════════════════════ */
.hero-calc-card {
  padding: 26px 28px 22px;
  border-radius: 18px;
  box-shadow:
    0 4px 6px rgba(10,26,58,.04),
    0 12px 28px rgba(10,26,58,.10),
    0 32px 64px rgba(10,26,58,.13);
  transition: box-shadow .35s ease;
  will-change: box-shadow;
}
.hero-calc-card:hover {
  box-shadow:
    0 6px 10px rgba(10,26,58,.06),
    0 20px 44px rgba(10,26,58,.14),
    0 48px 80px rgba(10,26,58,.16);
}

/* ── Header ── */
.hcc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.hcc-icon-wrap {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e8f1ff 0%, #d0e4ff 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue);
}
.hcc-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 2px;
}
.hcc-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.25;
}

/* ── Inputs ── */
.hcc-inputs { margin-bottom: 16px; }
.hcc-field  { margin-bottom: 14px; }
.hcc-field:last-child { margin-bottom: 0; }

.hcc-field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 8px;
}
.hcc-field-val {
  font-size: 13px;
  font-weight: 800;
  color: var(--blue);
  white-space: nowrap;
}

/* Custom range slider */
.hcc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background:
    linear-gradient(
      to right,
      var(--blue) var(--pct, 30%),
      #e2e8f0   var(--pct, 30%)
    );
  cursor: pointer;
  outline: none;
  display: block;
}
.hcc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
  box-shadow: 0 0 0 3px rgba(23,117,229,.18), 0 2px 6px rgba(23,117,229,.25);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hcc-range::-webkit-slider-thumb:hover {
  transform: scale(1.18);
  box-shadow: 0 0 0 4px rgba(23,117,229,.25), 0 3px 10px rgba(23,117,229,.35);
}
.hcc-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
  box-shadow: 0 0 0 3px rgba(23,117,229,.18);
  cursor: pointer;
}
.hcc-range-ends {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #94a3b8;
  margin-top: 5px;
  font-weight: 500;
}

/* Tenure pill toggle */
.hcc-tenure-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.hcc-tenure-btn {
  padding: 7px 4px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all .18s ease;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  font-family: inherit;
}
.hcc-tenure-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: #eef5ff;
}
.hcc-tenure-btn.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 2px 8px rgba(23,117,229,.30);
}
.hcc-tenure-star {
  position: relative;
}
.hcc-tenure-star.is-active {
  background: linear-gradient(135deg, var(--blue) 0%, #0b3b82 100%);
}

/* ── Output metrics grid ── */
.hcc-outputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.hcc-metric {
  background: #f8fafc;
  border: 1.5px solid #e9eef6;
  border-radius: 11px;
  padding: 12px 14px;
  transition: border-color .2s, background .2s;
}
.hcc-metric:hover { border-color: #b3c8f0; }
.hcc-metric-lbl {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 5px;
  line-height: 1.3;
}
.hcc-metric-val {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hcc-metric--blue { background: linear-gradient(135deg,#eef5ff,#e4effe); border-color: #c4d9f8; }
.hcc-metric--blue .hcc-metric-val { color: var(--blue); }
.hcc-metric--green { background: linear-gradient(135deg,#f0fdf4,#e7faf0); border-color: #a3e6bc; }
.hcc-metric--green .hcc-metric-val { color: #15803d; }

/* ── Net cashflow row ── */
.hcc-cashflow-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border-radius: 9px;
  margin-bottom: 14px;
  background: #f1f5f9;
  font-size: 12px;
  transition: background .25s, border-color .25s;
  border: 1.5px solid #e2e8f0;
}
.hcc-cf-label { font-weight: 600; color: #64748b; }
.hcc-cf-val   {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  transition: color .25s;
}
.hcc-cashflow-row[data-sign="pos"] { background:#f0fdf4; border-color:#86efac; }
.hcc-cashflow-row[data-sign="pos"] .hcc-cf-val { color: #16a34a; }
.hcc-cashflow-row[data-sign="neg"] { background:#fff1f2; border-color:#fca5a5; }
.hcc-cashflow-row[data-sign="neg"] .hcc-cf-val { color: #dc2626; }

/* ── Primary CTA button ── */
.hcc-cta-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border: none;
  border-radius: 11px;
  background: linear-gradient(135deg, #0A1A3A 0%, #1775E5 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .01em;
  cursor: pointer;
  transition: opacity .2s ease, transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 4px 18px rgba(23,117,229,.32);
  white-space: nowrap;
}
.hcc-cta-btn:hover:not(:disabled) {
  opacity: .92;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(23,117,229,.40);
}
.hcc-cta-btn svg { flex-shrink: 0; }

/* ── Lead gate (slides in below CTA) ── */
.hcc-lead-gate {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.16,1,.3,1);
}
.hcc-lead-gate.is-open {
  max-height: 340px;
}
.hcc-gate-inner {
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.hcc-gate-desc {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 12px;
  line-height: 1.55;
}
.hcc-gate-form { display: flex; flex-direction: column; gap: 9px; }
.hcc-gate-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.hcc-input {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid #e2e8f0;
  border-radius: 9px;
  font-size: 13px;
  font-family: inherit;
  color: var(--navy);
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
  box-sizing: border-box;
  -webkit-appearance: none;
}
.hcc-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(23,117,229,.12);
}
.hcc-input.is-invalid {
  border-color: #dc2626;
  background: #fff5f5;
}
.hcc-input--full { grid-column: 1 / -1; }
.hcc-gate-submit {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue) 0%, #0b3b82 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .18s, transform .15s;
}
.hcc-gate-submit:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
.hcc-gate-submit:disabled { opacity: .55; cursor: default; }

.hcc-gate-error {
  font-size: 12px;
  color: #dc2626;
  margin: 0;
  padding: 6px 10px;
  background: #fff5f5;
  border-radius: 7px;
  border: 1px solid #fca5a5;
}

/* Success state */
.hcc-gate-success {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  margin-top: 16px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  color: #15803d;
}
.hcc-gate-success:not([hidden]) {
  display: flex;
}
.hcc-gate-success strong { line-height: 1.4; }

/* ── Touch targets for mobile ── */
@media (max-width: 480px) {
  .hcc-range::-webkit-slider-thumb { width: 26px; height: 26px; }
  .hcc-range { height: 6px; }
  .hcc-gate-row { grid-template-columns: 1fr; }
}

/* Stats bar */
.hero-stats-bar{position:relative;margin-top:56px;background:linear-gradient(90deg,rgba(245,185,21,.05) 0%,rgba(23,117,229,.09) 50%,rgba(245,185,21,.05) 100%);border-top:1px solid rgba(245,185,21,.18);border-bottom:1px solid rgba(255,255,255,.06);padding:22px 0;overflow:hidden}
.hero-stats-bar::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-18deg);animation:hsbSweep 6s linear infinite;pointer-events:none}
.stats-bar-inner{position:relative;z-index:1;display:flex;justify-content:space-around;flex-wrap:wrap;gap:16px}
.stat-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:0 20px;transition:transform .3s var(--ease)}
.stat-item:hover{transform:translateY(-3px)}
.stat-item:not(:last-child)::after{content:"";position:absolute;top:50%;right:-1px;transform:translateY(-50%);width:1px;height:60%;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.16),transparent)}
.stat-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,rgba(245,185,21,.18) 0%,rgba(245,185,21,.03) 70%);color:var(--gold);animation:hsbFloat 3s ease-in-out infinite}
.stat-item:nth-child(2) .stat-icon{animation-delay:.25s}
.stat-item:nth-child(3) .stat-icon{animation-delay:.5s}
.stat-item:nth-child(4) .stat-icon{animation-delay:.75s}
.stat-val{display:block;font-size:30px;font-weight:800;line-height:1;background:linear-gradient(135deg,var(--gold) 0%,#ffe9a8 50%,var(--gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:hsbGlow 3s ease-in-out infinite}
.stat-val--text{font-size:17px;white-space:nowrap}
.stat-item:nth-child(2) .stat-val{animation-delay:.25s}
.stat-item:nth-child(3) .stat-val{animation-delay:.5s}
.stat-item:nth-child(4) .stat-val{animation-delay:.75s}
.stat-lbl{display:block;font-size:12px;color:rgba(255,255,255,.55);margin-top:6px;font-weight:500;text-transform:uppercase;letter-spacing:.06em}

@keyframes hsbSweep{0%{left:-60%}100%{left:140%}}
@keyframes hsbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes hsbGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(245,185,21,0))}50%{filter:drop-shadow(0 0 8px rgba(245,185,21,.55))}}

@media (prefers-reduced-motion:reduce){
  .hero-stats-bar::before{animation:none;display:none}
  .stat-icon,.stat-val{animation:none}
}

/* ── WHY / FEATURES GRID ───────────────────────────────────── */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.why-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:36px 30px;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);position:relative}
.why-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover);border-color:rgba(200,206,212,.72)}
.why-icon{width:52px;height:52px;border-radius:var(--r-md);background:var(--blue-pale);display:flex;align-items:center;justify-content:center;color:var(--blue);margin-bottom:18px;transition:all var(--transition)}
.why-card:hover .why-icon{background:var(--blue);color:#fff;transform:scale(1.08)}
.why-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--blue);background:var(--blue-pale);padding:4px 12px;border-radius:var(--r-full);margin-bottom:12px}
.why-badge-val{font-size:15px;font-weight:800}
.why-card h3{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:10px}
.why-card p{font-size:14px;color:var(--text-muted);line-height:1.75}

/* ── SERVICES GRID ─────────────────────────────────────────── */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.svc-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.svc-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover);border-color:rgba(200,206,212,.72)}
.svc-thumb{position:relative;height:220px;overflow:hidden;background:var(--bg-alt)}
.svc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.svc-card:hover .svc-thumb img{transform:scale(1.06)}
.svc-saving{position:absolute;top:14px;right:14px}
.saving-badge{background:var(--gold);color:var(--navy);font-weight:700;font-size:12px;padding:5px 12px;border-radius:var(--r-full)}
.svc-body{padding:28px}
.svc-cat{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--blue-light);background:var(--blue-pale);padding:4px 12px;border-radius:var(--r-full);margin-bottom:12px;display:inline-block}
.svc-title{font-size:20px;font-weight:800;margin-bottom:10px;line-height:1.3}
.svc-title a:hover{color:var(--blue)}
.svc-excerpt{font-size:14px;color:var(--text-muted);margin-bottom:16px;line-height:1.75}
.svc-features{margin-bottom:16px}
.svc-features li{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-secondary);padding:4px 0}
.svc-features svg{color:var(--blue);flex-shrink:0}
.svc-meta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:18px;font-size:13px;color:var(--text-muted)}
.svc-meta span{display:flex;align-items:center;gap:5px}
.svc-actions{display:flex;gap:10px}

/* ── ABOUT / COUNTER SECTION ───────────────────────────────── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.about-counters{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.counter-card{padding:32px 28px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);text-align:center;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.counter-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover);border-color:rgba(200,206,212,.72)}
.counter-card.featured{background:var(--navy);border-color:var(--navy)}
.counter-card.featured .counter-val{color:var(--blue-light)}
.counter-card.featured .counter-lbl{color:rgba(255,255,255,.60)}
.counter-val{font-size:40px;font-weight:800;color:var(--blue);line-height:1;letter-spacing:-.03em;transition:filter .4s ease,transform .4s ease}
.counter-val.blurred{filter:blur(6px);transform:scale(0.95)}
.counter-val.focused{filter:none;transform:scale(1.05)}
.counter-lbl{font-size:13px;color:var(--text-muted);margin-top:8px;font-weight:500;text-transform:uppercase;letter-spacing:.08em}

/* Timeline */
.timeline{display:flex;flex-direction:column;gap:0}
.timeline-item{display:flex;gap:20px;position:relative;padding-bottom:28px}
.timeline-item:not(:last-child)::after{content:'';position:absolute;left:19px;top:40px;bottom:0;width:2px;background:var(--border)}
.timeline-num{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.timeline-body strong{display:block;font-size:15px;font-weight:700;color:var(--navy);margin-bottom:4px}
.timeline-body span{font-size:14px;color:var(--text-muted)}

/* ── CALCULATOR (Multi-step) ───────────────────────────────── */
.calc-section-wrap{max-width:960px;margin:0 auto}
.calc-progress{display:flex;align-items:center;gap:0;margin-bottom:40px;counter-reset:step}
.calc-progress-step{flex:1;display:flex;align-items:center;gap:0;position:relative}
.calc-progress-step:not(:last-child)::after{content:'';flex:1;height:2px;background:var(--border);margin:0 8px;transition:background .4s}
.calc-progress-step.done::after{background:var(--blue)}
.calc-step-circle{width:36px;height:36px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--text-muted);background:var(--bg);transition:all .4s;flex-shrink:0}
.calc-progress-step.active .calc-step-circle{border-color:var(--blue);color:var(--blue);background:var(--blue-pale)}
.calc-progress-step.done .calc-step-circle{border-color:var(--blue);background:var(--blue);color:#fff}
.calc-step-label{display:none;font-size:12px;color:var(--text-muted);margin-left:8px;font-weight:500}

.calc-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xl);padding:44px;box-shadow:var(--shadow-md)}
.calc-step{display:none}
.calc-step.active{display:block}
.calc-step-title{font-size:22px;font-weight:800;color:var(--navy);margin-bottom:8px}
.calc-step-sub{font-size:15px;color:var(--text-muted);margin-bottom:32px}
.calc-field{margin-bottom:28px}
.calc-field label{display:block;font-weight:600;color:var(--navy);margin-bottom:10px;font-size:15px}
.calc-field input[type=number]{width:100%;padding:14px 18px;border:1.5px solid var(--border-strong);border-radius:var(--r-md);font-size:18px;font-weight:700;color:var(--blue);background:var(--bg);transition:border-color .2s,box-shadow .2s}
.calc-field input[type=number]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(11,59,130,.08)}
.calc-field input[type=range]{width:100%;margin-top:10px;accent-color:var(--blue);height:4px;cursor:pointer}
.calc-range-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--text-muted);margin-top:4px}
.calc-row-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.calc-toggle{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--border-strong);border-radius:var(--r-md);overflow:hidden}
.calc-toggle-btn{padding:12px;font-size:14px;font-weight:600;color:var(--text-muted);transition:all var(--transition-fast);text-align:center}
.calc-toggle-btn.active{background:var(--blue);color:#fff}
.calc-roof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.calc-roof-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;border:1.5px solid var(--border-strong);border-radius:var(--r-md);font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}
.calc-roof-btn svg{color:var(--text-muted);transition:color .2s}
.calc-roof-btn.active{border-color:var(--blue);background:var(--blue-pale);color:var(--blue)}
.calc-roof-btn.active svg{color:var(--blue)}
.calc-nav{display:flex;justify-content:space-between;align-items:center;margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
.calc-note{font-size:12px;color:var(--text-muted);font-style:italic}

/* Calculator Results */
.calc-results{display:none}
.calc-results.active{display:block}
.calc-result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px}
.calc-res-item{background:var(--bg-alt);border-radius:var(--r-md);padding:20px;text-align:center;border:1px solid var(--border)}
.calc-res-item.highlight{background:var(--blue-pale);border-color:rgba(11,59,130,.2)}
.calc-res-item.gold{background:var(--gold-light);border-color:rgba(245,185,21,.3)}
.calc-res-val{font-size:24px;font-weight:800;color:var(--blue);margin-bottom:6px;line-height:1}
.calc-res-item.highlight .calc-res-val{color:var(--blue)}
.calc-res-item.gold .calc-res-val{color:var(--gold-dark)}
.calc-res-lbl{font-size:12px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.06em}

/* Lead lock gate */
.calc-lock{background:var(--bg-alt);border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);padding:32px;text-align:center;margin-top:24px}
.calc-lock-icon{color:var(--blue);margin:0 auto 16px}
.calc-lock h3{font-size:18px;font-weight:800;color:var(--navy);margin-bottom:8px}
.calc-lock p{font-size:14px;color:var(--text-muted);margin-bottom:24px}
.calc-lock-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}
.calc-lock-form.sent{display:none}
.calc-unlock-success{display:none;text-align:center;padding:24px 0}
.calc-unlock-success svg{color:var(--blue);margin:0 auto 12px}

/* ── PROJECTS / CASES GRID ─────────────────────────────────── */
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.case-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);display:flex;flex-direction:column}
.case-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover);border-color:rgba(200,206,212,.72)}
.case-card-img{display:block;position:relative;height:220px;overflow:hidden;background:var(--bg-alt)}
.case-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.case-card:hover .case-card-img img{transform:scale(1.06)}
.case-card-placeholder{height:100%;display:flex;align-items:center;justify-content:center;color:var(--border-strong)}
.case-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,26,58,.7) 0%,transparent 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:14px;gap:6px}
.case-kwp-badge{align-self:flex-start;background:var(--gold);color:var(--navy);font-size:12px;font-weight:700;padding:4px 10px;border-radius:var(--r-full)}
.case-type-badge{align-self:flex-start;background:rgba(255,255,255,.88);color:var(--blue);font-size:11px;font-weight:600;padding:4px 10px;border-radius:var(--r-full)}
.case-card-body{padding:22px;flex:1;display:flex;flex-direction:column}
.case-cat{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--blue-light);font-weight:700;margin-bottom:8px;display:block}
.case-card-body h3{font-size:16px;font-weight:700;margin-bottom:10px;line-height:1.4;color:var(--navy)}
.case-card-body h3 a:hover{color:var(--blue)}
.case-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--text-muted);margin-bottom:12px}
.case-meta span{display:flex;align-items:center;gap:4px}
.case-invest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 8px;margin-bottom:14px;padding:10px 12px;background:rgba(11,59,130,.04);border-radius:8px;border:1px solid rgba(11,59,130,.08)}
.case-invest-grid .ci-metric{display:flex;align-items:flex-start;gap:5px;overflow:hidden;min-width:0}
.case-invest-grid .ci-icon{display:inline-flex;flex-shrink:0;color:var(--blue-light);margin-top:1px}
.case-invest-grid .ci-body{display:flex;flex-direction:column;gap:1px;min-width:0;overflow:hidden}
.case-invest-grid .ci-label{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:0;display:block}
.case-invest-grid .ci-val{font-size:12.5px;font-weight:700;color:var(--blue);white-space:nowrap;letter-spacing:-.02em;display:block;word-break:normal}
.case-card-link{font-size:13px;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:5px;transition:gap .2s;margin-top:auto}
.case-card-link:hover{gap:9px;color:var(--blue-mid)}

/* Filters */
.cases-filter-bar,.archive-filters{margin-bottom:36px}
.filter-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.filter-tab,.af-btn{padding:8px 18px;border-radius:var(--r-full);font-size:13px;font-weight:600;color:var(--text-muted);border:1.5px solid var(--border-strong);background:var(--bg);cursor:pointer;transition:all var(--transition-fast)}
.filter-tab.active,.af-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.filter-tab:hover:not(.active),.af-btn:hover:not(.active){border-color:var(--blue);color:var(--blue)}
.af-select{padding:9px 14px;border:1.5px solid var(--border-strong);border-radius:var(--r-md);font-size:13px;color:var(--navy);background:var(--bg)}
.af-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.af-group label{font-weight:600;font-size:13px;color:var(--text-secondary);white-space:nowrap}

/* Load more */
.cases-loadmore{text-align:center;margin-top:48px}

/* ── TESTIMONIALS ──────────────────────────────────────────── */
.testi-wrap{max-width:860px;margin:0 auto;position:relative;overflow:hidden}
.testi-track{display:flex;transition:transform .5s var(--ease)}
.testi-slide{min-width:100%;padding:0 24px}
.testi-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xl);padding:48px;box-shadow:var(--shadow-sm);transition:box-shadow var(--transition),transform var(--transition)}
.testi-quote-text{font-size:18px;line-height:1.85;color:var(--text-primary);font-style:italic;margin-bottom:28px;position:relative;padding-left:32px}
.testi-quote-text::before{content:'"';position:absolute;left:0;top:-4px;font-size:52px;line-height:1;color:var(--blue);font-family:Georgia,serif;font-style:normal;opacity:.4}
.testi-author{display:flex;align-items:center;gap:16px}
.testi-avatar{width:48px;height:48px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;flex-shrink:0}
.testi-author strong{display:block;font-weight:700;color:var(--navy)}
.testi-author span{font-size:13px;color:var(--text-muted)}
.testi-stars{color:var(--gold);font-size:16px;letter-spacing:2px;margin-top:4px}
.testi-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px}
.testi-prev,.testi-next{width:44px;height:44px;border-radius:50%;background:var(--bg);border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);color:var(--text-secondary)}
.testi-prev:hover,.testi-next:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.testi-dots{display:flex;gap:8px}
.testi-dot{width:8px;height:8px;border-radius:50%;background:var(--border-strong);border:none;cursor:pointer;transition:all var(--transition-fast)}
.testi-dot.active{background:var(--blue);transform:scale(1.4)}

/* ── TEAM GRID ─────────────────────────────────────────────── */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.team-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;text-align:center;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.team-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover);border-color:rgba(200,206,212,.72)}
.team-photo{height:220px;overflow:hidden;background:var(--bg-alt)}
.team-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.team-card:hover .team-photo img{transform:scale(1.06)}
.team-avatar{height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--blue),var(--blue-mid));color:#fff;font-size:52px;font-weight:800}
.team-info{padding:22px}
.team-info h4{font-size:17px;font-weight:800;margin-bottom:6px;color:var(--navy)}
.team-position{font-size:13px;color:var(--blue-light);font-weight:600;display:block;margin-bottom:4px}
.team-exp{font-size:12px;color:var(--text-muted);display:block;margin-bottom:8px}
.team-expertise{font-size:13px;color:var(--text-muted)}

/* ── FAQ ACCORDION ─────────────────────────────────────────── */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-size:16px;font-weight:700;color:var(--navy);text-align:left;cursor:pointer;transition:color var(--transition-fast)}
.faq-q:hover,.faq-q[aria-expanded="true"]{color:var(--blue)}
.faq-chevron{width:24px;height:24px;border-radius:50%;background:var(--blue-pale);display:flex;align-items:center;justify-content:center;color:var(--blue);flex-shrink:0;transition:transform .3s var(--ease),background .2s}
.faq-q[aria-expanded="true"] .faq-chevron{transform:rotate(180deg);background:var(--blue);color:#fff}
.faq-a{padding:0 0 22px;display:none}
.faq-a.open{display:block}
.faq-a div{font-size:15px;color:var(--text-muted);line-height:1.85}

/* ── CTA SECTION ───────────────────────────────────────────── */
.cta-section{position:relative;background:linear-gradient(135deg,var(--navy) 0%,var(--blue-dark) 60%,#0d3068 100%);padding:104px 0;overflow:hidden}
.cta-overlay{position:absolute;inset:0;pointer-events:none}
.cta-overlay::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%, rgba(245,185,21,.06) 0%, transparent 60%)}
.cta-inner{position:relative;z-index:2;text-align:center;max-width:700px;margin:0 auto}
.cta-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(245,185,21,.15);border:1px solid rgba(245,185,21,.35);color:var(--gold);padding:8px 20px;border-radius:var(--r-full);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:24px}
.cta-inner h2{font-size:clamp(28px,4.5vw,48px);font-weight:800;color:#fff;margin-bottom:18px;line-height:1.12}
.cta-inner p{font-size:18px;color:rgba(255,255,255,.7);margin-bottom:36px;line-height:1.75;font-weight:300}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── BLOG GRID ─────────────────────────────────────────────── */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.blog-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.blog-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover);border-color:rgba(200,206,212,.72)}
.blog-thumb{display:block;height:200px;overflow:hidden}
.blog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.blog-card:hover .blog-thumb img{transform:scale(1.05)}
.blog-body{padding:24px}
.blog-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-muted);margin-bottom:12px}
.blog-cat{color:var(--blue-light);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.blog-body h3{font-size:17px;font-weight:700;margin-bottom:10px;line-height:1.4;color:var(--navy)}
.blog-body h3 a:hover{color:var(--blue)}
.blog-body p{font-size:14px;color:var(--text-muted);margin-bottom:14px;line-height:1.75}
.blog-read-more{font-size:13px;font-weight:700;color:var(--blue-light);display:inline-flex;align-items:center;gap:5px;transition:gap .2s}
.blog-read-more:hover{gap:9px;color:var(--blue)}

/* ── PAGE HERO ─────────────────────────────────────────────── */
.page-hero{position:relative;padding:calc(var(--nav-h) + var(--topbar-h) + 56px) 0 68px;background:linear-gradient(140deg,var(--navy),var(--blue-dark));overflow:hidden;min-height:280px;display:flex;align-items:center}
.page-hero-sm{min-height:220px}
.page-hero .container{position:relative;z-index:2;width:100%}
.page-hero-title{font-size:clamp(28px,4vw,52px);font-weight:800;color:#fff;display:flex;align-items:center;gap:16px;margin:14px 0 12px;line-height:1.1}
.page-hero-icon{color:var(--gold)}
.page-hero-sub{font-size:17px;color:rgba(255,255,255,.72)}
.page-hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.page-hero-badge{background:rgba(255,255,255,.12);color:#fff;font-size:12px;font-weight:600;padding:5px 14px;border-radius:var(--r-full)}
.page-hero-badge-gold{background:rgba(245,185,21,.2);color:var(--gold)}

/* ── BREADCRUMB ────────────────────────────────────────────── */
.breadcrumb ol{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:13px;color:rgba(255,255,255,.5)}
.breadcrumb a{color:rgba(255,255,255,.65);transition:color var(--transition-fast)}
.breadcrumb a:hover{color:var(--gold)}
.bc-sep{opacity:.4;display:flex;align-items:center}
.bc-current{color:rgba(255,255,255,.9);font-weight:500}

/* ── CASE SINGLE ───────────────────────────────────────────── */
.case-layout{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start}
.case-highlights{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:var(--bg-alt);border-radius:var(--r-lg);padding:28px;margin-bottom:36px;border:1px solid var(--border)}
.ch-item{text-align:center}
.ch-val{font-size:26px;font-weight:800;color:var(--blue);line-height:1}
.ch-item.green .ch-val{color:#16a34a}
.ch-item.gold .ch-val{color:var(--gold-dark)}
.ch-lbl{font-size:11px;color:var(--text-muted);margin-top:6px;font-weight:500;text-transform:uppercase;letter-spacing:.06em}
.case-content{font-size:16px;line-height:1.9;color:var(--text-secondary)}
.case-content h2,.case-content h3{font-family:var(--font);font-weight:800;color:var(--navy);margin:32px 0 16px}
.case-gallery h3{font-weight:800;font-size:20px;margin:36px 0 18px;color:var(--navy)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery-item img{width:100%;height:160px;object-fit:cover;border-radius:var(--r-md);transition:transform .35s;cursor:pointer}
.gallery-item:hover img{transform:scale(1.04)}
.case-results{margin:36px 0;padding:28px;background:linear-gradient(135deg,var(--blue-pale),#f0f6ff);border-radius:var(--r-lg);border:1px solid rgba(11,59,130,.12)}
.case-results h3{font-weight:800;font-size:18px;color:var(--navy);margin-bottom:18px}
.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.result-item{text-align:center;background:#fff;border-radius:var(--r-md);padding:18px;box-shadow:var(--shadow-xs)}
.result-val{font-size:24px;font-weight:800;color:var(--blue)}
.result-lbl{font-size:11px;color:var(--text-muted);margin-top:5px;text-transform:uppercase;letter-spacing:.06em}
.case-testimonial{border-left:4px solid var(--blue);padding:22px 28px;background:var(--bg-alt);border-radius:0 var(--r-lg) var(--r-lg) 0;margin:36px 0;font-style:italic;font-size:16px;line-height:1.85;color:var(--text-secondary)}
.case-testimonial cite{display:block;margin-top:14px;font-size:14px;font-style:normal;color:var(--text-muted);font-weight:700}
.case-video{margin:36px 0}
.case-video h3{font-weight:800;font-size:20px;margin-bottom:16px;color:var(--navy)}
.video-wrap{position:relative;padding-bottom:56.25%;height:0;border-radius:var(--r-lg);overflow:hidden}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%}

/* Sidebar */
.sidebar-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;margin-bottom:20px}
.sidebar-card-title{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.spec-list{display:flex;flex-direction:column}
.spec-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 0;border-bottom:1px solid var(--border)}
.spec-row:last-child{border-bottom:none}
.spec-row dt{font-size:13px;color:var(--text-muted)}
.spec-row dd{font-size:13px;font-weight:700;color:var(--navy);text-align:right}
.sidebar-cta{background:linear-gradient(135deg,var(--blue-dark),var(--blue));border:none;text-align:center}
.sidebar-cta .sidebar-card-title{color:rgba(255,255,255,.65);border-color:rgba(255,255,255,.12)}
.sidebar-cta-icon{color:var(--gold);margin-bottom:12px}
.sidebar-cta h4{color:#fff;font-size:18px;font-weight:800;margin-bottom:10px}
.sidebar-cta p{color:rgba(255,255,255,.65);font-size:14px;margin-bottom:18px}

/* ── QUOTE / CONTACT FORMS ─────────────────────────────────── */
.quote-layout,.contact-layout{display:grid;grid-template-columns:1fr 400px;gap:48px;align-items:start}
.form-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-xl);padding:40px;box-shadow:var(--shadow-sm)}
.form-card h2{font-size:24px;font-weight:800;color:var(--navy);margin-bottom:8px}
.form-intro{color:var(--text-muted);font-size:15px;margin-bottom:32px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-group{margin-bottom:22px}
.form-group label{display:block;font-weight:600;font-size:14px;color:var(--navy);margin-bottom:8px}
.req{color:var(--blue)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:13px 16px;border:1.5px solid var(--border-strong);border-radius:var(--r-md);font-size:15px;color:var(--navy);transition:border-color .2s,box-shadow .2s;background:var(--bg)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(11,59,130,.08)}
.field-error{border-color:#e53e3e!important}
.form-hint{font-size:12px;color:var(--text-muted);margin-top:5px}
.form-privacy{font-size:12px;color:var(--text-muted);text-align:center;margin-top:14px}
.radio-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.radio-card{position:relative;cursor:pointer}
.radio-card input{position:absolute;opacity:0;width:0;height:0}
.radio-card-inner{border:1.5px solid var(--border-strong);border-radius:var(--r-md);padding:16px;transition:all .2s}
.radio-card input:checked ~ .radio-card-inner{border-color:var(--blue);background:var(--blue-pale)}
.radio-card-inner strong{display:block;font-size:14px;font-weight:700;margin-bottom:4px;color:var(--navy)}
.radio-card-inner span{font-size:12px;color:var(--text-muted)}
.form-success{text-align:center;padding:48px 20px}
.success-icon{color:var(--blue);margin:0 auto 16px}
.form-success h3{font-size:22px;font-weight:800;margin-bottom:10px;color:var(--navy)}
.form-success p{color:var(--text-muted)}

/* Contact page */
.contact-info h2{font-size:26px;font-weight:800;margin-bottom:24px;color:var(--navy)}
.ci-item{display:flex;align-items:flex-start;gap:16px;padding:16px;background:var(--bg-alt);border-radius:var(--r-md);margin-bottom:10px;border:1px solid var(--border)}
.ci-item>div{min-width:0}
.ci-icon{color:var(--blue);flex-shrink:0;margin-top:2px}
.ci-label{display:block;font-size:11px;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.ci-val{display:block;font-size:15px;font-weight:600;color:var(--navy);word-break:break-word}
a.ci-val:hover{color:var(--blue)}
.contact-map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);margin-top:20px}
.social-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.social-link{display:inline-flex;align-items:center;gap:7px;line-height:1;padding:9px 16px;background:var(--bg-alt);border-radius:var(--r-full);font-size:13px;font-weight:700;color:var(--navy);border:1px solid var(--border-strong);transition:all var(--transition-fast)}
.social-link svg{flex-shrink:0}
.social-link:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-1px);box-shadow:var(--shadow-sm)}

/* ── FOOTER ────────────────────────────────────────────────── */
.site-footer{background:var(--navy);color:rgba(255,255,255,.65)}
.footer-top{padding:72px 0 48px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:56px}
.footer-brand .footer-logo{--logo-h:32px;--logo-w:auto;display:flex;align-items:center;gap:10px;margin-bottom:18px}
.footer-logo img,.footer-logo .custom-logo{height:var(--logo-h);width:var(--logo-w);max-width:100%;object-fit:contain}
.footer-logo-text{font-size:22px;font-weight:800;color:#fff}
.footer-logo-icon{color:var(--gold)}
.footer-desc{font-size:14px;line-height:1.8;margin-bottom:22px}
.footer-contacts{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.footer-contact-item{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.55);transition:color var(--transition-fast)}
.footer-contact-item:hover{color:var(--gold)}
.footer-contact-item svg{color:var(--gold);flex-shrink:0}
.footer-socials{display:flex;gap:10px}
.footer-social{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.07);color:rgba(255,255,255,.65);font-weight:800;font-size:13px;transition:all var(--transition-fast)}
.footer-social:hover{background:var(--gold);color:var(--navy);transform:translateY(-2px)}
.footer-payment{margin-top:22px}
.footer-payment-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:10px}
.footer-payment-icons{display:flex;flex-wrap:wrap;gap:8px}
.footer-payment-badge{display:inline-flex;border-radius:5px;overflow:hidden;line-height:0;opacity:.92;transition:opacity var(--transition-fast)}
.footer-payment-badge:hover{opacity:1}
.footer-col-title{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-bottom:20px}
.footer-nav{display:flex;flex-direction:column;gap:10px}
.footer-nav a{font-size:14px;color:rgba(255,255,255,.5);transition:color var(--transition-fast)}
.footer-nav a:hover{color:var(--gold)}
.footer-newsletter p{font-size:13px;margin-bottom:12px;margin-top:22px}
.newsletter-form{display:flex;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);overflow:hidden}
.newsletter-form input{flex:1;background:rgba(255,255,255,.06);border:none;padding:11px 14px;font-size:13px;color:#fff;min-width:0}
.newsletter-form input::placeholder{color:rgba(255,255,255,.3)}
.newsletter-form input:focus{outline:none}
.newsletter-form button{background:var(--gold);color:var(--navy);border:none;padding:11px 18px;font-weight:800;font-size:15px;cursor:pointer;flex-shrink:0;transition:background var(--transition-fast)}
.newsletter-form button:hover{background:var(--gold-dark);color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding:22px 0}
.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.copyright{font-size:13px;color:rgba(255,255,255,.35)}
.footer-legal{display:flex;gap:18px}
.footer-legal a{font-size:12px;color:rgba(255,255,255,.35);transition:color var(--transition-fast)}
.footer-legal a:hover{color:var(--gold)}

/* ── FLOATING ACTIONS ──────────────────────────────────────── */
.floating-actions{position:fixed;bottom:28px;right:24px;z-index:500;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.fab{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;box-shadow:var(--shadow-lg);transition:all var(--transition);cursor:pointer}
.fab:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}
.fab-phone{background:var(--blue);color:#fff}
.fab-zalo{background:#0068ff;color:#fff}
.fab-cta{background:var(--gold);color:var(--navy);width:56px;height:56px}
.fab-scroll{background:rgba(10,26,58,.75);color:#fff;font-size:18px;backdrop-filter:blur(6px)}
.floating-actions--has-oa{bottom:96px}

/* ── LIGHTBOX ──────────────────────────────────────────────── */
#busa-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
#busa-lightbox.open{opacity:1;pointer-events:auto}
.lb-overlay{position:absolute;inset:0;background:rgba(0,0,0,.92)}
.lb-img{position:relative;z-index:2;max-width:90vw;max-height:85vh;object-fit:contain;border-radius:var(--r-md)}
.lb-close,.lb-prev,.lb-next{position:absolute;z-index:3;background:rgba(255,255,255,.08);border:none;color:#fff;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center}
.lb-close{top:16px;right:20px;width:44px;height:44px;border-radius:50%;font-size:22px}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:52px;height:72px;font-size:28px;border-radius:var(--r-sm)}
.lb-prev{left:16px} .lb-next{right:16px}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.2)}

/* ── PAGINATION ────────────────────────────────────────────── */
.busa-pagination ul{display:flex;justify-content:center;gap:8px;margin-top:56px;flex-wrap:wrap}
.busa-pagination li a,.busa-pagination li span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border-radius:var(--r-md);border:1.5px solid var(--border-strong);font-size:14px;font-weight:600;color:var(--text-muted);transition:all var(--transition-fast)}
.busa-pagination .current{background:var(--blue);color:#fff;border-color:var(--blue)}
.busa-pagination li a:hover{background:var(--blue-pale);border-color:var(--blue);color:var(--blue)}

/* ── ANIMATIONS ────────────────────────────────────────────── */
[data-animate]{opacity:0;transform:translateY(28px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
[data-animate="fade-left"]{transform:translateX(28px)}
[data-animate="fade-right"]{transform:translateX(-28px)}
[data-animate="fade-scale"]{transform:scale(0.95)}
[data-animate].animated{opacity:1;transform:none}

/* ── UTILITIES ─────────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.no-content-notice{text-align:center;padding:48px 24px;color:var(--text-muted);background:var(--bg-alt);border-radius:var(--r-lg);border:1px dashed var(--border-strong)}
.no-content-notice a{color:var(--blue);font-weight:700}
.entry-content h2,.entry-content h3{font-weight:800;margin:2em 0 .85em;color:var(--navy)}
.entry-content p{margin-bottom:1.25em;line-height:1.9;color:var(--text-secondary)}
.entry-content ul,.entry-content ol{margin:1em 0 1em 1.5em;color:var(--text-secondary)}
.entry-content li{margin-bottom:.5em}
.entry-content img{border-radius:var(--r-md);margin:1.5em 0}
.entry-content a{color:var(--blue-light);text-decoration:underline}
.text-gold{color:var(--gold)}
.text-blue{color:var(--blue)}
.text-muted{color:var(--text-muted)}
.fw-800{font-weight:800}

/* ── GLOBAL CARD POLISH ────────────────────────────────────── */
/* form-card elevation on hover */
.form-card {
  transition: box-shadow var(--transition), transform var(--transition);
}
.form-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}
/* calc-card clean resting */
.calc-card {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
/* sidebar-card silver border */
.sidebar-card {
  border: 1px solid var(--border);
}
/* section-label token alignment */
.section-label {
  background: var(--blue-pale);
  border: 1px solid rgba(11,59,130,.10);
  color: var(--blue-light);
}
/* btn-outline uses silver border at rest */
.btn-outline {
  border-color: rgba(200,206,212,.80);
  color: var(--navy);
}
.btn-outline:hover {
  background: var(--navy);
  color: var(--blue-light);
  border-color: var(--navy);
}
/* tnum-digit (about stats sidebar) */
.tnum-digit { color: var(--gold); }
.tnum-line  { background: rgba(245,185,21,.35); }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width:1100px) {
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:1fr 1fr}
  .cases-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .case-layout{grid-template-columns:1fr 320px}
  .hero-inner{grid-template-columns:1fr 440px;gap:40px}
}
@media (max-width:900px) {
  .hero-inner{grid-template-columns:1fr}
  .hero-side{display:none}
  .hero-side.hero-side--fin-banner{display:block;margin-top:32px}
  .about-grid{grid-template-columns:1fr;gap:48px}
  .case-layout{grid-template-columns:1fr}
  .quote-layout,.contact-layout{grid-template-columns:1fr}
  .calc-row-2{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .case-highlights{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px) {
  :root{--nav-h:64px;--topbar-h:0px}
  .topbar{display:none}
  .site-header{top:0}
  .hero{padding-top:calc(var(--nav-h) + 40px)}
  .main-nav{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:290px;background:var(--bg);padding:var(--nav-h) 0 24px;box-shadow:-4px 0 28px rgba(10,26,58,.15);transform:translateX(100%);transition:transform .35s var(--ease);z-index:850;overflow-y:auto}
  .main-nav.open{transform:translateX(0)}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;padding:16px}
  .nav-link{padding:14px 16px}
  .sub-menu{position:static;box-shadow:none;border:none;padding:0 0 0 16px;opacity:1;pointer-events:auto;transform:none;display:none;background:var(--bg-alt);border-radius:var(--r-md);margin-top:4px}
  .menu-item-has-children.open > .sub-menu{display:block}
  .hamburger{display:flex}
  .header-cta{display:none}
  .mobile-nav-cta{display:block;margin:20px 16px 0;padding-top:20px;border-top:1px solid var(--border)}
  .section{padding:80px 0}
  .why-grid,.cases-grid,.blog-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  .about-counters{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .form-row-2{grid-template-columns:1fr}
  .radio-grid{grid-template-columns:1fr}
  .footer-bottom-inner{flex-direction:column;text-align:center}
  .floating-actions{bottom:16px;right:12px}
  .floating-actions--has-oa{bottom:84px}
  .cta-section{padding:72px 0}
  .hero-btns{flex-direction:column;align-items:flex-start}
  .calc-lock-form{grid-template-columns:1fr}
  .calc-roof-grid{grid-template-columns:1fr 1fr}
  /* 2x2 grid: flex-wrap left two stats orphaned with no row-2 divider beneath them */
  .stats-bar-inner{display:grid;grid-template-columns:1fr 1fr;justify-content:unset;gap:24px 16px}
  .stat-item{padding:0}
  .stat-item::after{display:none}
}
@media (max-width:480px) {
  .container{padding:0 16px}
  .hero-title{font-size:clamp(30px,8vw,42px)}
  .case-highlights{grid-template-columns:1fr 1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:1fr}
  .about-counters{grid-template-columns:1fr}
  .hero-card-stats{grid-template-columns:1fr 1fr}
  .calc-result-grid{grid-template-columns:1fr 1fr}
  .stats-bar-inner{gap:20px 10px}
  .hero-stats-bar .stat-item{padding:0 10px}
  .hero-stats-bar .stat-icon{width:32px;height:32px}
  .hero-stats-bar .stat-val{font-size:24px}
}

/* ── WP ADMIN BAR OFFSET ───────────────────────────────────── */
.admin-bar .topbar{top:32px}
.admin-bar .site-header{top:calc(32px + var(--topbar-h))}
.admin-bar .site-header.scrolled{top:32px}
@media screen and (max-width:782px) {
  .admin-bar .topbar{top:46px}
  .admin-bar .site-header{top:46px}
  .admin-bar .site-header.scrolled{top:46px}
}

/* ════════════════════════════════════════════════════════════════════════
   ABOUT FLOATING CANVAS SECTION
   Canvas left · Text right · GSAP depth-of-field parallax
   ════════════════════════════════════════════════════════════════════════ */

/* 2-column grid: canvas 54fr | text 46fr */
.about-canvas-grid {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: 56px;
  align-items: center;
}

/* ── Canvas viewport ──────────────────────────────────────────── */
.about-canvas-viewport {
  position: relative;
  height: 520px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(148deg, #eef3fc 0%, #e8f0fb 45%, #f3f7ff 100%);
  box-shadow:
    inset 0 0 80px rgba(11,59,130,.045),
    0 24px 72px rgba(11,59,130,.07);
  /* Edge vignette — nodes fade at borders for infinite-canvas feel */
  -webkit-mask-image: radial-gradient(ellipse 88% 88% at 50% 50%, #000 55%, transparent 100%);
  mask-image:         radial-gradient(ellipse 88% 88% at 50% 50%, #000 55%, transparent 100%);
}

/* Subtle focal-zone highlight band (decorative, faint) */
.about-canvas-viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  top: 38%;
  bottom: 46%;
  background: linear-gradient(90deg, transparent 0%, rgba(23,117,229,.03) 50%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── SVG background layer ─────────────────────────────────────── */
.about-canvas-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── Float nodes ──────────────────────────────────────────────── */
.float-node {
  position: absolute;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgba(11,59,130,.10);
  border-radius: 14px;
  cursor: default;
  user-select: none;
  z-index: 2;
  will-change: transform, opacity;
  transform-origin: center center;
  /* Initial defocused state — GSAP will override these */
  transform: scale(.86);
  filter: blur(5px);
  opacity: .42;
  transition: box-shadow .25s ease;
}
.float-node:hover {
  box-shadow: 0 14px 44px rgba(11,59,130,.18);
  z-index: 10;
}

/* Value number */
.fn-val {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  color: var(--blue);
  line-height: 1;
  letter-spacing: -.02em;
}
.fn-unit     { font-size:.68em; font-weight:600; color:var(--blue-light); margin-left:1px; }
.fn-currency { font-size:.62em; font-weight:700; color:var(--gold); vertical-align:super; }
.fn-plus     { color: var(--gold); }
.fn-label    { display:block; font-size:11px; font-weight:500; color:#64748b; margin-top:5px; white-space:nowrap; }

/* Size variants */
.fn-xl { padding:18px 22px; }
.fn-xl .fn-val { font-size:54px; }
.fn-lg { padding:16px 20px; }
.fn-lg .fn-val { font-size:40px; }
.fn-md { padding:14px 17px; }
.fn-md .fn-val { font-size:30px; }
.fn-sm { padding:12px 15px; }
.fn-sm .fn-val { font-size:24px; }

/* ── Right text block ─────────────────────────────────────────── */
.about-text-block { padding-left: 6px; }

/* ── Responsive: ≤900px — collapse canvas to a 2-column stat grid ── */
@media (max-width:1100px) {
  .about-canvas-grid { gap: 36px; }
}
@media (max-width:900px) {
  .about-canvas-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  /* Text first on mobile */
  .about-canvas-grid > .about-text-block  { order: 0; }
  .about-canvas-grid > .about-canvas-viewport { order: 1; }

  /* Dissolve the 3D canvas — become a plain stat grid */
  .about-canvas-viewport {
    height: auto;
    min-height: unset;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    -webkit-mask-image: none;
    mask-image: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 4px;
  }
  .about-canvas-viewport::after { display: none; }

  /* All nodes → relative positioning */
  .float-node {
    position: relative !important;
    top: auto !important; left: auto !important;
    transform: none !important;
    filter: none !important;
    opacity: 0;   /* no !important — GSAP must override */
    background: rgba(255,255,255,.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1.5px solid rgba(11,59,130,.10);
  }

  /* Resize numbers on mobile */
  .fn-xl .fn-val { font-size: 30px; }
  .fn-lg .fn-val { font-size: 26px; }
  .fn-md .fn-val, .fn-sm .fn-val { font-size: 22px; }

  /* Semantic reorder by importance */
  .float-node[data-index="0"] { order:1; }
  .float-node[data-index="1"] { order:2; }
  .float-node[data-index="3"] { order:3; }
  .float-node[data-index="2"] { order:4; }
  .float-node[data-index="4"] { order:5; }
  .float-node[data-index="5"] { order:6; }
  .float-node[data-index="6"] { order:7; }
  .float-node[data-index="7"] { order:8; }

  /* Hide decorative SVG on mobile */
  .about-canvas-bg { display: none; }
}
@media (max-width:480px) {
  .about-canvas-viewport { grid-template-columns: 1fr 1fr; gap: 9px; }
  .float-node { padding: 12px 13px !important; }
}

/* ========================================================================
   ABOUT CANVAS v4 — Open Dark Canvas, Autonomous Depth Pulse
   Stats float freely on section bg · Text col white-mode · GSAP pulse
   ======================================================================== */

/* ── Section: deep dark navy with multi-layer depth illusion ─────────── */
.about-section {
  padding: 160px 0;
  position: relative;
  overflow: hidden;
  background:
    /* 4 radial "light sources" at different depths / positions */
    radial-gradient(ellipse 100% 70% at 10% 40%,  rgba(23,117,229,.32) 0%, transparent 52%),
    radial-gradient(ellipse  70% 90% at 82% 18%,  rgba(11,59,130,.26)  0%, transparent 50%),
    radial-gradient(ellipse  55% 55% at 60% 85%,  rgba(245,185,21,.07) 0%, transparent 48%),
    radial-gradient(ellipse  40% 40% at  5% 88%,  rgba(23,117,229,.12) 0%, transparent 42%),
    /* Deep base */
    linear-gradient(148deg, #040A18 0%, #06101E 35%, #0A1730 65%, #050C1A 100%);
}
/* Blueprint grid — white on dark for tech depth */
.about-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.038) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}
.about-section > .container { position: relative; z-index: 1; }

/* ── 2-column grid ───────────────────────────────────────────────────── */
.about-section > .container { max-width: 1440px; padding: 0 clamp(24px, 4vw, 72px); }
.about-canvas-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* ── Canvas viewport — TRANSPARENT, merges with section background ───── */
.about-canvas-viewport {
  position: relative;
  height: 580px;
  border-radius: 0;
  overflow: visible;   /* allow nodes to breathe past edges */
  background: none;
  box-shadow: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.about-canvas-viewport::before,
.about-canvas-viewport::after { display: none; }

/* ── SVG circuit traces (now float on section bg) ────────────────────── */
.about-canvas-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: .55;
}

/* ── Kinetic energy SVGs ─────────────────────────────────────────────── */
.acv-kinetic {
  position: absolute;
  inset: -10% -5%;   /* slightly larger than viewport for edge visibility */
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.acv-kinetic svg {
  position: absolute;
  opacity: 0.14;
  will-change: transform, opacity;
}

/* ── Float nodes — BARE NUMBERS, no card, no background ─────────────── */
.float-node {
  position: absolute;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  cursor: default;
  user-select: none;
  z-index: 2;
  will-change: transform, opacity, filter;
  transform-origin: center center;
  transform: scale(.74);
  filter: blur(7px);
  opacity: 0;   /* starts hidden, GSAP fades in */
  transition: none;
}
.float-node:hover { z-index: 20; }
.float-node.is-pulsing { z-index: 20; }

/* ── Value typography — large glowing white number ───────────────────── */
.fn-val {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -.035em;
  /* resting: soft blue glow */
  text-shadow:
    0 0 48px rgba(23,117,229,.55),
    0 0 14px rgba(23,117,229,.30),
    0 2px 10px rgba(0,0,0,.50);
  transition: text-shadow 1.9s ease;
}
/* peak: vivid blue light burst */
.float-node.is-pulsing .fn-val {
  text-shadow:
    0 0 90px rgba(23,117,229,1),
    0 0 40px rgba(87,185,255,.90),
    0 0 16px rgba(23,117,229,.70),
    0 0  6px rgba(180,225,255,.55),
    0 2px 14px rgba(0,0,0,.60);
  transition: text-shadow 1.9s ease;
}
.fn-unit {
  font-size: .60em;
  font-weight: 700;
  color: var(--gold);
  margin-left: 3px;
  text-shadow: 0 0 20px rgba(245,185,21,.50);
  vertical-align: baseline;
  transition: text-shadow 1.9s ease;
}
.float-node.is-pulsing .fn-unit {
  text-shadow: 0 0 32px rgba(245,185,21,.80), 0 0 10px rgba(245,185,21,.50);
  transition: text-shadow 1.9s ease;
}
.fn-currency {
  font-size: .55em;
  font-weight: 700;
  color: var(--gold);
  vertical-align: super;
  text-shadow: 0 0 14px rgba(245,185,21,.40);
  transition: text-shadow 1.9s ease;
}
.float-node.is-pulsing .fn-currency {
  text-shadow: 0 0 28px rgba(245,185,21,.75);
  transition: text-shadow 1.9s ease;
}
.fn-plus { color: var(--gold); }
.fn-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.38);
  margin-top: 7px;
  text-transform: uppercase;
  letter-spacing: .10em;
  white-space: nowrap;
  text-shadow: none;
  transition: color 1.9s ease;
}
.float-node.is-pulsing .fn-label {
  color: rgba(160,210,255,.72);
  transition: color 1.9s ease;
}

/* Size variants — no padding (bare numbers) */
.fn-xl .fn-val { font-size: 68px; }
.fn-lg .fn-val { font-size: 52px; }
.fn-md .fn-val { font-size: 40px; }
.fn-sm .fn-val { font-size: 30px; }

/* ── Right text block — white mode on dark section ───────────────────── */
.about-text-block { padding-left: 12px; min-width: 0; }

.about-section .section-label--silver {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.88);
}
.about-section .section-label--silver svg { color: var(--gold); }

/* Title color splits */
.about-title--navy { display: block; color: #ffffff;        margin-bottom: 9px; }
.about-title--blue { display: block; color: #7DC8FF; }

.about-section .section-sub { color: rgba(255,255,255,.62); }

/* Minimalist process timeline — white-mode */
.timeline--minimal {
  display: flex;
  flex-direction: column;
  margin-top: 28px;
}
.timeline--minimal .timeline-item {
  display: flex;
  gap: 22px;
  padding-bottom: 40px;
  position: relative;
}
.timeline--minimal .timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 18px;
  top: 42px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,.20) 0%, transparent 100%);
}
.timeline-num-minimal {
  flex-shrink: 0;
  width: 38px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 2px;
}
.tnum-digit {
  font-size: 26px;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -.04em;
}
.tnum-line {
  width: 28px;
  height: 1.5px;
  background: rgba(245,185,21,.40);
  border-radius: 2px;
}
.timeline--minimal .timeline-body strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  margin-bottom: 7px;
}
.timeline--minimal .timeline-body span {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  line-height: 1.82;
}

/* Luxury CTA button — gold on dark */
.btn-luxury {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: var(--navy);
  border: 2px solid var(--gold);
  padding: 16px 32px;
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease),
              box-shadow 0.5s var(--ease), transform 0.5s var(--ease);
}
.btn-luxury:hover {
  background: #e0a812;
  border-color: #e0a812;
  box-shadow: 0 12px 36px rgba(245,185,21,.40);
  transform: translateY(-2px);
}
.btn-luxury .btn-arrow-wrap {
  display: inline-flex;
  align-items: center;
  color: var(--navy);
  transition: transform 0.5s var(--ease);
}
.btn-luxury:hover .btn-arrow-wrap { transform: translateX(7px); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:1200px) {
  .about-section { padding: 120px 0; }
  .about-canvas-grid { gap: 52px; }
}
@media (max-width:1100px) {
  .about-canvas-grid { gap: 36px; }
}
@media (max-width:900px) {
  .about-section { padding: 80px 0; }
  .about-canvas-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .about-canvas-grid > .about-text-block      { order: 0; }
  .about-canvas-grid > .about-canvas-viewport { order: 1; }
  /* Mobile: dissolve canvas → 2-col stat grid with subtle card bg */
  .about-canvas-viewport {
    height: auto;
    min-height: unset;
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 4px;
  }
  .float-node {
    position: relative !important;
    top: auto !important; left: auto !important;
    transform: none !important;
    filter: none !important;
    opacity: 0;   /* no !important — GSAP must be able to override this */
    /* Minimal card on mobile — just enough to separate from bg */
    background: rgba(8,18,46,.60) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: none !important;
  }
  .fn-xl .fn-val { font-size: 34px; }
  .fn-lg .fn-val { font-size: 28px; }
  .fn-md .fn-val { font-size: 24px; }
  .fn-sm .fn-val { font-size: 20px; }
  .fn-val { text-shadow: none !important; }
  .fn-unit { text-shadow: none !important; }
  .float-node[data-index="0"] { order:1; }
  .float-node[data-index="1"] { order:2; }
  .float-node[data-index="3"] { order:3; }
  .float-node[data-index="2"] { order:4; }
  .float-node[data-index="4"] { order:5; }
  .float-node[data-index="5"] { order:6; }
  .float-node[data-index="6"] { order:7; }
  .float-node[data-index="7"] { order:8; }
  .about-canvas-bg,
  .acv-kinetic { display: none; }
}
@media (max-width:480px) {
  .about-canvas-viewport { grid-template-columns: 1fr 1fr; gap: 9px; }
  .float-node { padding: 12px 13px !important; }
}


/* ============================================================
   ABOUT PAGE  (page-about.php)
   Template: Về Chúng Tôi
   ============================================================ */

/* ── S1: VISIONARY HERO ─────────────────────────────────────── */
.ab-hero {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(23,117,229,.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 70%, rgba(10,26,58,.60) 0%, transparent 70%),
    var(--navy);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ab-hero-svg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ab-hero-flow-svg {
  width: 100%; height: 100%;
  position: absolute; inset: 0;
}

/* Animated dash offset — energy flow illusion */
.ab-flow-path {
  animation: abFlowDash 8s linear infinite;
}
.ab-flow-2 { animation-duration: 12s; animation-direction: reverse; }
.ab-flow-3 { animation-duration: 16s; }
@keyframes abFlowDash {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -120; }
}

/* Pulsing intersection dots */
.ab-flow-dot { animation: abDotPulse 3s ease-in-out infinite; }
.ab-flow-dot:nth-child(2) { animation-delay: 1s; }
.ab-flow-dot:nth-child(3) { animation-delay: 2s; }
.ab-flow-dot:nth-child(4) { animation-delay: 0.5s; }
@keyframes abDotPulse {
  0%,100% { opacity: .5; r: 4; }
  50%      { opacity: 1;  r: 7; }
}

/* Radial glow orbs */
.ab-hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}
.ab-glow-1 {
  width: 560px; height: 560px;
  background: rgba(23,117,229,.10);
  top: -100px; right: 5%;
  animation: abGlowFloat 9s ease-in-out infinite;
}
.ab-glow-2 {
  width: 380px; height: 380px;
  background: rgba(245,185,21,.06);
  bottom: 0; left: 15%;
  animation: abGlowFloat 13s ease-in-out infinite reverse;
}
@keyframes abGlowFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-28px); }
}

.ab-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 80px;
}

/* Badge */
.ab-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(23,117,229,.14);
  border: 1px solid rgba(23,117,229,.32);
  border-radius: var(--r-full);
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(87,185,255,.92);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.ab-hero-badge svg { flex-shrink: 0; color: var(--blue-light); }

/* Massive headline */
.ab-hero-headline {
  font-size: clamp(40px, 7vw, 86px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  align-items: baseline;
}
.ab-hero-word {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.ab-word--energy  { color: #fff; }
.ab-word--finance { color: var(--gold); }
.ab-word--future  { color: #7DC8FF; }
.ab-word--sep     { color: rgba(255,255,255,.28); font-weight: 300; }

/* Sub text */
.ab-hero-sub {
  font-size: 16px;
  line-height: 1.85;
  color: rgba(255,255,255,.58);
  max-width: 540px;
  margin-bottom: 36px;
}

/* CTA row */
.ab-hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.ab-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--blue-light);
  color: #fff;
  border: 2px solid var(--blue-light);
  padding: 14px 28px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.ab-btn-primary:hover {
  background: #0f5cc7;
  border-color: #0f5cc7;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(23,117,229,.40);
}
.ab-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.22);
  padding: 14px 24px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.ab-btn-ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,.52);
  background: rgba(255,255,255,.06);
}

/* Stats strip */
.ab-hero-stats {
  display: flex;
  gap: 0;
  align-items: center;
}
.ab-hero-stat { display: flex; flex-direction: column; gap: 4px; }
.ab-hero-stat-val {
  font-size: 30px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1;
}
.ab-hero-stat-lbl {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.46);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ab-hero-stat-div {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.14);
  margin: 0 28px;
  flex-shrink: 0;
}

/* RIGHT: Kinetic visual */
.ab-hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-hero-visual {
  position: relative;
  width: 400px;
  height: 400px;
}
.ab-vis-orbit {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-vis-core {
  width: 90px; height: 90px;
  background: rgba(23,117,229,.18);
  border: 1.5px solid rgba(23,117,229,.40);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  position: relative;
  z-index: 2;
  animation: abCorePulse 4s ease-in-out infinite;
}
@keyframes abCorePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(23,117,229,.3); }
  50%      { box-shadow: 0 0 0 18px rgba(23,117,229,0); }
}
.ab-vis-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(23,117,229,.20);
}
.ab-ring-1 {
  width: 240px; height: 240px;
  animation: abRingRotate 18s linear infinite;
}
.ab-ring-2 {
  width: 360px; height: 360px;
  border-color: rgba(245,185,21,.12);
  animation: abRingRotate 28s linear infinite reverse;
}
@keyframes abRingRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ab-ring-dot {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--blue-light);
  top: 50%; left: 50%;
  transform:
    translate(-50%, -50%)
    rotate(var(--a))
    translateX(120px)
    rotate(calc(-1 * var(--a)));
}
.ab-ring-2 .ab-ring-dot {
  background: var(--gold);
  width: 8px; height: 8px;
  transform:
    translate(-50%, -50%)
    rotate(var(--a))
    translateX(180px)
    rotate(calc(-1 * var(--a)));
}

/* Floating tech chips */
.ab-vis-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(8,18,46,.72);
  border: 1px solid rgba(23,117,229,.28);
  border-radius: 40px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  animation: abChipFloat 5s ease-in-out infinite;
}
.ab-vis-chip svg { color: var(--blue-light); flex-shrink: 0; }
.ab-chip-1 { top: 16%; left: -8%;  animation-delay: 0s; }
.ab-chip-2 { top: 36%; right: -8%; animation-delay: 1.3s; animation-duration: 6s; }
.ab-chip-3 { bottom: 28%; left: -6%; animation-delay: 0.7s; animation-duration: 7s; }
.ab-chip-4 { bottom: 12%; right: -4%; animation-delay: 2s; }
@keyframes abChipFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Scroll cue */
.ab-hero-scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.30);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  animation: abScrollCue 2.4s ease-in-out infinite;
}
.ab-scroll-mouse {
  width: 22px; height: 34px;
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
}
.ab-scroll-wheel {
  width: 3px; height: 7px;
  background: rgba(255,255,255,.40);
  border-radius: 3px;
  animation: abScrollWheel 2.4s ease-in-out infinite;
}
@keyframes abScrollWheel {
  0%    { opacity: 1;  transform: translateY(0); }
  70%   { opacity: 0;  transform: translateY(10px); }
  71%   { opacity: 0;  transform: translateY(0); }
  100%  { opacity: 1;  transform: translateY(0); }
}
@keyframes abScrollCue {
  0%,100% { opacity: .5; }
  50%      { opacity: 1; }
}


/* ── S2: TRIAD CORE ─────────────────────────────────────────── */
.ab-triad {
  background: #060e24;
  overflow: hidden;
}
.ab-triad-inner {
  display: flex;
  min-height: 620px;
}
.ab-panel {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.72s cubic-bezier(0.16,1,0.3,1);
  outline: none;
}
.ab-triad-inner:has(.ab-panel:hover) .ab-panel:not(:hover) { flex: 0.65; }
.ab-panel:hover { flex: 2.7; }

/* Panel dividers */
.ab-panel + .ab-panel::before {
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 1px;
  background: rgba(255,255,255,.06);
  z-index: 3;
}

/* Dark tinted bg per panel */
.ab-panel--energy  { background: linear-gradient(135deg, #050d1f 0%, #081428 100%); }
.ab-panel--finance { background: linear-gradient(135deg, #0a0e18 0%, #0c1220 100%); }
.ab-panel--future  { background: linear-gradient(135deg, #050d12 0%, #08141a 100%); }

/* SVG bg layer */
.ab-panel-bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  opacity: 0.6;
}
.ab-panel:hover .ab-panel-bg-layer { opacity: 1; }
.ab-panel-bg-layer svg { width: 100%; height: 100%; }

/* Panel content */
.ab-panel-content {
  position: relative;
  z-index: 2;
  padding: 52px 36px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ab-panel-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--pc, rgba(255,255,255,.30));
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 16px;
  opacity: 0.7;
  transition: opacity 0.4s ease;
}
.ab-panel:hover .ab-panel-num { opacity: 1; }

.ab-panel-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pc, #fff);
  margin-bottom: 20px;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}
.ab-panel:hover .ab-panel-icon {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  transform: scale(1.08);
}

.ab-panel-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pc, rgba(255,255,255,.40));
  margin-bottom: 8px;
}
.ab-panel-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: 0;
  transition: font-size 0.5s cubic-bezier(0.16,1,0.3,1);
}
.ab-panel:hover .ab-panel-title { font-size: 32px; }

.ab-panel-expand {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease, margin 0.4s ease;
  margin-top: 0;
}
.ab-panel:hover .ab-panel-expand {
  max-height: 280px;
  opacity: 1;
  margin-top: 18px;
}
.ab-panel-body {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,.56);
  margin-bottom: 20px;
}
.ab-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pc, #fff);
  text-decoration: none;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: gap 0.3s ease;
}
.ab-panel-cta:hover { gap: 13px; }
.ab-panel-cta svg { flex-shrink: 0; }


/* ── S3: INTERACTIVE TIMELINE ───────────────────────────────── */
.ab-tl-section { background: var(--bg); overflow-x: clip; }

.ab-tl-wrap {
  position: relative;
  padding: 8px 0 24px;
}

/* Center vertical track */
.ab-tl-track {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  z-index: 0;
}
.ab-tl-line-bg {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 2px;
}
.ab-tl-line-pulse {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background: linear-gradient(180deg, var(--blue-light) 0%, rgba(23,117,229,.25) 100%);
  border-radius: 2px;
  transform-origin: top center;
  transform: scaleY(0);
  z-index: 1;
}

/* Timeline items grid */
.ab-tl-items { position: relative; z-index: 2; }
.ab-tl-item {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: 0 32px;
  margin-bottom: 56px;
  align-items: center;
}
.ab-tl-item:last-child { margin-bottom: 0; }

/* Dot */
.ab-tl-dot {
  justify-self: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
}
.ab-tl-dot-inner {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(23,117,229,.22), 0 0 14px rgba(23,117,229,.45);
  will-change: transform, opacity;
}

/* Card */
.ab-tl-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  will-change: transform, opacity, filter;
}
.ab-tl-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(23,117,229,.22);
}
.ab-tl-year {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--blue-light);
  background: rgba(23,117,229,.08);
  border: 1px solid rgba(23,117,229,.18);
  border-radius: var(--r-full);
  padding: 3px 12px;
  margin-bottom: 10px;
}
.ab-tl-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.ab-tl-desc {
  font-size: 14px;
  line-height: 1.78;
  color: var(--text-muted);
}
.ab-tl-spacer { /* empty grid cell */ }

/* Left-side card aligns right */
.ab-tl-item.--left .ab-tl-card { text-align: right; }
.ab-tl-item.--left .ab-tl-year { margin-left: auto; }


/* ── S4: BENTO GRID ─────────────────────────────────────────── */
.ab-bento-section {
  position: relative;
  background:
    radial-gradient(ellipse 80% 50% at 15% 30%, rgba(23,117,229,.06) 0%, transparent 65%),
    #f7f9fc;
  padding: 120px 0;
  overflow: hidden;
}
.ab-bento-blueprint {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ab-bento-blueprint svg { width: 100%; height: 100%; }

.ab-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ab-bento-cell:nth-child(1) { grid-column: span 2; }
.ab-bento-cell:nth-child(6) { grid-column: span 3; }

.ab-bento-cell {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 36px 32px;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  will-change: transform, opacity, filter;
  min-height: 190px;
  display: flex;
  align-items: flex-end;
}
.ab-bento-cell:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(23,117,229,.18);
}

/* Blueprint watermark icon */
.ab-bento-bp-icon {
  position: absolute;
  bottom: -16px; right: -12px;
  color: rgba(23,117,229,.06);
  pointer-events: none;
  transition: color 0.5s ease;
}
.ab-bento-bp-icon svg { width: 120px; height: 120px; }
.ab-bento-cell:nth-child(1) .ab-bento-bp-icon svg { width: 160px; height: 160px; }
.ab-bento-cell:hover .ab-bento-bp-icon { color: rgba(23,117,229,.10); }

.ab-bento-inner { position: relative; z-index: 1; }
.ab-bento-val {
  font-size: 44px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 4px;
}
.ab-bento-cell:nth-child(1) .ab-bento-val { font-size: 64px; }
.ab-bento-lbl {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-light);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.ab-bento-desc {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 320px;
}
/* Last (wide) cell — horizontal layout */
.ab-bento-cell:nth-child(6) {
  flex-direction: row;
  gap: 40px;
  align-items: center;
  min-height: 140px;
}
.ab-bento-cell:nth-child(6) .ab-bento-inner {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}
.ab-bento-cell:nth-child(6) .ab-bento-val { font-size: 52px; }
.ab-bento-cell:nth-child(6) .ab-bento-desc { max-width: none; }


/* ── S5: HUMAN CAPITAL TEAM ─────────────────────────────────── */
.ab-team-section { background: var(--bg-alt); }

.ab-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.ab-team-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  will-change: transform, opacity, filter;
}
.ab-team-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(200,206,212,.60);
}

/* Photo — monochrome base, color on hover */
.ab-team-photo {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--bg-alt);
}
.ab-team-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(85%) contrast(1.05);
  transition: filter 0.6s ease, transform 0.6s ease;
}
.ab-team-card:hover .ab-team-photo img {
  filter: grayscale(0%) contrast(1);
  transform: scale(1.04);
}

/* Hover overlay */
.ab-team-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,26,58,.55) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.ab-team-card:hover .ab-team-overlay { opacity: 1; }

/* Avatar fallback */
.ab-team-avatar {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  font-size: 48px;
  font-weight: 900;
  color: rgba(255,255,255,.18);
}

/* Gold nameplate */
.ab-team-nameplate {
  padding: 18px 20px 10px;
  border-left: 3px solid var(--gold);
}
.ab-team-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: -.01em;
}
.ab-team-role {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-light);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 3px;
}
.ab-team-exp {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Bio — blur to sharp on hover */
.ab-team-bio {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  filter: blur(4px);
  transition: max-height 0.5s var(--ease), opacity 0.4s ease, filter 0.4s ease, padding-bottom 0.4s ease;
}
.ab-team-card:hover .ab-team-bio {
  max-height: 120px;
  opacity: 1;
  filter: blur(0);
  padding-bottom: 18px;
}
.ab-team-bio p {
  font-size: 13px;
  line-height: 1.72;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 12px;
}


/* ── ABOUT PAGE RESPONSIVE ──────────────────────────────────── */
@media (max-width: 1280px) {
  .ab-hero-inner { gap: 48px; }
  .ab-hero-visual { width: 340px; height: 340px; }
  .ab-ring-1 { width: 200px; height: 200px; }
  .ab-ring-2 { width: 300px; height: 300px; }
  .ab-ring-1 .ab-ring-dot {
    transform: translate(-50%,-50%) rotate(var(--a)) translateX(100px) rotate(calc(-1 * var(--a)));
  }
  .ab-ring-2 .ab-ring-dot {
    transform: translate(-50%,-50%) rotate(var(--a)) translateX(150px) rotate(calc(-1 * var(--a)));
  }
  .ab-team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .ab-hero-inner { grid-template-columns: 1fr; padding-top: 100px; }
  .ab-hero-right { display: none; }
  .ab-hero-headline { font-size: clamp(36px, 10vw, 60px); }
  .ab-hero-sub { max-width: 100%; }
  .ab-triad-inner { flex-direction: column; min-height: unset; }
  .ab-panel { flex: unset !important; min-height: 280px; }
  .ab-panel-content { justify-content: flex-start; padding: 36px 28px; }
  .ab-panel-expand { max-height: 280px !important; opacity: 1 !important; margin-top: 14px !important; }
  .ab-panel-title { font-size: 26px !important; }
  .ab-tl-item {
    grid-template-columns: 1fr 28px;
  }
  .ab-tl-item.--left .ab-tl-card  { grid-column: 1; text-align: left; }
  .ab-tl-item.--left .ab-tl-year  { margin-left: 0; }
  .ab-tl-item.--left .ab-tl-dot   { grid-column: 2; }
  .ab-tl-item.--left .ab-tl-spacer { display: none; }
  .ab-tl-item.--right .ab-tl-card  { grid-column: 1; }
  .ab-tl-item.--right .ab-tl-dot   { grid-column: 2; }
  .ab-tl-item.--right .ab-tl-spacer { display: none; }
  .ab-tl-track { left: auto; right: 14px; transform: none; }
  .ab-bento-grid { grid-template-columns: 1fr 1fr; }
  .ab-bento-cell:nth-child(1) { grid-column: span 2; }
  .ab-bento-cell:nth-child(2),
  .ab-bento-cell:nth-child(3),
  .ab-bento-cell:nth-child(4),
  .ab-bento-cell:nth-child(5) { grid-column: span 1; }
  .ab-bento-cell:nth-child(6) { grid-column: span 2; }
  .ab-team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ab-hero { min-height: 100svh; }
  .ab-hero-stats { flex-wrap: wrap; gap: 16px; }
  .ab-hero-stat-div { display: none; }
  .ab-hero-ctas { flex-direction: column; align-items: flex-start; }
  .ab-bento-grid { grid-template-columns: 1fr; }
  .ab-bento-cell { grid-column: span 1 !important; }
  .ab-bento-cell:nth-child(6) { flex-direction: column; align-items: flex-start; gap: 0; }
  .ab-tl-item {
    grid-template-columns: 1fr;
  }
  .ab-tl-item .ab-tl-dot   { display: none; }
  .ab-tl-item .ab-tl-spacer { display: none; }
  .ab-tl-item .ab-tl-card  { grid-column: 1 !important; text-align: left !important; }
  .ab-tl-item.--left .ab-tl-year { margin-left: 0; }
  .ab-tl-track { display: none; }
  .ab-tl-items { border-left: 2px solid var(--border); padding-left: 24px; }
  .ab-tl-card { border-radius: var(--r-md); padding: 20px 22px; }
}
@media (max-width: 480px) {
  .ab-hero-headline { flex-direction: column; gap: 0; line-height: 1.1; }
  .ab-word--sep { display: none; }
  .ab-team-grid { grid-template-columns: 1fr; }
  .ab-hero-badge { font-size: 11px; }
  .ab-bento-val { font-size: 36px !important; }
}


/* ============================================================
   PRICING PAGE  (page-pricing.php)
   Template: Báo Giá & Dự Toán Tài Chính
   ============================================================ */

/* ── PAGE HERO ─────────────────────────────────────────────── */
.prc-hero {
  background:
    radial-gradient(ellipse 80% 60% at 60% 50%, rgba(23,117,229,.09) 0%, transparent 70%),
    var(--navy);
  padding: calc(var(--nav-h) + var(--topbar-h, 0px) + 40px) 0 64px;
  color: #fff;
}
.prc-hero-inner { max-width: 720px; }
.prc-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(23,117,229,.15);
  border: 1px solid rgba(23,117,229,.32);
  border-radius: var(--r-full);
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(87,185,255,.92);
  letter-spacing: .01em;
  margin-bottom: 18px;
}
.prc-hero-badge svg { flex-shrink: 0; color: var(--blue-light); }
.prc-hero-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 14px;
}
.prc-hero-sub {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,.55);
  margin-bottom: 20px;
  max-width: 600px;
}
.prc-hero-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.40);
  letter-spacing: .01em;
}
.prc-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.prc-hero-meta svg { color: var(--blue-light); flex-shrink: 0; }


/* ── DASHBOARD CONTAINER ───────────────────────────────────── */
.prc-dashboard { background: #f0f3f8; padding: 48px 0 80px; }
.prc-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 56px);
}
.prc-master-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 960px) {
  .prc-master-grid { grid-template-columns: 1fr; gap: 24px; }
  .prc-ledger { position: static !important; }
}
@media (max-width: 560px) {
  .prc-container { padding: 0 16px; }
  .prc-block { padding: 24px 20px; }
}


/* ── INPUT PANEL ───────────────────────────────────────────── */
.prc-input-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Block card */
.prc-block {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  transition:
    transform 500ms cubic-bezier(0.16,1,0.3,1),
    box-shadow 500ms cubic-bezier(0.16,1,0.3,1),
    border-color 300ms;
}
.prc-block:hover {
  transform: translateY(-6px);
  box-shadow:
    0 4px 8px rgba(10,26,58,.04),
    0 16px 40px rgba(10,26,58,.10),
    0 40px 72px rgba(10,26,58,.10);
  border-color: rgba(200,206,212,.55);
}

.prc-block--finance { border-top: 0; }

.prc-block-hd {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 28px;
}
.prc-block-icon {
  width: 40px; height: 40px;
  background: rgba(11,59,130,.08);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  flex-shrink: 0;
}
.prc-block-icon--gold {
  background: rgba(245,185,21,.10);
  color: var(--gold-dark);
}
.prc-block-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
}
.prc-block-sub {
  font-size: 12px;
  color: var(--text-muted);
}


/* ── FIELD COMPONENT ───────────────────────────────────────── */
.prc-field { margin-bottom: 24px; }
.prc-field:last-child { margin-bottom: 0; }

.prc-field-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}
.prc-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: .01em;
}
.prc-field-chip {
  display: inline-block;
  background: rgba(11,59,130,.08);
  color: var(--blue);
  border-radius: var(--r-full);
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.prc-chip--blue {
  background: rgba(23,117,229,.10);
  color: var(--blue-light);
}

/* Number input row */
.prc-num-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.prc-num-input {
  width: 110px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 5px 10px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  outline: none;
  -moz-appearance: textfield;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.prc-num-input::-webkit-outer-spin-button,
.prc-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.prc-num-input:focus {
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(23,117,229,.12);
}
.prc-num-unit {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Range slider */
.prc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--blue-light) var(--pct, 30%), var(--border) var(--pct, 30%));
  outline: none;
  cursor: pointer;
  transition: background .1s;
}
.prc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--blue-light);
  box-shadow: 0 2px 8px rgba(23,117,229,.30);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.prc-range::-webkit-slider-thumb:hover {
  transform: scale(1.18);
  box-shadow: 0 2px 14px rgba(23,117,229,.45);
}
.prc-range::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--blue-light);
  box-shadow: 0 2px 8px rgba(23,117,229,.30);
  cursor: pointer;
}
.prc-range-ends {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}
.prc-range-cur {
  font-weight: 700;
  color: var(--blue-light);
}

/* Material select */
.prc-select-wrap { margin-top: 14px; }
.prc-select-lbl {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.prc-select-outer {
  position: relative;
  display: flex;
  align-items: center;
}
.prc-select-outer > svg {
  position: absolute;
  right: 12px;
  color: var(--text-muted);
  pointer-events: none;
  flex-shrink: 0;
}
.prc-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 38px 9px 12px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.prc-select:focus {
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(23,117,229,.12);
}

/* Equity hint */
.prc-equity-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.prc-equity-hint svg { flex-shrink: 0; color: var(--blue-light); }


/* ── TENURE TOGGLE ─────────────────────────────────────────── */
.prc-tenure-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.prc-tenure-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 6px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  cursor: pointer;
  transition: all 0.28s var(--ease);
  position: relative;
  outline: none;
}
.prc-tenure-btn:hover {
  border-color: var(--blue-light);
  background: rgba(23,117,229,.05);
}
.prc-tenure-btn.is-active {
  border-color: var(--navy);
  background: var(--navy);
  box-shadow: 0 4px 14px rgba(10,26,58,.22);
}
.prc-tb-n {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-muted);
  line-height: 1;
  letter-spacing: -.04em;
}
.prc-tenure-btn.is-active .prc-tb-n { color: #fff; }
.prc-tb-u {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .01em;
}
.prc-tenure-btn.is-active .prc-tb-u { color: rgba(255,255,255,.55); }
.prc-tb-badge {
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--navy);
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .04em;
}
.prc-tenure-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.prc-tenure-note svg { flex-shrink: 0; color: var(--gold-dark); }
.prc-tenure-note strong { color: var(--text-primary); }


/* ── TRUST STRIP ───────────────────────────────────────────── */
.prc-trust-strip {
  display: flex;
  gap: 0;
  justify-content: space-around;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 14px 20px;
}
.prc-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.prc-trust-item svg { color: var(--blue-light); flex-shrink: 0; }


/* ── LEDGER PANEL ──────────────────────────────────────────── */
.prc-ledger {
  background: var(--navy);
  border-radius: var(--r-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: calc(var(--nav-h) + 16px);
}

/* Ledger header */
.prc-ledger-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 18px;
}
.prc-lhd-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  letter-spacing: .02em;
}
.prc-lhd-title svg { color: var(--blue-light); }
.prc-live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,255,255,.38);
  font-weight: 500;
}
.prc-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2ECC71;
  box-shadow: 0 0 0 0 rgba(46,204,113,.5);
  animation: prcPulse 2s ease-in-out infinite;
}
@keyframes prcPulse {
  0%    { box-shadow: 0 0 0 0 rgba(46,204,113,.5); }
  70%   { box-shadow: 0 0 0 7px rgba(46,204,113,0); }
  100%  { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}

/* Ledger sections */
.prc-ls {
  padding: 22px 28px;
}
.prc-ls-lbl {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.38);
  letter-spacing: .02em;
  margin-bottom: 16px;
}
.prc-ls-lbl svg { flex-shrink: 0; }

/* Technical row */
.prc-tech-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 16px;
}
.prc-tech-box { flex: 1; }
.prc-tech-sep {
  width: 1px;
  height: 52px;
  background: rgba(255,255,255,.12);
  margin: 0 20px;
  flex-shrink: 0;
}
.prc-tech-val {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 2px;
}
.prc-tech-unit {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-light);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.prc-tech-lbl {
  font-size: 12px;
  color: rgba(255,255,255,.42);
}

/* Utilisation bar */
.prc-util-bar-wrap { margin-top: 8px; }
.prc-util-label {
  font-size: 11px;
  color: rgba(255,255,255,.38);
  margin-bottom: 6px;
}
.prc-util-label span { color: rgba(255,255,255,.65); font-weight: 600; }
.prc-util-track {
  height: 5px;
  background: rgba(255,255,255,.10);
  border-radius: 3px;
  overflow: hidden;
}
.prc-util-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-light), #7DC8FF);
  border-radius: 3px;
  transition: width 0.5s var(--ease);
}

/* Ledger rows */
.prc-rows { display: flex; flex-direction: column; gap: 0; }
.prc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
}
.prc-row--sep { border-top: 1px solid rgba(255,255,255,.08); margin-top: 4px; padding-top: 12px; }
.prc-row-k {
  font-size: 13px;
  color: rgba(255,255,255,.52);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prc-row-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--blue-light);
  letter-spacing: .01em;
}
.prc-row-v {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,.82);
  white-space: nowrap;
  text-align: right;
}
.prc-row-v--primary {
  font-size: 18px;
  color: #fff;
  font-weight: 900;
  letter-spacing: -.02em;
}
.prc-row--emi .prc-row-v--emi {
  color: var(--gold);
  font-size: 17px;
}
.prc-row-v--saving { color: #2ECC71; }

/* Net cashflow row */
.prc-cashflow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  margin-top: 12px;
  transition: background 0.4s ease;
}
.prc-cashflow[data-sign="pos"] { background: rgba(46,204,113,.10); }
.prc-cashflow[data-sign="neg"] { background: rgba(231,76,60,.10); }

.prc-cf-lbl {
  font-size: 12px;
  color: rgba(255,255,255,.50);
  font-weight: 600;
}
.prc-cf-val {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.03em;
  transition: color 0.4s ease;
}
.prc-cashflow[data-sign="pos"] .prc-cf-val { color: #2ECC71; }
.prc-cashflow[data-sign="neg"] .prc-cf-val { color: #e74c3c; }
.prc-cf-ico {
  flex-shrink: 0;
  transition: color 0.4s ease;
}
.prc-cashflow[data-sign="pos"] .prc-cf-ico { color: #2ECC71; }
.prc-cashflow[data-sign="neg"] .prc-cf-ico { color: #e74c3c; }


/* ── ROI CARDS ─────────────────────────────────────────────── */
.prc-roi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,.06);
  border-top: 1px solid rgba(255,255,255,.06);
}
.prc-roi-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 20px 22px;
  background: var(--navy);
  transition: background 0.3s ease;
}
.prc-roi-card:hover { background: rgba(23,117,229,.08); }
.prc-roi-card--gold:hover { background: rgba(245,185,21,.06); }
.prc-roi-ico { color: rgba(255,255,255,.30); }
.prc-roi-card--gold .prc-roi-ico { color: rgba(245,185,21,.50); }
.prc-roi-val {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.04em;
  line-height: 1;
}
.prc-roi-card--gold .prc-roi-val { color: var(--gold); }
.prc-roi-lbl {
  font-size: 11px;
  color: rgba(255,255,255,.40);
  letter-spacing: .01em;
  font-weight: 600;
  line-height: 1.4;
}


/* ── CTA BLOCK ─────────────────────────────────────────────── */
.prc-cta-wrap {
  padding: 20px 28px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.prc-cta-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: var(--blue-light);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 16px 22px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  text-align: left;
}
.prc-cta-btn span { flex: 1; }
.prc-cta-btn svg { flex-shrink: 0; }
.prc-cta-btn:hover:not(:disabled) {
  background: #1265cc;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(23,117,229,.45);
}
.prc-cta-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,255,255,.32);
  margin-top: 10px;
  justify-content: center;
}
.prc-cta-note svg { flex-shrink: 0; color: #2ECC71; }


/* ── LEAD GATE ─────────────────────────────────────────────── */
/* hidden attribute = display:none (before JS opens it).
   Once JS removes [hidden], max-height:0 + overflow:hidden keeps it invisible
   until is-open transitions it in. */
.prc-lead-gate {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.65s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease;
  background: rgba(255,255,255,.03);
  border-top: none;
}
.prc-lead-gate[hidden] { display: none; }
.prc-lead-gate.is-open {
  max-height: 900px;
  opacity: 1;
  border-top: 1px solid rgba(255,255,255,.07);
}
.prc-lg-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 28px 4px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.72);
}
.prc-lg-hd svg { color: var(--blue-light); flex-shrink: 0; }

/* Form grid */
.prc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 28px 0;
}
.prc-form-f { display: flex; flex-direction: column; gap: 5px; }
.prc-form-f--full { grid-column: span 2; }
.prc-form-lbl {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.48);
  letter-spacing: .01em;
}
.prc-req {
  color: #e74c3c;
  text-decoration: none;
  font-style: normal;
  font-weight: 700;
}
.prc-form-inp {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 13px;
  color: #fff;
  outline: none;
  transition: border-color .2s, background .2s;
}
.prc-form-inp::placeholder { color: rgba(255,255,255,.28); }
.prc-form-inp:focus {
  border-color: var(--blue-light);
  background: rgba(23,117,229,.08);
}
.prc-form-inp.is-invalid {
  border-color: #e74c3c;
  background: rgba(231,76,60,.06);
}

/* Error message */
.prc-gate-err {
  margin: 8px 28px 0;
  font-size: 13px;
  color: #e74c3c;
  font-weight: 500;
}

/* Submit button */
.prc-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 56px);
  margin: 14px 28px 0;
  background: var(--gold);
  color: var(--navy);
  border: none;
  border-radius: var(--r-md);
  padding: 14px 20px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.prc-submit-btn:hover:not(:disabled) {
  background: #e0a812;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245,185,21,.40);
}
.prc-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Privacy note */
.prc-gate-privacy {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 28px 20px;
  font-size: 11px;
  color: rgba(255,255,255,.28);
  line-height: 1.6;
}
.prc-gate-privacy svg { flex-shrink: 0; margin-top: 1px; color: var(--blue-light); }

/* Success state */
.prc-gate-success {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.prc-gate-success[hidden] { display: none; }
.prc-gate-success svg { color: #2ECC71; }
.prc-gate-success h3 {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.prc-gate-success p {
  font-size: 14px;
  color: rgba(255,255,255,.58);
  line-height: 1.72;
}
.prc-gate-success strong { color: #fff; }
.prc-success-note {
  font-size: 12px !important;
  color: rgba(255,255,255,.35) !important;
}
.prc-redownload-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid rgba(245,185,21,.4);
  color: var(--gold);
  border-radius: var(--r-md);
  padding: 9px 18px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
}
.prc-redownload-btn:hover { background: rgba(245,185,21,.08); }
.prc-redownload-btn[hidden] { display: none; }


/* ── OTP TWO-STEP VERIFICATION ─────────────────────────────── */
.prc-step-indicator {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 10px 28px 0;
}
.prc-step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  transition: background .3s, transform .3s;
}
.prc-step-dot.is-active { background: var(--gold); transform: scale(1.5); }
.prc-step-dot.is-done   { background: rgba(255,255,255,.45); }

.prc-otp-step { display: block; }
.prc-otp-step[hidden] { display: none; }

/* OTP step-2 header */
.prc-otp-hd {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 28px 0;
}
.prc-otp-hd svg { color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.prc-otp-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.prc-otp-sub   { font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.55; }

/* 6 digit boxes */
.prc-otp-inputs {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 16px 28px 0;
}
.prc-otp-digit {
  width: 44px;
  height: 52px;
  border: 2px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  caret-color: var(--gold);
  font-family: var(--font);
  outline: none;
  transition: border-color .2s, background .2s;
  -moz-appearance: textfield;
}
.prc-otp-digit::-webkit-outer-spin-button,
.prc-otp-digit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.prc-otp-digit:focus  { border-color: var(--gold); background: rgba(245,185,21,.09); }
.prc-otp-digit.is-filled  { border-color: rgba(255,255,255,.38); }
.prc-otp-digit.is-invalid { border-color: #e74c3c !important; background: rgba(231,76,60,.08) !important; animation: prc-shake .36s ease; }
@keyframes prc-shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-5px); }
  40%,80% { transform: translateX(5px); }
}
@media (max-width: 480px) {
  .prc-otp-digit { width: 38px; height: 46px; font-size: 18px; }
  .prc-otp-inputs { gap: 6px; padding: 14px 20px 0; }
}

/* Timer row */
.prc-otp-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 28px 0;
  font-size: 12px;
  color: rgba(255,255,255,.42);
  flex-wrap: wrap;
}
.prc-countdown {
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  display: inline-block;
  text-align: right;
}
.prc-countdown.is-expired { color: rgba(255,255,255,.35); }
.prc-resend-btn {
  background: none;
  border: none;
  color: var(--blue-light);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  transition: color .2s, opacity .2s;
}
.prc-resend-btn:disabled { opacity: .38; cursor: not-allowed; text-decoration: none; }
.prc-resend-btn:not(:disabled):hover { color: var(--gold); }

/* Back link */
.prc-back-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  width: 100%;
  background: none;
  border: none;
  color: rgba(255,255,255,.38);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  padding: 8px 28px 16px;
  transition: color .2s;
}
.prc-back-btn:hover { color: rgba(255,255,255,.72); }
.prc-back-btn svg { flex-shrink: 0; }


/* ── DISCLAIMER ────────────────────────────────────────────── */
.prc-disclaimer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 16px 0;
}
.prc-disclaimer p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.72;
  max-width: 960px;
}
.prc-disclaimer p > svg { flex-shrink: 0; margin-top: 2px; color: var(--blue); }
.prc-disclaimer strong { color: var(--text-primary); }


/* ── PRICING PAGE RESPONSIVE ───────────────────────────────── */
@media (max-width: 1180px) {
  .prc-master-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 1024px) {
  .prc-master-grid { grid-template-columns: 1fr; }
  .prc-ledger { position: static; }
}
@media (max-width: 768px) {
  .prc-hero { padding: calc(var(--nav-h) + 24px) 0 40px; }
  .prc-hero-title { font-size: 28px; }
  .prc-dashboard { padding: 28px 0 52px; }
  .prc-block { padding: 24px 20px; }
  .prc-ledger-hd, .prc-ls, .prc-cta-wrap { padding-left: 20px; padding-right: 20px; }
  .prc-form-grid { grid-template-columns: 1fr; padding: 12px 20px 0; }
  .prc-form-f--full { grid-column: span 1; }
  .prc-submit-btn { width: calc(100% - 40px); margin: 14px 20px 0; }
  .prc-gate-privacy { padding: 10px 20px 18px; }
  .prc-trust-strip { gap: 8px; flex-wrap: wrap; justify-content: flex-start; padding: 12px 16px; }
  .prc-tenure-group { grid-template-columns: repeat(2, 1fr); }
  .prc-lg-hd { padding: 16px 20px 4px; }
}
@media (max-width: 480px) {
  .prc-container { padding: 0 12px; }
  .prc-hero-meta { flex-direction: column; gap: 8px; }
  .prc-tech-val { font-size: 26px; }
  .prc-roi-val  { font-size: 22px; }
  .prc-row-v--primary { font-size: 16px; }
  .prc-num-input { width: 90px; }
}

/* ============================================================
   B-USA ADDITIONS v2.1 — Blog · Single · Search · Header Search
   ============================================================ */

/* ── HEADER SEARCH BUTTON ──────────────────────────────────── */
/* Desktop: nav-link style with text label */
.header-search-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r-sm);border:none;color:var(--text-secondary);font-size:14.5px;font-weight:500;font-family:var(--font);transition:color var(--transition-fast),background var(--transition-fast);background:transparent;cursor:pointer;flex-shrink:0}
.header-search-btn:hover,.header-search-btn.is-active{color:var(--blue);background:var(--blue-pale)}
.hsb-label{font-size:14.5px;font-weight:500;white-space:nowrap;line-height:1}
/* Mobile: icon-only square matching hamburger */
@media(max-width:768px){
  .header-search-btn{padding:8px;width:40px;height:40px;justify-content:center;border:1.5px solid var(--border);margin-left:auto}
  .hsb-label{display:none}
  .header-inner{gap:10px}
}

/* ── HEADER SEARCH OVERLAY ─────────────────────────────────── */
/* `top` is set dynamically by JS via header.getBoundingClientRect().bottom */
.header-search-overlay{position:fixed;top:0;left:0;right:0;z-index:890;background:#fff;border-bottom:1.5px solid var(--border);box-shadow:0 8px 40px rgba(10,26,58,.10);transform:translateY(-6px);opacity:0;pointer-events:none;transition:transform .24s var(--ease),opacity .24s}
.header-search-overlay.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
.hso-inner{display:flex;align-items:center;gap:14px;padding:16px 0}
.hso-form{flex:1;display:flex;gap:0;background:var(--bg-alt);border:1.5px solid var(--border-strong);border-radius:var(--r-full);overflow:hidden;max-width:700px}
.hso-input{flex:1;background:transparent;border:0;padding:13px 22px;font-size:16px;color:var(--navy);font-family:var(--font);outline:none}
.hso-input::placeholder{color:var(--text-muted)}
.hso-submit{display:flex;align-items:center;gap:8px;background:var(--navy);color:#fff;border:0;padding:0 24px;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .2s;letter-spacing:.01em;flex-shrink:0}
.hso-submit:hover{background:var(--blue)}
.hso-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--border-strong);background:transparent;color:var(--text-muted);cursor:pointer;flex-shrink:0;transition:all var(--transition-fast)}
.hso-close:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.hso-hints{display:flex;align-items:center;gap:8px;padding:0 0 16px;font-size:13px;flex-wrap:wrap}
.hso-hints > span{color:var(--text-muted);font-weight:500;white-space:nowrap}
.hso-hints a{padding:5px 14px;background:var(--blue-pale);color:var(--blue);border-radius:var(--r-full);font-weight:600;font-size:12px;transition:all var(--transition-fast);border:1px solid transparent}
.hso-hints a:hover{background:var(--blue);color:#fff}
@media(max-width:768px){.hso-submit span{display:none}.hso-submit{padding:0 18px}}

/* ── INSIGHTS HUB HERO ─────────────────────────────────────── */
/* Light silver-white premium editorial surface */
.ih-hero{position:relative;background:var(--bg-alt);padding:calc(var(--nav-h) + var(--topbar-h) + 72px) 0 68px;overflow:hidden}
.ih-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(200,206,212,.44) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
.ih-hero-wrap{position:relative;z-index:2;max-width:1440px;margin:0 auto;padding:0 40px;display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.ih-hero-content{flex:1;max-width:680px}
.ih-hero-title{font-size:clamp(30px,4.5vw,60px);font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1.08;margin:16px 0 14px}
.ih-hero-sub{font-size:17px;color:var(--text-muted);line-height:1.8;max-width:540px}
.ih-hero-stats{display:flex;gap:40px;flex-shrink:0;padding-bottom:8px}
.ih-stat{display:flex;flex-direction:column;align-items:center;gap:4px}
.ih-stat-num{font-size:28px;font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.03em}
.ih-stat-lbl{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
@media(max-width:860px){.ih-hero-wrap{flex-direction:column;gap:28px;align-items:flex-start}.ih-hero-stats{gap:28px}}
@media(max-width:600px){.ih-hero{padding-top:calc(var(--nav-h) + 44px)}.ih-hero-wrap{padding:0 20px}.ih-hero-stats{display:none}}

/* ── INSIGHTS HUB GRID SECTION ─────────────────────────────── */
.ih-section{padding:64px 0 96px;background:var(--bg-alt)}
.ih-container{max-width:1440px;margin:0 auto;padding:0 40px}
/* Filter bar: align to same 1440px/40px as hero and grid */
.blog-pg-filters .container{max-width:1440px;padding:0 40px}
@media(max-width:768px){.ih-container{padding:0 20px}.blog-pg-filters .container{padding:0 20px}}

/* ── BLOG CATEGORY FILTER ──────────────────────────────────── */
/* Contained pill bar — sits inside the container, not a full-bleed strip */
.blog-pg-filters{position:sticky;top:calc(var(--nav-h) + 16px);z-index:10;padding:0 0 16px;background:var(--bg-alt)}
.blog-pg-tabs{display:flex;gap:4px;width:fit-content;max-width:100%;padding:6px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-full);box-shadow:var(--shadow-md);overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.blog-pg-tabs::-webkit-scrollbar{display:none}
.blog-pg-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:var(--r-full);font-size:13px;font-weight:600;color:var(--text-secondary);border:1.5px solid transparent;transition:all var(--transition-fast);white-space:nowrap;text-decoration:none;flex-shrink:0}
.blog-pg-tab:hover{color:var(--blue);background:var(--blue-pale)}
.blog-pg-tab.active{background:var(--navy);color:#fff}
.blog-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--bg-alt);border-radius:var(--r-full);font-size:10px;font-weight:700;color:var(--text-muted)}
.blog-pg-tab.active .blog-tab-count{background:rgba(255,255,255,.15);color:#fff}
.blog-pg-tab--pin{border-color:rgba(245,185,21,.30)}
.blog-pg-tab--pin:hover,.blog-pg-tab--pin.active{border-color:transparent}
.blog-tab-star{color:var(--gold);font-size:10px;line-height:1;flex-shrink:0}
@media(max-width:768px){.blog-pg-filters{top:calc(var(--nav-h) + 10px);padding-bottom:12px}}

/* ── INSIGHTS HUB: CARD SHARED BASE ───────────────────────── */
.ih-card-img{display:block;overflow:hidden;background:var(--bg-alt);aspect-ratio:16/10;position:relative}
.ih-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 600ms cubic-bezier(0.16,1,0.3,1)}
.ih-card:hover .ih-card-img img{transform:scale(1.04)}
.ih-img-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--border-strong);background:var(--silver-light)}
.ih-card-body{padding:22px 24px 26px}
.ih-card-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.ih-cat-badge{display:inline-flex;padding:3px 10px;background:var(--blue-pale);color:var(--blue);font-size:11px;font-weight:700;border-radius:var(--r-full);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;transition:background var(--transition-fast),color var(--transition-fast);white-space:nowrap;flex-shrink:0}
.ih-cat-badge:hover{background:var(--blue);color:#fff}
.ih-meta-dot{width:3px;height:3px;background:var(--border-strong);border-radius:50%;flex-shrink:0}
.ih-meta-date,.ih-meta-read{font-size:12px;color:var(--text-muted);font-weight:500}
.ih-read-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--blue);text-decoration:none;transition:gap var(--transition-fast);margin-top:20px}
.ih-read-link:hover{gap:10px}
.ih-read-link svg{transition:transform var(--transition-fast)}
.ih-read-link:hover svg{transform:translateX(3px)}
.ih-read-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--blue-pale);color:var(--blue);transition:all var(--transition-fast);flex-shrink:0}
.ih-read-icon:hover{background:var(--blue);color:#fff}
.ih-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}

/* ── FEATURED CARD ─────────────────────────────────────────── */
/* 500ms cubic-bezier ease — lift + deep multi-layer shadow */
.ih-card--featured{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--bg);border-radius:var(--r-xl);overflow:hidden;margin-bottom:60px;box-shadow:var(--shadow-sm);transition:transform 500ms cubic-bezier(0.16,1,0.3,1),box-shadow 500ms cubic-bezier(0.16,1,0.3,1)}
.ih-card--featured:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover)}
.ih-card--featured .ih-card-img{aspect-ratio:auto;min-height:360px;border-radius:0}
.ih-card--featured .ih-card-body{padding:48px 44px;display:flex;flex-direction:column;justify-content:center}
.ih-feat-title{font-size:clamp(20px,2.3vw,32px);font-weight:800;color:var(--navy);line-height:1.2;letter-spacing:-.025em;margin:10px 0 14px}
.ih-feat-title a{color:inherit;text-decoration:none}
.ih-feat-title a:hover{color:var(--blue)}
.ih-feat-excerpt{font-size:15.5px;line-height:1.8;color:var(--text-muted);margin-bottom:8px}
@media(max-width:900px){.ih-card--featured{grid-template-columns:1fr}.ih-card--featured .ih-card-img{min-height:220px;aspect-ratio:16/9}.ih-card--featured .ih-card-body{padding:28px 24px}}

/* ── ASYMMETRIC BENTO GRID ─────────────────────────────────── */
/* 6-col base · 4-card cycle: wide(4) narrow(2) narrow(2) wide(4) */
.ih-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:24px;align-items:start}
/* Card base — borderless at rest, premium lift hover */
.ih-card{background:var(--bg);border-radius:var(--r-xl);overflow:hidden;transition:transform 500ms cubic-bezier(0.16,1,0.3,1),box-shadow 500ms cubic-bezier(0.16,1,0.3,1)}
.ih-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover)}
/* Grid children: narrow by default (span 2 of 6), rest-state shadow for visibility */
.ih-grid>.ih-card{grid-column:span 2;box-shadow:var(--shadow-sm)}
/* Wide cards — 1st & 4th in each cycle alternate left-then-right */
.ih-grid>.ih-card:nth-child(4n+1){grid-column:span 4}
.ih-grid>.ih-card:nth-child(4n+4){grid-column:span 4}
/* Cinematic 21:9 for wide bento cards */
.ih-grid>.ih-card:nth-child(4n+1) .ih-card-img,
.ih-grid>.ih-card:nth-child(4n+4) .ih-card-img{aspect-ratio:21/9}
/* Portrait 4:3 for narrow cards */
.ih-grid>.ih-card:nth-child(4n+2) .ih-card-img,
.ih-grid>.ih-card:nth-child(4n+3) .ih-card-img{aspect-ratio:4/3}
/* Typography upscale for wide bento cards */
.ih-grid>.ih-card:nth-child(4n+1) .ih-card-title,
.ih-grid>.ih-card:nth-child(4n+4) .ih-card-title{font-size:clamp(18px,1.8vw,22px)}
.ih-card-title{font-size:clamp(14px,1.35vw,16.5px);font-weight:700;color:var(--navy);line-height:1.3;letter-spacing:-.015em;margin-top:6px}
.ih-card-title a{color:inherit;text-decoration:none}
.ih-card-title a:hover{color:var(--blue)}
.ih-empty{text-align:center;padding:88px 0;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--text-muted)}
.ih-empty svg{color:var(--border-strong);margin-bottom:6px}
.ih-empty h3{font-size:22px;font-weight:800;color:var(--navy)}
.ih-empty p{font-size:15px}
.ih-empty .btn{margin-top:8px}
/* Tablet 3-col: asymmetry (wide=2/3, narrow=1/3), uniform image ratio */
@media(max-width:1080px){
  .ih-grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .ih-grid>.ih-card:nth-child(4n+1),.ih-grid>.ih-card:nth-child(4n+4){grid-column:span 2}
  /* Override all nth-child aspect-ratios — same specificity but comes later → wins */
  .ih-grid>.ih-card:nth-child(4n+1) .ih-card-img,
  .ih-grid>.ih-card:nth-child(4n+2) .ih-card-img,
  .ih-grid>.ih-card:nth-child(4n+3) .ih-card-img,
  .ih-grid>.ih-card:nth-child(4n+4) .ih-card-img{aspect-ratio:16/10}
}
/* Mobile: single col, uniform */
@media(max-width:680px){
  .ih-grid{grid-template-columns:1fr;gap:16px}
  .ih-grid>.ih-card{grid-column:span 1!important}
  .ih-grid>.ih-card:nth-child(n) .ih-card-img{aspect-ratio:16/9!important}
  .ih-card--featured .ih-card-body{padding:22px 18px}
}

/* ── ELITE SINGLE POST ─────────────────────────────────────── */

/* Reading progress bar */
.post-progress-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--gold) 0%,var(--blue-light) 100%);width:0%;z-index:950;pointer-events:none;transition:width .06s linear}

/* Hero banner header: full-bleed dotted-pattern band, sentence-case title */
.sp-header{position:relative;background:var(--bg-alt);border-bottom:1px solid var(--border);padding:calc(var(--nav-h) + var(--topbar-h) + 72px) 32px 64px;text-align:center;overflow:hidden}
.sp-header::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(200,206,212,.55) 1px,transparent 1px);background-size:30px 30px;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent);mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent);pointer-events:none}
.sp-header::after{content:'';position:absolute;top:-120px;left:50%;width:560px;height:280px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(245,185,21,.16) 0%,transparent 70%);pointer-events:none}
.sp-header-inner{position:relative;z-index:1;max-width:900px;margin:0 auto}
.sp-breadcrumb{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:24px;flex-wrap:wrap}
.sp-breadcrumb a,.sp-breadcrumb span{font-size:12.5px;color:rgba(10,26,58,.45);font-weight:500;text-decoration:none;transition:color var(--transition-fast)}
.sp-breadcrumb a:hover{color:var(--blue)}
.sp-bc-sep{color:rgba(10,26,58,.25);display:flex;align-items:center}
.sp-meta-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.sp-cat-pill{display:inline-flex;padding:5px 14px;background:linear-gradient(135deg,var(--blue) 0%,var(--blue-mid) 100%);color:#fff;font-size:11.5px;font-weight:700;border-radius:var(--r-full);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;box-shadow:0 4px 14px rgba(11,59,130,.22);transition:all var(--transition-fast)}
.sp-cat-pill:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(11,59,130,.3)}
.sp-meta-item{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:rgba(10,26,58,.55);font-weight:500}
.sp-meta-sep{color:rgba(10,26,58,.25);font-size:16px;font-weight:300}
.sp-title{font-size:clamp(26px,4.5vw,52px);font-weight:800;color:var(--navy);line-height:1.12;letter-spacing:-.03em;margin-bottom:26px}
.sp-author-row{display:flex;align-items:center;justify-content:center;gap:10px}
.sp-author-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--blue) 0%,var(--blue-mid) 100%);color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 3px var(--bg-alt),0 0 0 4px rgba(11,59,130,.16)}
.sp-author-byline{font-size:13.5px;color:rgba(10,26,58,.65);font-weight:500}
.sp-author-byline strong{color:var(--navy);font-weight:700}

/* Feature image: cinematic 21:9, rounded-2xl, floats above the hero band */
.sp-hero-img{position:relative;z-index:2;max-width:1200px;margin:-32px auto 64px;padding:0 24px}
.sp-hero-img-inner{position:relative;border-radius:var(--r-2xl);overflow:hidden;background:var(--bg-alt);box-shadow:0 24px 64px rgba(10,26,58,.18),0 4px 16px rgba(10,26,58,.08)}
.sp-hero-img-inner::before{content:'';display:block;padding-top:42.857%}
.sp-hero-img-inner img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:768px){.sp-hero-img{padding:0 16px;margin-top:-20px;margin-bottom:36px}.sp-hero-img-inner{border-radius:var(--r-lg)}.sp-hero-img-inner::before{padding-top:56.25%}}

/* No featured image → .sp-hero-img is skipped, so add the same breathing room directly on content-wrap */
.sp-header+.sp-content-wrap{padding-top:64px}
@media(max-width:768px){.sp-header+.sp-content-wrap{padding-top:36px}}

/* Content wrapper: golden-ratio 780px body + floating sidebar */
.sp-content-wrap{display:flex;align-items:flex-start;gap:48px;max-width:1120px;margin:0 auto;padding:0 32px 88px}
.sp-body{flex:1;max-width:780px;min-width:0}
.sp-sidebar{flex-shrink:0;width:256px;position:sticky;top:calc(var(--nav-h) + 24px)}
@media(max-width:1100px){.sp-sidebar{display:none}.sp-content-wrap{max-width:844px;justify-content:center}.sp-body{max-width:100%}}
@media(max-width:768px){.sp-content-wrap{padding:0 20px 56px}}

/* Body typography — luxury journal readability */
.sp-entry-content{font-size:17px;color:rgba(10,26,58,.85)}
.sp-entry-content p{line-height:1.85;margin-bottom:24px;color:rgba(10,26,58,.82)}
.sp-entry-content>p:first-of-type{font-size:18px;line-height:1.9;color:rgba(10,26,58,.9)}
.sp-entry-content h2{font-size:clamp(20px,2.5vw,27px);font-weight:800;color:var(--navy);margin:52px 0 18px;letter-spacing:-.025em;line-height:1.2;padding-top:4px}
.sp-entry-content h3{font-size:clamp(17px,2vw,21px);font-weight:700;color:var(--navy);margin:36px 0 12px;line-height:1.25}
.sp-entry-content h4{font-size:17px;font-weight:700;color:var(--text-secondary);margin:24px 0 10px}
/* Blockquote: glass tint, expressive border, no browser quotes */
.sp-entry-content blockquote{border-left:5px solid var(--blue);margin:36px 0;padding:18px 24px 18px 32px;background:rgba(11,59,130,.04);border-radius:0 var(--r-lg) var(--r-lg) 0;quotes:none}
.sp-entry-content blockquote::before,.sp-entry-content blockquote::after{content:none}
.sp-entry-content blockquote p{font-size:18px;font-style:italic;color:var(--navy);line-height:1.8;margin-bottom:0;font-weight:500;opacity:.9}
.sp-entry-content blockquote cite{display:block;margin-top:10px;font-size:12.5px;font-style:normal;color:var(--text-muted);font-weight:600}
.sp-entry-content ul,.sp-entry-content ol{list-style:none;margin:20px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.sp-entry-content ul li{padding-left:22px;position:relative;line-height:1.75;color:var(--text-secondary)}
.sp-entry-content ul li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--blue);border-radius:50%}
.sp-entry-content ol{counter-reset:sp-ol}
.sp-entry-content ol li{padding-left:30px;position:relative;line-height:1.75;color:var(--text-secondary);counter-increment:sp-ol}
.sp-entry-content ol li::before{content:counter(sp-ol);position:absolute;left:0;top:2px;width:18px;height:18px;background:var(--blue);color:#fff;font-size:10px;font-weight:800;border-radius:50%;display:flex;align-items:center;justify-content:center}
.sp-entry-content a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;transition:color var(--transition-fast)}
.sp-entry-content a:hover{color:var(--navy)}
/* Images: larger radius + Gaussian haze shadow */
.sp-entry-content img,.sp-entry-content figure{max-width:100%;border-radius:var(--r-xl);margin:32px 0;box-shadow:0 8px 32px rgba(10,26,58,.10),0 2px 8px rgba(10,26,58,.06)}
.sp-entry-content figcaption{text-align:center;font-size:13px;color:var(--text-muted);margin-top:8px;font-style:italic}
.sp-entry-content pre{background:var(--navy);color:#e2e8f0;padding:22px 24px;border-radius:var(--r-md);overflow-x:auto;margin:28px 0;line-height:1.7;font-size:14px}
.sp-entry-content :not(pre)>code{background:var(--bg-alt);border:1px solid var(--border);padding:2px 7px;border-radius:4px;font-size:.87em;color:var(--blue)}
.sp-entry-content hr{border:0;height:1px;background:var(--border);margin:40px 0}
.sp-entry-content table{width:100%;border-collapse:collapse;margin:28px 0;font-size:15px}
.sp-entry-content th{background:var(--navy);color:#fff;padding:12px 16px;text-align:left;font-weight:700;font-size:13px}
.sp-entry-content td{padding:11px 16px;border-bottom:1px solid var(--border);color:var(--text-secondary)}
.sp-entry-content tr:nth-child(even) td{background:var(--bg-alt)}

/* Tags row */
.sp-tags-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:36px;padding-top:28px;border-top:1px solid var(--border)}
.sp-tag-label{font-size:12.5px;font-weight:600;color:var(--text-muted);display:flex;align-items:center;gap:5px;flex-shrink:0}
.sp-tag{display:inline-flex;padding:5px 14px;background:var(--bg-alt);color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--r-full);font-size:12px;font-weight:600;transition:all var(--transition-fast);text-decoration:none}
.sp-tag:hover{background:var(--blue-pale);color:var(--blue);border-color:rgba(11,59,130,.20)}

/* Author card */
.sp-author-card{display:flex;gap:18px;align-items:center;padding:24px 26px;background:var(--bg-alt);border-radius:var(--r-xl);border:1.5px solid var(--border);margin-top:36px}
.sp-author-card-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--blue) 0%,var(--blue-mid) 100%);color:#fff;font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sp-author-card-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:4px}
.sp-author-card-name{font-size:18px;font-weight:800;color:var(--navy);line-height:1}
.sp-author-card-bio{font-size:13.5px;color:var(--text-muted);margin-top:6px;line-height:1.65}

/* Related posts */
.sp-related{margin-top:60px;padding-top:28px;border-top:1.5px solid var(--border)}
.sp-related-hd{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.sp-related-hd h3{font-size:20px;font-weight:800;color:var(--navy);margin:0}
.sp-related-hd svg{color:var(--blue)}
.sp-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:768px){.sp-related-grid{grid-template-columns:1fr}}

/* Sidebar cards */
.sp-sidebar-card{background:var(--bg-alt);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:20px;margin-bottom:18px}
.sp-sidebar-card-title{font-size:12px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;display:flex;align-items:center;gap:7px}
.sp-toc-nav{display:flex;flex-direction:column;gap:2px}
.sp-toc-nav a{font-size:13px;color:var(--text-muted);padding:6px 0 6px 14px;border-left:2px solid var(--border);display:block;transition:all var(--transition-fast);text-decoration:none;line-height:1.45}
.sp-toc-nav a:hover,.sp-toc-nav a.active{color:var(--blue);border-color:var(--blue)}
.sp-toc-nav a.toc-h3{padding-left:26px;font-size:12px}
.sp-cta-card{background:var(--navy);border-radius:var(--r-xl);padding:26px 22px;text-align:center;margin-bottom:18px}
.sp-cta-icon{color:var(--gold);margin-bottom:12px}
.sp-cta-card h4{font-size:15.5px;font-weight:800;color:#fff;margin-bottom:8px;line-height:1.3}
.sp-cta-card p{font-size:13px;color:rgba(255,255,255,.65);line-height:1.65;margin-bottom:16px}
@media(max-width:600px){.sp-header{padding-top:calc(var(--nav-h) + 44px);padding-left:20px;padding-right:20px}}

/* About hero bg image */
.ab-hero[style*="--ab-bg-img"]::before{content:'';position:absolute;inset:0;background:var(--ab-bg-img,none) center/cover no-repeat;opacity:.18;pointer-events:none;z-index:0;mix-blend-mode:luminosity}

/* ════════════════════════════════════════════════════════════════════════
   SECTION: ZERO-DOWN ENERGY SOLUTION (below Hero)
   2-col grid · overflowing visual (image + glowing SVG chart) · copy right
   ════════════════════════════════════════════════════════════════════════ */
.zde-section{position:relative;padding:130px 0}
.zde-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}

.zde-visual{position:relative;min-height:460px;display:flex;align-items:center;justify-content:center}
.zde-overflow-img{
  position:absolute;
  top:-90px;
  left:-120px;
  width:140%;
  max-width:640px;
  z-index:1;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 28px 56px rgba(11,59,130,.16));
}

.zde-chart-card{
  position:relative;
  z-index:2;
  width:100%;
  max-width:460px;
  margin-left:auto;
  background:linear-gradient(160deg,#0c1f48 0%,#0A1A3A 55%,#081530 100%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-xl);
  padding:30px 26px 22px;
  box-shadow:var(--shadow-xl);
}
.zde-chart-head{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.78);margin-bottom:18px}
.zde-chart-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);flex-shrink:0;animation:zdeDotPulse 2.2s ease-in-out infinite}

.zde-chart{display:block;width:100%;height:auto;overflow:visible}
.zde-grid-lines line{stroke:rgba(255,255,255,.07);stroke-width:1}
.zde-chart-fill{opacity:0;transition:opacity .8s var(--ease) .2s}
.zde-chart-line{
  stroke-dasharray:680;
  stroke-dashoffset:680;
  filter:drop-shadow(0 0 6px rgba(23,117,229,.85)) drop-shadow(0 0 14px rgba(245,185,21,.45));
  transition:stroke-dashoffset 1.8s var(--ease);
}
.zde-visual.animated .zde-chart-line{stroke-dashoffset:0;animation:zdeGlowPulse 2.6s ease-in-out 1.8s infinite}
.zde-visual.animated .zde-chart-fill{opacity:1}
.zde-chart-pulse{fill:var(--gold);opacity:0;transform-box:fill-box;transform-origin:center}
.zde-visual.animated .zde-chart-pulse{animation:zdePointPulse 2.2s ease-out 1.8s infinite}

.zde-chart-axis{display:flex;justify-content:space-between;margin-top:10px;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:.02em}
.zde-chart-caption{margin-top:14px;font-size:12px;color:rgba(255,255,255,.5);line-height:1.6}

.zde-copy .section-label{margin-bottom:18px}
.zde-perks{list-style:none;margin:26px 0 30px;display:flex;flex-direction:column;gap:14px}
.zde-perks li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--text-secondary);line-height:1.6}
.zde-perk-icon{width:34px;height:34px;min-width:34px;border-radius:var(--r-sm);background:var(--blue-pale);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}

@keyframes zdeDotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.3)}}
@keyframes zdeGlowPulse{
  0%,100%{filter:drop-shadow(0 0 6px rgba(23,117,229,.85)) drop-shadow(0 0 14px rgba(245,185,21,.45))}
  50%{filter:drop-shadow(0 0 11px rgba(23,117,229,1)) drop-shadow(0 0 22px rgba(245,185,21,.75))}
}
@keyframes zdePointPulse{
  0%{opacity:.9;transform:scale(1)}
  70%{opacity:0;transform:scale(2.6)}
  100%{opacity:0;transform:scale(2.6)}
}

@media (max-width:1100px){
  .zde-grid{gap:44px}
  .zde-overflow-img{left:-70px;width:120%}
}
@media (max-width:900px){
  .zde-section{padding:96px 0}
  .zde-grid{grid-template-columns:1fr;gap:56px}
  .zde-visual{min-height:auto;margin:0 auto}
  .zde-overflow-img{position:relative;top:auto;left:auto;width:78%;max-width:380px;margin:0 auto 28px;display:block}
  .zde-chart-card{max-width:520px;margin:0 auto}
}
@media (max-width:480px){
  .zde-section{padding:72px 0}
  .zde-overflow-img{width:88%}
  .zde-chart-card{padding:22px 18px 18px}
  .zde-perks li{font-size:14px}
}

/* ════════════════════════════════════════════════════════════════════════
   SECTION: HIGH-CONVERSION CTA (below About)
   ════════════════════════════════════════════════════════════════════════ */
.hcta-section{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--navy) 0%,var(--blue-dark) 55%,#0c2a5c 100%);padding:88px 0}
.hcta-pattern{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:26px 26px;opacity:.5;pointer-events:none}
.hcta-pattern::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 85% 50%,rgba(245,185,21,.16) 0%,transparent 65%)}
.hcta-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr auto;gap:48px;align-items:center}
.hcta-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(245,185,21,.14);border:1px solid rgba(245,185,21,.32);color:var(--gold);padding:7px 16px;border-radius:var(--r-full);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.hcta-copy h2{font-size:clamp(24px,3vw,38px);font-weight:800;color:#fff;line-height:1.22;margin-bottom:12px}
.hcta-copy p{font-size:16px;color:rgba(255,255,255,.68);line-height:1.75;max-width:560px}
.hcta-action{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hcta-btn{white-space:nowrap;box-shadow:0 14px 36px rgba(245,185,21,.3)}
.hcta-note{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:rgba(255,255,255,.55);font-weight:500}
.hcta-note svg{color:var(--gold)}

@media (max-width:900px){
  .hcta-inner{grid-template-columns:1fr;text-align:center;gap:28px}
  .hcta-action{align-items:center}
  .hcta-copy p{margin:0 auto}
}
@media (max-width:480px){
  .hcta-section{padding:64px 0}
  .hcta-btn{width:100%;justify-content:center}
}

/* ═══════════════════════════════════════════════════════════
   HERO FINANCE BANNER — Sacombank (replaces hero calculator)
   ═══════════════════════════════════════════════════════════ */
.fin-banner{
  position:relative;overflow:hidden;
  border:1px solid rgba(11,59,130,.08);
  animation:finCardBreathe 5s ease-in-out infinite;
  padding:34px 38px;
}
@keyframes finCardBreathe{
  0%,100%{box-shadow:var(--shadow-xl)}
  50%{box-shadow:0 12px 32px rgba(10,26,58,.14),0 32px 72px rgba(23,117,229,.14)}
}

.fin-banner-glow{
  position:absolute;top:-90px;right:-70px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,185,21,.35) 0%,transparent 70%);
  pointer-events:none;animation:finGlowPulse 4.5s ease-in-out infinite;
}
.fin-banner-glow--2{
  top:auto;right:auto;bottom:-100px;left:-80px;width:240px;height:240px;
  background:radial-gradient(circle,rgba(23,117,229,.28) 0%,transparent 70%);
  animation-duration:6s;animation-delay:1.2s;
}
@keyframes finGlowPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}

/* Corner ribbon — "Đối Tác Độc Quyền"
   A true ribbon STRIP (constant width band) sitting snug in the actual
   top-right corner — clip-path is a 4-point parallelogram whose points
   are close to the wrap's own top-right corner (260,0), so the band only
   travels a short distance near the corner instead of stretching all the
   way across the card into the headline below it (that was the previous
   bug: the band's anchor points were near the wrap's LEFT/BOTTOM, far
   from the real corner, so it cut a long diagonal straight through the
   content). Label is a CHILD of the wrap, centered on the band with
   margin verified against all three edges (top, right, and the band's
   own top/right end-caps) so the full phrase always renders. */
.fin-banner-ribbon-wrap{
  position:absolute;top:0;right:0;z-index:2;
  width:220px;height:220px;
  clip-path:polygon(120px 0px, 157px 0px, 220px 63px, 220px 100px);
  background:linear-gradient(135deg,var(--gold) 0%,#ffd875 100%);
  pointer-events:none;
  animation:finRibbonGlow 3s ease-in-out infinite;
}
@keyframes finRibbonGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}
@media (prefers-reduced-motion:reduce){ .fin-banner-ribbon-wrap{animation:none} }
.fin-banner-ribbon-label{
  position:absolute;top:35px;left:127px;z-index:3;
  width:105px;text-align:center;white-space:nowrap;
  transform:rotate(45deg);transform-origin:center;
  font-size:10px;font-weight:800;letter-spacing:0;text-transform:uppercase;color:var(--navy);
}

.fin-banner-badge{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;
  background:rgba(11,59,130,.07);border:1px solid rgba(11,59,130,.16);
  color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 14px;border-radius:var(--r-full);margin-bottom:12px;
}
.fin-banner-badge svg{color:var(--gold)}

.fin-banner-pct-row{position:relative;z-index:1;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.fin-banner-pct-lbl{font-size:13px;font-weight:600;color:var(--text-secondary)}
.fin-banner-pct-val{
  font-size:38px;font-weight:900;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(100deg,var(--navy) 0%,var(--blue) 30%,var(--gold) 55%,var(--blue) 80%,var(--navy) 100%);
  background-size:250% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:finShine 5s linear infinite;
}
@keyframes finShine{to{background-position:-250% center}}
.fin-banner-pct-sep{margin:0 2px;opacity:.6;font-weight:700}
.fin-banner-pct-sign{font-size:20px}

.fin-banner-headline{
  position:relative;z-index:1;font-size:18px;font-weight:800;color:var(--navy);line-height:1.3;letter-spacing:-.01em;
  margin:8px 0 10px;padding-bottom:12px;border-bottom:1px dashed var(--border);
}
.fin-banner-headline-divider{color:var(--gold)}

/* Partner strip — label + Sacombank logo (or wordmark fallback) */
.fin-banner-partner-strip{
  position:relative;z-index:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:10px;
}
.fin-banner-partner-lbl{font-size:11.5px;font-weight:600;color:var(--text-muted)}
.fin-banner-partner-logo-img{
  height:26px;max-width:150px;object-fit:contain;
  background:#fff;padding:5px 12px;border-radius:8px;
  border:1px solid rgba(200,206,212,.7);box-shadow:0 2px 10px rgba(10,26,58,.08);
}
.fin-banner-partner-wordmark{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:900;letter-spacing:.01em;color:var(--navy);
  padding:4px 12px 4px 6px;border-radius:8px;background:#fff;
  border:1px solid rgba(200,206,212,.7);box-shadow:0 2px 10px rgba(10,26,58,.08);
}
.fin-banner-partner-wordmark-icon{
  display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue) 0%,var(--navy) 100%);color:#fff;flex-shrink:0;
}

/* ── 3 floating feature cards — vay tín chấp / thẻ tín dụng / hoàn vốn ──
   Each card floats on its own orbit (translate+rotate+scale keyframes);
   depth is faked with scale + blur + shadow: card 2 sits "farther" (blurred,
   smaller), cards 1 & 3 sit "closer" (sharp, slightly larger). The outer
   element owns the entrance fade/stagger transition; the inner element owns
   the continuous float animation — kept on separate elements so the two
   transforms don't fight each other. */
.fin-banner-feats{
  position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);
  gap:12px 10px;margin:14px 4px 16px;padding:6px 2px;
}
.fin-banner-feat{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.hero-side.animated .fin-banner-feat{opacity:1;transform:translateY(0)}
.hero-side.animated .fin-banner-feat:nth-child(1){transition-delay:.15s}
.hero-side.animated .fin-banner-feat:nth-child(2){transition-delay:.28s}
.hero-side.animated .fin-banner-feat:nth-child(3){transition-delay:.41s}

.fin-banner-feat-inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;
  padding:13px 7px;border-radius:12px;background:#fff;border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(10,26,58,.10);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}
.fin-banner-feat:hover .fin-banner-feat-inner{transform:translateY(-4px);border-color:var(--blue-light);box-shadow:0 16px 32px rgba(11,59,130,.18)}

.fin-banner-feat-icon{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;
  background:rgba(11,59,130,.08);color:var(--blue);
}
.fin-banner-feat-val{font-size:12.5px;font-weight:800;color:var(--navy);line-height:1.2}
.fin-banner-feat-lbl{font-size:10px;color:var(--text-muted);font-weight:500;line-height:1.25}
.fin-banner-feat--gold .fin-banner-feat-icon{background:rgba(245,185,21,.16);color:#c08900}

.fin-banner-cta{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;background:linear-gradient(135deg,var(--blue) 0%,var(--navy) 100%);
  color:#fff;font-size:13.5px;font-weight:800;text-decoration:none;
  padding:12px 18px;border-radius:var(--r-md);box-shadow:0 8px 24px rgba(11,59,130,.28);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.fin-banner-cta:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(11,59,130,.36)}

.fin-banner-disclaimer{position:relative;z-index:1;margin:8px 0 0;font-size:10px;color:var(--text-muted);line-height:1.4;text-align:center}

@media (max-width:480px){
  .fin-banner-pct-val{font-size:27px}
  .fin-banner-headline{font-size:14.5px}
  .fin-banner-feats{grid-template-columns:1fr 1fr}
  .fin-banner-feat:last-child{grid-column:1/-1}
  .fin-banner-ribbon-wrap{width:190px;height:190px;clip-path:polygon(95px 0px, 125px 0px, 190px 65px, 190px 95px)}
  .fin-banner-ribbon-label{top:33px;left:101px;width:95px;font-size:9px}
}