@import url('../fonts/poppins.css');

:root {
  --navy: #2f4482;

  --navy-dark: #283a6e;
  --cyan: #00d1d9;
  --cyan-soft: #4fd1d9;
  --pale-cyan: #e2f6f7;
  --pale-blue: #e0eafc;
  --ink: #231f20;

  --red: #ef2c37;
  --red-dark: #e0111d;
  --red-donts: #d00d1c;

  --grey-text: #4d4d4d;
  --grey-line: #e3e6ec;
  --grey-bg: #f6f8fb;
  --white: #fff;
  --ok: #077c2d;

  /* Third-party BRAND colours, not part of the design's palette and not
     invented: WhatsApp and Telegram publish these, and the buttons are
     recognised by them. Kept separate from the tokens above so the "only the
     13 colours in the .ai are real" rule still reads true of those. Use them
     ONLY for their own channel's button. The category CTA is ours, not the
     designer's — the design has one plain button (FINDINGS §43).
     ⚠️ A white glyph on --whatsapp is 1.98:1, below the 3:1 WCAG 1.4.11 asks
     for a graphical object. The user's decision 2026-09-15, taking the exact
     brand green knowingly — same call as the #32b4bc mobile trust card. The
     button's shadow gives it the edge its background contrast does not.
     Measured, not estimated: telegram 3.02:1 passes, navy 9.25:1 passes. */
  --whatsapp: #25d366;
  --whatsapp-dark: #1da851;
  --telegram: #229ed9;
  --telegram-dark: #1c88bb;

  --wrap: 1252px;
  --radius: 10px;
  --radius-lg: 18px;

  --shadow: 0 0 15px rgba(35, 31, 32, .33);
  --shadow-sm: 0 0 8px rgba(35, 31, 32, .33);

  --header-h: 140px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--navy); }

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 .6em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1rem; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}
main > .wrap{padding-bottom: 30px;}

/* Visible only to screen readers, until focused (skip link). */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: 15px 30px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--navy-dark); }

.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .85);
}
.btn-outline:hover, .btn-outline:focus-visible {
  background: rgba(255, 255, 255, .15);
}

.btn-call {
  background: var(--red);
  color: var(--white);
  font-size: 1.5rem;
  padding: 20px 34px;
  width: 100%;
}
.btn-call:hover, .btn-call:focus-visible { background: var(--red-dark); }

/* Icon-only channel buttons — the category CTA's three. Square, no label: the
   heading above carries the text, so each one needs an aria-label in the
   markup. The shadow is what separates them from the page; --whatsapp is too
   light to do that on its own (see the token note). */
.btn-channel {
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: var(--radius);
  color: var(--white);
  box-shadow: var(--shadow-sm);
  transition: background-color .15s ease, box-shadow .15s ease,
              transform .15s ease;
}
.btn-channel svg { width: 36px; height: 36px; }
.btn-channel:hover, .btn-channel:focus-visible { box-shadow: var(--shadow); }

.btn-phone { background: var(--navy); }
.btn-phone:hover, .btn-phone:focus-visible { background: var(--navy-dark); }
.btn-whatsapp { background: var(--whatsapp); }
.btn-whatsapp:hover, .btn-whatsapp:focus-visible { background: var(--whatsapp-dark); }
.btn-telegram { background: var(--telegram); }
.btn-telegram:hover, .btn-telegram:focus-visible { background: var(--telegram-dark); }

.btn-block { width: 100%; }

.topbar {
  display: none;
  background: var(--navy);
  color: var(--white);

  min-height: 52px;
  align-items: center;

  font-size: 1.32rem;

  font-weight: 700;
  text-transform: uppercase;
}
.topbar .wrap {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding-block: 8px;
}
.topbar span { display: inline-flex; align-items: center; gap: 7px; }
.topbar svg { width: 15px; height: 15px; flex: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--grey-line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
}
.site-header .nav { margin-left: auto; }

.logo { display: block; flex: none; }

.logo svg, .logo img { width: 219px; height: auto; }

