:root {
  --colorBg: #FBF5EC;
  --colorBgAlt: #F4E9D8;
  --colorSurface: #FFFDF8;
  --colorSurfaceAlt: #FFF8ED;
  --colorText: #362E24;
  --colorTextMuted: #6B5D4C;
  --colorTextSoft: #8A7C68;
  --colorPrimary: #C1603C;
  --colorPrimaryDark: #9C4A2C;
  --colorPrimaryLight: #E38257;
  --colorSecondary: #6E7B4F;
  --colorAccent: #D89B4A;
  --colorRose: #C98B84;
  --colorBorder: #E7D9C3;
  --gradientPrimary: linear-gradient(135deg, #C1603C 0%, #D89B4A 100%);
  --gradientSoft: linear-gradient(135deg, rgba(193,96,60,0.10), rgba(216,155,74,0.14));
  --shadowSm: 0 1px 2px rgba(90,58,30,0.08);
  --shadowMd: 0 4px 14px rgba(90,58,30,0.10), 0 2px 4px rgba(90,58,30,0.06);
  --shadowLg: 0 24px 48px -16px rgba(90,58,30,0.24), 0 10px 20px -8px rgba(90,58,30,0.14);
  --radiusSm: 8px;
  --radiusMd: 14px;
  --radiusLg: 22px;
  --radiusXl: 32px;
  --transitionBase: 0.35s cubic-bezier(.4,0,.2,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito Sans', sans-serif;
  background: var(--colorBg);
  color: var(--colorText);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 64px;

  @media (min-width: 900px) { padding-bottom: 0; }
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; transition: color var(--transitionBase); }

h1, h2, h3, h4 { font-family: 'Nunito Sans', sans-serif; font-weight: 800; color: var(--colorText); line-height: 1.2; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.revealOnScroll { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.revealOnScroll.isVisible { opacity: 1; transform: translateY(0); }

.sectionHead {
  max-width: 720px;
  margin-bottom: 48px;
  & .sectionHead_tag {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--colorPrimaryDark);
    background: var(--gradientSoft);
    padding: 6px 14px;
    border-radius: var(--radiusSm);
    margin-bottom: 16px;
  }
  & .sectionHead_title {
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    margin-bottom: 14px;
  }
  & .sectionHead_text { color: var(--colorTextMuted); font-size: 1.05rem; }
}


.siteHeader {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(251,245,236,0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transitionBase);

  &::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 50%;
    width: 100%;
    height: 1px;
    background: var(--gradientPrimary);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.5s cubic-bezier(.4,0,.2,1);
  }
  &.isScrolled::after { transform: translateX(-50%) scaleX(1); }
  &.isScrolled { box-shadow: 0 4px 20px rgba(90,58,30,0.06); }

  & .siteHeader_inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  & .siteHeader_logo {
    display: flex;
    align-items: center;
    gap: 10px;
    & .siteHeader_logoText {
      font-size: 1.3rem;
      font-weight: 800;
      color: var(--colorPrimaryDark);
    }
  }

  & .siteHeader_nav {
    display: none;
    align-items: center;
    gap: 8px;

    @media (min-width: 900px) { display: flex; }
  }

  & .siteHeader_link {
    padding: 10px 16px;
    border-radius: var(--radiusMd);
    font-weight: 600;
    color: var(--colorText);
    transition: background var(--transitionBase), color var(--transitionBase);
    &:hover { background: var(--colorBgAlt); color: var(--colorPrimaryDark); }
  }
  & .siteHeader_linkActive { color: var(--colorPrimaryDark); }

  & .siteHeader_linkCta {
    background: var(--gradientPrimary);
    color: #fff;
    box-shadow: var(--shadowMd);
    &:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); }
  }

  & .siteHeader_burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: none;
    background: var(--colorSurfaceAlt);
    border-radius: var(--radiusMd);
    cursor: pointer;
    align-items: center;
    box-shadow: var(--shadowSm);
    transition: transform var(--transitionBase);
    &:hover { transform: scale(1.05); }
    & span {
      display: block;
      width: 20px;
      height: 2px;
      background: var(--colorPrimaryDark);
      border-radius: 2px;
      transition: all var(--transitionBase);
    }

    @media (min-width: 900px) { display: none; }
  }
}


