/*==================================================================
  GLOBAL THEME  |  Eco-Minimal Glassmorphism
===================================================================*/
:root{
  /* Neutral base */
  --clr-bg:        #f5f7f8;
  --clr-surface:   rgba(255,255,255,0.35);
  --clr-surface-h: rgba(255,255,255,0.45);
  --clr-border:    rgba(255,255,255,0.25);
  --clr-text:      #222222;
  --clr-text-light:#ffffff;
  /* Accent & State */
  --clr-accent:    #3fa46a;
  --clr-accent-d:  #318555;
  --clr-accent-l:  #55c580;
  --clr-error:     #e74c3c;
  /* Gradients */
  --grad-primary:  linear-gradient(135deg,#4b6cb7 0%,#182848 100%);
  --grad-accent:   linear-gradient(135deg,#3fa46a 0%,#75d993 100%);
  /* Radius / Blur */
  --radius-md:     12px;
  --blur-lg:       18px;
  --transition:    0.3s cubic-bezier(.4,0,.2,1);
  /* Typography */
  --ff-heading: 'Roboto',sans-serif;
  --ff-body:    'Lato',sans-serif;
  --fs-base:    1rem;
}

/*==================================================================
  BASE
===================================================================*/
*,
*::before,
*::after{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:var(--fs-base);
  color:var(--clr-text);
  background:var(--clr-bg);
  line-height:1.6;
}

/*---------------------------------------------------------------------- 
  TYPOGRAPHY 
------------------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-heading);
  font-weight:700;
  color:var(--clr-text);
  text-shadow:1px 1px 3px rgba(0,0,0,.1);
  line-height:1.2;
  margin:0 0 .6em;
  text-align:center;
}
p{margin:0 0 1.2rem}

/*==================================================================
  LAYOUT HELPERS
===================================================================*/
.container{
  width:min(90%,1100px);
  margin-inline:auto;
  padding-block:3.5rem;
}
.center{text-align:center}
.full-vh{min-height:100vh;display:flex;align-items:center}

/* Flex helpers */
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-center{display:flex;align-items:center;justify-content:center}

/* Grid helpers */
.stats-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

/*==================================================================
  NAVIGATION
===================================================================*/
header.glass-header{
  position:sticky;top:0;z-index:1000;
  backdrop-filter:blur(var(--blur-lg));
  background:var(--clr-surface);
  border-bottom:1px solid var(--clr-border);
}
.brand{
  font-family:var(--ff-heading);
  font-weight:700;
  font-size:1.4rem;
  color:var(--clr-accent);
  text-decoration:none;
}
nav ul{display:flex;gap:1.2rem;list-style:none;margin:0;padding:0}
nav a{
  color:var(--clr-text);
  text-decoration:none;
  font-weight:500;
  position:relative;
}
nav a::after{
  content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;
  background:var(--clr-accent);transition:var(--transition)
}
nav a:hover::after{width:100%}
/* Burger */
.burger{display:none;background:none;border:none;cursor:pointer}
.burger span{
  display:block;width:22px;height:2px;margin:4px 0;background:var(--clr-text);
  transition:var(--transition)
}
/* Mobile */
@media(max-width:768px){
  nav ul{position:fixed;inset:0 0 auto auto;right:-100%;top:60px;
    flex-direction:column;background:var(--clr-surface);backdrop-filter:blur(var(--blur-lg));
    padding:2rem;transition:var(--transition);height:calc(100vh - 60px)}
  nav.open ul{right:0}
  .burger{display:block}
}

/*==================================================================
  HERO
===================================================================*/
.hero{
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  position:relative;
  color:var(--clr-text-light);
}
.hero-title{font-size:clamp(2rem,5vw,3.5rem);color:#fff}
.hero-sub{font-size:1.25rem;margin-bottom:2rem;color:#eee}
.hero .btn{font-size:1.1rem}

/*==================================================================
  GLASSMORPHISM SURFACES
===================================================================*/
.glass,
.widget,
.story-card,
.modal-content,
.glass-footer{
  background:var(--clr-surface);
  backdrop-filter:blur(var(--blur-lg));
  border:1px solid var(--clr-border);
  border-radius:var(--radius-md);
  box-shadow:0 4px 20px rgba(0,0,0,.1);
}

/*==================================================================
  BUTTONS & INTERACTIVES
===================================================================*/
.btn,
button,
input[type='submit']{
  --btn-bg:var(--clr-accent);
  --btn-bg-h:var(--clr-accent-d);
  display:inline-block;
  padding:.75em 1.6em;
  border:none;
  border-radius:var(--radius-md);
  background:var(--btn-bg);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease;
  text-decoration:none;
}
.btn:hover,
button:hover,
input[type='submit']:hover{
  background:var(--btn-bg-h);
  transform:translateY(-2px);
}
.btn:active,
button:active{
  transform:translateY(0)
}

/*==================================================================
  STATISTICS WIDGET
===================================================================*/
.widget{
  padding:2rem;
  text-align:center;
}
.widget .counter{
  font-family:var(--ff-heading);
  font-size:2.6rem;
  color:var(--clr-accent);
  display:block;
}

/*==================================================================
  TIMELINE
===================================================================*/
.timeline{
  display:flex;
  justify-content:center;
  gap:1.5rem;
  margin-top:2rem
}
.timeline .step{
  display:flex;flex-direction:column;align-items:center;gap:.5rem
}
.timeline span{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--grad-accent);color:#fff;font-weight:700
}

/*==================================================================
  CARDS (Clientele & Others)
===================================================================*/
.cards{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:2rem;
}
.card{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:1.5rem;
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-md);
  transition:var(--transition);
}
.card:hover{transform:translateY(-4px)}
.card-image{
  width:100%;
  height:260px;
  overflow:hidden;
  border-radius:var(--radius-md);
  margin-bottom:1rem;
  display:flex;align-items:center;justify-content:center;
}
.card-image img{
  width:100%;height:100%;object-fit:cover;display:block;margin:0 auto;
}
.card-content p{margin:0}

/*==================================================================
  STORIES GALLERY
===================================================================*/
.stories-gallery{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:2rem;
}
.story-card{
  padding:2rem;font-style:italic;
  transition:var(--transition);
}
.story-card:hover{transform:scale(1.02)}

/*==================================================================
  CONTACT FORM
===================================================================*/
.contact-form{
  max-width:550px;margin:0 auto;display:grid;gap:1.2rem;
}
.field{
  display:flex;flex-direction:column;gap:.4rem
}
input[type=text],
input[type=email],
textarea{
  padding:.8rem 1rem;border:1px solid var(--clr-border);
  border-radius:var(--radius-md);background:rgba(255,255,255,.6);
  font-family:var(--ff-body);resize:vertical;
}
input:focus,textarea:focus{outline:none;border-color:var(--clr-accent)}

/*==================================================================
  FOOTER
===================================================================*/
.glass-footer{
  padding:2rem 0;background:var(--clr-surface-h);
  text-align:center;
}
.glass-footer .footer-nav a,
.glass-footer .social a{
  margin:0 .6rem;color:var(--clr-text);text-decoration:none;transition:color .2s ease
}
.glass-footer a:hover{color:var(--clr-accent)}

/*==================================================================
  MODAL
===================================================================*/
.modal{display:none;position:fixed;inset:0;z-index:9990;
  background:rgba(0,0,0,.6);align-items:center;justify-content:center}
.modal-content{padding:2rem;max-width:420px;text-align:center;position:relative}
.modal .close{
  position:absolute;top:.6rem;right:.8rem;font-size:1.5rem;
  color:var(--clr-text);cursor:pointer;background:none;border:none}

/*==================================================================
  UTILITIES
===================================================================*/
.parallax{background-attachment:fixed;background-size:cover;background-repeat:no-repeat}
.fade-in-up{opacity:0;transform:translateY(20px);animation:fadeInUp .7s forwards}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}
.section{position:relative}
.section:nth-of-type(even){background:rgba(0,0,0,.02)} /* subtle stripes */

/*==================================================================
  PAGE SPECIFICS
===================================================================*/
.success-page{min-height:100vh;display:flex;align-items:center;justify-content:center}
.legal-page{padding-top:100px}
a.read-more{
  color:var(--clr-accent);font-weight:600;position:relative;text-decoration:none
}
a.read-more::after{
  content:'»';margin-left:.3rem;transition:transform .2s ease
}
a.read-more:hover::after{transform:translateX(3px)}

/*==================================================================
  SOCIAL TEXT ICONS
===================================================================*/
.social a{
  position:relative;padding:0 .4rem;font-weight:600
}
.social a::before{
  content:'·';position:absolute;left:-.3rem;color:var(--clr-accent)
}
.social a:first-child::before{display:none}

/*==================================================================
  RESPONSIVE FIXES
===================================================================*/
@media(max-width:576px){
  .timeline{flex-direction:column}
  .timeline .step{flex-direction:row;gap:1rem;align-items:center}
  .timeline p{margin:0}
}