/* =========================
styles.css (v5) — FULL
========================= */

:root{
  --bg:#F5F5F7;
  --surface:#FFFFFF;
  --surface2: rgba(255,255,255,.86);
  --stroke: rgba(0,0,0,.10);
  --stroke2: rgba(0,0,0,.07);

  --text:#1d1d1f;
  --muted: rgba(29,29,31,.70);
  --muted2: rgba(29,29,31,.56);

  --a:#0071e3;
  --b:#1e3a8a;
  --sand:#b08d57;

  --shadow: 0 18px 46px rgba(0,0,0,.08);
  --shadow2: 0 10px 26px rgba(0,0,0,.06);

  --radius: 18px;
  --radius2: 22px;

  --wrap: min(1180px, calc(100% - 40px));
  --ease: cubic-bezier(.2,.9,.2,1);

  --topbarH: 72px;

  --mx: 50%;
  --my: 50%;
  --hx: 50%;
  --hy: 30%;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display","SF Pro Text","Segoe UI", Inter, Roboto, Arial, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
.wrap{width:var(--wrap);margin:0 auto}
section[id], footer[id], main [id]{ scroll-margin-top: calc(var(--topbarH) + 18px); }
body.no-scroll{ overflow:hidden; }

:focus-visible{ outline:none; box-shadow: 0 0 0 4px rgba(0,113,227,.15); border-radius: 12px; }

/* RTL */
html[dir="rtl"] body{ direction: rtl; }
html[dir="rtl"] .nav{ direction: rtl; }
html[dir="rtl"] .mnav{ direction: rtl; }
html[dir="rtl"] .hero__grid{ direction: ltr; }
html[dir="rtl"] .hero__left,
html[dir="rtl"] .section__head,
html[dir="rtl"] .card,
html[dir="rtl"] .listCard,
html[dir="rtl"] .pCard,
html[dir="rtl"] .post,
html[dir="rtl"] .contact__left,
html[dir="rtl"] .form{ text-align: right; }
html[dir="rtl"] .qrow{ direction: rtl; }
html[dir="rtl"] .bullets{ padding-right: 18px; padding-left: 0; }
html[dir="rtl"] .footer__legal{ text-align: left; }

/* =========================================================
   GLOBAL BACKGROUND
   ========================================================= */
.global-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  transform: translateZ(0);
}
.global-bg__base{
  position:absolute; inset:0;
  background: linear-gradient(180deg, #ffffff 0%, #F5F5F7 72%, #F5F5F7 100%);
}
.global-bg__spot{
  position:absolute; inset:-2px;
  background:
    radial-gradient(1200px 800px at 18% 10%, rgba(0,113,227,.10), transparent 58%),
    radial-gradient(900px 700px at 85% 18%, rgba(176,141,87,.08), transparent 60%),
    radial-gradient(1100px 900px at 55% 95%, rgba(30,58,138,.06), transparent 62%),
    radial-gradient(900px 700px at var(--mx) var(--my), rgba(0,113,227,.05), transparent 62%);
  animation: bgFloat 16s var(--ease) infinite;
}
@keyframes bgFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-8px,0) scale(1.01)}
}
.global-bg__grain{
  position:absolute; inset:0;
  opacity:.08;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.global-bg__vignette{
  position:absolute; inset:-2px;
  background: radial-gradient(1200px 900px at 50% 16%, rgba(255,255,255,0) 0%, rgba(245,245,247,.55) 64%, rgba(245,245,247,1) 100%);
}

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 300;
  display:none;
  width: min(560px, calc(100% - 22px));
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  color: var(--text);
}
.toast.is-on{display:block}
.toast b{font-weight:800}
.toast__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.toast__msg{flex:1;min-width:0;}
.toast__btn{
  flex:0 0 auto;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(0,113,227,.22);
  background: rgba(0,113,227,.08);
  box-shadow: var(--shadow2);
  text-decoration:none;
  white-space:nowrap;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.toast__btn:hover{
  background: rgba(0,113,227,.12);
  transform: translateY(-1px);
}

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:80;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(16px);
  border-bottom:1px solid var(--stroke2);
}
.topbar__progress{height:2px;width:100%;background: rgba(0,0,0,.06);}
.topbar__progress span{
  display:block;height:100%;width:0%;
  background: linear-gradient(90deg, rgba(0,113,227,.85), rgba(30,58,138,.65), rgba(176,141,87,.55));
  transform-origin:left center;
}
.topbar__inner{
  height:var(--topbarH);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  min-width:0;
}

