/* ===================================================================
  Global Theme Variables : Modern + Neumorphism / Glassmorphism
=================================================================== */
:root{
  /* Typography */
  --font-heading: 'Archivo Black', sans-serif;
  --font-body: 'Roboto', sans-serif;

  /* Core Palette */
  --color-primary: #ff5b5b;          /* Vibrant Coral */
  --color-secondary: #ffb347;        /* Soft Orange */
  --color-accent: #2c76ff;           /* Electric Blue */
  --color-accent-dark: #1555e9;
  --color-gradient-end: #ffd452;     /* Golden Sun */

  /* Neutrals */
  --color-text-dark: #222222;
  --color-text-light: #ffffff;
  --color-bg-light: #fafafa;
  --color-bg-dark: #0f0f0f;

  /* Shadows */
  --shadow-sm: 0 4px 8px rgba(0,0,0,.08);
  --shadow-md: 0 6px 16px rgba(0,0,0,.12);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.16);

  /* Gradients */
  --gradient-main: linear-gradient(135deg,var(--color-primary)0%,var(--color-secondary)45%,var(--color-gradient-end)100%);
  --gradient-accent: linear-gradient(145deg,var(--color-accent)0%,var(--color-accent-dark)100%);
}

/* ===================================================================
  Base Reset / Typography
=================================================================== */
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  line-height:1.6;
  background:var(--color-bg-light);
  color:var(--color-text-dark);
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  color:var(--color-text-dark);
  margin-bottom:.75em;
  text-align:center;
  text-shadow:1px 1px 3px rgba(0,0,0,.15);
}
p{margin-bottom:1em;}

/* ===================================================================
  Navigation
=================================================================== */
.navbar{
  backdrop-filter:blur(8px);
  background:rgba(255,255,255,.85);
  transition:background .3s ease;
  box-shadow:var(--shadow-sm);
}
.navbar.is-transparent.is-fixed-top.is-scrolled{
  background:rgba(255,255,255,.95);
}
.navbar-item,
.navbar-link{
  font-weight:700;
  color:var(--color-text-dark)!important;
  transition:color .3s ease;
}
.navbar-item:hover,
.navbar-link:hover{color:var(--color-primary)!important;}

/* Burger */
.navbar-burger span{background:var(--color-text-dark);}
.navbar-burger.is-active span{background:var(--color-primary);}

/* ===================================================================
  Hero
=================================================================== */
.hero{position:relative;}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.55)0%,rgba(0,0,0,.3)60%,rgba(0,0,0,.1)100%);
  mix-blend-mode:multiply;
}
.hero-body{position:relative;z-index:1;}
.hero .title,
.hero .subtitle{color:var(--color-text-light)!important;}

.hero .button{
  background:var(--gradient-main);
  border:none;
  color:#fff;
  font-weight:700;
  padding:1rem 2rem;
  border-radius:50px;
  box-shadow:var(--shadow-md);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.hero .button:hover{transform:translateY(-3px);}

/* ===================================================================
  Utility Classes
=================================================================== */
.section-gradient{background:var(--gradient-main);color:var(--color-text-light);}
.text-light{color:var(--color-text-light)!important;}
.text-dark{color:var(--color-text-dark)!important;}
.read-more{
  color:var(--color-accent);
  font-weight:700;
  position:relative;
  transition:color .3s ease;
}
.read-more::after{
  content:'';
  position:absolute;
  left:0;bottom:-2px;
  width:0;height:2px;
  background:var(--color-accent);
  transition:width .3s ease;
}
.read-more:hover{color:var(--color-accent-dark);}
.read-more:hover::after{width:100%;}

/* ===================================================================
  Cards : Unified Structure
=================================================================== */
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
}
.card-image.image-container{
  width:100%;
  height:220px;
  overflow:hidden;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}
.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  margin:0 auto;
}
.card-content{padding:1.5rem;}

/* ===================================================================
  Section Enhancements
=================================================================== */
.section{
  padding:3.5rem 1.5rem;
}
.section.has-background-light{
  background:var(--color-bg-light);
}
.section.has-background-primary-light{
  background:rgba(255,91,91,.07);
}

/* Statistics Boxes */
.box{
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .25s ease, transform .25s ease;
}
.box:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-4px);
}

/* Methodology Switch */
.switch+label{font-weight:700;margin-left:.5rem;}

/* ===================================================================
  Buttons / Inputs (Global)
=================================================================== */
.btn,
button,
.button,
input[type='submit']{
  cursor:pointer;
  border:none;
  border-radius:8px;
  padding:.75rem 1.5rem;
  font-weight:700;
  font-family:var(--font-body);
  background:var(--gradient-main);
  color:#fff;
  transition:background .3s ease, transform .25s ease;
}
.btn:hover,
button:hover,
.button:hover,
input[type='submit']:hover{
  background:var(--gradient-accent);
  transform:translateY(-2px);
}
input,
textarea{
  font-family:var(--font-body);
}
input:focus,
textarea:focus{
  border-color:var(--color-accent);
  box-shadow:0 0 0 .15rem rgba(44,118,255,.25);
}

/* ===================================================================
  Media Section (External Resources)
=================================================================== */
#media .card-content p:first-child{
  font-weight:700;
  margin-bottom:.5rem;
}
#media a{color:var(--color-accent);transition:color .3s ease;}
#media a:hover{color:var(--color-accent-dark);}

/* ===================================================================
  Footer
=================================================================== */
.footer{
  padding:3rem 1.5rem;
  background:var(--color-bg-dark);
  color:var(--color-text-light);
}
.footer .title{text-shadow:none;color:#fff;}
.footer a{color:var(--color-accent);transition:color .3s ease;}
.footer a:hover{color:var(--color-accent-dark);}

/* Social Links (text only) */
.footer ul{list-style:none;padding:0;}
.footer li+li{margin-top:.25rem;}

/* ===================================================================
  Responsive Utilities
=================================================================== */
@media screen and (min-width:1024px){
  .columns.is-multiline>.column{padding:1rem;}
}

/* ===================================================================
  Success Page
=================================================================== */
body.success-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--gradient-main);
  color:var(--color-text-light);
  text-align:center;
}

/* ===================================================================
  Privacy & Terms Pages
=================================================================== */
body.privacy-page,
body.terms-page{padding-top:100px;}

/* ===================================================================
  Hero Parallax (optional micro animation)
=================================================================== */
@supports (background-attachment: fixed){
  .hero{background-attachment:fixed;}
}

/* ===================================================================
  Glassmorphism Utility
=================================================================== */
.glass{
  background:rgba(255,255,255,.3);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
}

/* ===================================================================
  Cookie Popup
=================================================================== */
#cookiePopup{
  font-size:.875rem;
}
#cookiePopup .button{
  background:var(--gradient-accent);
  border-radius:50px;
  padding:.5rem 1.5rem;
}

/* ===================================================================
  Animations & Keyframes
=================================================================== */
@keyframes float {
  0%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
  100%{transform:translateY(0);}
}
.animate-float{animation:float 4s ease-in-out infinite;}

/* ===================================================================
  Link Focus Outline for Accessibility
=================================================================== */
a:focus,
button:focus,
input:focus,
textarea:focus{
  outline:2px dashed var(--color-accent);
  outline-offset:2px;
}