@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@500;700;800&family=Inter:wght@400;500;600;700;800&display=swap');
:root,[data-theme="light"]{
  --bg:#f0ede6;--surface:rgba(255,255,255,0.55);--surface-2:rgba(255,255,255,0.72);
  --surface-solid:#fff;--border:rgba(180,175,165,0.35);--text:#25221d;
  --text-muted:#6c6a64;--text-faint:#96928a;--primary:#0e6b67;--primary-hover:#0a4f4c;
  --primary-soft:rgba(14,107,103,0.1);--accent:#e8f5e9;
  --card-bg:rgba(255,255,255,0.45);--card-border:rgba(255,255,255,0.5);
  --glass-blur:20px;--radius:1rem;--radius-lg:1.4rem;--radius-xl:1.8rem;
  --shadow:0 8px 32px rgba(0,0,0,0.06);--font-d:'Cairo',sans-serif;--font-b:'Inter',sans-serif;
  --wa-green:#25D366;--wa-hover:#1da851;
}
[data-theme="dark"]{
  --bg:#111110;--surface:rgba(40,38,35,0.65);--surface-2:rgba(50,48,44,0.7);
  --surface-solid:#1e1d1b;--border:rgba(80,76,70,0.4);--text:#ece8df;
  --text-muted:#bbb5a9;--text-faint:#8f897d;--primary:#6bb5ad;--primary-hover:#89cbc4;
  --primary-soft:rgba(107,181,173,0.12);--accent:rgba(107,181,173,0.08);
  --card-bg:rgba(35,33,30,0.6);--card-border:rgba(70,67,62,0.4);
  --shadow:0 8px 32px rgba(0,0,0,0.25);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);color:var(--text);background:var(--bg);line-height:1.7;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none}
.shell{width:min(calc(100% - 2rem),1180px);margin:0 auto}

/* HEADER */
.header{position:sticky;top:0;z-index:100;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));background:var(--surface);border-bottom:1px solid var(--border);transition:background .3s}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}
.brand{display:flex;align-items:center;gap:.75rem}
.logo{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--primary),#2a9d8f);color:#fff;display:grid;place-items:center;flex-shrink:0}
.brand-title{font-family:var(--font-d);font-weight:800;font-size:1.15rem;line-height:1.2}
.brand-sub{font-size:.78rem;color:var(--text-muted)}
.header-actions{display:flex;align-items:center;gap:.5rem}
.theme-toggle{width:40px;height:40px;border-radius:50%;background:var(--surface-2);backdrop-filter:blur(10px);border:1px solid var(--border);display:grid;place-items:center;font-size:1.1rem;transition:.2s}
.theme-toggle:hover{background:var(--primary-soft)}

/* HERO */
.hero{padding:clamp(2.5rem,8vw,5rem) 0 2.5rem}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .85rem;background:var(--primary-soft);backdrop-filter:blur(10px);color:var(--primary);border-radius:999px;font-size:.85rem;font-weight:700;margin-bottom:1rem;border:1px solid var(--border)}
h1{font-family:var(--font-d);font-size:clamp(1.8rem,1.2rem+2.5vw,3.2rem);font-weight:800;line-height:1.15;max-width:14ch}
h2,h3{font-family:var(--font-d);line-height:1.25}
.hero p{color:var(--text-muted);max-width:55ch;margin-top:1rem;font-size:.95rem}
.hero-card{background:var(--card-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--card-border);border-radius:var(--radius-xl);padding:1.8rem;box-shadow:var(--shadow)}
.hero-card h2{font-size:1.2rem;margin-bottom:.75rem}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.2rem}
.stat{padding:1rem;background:var(--surface);backdrop-filter:blur(10px);border-radius:var(--radius);border:1px solid var(--border);text-align:center}
.stat strong{display:block;font-family:var(--font-d);font-size:1.4rem;color:var(--primary)}

/* SEARCH & FILTERS */
.toolbar{padding:1.5rem 0;position:sticky;top:65px;z-index:50}
.toolbar-inner{background:var(--card-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--card-border);border-radius:var(--radius-xl);padding:1.2rem 1.5rem;box-shadow:var(--shadow);display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.search-box{flex:1;min-width:220px;position:relative}
.search-box input{width:100%;padding:.75rem 1rem .75rem 2.8rem;background:var(--surface-2);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:999px;font-size:.9rem;color:var(--text);outline:none;transition:.2s}
.search-box input:focus{border-color:var(--primary)}
.search-box svg{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--text-faint);width:18px;height:18px}
.filter-btns{display:flex;gap:.4rem;flex-wrap:wrap}
.filter-btn{padding:.55rem 1rem;border-radius:999px;font-size:.82rem;font-weight:600;background:var(--surface);backdrop-filter:blur(10px);border:1px solid var(--border);color:var(--text-muted);transition:.2s;white-space:nowrap}
.filter-btn.active,.filter-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.filter-count{font-size:.72rem;margin-left:.3rem;opacity:.7}
.no-results{text-align:center;padding:3rem;color:var(--text-muted);font-size:1.1rem;display:none}