.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand__mark{
  width:40px;height:40px;border-radius:14px;
  border:1px solid var(--stroke2);
  background: var(--surface);
  box-shadow: var(--shadow2);
  display:grid;place-items:center;
  flex: 0 0 auto;
}
.brand__mono{font-weight:800;letter-spacing:.6px}
.brand__text{
  color: var(--muted);
  font-weight:560;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand__text b{color:var(--text)}

.nav{display:flex;align-items:center;gap:6px;min-width:0}
.nav__link{
  padding:10px 12px;border-radius:999px;
  color:var(--muted);
  border:1px solid transparent;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.nav__link:hover{
  transform:translateY(-1px);
  background: rgba(0,0,0,.035);
  border-color: var(--stroke2);
  color: var(--text);
}
.nav__link.is-active{
  background: rgba(0,113,227,.08);
  border-color: rgba(0,113,227,.18);
  color: var(--text);
}

.topbar__actions{display:flex;align-items:center;gap:10px;flex: 0 0 auto}

/* Language */
.lang{position:relative}
.lang__btn{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  border:1px solid var(--stroke2);
  background: var(--surface);
  cursor:pointer;
  box-shadow: var(--shadow2);
}
.lang__menu{
  position:absolute; inset-inline-end:0;
  top:calc(100% + 8px);
  width:120px; padding:8px;
  border-radius:16px;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  display:none;
}
.lang.open .lang__menu{display:block}
.lang__menu button{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  text-align:start;
  color: var(--text);
}
.lang__menu button:hover{background: rgba(0,0,0,.04);border-color: var(--stroke2);}

/* CTA */
.nav__cta{
  padding:10px 14px;border-radius:999px;
  border:1px solid rgba(0,113,227,.20);
  background: rgba(0,113,227,.08);
  box-shadow: var(--shadow2);
  white-space: nowrap;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.nav__cta:hover{transform:translateY(-1px); background: rgba(0,113,227,.10);}

/* Burger */
.burger{
  display:none;
  width:44px;height:44px;border-radius:14px;
  border:1px solid var(--stroke2);
  background: var(--surface);
  cursor:pointer;
  box-shadow: var(--shadow2);
}
.burger span{
  display:block;
  width:18px;height:2px;
  background: rgba(29,29,31,.92);
  margin:5px auto;
  border-radius:3px;
}

/* Mobile menu */
.mnav{
  display:none;
  position: fixed;
  inset: calc(var(--topbarH) + 10px) 10px auto 10px;
  z-index: 120;
  border-radius: 18px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  padding: 12px;
}
.mnav a{
  display:block;
  padding: 12px 12px;
  border-radius: 14px;
  color: rgba(29,29,31,.86);
  border: 1px solid transparent;
}
.mnav a:hover{
  background: rgba(0,0,0,.04);
  border-color: var(--stroke2);
}
.mnav__cta{
  margin-top: 8px;
  background: rgba(0,113,227,.08);
  border-color: rgba(0,113,227,.18);
  font-weight: 800;
}
.mnavBackdrop{
  display:none;
  position: fixed;
  inset: 0;
  z-index: 110;
  border: 0;
  background: rgba(0,0,0,.10);
  backdrop-filter: blur(2px);
}
.mnav.is-open{display:block}
.mnavBackdrop.is-on{display:block}

/* =========================================================
   BUTTONS / CHIPS / LINKS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--stroke2);
  background: var(--surface);
  cursor:pointer;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow2);
  color: var(--text);
}
.btn:hover{transform:translateY(-1px); background: rgba(255,255,255,.98);}

.btn--primary{
  border-color: rgba(0,113,227,.22);
  background: linear-gradient(180deg, rgba(0,113,227,.12), rgba(255,255,255,.96));
}
.btn--ghost{
  background: transparent;
  box-shadow: none;
}

.btn--lux{
  border-color: rgba(0,113,227,.22);
  background:
    radial-gradient(120px 80px at var(--mx) var(--my), rgba(176,141,87,.16), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(0,113,227,.12), rgba(255,255,255,.96));
}

.link{
  color: rgba(0,113,227,.95);
  border-bottom: 1px solid rgba(0,113,227,.25);
  padding-bottom:2px;
}
.link:hover{border-bottom-color: rgba(0,113,227,.55)}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin: 14px 0 0;}
.chip{
  display:inline-flex;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--stroke2);
  background: var(--surface);
  color: var(--muted);
  font-size:13px;
  box-shadow: var(--shadow2);
}
.chip--link:hover{background: rgba(255,255,255,.98)}
.muted{color: var(--muted)}

/* Magnetic */
.magnetic{position:relative}
.magnetic::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:inherit;
  pointer-events:none;
}

/* Ripple */
.ripple{
  position:absolute;
  border-radius:999px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background: radial-gradient(circle, rgba(0,113,227,.18), rgba(176,141,87,.10), rgba(0,0,0,0) 70%);
  width:18px;height:18px;
  opacity:.9;
  animation: ripple 700ms var(--ease) forwards;
}
@keyframes ripple{
  to{width:420px;height:420px;opacity:0}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding: 46px 0 18px;
  min-height: calc(100vh - var(--topbarH));
  display:flex;
  align-items:flex-start;
  position:relative;
  overflow:hidden;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-areas:
    "left media"
    "left quick";
  gap: 14px;
  align-items:start;
  position:relative;
  z-index:2;
}
.hero__left{grid-area:left;}
.hero__media{grid-area:media;}
.hero__quick{grid-area:quick;}

/* FX */
.heroFx{position:absolute; inset:-2px; pointer-events:none; z-index:1;}
.heroFx__aurora{
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(0,113,227,.12), transparent 60%),
    radial-gradient(700px 520px at 78% 26%, rgba(176,141,87,.14), transparent 62%),
    radial-gradient(900px 700px at var(--mx) var(--my), rgba(30,58,138,.08), transparent 62%);
  filter: blur(2px);
}
.heroFx__grid{
  position:absolute; inset:0;
  opacity:.20;
  background:
    linear-gradient(to right, rgba(0,0,0,.05) 1px, transparent 1px) 0 0/72px 72px,
    linear-gradient(to bottom, rgba(0,0,0,.05) 1px, transparent 1px) 0 0/72px 72px;
  mask-image: radial-gradient(800px 500px at 42% 28%, #000 40%, transparent 72%);
}
.heroFx__ring{
  position:absolute;
  border-radius:999px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 20px 80px rgba(0,113,227,.06);
  opacity:.55;
}
.heroFx__ring--a{
  width: 880px; height: 880px;
  left: -260px; top: -300px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%);
}
.heroFx__ring--b{
  width: 720px; height: 720px;
  right: -240px; top: -260px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.45), rgba(255,255,255,0) 62%);
}
.heroFx__spark{
  position:absolute; inset:0;
  opacity:.55;
  background:
    radial-gradient(2px 2px at 18% 24%, rgba(0,0,0,.25), transparent 60%),
    radial-gradient(2px 2px at 42% 14%, rgba(0,0,0,.20), transparent 60%),
    radial-gradient(2px 2px at 63% 18%, rgba(0,0,0,.18), transparent 60%),
    radial-gradient(2px 2px at 84% 34%, rgba(0,0,0,.22), transparent 60%);
  filter: blur(.2px);
}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--stroke2);
  background: var(--surface);
  color: rgba(29,29,31,.78);
  box-shadow: var(--shadow2);
  position:relative;
  overflow:hidden;
}
.pill__dot{
  width:8px;height:8px;border-radius:999px;
  background: var(--a);
  box-shadow: 0 0 16px rgba(0,113,227,.25);
}
.pill--lux{
  border-color: rgba(0,0,0,.08);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
}
.pill__shine{
  position:absolute; inset:-2px;
  background: radial-gradient(260px 140px at var(--mx) var(--my), rgba(176,141,87,.20), rgba(255,255,255,0) 60%);
  opacity:.9;
  pointer-events:none;
}

