
:root{
  --brand:#ef4444; /* MSK red */
  --accent:#2563eb; /* blue */
  --text:#1f2937;  /* gray-800 */
  --muted:#6b7280; /* gray-500 */
  --bg:#ffffff;
  --card:#f9fafb;
  --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,Segoe UI,Roboto;color:var(--text);background:var(--bg)}
img{max-width:100%;height:auto}

/* ---------- Header / Nav ---------- */
.site-header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid #e5e7eb;background:#fff;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--text);text-decoration:none}
.brand img{height:40px}
nav a{margin:0 8px;text-decoration:none;color:var(--muted);font-weight:600}
nav a.active, nav a:hover{color:var(--brand)}
nav a.cta{color:#fff;background:var(--brand);padding:8px 12px;border-radius:10px}

/* ---------- Hero / Content ---------- */
.hero{text-align:center;padding:60px 20px}
.hero h1{font-size:40px;margin:0}
.hero p{max-width:850px;margin:12px auto 20px;color:var(--muted)}
.hero-kpis{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.kpi{background:var(--card);border-radius:12px;padding:14px 16px;min-width:160px;box-shadow:0 2px 6px rgba(0,0,0,.06);text-align:center}
.kpi span{display:block;font-size:18px;font-weight:800;color:var(--brand)}
.kpi small{color:var(--muted)}
.button.primary{background:var(--brand);color:#fff;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:700}
.muted{color:var(--muted)}
.footnote{font-size:12px}

/* ---------- Grid / Cards ---------- */
.grid{display:grid;gap:18px;padding:20px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){
  .grid.two{grid-template-columns:1fr}
  .grid.four{grid-template-columns:1fr 1fr}
}
.card{background:var(--card);border-radius:var(--radius);padding:18px 20px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.content{max-width:980px;margin:0 auto;padding:28px 20px}
.content h1{margin-top:0}

/* ---------- Footer ---------- */
.site-footer{text-align:center;padding:24px 20px;border-top:1px solid #e5e7eb;background:#fff;color:var(--muted)}

/* ---------- Layout helpers ---------- */
.img-resp{width:100%;height:auto;display:block;border-radius:12px;}
.img-card{background:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.08);padding:12px;}
.figure{margin:0;}

/* ---------- Buttons + tap targets ---------- */
.button,.cta,nav a{min-height:44px;line-height:44px;padding:0 14px;}

/* ---------- Header / Mobile nav (base) ---------- */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;}
.brand img{height:36px;width:auto;vertical-align:middle;margin-right:8px;}
#nav-toggle{display:none;background:#0d1b2a;color:#fff;border:0;border-radius:10px;padding:10px 12px;}

/* Hide menu on small screens until toggled */
@media (max-width:860px){
  .grid.two,.grid.three{grid-template-columns:1fr;}
  .hero{padding:60px 16px !important;}
  nav{display:none;flex-direction:column;gap:8px;background:#0d1b2a;padding:10px;border-radius:12px;}
  nav a{color:#fff !important;display:block;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.06);}
  .site-header{align-items:flex-start;}
  #nav-toggle{display:inline-flex;align-items:center;gap:8px;}
  nav.open{display:flex;}
  .button.primary,.button{width:100%;text-align:center;margin-bottom:8px;}
}

/* ---------- Optional overlay badge scaling ---------- */
@media (max-width:600px){
  .badge--msk{width:84px !important;bottom:8% !important;right:6% !important;}
}

/* ---------- Mobile nav behavior (explicit ids) ---------- */
#nav-toggle{ display:none; }
.site-header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; }
@media (max-width:860px){
  #nav-toggle{
    display:inline-flex; align-items:center; gap:8px;
    background:#0d1b2a; color:#fff; border:0; border-radius:10px;
    padding:10px 12px; cursor:pointer;
  }
  #main-nav{
    display:none; flex-direction:column; gap:8px;
    background:#0d1b2a; padding:10px; border-radius:12px;
  }
  #main-nav.open{ display:flex; }
  #main-nav a{
    color:#fff; display:block; padding:10px 12px; border-radius:8px;
    background:rgba(255,255,255,.06);
  }
  .hero{ padding:60px 16px !important; }
}

/* ---------- Mobile polish pack ---------- */

/* Cards & figures (safe duplicates consolidated) */
.img-card{background:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.08);padding:12px;}
.figure{margin:0;}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.grid.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}

@media (max-width:860px){
  .grid.two,.grid.three{grid-template-columns:1fr;gap:16px;}
  .hero{padding:56px 16px !important;}
  .content{padding:0 16px;}
  #main-nav{display:none;flex-direction:column;gap:8px;background:#0d1b2a;padding:10px;border-radius:12px;}
  #main-nav.open{display:flex;}
  #main-nav a{color:#fff;display:block;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.06);}
  .site-footer img[alt*="Certifications"]{width:96% !important;max-width:520px !important;margin-bottom:18px;}
  .button.primary,.button{width:100%;text-align:center;margin-bottom:8px;}
}

/* Extra small phones */
@media (max-width:480px){
  h1{font-size:1.6rem;}
  h2{font-size:1.25rem;}
}

/* ---------- Partner page form polish ---------- */
.form-section{max-width:900px;margin:50px auto;background:#fff;padding:40px 50px;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.1);}
.form-section form input,
.form-section form textarea{width:100%;padding:15px;margin:10px 0;border:1px solid #ccc;border-radius:8px;font-size:1rem;}
.form-section form button{display:block;width:100%;background:#004aad;color:#fff;padding:15px;font-size:1.1rem;border:0;border-radius:8px;cursor:pointer;transition:background .3s;}
.form-section form button:hover{background:#0066cc;}
@media (max-width:860px){
  .form-section{margin:24px 12px;padding:20px;}
  .form-section h2{font-size:1.4rem;margin-bottom:.5rem;}
}

/* ---------- Google Translate: Mobile placement + SMALL bubble ---------- */
/* Desktop keeps the default (from HTML positioning). Mobile overrides below. */
@media (max-width:860px){
  #google_translate_element{
    position:fixed !important;
    top:50% !important;             /* vertical middle */
    right:0 !important;             /* dock to right edge */
    left:auto !important;
    transform:translateY(-50%);     /* perfect vertical center */
    z-index:9999;

    /* SMALL, subtle bubble */
    background:rgba(255,255,255,0.82);
    border-radius:10px 0 0 10px;    /* rounded left corners */
    padding:4px 6px;                /* smaller than before */
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
    transition:background .25s ease, box-shadow .25s ease;
  }
  #google_translate_element:hover{
    background:rgba(255,255,255,0.94);
    box-shadow:0 4px 12px rgba(0,0,0,0.22);
  }

  /* Make the dropdown itself more compact */
  #google_translate_element .goog-te-gadget{font-size:12px !important; line-height:1.1;}
  #google_translate_element .goog-te-combo{
    font-size:12px !important;
    padding:2px 4px !important;
    height:auto !important;
  }
}

/* Ultra-small phones: shrink a bit more to avoid overlap */
@media (max-width:400px){
  #google_translate_element{
    padding:3px 4px;
    transform:translateY(-50%) scale(0.92); /* slight downscale */
    transform-origin:right center;
  }
}
