/* ═══════════ МСА shared design system (sub-pages) ═══════════ */
@font-face { font-family:'Gotham'; src:url('../fonts/Gotham-Book.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/Gotham-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/Gotham-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Gotham'; src:url('../fonts/Gotham-Black.woff2') format('woff2'); font-weight:800; font-display:swap; }

:root{
  --bg:#F5F7FA; --bg2:#FFFFFF; --surface:#FFFFFF; --surface2:#EEF2F7;
  --accent:#0057FF; --accent-light:#EBF0FF; --accent2:#6C3FD4; --accent3:#FF5722;
  --text:#0D1B2A; --text-muted:#5E7A96; --text-light:#8FA6BC;
  --border-soft:rgba(0,0,0,0.08); --shadow:0 2px 16px rgba(0,0,0,0.06); --shadow-md:0 8px 32px rgba(0,0,0,0.10);
  --font:'Gotham','Montserrat',Arial,sans-serif;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--text); font-family:var(--font); font-weight:400; line-height:1.7; overflow-x:hidden; }
a{ color:inherit; }
img{ max-width:100%; display:block; }

/* NAV */
nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:0 5%; height:68px; background:rgba(255,255,255,0.92); backdrop-filter:blur(16px); border-bottom:1px solid var(--border-soft); }
.logo{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-mark{ width:40px; height:40px; background:var(--accent); border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font); font-weight:800; font-size:14px; color:#fff; box-shadow:0 4px 12px rgba(0,87,255,0.25); }
.logo-text{ font-weight:600; font-size:14px; color:var(--text); line-height:1.2; }
.logo-text span{ display:block; font-size:10px; font-weight:400; color:var(--text-muted); letter-spacing:1.2px; text-transform:uppercase; }
nav ul{ display:flex; gap:2px; list-style:none; }
nav ul a{ display:block; padding:7px 14px; color:var(--text-muted); text-decoration:none; font-size:13.5px; font-weight:500; border-radius:6px; transition:all .2s; }
nav ul a:hover,nav ul a.active{ color:var(--accent); background:var(--accent-light); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.lang-toggle{ display:flex; border:1px solid var(--border-soft); border-radius:7px; overflow:hidden; background:var(--surface2); }
.lang-btn{ padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; border:none; background:transparent; color:var(--text-muted); font-family:var(--font); letter-spacing:.5px; }
.lang-btn.active{ background:var(--accent); color:#fff; border-radius:6px; }
.btn-join{ padding:9px 22px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; font-family:var(--font); white-space:nowrap; box-shadow:0 3px 10px rgba(0,87,255,0.25); transition:all .2s; }
.btn-join:hover{ background:var(--text); }
.hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.hamburger span{ display:block; width:22px; height:2px; background:var(--text); border-radius:2px; }
.mobile-menu{ display:none; position:fixed; top:68px; left:0; right:0; background:rgba(255,255,255,0.98); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-soft); padding:20px 5%; z-index:99; box-shadow:var(--shadow-md); }
.mobile-menu.open{ display:block; }
.mobile-menu ul{ list-style:none; }
.mobile-menu ul li{ padding:11px 0; border-bottom:1px solid var(--border-soft); }
.mobile-menu ul a{ color:var(--text); text-decoration:none; font-size:15px; font-weight:500; }
.mobile-actions{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }

/* PAGE HERO */
.page-hero{ padding:120px 5% 48px; background:var(--bg2); border-bottom:1px solid var(--border-soft); position:relative; overflow:hidden; }
.page-hero .inner{ max-width:1200px; margin:0 auto; position:relative; z-index:1; }
.page-tag{ font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent); margin-bottom:14px; font-weight:600; }
.page-hero h1{ font-family:var(--font); font-weight:800; font-size:clamp(34px,5vw,64px); letter-spacing:-1.5px; line-height:1.05; color:var(--text); }
.page-hero h1 em{ font-style:normal; color:var(--accent); }
.page-hero p{ color:var(--text-muted); font-size:16px; max-width:600px; margin-top:16px; }
.hero-blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.16; pointer-events:none; }
.hero-blob-1{ width:420px; height:420px; background:#3B82F6; top:-120px; right:-60px; }
.hero-blob-2{ width:300px; height:300px; background:#A78BFA; bottom:-120px; left:10%; }

/* LAYOUT */
.wrap{ max-width:1200px; margin:0 auto; padding:56px 5% 96px; }
h2{ font-family:var(--font); font-weight:800; font-size:clamp(26px,3.4vw,44px); letter-spacing:-1px; line-height:1.1; color:var(--text); margin-bottom:16px; }
h2 em{ font-style:normal; color:var(--accent); }

/* FILTER BAR */
.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:36px; }
.search-bar{ display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--border-soft); border-radius:10px; padding:10px 14px; flex:1; min-width:220px; }
.search-bar input{ border:none; outline:none; font-family:var(--font); font-size:14px; width:100%; color:var(--text); background:transparent; }
.chip{ padding:8px 16px; border-radius:20px; border:1.5px solid var(--border-soft); background:#fff; color:var(--text-muted); font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font); transition:all .2s; }
.chip:hover{ border-color:var(--accent); color:var(--accent); }
.chip.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* CARDS / GRIDS */
.grid{ display:grid; gap:20px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); transition:all .3s; text-decoration:none; color:inherit; display:block; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(0,87,255,0.2); }
.card-media{ height:170px; background:linear-gradient(135deg,#EBF0FF,#D6E4FF); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-size:44px; opacity:1; position:relative; }
.card-body{ padding:22px 24px; }
.card-body h3{ font-family:var(--font); font-weight:700; font-size:17px; color:var(--text); margin-bottom:8px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card-body p{ font-size:13.5px; color:var(--text-muted); line-height:1.65; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pill{ display:inline-block; padding:3px 10px; background:var(--accent-light); border:1px solid rgba(0,87,255,0.15); border-radius:20px; font-size:10.5px; color:var(--accent); font-weight:600; letter-spacing:.6px; text-transform:uppercase; }
.meta{ font-size:12px; color:var(--text-light); margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.empty{ text-align:center; padding:64px 20px; color:var(--text-muted); }

/* DIRECTORY CARD */
.dir-card{ background:#fff; border:1px solid var(--border-soft); border-radius:18px; padding:26px; box-shadow:var(--shadow); transition:all .3s; }
.dir-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(0,87,255,0.2); }
.dir-logo{ width:54px; height:54px; border-radius:14px; background:linear-gradient(135deg,var(--accent),var(--accent2)); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:18px; margin-bottom:16px; background-size:cover; background-position:center; }
.dir-card h3{ font-family:var(--font); font-weight:700; font-size:18px; margin-bottom:6px; }
.dir-tags{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; }
.dir-card p{ font-size:13.5px; color:var(--text-muted); line-height:1.6; }
.dir-link{ display:inline-flex; gap:6px; margin-top:14px; color:var(--accent); font-weight:600; font-size:13px; text-decoration:none; }

/* BUTTONS */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:9px; font-weight:600; font-size:14px; text-decoration:none; cursor:pointer; border:none; font-family:var(--font); transition:all .25s; }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 4px 16px rgba(0,87,255,0.3); }
.btn-primary:hover{ background:var(--text); transform:translateY(-2px); }
.btn-outline{ background:#fff; color:var(--text); border:1px solid var(--border-soft); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); }

/* FORM */
.form-card{ background:#fff; border:1px solid var(--border-soft); border-radius:20px; padding:36px; box-shadow:var(--shadow); max-width:640px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:7px; color:var(--text); }
.field input,.field select,.field textarea{ width:100%; padding:12px 14px; border:1.5px solid var(--border-soft); border-radius:10px; font-family:var(--font); font-size:14px; color:var(--text); outline:none; background:#fff; transition:border-color .2s; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); }
.field textarea{ min-height:110px; resize:vertical; }

/* ECOSYSTEM */
.eco-group{ margin-bottom:40px; }
.eco-group h3{ font-family:var(--font); font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:16px; }
.eco-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.eco-link{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--border-soft); border-radius:14px; padding:18px 20px; text-decoration:none; color:var(--text); box-shadow:var(--shadow); transition:all .25s; }
.eco-link:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:rgba(0,87,255,0.25); }
.eco-ico{ width:44px; height:44px; border-radius:11px; background:var(--accent-light); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; background-size:cover; background-position:center; }
.eco-link b{ font-size:14.5px; font-weight:700; }
.eco-link small{ display:block; color:var(--text-muted); font-size:12px; font-weight:400; }

/* PRICING / MEMBERSHIP */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:56px; }
.tier{ background:#fff; border:1.5px solid var(--border-soft); border-radius:18px; padding:32px 28px; transition:all .3s; }
.tier.featured{ background:var(--accent); color:#fff; border-color:var(--accent); }
.tier:not(.featured):hover{ border-color:rgba(0,87,255,0.3); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.tier .tier-badge{ display:inline-block; padding:4px 12px; border-radius:20px; font-size:10.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:14px; background:var(--accent-light); color:var(--accent); }
.tier.featured .tier-badge{ background:rgba(255,255,255,0.2); color:#fff; }
.tier h3{ font-family:var(--font); font-weight:700; font-size:20px; margin-bottom:8px; }
.tier ul{ list-style:none; margin:18px 0; }
.tier li{ display:flex; gap:8px; font-size:13px; padding:6px 0; border-bottom:1px solid var(--border-soft); color:var(--text-muted); }
.tier.featured li{ color:rgba(255,255,255,0.9); border-color:rgba(255,255,255,0.15); }
.tier li::before{ content:'✓'; color:var(--accent); font-weight:700; }
.tier.featured li::before{ color:#fff; }

/* FOOTER */
footer{ background:var(--text); padding:60px 5% 30px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:56px; max-width:1200px; margin:0 auto 48px; }
.footer-brand p{ font-size:13px; color:rgba(255,255,255,0.45); margin:16px 0 24px; max-width:280px; line-height:1.75; }
.footer-col h4{ font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.9); margin-bottom:18px; }
.footer-col ul{ list-style:none; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col ul a{ color:rgba(255,255,255,0.45); text-decoration:none; font-size:13px; transition:color .2s; }
.footer-col ul a:hover{ color:#fff; }
.footer-bottom{ max-width:1200px; margin:0 auto; padding-top:22px; border-top:1px solid rgba(255,255,255,0.1); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-bottom p{ font-size:12px; color:rgba(255,255,255,0.3); }

/* FADE */
.fade-up{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.visible{ opacity:1; transform:translateY(0); }

@media (max-width:960px){
  nav ul,.nav-actions .lang-toggle{ display:none; }
  .hamburger{ display:flex; }
  .grid-3,.grid-2,.eco-grid,.tiers{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:600px){ .footer-grid{ grid-template-columns:1fr; } }