.hero__title{margin:18px 0 12px}
.hero__kicker{
  display:block;
  color: rgba(29,29,31,.70);
  font-weight:800;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 10px;
}
.hero__headline{
  display:block;
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1.03;
  letter-spacing: -0.04em;
  color: var(--text);
  background: linear-gradient(180deg, rgba(29,29,31,1), rgba(29,29,31,.78));
  -webkit-background-clip: text;
  background-clip: text;
}
.hero__lead{
  margin: 0 0 18px;
  max-width: 74ch;
  font-size: 17px;
  color: rgba(29,29,31,.72);
}
.hero__actions{
  display:flex; flex-wrap:wrap;
  gap: 12px;
  margin: 0 0 18px;
}

.heroSignature{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 10px 0 18px;
  color: rgba(29,29,31,.62);
  font-size: 13px;
}
.heroSignature__line{
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.22), rgba(0,0,0,0));
}

.metrics{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.metrics--lux .metric{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
}
.metric{
  border-radius: var(--radius);
  border:1px solid var(--stroke2);
  box-shadow: var(--shadow2);
  padding: 14px;
}
.metric__num{font-weight:900;font-size:26px;letter-spacing:-0.02em;color: var(--text)}
.metric__label{margin-top:6px;color: var(--muted);font-size:13px}

.scrollCue{
  display:flex; align-items:center; gap:10px;
  margin-top: 18px;
  color: var(--muted2);
}
.scrollCue__line{
  width:1px;height:30px;
  background: linear-gradient(to bottom, rgba(29,29,31,0), rgba(29,29,31,.30), rgba(29,29,31,0));
  animation: scrollLine 1.6s var(--ease) infinite;
}
@keyframes scrollLine{
  0%,100%{transform:translateY(-4px);opacity:.6}
  50%{transform:translateY(4px);opacity:1}
}

/* Portrait */
.portrait{
  position:relative;
  border-radius: var(--radius2);
  border:1px solid var(--stroke2);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height: 470px;
  transform-style: preserve-3d;
}
.portrait--lux{
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(14px);
  border-color: rgba(0,0,0,.08);
}
.portrait__img{position:absolute; inset:0}
.portrait__img img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 16%;
  transform: scale(1.02);
  filter: contrast(1.02) saturate(1.03);
}
.portrait::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 56%, rgba(245,245,247,.18) 100%);
  pointer-events:none;
}
.portrait__glow{
  position:absolute; inset:-2px;
  background: radial-gradient(420px 260px at var(--hx) var(--hy), rgba(176,141,87,.18), rgba(255,255,255,0) 62%);
  opacity:.95;
  pointer-events:none;
}
.portrait__sheen{
  position:absolute; inset:-2px;
  background: linear-gradient(115deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.22) 44%, rgba(255,255,255,0) 58%);
  transform: translateX(-30%);
  opacity:.55;
  pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .portrait__sheen{ animation: sheen 6.8s var(--ease) infinite; }
  @keyframes sheen{
    0%{ transform: translateX(-36%) }
    50%{ transform: translateX(18%) }
    100%{ transform: translateX(-36%) }
  }
}
.portrait.is-fallback .portrait__img img{display:none}
.portrait.is-fallback::before{
  content:"Portrait";
  position:absolute; inset:0;
  display:grid; place-items:center;
  color: rgba(29,29,31,.60);
  font-weight: 900;
  letter-spacing:.10em;
  text-transform: uppercase;
}

