:root{
  --bg:#f6f7fb; --bg2:#ffffff;
  --card:#ffffff; --card2:#f0f2f7;
  --text:#0f172a; --muted:#6b7280;
  --line:rgba(15,23,42,.08);
  --accent:#0f172a; --accent2:#374151;
  --gold:#c7a24a; --radius:18px;
  --shadow:0 8px 24px rgba(15,23,42,.08);
  --shadow2:0 12px 30px rgba(15,23,42,.12);
}
*{box-sizing:border-box}
body{
  margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:12px 14px 90px}
header.site{
  position:sticky;top:0;z-index:20;
  background:rgba(246,247,251,.8);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:10px 14px;
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.3px;flex:1 1 auto;min-width:0}
.brand .logo{
  width:34px;height:34px;border-radius:10px;
  background:radial-gradient(60% 60% at 30% 20%, rgba(199,162,74,.35), transparent 60%),
             linear-gradient(135deg,#0f172a,#334155);
  color:#fff;display:grid;place-items:center;box-shadow:var(--shadow);
  font-weight:900;
}
.brand small{display:block;font-weight:600;color:var(--muted);font-size:12px;margin-top:2px}

.search{position:relative;min-width:220px;flex:1 1 260px;max-width:360px;}
.search input{
  width:100%;padding:8px 10px 8px 34px;border-radius:999px;border:1px solid var(--line);
  background:#fff;outline:none;box-shadow:var(--shadow);font-size:14px;
}
.search .icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px}

.nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;flex:1 1 100%}
.nav a{
  text-decoration:none;font-size:14px;padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg2);font-weight:700;
}
.nav a:hover{box-shadow:var(--shadow)}

.lang{display:flex;gap:6px;margin-left:8px;flex-wrap:wrap}

/* dropdowns */
.dropdown{position:relative;display:inline-block}
.dropdown-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg2);
  cursor:pointer; font-weight:800;
}
.dropdown-panel{
  position:absolute; right:0; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:6px; min-width:160px; z-index:40;
  display:none;
}
.dropdown-panel a{
  display:block; padding:8px 10px; border-radius:10px; text-decoration:none; font-size:14px; font-weight:600;
}
.dropdown-panel a:hover{background:var(--card2)}
.dropdown.open .dropdown-panel{display:block}

