/* ==========================================================================
   PRIME BUSINESS GROUP — Styles
   Design direction: "Quiet Authority" — editorial private-practice premium.
   Soft geometric sans pairing (Manrope display + Inter body), disciplined
   navy/cream/gold palette with burgundy reserved for CTAs, hairline surfaces
   instead of heavy glass, restrained grain texture, signature gold-tick
   label motif.
   Single stylesheet: design tokens (below) + component styles.
   ========================================================================== */

/* ==========================================================================
   0. DESIGN TOKENS
   ========================================================================== */
:root{
  /* --- Brand colors --- */
  --pbg-cream:        #F9F6F0;
  --pbg-cream-soft:    #F3EEE3;
  --pbg-cream-deep:    #EDE5D4;

  --pbg-navy:          #1A2A3A;
  --pbg-navy-2:        #16232F;
  --pbg-navy-light:    #24384C;
  --pbg-navy-glass:    rgba(26, 42, 58, 0.62);

  --pbg-burgundy:      #8B1A2B;
  --pbg-burgundy-light:#A8283B;
  --pbg-burgundy-deep: #650F1D;

  --pbg-gold:          #C9A84C;
  --pbg-gold-light:    #E4C97A;
  --pbg-gold-pale:     #F1E3B8;
  --pbg-gold-deep:     #9C7E32;

  --pbg-ink:           #201A12;
  --pbg-white:         #FFFFFF;

  /* --- Semantic --- */
  --color-bg:              var(--pbg-cream);
  --color-bg-alt:          var(--pbg-cream-soft);
  --color-surface:         var(--pbg-white);
  --color-surface-dark:    var(--pbg-navy);
  --color-text:            var(--pbg-navy);
  --color-text-soft:       #4E5C6B;
  --color-text-faint:      #8891A0;
  --color-text-invert:     var(--pbg-cream);
  --color-accent:          var(--pbg-burgundy);
  --color-accent-2:        var(--pbg-gold);
  --color-border:          rgba(26, 42, 58, 0.12);
  --color-border-gold:     rgba(201, 168, 76, 0.45);

  /* --- Editorial surfaces (replaces heavy glassmorphism) --- */
  --color-hairline:        rgba(26, 42, 58, 0.11);
  --color-hairline-invert: rgba(249, 246, 240, 0.14);
  --glass-light-bg:        rgba(255, 255, 255, 0.42);
  --glass-light-border:    rgba(255, 255, 255, 0.65);
  --glass-dark-bg:         rgba(26, 42, 58, 0.46);
  --glass-dark-border:     rgba(228, 201, 122, 0.28);
  --glass-blur:            18px;
  --glass-blur-strong:     28px;
  /* toned-down cursor sheen — a whisper, not a glass blob */
  --glass-highlight:       radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.14), transparent 42%);

  /* --- Typography: soft geometric sans display + clean sans body/UI ---
     (moved off Fraunces/serif to a warmer, more modern all-sans pairing) */
  --font-display: 'Manrope', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  --fs-h1: clamp(2.75rem, 5.4vw, 5.4rem);
  --fs-h2: clamp(2.1rem, 3.4vw, 3.25rem);
  --fs-h3: clamp(1.4rem, 1.9vw, 1.85rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --tracking-tight:  -0.02em;
  --tracking-tighter:-0.03em;
  --tracking-wide:    .04em;
  --tracking-widest:  .16em;

  /* --- Spacing scale --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --container-max: 1240px;

  /* --- Radius: softened slightly for a warmer, more modern feel --- */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;
  --radius-pill: 999px;

  /* --- Shadows: soft, long-throw, low-opacity — layered depth not glow --- */
  --shadow-s:  0 1px 2px rgba(20, 30, 42, 0.05);
  --shadow-m:  0 1px 2px rgba(20, 30, 42, 0.04), 0 18px 36px -18px rgba(20, 30, 42, 0.22);
  --shadow-l:  0 4px 8px rgba(20, 30, 42, 0.05), 0 32px 64px -24px rgba(20, 30, 42, 0.28);
  --shadow-gold: 0 10px 26px -8px rgba(156, 126, 50, 0.45);

  /* --- Motion --- */
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-premium: cubic-bezier(.19,1,.22,1);
  --dur-fast: 220ms;
  --dur-mid: 480ms;
  --dur-slow: 900ms;

  --z-header: 100;
  --z-overlay: 200;
  --z-chat: 300;
  --z-toast: 400;
}

/* ==========================================================================
   1. BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100vw;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; margin:0; color: var(--color-text); line-height:1.18; }
p{ margin:0; }

.container{ max-width: var(--container-max); margin:0 auto; padding: 0 24px; }
.section{ padding: var(--sp-9) 0; position: relative; }
.section--alt{ background: var(--color-bg-alt); }
@media (max-width: 720px){ .section{ padding: var(--sp-8) 0; } }

.h2{ font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--tracking-tight); line-height:1.08; }
.h2--invert{ color: var(--pbg-cream); }
.h3{ font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.01em; }
.lead{ font-size: var(--fs-lead); color: var(--color-text-soft); max-width: 640px; line-height:1.55; }
.lead--invert{ color: rgba(249,246,240,0.78); }

/* Signature detail: every eyebrow carries a short gold tick — one small
   repeated motif that threads the whole page together as one brand. */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-body); font-weight:600; letter-spacing: var(--tracking-widest); text-transform: uppercase;
  font-size: .72rem; color: var(--pbg-gold-deep); margin-bottom: var(--sp-4);
}
.eyebrow::before{ content:""; width:24px; height:1px; background: currentColor; opacity:.75; display:inline-block; flex-shrink:0; }
.eyebrow--invert{ color: var(--pbg-gold-light); }
.section-head{ margin-bottom: var(--sp-8); max-width: 760px; }
.section-head .h2{ margin-bottom: var(--sp-3); }