/* NAMEPLATE ON PHOTO */
.portrait__nameplate{
  position:absolute;
  left:14px;
  top:14px;
  right:14px;
  display:grid;
  gap:6px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  color: rgba(255,255,255,.95);
  text-shadow: 0 1px 16px rgba(0,0,0,.40);
  z-index: 2;
}
.pnp__name{font-weight:950; letter-spacing:-0.02em; font-size:16px; line-height:1.15;}
.pnp__sub{opacity:.92; font-size:12px; line-height:1.25;}

/* Quick */
.quick{
  border-radius: var(--radius2);
  border:1px solid var(--stroke2);
  background: var(--surface);
  box-shadow: var(--shadow2);
  padding: 16px;
}
.quick--lux{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(14px);
  border-color: rgba(0,0,0,.08);
}
.quick__title{font-weight:900;color: var(--text)}
.quick__sub{margin-top:4px;color:var(--muted2);font-size:13px}
.qrow{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius: 16px;
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.98);
  margin-top:10px;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.qrow:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,1);
  border-color: rgba(0,113,227,.18);
}
.qrow__k{color: var(--muted)}
.qrow__v{font-weight:900;color: var(--text)}
.quick__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* =========================================================
   SECTIONS
   ========================================================= */
.section{ padding: 86px 0; }
.section__head{display:grid; gap:10px; margin-bottom: 18px;}
.section__head h2{
  margin:0;
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing:-0.02em;
  color: var(--text);
}
.section__head p{margin:0;color: rgba(29,29,31,.72);max-width:76ch}
.section__foot{margin-top:16px}

.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

.card{
  padding: 18px;
  border-radius: var(--radius);
  border:1px solid var(--stroke2);
  background: var(--surface);
  box-shadow: var(--shadow2);
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,113,227,.16);
  background: rgba(255,255,255,.98);
}
.card h3{margin:0 0 8px;font-size:16px;color: var(--text); font-weight:900;}
.card p{margin:0;color: rgba(29,29,31,.72)}
.card__foot{margin-top:12px}

.listCard{
  border-radius: var(--radius2);
  border:1px solid var(--stroke2);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 18px;
}
.listCard__title{font-weight:900;margin-bottom:10px;color: var(--text)}
.bullets{
  margin:0;
  padding-left: 18px;
  color: rgba(29,29,31,.72);
  display:grid;
  gap:8px;
}
.quote{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(0,113,227,.16);
  background: rgba(0,113,227,.06);
  color: rgba(29,29,31,.72);
  position:relative;
}
.quote__mark{
  position:absolute;
  inset-inline-start:10px;
  top:6px;
  font-size: 22px;
  color: rgba(0,113,227,.45);
}
.quote__who{display:block;margin-top:6px;color: var(--muted2);font-size:12px}

/* =========================================================
   PROFILE
   ========================================================= */