.hero{
  background:
    radial-gradient(900px 260px at 0% 0%, rgba(199,162,74,.14), transparent 60%),
    radial-gradient(900px 260px at 100% 0%, rgba(15,23,42,.06), transparent 60%),
    var(--bg2);
  border:1px solid var(--line);border-radius:22px;padding:20px 18px;margin-top:12px;box-shadow:var(--shadow);
  overflow:hidden;
}
.hero .badge{display:inline-flex;max-width:100%;white-space:normal;line-height:1.4}
h1{font-size:28px;margin:4px 0 6px}
.sub{color:var(--muted);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
 display:block; }
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow2)}
.card h2{font-size:18px;margin:0 0 6pxword-break:break-word;}
.card p{margin:0 0 8px;color:#1f2937word-break:break-word;}
.btn{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  padding:8px 12px;border-radius:999px;font-weight:800;font-size:14px;box-shadow:0 6px 14px rgba(15,23,42,.18);
}
.list a{color:#111827;text-decoration:none;display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line)}
.list a .more{font-size:12px;color:var(--accent);font-weight:600;}
.list a:hover{color:#000}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.kpi{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;text-align:center;box-shadow:var(--shadow)
}
.kpi b{font-size:18px}

main.article-wrap{max-width:860px;margin:0 auto;padding:0 0 90px}
.article-header{
  background:var(--bg2);border:1px solid var(--line);border-radius:22px;padding:18px;margin-top:12px;box-shadow:var(--shadow)
}
.article-meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.breadcrumbs{font-size:12px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}
.breadcrumbs a{text-decoration:none;color:var(--muted)}
.section{margin-top:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:var(--card2);border:1px solid var(--line);padding:4px 8px;border-radius:999px;color:#374151}
footer.site-footer{margin-top:14px;color:var(--muted);font-size:12px;text-align:center;padding:18px 0}

.cta-fab{
  position:fixed;right:16px;bottom:18px;z-index:50;
  background:linear-gradient(135deg,#0f172a,#374151);
  color:white;font-weight:900;border:none;border-radius:999px;padding:14px 18px;
  box-shadow:0 10px 30px rgba(15,23,42,.25);display:none;cursor:pointer;
}
.mask{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(4px);z-index:60;display:none}
.modal{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92vw,420px);background:#ffffff;border:1px solid var(--line);
  border-radius:18px;padding:16px;z-index:70;display:none;box-shadow:var(--shadow);
}
.modal h4{margin:0 0 6px;font-size:18px;color:#0f172a}
.modal p{font-size:14px;color:var(--muted)}
.modal .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  width:100%;
}
.modal .ghost{width:100%;margin-top:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:transparent;color:#0f172a;cursor:pointer;}

@media (max-width:900px){.grid{grid-template-columns:1fr}.kpis{grid-template-columns:1fr}}
@media (max-width: 640px) {
  .nav a, .dropdown-btn { font-size:13px; padding:6px 10px; border-radius:10px; }
  .brand .logo { width:30px;height:30px;font-size:14px;border-radius:8px; }
}

  .nav { width: 100%; gap:6px; }
  .nav a, .dropdown-btn { font-size:13px; padding:6px 10px; border-radius:10px; }
  .brand .logo { width:30px;height:30px;font-size:14px;border-radius:8px; }
}


/* --- v5 mobile header layout: nav left, language right --- */
@media (max-width: 640px){
  .header-inner{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "brand brand"
      "search search"
      "nav lang";
    align-items:center;
    gap:8px;
  }
  .brand{grid-area:brand}
  .search{grid-area:search}
  .nav{grid-area:nav; margin-left:0; flex:0 0 auto}
  .lang{grid-area:lang; margin-left:0; justify-self:end}
}


/* --- v6 header refinements --- */
.search{max-width:300px}
.search input{padding:7px 10px 7px 30px;font-size:13px}
.search .icon{left:9px;font-size:13px}

/* make nav/ lang align nicer */
.nav{align-items:center}
.lang{align-items:center}

/* v6 mobile grid: brand + search same row, nav + lang same row */
@media (max-width: 640px){
  .header-inner{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "brand search"
      "nav lang";
    align-items:center;
    gap:8px 10px;
  }
  .brand{grid-area:brand}
  .search{grid-area:search; width:100%; max-width:none}
  .search input{height:36px}
  .nav{grid-area:nav; width:auto; justify-self:start}
  .lang{grid-area:lang; justify-self:end}
}


/* --- v7 CTA FAB: bigger, higher, black-gold --- */
.cta-fab{
  right:14px;
  bottom:86px; /* lifted to avoid browser bar */
  padding:16px 22px;
  font-size:15px;
  letter-spacing:.3px;
  border-radius:999px;
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(255,215,100,.9), transparent 55%),
    linear-gradient(135deg,#0b0b0f 0%, #15151c 45%, #0b0b0f 100%);
  border:1px solid rgba(199,162,74,.75);
  box-shadow:
    0 12px 32px rgba(15,23,42,.28),
    0 0 0 2px rgba(199,162,74,.18) inset;
}
.cta-fab::after{
  content:"";
  position:absolute; inset:-6px;
  border-radius:999px;
  border:1px solid rgba(199,162,74,.55);
  opacity:.6;
  animation:pulseGold 1.8s ease-out infinite;
}
@keyframes pulseGold{
  0%{transform:scale(.96);opacity:.75}
  70%{transform:scale(1.08);opacity:0}
  100%{transform:scale(1.08);opacity:0}
}

@media (max-width:640px){
  .cta-fab{
    bottom:110px; /* iOS Safari bottom bar safe */
    padding:18px 24px;
    font-size:16px;
  }
}


/* --- v8 header: search smaller + same layout on desktop --- */

/* default (desktop/tablet): brand+search same row, nav+lang same row below */
.header-inner{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "brand search"
    "nav lang";
  align-items:center;
  gap:10px 12px;
}
.brand{grid-area:brand; min-width:0}
.search{grid-area:search; justify-self:end; width:100%; max-width:420px}
.nav{grid-area:nav}
.lang{grid-area:lang; justify-self:end}

/* base search sizing */
.search input{
  height:38px;
  padding:7px 12px 7px 30px;
  font-size:13.5px;
}
.search .icon{left:9px;font-size:13px}

/* mobile tighter search so it never hits title */
@media (max-width: 640px){
  .search{max-width:220px}
  .search input{
    height:34px;
    padding:6px 10px 6px 28px;
    font-size:12.5px;
  }
  .search .icon{left:8px;font-size:12px}
}

/* very small screens */
@media (max-width: 380px){
  .search{max-width:190px}
  .brand .title{font-size:17px}
}


/* --- v9: ultra-compact mobile search, never collides with title --- */
@media (max-width: 640px){
  .header-inner{
    grid-template-columns:auto auto; /* brand won't be squeezed by search */
  }
  .search{
    max-width:165px;
    justify-self:end;
  }
  .search input{
    height:32px;
    padding:5px 8px 5px 26px;
    font-size:12px;
  }
  .search .icon{left:7px;font-size:11px}
  .brand .title{
    line-height:1.2;
    max-width:100%;
  }
}

/* tiny phones */
@media (max-width: 380px){
  .search{max-width:145px}
  .brand .title{font-size:16px}
}


/* --- v10: shorter search + no collision, placeholder shorter --- */
.search{max-width:380px} /* desktop cap */

@media (max-width: 640px){
  .search{
    max-width:120px;  /* even shorter */
    min-width:120px;
  }
  .search input{
    width:100%;
    height:30px;
    padding:5px 6px 5px 22px;
    font-size:11.5px;
  }
  .search .icon{left:6px;font-size:11px}
}

/* ultra tiny phones */
@media (max-width: 380px){
  .search{max-width:108px; min-width:108px;}
  .search input{font-size:11px;}
}


/* --- v11: mobile nav left aligned (home/category) --- */
@media (max-width: 640px){
  .nav{
    justify-self:start !important;
    justify-content:flex-start !important;
    margin-left:0 !important;
    width:auto !important;
  }
}


/* v22: ensure modal primary button text is perfectly centered */
.modal .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  width:100%;
}

/* v24: mobile category dropdown sizing & position */
@media (max-width:640px){
  .nav .dropdown .dropdown-panel{
    left:12px;
    right:auto;
    max-width:230px;
    width:70vw;
  }
}


}