.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-body); font-size:.72rem; font-weight:700; letter-spacing: var(--tracking-widest); text-transform:uppercase;
  color: var(--pbg-gold-deep); margin-bottom: var(--sp-4); padding:0;
}
.tag::before{ content:""; width:24px; height:1px; background: currentColor; opacity:.8; display:inline-block; flex-shrink:0; }
.tag--gold{ background:none; border:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 30px; border-radius: var(--radius-s);
  font-family: var(--font-body); font-weight:600; font-size: 0.85rem; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  border: 1px solid transparent; transition: box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), filter var(--dur-fast);
  white-space: nowrap;
}
/* Hover feedback never touches transform/letter-spacing (causes button "jump") —
   only color/background/box-shadow/border shift, which never reflows layout. */
.btn:active{ filter: brightness(.94); }
.btn--sm{ padding: 11px 20px; font-size: 0.72rem; }
.btn--lg{ padding: 17px 34px; font-size: 0.88rem; }
.btn--block{ width:100%; }
.btn--gold{
  background: var(--pbg-gold);
  color: var(--pbg-navy-2); box-shadow: var(--shadow-gold);
  position: relative; overflow:hidden;
}
.btn--gold::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
.btn--gold:hover{ background: var(--pbg-gold-light); box-shadow: 0 14px 30px -8px rgba(156,126,50,.55); }
.btn--burgundy{ background: var(--pbg-burgundy); color: var(--pbg-cream); box-shadow: 0 14px 28px -10px rgba(139,26,43,0.45); }
.btn--burgundy:hover{ background: var(--pbg-burgundy-light); }
.btn--outline{ background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn--outline:hover{ border-color: var(--pbg-navy); background: rgba(26,42,58,.04); }
.btn--ghost{ background: transparent; color: inherit; border-color: rgba(255,255,255,0.35); }
.hero .btn--ghost{ color: var(--pbg-cream); }
.btn--ghost:hover{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); }
.btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none !important; filter:none !important; }

/* ---------- Editorial surfaces (formerly "glass") ----------
   Flat, hairline-bordered, softly shadowed. Blur/backdrop-filter is
   reserved only for the sticky header and the AI chat overlay, where
   it does real work (legibility over moving content underneath). */
.glass-surface{
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  overflow: hidden;
  isolation: isolate;
}
.glass-surface::before{
  content:"";
  position:absolute; inset:0;
  background: var(--glass-highlight);
  opacity:.85;
  pointer-events:none;
  transition: opacity var(--dur-mid);
  z-index:0;
}
.glass-surface > *{ position:relative; z-index:1; }
.glass-surface--dark{
  background: var(--pbg-navy-2);
  border-color: var(--color-hairline-invert);
  color: var(--pbg-cream);
}
.glass-surface--dark::before{
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(228,201,122,0.10), transparent 45%);
}

/* ---------- Shared noise/grain texture for dark sections ---------- */
.hero, .why, .footer, .ai-panel{ position:relative; }
.hero::after, .why::after, .footer::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode: overlay;
}
.why::after{ z-index:1; }

/* ==========================================================================
   2. HEADER
   ========================================================================== */
.header{
  position: fixed; top:0; left:0; right:0; z-index: var(--z-header);
  border-radius: 0; border-width: 0 0 1px 0; border-bottom: 1px solid transparent;
  background: rgba(249,246,240,0.7);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: none;
  transition: box-shadow var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.header.is-scrolled{ box-shadow: var(--shadow-s); background: rgba(249,246,240,0.9); border-bottom-color: var(--color-hairline); }
/* Grid (not space-between flex) keeps the logo and header__actions columns
   pinned to fixed tracks — switching languages only reflows text inside the
   middle nav column, it never shifts the logo or the lang-switch/cta/phone
   group left or right. */
.header__inner{ display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap: var(--sp-4); height: 84px; }
/* Explicit column assignment: when .nav is display:none on mobile it drops
   out of grid placement, and without this the auto-placement algorithm
   slides .header__actions into the vacated middle (1fr) track instead of
   the right-hand track — which pulls the burger button away from the
   right edge instead of keeping it flush against it. */
.logo{ grid-column: 1; display:flex; align-items:center; gap:10px; line-height:1; }
.header__inner > .nav{ grid-column: 2; }
.header__actions{ grid-column: 3; }
.logo__mark{ height:36px; width:auto; flex-shrink:0; }
.logo__text{ display:flex; flex-direction:column; }
.logo__prime{ font-family: var(--font-display); font-size: 1.3rem; font-weight:600; letter-spacing:.02em; color: var(--pbg-navy); }
.logo__rest{ font-family: var(--font-body); font-size: .6rem; font-weight:600; letter-spacing:.26em; color: var(--pbg-gold-deep); margin-top:4px; }
.logo--footer .logo__mark{ height:40px; }
.logo--footer .logo__prime{ color: var(--pbg-cream); }
.logo--footer .logo__rest{ color: var(--pbg-gold-light); }

/* Fixed slot width so switching languages (RU/EN/HY differ a lot in length)
   never shifts the logo or header actions — only the text inside reflows. */
.nav{ display:flex; justify-content:center; gap: var(--sp-6); font-weight:500; font-size:.88rem; }
.nav a{ position:relative; padding: 6px 0; white-space:nowrap; }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background: var(--pbg-gold-deep); transition: right var(--dur-mid) var(--ease-premium); }
.nav a:hover::after{ right:0; }

.header__actions{ display:flex; align-items:center; gap: var(--sp-4); }
.lang-switch{ display:flex; gap:2px; background: rgba(26,42,58,0.05); border-radius: var(--radius-pill); padding:4px; }
.lang-switch__btn{ border:none; background:transparent; padding:6px 10px; border-radius: var(--radius-pill); font-size:.72rem; font-weight:700; letter-spacing:.02em; color: var(--color-text-soft); transition: background var(--dur-fast), color var(--dur-fast); }
.lang-switch__btn.is-active{ background: var(--pbg-navy); color: var(--pbg-cream); }
/* Fixed (not min) width: the whole header__actions row must stay a constant
   width across languages, otherwise the lang-switch/phone shift sideways
   whenever the CTA's translated text is a different length. */