.profileGrid{
  display:grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.profileGrid > *{height:100%}
.profileSummary{
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(0,113,227,.08), transparent 50%),
    radial-gradient(700px 380px at 85% 25%, rgba(176,141,87,.10), transparent 55%),
    var(--surface);
  border-color: rgba(0,0,0,.08);
}
.profileSummary__top{display:grid; gap:6px; margin-bottom:10px}
.profileSummary__kicker{
  font-weight:900;
  color: rgba(29,29,31,.62);
  font-size: 12px;
  letter-spacing:.10em;
  text-transform: uppercase;
}
.profileSummary__title{
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 18px;
}
.profileChips{display:flex; flex-wrap:wrap; gap:10px; margin: 10px 0 12px;}
.profileSummary__copy{
  color: rgba(29,29,31,.70);
  font-size: 14px;
  line-height: 1.45;
}
.profileSummary__list{
  margin-top: 12px;
  display:grid;
  gap:10px;
}
.psLine{display:flex;gap:10px;align-items:flex-start;color: rgba(29,29,31,.70);font-size:13px;line-height:1.35;}
.psDot{
  width:8px;height:8px;border-radius:999px;
  margin-top:7px;
  background: rgba(176,141,87,.86);
  box-shadow: 0 0 16px rgba(176,141,87,.18);
  flex:0 0 auto;
}
.profileSummary__mini{
  margin-top: 14px;
  display:grid;
  gap:10px;
}
.psMini{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.07);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow2);
  padding: 12px;
}
.psMini__n{font-weight:950; letter-spacing:-0.03em; font-size:26px;}
.psMini__t{margin-top:6px; color: rgba(29,29,31,.68); font-size:12.5px; line-height:1.35;}

.pList{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:grid;
  gap:10px;
  color: rgba(29,29,31,.72);
}
.pList li{display:flex; gap:10px; align-items:flex-start;}
.pDot{
  width:8px;height:8px;border-radius:999px;
  margin-top:7px;
  background: rgba(0,113,227,.80);
  box-shadow: 0 0 14px rgba(0,113,227,.22);
  flex:0 0 auto;
}
.pBlock{margin-top:12px}
.pKicker{font-weight:900;color: rgba(29,29,31,.86);font-size:13px;letter-spacing:-0.01em;}
.pDivider{
  height:1px; margin:14px 0;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.10), rgba(0,0,0,0));
}
.expGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.expStat{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.07);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow2);
  padding: 12px;
}
.expNum{font-weight:950; letter-spacing:-0.03em; font-size:28px;}
.expTxt{margin-top:6px; color: rgba(29,29,31,.68); font-size:12.5px; line-height:1.35;}

/* =========================================================
   AIGENCY
   ========================================================= */
.aigGrid{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 12px;
  align-items: start;
}
.aigNote{
  margin-top: 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  padding: 12px;
}
.aigNote__t{font-weight:900; color: rgba(29,29,31,.86); font-size:13px;}
.aigNote__p{margin-top:6px; color: rgba(29,29,31,.68); font-size:13px; line-height:1.4;}
.aigActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

.aigProducts{display:grid; gap:12px;}
.pCard{
  border-radius: var(--radius2);
  border:1px solid var(--stroke2);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 18px;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.pCard:hover{ transform: translateY(-2px); background: rgba(255,255,255,.98); border-color: rgba(0,113,227,.16); }
.pCard__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pBadge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
  color: rgba(29,29,31,.74);
}
.pCard h3{margin:0;color: var(--text); font-weight:900;}
.pCard p{margin:10px 0 12px;color: rgba(29,29,31,.72)}
.pCard__cta{display:flex;gap:10px;flex-wrap:wrap}
.pCard--product .pCard__body{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
  margin-top: 10px;
  align-items: start;
}
.pPreview{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background:
    radial-gradient(120px 80px at 20% 20%, rgba(0,113,227,.12), transparent 60%),
    radial-gradient(120px 80px at 70% 40%, rgba(176,141,87,.10), transparent 60%),
    rgba(0,0,0,.02);
  box-shadow: var(--shadow2);
  min-height: 160px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.pPreview__ph{
  font-weight: 900;
  color: rgba(29,29,31,.62);
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.pMiniList{
  margin: 0 0 12px;
  padding-left: 18px;
  color: rgba(29,29,31,.70);
  display:grid;
  gap:6px;
  font-size: 13px;
}

/* =========================================================
   EVENTS
   ========================================================= */
.miniRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.hl{
  margin-top: 14px;
  border-radius: var(--radius2);
  border:1px solid var(--stroke2);
  background: var(--surface);
  box-shadow: var(--shadow2);
  padding: 16px;
}
.hl__title{font-weight:900;margin-bottom:10px;color: var(--text)}
.hl__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.hl__item{color: rgba(29,29,31,.72)}

/* =========================================================
   BRANDS
   ========================================================= */
.logoGrid--logos{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.logoCard{
  border-radius: var(--radius);
  border:1px solid var(--stroke2);
  background: var(--surface);
  box-shadow: var(--shadow2);
  padding: 18px;
  min-height: 96px;
  display:grid;
  place-items:center;
  text-align:center;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
  user-select:none;
}
.logoCard span{font-weight: 900; color: rgba(29,29,31,.86);}
.logoCard:hover{
  transform: translateY(-2px);
  border-color: rgba(0,113,227,.16);
  background: rgba(255,255,255,.98);
}

/* Mobile: horizontal only */
@media (max-width: 720px){
  .logoGrid--logos{
    display:grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78%, 1fr);
    grid-template-columns: unset;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    gap: 12px;
  }
  .logoCard{scroll-snap-align: start;}
  .logoGrid--logos::-webkit-scrollbar{height:8px}
  .logoGrid--logos::-webkit-scrollbar-thumb{background: rgba(0,0,0,.12); border-radius:999px;}
}

/* =========================================================
   BLOG (UPDATED — smart crop + mobile friendly)
   ========================================================= */

.post{
  border-radius: var(--radius);
  border:1px solid var(--stroke2);
  background: var(--surface);
  box-shadow: var(--shadow2);
  padding: 18px;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
  overflow: hidden; /* чтобы тени/границы не ломались */
}

.post:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.98);
  border-color: rgba(176,141,87,.22);
}