.mobileMenu {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--colorPrimaryDark);
  background-image: var(--gradientPrimary);
  clip-path: circle(0px at var(--originX, 90%) var(--originY, 5%));
  transition: clip-path 0.65s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;

  &.isOpen { clip-path: circle(150% at var(--originX, 90%) var(--originY, 5%)); pointer-events: auto; }

  & .mobileMenu_close {
    position: absolute;
    top: 20px; right: 24px;
    width: 44px; height: 44px;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 1.8rem;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transitionBase);
    &:hover { background: rgba(255,255,255,0.28); }
  }

  & .mobileMenu_nav {
    display: flex;
    flex-direction: column;
    gap: 22px;
    text-align: center;
    & a {
      font-size: 1.6rem;
      font-weight: 700;
      color: #fff;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
  }

  &.isOpen .mobileMenu_nav a {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
  }
}


.bottomNav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 300;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: rgba(255,253,248,0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--colorBorder);
  box-shadow: 0 -6px 20px rgba(90,58,30,0.08);
  padding: 8px 6px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));

  & .bottomNav_item {
    width: 48px; height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--colorTextMuted);
    border-radius: var(--radiusMd);
    transition: color var(--transitionBase), background var(--transitionBase), transform var(--transitionBase);
    &:hover { color: var(--colorPrimaryDark); background: var(--colorBgAlt); }
  }
  & .bottomNav_itemActive { color: var(--colorPrimaryDark); background: var(--gradientSoft); }

  @media (min-width: 900px) { display: none; }
}


.mainHero {
  position: relative;
  padding: 56px 0 40px;
  overflow: hidden;

  & .mainHero_bg {
    position: absolute;
    top: -140px; right: -160px;
    width: 480px; height: 480px;
    background: var(--gradientPrimary);
    opacity: 0.16;
    border-radius: 50%;
    filter: blur(10px);
  }

  & .mainHero_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1;

    @media (min-width: 900px) { grid-template-columns: 1.1fr 0.9fr; }
  }

  & .mainHero_badge {
    display: inline-block;
    background: var(--colorSurface);
    border: 1px solid var(--colorBorder);
    color: var(--colorPrimaryDark);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 20px;
    box-shadow: var(--shadowSm);
  }

  & .mainHero_title {
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    margin-bottom: 20px;
    letter-spacing: -0.01em;
  }

  & .mainHero_text {
    font-size: 1.1rem;
    color: var(--colorTextMuted);
    max-width: 560px;
    margin-bottom: 28px;
  }

  & .mainHero_actions { display: flex; flex-wrap: wrap; gap: 14px; }

  & .mainHero_media {
    border-radius: var(--radiusXl);
    overflow: hidden;
    box-shadow: var(--shadowLg);
    border: 1px solid var(--colorBorder);
    & img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
  }

  & .mainHero_cardsRow {
    margin-top: 48px;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 6px 4px 16px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 1;

    &::-webkit-scrollbar { height: 6px; }
    &::-webkit-scrollbar-thumb { background: var(--colorBorder); border-radius: 4px; }
  }
}

.mainHero_btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radiusMd);
  font-weight: 700;
  font-size: 0.98rem;
  border: none;
  cursor: pointer;
  transition: transform var(--transitionBase), box-shadow var(--transitionBase), filter var(--transitionBase);
}
.mainHero_btnPrimary {
  background: var(--gradientPrimary);
  color: #fff;
  box-shadow: var(--shadowMd);
  &:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: var(--shadowLg); }
  &:active { transform: translateY(0); }
}
.mainHero_btnGhost {
  background: var(--colorSurface);
  border: 1px solid var(--colorBorder);
  color: var(--colorText);
  &:hover { background: var(--colorBgAlt); transform: translateY(-2px); }
}

.miniCard {
  flex: 0 0 240px;
  scroll-snap-align: start;
  background: var(--colorSurface);
  border: 1px solid var(--colorBorder);
  border-radius: var(--radiusLg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadowSm);
  transition: transform var(--transitionBase), box-shadow var(--transitionBase), border-color var(--transitionBase);

  &:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadowLg);
    border-color: var(--colorPrimaryLight);
  }

  & .miniCard_icon {
    width: 42px; height: 42px;
    border-radius: var(--radiusMd);
    background: var(--gradientSoft);
    color: var(--colorPrimaryDark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
  }
  & .miniCard_title { font-weight: 700; font-size: 1.02rem; }
  & .miniCard_text { color: var(--colorTextMuted); font-size: 0.88rem; }
}


.widgetSection, .pillarsSection { padding: 72px 0; }

.widgetGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;

  @media (min-width: 700px) { grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 1000px) { grid-template-columns: repeat(4, 1fr); }
}

.widgetCard {
  background: var(--colorSurface);
  border: 1px solid var(--colorBorder);
  border-radius: var(--radiusLg);
  padding: 28px;
  box-shadow: var(--shadowSm);
  transition: transform var(--transitionBase), box-shadow var(--transitionBase);

  &:hover { transform: translateY(-4px); box-shadow: var(--shadowMd); }

  & .widgetCard_icon {
    width: 46px; height: 46px;
    border-radius: var(--radiusMd);
    background: var(--gradientPrimary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 16px;
  }
  & .widgetCard_title { font-size: 1.1rem; margin-bottom: 8px; }
  & .widgetCard_text { color: var(--colorTextMuted); font-size: 0.95rem; }
}
.widgetCard_big {
  @media (min-width: 1000px) { grid-column: span 2; grid-row: span 2; }
  & .widgetCard_title { font-size: 1.35rem; }
  & .widgetCard_text { font-size: 1rem; }
}
.widgetCard_wide {
  @media (min-width: 1000px) { grid-column: span 2; }
}


.photoSection { padding: 24px 0 72px; }
.photoGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;

  @media (min-width: 700px) { grid-template-columns: repeat(4, 1fr); }
}
.photoGrid_item {
  border-radius: var(--radiusLg);
  overflow: hidden;
  box-shadow: var(--shadowMd);
  border: 1px solid var(--colorBorder);
  & img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform 0.6s ease; }
  &:hover img { transform: scale(1.05); }

  @media (min-width: 700px) {
    &.photoGrid_itemLarge { grid-column: span 2; grid-row: span 2; }
    &.photoGrid_itemWide { grid-column: span 2; }
  }
}

.twoImageGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  & img { width: 100%; border-radius: var(--radiusLg); box-shadow: var(--shadowMd); border: 1px solid var(--colorBorder); aspect-ratio: 4/3; object-fit: cover; }

  @media (min-width: 700px) { grid-template-columns: repeat(2, 1fr); }
}


.programsSection { padding: 0 0 80px; }
.programGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 28px;

  @media (min-width: 700px) { grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 1100px) { grid-template-columns: repeat(5, 1fr); }
}
.programCard {
  background: var(--colorSurfaceAlt);
  border: 1px solid var(--colorBorder);
  border-radius: var(--radiusLg);
  padding: 26px 22px;
  transition: transform var(--transitionBase), box-shadow var(--transitionBase);
  &:hover { transform: translateY(-5px); box-shadow: var(--shadowMd); }
  & .programCard_num {
    font-size: 1.6rem;
    font-weight: 800;
    background: var(--gradientPrimary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: block;
    margin-bottom: 10px;
  }
  & .programCard_title { font-size: 1.05rem; margin-bottom: 8px; }
  & .programCard_text { color: var(--colorTextMuted); font-size: 0.92rem; }
}

.linkArrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--colorPrimaryDark);
  transition: gap var(--transitionBase), color var(--transitionBase);
  &:hover { gap: 14px; }
}


.stepsSection { padding: 0 0 80px; }
.stepsList {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;

  @media (min-width: 700px) { grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 1000px) { grid-template-columns: repeat(4, 1fr); }
}
.stepItem {
  position: relative;
  padding: 26px 22px 22px;
  background: var(--colorSurface);
  border: 1px solid var(--colorBorder);
  border-radius: var(--radiusLg);
  box-shadow: var(--shadowSm);
  & .stepItem_num {
    display: inline-flex;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--gradientPrimary);
    color: #fff;
    font-weight: 800;
    margin-bottom: 14px;
  }
  & .stepItem_title { font-size: 1.02rem; margin-bottom: 8px; }
  & .stepItem_text { color: var(--colorTextMuted); font-size: 0.92rem; }
}