.header__cta{ width: 210px; justify-content:center; overflow:hidden; text-overflow:ellipsis; }
.header__phone{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:.86rem; white-space:nowrap; }
.header__phone i{ color: var(--pbg-gold-deep); }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.burger span{ width:22px; height:1.5px; background: var(--pbg-navy); transition: transform var(--dur-fast), opacity var(--dur-fast); }
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav{
  display:flex; flex-direction:column; gap: var(--sp-4);
  max-height:0; overflow:hidden; padding: 0 24px;
  background: rgba(249,246,240,0.98); backdrop-filter: blur(20px);
  transition: max-height var(--dur-mid) var(--ease-in-out), padding var(--dur-mid);
  border-top: 1px solid var(--color-border);
}
.mobile-nav.is-open{ max-height: 420px; padding: var(--sp-5) 24px; }
.mobile-nav a{ font-weight:500; font-size:1.05rem; }
.mobile-nav__phone{ color: var(--pbg-gold-deep); font-weight:700; }

@media (max-width: 980px){
  .nav, .header__phone, .header__cta{ display:none; }
  .burger{ display:flex; }
}
@media (max-width: 560px){
  .lang-switch__btn{ padding:6px 8px; font-size:.68rem; }
  .logo__mark{ height:30px; }
}
@media (max-width: 420px){
  .logo__rest{
    font-size: .3rem;
    font-weight: 600;
    letter-spacing: .1em;
    margin-top: 2px;
  }

  .logo{
    gap: 7px;
  }

  .container{
    padding: 0 16px;
  }
}

/* ---------- Scroll progress rail ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background: linear-gradient(90deg, var(--pbg-gold-deep), var(--pbg-gold-light));
  z-index: 101; transition: width 80ms linear;
}

/* ==========================================================================
   3. HERO
   ========================================================================== */
.hero{
  min-height: 100vh; display:flex; align-items:center;
  padding-top: 110px; padding-bottom: 60px;
  background: linear-gradient(180deg, var(--pbg-navy) 0%, var(--pbg-navy-2) 100%);
  color: var(--pbg-cream); overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__ararat{
  position:absolute; left:50%; bottom:-10%; width:140%; height:60%; transform: translateX(-50%);
  background:
    radial-gradient(ellipse 60% 100% at 30% 100%, rgba(201,168,76,0.14), transparent 60%),
    linear-gradient(135deg, transparent 46%, rgba(228,201,122,0.09) 47%, transparent 49%),
    linear-gradient(215deg, transparent 46%, rgba(228,201,122,0.09) 47%, transparent 49%);
  clip-path: polygon(0% 100%, 18% 55%, 30% 68%, 46% 20%, 62% 62%, 74% 48%, 100% 100%);
  opacity:.5;
}
.hero__inner{ position:relative; z-index:2; display:grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); align-items:center; }
@media (max-width: 980px){ .hero__inner{ grid-template-columns: 1fr; } }

.hero__title{ font-size: var(--fs-h1); font-weight:600; letter-spacing: var(--tracking-tight); line-height:1.03; color: var(--pbg-cream); margin-bottom: var(--sp-5); }
.hero__subtitle{ font-size: var(--fs-lead); color: rgba(249,246,240,0.72); max-width: 560px; margin-bottom: var(--sp-7); line-height:1.6; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap: var(--sp-4); margin-bottom: var(--sp-8); }

/* ---------- Trust panel — vertical ledger-style rows ----------
   Sits directly on the dark hero, so it overrides the light default
   .glass-surface card with a near-invisible panel: hairline gold border,
   no filled background — a list, not a floating card. */
.trust-panel{
  max-width: 420px; padding: var(--sp-2) var(--sp-5);
  background: rgba(249,246,240,0.025);
  border-color: rgba(228,201,122,0.18);
  box-shadow: none;
}
.trust-row{
  display:flex; align-items:center; gap: var(--sp-4);
  padding: 14px 2px;
  border-bottom: 1px dashed rgba(228,201,122,0.28);
}
.trust-row:last-child{ border-bottom:none; }
.trust-row__icon{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  border: 1px solid rgba(228,201,122,0.55);
  display:flex; align-items:center; justify-content:center;
  color: var(--pbg-gold-light); font-size:.88rem;
}
.trust-row__text{ font-weight:500; color: rgba(249,246,240,0.88); font-size:.92rem; line-height:1.3; }
.trust-row__text strong{ font-family: var(--font-display); font-weight:600; color: var(--pbg-gold-light); font-size:1.15em; }
.trust-row__flags{ display:inline-flex; gap:6px; margin-left:4px; font-size:1rem; vertical-align:-2px; }

/* ---------- Hero photo ---------- */
.hero__visual{ display:flex; justify-content:center; position:relative; z-index:2; }
.photo-stage{ position:relative; width: min(400px, 88vw); perspective: 1600px; }
.photo-stage__shadow{
  position:absolute; left:10%; right:10%; bottom:-5%; height:26px; border-radius:50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.45), transparent 70%);
  filter: blur(8px);
}
.photo-card{
  position:relative; border-radius: var(--radius-l); overflow:hidden;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset;
  transform-style: preserve-3d;
  transition: transform 120ms ease-out;
  will-change: transform;
}
.photo-card img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 3/4; }
.photo-card__shine{
  position:absolute; top:-60%; left:-60%; width:55%; height:220%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: rotate(20deg);
  animation: shineSweep 5.5s ease-in-out 1.8s infinite;
  pointer-events:none;
}
@keyframes shineSweep{
  0%{ transform: translateX(-40%) rotate(20deg); }
  40%,100%{ transform: translateX(340%) rotate(20deg); }
}
.photo-card__frame{
  position:absolute; inset:9px; border: 1px solid rgba(228,201,122,0.4); border-radius: calc(var(--radius-l) - 5px);
  pointer-events:none;
}