.post__img{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.03);
  box-shadow: var(--shadow2);
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
}

/* дефолт: красиво заполняем, но НЕ в центр лица */
.post__img img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  object-position: 50% 35%;     /* выше центра — меньше шансов резать лоб/лица */
  transform: none;              /* убрали scale — он усиливает обрезку */
}

/* мягкая “премиум” подложка поверх картинки */
.post__img::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(70% 70% at 50% 35%, rgba(255,255,255,.30), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.06), transparent 40%, rgba(0,0,0,.04));
  opacity:.55;
}

/* если фото вертикальное — переключаем на contain и делаем аккуратный фон */
.post__img.is-portrait{
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
}
.post__img.is-portrait img{
  object-fit: contain;
  object-position: center;
  background: transparent;
}

/* placeholder / fallback */
.post__imgPh{
  position:absolute;
  inset:0;
  display:none;
  place-items:center;
  font-weight: 900;
  color: rgba(29,29,31,.62);
  letter-spacing:.10em;
  text-transform: uppercase;
  font-size: 12px;
}
.post__img.is-fallback img{ display:none; }
.post__img.is-fallback .post__imgPh{ display:grid; }

.post__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color: var(--muted2);
  font-size:12px;
}

.post__tag{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--stroke2);
  background: rgba(0,0,0,.03);
}

.post h3{
  margin:10px 0 8px;
  color: var(--text);
  font-weight:900;
}

.post p{
  margin:0;
  color: rgba(29,29,31,.72);
}

.post__actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top: 12px;
}

.share{
  padding:10px 12px;
  border-radius:999px;
  border: 1px solid var(--stroke2);
  background: rgba(0,0,0,.02);
  cursor:pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}

.share:hover{
  transform: translateY(-1px);
  background: rgba(0,113,227,.06);
  border-color: rgba(0,113,227,.18);
}

/* ===== Mobile tuning ===== */
@media (max-width: 720px){
  .post{ padding: 16px; }
  .post__img{ border-radius: 14px; }
  .post__actions{ gap: 10px; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 12px;
  align-items: start;
}
.contact__left{
  border-radius: var(--radius2);
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  padding: 18px;
}
.contact__left h2{margin:0 0 8px}
.contact__left p{margin:0;color: rgba(29,29,31,.72)}
.social{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top: 14px;
}
.sbtn{
  padding:10px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
}
.sbtn:hover{transform: translateY(-1px); background: rgba(255,255,255,1);}
.contact__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px;}
.contactNote{
  margin-top: 14px;
  color: rgba(29,29,31,.66);
  font-size: 13px;
  line-height: 1.45;
  border-top: 1px solid rgba(0,0,0,.06);
  padding-top: 14px;
}

.form{
  border-radius: var(--radius2);
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  padding: 18px;
}
.form__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
label{display:grid; gap:8px; color: rgba(29,29,31,.78); font-size: 13px;}
input, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.98);
  box-shadow: var(--shadow2);
  font: inherit;
}
textarea{resize: vertical; min-height: 140px;}
input:focus, textarea:focus{
  border-color: rgba(0,113,227,.30);
  box-shadow: 0 0 0 4px rgba(0,113,227,.12);
  outline: none;
}
.form__actions{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.form__note{margin:0;color: rgba(29,29,31,.62); font-size: 12.5px; max-width: 52ch;}
.formSuccess{
  border-radius: 18px;
  border: 1px solid rgba(0,113,227,.18);
  background: rgba(0,113,227,.06);
  padding: 16px;
}
.formSuccess__title{font-weight: 950; color: rgba(29,29,31,.88);}
.formSuccess__sub{margin:8px 0 0;color: rgba(29,29,31,.70);}
.formSuccess__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px;}

/* =========================================================
   FOOTER — FIX (Desktop layout + clean mobile)
   Add this at the END of your CSS file
   ========================================================= */

.footer{
  padding: 52px 0 44px;
  border-top: 1px solid rgba(0,0,0,.07);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(42,132,255,.08), transparent 60%),
    radial-gradient(900px 260px at 90% 0%, rgba(120,180,255,.08), transparent 60%);
}

