:root {
  /* Цветовая палитра для яркой темы */
  --color-primary: #267dfa;
  --color-primary-dark: #1859a5;
  --color-accent: #2be8c0;
  --color-accent-dark: #14a484;
  --color-gradient-start: #47c5ff;
  --color-gradient-mid: #13e7b7;
  --color-gradient-end: #4865fa;
  --color-bg-pale: #f4f6fa;
  --color-bg-white: #ffffff;
  --color-bg-glass: rgba(255, 255, 255, 0.6);
  --color-bg-dark: #172647;
  --color-bg-footer: #162241;
  --color-bg-shadow: rgba(41, 62, 105, 0.07);
  --color-border: #ebf2f6;
  --color-text-main: #232841;
  --color-text-dark: #151924;
  --color-text-bright: #ffffff;
  --color-btn-hover: #1648a6;
  --color-btn-glow: #7efbe1;
  --color-link: #1753e8;
  --color-link-hover: #0acfbe;
  --color-card-bg: #f9fbfd;
  --color-card-glass: rgba(255,255,255,0.88);
  --color-shadow-card: 0 4px 28px 0 rgba(77,139,255,0.14);
  --color-shadow-btn: 0 3px 14px 0 rgba(79,133,248,0.18);
  --blur-glass: 18px;
  --transition: 0.22s cubic-bezier(.85,.32,.44,1.45);
  --font-main: 'Nunito', Arial, sans-serif;
  --font-heading: 'Oswald', Arial, sans-serif;
  --radius-main: 12px;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

body {
  font-family: var(--font-main);
  color: var(--color-text-main);
  background: var(--color-bg-pale);
  line-height: 1.66;
  font-size: 1.07rem;
  margin: 0;
  padding: 0;
}

/* ========================
   Typography & Headings
======================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: 1.2px;
  font-weight: 600;
  color: var(--color-text-dark);
  text-shadow: 1px 1px 3px rgba(34,38,80,0.09);
  margin-top: 0;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  text-align: center;
  color: var(--color-text-dark);
  margin-bottom: 2rem;
  letter-spacing: .08em;
  text-shadow: 1px 1px 3px rgba(34,38,80,0.25);
  position: relative;
}

/* ========================
        Hero Section
======================== */

.hero,
.hero-gradient {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-gradient-mid) 100%);
}
.hero .overlay-text, .hero-gradient .overlay-text {
  backdrop-filter: blur(3.5px);
  background: linear-gradient(
      rgba(0,0,0,0.52) 40%,
      rgba(40,100,185,0.32) 100%
    );
  border-radius: 0;
  box-shadow: none;
  position: absolute;
  width: 100%;
  min-height: 100%;
  left: 0; top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5rem 1.5rem 3rem 1.5rem;
}
.hero .overlay-text h1, .hero .overlay-text h2 {
  text-align: center;
  color: var(--color-text-bright);
  margin-bottom: .6em;
}
.hero .overlay-text h1 {
  font-size: 2.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-shadow: 1px 2px 12px #073455, 0 0 6px #05eeda;
}
.hero .overlay-text h2 {
  font-size: 1.3rem;
  font-family: var(--font-main);
  font-weight: 500;
  color:var(--color-text-bright);
  text-shadow: 1px 1px 10px #000;
}

@media (max-width: 650px) {
  .hero .overlay-text {
    padding:2rem 0.5rem 1.8rem 0.5rem;
  }
  .hero .overlay-text h1 {font-size: 1.58rem;}
  .section-title{font-size:1.01rem;}
}

/* Параллакс — плавно сдвигает background */
.parallax {
  background-attachment: fixed;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  position: relative;
  will-change: background-position;
}
@media (max-width: 900px) {
  .parallax { background-attachment: scroll; }
}

/* ========================
        Navigation Bar
======================== */