.float-chip{
  position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding: 13px 16px; border-radius: var(--radius-s); min-width:92px;
  background: rgba(22,35,47,0.62); border-color: rgba(228,201,122,0.26);
  animation: chipFloat 7s ease-in-out infinite;
  opacity:0;
}
.float-chip strong{ font-family: var(--font-display); font-weight:600; font-size:1.35rem; color: var(--pbg-gold-light); }
.float-chip i{ font-size:1rem; color: var(--pbg-gold-light); }
.float-chip span{ font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; color: rgba(249,246,240,0.78); font-weight:600; }
.chip--stat1{ top:4%; left:-12%; animation-delay: 1.8s; }
.chip--stat2{ bottom:20%; right:-12%; animation-delay: 2.3s; }
.chip--stat3{ bottom:-4%; left:10%; animation-delay: 2.8s; }
@keyframes chipFloat{
  0%{ opacity:0; transform: translateY(10px); }
  10%,90%{ opacity:1; }
  50%{ transform: translateY(-5px); }
  100%{ opacity:1; transform: translateY(0); }
}
@media (max-width: 980px){
  .photo-stage{ margin: 0 auto; }
  .float-chip{ display:none; }
}

.scroll-cue{ position:absolute; left:50%; bottom:22px; transform: translateX(-50%); z-index:2; }
.scroll-cue span{ display:block; width:22px; height:36px; border:1px solid rgba(249,246,240,0.35); border-radius: 14px; position:relative; }
.scroll-cue span::after{ content:""; position:absolute; top:6px; left:50%; width:3px; height:7px; background: var(--pbg-gold-light); border-radius:2px; transform: translateX(-50%); animation: scrollDot 1.8s ease-in-out infinite; }
@keyframes scrollDot{ 0%{ opacity:1; transform: translate(-50%,0); } 70%,100%{ opacity:0; transform: translate(-50%,14px); } }

/* ==========================================================================
   4. REVEAL ON SCROLL
   ========================================================================== */
.reveal{ opacity:0; transition: opacity .9s var(--ease-premium), transform .9s var(--ease-premium); }
.reveal[data-reveal="up"]{ transform: translateY(32px); }
.reveal[data-reveal="left"]{ transform: translateX(-32px); }
.reveal[data-reveal="right"]{ transform: translateX(32px); }
.reveal[data-reveal="passport"]{ transform: translateY(18px) scale(.97); }
.reveal.is-visible{ opacity:1; transform: none; }
.reveal[data-reveal-delay="1"]{ transition-delay: .1s; }
.reveal[data-reveal-delay="2"]{ transition-delay: .2s; }
.reveal[data-reveal-delay="3"]{ transition-delay: .3s; }
.reveal[data-reveal-delay="4"]{ transition-delay: .4s; }

/* ==========================================================================
   5. SERVICE CARDS (grid of 3) — editorial, numbered, no icon tiles
   ========================================================================== */
.cards-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); counter-reset: card-counter; }
@media (max-width: 980px){ .cards-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .cards-grid{ grid-template-columns: 1fr; } }

.service-card{
  position:relative; padding: var(--sp-7) var(--sp-6) var(--sp-6); counter-increment: card-counter;
  border-top: 1px solid transparent;
  transition: box-shadow var(--dur-fast) var(--ease-out), border-top-color var(--dur-fast) var(--ease-out);
}
.service-card::after{
  content: counter(card-counter, decimal-leading-zero);
  position:absolute; top:22px; right:26px;
  font-family: var(--font-display); font-weight:600; font-size:2.5rem; line-height:1;
  color: rgba(26,42,58,.08);
}
/* Instant, non-laggy hover feedback — no transform, no delay */
.service-card:hover{ box-shadow: var(--shadow-l); border-top-color: var(--pbg-gold); }
.service-card__icon{
  background:none; box-shadow:none; border-radius:0; width:auto; height:auto;
  color: var(--pbg-gold-deep); font-size:1.4rem; margin-bottom: var(--sp-5); display:inline-flex;
}
.service-card h3{ font-size:1.2rem; font-weight:600; margin-bottom: var(--sp-3); max-width: 80%; }
.service-card p{ color: var(--color-text-soft); font-size:.92rem; margin-bottom: var(--sp-5); min-height:56px; line-height:1.55; }
.card-link{ position:relative; padding-bottom:3px; font-weight:600; font-size:.82rem; letter-spacing:.02em; color: var(--pbg-navy); display:inline-flex; align-items:center; gap:6px; }
.card-link::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background: var(--pbg-gold-deep); transition: right var(--dur-mid) var(--ease-premium); }
.card-link:hover::after{ right:0; }
.card-link i{ color: var(--pbg-gold-deep); transition: color var(--dur-fast); }
.card-link:hover i{ color: var(--pbg-navy); }

/* ==========================================================================
   6. SERVICE DETAIL SECTIONS
   ========================================================================== */
.service-detail__head{ display:grid; grid-template-columns: 1.25fr .95fr; gap: var(--sp-7); align-items:center; margin-bottom: var(--sp-7); }
@media (max-width: 900px){ .service-detail__head{ grid-template-columns: 1fr; } }
.service-detail__head-text{ max-width: 620px; }
.service-detail__media{
  position:relative; border-radius: var(--radius-m); overflow:hidden;
  aspect-ratio: 4/3.1; box-shadow: var(--shadow-l);
}
/* Parallax images are scaled up slightly in JS-set inline transform so the
   scroll-driven translateY never reveals empty edges (scroll effect only —
   never triggered by :hover). */
