:root{
  --bg: #FBFAFF;
  --card: rgba(255,255,255,0.78);
  --card2: rgba(255,255,255,0.62);
  --text: #1F2937;
  --muted: #556070;
  --line: rgba(31,41,55,0.12);

  /* Pastelsed taustad (logo-sinisega sobivad, aga ei konkureeri) */
  --p1: #FFE9F2; /* roosa */
  --p2: #FFF3D8; /* vanilje */
  --p3: #EAFBF1; /* mint */
  --p4: #F1ECFF; /* lavendel */

  /* Logo-sinine aktsent */
  --brand: #0B67B2;
  --brand-dark: #094F86;

  --shadow: 0 18px 55px rgba(31,41,55,0.12);
  --radius: 18px;
}

*{ box-sizing: border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 10% 10%, var(--p4), transparent 60%),
    radial-gradient(900px 700px at 92% 16%, var(--p1), transparent 55%),
    radial-gradient(1000px 800px at 60% 100%, var(--p3), transparent 60%),
    radial-gradient(900px 700px at 5% 80%, var(--p2), transparent 58%),
    var(--bg);
}

a{ color: inherit; text-decoration: none; }
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.bg-blobs{
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -1;
}
.blob{
  position: absolute;
  filter: blur(42px);
  opacity: 0.9;
  transform: translateZ(0);
}
.b1{ width: 420px; height: 420px; left: -120px; top: 120px; background: var(--p2); border-radius: 50%; }
.b2{ width: 520px; height: 520px; right: -180px; top: 70px; background: var(--p1); border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%; }
.b3{ width: 520px; height: 520px; left: 36%; bottom: -220px; background: var(--p3); border-radius: 55% 45% 50% 50% / 45% 55% 45% 55%; }

.container{
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
  padding-bottom: 40px;
}

.topbar{
  width: min(1100px, calc(100% - 40px));
  margin: 18px auto 0;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 35px rgba(31,41,55,0.08);
  backdrop-filter: blur(10px);
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.logo{
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  padding: 6px;
  box-shadow: 0 10px 22px rgba(31,41,55,0.10);
}
.brand-text{
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #233246;
  opacity: 0.92;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.top-actions{ display:flex; align-items:center; gap: 10px; }

.lang-toggle{
  display:flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.65);
  cursor: pointer;
}
.pill{
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  color: var(--muted);
}
.pill.active{
  background: rgba(11,103,178,0.12);
  color: var(--brand-dark);
}

.hero{
  margin-top: 22px;
  display:grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 18px;
  align-items: stretch;
}

.hero-text{
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.kicker{
  margin: 0 0 10px 0;
  font-weight: 800;
  color: #2C3A4D;
  opacity: 0.9;
}
.title{
  margin: 0 0 10px 0;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.4px;
}
.subtitle{
  margin: 0 0 18px 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: 62ch;
}

.cta-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  font-weight: 900;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.btn:hover{ transform: translateY(-1px); }

.primary{
  background: var(--brand);
  color: white;
  box-shadow: 0 12px 30px rgba(11,103,178,0.22);
}
.primary:hover{
  box-shadow: 0 16px 36px rgba(11,103,178,0.28);
  background: var(--brand-dark);
}

.ghost{
  background: rgba(255,255,255,0.60);
  color: var(--text);
}
.ghost:hover{ background: rgba(255,255,255,0.78); }

.badges{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.badge{
  font-size: 12px;
  font-weight: 900;
  color: #2C3A4D;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.60);
}

.card{
  height: 100%;
  padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.58));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.card-title{
  margin: 0 0 12px 0;
  font-size: 18px;
  letter-spacing: -0.2px;
}
.card-list{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.65;
}
.card-note{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(241,236,255,0.55);
  border: 1px solid rgba(0,0,0,0.06);
  color: #2C3A4D;
  font-weight: 800;
  font-size: 13px;
}

.section{
  margin-top: 18px;
  padding: 24px;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
}
.section-title{
  margin: 0 0 6px 0;
  font-size: 20px;
  letter-spacing: -0.2px;
}
.section-sub{
  margin: 0 0 16px 0;
  color: var(--muted);
  line-height: 1.55;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.tile{
  padding: 16px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.65);
  box-shadow: 0 10px 28px rgba(31,41,55,0.08);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(31,41,55,0.12);
  border-color: rgba(11,103,178,0.22);
}
.tile-title{
  display:block;
  font-weight: 1000;
  letter-spacing: -0.2px;
  margin-bottom: 6px;
}
.tile-sub{
  display:block;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

.hint{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(11,103,178,0.28);
  background: rgba(255,255,255,0.55);
  color: var(--muted);
  line-height: 1.5;
}
.hint-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(11,103,178,0.30);
  margin-top: 6px;
  flex: 0 0 auto;
}

.split{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 12px;
}
.panel{
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.60);
}
.panel.soft{
  background: rgba(241,236,255,0.42);
}
.contact-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.contact-card{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.62);
}
.label{
  font-size: 12px;
  font-weight: 900;
  color: #2C3A4D;
  margin-bottom: 6px;
}
.value{
  color: var(--text);
  font-weight: 900;
}
.tiny{
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

.mini-title{
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 1000;
}
.steps{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.65;
}
.micro{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: var(--muted);
}
.dot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(11,103,178,0.30);
  margin-top: 6px;
  flex: 0 0 auto;
}

.footer{
  margin-top: 14px;
  padding: 14px 0 0;
}
.footer-inner{
  display:flex;
  gap: 10px;
  justify-content:center;
  align-items:center;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}
.sep{ opacity: 0.6; }

@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .contact-cards{ grid-template-columns: 1fr; }
}