.blogSection { padding: 0 0 80px; }
.blogGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;

  @media (min-width: 700px) { grid-template-columns: repeat(3, 1fr); }
}
.blogCard {
  background: var(--colorSurface);
  border: 1px solid var(--colorBorder);
  border-radius: var(--radiusLg);
  overflow: hidden;
  box-shadow: var(--shadowSm);
  transition: transform var(--transitionBase), box-shadow var(--transitionBase);
  display: flex;
  flex-direction: column;
  &:hover { transform: translateY(-5px); box-shadow: var(--shadowLg); }

  & .blogCard_image { aspect-ratio: 16/10; overflow: hidden; & img { width: 100%; height: 100%; object-fit: cover; } }
  & .blogCard_body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  & .blogCard_title { font-size: 1.08rem; }
  & .blogCard_excerpt { color: var(--colorTextMuted); font-size: 0.94rem; flex: 1; }
  & .blogCard_link {
    background: none;
    border: none;
    color: var(--colorPrimaryDark);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 0;
    align-self: flex-start;
    transition: gap var(--transitionBase);
    &:hover { gap: 14px; }
  }
}

.blogModal {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;

  &.isOpen { display: flex; }

  & .blogModal_overlay {
    position: absolute;
    inset: 0;
    background: rgba(54,46,36,0.55);
    backdrop-filter: blur(4px);
  }

  & .blogModal_content {
    position: relative;
    background: var(--colorSurface);
    border-radius: var(--radiusLg);
    max-width: 620px;
    width: 100%;
    max-height: 82vh;
    overflow-y: auto;
    padding: 40px 32px;
    box-shadow: var(--shadowLg);
    z-index: 1;
    animation: modalIn 0.35s ease;

    & h3 { margin: 10px 0 16px; font-size: 1.4rem; }
    & p { margin-bottom: 14px; color: var(--colorTextMuted); }
  }

  & .blogModal_close {
    position: absolute;
    top: 16px; right: 16px;
    width: 38px; height: 38px;
    border: none;
    background: var(--colorBgAlt);
    border-radius: 50%;
    font-size: 1.4rem;
    cursor: pointer;
    transition: background var(--transitionBase);
    &:hover { background: var(--colorRose); color: #fff; }
  }
}
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }


.ctaBanner {
  padding: 60px 0;
  background: var(--gradientPrimary);
  position: relative;
  overflow: hidden;
  &::before {
    content: '';
    position: absolute;
    top: -80px; left: -80px;
    width: 300px; height: 300px;
    background: rgba(255,255,255,0.12);
    border-radius: 50%;
  }
  & .ctaBanner_inner { text-align: center; position: relative; z-index: 1; }
  & .ctaBanner_title { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 14px; }
  & .ctaBanner_text { color: rgba(255,255,255,0.9); margin-bottom: 26px; max-width: 520px; margin-inline: auto; }
  & .mainHero_btnPrimary { background: #fff; color: var(--colorPrimaryDark); box-shadow: var(--shadowMd); &:hover { color: var(--colorPrimaryDark); } }
}


.pageHero {
  padding: 60px 0 40px;
  & .pageHero_title { font-size: clamp(2rem, 4.4vw, 2.9rem); margin: 16px 0; }
  & .pageHero_text { color: var(--colorTextMuted); font-size: 1.05rem; max-width: 680px; }
}


.storySection, .teamSection { padding: 40px 0 72px; }
.storySection_grid, .teamSection_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;

  @media (min-width: 900px) { grid-template-columns: 1.1fr 0.9fr; }
}
.teamSection_grid { @media (min-width: 900px) { grid-template-columns: 0.9fr 1.1fr; } }
.storySection_text, .teamSection_text {
  & h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: 18px; }
  & p { margin-bottom: 14px; color: var(--colorTextMuted); }
}
.storySection_media img, .teamSection_media img {
  width: 100%;
  border-radius: var(--radiusXl);
  box-shadow: var(--shadowLg);
  border: 1px solid var(--colorBorder);
  aspect-ratio: 4/3;
  object-fit: cover;
}


.formatSection { padding: 40px 0; }
.formatSection_table { overflow-x: auto; margin-bottom: 12px; }
.formatSection_note { color: var(--colorTextSoft); font-size: 0.88rem; }

.dataTable {
  width: 100%;
  border-collapse: collapse;
  background: var(--colorSurface);
  border-radius: var(--radiusMd);
  overflow: hidden;
  box-shadow: var(--shadowSm);
  & th, & td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--colorBorder); font-size: 0.94rem; }
  & th { background: var(--colorBgAlt); color: var(--colorPrimaryDark); font-weight: 700; }
  & tr:last-child td { border-bottom: none; }
}