.service-detail__media img{ width:100%; height:112%; object-fit:cover; will-change: transform; }
.service-detail__media::after{
  content:""; position:absolute; inset:0; border-radius: var(--radius-m);
  box-shadow: inset 0 0 0 1px rgba(228,201,122,0.45);
  pointer-events:none;
}
.service-detail__media-accent{
  position:absolute; width: 42%; aspect-ratio: 3/2; left:-8%; bottom:-10%;
  border-radius: var(--radius-s); overflow:hidden; box-shadow: var(--shadow-l), 0 0 0 4px var(--pbg-cream);
  display:none;
}
.service-detail__media-accent img{ width:100%; height:100%; object-fit:cover; }
@media (min-width: 640px){ .service-detail__media-accent{ display:block; } }

.service-detail__grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); margin-bottom: var(--sp-7); }
@media (max-width: 1080px){ .service-detail__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .service-detail__grid{ grid-template-columns: 1fr; } }

/* ---------- Panel (Кому подходит / Что входит / Этапы / Документы) ----------
   Flat editorial card: a squared icon badge, an uppercase tracked label with
   a hairline rule underneath, and a refined gold-square bullet system —
   replaces the old plain icon+bullet list look. */
.panel{
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-m);
  border-top: 2px solid transparent;
  transition: border-top-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.panel:hover{ border-top-color: var(--pbg-gold); box-shadow: var(--shadow-m); }
.panel h4{
  display:flex; align-items:center; gap:12px;
  font-family: var(--font-body); font-weight:700; font-size:.72rem; letter-spacing: var(--tracking-widest); text-transform:uppercase;
  color: var(--pbg-navy); margin:0 0 var(--sp-4); padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-hairline);
}
.panel h4 i{
  width:32px; height:32px; flex-shrink:0; border-radius: var(--radius-s);
  border: 1px solid var(--color-border-gold); background: var(--pbg-cream-soft);
  display:flex; align-items:center; justify-content:center;
  color: var(--pbg-gold-deep); font-size:.85rem;
}
.panel ul, .panel ol{ display:flex; flex-direction:column; gap:12px; padding-left:0; color: var(--color-text-soft); font-size:.9rem; line-height:1.5; list-style:none; }
.panel ul li{ position:relative; padding-left: 1.15em; }
.panel ul li::before{ content:""; position:absolute; left:0; top:.5em; width:6px; height:6px; background: var(--pbg-gold-deep); border-radius:1px; }
/* Steps list — thin numbered rings instead of default decimal markers */
.panel--steps ol{ counter-reset: pbg-step; }
.panel--steps ol li{ position:relative; padding-left: 38px; counter-increment: pbg-step; min-height:26px; display:flex; align-items:center; }
.panel--steps ol li::before{
  content: counter(pbg-step); position:absolute; left:0; top:50%; transform: translateY(-50%);
  width:26px; height:26px; border-radius:50%; border: 1px solid var(--color-border-gold);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:.78rem; color: var(--pbg-gold-deep);
  flex-shrink:0;
}
.panel p{ color: var(--color-text-soft); font-size:.9rem; line-height:1.55; }
.panel .hint{ margin-top: var(--sp-3); font-size:.82rem; color: var(--pbg-burgundy); font-weight:600; }
.service-detail__cta{ display:flex; flex-wrap:wrap; gap: var(--sp-3); }
.service-detail__cta .btn--ghost{ background: transparent; border-color: var(--color-border); color: var(--color-text); }
.service-detail__cta .btn--ghost:hover{ background: rgba(26,42,58,0.05); border-color: var(--pbg-navy); }

/* ==========================================================================
   7. WHY ARMENIA
   ========================================================================== */
.why{ overflow:hidden; }
.why__bg{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(180deg, rgba(22,35,47,0.95) 0%, rgba(22,35,47,0.9) 40%, rgba(26,42,58,0.96) 100%),
    var(--why-bg-image, none);
  background-size: cover; background-position: center;
}
.why-grid{ position:relative; z-index:2; display:grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-5); }
@media (max-width: 980px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .why-grid{ grid-template-columns: 1fr; } }
.why-card{ padding: var(--sp-7) var(--sp-5) var(--sp-6); text-align:left; transition: border-top-color var(--dur-fast), background var(--dur-fast); border-top:1px solid transparent; }
.why-card:hover{ border-top-color: var(--pbg-gold); background: rgba(249,246,240,0.03); }
.why-card i{ font-size:1.3rem; color: var(--pbg-gold-light); margin-bottom: var(--sp-4); display:block; }
.why-card h4{ color: var(--pbg-cream); margin-bottom: var(--sp-2); font-size:1.05rem; font-weight:600; }
.why-card p{ color: rgba(249,246,240,0.68); font-size:.88rem; line-height:1.55; }

/* ==========================================================================
   8. PATHS
   ========================================================================== */
.paths-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); }
@media (max-width: 820px){ .paths-grid{ grid-template-columns: 1fr; } }
.path-card{
  padding: var(--sp-7) var(--sp-6) var(--sp-6); text-align:left; border-top: 1px solid transparent;
  transition: box-shadow var(--dur-fast) var(--ease-out), border-top-color var(--dur-fast) var(--ease-out);
}
.path-card i{ font-size:1.3rem; color: var(--pbg-gold-deep); margin-bottom: var(--sp-4); display:block; }
.path-card h4{ margin-bottom: var(--sp-2); font-size:1.08rem; font-weight:600; }
.path-card p{ color: var(--color-text-soft); font-size:.9rem; line-height:1.55; }
.path-card:hover{ box-shadow: var(--shadow-l); border-top-color: var(--pbg-gold); }
.path-card.is-active{ box-shadow: 0 0 0 1px var(--pbg-gold), var(--shadow-l); border-top-color: var(--pbg-gold); }

/* ==========================================================================
   9. PROCESS — thin serif numerals with a gold tick, no filled circles
   ========================================================================== */