.navbar.is-fixed-top {
  background: linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  box-shadow: 0 2px 18px 0 rgba(51, 70, 185, 0.13);
  transition: background .16s;
  font-family: var(--font-heading);
  z-index: 25;
}
.navbar .navbar-item, .navbar .navbar-link {
  color: #fff !important;
  font-weight: 500;
  transition: background var(--transition);
  text-shadow: 1px 2px 6px #090e1c;
  padding-left: 1.12rem;
  padding-right: 1.12rem;
}
.navbar .navbar-item:hover,
.navbar .navbar-link:focus {
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  color: #fff !important;
}
.navbar-burger span { background: #fff !important; }

/* ========================
        Buttons
======================== */
.btn,
button,
input[type="submit"] {
  font-family: var(--font-heading);
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: var(--color-text-bright);
  padding: .8em 2.2em;
  font-weight: 600;
  letter-spacing: .09em;
  border: none;
  border-radius: var(--radius-main);
  box-shadow: var(--color-shadow-btn);
  cursor: pointer;
  font-size: 1rem;
  margin-top: 0.7em;
  transition: filter var(--transition),box-shadow var(--transition), background var(--transition), transform .16s cubic-bezier(.77,.15,.64,1.2);
  outline: none;
}

.btn-main { /* для Bulma .button.is-link override */
  font-family: var(--font-heading);
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent) 80%);
  color: #fff;
  box-shadow: 0 4px 30px 0 rgba(47,171,234,0.15);
  letter-spacing: .06em;
  border-radius: var(--radius-main);
  padding: .8em 2.3em;
  min-width: 138px;
  border: none;
  transition: filter var(--transition), box-shadow var(--transition),transform .19s;
  outline:none;
}

.btn:hover,
button:hover,
input[type='submit']:hover,
.btn-main:hover {
  filter: brightness(1.1);
  background: linear-gradient(90deg, var(--color-btn-hover), var(--color-accent-dark) 95%);
  box-shadow: 0 8px 32px 0 var(--color-btn-glow);
  color: #fff;
  transform: translateY(-2.5px) scale(1.035);
}

a.read-more,
.read-more {
  font-family: var(--font-heading);
  color: var(--color-link);
  text-decoration: underline;
  font-weight: 500;
  letter-spacing: .04em;
  position: relative;
  font-size: 1.01em;
  transition: color .16s;
}
a.read-more:hover, .read-more:hover {
  color: var(--color-link-hover);
  text-shadow: 0 2px 10px #2be8c099;
}

.button.is-link,
.button.is-link:focus,
.button.is-link:active {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent) 95%) !important;
  border-color: var(--color-primary-dark);
  color: #fff;
}

/* ==========================
        Section Base Styles
========================== */
.section-bg-light {
  background: var(--color-bg-white);
  color: var(--color-text-main);
}
.section-bg-white {
  background: var(--color-bg-pale);
  color: var(--color-text-dark);
}
.section-bg-dark,
.footer.section-bg-dark {
  background: var(--color-bg-footer);
  color: var(--color-text-bright);
  position: relative;
}
.gradient-bg {
  background: linear-gradient(120deg, var(--color-gradient-start) 10%, var(--color-accent) 90%);
  color: var(--color-text-dark);
  position:relative;
  overflow: hidden;
}

.divider {
  width: 94%;
  margin: 2.1rem auto 2.2rem auto;
  border: 0;
  border-top: 2px solid var(--color-accent);
  max-width: 1200px;
  opacity: 0.19;
}

/* ========================
        Carousel
======================== */
.carousel {
  display: flex;
  flex-direction: row;
  gap: 2.2rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 1rem 0.2rem 1rem 0.2rem;
}
.carousel::-webkit-scrollbar { display: none; }

/* =========================
         Card Styles
   ======================== */
.card,
.item,
.testimonial,
.team-member,
.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-card-bg);
  border-radius: var(--radius-main);
  box-shadow: var(--color-shadow-card);
  min-width: 0;
  margin-bottom: 1.7rem;
  text-align: center;
}

.card-content {
  padding: 1.3rem 1.2rem 1.6rem 1.2rem;
  width: 100%;
  color: var(--color-text-main);
  background: none;
}
@media (max-width: 500px) {
  .card-content {padding: 1.1rem 0.5rem 1.2rem 0.5rem;}
}

/* Гласморфизм для карточек */
.card {
  background: var(--color-card-glass);
  backdrop-filter: blur(var(--blur-glass));
}
.card-image,
.image-container {
  width: 100%;
  height: 220px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-shadow);
  overflow: hidden;
  margin: 0 auto 0.4rem auto;
  border-radius: var(--radius-main) var(--radius-main) 0 0;
  position: relative;
}
.card-image img,
.image-container img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-main) var(--radius-main) 0 0;
  margin: 0 auto;
  display: block;
  box-shadow: 0 3px 14px 0 #b6e2fb33;
}
@media (min-width: 600px) {
  .card-image,
  .image-container { height: 270px;}
  .card-image img, .image-container img { height: 270px;}
}
@media (min-width:900px){
  .card-image, .image-container { height: 320px;}
  .card-image img, .image-container img { height: 320px;}
}
@media (max-width: 599px) {
  .card-image,
  .image-container {
    height: 170px;
  }
  .card-image img,
  .image-container img {
    height: 170px;
  }
}

