/* ===== Palette ===== */
:root{
  --orange:#FF6933;
  --blue:#3D5A80;
  --navy:#293241;
  --teal:#88E7E7;
}

*{ box-sizing:border-box }
html,body{ height:100%; background:var(--navy); color:#fff; margin:0; font:16px/1.5 Inter,system-ui,Segoe UI,Roboto,Arial }
.container{ max-width:1100px; margin:0 auto; padding:0 20px }

.header{ position:sticky; top:0; z-index:40; backdrop-filter:saturate(1.1) blur(8px); background:rgba(41,50,65,.7); border-bottom:1px solid color-mix(in srgb, var(--blue) 40%, transparent) }
.header__inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.header__left{ display:flex; align-items:center; gap:12px }
.logo{ width:40px; height:40px; border-radius:10px; background:var(--orange); object-fit:contain }
.brand{ font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--teal) }
.nav{ display:flex; gap:18px }
.nav a{ color:#d7e5ff; text-decoration:none; font-weight:600 }
.nav a:hover{ color:var(--teal) }
.lang{ display:flex; gap:6px }
.lang__btn{ background:transparent; border:0; color:#cfe9f0; font-weight:700; padding:6px 8px; cursor:pointer }
.lang__btn--active,.lang__btn:hover{ color:var(--teal) }

/* HERO */
.hero{ position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden }
.spotlight{ position:absolute; inset:0; z-index:5; pointer-events:none }
.hero__content{ position:relative; z-index:10; }
.hero__title{ font-size: clamp(36px, 6vw, 72px); line-height:1.05; margin:0 0 16px }
.hero__title span{ color:var(--navy); }
.hero__subtitle{ max-width:780px; color:#1b232d; margin:0 0 22px }
.hero__actions{ display:flex; gap:12px }
.btn{ border-radius:14px; padding:12px 18px; font-weight:800; border:1px solid transparent; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center }
.btn--primary{ background:var(--orange); color:var(--navy) }
.btn--ghost{ border-color:var(--teal); color:var(--teal); background:transparent }
.btn:hover{ transform:translateY(-1px) }

.section{ padding:60px 0 }
.section__title{ font-size:28px; margin:0 0 18px }
.card{ background:var(--blue); border:1px solid color-mix(in srgb, var(--teal) 30%, transparent); border-radius:18px; padding:18px; color:#fff }

/* SERVICES rectangle split via grid-areas */
.tiles-rect{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 120px);
  gap:12px;
}
.tile{
  background:var(--blue);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:18px;
  text-align:left;
  cursor:pointer;
}
.tile:hover{ outline:2px solid var(--teal) }

.area-a{ grid-area: 1 / 1 / 4 / 3; } /* big left */
.area-b{ grid-area: 1 / 3 / 2 / 5; } /* top-right */
.area-c{ grid-area: 2 / 3 / 3 / 4; }
.area-d{ grid-area: 2 / 4 / 4 / 5; }

/* HOW split */
.section--split .split{ display:grid; grid-template-columns:1.2fr 1fr; gap:20px }
.steps{ margin:0; padding-left:20px }
.steps li{ margin-bottom:8px }

/* CASES full bleed */
.cases-full{ position:relative; width:100vw; margin-left:calc(50% - 50vw); overflow:hidden; padding:60px 0 }
.cases-bg{ position:absolute; inset:0; z-index:0; display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; padding:20px }
.cases-bg img{ width:100%; height:100%; object-fit:cover; border-radius:16px; opacity:.9 }
.cases-bg img.blur{ filter:blur(3px) saturate(1.2) }
.cases-full__inner{ position:relative; z-index:1 }
.cases__header{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:16px }
.cases__nav{ background:var(--blue); color:#fff; border:0; font-size:22px; border-radius:12px; width:36px; height:36px; cursor:pointer }
.cases__label{ font-weight:900; letter-spacing:.05em; color:var(--teal) }
.cases__text{ max-width:760px; margin:0 auto; background:rgba(16,22,30,.65) }

/* Footer */
.footer{ padding:28px 0 40px; background:#1f2730; margin-top:40px; border-top:1px solid #2a3644 }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.footer__nav{ display:flex; gap:14px }
.footer__nav a{ color:#b7c7d9; text-decoration:none }
.footer__nav a:hover{ color:var(--teal) }

/* Popups */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:80 }
.popup{ border:0; border-radius:20px; padding:0; background:transparent; z-index:90 }
.popup::backdrop{ background:rgba(0,0,0,.55) }
.popup .form{ width:min(520px, 92vw); background:var(--blue); border-radius:20px; padding:20px }
.form label{ display:grid; gap:6px; margin-bottom:12px }
.form input,.form select{ padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.2); background:#223146; color:#fff }
.form__ok{ margin-top:10px; color:#c0ffd6; font-weight:700 }

/* Responsive */
@media (max-width: 900px){
  .section--split .split{ grid-template-columns:1fr }
  .tiles-rect{ grid-template-columns:1fr 1fr; grid-template-rows:repeat(6, 120px) }
  .area-a{ grid-area: 1 / 1 / 5 / 3 }
  .area-b{ grid-area: 5 / 1 / 6 / 3 }
  .area-c{ grid-area: 6 / 1 / 7 / 2 }
  .area-d{ grid-area: 6 / 2 / 7 / 3 }
}