.process-track{ position:relative; display:grid; grid-template-columns: repeat(5,1fr); gap: var(--sp-5); }
@media (max-width: 900px){ .process-track{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .process-track{ grid-template-columns: 1fr; } }
.process-step{ position:relative; text-align:left; }
.process-step__num{
  width:auto; height:auto; background:none; box-shadow:none; border-radius:0;
  display:block; margin-bottom: var(--sp-4);
  font-family: var(--font-display); font-weight:600; font-size:2.6rem; line-height:1;
  color: var(--pbg-navy);
}
.process-step__num::after{ content:""; display:block; width:26px; height:2px; background: var(--pbg-gold); margin-top:14px; }
.process-step h4{ font-size:1.02rem; font-weight:600; margin-bottom: var(--sp-2); }
.process-step p{ color: var(--color-text-soft); font-size:.88rem; line-height:1.55; }

/* ==========================================================================
   10. ABOUT
   ========================================================================== */
.about-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-8); align-items:center; }
@media (max-width: 900px){ .about-grid{ grid-template-columns: 1fr; } }
.about-stats{ display:flex; gap: var(--sp-8); margin: var(--sp-7) 0; flex-wrap:wrap; }
.about-stat strong{ font-family: var(--font-display); font-weight:600; font-size:2.4rem; color: var(--pbg-navy); }
.about-stat span{ font-family: var(--font-display); font-weight:600; font-size:2.4rem; color: var(--pbg-navy); }
.about-stat p{ color: var(--color-text-soft); font-size:.82rem; margin-top:6px; }
.about-address{ display:flex; align-items:center; gap:8px; color: var(--color-text-soft); font-weight:600; font-size:.92rem; }
.about-address i{ color: var(--pbg-gold-deep); }

.about-media{ position:relative; border-radius: var(--radius-m); overflow:hidden; box-shadow: var(--shadow-l); aspect-ratio: 3/4; }
.about-media img{ width:100%; height:112%; object-fit:cover; will-change: transform; }

/* ==========================================================================
   10b. TESTIMONIALS CAROUSEL
   ========================================================================== */
.testi-carousel{ position:relative; }
.testi-track{
  display:flex; gap: var(--sp-5); overflow-x:auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-2); margin: 0 -2px; scrollbar-width:none;
}
.testi-track::-webkit-scrollbar{ display:none; }
.testi-card{
  flex: 0 0 calc(33.333% - 22px); scroll-snap-align:start;
  background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-m);
  padding: var(--sp-6) var(--sp-5) var(--sp-5); display:flex; flex-direction:column;
  border-top: 2px solid transparent; transition: border-top-color var(--dur-fast), box-shadow var(--dur-fast);
}
.testi-card:hover{ border-top-color: var(--pbg-gold); box-shadow: var(--shadow-m); }
.testi-card__mark{ color: var(--color-border-gold); font-size:1.3rem; margin-bottom: var(--sp-4); }
.testi-card__text{ color: var(--color-text-soft); font-size:.92rem; line-height:1.6; flex:1; margin-bottom: var(--sp-5); }
.testi-card__author{ display:flex; flex-direction:column; gap:2px; padding-top: var(--sp-4); border-top: 1px solid var(--color-hairline); }
.testi-card__name{ font-weight:700; font-size:.92rem; color: var(--pbg-navy); }
.testi-card__role{ font-size:.76rem; letter-spacing:.03em; text-transform:uppercase; color: var(--pbg-gold-deep); font-weight:600; }
@media (max-width: 980px){ .testi-card{ flex-basis: calc(50% - 16px); } }
@media (max-width: 640px){ .testi-card{ flex-basis: 88%; } }

.testi-controls{ display:flex; align-items:center; justify-content:center; gap: var(--sp-5); margin-top: var(--sp-6); }
.testi-arrow{
  width:44px; height:44px; border-radius:50%; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--pbg-navy); display:flex; align-items:center; justify-content:center;
  font-size:.85rem; flex-shrink:0; transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.testi-arrow:hover{ border-color: var(--pbg-gold); background: var(--pbg-cream-soft); box-shadow: var(--shadow-s); }
.testi-dots{ display:flex; gap:8px; }
.testi-dots button{
  width:7px; height:7px; border-radius:50%; border:none; padding:0;
  background: var(--color-border-gold); opacity:.5; transition: opacity var(--dur-fast), background var(--dur-fast), width var(--dur-fast);
}
.testi-dots button.is-active{ opacity:1; background: var(--pbg-gold-deep); width:20px; border-radius: var(--radius-pill); }

/* ==========================================================================
   11. FAQ ACCORDION
   ========================================================================== */
.accordion{ padding: var(--sp-2); }
.accordion__item{ border-left: 2px solid transparent; transition: border-color var(--dur-fast); }
.accordion__item + .accordion__item{ border-top: 1px solid var(--color-border); }
.accordion__item:has(.accordion__trigger[aria-expanded="true"]){ border-left-color: var(--pbg-gold); }
.accordion__trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4);
  background:none; border:none; text-align:left; padding: var(--sp-5); font-family: var(--font-body);
  font-weight:500; font-size:1rem; color: var(--color-text); transition: color var(--dur-fast);
}
.accordion__trigger:hover{ color: var(--pbg-gold-deep); }
.accordion__trigger i{ color: var(--pbg-gold-deep); transition: transform var(--dur-fast) var(--ease-premium); flex-shrink:0; font-size:.85rem; }
.accordion__trigger[aria-expanded="true"] i{ transform: rotate(180deg); }
.accordion__panel{ max-height:0; overflow:hidden; transition: max-height var(--dur-mid) var(--ease-in-out); }
.accordion__panel p{ padding: 0 var(--sp-5) var(--sp-5); color: var(--color-text-soft); font-size:.94rem; line-height:1.6; }

/* ==========================================================================
   12. LEAD FORM
   ========================================================================== */
.lead-section{ padding-bottom: var(--sp-9); }
.lead-card{ display:grid; grid-template-columns: .95fr 1.05fr; gap: var(--sp-8); padding: var(--sp-8); }
@media (max-width: 900px){ .lead-card{ grid-template-columns: 1fr; padding: var(--sp-6); } }