/* =========================
        Stat Widgets
========================= */
.stat-widget {
  background: linear-gradient(90deg, var(--color-gradient-end) 0% , var(--color-gradient-mid) 100%);
  color: #fff;
  border-radius: var(--radius-main);
  box-shadow: 0 6px 28px rgba(52,174,234,0.15);
  padding: 2.1rem 1.2rem;
  text-align: center;
  margin: 0 1.2rem 1.5rem 1.2rem;
  font-family: var(--font-heading);
}
.stat-widget strong {
  font-size: 2.35rem;
}
.stat-widget span {
  font-size: 1.07rem;
  font-weight: 400;
  letter-spacing: .02em;
}

/* ==============================
       Forms & Inputs
============================== */

.input, .textarea, .select select {
  font-family: var(--font-main);
  border-radius: var(--radius-main);
  border-width: 2px;
  border-color: var(--color-primary);
  background: rgba(245,252,255,0.98);
  font-size: 1rem;
  color: var(--color-text-dark);
  transition: border-color var(--transition), box-shadow var(--transition);
  padding: .65em 1.1em;
}
.input:focus, .textarea:focus, .select select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 1px 6px 0 #89eee7b8;
  outline: none;
}

label,
.label {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-primary-dark);
  margin-bottom: .25em;
  font-weight: 500;
  letter-spacing: .03em;
}

/* ===============================
           Contact Section
=============================== */
#contact form {
  background: #fff;
  border-radius: var(--radius-main);
  box-shadow: 0 6px 23px rgba(51, 120, 210,0.11);
  padding: 2.2em 1.7em 1em 1.7em;
  margin: 0 0 2rem 0;
}
@media (max-width: 700px) {
  #contact .columns { flex-direction: column; }
}
@media (max-width: 600px){
  #contact form {padding: 1em .5em;}
}
#contact form input, #contact form textarea {
  margin-bottom: .7em;
}

/* ==============================
        Workshops & Events
============================== */
@media (max-width:900px) {
  .carousel { gap: 1rem;}
}
@media (max-width: 599px) {
  .carousel { gap: .5rem;}
}

/* ==============================
       Careers Section
============================== */
#careers .btn-main {
  margin-top: 2rem;
}
#careers .section-title {
  color: #fff;
  text-shadow: 1px 1px 6px #0a223e;
}

/* ===============================
            Resources
=============================== */
.external-resources-list {
  list-style: none;
  display: grid;
  gap: .5em 0.7em;
  grid-template-columns: 1fr 1fr;
  font-weight: 500;
  font-family: var(--font-main);
  font-size: 1.09em;
  justify-items: center;
  padding: 0;
  margin-bottom: 1.2rem;
}
.external-resources-list li { margin-bottom: .2rem;}
.external-resources-list a {
  color: var(--color-link);
  text-decoration: underline;
  transition: color 0.16s;
}
.external-resources-list a:hover {
  color: var(--color-link-hover);
  text-shadow: 0 1px 7px #6ffad988;
}

/* ===========================
          Footer
=========================== */

.footer.section-bg-dark {
  margin-top: 0;
  padding-bottom: 2.8rem;
  background: var(--color-bg-footer);
  color: var(--color-text-bright);
  border-top-left-radius: 44px;
  border-top-right-radius: 44px;
  box-shadow: 0 -5px 32px #6581c222;
}
.footer h4, .footer h5, .footer h6 {
  color: #fff;
  text-shadow: 1px 4px 8px #29335845;
}

.footer a,
.footer.section-bg-dark a {
  color: #c8e5ff;
  text-decoration: underline;
  transition: color 0.14s;
  font-family: var(--font-heading);
  font-size: 1.07rem;
}
.footer a:hover,
.footer.section-bg-dark a:hover {
  color: var(--color-accent);
  text-shadow: 0 3px 14px #2be8c0cc;
}

