/* ==============================================================
   CREATIVE DESIGN SYSTEM  •  PASTEL PALETTE  •  v1.0
   ============================================================== */

/* --------------------------  VARIABLES  -------------------------- */
:root {
  /* Pastel Core */
  --clr-primary: #ffb7b2;
  --clr-primary-dark: #f28a84;
  --clr-secondary: #b2f7ef;
  --clr-secondary-dark: #7edcd2;
  --clr-accent: #f6eac2;
  --clr-accent-dark: #e2ce8e;
  --clr-neutral-100: #ffffff;
  --clr-neutral-200: #f7f7f7;
  --clr-neutral-300: #dedede;
  --clr-neutral-800: #333333;
  --clr-neutral-900: #222222;

  /* Typography */
  --ff-heading: 'Manrope', sans-serif;
  --ff-body: 'Rubik', sans-serif;

  /* Transition */
  --transition-fast: 0.2s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
}

/* --------------------------  GLOBAL RESET  ----------------------- */
html,body{
  scroll-behavior:smooth;
  color:var(--clr-neutral-800);
  background:var(--clr-neutral-100);
  font-family:var(--ff-body);
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-heading);
  color:var(--clr-neutral-900);
  letter-spacing:-0.5px;
}
section{
  padding:4rem 0;
}
a{
  color:var(--clr-primary-dark);
  transition:color var(--transition-fast);
}
a:hover{
  color:var(--clr-secondary-dark);
}
.read-more{
  font-weight:600;
  position:relative;
}
.read-more::after{
  content:'';
  position:absolute;
  left:0;bottom:-2px;
  width:100%;height:2px;
  background:var(--clr-primary-dark);
  transition:transform var(--transition-fast);
  transform:scaleX(0);
  transform-origin:left;
}
.read-more:hover::after{transform:scaleX(1);}

/* --------------------------  BUTTONS  ---------------------------- */
.btn,
button,
input[type='button'],
input[type='submit']{
  background:var(--clr-primary);
  border:none;
  color:var(--clr-neutral-100);
  padding:0.75rem 1.5rem;
  border-radius:4px;
  font-family:var(--ff-heading);
  font-weight:700;
  cursor:pointer;
  transition:background var(--transition-fast), transform var(--transition-fast);
}
.btn.is-secondary{
  background:var(--clr-secondary);
  color:var(--clr-neutral-900);
}
.btn:hover,
button:hover,
input[type='button']:hover,
input[type='submit']:hover{
  background:var(--clr-primary-dark);
  transform:translateY(-2px);
}
.btn:active{transform:translateY(0);}

/* --------------------------  NAVBAR  ----------------------------- */
.navbar{
  background:rgba(255,255,255,0.75);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--clr-neutral-300);
}
.navbar-item:hover{color:var(--clr-primary-dark);}

/* --------------------------  HERO  ------------------------------- */
#hero .hero-body{
  position:relative;
  color:#ffffff;
  text-shadow:1px 1px 4px rgba(0,0,0,0.6);
}
#hero .button{background:var(--clr-secondary);color:var(--clr-neutral-900);}
#hero .button:hover{background:var(--clr-secondary-dark);}

#particle-canvas{
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  z-index:-1;
  pointer-events:none;
}

/* --------------------------  STAT WIDGETS  ----------------------- */
.stat-widget{
  background:var(--clr-accent);
  border-radius:8px;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
}
progress.progress{
  height:8px;
  border-radius:4px;
}

/* --------------------------  CARDS  ------------------------------ */
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--clr-neutral-100);
  border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,0.06);
  transition:transform var(--transition-fast), box-shadow var(--transition-fast);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 24px rgba(0,0,0,0.08);
}
.card-image,
.image-container{
  width:100%;
  height:230px;
  overflow:hidden;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto;
}

/* --------------------------  TIMELINE (Bulma override) ----------- */
.timeline .timeline-item .heading{
  font-weight:700;
  color:var(--clr-primary-dark);
}

/* --------------------------  PARALLAX UTILS  --------------------- */
.parallax{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
}

/* --------------------------  GLASSMORPHIC UTIL ------------------- */
.glass{
  background:rgba(255,255,255,0.4);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.3);
  border-radius:12px;
}

/* --------------------------  COOKIE POPUP OVERRIDE  -------------- */
#cookiePopup{
  background:rgba(0,0,0,0.88);
}
#cookiePopup .button{
  background:var(--clr-secondary);
  color:var(--clr-neutral-900);
}
#cookiePopup .button:hover{
  background:var(--clr-secondary-dark);
}

/* --------------------------  SUCCESS PAGE  ----------------------- */
.page-success{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:linear-gradient(135deg,var(--clr-secondary) 0%,var(--clr-accent) 100%);
  color:var(--clr-neutral-900);
  text-align:center;
}

/* --------------------------  PRIVACY & TERMS PADDING ------------- */
body.legal-page main{
  padding-top:100px;
}

/* --------------------------  FOOTER ------------------------------ */
footer{
  color:var(--clr-neutral-100);
}
footer a{
  color:var(--clr-secondary);
}
footer a:hover{
  color:var(--clr-secondary-dark);
}
footer .social-link{
  margin:0 0.5rem;
  font-weight:700;
}

/* --------------------------  PARTICLE ANIMATION  ----------------- */
@keyframes floaty{
  0%{transform:translateY(0) translateX(0);}
  50%{transform:translateY(-20px) translateX(10px);}
  100%{transform:translateY(0) translateX(0);}
}
.particle{
  position:absolute;
  width:8px;height:8px;
  background:var(--clr-accent-dark);
  border-radius:50%;
  opacity:0.7;
  animation:floaty 6s ease-in-out infinite;
}

/* --------------------------  RESPONSIVE TWEAKS  ------------------ */
@media screen and (max-width:768px){
  .navbar-menu{background:rgba(255,255,255,0.95);}
  section{padding:3rem 1rem;}
  .card-image,.image-container{height:180px;}
}