/* =========================================================
   RESET & GLOBAL FOUNDATION
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.6;
}
/* =========================================================
   CSS-VARIABLES  |  BRUTALISM + BRIGHT PALETTE
   ========================================================= */
:root{
  /* Core */
  --color-primary:#FF006E;
  --color-primary-dark:#C40057;
  --color-accent:#14FFEC;
  --color-accent-dark:#00D3C7;
  --color-bg:#F7F7F7;
  --color-bg-alt:#FFFFFF;
  --color-text:#1A1A1A;
  --color-muted:#6B6B6B;

  /* Gradients */
  --gradient-primary:linear-gradient(135deg,var(--color-primary) 0%,var(--color-accent) 100%);
  --gradient-dark:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-accent-dark) 100%);

  /* Typography */
  --font-heading:'Manrope',sans-serif;
  --fw-bold:800;
  --fw-semi:600;

  /* Shadow & Radius */
  --radius:.5rem;
  --shadow-lg:0 10px 25px rgba(0,0,0,.15);
  --shadow-sm:0 4px 10px rgba(0,0,0,.08);

  /* Transition */
  --transition:.3s cubic-bezier(.25,.8,.25,1);
}
/* =========================================================
   UTILITIES
   ========================================================= */
.container{
  width:min(1100px,90%);
  margin-inline:auto;
}
.text-center{text-align:center}
.mb-2{margin-bottom:2rem}
.mt-2{margin-top:2rem}
.hide{display:none!important}
/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:var(--fw-bold);
  line-height:1.25;
  color:var(--color-text);
}
.section-title{text-align:center;font-size:2.25rem;margin-bottom:2.5rem;letter-spacing:-.5px}
p{margin-bottom:1rem;color:var(--color-text)}
a{color:var(--color-primary);text-decoration:none;transition:color var(--transition)}
a:hover,a:focus{color:var(--color-primary-dark);outline:none}
/* "Читать далее" */
.link-read{
  display:inline-block;
  font-weight:var(--fw-semi);
  position:relative;
  padding-right:1.75rem;
}
.link-read::after{
  content:'→';
  position:absolute;
  right:.25rem;
  top:50%;
  transform:translateY(-50%);
  transition:transform var(--transition);
}
.link-read:hover::after{transform:translate(4px,-50%)}
/* =========================================================
   HEADER & NAV
   ========================================================= */
.header{
  position:fixed;
  top:0;left:0;width:100%;
  background:var(--color-bg-alt);
  border-bottom:3px solid var(--color-primary);
  z-index:999;
}
.logo{font-family:var(--font-heading);font-size:1.75rem;font-weight:var(--fw-bold)}
.nav ul{
  list-style:none;
  display:flex;
  gap:1.25rem;
}
.nav a{font-weight:var(--fw-semi);padding:.75rem 0;display:block}
.burger{
  display:none;
  flex-direction:column;
  gap:4px;
  background:none;
  border:none;
  padding:.75rem;
  cursor:pointer;
}
.burger span{width:24px;height:3px;background:var(--color-text)}
@media(max-width:768px){
  .nav ul{flex-direction:column;position:fixed;inset:0 0 auto auto;background:var(--color-bg-alt);padding:6rem 2rem;transform:translateX(100%);transition:transform var(--transition)}
  .nav[aria-expanded="true"] ul{transform:none}
  .burger{display:flex;margin-left:auto}
}
/* =========================================================
   SECTIONS
   ========================================================= */