.modulesSection { padding: 20px 0 72px; }
.moduleBlock {
  display: flex;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--colorBorder);
  &:last-child { border-bottom: none; }
  & .moduleBlock_num {
    flex: 0 0 60px;
    font-size: 1.8rem;
    font-weight: 800;
    background: var(--gradientPrimary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  & .moduleBlock_body {
    & h3 { font-size: 1.25rem; margin-bottom: 10px; }
    & p { color: var(--colorTextMuted); margin-bottom: 10px; }
  }
}


.methodsSection { padding: 20px 0 60px; }
.methodGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;

  @media (min-width: 700px) { grid-template-columns: repeat(2, 1fr); }
}
.methodCard {
  background: var(--colorSurface);
  border: 1px solid var(--colorBorder);
  border-radius: var(--radiusLg);
  padding: 28px;
  box-shadow: var(--shadowSm);
  transition: transform var(--transitionBase), box-shadow var(--transitionBase);
  &:hover { transform: translateY(-4px); box-shadow: var(--shadowMd); }
  & .methodCard_icon {
    width: 46px; height: 46px;
    border-radius: var(--radiusMd);
    background: var(--gradientSoft);
    color: var(--colorPrimaryDark);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 14px;
  }
  & h3 { margin-bottom: 10px; }
  & p { color: var(--colorTextMuted); margin-bottom: 10px; font-size: 0.95rem; }
  & .methodCard_note { font-size: 0.85rem; color: var(--colorTextSoft); font-style: italic; }
}


.contactSection { padding: 20px 0 72px; }
.contactSection_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;

  @media (min-width: 950px) { grid-template-columns: 1.3fr 0.9fr; }
}
.contactCard {
  background: var(--colorSurface);
  border: 1px solid var(--colorBorder);
  border-radius: var(--radiusXl);
  padding: 36px;
  box-shadow: var(--shadowMd);
  & h2 { margin-bottom: 6px; }
  & .contactCard_note { color: var(--colorTextSoft); font-size: 0.88rem; margin-bottom: 24px; }
}
.formRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;

  @media (min-width: 600px) { grid-template-columns: 1fr 1fr; }
}
.formGroup {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  & label { font-weight: 600; font-size: 0.92rem; color: var(--colorText); }
  & input, & select, & textarea {
    font-family: inherit;
    padding: 13px 16px;
    border-radius: var(--radiusMd);
    border: 1px solid var(--colorBorder);
    background: var(--colorSurfaceAlt);
    color: var(--colorText);
    font-size: 0.98rem;
    transition: border-color var(--transitionBase), box-shadow var(--transitionBase), background var(--transitionBase);
    &:focus { outline: none; border-color: var(--colorPrimary); box-shadow: 0 0 0 3px rgba(193,96,60,0.14); background: var(--colorSurface); }
  }
  & textarea { resize: vertical; min-height: 120px; }
}
.formGroup_checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  & input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--colorPrimary); }
  & label { font-weight: 400; font-size: 0.9rem; color: var(--colorTextMuted); }
}
.formActions { margin-top: 8px; }

.contactInfoCol { display: flex; flex-direction: column; gap: 18px; }
.infoCard {
  background: var(--colorSurfaceAlt);
  border: 1px solid var(--colorBorder);
  border-radius: var(--radiusLg);
  padding: 22px;
  box-shadow: var(--shadowSm);
  & h3 { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; margin-bottom: 10px; color: var(--colorPrimaryDark); }
  & p { color: var(--colorTextMuted); font-size: 0.94rem; }
  & a { color: var(--colorPrimaryDark); font-weight: 600; &:hover { text-decoration: underline; } }
}

.mapSection { padding-bottom: 80px; }
.mapSection_frame {
  border-radius: var(--radiusLg);
  overflow: hidden;
  box-shadow: var(--shadowMd);
  border: 1px solid var(--colorBorder);
  & iframe { display: block; }
}


.thanksSection {
  padding: 100px 0;
  text-align: center;
  & .thanksSection_icon { font-size: 3rem; color: var(--colorSecondary); display: block; margin-bottom: 20px; }
  & h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 16px; }
  & p { color: var(--colorTextMuted); max-width: 520px; margin: 0 auto 12px; }
  & .thanksSection_redirect { font-weight: 600; color: var(--colorPrimaryDark); margin-bottom: 26px; }
}