.footer__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

.footer__brand{
  display: grid;
  gap: 6px;
}

.footer__name{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 16px;
  line-height: 1.1;
}

.footer__links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer__links a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.55);
  color: rgba(29,29,31,.82);
  text-decoration: none;
  line-height: 1;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}

.footer__links a:hover{
  background: rgba(255,255,255,.82);
  border-color: rgba(0,0,0,.10);
  color: rgba(29,29,31,.94);
  transform: translateY(-1px);
}

.footer__legal{
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* ===== Desktop (normal footer) ===== */
@media (min-width: 920px){
  .footer__grid{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand links"
      "legal legal";
    align-items: center;
    gap: 18px 22px;
  }

  .footer__brand{ grid-area: brand; }
  .footer__links{
    grid-area: links;
    justify-content: flex-end;
  }

  .footer__legal{
    grid-area: legal;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 14px;
  }

  .footer__legal > div{
    white-space: nowrap;
  }
}

/* ===== Small screens polish ===== */
@media (max-width: 480px){
  .footer{
    padding: 42px 0 36px;
  }
  .footer__links a{
    padding: 10px 12px;
    width: 100%;
    justify-content: flex-start;
    border-radius: 14px;
  }
}


/* =========================================================
   MODAL
   ========================================================= */
.modal{
  position: fixed;
  inset: 0;
  z-index: 220;
  display:none;
}
.modal.is-open{display:block}
.modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
}
.modal__panel{
  position: relative;
  width: min(640px, calc(100% - 24px));
  margin: calc(var(--topbarH) + 26px) auto 0;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  padding: 18px;
}
.modal__close{
  position:absolute;
  right: 12px;
  top: 12px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  cursor:pointer;
  box-shadow: var(--shadow2);
}
.modal__title{font-weight: 950; letter-spacing: -0.02em; font-size: 18px;}
.modal__text{margin: 10px 0 0;color: rgba(29,29,31,.72); max-width: 72ch;}
.modal__cta{display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px;}

/* =========================================================
   REVEAL (simple)
   ========================================================= */
[data-reveal]{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.is-inview{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .nav{gap:2px}
  .nav__link{padding:10px 10px}
}

@media (max-width: 980px){
  .nav{display:none}
  .burger{display:block}
  .hero__grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "left"
      "quick";
    gap: 12px;
  }
  .portrait{min-height: 420px}
  .contact{grid-template-columns: 1fr; }
  .footer__grid{grid-template-columns: 1fr; }
  .footer__legal{text-align:left}
  .grid3{grid-template-columns: 1fr; }
  .grid2{grid-template-columns: 1fr; }
  .aigGrid{grid-template-columns: 1fr; }
  .profileGrid{grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  :root{ --wrap: min(1180px, calc(100% - 28px)); }
  .topbar__inner{gap:10px}
  .brand__text{max-width: 170px}
  .metrics{grid-template-columns: 1fr; }
  .pCard--product .pCard__body{grid-template-columns: 1fr; }
  .pPreview{min-height: 140px}
  .form__row{grid-template-columns: 1fr; }
  .section{padding: 70px 0;}
}
/* =========================
BRANDS LOGOS — Upload Cards (append)
========================= */

.logoCard--upload{
  position: relative;
  padding: 16px;
  min-height: 140px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.08);
  background:
    radial-gradient(240px 140px at 18% 18%, rgba(0,113,227,.08), transparent 60%),
    radial-gradient(220px 140px at 82% 28%, rgba(176,141,87,.09), transparent 62%),
    rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow2);
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
  overflow: hidden;
}
.logoCard--upload:hover{
  transform: translateY(-2px);
  border-color: rgba(0,113,227,.18);
  background:
    radial-gradient(260px 150px at var(--mx) var(--my), rgba(176,141,87,.12), transparent 60%),
    radial-gradient(240px 150px at 12% 22%, rgba(0,113,227,.10), transparent 60%),
    rgba(255,255,255,.96);
}

.logoCard__label{
  width: 100%;
  display: grid;
  gap: 10px;
  align-items: center;
  justify-items: center;
  cursor: pointer;
  user-select: none;
}
.logoCard__file{ display:none; }

.logoCard__frame{
  width: 100%;
  max-width: 220px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px dashed rgba(0,0,0,.16);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  overflow: hidden;
  position: relative;
}
.logoCard--upload.has-logo .logoCard__frame{
  border-style: solid;
  border-color: rgba(0,0,0,.10);
}

.logoCard__img{
  width: 86%;
  height: 86%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1) contrast(1.02) saturate(.85);
  opacity: .78;
  transform: translateZ(0);
  transition: filter .18s var(--ease), opacity .18s var(--ease), transform .18s var(--ease);
}
.logoCard--upload:hover .logoCard__img{
  filter: grayscale(.15) contrast(1.04) saturate(1.02);
  opacity: .95;
  transform: scale(1.02);
}
.logoCard--upload:not(.has-logo) .logoCard__img{
  display:none;
}