.section{padding:4rem 0}
.section:nth-of-type(odd){background:var(--color-bg-alt)}
/* Hero */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:65vh;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  color:#FFF;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
  z-index:0;
}
.hero .container{position:relative;z-index:1}
.hero-title{font-size:2.75rem;margin-bottom:1rem;color:#FFF;text-shadow:1px 1px 3px rgba(0,0,0,.7)}
.hero-text{font-size:1.25rem;margin-bottom:2rem;color:#FFF}
/* Parallax (desktop only) */
@media(min-width:1024px){
  .hero,section[style*="background-image"]{background-attachment:fixed}
}
/* =========================================================
   BUTTONS
   ========================================================= */
.btn,
button,
input[type='submit']{
  display:inline-block;
  padding:.85rem 2rem;
  background:var(--gradient-primary);
  color:#FFF;
  border:none;
  border-radius:var(--radius);
  font-weight:var(--fw-semi);
  cursor:pointer;
  transition:background var(--transition),box-shadow var(--transition),transform var(--transition);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
  background:var(--gradient-dark);
  box-shadow:var(--shadow-sm);
  transform:translateY(-2px);
}
.btn:active{transform:translateY(0)}
/* =========================================================
   CARD-BASED LAYOUT (Блочное строение)
   ========================================================= */
.card-list{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
}
.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--color-bg-alt);
  border:3px solid var(--color-primary);
  border-radius:var(--radius);
  padding:1.5rem;
  gap:1rem;
  transition:transform var(--transition),box-shadow var(--transition);
}
.card:hover,
.item:hover,
.testimonial:hover,
.team-member:hover,
.product-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}
/* STRICT: image containers */
.image-container{
  width:100%;
  height:240px;
  overflow:hidden;
  border-radius:var(--radius);
  flex-shrink:0;
}
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  margin:0 auto;
}
/* Testimonials specifics */
.testimonial p{font-style:italic;color:var(--color-muted)}
/* Timeline (Методология) */
.timeline{
  display:grid;
  gap:2rem;
  position:relative;
}
.timeline::before{
  content:'';
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:3px;
  background:var(--color-primary);
  transform:translateX(-50%);
}
.timeline-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:500px;
  margin-inline:auto;
  text-align:center;
}
.timeline-marker{
  width:22px;height:22px;border-radius:50%;
  background:var(--color-accent);border:3px solid var(--color-primary);
  margin-bottom:1rem;
}
/* Toggle Section */
.toggle-section{
  display:flex;flex-direction:column;align-items:center;text-align:center
}
.switch{
  position:relative;display:inline-block;width:60px;height:34px;margin:1rem 0
}
.switch input{opacity:0;width:0;height:0}
.slider{
  position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;
  background:var(--color-muted);transition:.4s;border-radius:34px
}
.slider:before{
  position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;
  background:white;transition:.4s;border-radius:50%
}
input:checked + .slider{background:var(--color-primary)}
input:checked + .slider:before{transform:translateX(26px)}
/* =========================================================
   FORMS (Contact)
   ========================================================= */
form{max-width:600px;margin-inline:auto}
.form-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem}
input,textarea{
  padding:.8rem 1rem;
  border:2px solid var(--color-primary);
  border-radius:var(--radius);
  font-family:inherit;
  resize:vertical;
  transition:border-color var(--transition)
}
input:focus,textarea:focus{border-color:var(--color-accent);outline:none}
/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:var(--color-primary);
  color:#FFF;
  padding:3rem 0;
  text-align:center;
  margin-top:4rem;
}
.footer-nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.5rem;
  margin-bottom:1rem;
}
.footer-nav a{color:#FFF;font-weight:var(--fw-semi)}
.social a{
  color:#FFF;
  font-weight:var(--fw-semi);
  margin:0 .5rem;
  position:relative;
  padding-bottom:.25rem;
}
.social a::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:100%;height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--transition);
}
.social a:hover::after{transform:scaleX(1)}
/* =========================================================
   PAGE-SPECIFIC
   ========================================================= */
/* Success Page */
.page-success{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
}
/* Privacy & Terms */
.page-privacy,
.page-terms{padding-top:100px}
/* =========================================================
   SCROLL-DRIVEN EFFECTS (class toggled via JS)
   ========================================================= */
[data-sr]{opacity:0;transform:translateY(40px);transition:opacity .6s ease-out,transform .6s ease-out}
[data-sr].sr-show{opacity:1;transform:none}
/* =========================================================
   GLASSMORPHISM UTILITY
   ========================================================= */
.glass{
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius);
}
/* =========================================================
   RESPONSIVE TWEAKS
   ========================================================= */
@media (max-width:576px){
  .section-title{font-size:1.8rem}
  .hero-title{font-size:2rem}
  .hero-text{font-size:1rem}
  .timeline::before{left:8px}
  .timeline-step{padding-left:2.5rem;align-items:flex-start;text-align:left}
  .timeline-marker{margin:0}
}
/* =========================================================
   PLACEHOLDER CLASSES FOR ADDITIONAL THEMING
   ========================================================= */
.bg-primary{background:var(--color-primary)!important;color:#FFF}
.bg-accent{background:var(--color-accent)!important;color:#1A1A1A}
.text-primary{color:var(--color-primary)!important}
.text-accent{color:var(--color-accent)!important}
.shadow-lg{box-shadow:var(--shadow-lg)!important}
.radius{border-radius:var(--radius)!important}
/* =========================================================
   END STYLESHEET
   ========================================================= */

   [data-sr] {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity .6s ease-out,transform .6s ease-out;
}