/* COUNTRY BLOCKS */
.countries{display:grid;gap:2rem;padding-bottom:3rem}
.country-block{background:var(--card-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--card-border);border-radius:var(--radius-xl);padding:1.8rem;box-shadow:var(--shadow);opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s}
.country-block.visible{opacity:1;transform:none}
.country-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.country-badge{padding:.45rem .85rem;border-radius:999px;font-size:.85rem;background:var(--primary-soft);color:var(--primary);font-weight:700;backdrop-filter:blur(8px);border:1px solid var(--border)}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}
.card{display:flex;flex-direction:column;gap:1rem;background:var(--surface-2);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:1.4rem;box-shadow:var(--shadow);transition:transform .25s}
.card:hover{transform:translateY(-4px)}
.card.hidden{display:none}
.card-header{display:flex;gap:.75rem;align-items:center}
.card-logo{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-family:var(--font-d);font-weight:800;font-size:1.1rem;color:#fff;flex-shrink:0}
.card-header-text{flex:1;min-width:0}
.card-header-text h3{font-size:1.05rem}
.tag{font-size:.72rem;padding:.3rem .55rem;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--text-muted);white-space:nowrap}
.meta{display:grid;gap:.5rem;font-size:.88rem}
.meta-row{display:flex;gap:.5rem;align-items:flex-start}
.meta-row span:first-child{min-width:80px;color:var(--text-faint);font-size:.82rem;flex-shrink:0}
.meta-row span:last-child,.meta-row a{color:var(--text);word-break:break-word}
.meta-row a:hover{color:var(--primary)}
.links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.5rem}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem .9rem;border-radius:999px;font-size:.8rem;font-weight:600;border:1px solid var(--border);transition:.2s;white-space:nowrap}
.btn-icon{width:38px;height:38px;padding:0;border-radius:50%;flex-shrink:0}
.btn-img{width:40px;height:40px;padding:0;border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s;flex-shrink:0}
.btn-img:hover{transform:scale(1.1)}
.btn-img img{width:100%;height:100%;object-fit:contain}
.btn-primary{background:var(--primary);color:#fff;border-color:transparent}
.btn-primary:hover{background:var(--primary-hover);color:#fff}
.btn-secondary{background:var(--surface);backdrop-filter:blur(8px);color:var(--text)}
.btn-secondary:hover{background:var(--primary-soft);border-color:var(--primary)}
.btn-wa{background:var(--wa-green);color:#fff;border-color:transparent}
.btn-wa:hover{background:var(--wa-hover);color:#fff}
.btn-map{background:var(--surface);backdrop-filter:blur(8px);color:var(--text)}
.btn-map:hover{background:var(--accent);border-color:var(--primary)}
.btn-fb{background:#1877F2;color:#fff;border-color:transparent}
.btn-fb:hover{background:#166fe5;color:#fff}
.btn-ig{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);color:#fff;border-color:transparent}
.btn-ig:hover{opacity:.9;color:#fff}

/* NOTES */
.note-section{background:var(--card-bg);backdrop-filter:blur(var(--glass-blur));border:1px solid var(--card-border);border-radius:var(--radius-xl);padding:1.8rem;box-shadow:var(--shadow)}
.note{padding:1.2rem;background:var(--surface);backdrop-filter:blur(10px);border:1px dashed var(--border);border-radius:var(--radius);color:var(--text-muted);font-size:.9rem}

/* FOOTER */
footer{padding:2rem 0 3rem}
.footer-box{background:var(--card-bg);backdrop-filter:blur(var(--glass-blur));border:1px solid var(--card-border);border-radius:var(--radius-xl);padding:2rem;text-align:center;box-shadow:var(--shadow)}
.footer-box p{color:var(--text-muted);margin:.4rem 0;font-size:.9rem}
.footer-box .sig{font-family:var(--font-d);font-weight:700;font-size:1rem;color:var(--primary);margin-top:.8rem}

/* BACK TO TOP */
.back-top{position:fixed;bottom:2rem;right:2rem;width:46px;height:46px;border-radius:50%;background:var(--surface-2);backdrop-filter:blur(var(--glass-blur));border:1px solid var(--card-border);box-shadow:var(--shadow);display:grid;place-items:center;opacity:0;pointer-events:none;transition:.3s;z-index:90;color:var(--primary);font-size:1.2rem}
.back-top.show{opacity:1;pointer-events:auto}
.back-top:hover{background:var(--primary);color:#fff}

/* RESPONSIVE */
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}h1{max-width:100%}.header-inner{flex-wrap:wrap}}
@media(max-width:640px){.shell{width:calc(100% - 1rem)}.hero-stats{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.toolbar-inner{flex-direction:column}.country-top{flex-direction:column;align-items:flex-start}.meta-row{flex-direction:column;gap:.15rem}.meta-row span:first-child{min-width:unset}.filter-btns{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.card:hover{transform:none}}