.legalPage {
  padding: 56px 0 80px;
  max-width: 860px;
  margin: 0 auto;

  & h1 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); margin-bottom: 6px; }
  & .legalPage_updated { color: var(--colorTextSoft); font-size: 0.9rem; margin-bottom: 30px; }
  & h2 { font-size: 1.25rem; margin: 32px 0 12px; color: var(--colorPrimaryDark); }
  & p { color: var(--colorTextMuted); margin-bottom: 14px; }
  & a { color: var(--colorPrimaryDark); font-weight: 600; &:hover { text-decoration: underline; } }
}
.legalPage .container { padding: 0 24px; }

.legalDefinitions {
  margin: 16px 0 24px;
  & dt { font-weight: 700; color: var(--colorText); margin-top: 14px; }
  & dd { color: var(--colorTextMuted); margin-left: 0; margin-top: 4px; }
}


.pageFooter {
  background: var(--colorPrimaryDark);
  color: rgba(255,255,255,0.85);
  margin-top: auto;

  & .pageFooter_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 64px 24px 40px;

    @media (min-width: 700px) { grid-template-columns: repeat(2, 1fr); }
    @media (min-width: 1000px) { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  }

  & .pageFooter_col {
    & h4 { color: #fff; font-size: 1rem; margin-bottom: 16px; }
    & p { font-size: 0.92rem; line-height: 1.6; color: rgba(255,255,255,0.72); }
  }

  & .pageFooter_logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    & span { font-size: 1.2rem; font-weight: 800; color: #fff; }
  }

  & .pageFooter_links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.92rem;
    color: rgba(255,255,255,0.8);
    & li { display: flex; align-items: flex-start; gap: 8px; }
    & a { transition: color var(--transitionBase); &:hover { color: #fff; } }
  }

  & .pageFooter_bottom {
    border-top: 1px solid rgba(255,255,255,0.14);
    padding: 20px 24px;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
  }
}

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


.cookieBell {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 400;

  @media (min-width: 900px) { bottom: 24px; }

  & .cookieBell_btn {
    width: 54px; height: 54px;
    border-radius: 50%;
    border: none;
    background: var(--gradientPrimary);
    color: #fff;
    font-size: 1.3rem;
    box-shadow: var(--shadowLg);
    cursor: pointer;
    position: relative;
    transition: transform var(--transitionBase);
    &:hover { transform: scale(1.08); }
  }

  & .cookieBell_badge {
    position: absolute;
    top: -3px; right: -3px;
    width: 14px; height: 14px;
    background: var(--colorRose);
    border: 2px solid var(--colorBg);
    border-radius: 50%;
    display: none;
  }
  & .cookieBell_badge.isVisible { display: block; }

  & .cookiePanel {
    position: absolute;
    bottom: 68px;
    right: 0;
    width: min(340px, 88vw);
    background: var(--colorSurface);
    border: 1px solid var(--colorBorder);
    border-radius: var(--radiusLg);
    box-shadow: var(--shadowLg);
    padding: 24px;
    opacity: 0;
    transform: translateY(20px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;

    &.isOpen { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

    & h4 { margin-bottom: 10px; font-size: 1.02rem; }
    & p { font-size: 0.85rem; color: var(--colorTextMuted); margin-bottom: 16px; & a { color: var(--colorPrimaryDark); font-weight: 600; } }
  }

  & .cookiePanel_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid var(--colorBorder);
    font-size: 0.9rem;
    &:first-of-type { border-top: none; }
  }

  & .cookiePanel_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
  }
  & .cookiePanel_btnGhost, & .cookiePanel_btnPrimary {
    flex: 1;
    padding: 10px 12px;
    border-radius: var(--radiusMd);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--colorBorder);
    background: var(--colorSurfaceAlt);
    color: var(--colorText);
    transition: background var(--transitionBase), transform var(--transitionBase);
    &:hover { transform: translateY(-1px); }
  }
  & .cookiePanel_btnPrimary { background: var(--gradientPrimary); color: #fff; border: none; }
}

.cookieSwitch {
  position: relative;
  display: inline-block;
  width: 42px; height: 24px;
  & input { opacity: 0; width: 0; height: 0; }
  & span {
    position: absolute; inset: 0;
    background: var(--colorBorder);
    border-radius: 999px;
    transition: background var(--transitionBase);
    &::before {
      content: '';
      position: absolute;
      width: 18px; height: 18px;
      left: 3px; top: 3px;
      background: #fff;
      border-radius: 50%;
      transition: transform var(--transitionBase);
      box-shadow: var(--shadowSm);
    }
  }
  & input:checked + span { background: var(--colorSecondary); }
  & input:checked + span::before { transform: translateX(18px); }
}