/* =========================================
   ConsulZen • Creative Design-System Styles
   Author: GPT-4 | 2024
   ========================================= */

/* ---------- Root Variables & Theme --------- */
:root{
  /* Brand Palette */
  --clr-primary: hsl(204, 100%, 50%);
  --clr-primary-dark: hsl(204, 100%, 35%);
  --clr-accent: hsl(14, 100%, 57%);
  --clr-accent-dark: hsl(14, 100%, 42%);
  --clr-neutral-100:#ffffff;
  --clr-neutral-200:#f5f5f5;
  --clr-neutral-300:#e0e0e0;
  --clr-neutral-700:#4b4b4b;
  --clr-neutral-900:#1f1f1f;

  /* Typography */
  --ff-heading:'Playfair Display',serif;
  --ff-body:'Source Sans Pro',sans-serif;

  --fs-h1:clamp(2.5rem,5vw,4rem);
  --fs-h2:clamp(2rem,4vw,3rem);
  --fs-h3:clamp(1.5rem,3vw,2.25rem);
  --fs-body:1rem;

  /* Effects */
  --radius-s:.4rem;
  --radius-m:.75rem;
  --shadow-m:0 4px 12px rgba(0,0,0,.1);
  --transition:all .3s ease;
}

/* ---------- Global Resets --------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  color:var(--clr-neutral-900);
  line-height:1.6;
  background:var(--clr-neutral-100);
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-heading);
  font-weight:700;
  line-height:1.2;
  color:var(--clr-neutral-900);
}
h1{font-size:var(--fs-h1);}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}

/* Spacing helpers */
.section{padding:4rem 1.5rem;}
.section.is-small{padding:2rem 1.5rem;}
.mt-6{margin-top:4rem;}
.mb-6{margin-bottom:4rem;}

/* ---------- Navbar --------- */
.navbar.is-fixed-top{
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.navbar-item.is-active,
.navbar-item:hover{color:var(--clr-primary);}

/* ---------- Buttons (GLOBAL) --------- */
.button,
.btn,
input[type='submit']{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.75rem 1.5rem;
  font-weight:600;
  border:none;
  border-radius:var(--radius-s);
  cursor:pointer;
  background:var(--clr-primary);
  color:var(--clr-neutral-100);
  transition:var(--transition);
}
.button.is-link,
.btn--secondary{
  background:var(--clr-accent);
}
.button:hover,
.btn:hover,
input[type='submit']:hover{
  background:var(--clr-primary-dark);
  transform:translateY(-2px);
  box-shadow:var(--shadow-m);
}
.button.is-link:hover,
.btn--secondary:hover{
  background:var(--clr-accent-dark);
}

/* ---------- Hero --------- */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff; /* guarantee readability */
}
.hero::before{ /* gradient overlay */
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.5) 100%);
}
.hero .container{position:relative;z-index:2;}
.hero-title{font-family:var(--ff-heading);font-size:var(--fs-h1);text-shadow:0 2px 6px rgba(0,0,0,.5);}
.hero-subtitle{max-width:50rem;margin:1rem auto 2rem;}

/* ---------- Particle Animation --------- */
.particle-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:1;
}
.particle{
  position:absolute;
  top:var(--top,50%);
  left:var(--left,50%);
  width:var(--size,6px);
  height:var(--size,6px);
  border-radius:50%;
  background:rgba(255,255,255,.6);
  animation:float var(--duration,8s) linear infinite;
}
@keyframes float{
  0%{transform:translateY(0) scale(1);}
  100%{transform:translateY(-100vh) scale(0);}
}

/* ---------- Cards & Media --------- */
.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:#fff;
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-m);
  overflow:hidden;
  transition:var(--transition);
}
.card:hover,
.item:hover,
.testimonial:hover,
.team-member:hover,
.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.image-container{
  width:100%;
  height:240px;
  overflow:hidden;
}
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  margin:0 auto;
}
.card-content{padding:1.5rem;}

/* ---------- Innovation & Success Sections --------- */
#innovation,
#success,
#community,
#awards,
#events,
#blog,
#team{
  background:var(--clr-neutral-100);
}
#success{background:var(--clr-neutral-200);}
#community{background:var(--clr-neutral-100);}
#awards{background:var(--clr-neutral-200);}
#events{background:var(--clr-neutral-100);}
#blog{background:var(--clr-neutral-200);}
#team{background:var(--clr-neutral-100);}

/* ---------- Timeline / Calendar style --------- */
.events-list li{
  position:relative;
  padding-left:1.5rem;
  margin-bottom:1rem;
}
.events-list li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:var(--clr-primary);
  font-size:1.25rem;
}

/* ---------- Community Glassmorphism Card --------- */
.glass{
  background:rgba(255,255,255,.25);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
}

/* ---------- Footer --------- */
.footer{
  background:var(--clr-neutral-900);
  color:var(--clr-neutral-100);
  padding:3rem 1.5rem;
}
.footer a{
  color:var(--clr-primary);
  text-decoration:none;
  font-weight:600;
  transition:var(--transition);
}
.footer a:hover{color:var(--clr-accent);}
.social-link{
  display:inline-block;
  margin:0 .5rem;
  font-size:.875rem;
}

/* ---------- Success Page (success.html) --------- */
.page-success{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem;
}

/* ---------- Privacy & Terms Padding --------- */
.page-legal{padding-top:100px;}

/* ---------- Links “Читать далее” --------- */
.read-more{
  position:relative;
  font-weight:600;
  color:var(--clr-accent);
  transition:var(--transition);
}
.read-more::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0;
  height:2px;
  background:var(--clr-accent);
  transition:var(--transition);
}
.read-more:hover{color:var(--clr-accent-dark);}
.read-more:hover::after{width:100%;}

/* ---------- Utility Flex/Grid --------- */
.grid-2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
}
/* Column override for Bulma columns when not enough space */
@media (max-width:1023px){
  .columns.is-two-thirds>.column{flex:0 0 100%;}
}

/* ---------- Image Parallax Helper --------- */
.parallax{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}

/* ---------- Scroll Animations --------- */
.fade-up{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease,transform .6s ease;
}
.fade-up.is-visible{opacity:1;transform:none;}

/* ---------- Accessibility: Focus States --------- */
a:focus,
.button:focus,
input:focus,
textarea:focus{
  outline:2px dashed var(--clr-primary);
  outline-offset:2px;
}

/* ---------- Bulma Overrides --------- */
.hero.is-fullheight{min-height:100vh;}
.navbar-burger{color:var(--clr-neutral-900);}
.navbar-menu{backdrop-filter:blur(12px);}

/* ---------- Adaptive Typography --------- */
@media (max-width:768px){
  h1{font-size:2rem;}
  h2{font-size:1.75rem;}
  .section{padding:3rem 1.25rem;}
}

/* ---------- Darker Gradient Helper --------- */
.bg-dark-gradient{
  background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.6));
}

/* ---------- Placeholder Color Classes --------- */
.bg-primary{background:var(--clr-primary);}
.bg-accent{background:var(--clr-accent);}
.bg-neutral{background:var(--clr-neutral-200);}
.text-primary{color:var(--clr-primary);}
.text-accent{color:var(--clr-accent);}
.text-light{color:var(--clr-neutral-100);}
.text-dark{color:var(--clr-neutral-900);}