.footer ul {
  padding-left: 0;
  list-style: none;
  margin: 0;
}
.footer li + li {margin-top: 0.18em;}
.footer small {
  color: #badefc;
  letter-spacing: .04em;
  font-size: 96%;
}

/* Social links — только текст, красиво размещены */
.footer p a {
  margin-right: 1.52em;
  font-weight: 600;
}
.footer p a:last-child { margin-right: 0; }

/* Скрытые "иконки" соц.сетей - только цвет текста и тень */
.footer .social-link {
  position: relative;
  padding-left: 0.3em;
  color: #fff;
  font-size: 1.14rem;
  letter-spacing: .04em;
  text-shadow: 0 2px 8px #2be8c099;
  font-family: var(--font-heading);
  border-bottom: 2px solid transparent;
  transition: border-color .17s,color .18s;
}
.footer .social-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ===================
     Animated Icons
=================== */
.animated-icon {
  font-size: 2.8em;
  animation: pulse 2.4s infinite;
  display: block;
  margin: 0 auto 1.2em auto;
  filter: drop-shadow(0 2px 9px #81e1fc33);
}

@keyframes pulse {
  0% { transform: scale(1);}
  60% { transform: scale(1.15);}
  90% {transform: scale(1);}
  100% { transform: scale(1);}
}

/* ===================
     Microinteractions
=================== */
.btn,
button,
input[type="submit"] {
  will-change: filter, box-shadow, transform, background;
}
.btn:active,
button:active,
input[type='submit']:active {
  filter: brightness(0.98);
  transform: scale(0.98) translateY(1.5px);
  box-shadow: 0 4px 18px 0 #18cbe820;
}

/* ==========================
    Page-specific Adjustments
========================== */
.success-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(130deg, var(--color-gradient-end), var(--color-gradient-mid) 60%);
  text-align: center;
}
.success-container h1,
.success-container p {
  color: #fff !important;
  text-shadow: 1px 1px 8px #13547c;
}

@media (max-width: 600px) {
  .success-container {
    padding: 2.4rem 1rem;
    min-height: 84vh;
  }
}

/* privacy.html & terms.html page content wrapper */
.page-content.legal {
  padding-top: 100px;
}

@media (max-width: 599px){
  .page-content.legal {
    padding-top: 70px !important;
  }
}

/* ===================
    Utilities
=================== */
.text-center { text-align: center !important; }
.text-dark { color: var(--color-text-dark) !important; }
.text-bright { color: var(--color-text-bright) !important; }
.mt-2 { margin-top: 2em !important;}
.mb-2 { margin-bottom: 2em !important;}
.mt-1 { margin-top: 1em !important;}
.mb-1 { margin-bottom: 1em !important;}
.glass {
  background: var(--color-bg-glass);
  backdrop-filter: blur(var(--blur-glass));
}

 /* Custom Gradient Overlay for ANY background image with text! */
.bg-gradient-overlay {
  position:relative;
  background: linear-gradient(to bottom,rgba(0,0,0,0.5) 40%,rgba(22,39,95,0.07) 100%);
  background-blend-mode: multiply;
}

 /* For images inside cards, make sure they're never off-center */
.card,
.item,
.testimonial,
.team-member,
.product-card {
  text-align: center;
}
.card img,
.image-container img,
.card-image img {
  display: block;
  margin: 0 auto;
}

 /* Ensure images in cards always object-fit:cover and center */
.card-image,
.image-container {
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* 
   Helper: ensures that all images in backgrounds
   use cover and no-repeat for CSS only bg
*/
[data-prompt][style*="background-image"] {
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* 
   Стили для колонок: две трети и равномерное распределение
*/
.columns .column.is-two-thirds {
  flex: 0 0 66.6666%;
  max-width: 66.6666%;
}
@media (max-width: 900px){
  .columns .column.is-two-thirds { flex-basis: 100%; max-width: 100%; }
}

/* =====================
 Cookies Bar (leave as is)
====================== */
#cookiePopup {
  /* Оставить только минимальную адаптацию */
  font-family: var(--font-main);
  background: rgba(28,38,49,0.96);
  color: #fff;
  z-index: 9999;
}

#cookiePopup button {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  color: #fff;
  font-family: var(--font-heading);
  border-radius: var(--radius-main);
  font-size: 1rem;
}

/*
  --- Remove Bulma .card box shadow ---
*/
.card {
  box-shadow: var(--color-shadow-card) !important;
}