/* ===========================
   Global Theme & Tokens
   =========================== */
:root{
  --bg:#0a2540;
  --text:#0b1320;
  --muted:#4b5563;
  --surface:#ffffff;
  --border:rgba(12, 22, 40, 0.09);

  --accent-1:#5b9dff;  /* blue */
  --accent-2:#7de1d1;  /* teal */
  --accent-3:#ffe69b;  /* warm soft */

  --wa:#25D366;        /* WhatsApp */
  --viber:#7F4DA0;     /* Viber */
  --fb:#1877F2;        /* Facebook */
  --li:#0A66C2;        /* LinkedIn */

  --shadow:0 10px 30px rgba(10,37,64,.14);
  --radius:14px;
  --radius-lg:20px;
  --maxw:1100px;

  /* Consistent responsive gutter for all screens */
  --gutter: clamp(16px, 4vw, 24px);

  /* Tighter, consistent type scale */
  --step--1: clamp(0.95rem, 0.92rem + 0.1vw, 1.0rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.25vw, 1.10rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.45vw, 1.30rem);
  --step-2:  clamp(1.35rem, 1.18rem + 0.75vw, 1.70rem);
  --step-3:  clamp(1.70rem, 1.40rem + 1.00vw, 2.20rem);
}

/* ===========================
   Resets & Base
   =========================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, Ubuntu, Cantarell, 'Segoe UI Variable', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 500px at 20% -10%, #eef7ff 0%, transparent 60%),
    radial-gradient(1200px 500px at 80% -10%, #eafff9 0%, transparent 60%),
    linear-gradient(180deg,#fff 0%,#f8fbff 100%);
  line-height:1.6;
  -webkit-text-size-adjust: 100%;

  /* *** CRITICAL: Global gutters (with safe-area) *** */
  padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
}

/* Ensure media never overflows container margins */
img, iframe, canvas, video{max-width:100%; height:auto}

/* ===========================
   Layout Containers & Sections
   =========================== */

/* .container centers and limits width; NO horizontal padding here
   because the body already handles gutters globally. */