.logoCard__name{
  font-weight: 900;
  color: rgba(29,29,31,.86);
  font-size: 14px;
  letter-spacing: -0.01em;
}
.logoCard__hint{
  font-size: 12px;
  color: rgba(29,29,31,.56);
}
.logoCard--upload.has-logo .logoCard__hint{
  display:none;
}

/* Remove button (appears only when logo uploaded) */
.logoCard__remove{
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  box-shadow: var(--shadow2);
  cursor: pointer;
  display: none;
  font-size: 12px;
}
.logoCard--upload.has-logo .logoCard__remove{ display: inline-flex; }
.logoCard__remove:hover{
  border-color: rgba(0,113,227,.18);
  background: rgba(0,113,227,.06);
}

/* Nice shine */
.logoCard--upload::after{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.22) 48%, rgba(255,255,255,0) 62%);
  transform: translateX(-36%);
  opacity: .40;
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .logoCard--upload::after{ animation: logoSheen 7.2s var(--ease) infinite; }
  @keyframes logoSheen{
    0%{ transform: translateX(-42%); }
    50%{ transform: translateX(20%); }
    100%{ transform: translateX(-42%); }
  }
}
/* === HERO portrait nameplate — FIX (bottom + readable colors) === */
.portrait__nameplate{
  top: auto !important;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  left: 14px !important;
  right: 14px !important;

  /* читаемость на любом фото */
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.78) 0%,
    rgba(255,255,255,.70) 100%
  ) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.18) !important;

  color: rgba(29,29,31,.92) !important;
  text-shadow: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 14px !important;
}

/* имя слева */
.portrait__nameplate .pnp__name{
  font-size: 16px !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: rgba(29,29,31,.94) !important;
}

/* подпись справа (акцентный цвет) */
.portrait__nameplate .pnp__sub{
  font-size: 12px !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
  color: rgba(0,113,227,.92) !important;
  white-space: nowrap;
}

/* небольшая “акцент-полоска” внутри карточки */
.portrait__nameplate::before{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(0,113,227,.85),
    rgba(30,58,138,.55),
    rgba(176,141,87,.45)
  );
  opacity: .75;
}

/* чуть усиливаем нижний градиент фото, чтобы карточка всегда читалась */
.portrait::after{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0) 50%,
      rgba(245,245,247,.22) 100%
    ) !important;
}
/* === BRANDS (logos, consistent square, premium) === */
.brandsGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}

.brandLogo{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  border-radius: var(--radius);
  border:1px solid var(--stroke2);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow2);
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
  user-select:none;
}
.brandLogo:hover{
  transform: translateY(-2px);
  border-color: rgba(0,113,227,.18);
  background: rgba(255,255,255,.92);
}

/* квадратная витрина */
.brandLogo__box{
  position:relative;
  aspect-ratio: 1 / 1;
  width:100%;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.07);
  background:
    radial-gradient(220px 160px at 20% 20%, rgba(0,113,227,.10), transparent 60%),
    radial-gradient(220px 160px at 75% 35%, rgba(176,141,87,.10), transparent 60%),
    rgba(0,0,0,.02);
  box-shadow: var(--shadow2);
  overflow:hidden;
  display:grid;
  place-items:center;
}

/* логотип внутри: одинаковый размер, без обрезки */
.brandLogo__box img{
  width: 78%;
  height: 78%;
  object-fit: contain;
  object-position: center;
  filter: saturate(1.02) contrast(1.02);
}

/* подпись */
.brandLogo__name{
  font-weight: 900;
  color: rgba(29,29,31,.86);
  font-size: 13px;
  letter-spacing: -0.01em;
  text-align:center;
}

/* fallback если картинки нет */
.brandLogo__fallback{
  display:none;
  width: 100%;
  height: 100%;
  padding: 14px;
  text-align:center;
  font-weight: 950;
  color: rgba(29,29,31,.60);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1.2;
  place-items:center;
}
.brandLogo.is-fallback .brandLogo__fallback{
  display:grid;
}
.brandLogo.is-fallback .brandLogo__fallback::before{
  content: attr(data-fallback);
}

/* Mobile: horizontal only + snap (как ты хотел раньше) */
@media (max-width: 720px){
  .brandsGrid{
    grid-auto-flow: column;
    grid-auto-columns: minmax(78%, 1fr);
    grid-template-columns: unset;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
  }
  .brandLogo{ scroll-snap-align: start; }
  .brandsGrid::-webkit-scrollbar{height:8px}
  .brandsGrid::-webkit-scrollbar-thumb{background: rgba(0,0,0,.12); border-radius:999px;}
}