.nav ul {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  font-size: 1.23rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  padding-block: 6px;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--cyan); }

.lang {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  font-size: 1.61rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--navy);
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.lang svg { width: 26px; height: 26px; color: var(--cyan); }
.lang .lang-caret { width: 19px; height: 19px; transition: transform .15s ease; }
.lang[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

/* Language dropdown. Entries for languages that are not live are rendered as
   spans, so they cannot be clicked or focused — a click that does nothing
   invites repeat clicking. */
.lang-switch { position: relative; flex: none; }

/* [hidden] must win over the display value this rule sets, or the panel renders
   open on load. */
.lang-menu[hidden] { display: none; }

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid #e2e6ef;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(16, 26, 56, .13);
}
.lang-menu li { margin: 0; }

.lang-opt {
  display: block;
  padding: 7px 14px 7px 10px;
  border-radius: 5px;
  font-size: .82rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--navy);
}
a.lang-opt:hover, a.lang-opt:focus-visible { background: #eef2fa; color: var(--cyan); }
.lang-opt.is-disabled { color: #9aa3b8; cursor: default; }

@media (max-width: 860px) {
  .lang-menu { right: auto; left: 0; }
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--navy);
}
.nav-toggle svg { width: 26px; height: 26px; margin-inline: auto; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

.site-footer {
  background: var(--navy);
  color: var(--white);
  margin-top: auto;
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 28px;
  margin: 0;
  /* padding-inline: 0 matters. A <ul> carries a UA default
     padding-inline-start of 40px, so `padding-block` alone left it in
     place and justify-content:center then centred the row inside a box
     inset 40px on the left only - the links sat 20px right of centre. */
  padding-block: 20px;
  padding-inline: 0;
  list-style: none;

  font-size: 1.2rem;
}
.site-footer a {
  color: var(--white);
  text-decoration: none;
}
.site-footer a:hover { text-decoration: underline; }

/* Social icons above the footer links - same marks and URLs as the holding
   page (index.htm). */
.site-footer .social {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding-top: 20px;
}
.site-footer .social a { display: block; }
/* 8px between the icons and the links (the ul's own top padding is 20px). */
.site-footer .social + ul { padding-top: 8px; }
.site-footer .social svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: var(--white);
}

.site-footer li { position: relative; }
.site-footer li + li::before {
  content: "|";
  position: absolute;
  left: -15px;
  opacity: .5;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 0 auto; }

.section { padding-block: 54px; }
.section-tight { padding-block: 34px; }

/* No visual treatment by design: the amber box and "PLACEHOLDER COPY"
   label that used to be here were our own unapproved addition. The class
   stays as a greppable hook; the wrapper leaves with the lorem. */
.placeholder p:last-child { margin-bottom: 0; }

/* Points at "#" because the destination does not exist yet. The dotted
   underline marks these known-unfinished rather than broken; remove the
   class with the href when the real target lands. */

.todo-link,
.site-footer a.todo-link {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.todo-link[href="#"] { cursor: not-allowed; }

.btn.todo-link { text-decoration: none; opacity: .92; }

@media (max-width: 900px) {
  :root { --header-h: 68px; }

  .logo svg, .logo img { width: 87px; }

  /* The mobile nav is a drawer with full-width rows, not a cramped bar,
     so the links take the desktop size. */
  .nav a { font-size: 1.23rem; }
  .lang { font-size: 1rem; }

  .site-footer ul { font-size: .81rem; }
  .lang svg { width: 14px; height: 14px; }
  .lang .lang-caret { width: 12px; height: 12px; }

  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.35rem; }

  .nav-toggle { display: block; }

  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--grey-line);
    box-shadow: var(--shadow);
  }
  .nav.is-open { display: block; }
  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 16px;
  }
  .nav li { border-top: 1px solid var(--grey-line); }
  .nav a { display: block; padding: 14px 0; }

  .lang-switch { margin-left: auto; order: 2; }
  .nav-toggle { order: 3; }

  .topbar { display: block; }

  .topbar .wrap { gap: 20px; font-size: .73rem; }
  .section { padding-block: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}