.container{
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Vertical rhythm for each major section */
.section{padding:64px 0}

/* ===========================
   Typography
   =========================== */
h1{font-size:var(--step-3); line-height:1.15; margin:.2em 0 .35em}
h2{
  font-size:var(--step-2); line-height:1.2; margin:.15em 0 .5em;
  position:relative; padding-bottom:.2rem;
}
h2::after{
  content:""; position:absolute; left:0; bottom:0; width:72px; height:4px;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
  border-radius:3px;
}
h3{font-size:var(--step-1); line-height:1.25; margin:.2em 0 .35em}
p{font-size:var(--step-0); color:#1f2937; margin:.4em 0 .8em}
a{color:var(--bg); text-decoration:none}
a:hover{text-decoration:underline}

/* ===========================
   Icons & Brand Links
   =========================== */
.icon{width:1.1em; height:1.1em; vertical-align:-0.15em; margin-right:6px}
.link-wa{color:var(--wa)}
.link-viber{color:var(--viber)}
.link-fb{color:var(--fb)}
.link-li{color:var(--li)}
.logo-img{width:34px; height:34px; display:block; border-radius:10px}

/* ===========================
   Header / Top Banner
   =========================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .25s ease;
}
.site-header[data-scrolled="true"]{ box-shadow:var(--shadow); }

.header-inner{
  /* Inside .container in HTML; body gutters already apply to page edges */
  display:flex; align-items:center; justify-content:space-between; height:64px;
}

/* Brand block */
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.brand-text{font-size:1.05rem}
.brand-text .dot{color:var(--accent-1)}

/* Nav */
.nav .menu{display:flex; gap:16px; list-style:none; margin:0; padding:0}
.nav-toggle{display:none; background:none; border:none; font-size:24px}

/* Call-to-action button */
.cta{
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  color:#0b1320; padding:10px 14px; border-radius:12px; font-weight:700; text-decoration:none;
  box-shadow:0 6px 16px rgba(91,157,255,.28);
}
.cta:hover{filter:brightness(1.05)}
.nav .lang{padding:6px 10px; border:1px solid var(--border); border-radius:10px}

/* ===========================
   Hero
   =========================== */
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:center; padding:72px 0;
}
.hero-ctas{display:flex; gap:10px; margin:16px 0 6px}
.btn{
  display:inline-block; border-radius:12px; padding:11px 16px; font-weight:700; text-decoration:none; line-height:1;
  border:1px solid var(--border);
  font-size:var(--step-0); background:linear-gradient(180deg,#fff, #fafdff);
}
.btn.primary{background:linear-gradient(135deg,var(--accent-1),var(--accent-2)); color:#0b1320; border:none}
.btn.ghost{background:linear-gradient(180deg,#fff,#f6fbff)}
.badges{display:flex; gap:10px; flex-wrap:wrap; padding:0; margin:12px 0 0; list-style:none}
.badges li{background:linear-gradient(180deg,#eef5ff,#e7faff); color:#0a2540; padding:6px 10px; border-radius:999px; font-size:var(--step--1); border:1px solid #d8ecff}

/* Portrait */
.portrait-card{
  margin:0; padding:14px; background:linear-gradient(180deg,#ffffff,#f7fbff); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow); text-align:center;
}
.portrait-card img{max-width:100%; width:100%; height:auto; border-radius:12px}
.portrait-card figcaption{font-size:.95rem; color:#1f2937}

/* ===========================
   Grids & Cards
   =========================== */
.grid{display:grid; gap:18px}
.cards{grid-template-columns:repeat(4,1fr)}
.card{
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  border:1px solid var(--border); border-radius:14px;
  padding:18px; box-shadow:var(--shadow);
}
.card h3{margin-top:0}
.two-col{display:grid; grid-template-columns:1fr .9fr; gap:22px}

/* ===========================
   Timeline
   =========================== */
.timeline{display:grid; gap:14px}
.t-item{border-left:5px solid var(--accent-2); padding:10px 14px; background:#fff; border-radius:12px; box-shadow:var(--shadow)}

/* ===========================
   Publication list
   =========================== */
.pub-list{margin:0; padding-left:18px; font-size:var(--step-0)}
.pub-list li{margin:.35em 0}

/* ===========================
   Maps
   =========================== */
.map-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;
}
.map-embed{border-radius:16px; overflow:hidden; box-shadow:var(--shadow); background:#0001}
.map-embed iframe{display:block; width:100%; aspect-ratio:16/9; border:0}
.map-embed.small iframe{aspect-ratio:4/3}

/* ===========================
   Contact
   =========================== */
.contact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.link-big{font-weight:800; font-size:var(--step-1)}

/* ===========================
   Footer
   =========================== */
.site-footer{margin-top:56px; border-top:1px solid var(--border); background:linear-gradient(180deg,#f7faff,#f3fbff)}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 0;
}
.footer-inner nav a{margin-right:12px}

/* ===========================
   Floating call
   =========================== */
.floating-call{
  position:fixed; bottom:18px; right:18px; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  color:#0b1320; text-decoration:none; font-size:26px; box-shadow:0 12px 30px rgba(0,0,0,.2); z-index:60;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 1080px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 900px){
  .two-col{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr; padding:56px 0}
}

@media (max-width: 720px){
  /* Mobile nav dropdown should respect gutters and safe areas */
  .nav .menu{
    display:none;
    position:absolute;
    right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
    top:64px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px;
    flex-direction:column;
    gap:8px;
    width:min(88vw, 360px);
    box-shadow:var(--shadow)
  }
  .nav-toggle{display:inline-block}
  .cards{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .map-grid{grid-template-columns:1fr}
}

/* ===========================
   Reduced Motion
   =========================== */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}