.lead-card__text{
  position:relative; border-radius: var(--radius-s); padding: var(--sp-6);
  background-image: linear-gradient(160deg, rgba(22,35,47,0.9), rgba(22,35,47,0.76)), var(--lead-bg-image, none);
  background-size: cover; background-position: center right;
}
.lead-points{ display:flex; flex-direction:column; gap: var(--sp-3); margin-top: var(--sp-6); }
.lead-points li{ display:flex; align-items:center; gap:10px; color: rgba(249,246,240,0.82); font-size:.92rem; }
.lead-points i{ color: var(--pbg-gold-light); font-size:.8rem; }

.lead-form{ display:flex; flex-direction:column; gap: var(--sp-4); }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:.78rem; font-weight:600; letter-spacing:.03em; color: rgba(249,246,240,0.75); }
.field input, .field textarea{
  padding: 13px 14px; border-radius: var(--radius-s); border: 1px solid rgba(249,246,240,0.22);
  background: rgba(249,246,240,0.06); color: var(--pbg-cream); font-family: var(--font-body); font-size:.95rem;
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.field input::placeholder, .field textarea::placeholder{ color: rgba(249,246,240,0.38); }
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--pbg-gold-light); background: rgba(249,246,240,0.1); box-shadow: 0 0 0 3px rgba(228,201,122,0.14); }
.field-error{ display:none; font-size:.78rem; color: #ff9d9d; }
.field.has-error input{ border-color:#ff6b6b; }
.field.has-error .field-error{ display:block; }
.form-status{ font-size:.86rem; min-height: 1.2em; color: var(--pbg-gold-light); }
.form-status.is-error{ color:#ff9d9d; }

/* ---------- Service radio chips (replaces the native <select>) ---------- */
.radio-group{ display:flex; flex-wrap:wrap; gap:10px; }
.radio-chip{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding: 10px 16px; border-radius: var(--radius-pill);
  border: 1px solid rgba(249,246,240,0.22); background: rgba(249,246,240,0.05);
  color: rgba(249,246,240,0.85); font-family: var(--font-body); font-size:.85rem; font-weight:500;
  cursor:pointer; user-select:none;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.radio-chip input{ position:absolute; opacity:0; width:0; height:0; }
.radio-chip:hover{ border-color: rgba(249,246,240,0.4); }
.radio-chip:has(input:checked){ background: var(--pbg-gold); border-color: var(--pbg-gold); color: var(--pbg-navy-2); font-weight:600; }
.radio-chip:has(input:focus-visible){ outline: 2px solid var(--pbg-gold-light); outline-offset: 2px; }

/* ---------- Custom checkbox ---------- */
.consent{ display:flex; align-items:flex-start; gap:10px; font-size:.8rem; color: rgba(249,246,240,0.7); cursor:pointer; user-select:none; }
.consent input{ position:absolute; opacity:0; width:0; height:0; }
.consent__box{
  flex-shrink:0; width:19px; height:19px; margin-top:1px; border-radius: var(--radius-s);
  border: 1.5px solid rgba(249,246,240,0.35); background: rgba(249,246,240,0.05);
  display:flex; align-items:center; justify-content:center;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.consent__box i{ font-size:.65rem; color: var(--pbg-navy-2); opacity:0; transform: scale(.5); transition: opacity var(--dur-fast), transform var(--dur-fast); }
.consent input:checked ~ .consent__box{ background: var(--pbg-gold-light); border-color: var(--pbg-gold-light); }
.consent input:checked ~ .consent__box i{ opacity:1; transform: scale(1); }
.consent input:focus-visible ~ .consent__box{ outline: 2px solid var(--pbg-gold-light); outline-offset: 2px; }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.footer{ background: var(--pbg-navy-2); color: rgba(249,246,240,0.72); padding-top: var(--sp-8); overflow:hidden; }
.footer__inner{ position:relative; z-index:2; display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-7); padding-bottom: var(--sp-7); border-bottom: 1px solid rgba(249,246,240,0.1); }
@media (max-width: 720px){ .footer__inner{ grid-template-columns: 1fr; } }
.footer__brand p{ margin-top: var(--sp-3); font-size:.9rem; }
.footer__address{ display:flex; align-items:center; gap:8px; margin-top: var(--sp-4); font-size:.85rem; }
.footer__col h5{ color: var(--pbg-cream); font-family: var(--font-body); font-weight:600; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom: var(--sp-4); }
.footer__col a{ display:flex; align-items:center; gap:8px; margin-bottom: var(--sp-3); font-size:.9rem; transition: color var(--dur-fast); }
.footer__col a:hover{ color: var(--pbg-gold-light); }
.footer__social{ display:flex; gap: var(--sp-3); }
.footer__social a{ width:38px; height:38px; border-radius:50%; border: 1px solid rgba(249,246,240,0.18); background: transparent; display:flex; align-items:center; justify-content:center; font-size:1rem; transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); }
.footer__social a:hover{ background: var(--pbg-gold); border-color: var(--pbg-gold); color: var(--pbg-navy); box-shadow: 0 8px 18px -6px rgba(156,126,50,.5); }
.footer__bottom{ position:relative; z-index:2; padding: var(--sp-5) 0; text-align:center; font-size:.8rem; color: rgba(249,246,240,0.45); }
.footer__bottom-inner{ display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4); flex-wrap:wrap; text-align:left; }
.footer__credit{ display:flex; align-items:center; gap: 6px; }
.footer__credit a{ color: rgba(249,246,240,0.45); text-decoration: underline; text-underline-offset: 2px; transition: color var(--dur-fast); }
.footer__credit a:hover{ color: var(--pbg-gold-light); }
@media (max-width: 600px){ .footer__bottom-inner{ justify-content:center; text-align:center; } }

/* ==========================================================================
   14. AI CONSULTANT WIDGET — the one place besides the header that keeps
   real blur, since it's a floating overlay above moving page content.
   ========================================================================== */
.ai-fab{
  position:fixed; right: 24px; bottom: 24px; z-index: var(--z-chat);
  width:58px; height:58px; border-radius:50%; border:none;
  background: var(--pbg-burgundy);
  color: var(--pbg-cream); font-size:1.3rem; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 30px -10px rgba(139,26,43,0.5);
  transition: box-shadow var(--dur-fast), background var(--dur-fast);
}
.ai-fab:hover{ background: var(--pbg-burgundy-light); box-shadow: 0 18px 38px -10px rgba(139,26,43,0.62); }
.ai-fab__pulse{ position:absolute; inset:-6px; border-radius:50%; border: 1px solid rgba(139,26,43,0.5); animation: fabPulse 2.6s ease-out infinite; }
@keyframes fabPulse{ 0%{ transform: scale(.9); opacity:.8; } 100%{ transform: scale(1.35); opacity:0; } }

.ai-panel{
  position:fixed; right:24px; bottom:96px; z-index: var(--z-chat);
  width: min(400px, calc(100vw - 32px)); max-height: min(620px, 76vh);
  display:flex; flex-direction:column;
  background: rgba(22,35,47,0.88); border: 1px solid rgba(228,201,122,0.16); border-radius: var(--radius-m);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--shadow-l);
  transform: translateY(20px) scale(.97); opacity:0; pointer-events:none;
  transition: transform var(--dur-mid) var(--ease-premium), opacity var(--dur-mid);
  color: var(--pbg-cream);
}
.ai-panel.is-open{ transform: translateY(0) scale(1); opacity:1; pointer-events:auto; }
.ai-panel__head{ display:flex; align-items:flex-start; justify-content:space-between; padding: var(--sp-5); border-bottom: 1px solid rgba(249,246,240,0.1); }
.ai-panel__head-brand{ display:flex; align-items:center; gap:10px; }
.ai-panel__head-brand img{ width:30px; height:30px; }
.ai-panel__head strong{ font-family: var(--font-body); font-weight:600; font-size:.95rem; }
.ai-panel__head p{ font-size:.76rem; color: rgba(249,246,240,0.6); margin-top:2px; }
.ai-panel__close{ background:none; border:none; color: rgba(249,246,240,0.65); font-size:1.05rem; }
.ai-panel__body{ flex:1; overflow-y:auto; padding: var(--sp-5); display:flex; flex-direction:column; gap: var(--sp-3); }
.ai-panel__foot{ padding: var(--sp-3) var(--sp-5) var(--sp-4); border-top: 1px solid rgba(249,246,240,0.1); display:flex; flex-direction:column; gap: var(--sp-3); }

.ai-msg{ max-width: 88%; padding: 10px 14px; border-radius: var(--radius-s); font-size:.87rem; line-height:1.5; white-space:pre-wrap; }
.ai-msg--bot{ align-self:flex-start; background: rgba(249,246,240,0.08); border-bottom-left-radius:2px; }
.ai-msg--user{ align-self:flex-end; background: var(--pbg-gold); color: var(--pbg-navy-2); font-weight:600; border-bottom-right-radius:2px; }
.ai-msg--typing{ align-self:flex-start; display:flex; gap:4px; align-items:center; padding: 12px 16px; }
.ai-msg--typing span{ width:5px; height:5px; border-radius:50%; background: rgba(249,246,240,0.55); animation: typingDot 1.2s ease-in-out infinite; }
.ai-msg--typing span:nth-child(2){ animation-delay:.15s; }
.ai-msg--typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typingDot{ 0%,60%,100%{ opacity:.3; transform: translateY(0); } 30%{ opacity:1; transform: translateY(-3px); } }

.ai-options{ display:flex; flex-wrap:wrap; gap:8px; }
.ai-option{
  border: 1px solid rgba(249,246,240,0.25); background: transparent; color: var(--pbg-cream);
  padding: 8px 14px; border-radius: var(--radius-pill); font-size:.8rem; font-weight:500;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.ai-option:hover{ background: rgba(228,201,122,0.14); border-color: var(--pbg-gold-light); }

.ai-input-row{ display:flex; gap:8px; }
.ai-input-row input{
  flex:1; padding: 11px 14px; border-radius: var(--radius-pill);
  border: 1px solid rgba(249,246,240,0.22); background: rgba(249,246,240,0.06);
  color: var(--pbg-cream); font-family: var(--font-body); font-size:.9rem;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.ai-input-row input::placeholder{ color: rgba(249,246,240,0.38); }
.ai-input-row input:focus{ outline:none; border-color: var(--pbg-gold-light); background: rgba(249,246,240,0.1); }
.ai-input-row button{
  width:42px; height:42px; border-radius:50%; border:none; flex-shrink:0;
  background: var(--pbg-gold);
  color: var(--pbg-navy-2); display:flex; align-items:center; justify-content:center; font-size:.92rem;
  transition: background var(--dur-fast), box-shadow var(--dur-fast);
}
.ai-input-row button:hover{ background: var(--pbg-gold-light); box-shadow: 0 6px 16px -6px rgba(156,126,50,.5); }
.ai-input-row button:disabled{ opacity:.5; }

/* ==========================================================================
   15. PRELOADER
   ========================================================================== */
.pbg-loader{
  position:fixed; inset:0; z-index:1000; background: var(--pbg-navy);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s var(--ease-out), visibility .6s;
}
.pbg-loader__mark{ width:60px; height:60px; animation: loaderPulse 1.2s ease-in-out infinite; }
@keyframes loaderPulse{ 0%,100%{ opacity:.4; transform: scale(.94); } 50%{ opacity:1; transform: scale(1); } }
.pbg-loader.is-hidden{ opacity:0; visibility:hidden; }

/* ==========================================================================
   16. MISC
   ========================================================================== */
::selection{ background: var(--pbg-gold); color: var(--pbg-navy-2); }
:focus-visible{ outline: 2px solid var(--pbg-gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}