/* ============================================================
  style.css  |  NeoConsult — Futuristic / Neo-Brutalism Theme
  Tailwind CSS is loaded globally; this file adds custom tokens,
  utilities and component styles that complement the framework.
============================================================ */

/* -------------  ROOT TOKENS ------------- */
:root{
  /* Brand Palette (Bright / Vibrant) */
  --clr-primary        : #d946ef; /* fuchsia-600 */
  --clr-primary-dark   : #a21caf; /* fuchsia-800 */
  --clr-accent         : #6366f1; /* indigo-500 */
  --clr-accent-dark    : #4338ca; /* indigo-700 */
  --clr-success        : #10b981; /* emerald-500 */
  --clr-bg             : #0f0f0f;
  --clr-surface        : #111827; /* slate-900 */
  --clr-card           : rgba(255,255,255,.04);
  --clr-text-main      : #ffffff;
  --clr-text-dark      : #222222;
  --clr-text-muted     : #9ca3af;

  /* Gradients */
  --gradient-brand     : linear-gradient(135deg,#0ea5e9 0%,#6366f1 50%,#d946ef 100%);
  --gradient-glass     : linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.06) 100%);

  /* Easing */
  --ease               : cubic-bezier(.4,0,.2,1);

  /* Radius */
  --radius-lg          : 1rem;
}

/* -------------  GLOBAL RESETS / BASE ------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Merriweather',serif;
  background:var(--clr-bg);
  color:var(--clr-text-main);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  line-height:1.2;
  color:var(--clr-text-main);
  text-shadow:1px 1px 3px rgba(0,0,0,.5); /* better contrast */
}
section{position:relative;overflow:hidden}

/* -------------  TYPOGRAPHY HELPERS ------------- */
.lead{font-size:1.125rem;line-height:1.75rem}
.text-muted{color:var(--clr-text-muted)}
.center{text-align:center}

/* -------------  BUTTONS ------------- */
.btn,
button,
input[type='submit']{
  --_bg:var(--clr-primary);
  --_bg-hover:var(--clr-primary-dark);
  --_clr:var(--clr-text-main);

  display:inline-block;
  padding:.85rem 2.5rem;
  background:var(--_bg);
  color:var(--_clr);
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  border:none;
  border-radius:var(--radius-lg);
  cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.btn-accent{--_bg:var(--clr-accent);--_bg-hover:var(--clr-accent-dark)}
.btn-success{--_bg:var(--clr-success);--_bg-hover:#059669}
.btn:hover,
button:hover,
input[type='submit']:hover{background:var(--_bg-hover);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* -------------  LINKS ------------- */
a{color:var(--clr-primary);transition:color .25s var(--ease)}
a:hover{color:var(--clr-accent)}
.read-more{
  position:relative;
  font-weight:600;
  padding-right:1.75rem;
}
.read-more::after{
  content:'›';
  position:absolute;
  right:.25rem;top:50%;
  transform:translateY(-50%);
  transition:transform .3s var(--ease);
}
.read-more:hover::after{transform:translate(4px,-50%)}

/* -------------  NAVIGATION ------------- */
header{backdrop-filter:blur(6px)}
#burger span{transition:transform .25s var(--ease)}
#burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
#burger.open span:nth-child(2){opacity:0}
#burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
#mobileMenu a{font-family:'Montserrat',sans-serif}

/* -------------  HERO ------------- */
#hero{
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
#hero .lead{max-width:40rem;margin:0 auto}

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

/* -------------  GLASSMORPHISM ------------- */
.glass{
  background:var(--gradient-glass);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius-lg);
}

/* -------------  CARDS & FLEX GRIDS ------------- */
.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--clr-card);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.card:hover,
.item:hover,
.testimonial:hover,
.team-member:hover,
.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 20px rgba(0,0,0,.35);
}

/* Image container inside cards */
.card-image,
.image-container{
  width:100%;
  height:220px;
  overflow:hidden;
  border-radius:calc(var(--radius-lg) - 2px);
  margin-bottom:1rem;
  flex-shrink:0;
}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto;
  display:block;
}

/* -------------  PRICING TABLES ------------- */
.pricing-tier{
  border:4px solid var(--clr-accent);
}
.pricing-tier--primary{border-color:var(--clr-primary)}
.pricing-tier--success{border-color:var(--clr-success)}

/* -------------  SUCCESS PAGE ------------- */
.success-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* -------------  LEGAL PAGES (privacy / terms) ------------- */
main.legal-content{
  padding-top:100px;
}

/* -------------  FOOTER ------------- */
footer{
  background:var(--clr-surface);
  color:var(--clr-text-muted);
  font-size:.875rem;
}
footer h4{color:var(--clr-text-main)}
footer a{color:var(--clr-text-muted)}
footer a:hover{color:var(--clr-primary)}
.social-link{font-weight:600}
.social-link:hover{text-decoration:underline}

/* -------------  ANIMATIONS ------------- */
/* Generic fade-in / slide-up for ScrollReveal fallback */
@keyframes fadeUp{
  0%{opacity:0;transform:translateY(40px)}
  100%{opacity:1;transform:translateY(0)}
}
[data-sr]{animation:fadeUp .9s var(--ease) forwards;opacity:0}

/* Smooth gradient shine on hover for cards */
@keyframes shine{
  to{background-position:200% center}
}
.card:hover::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.15) 50%,transparent 100%);
  background-size:200% 100%;
  animation:shine .75s;
}

/* -------------  UTILITIES ------------- */
.full-w{width:100%}
.full-h{height:100%}
.flex-center{display:flex;align-items:center;justify-content:center}
.gradient-bg{background:var(--gradient-brand);color:var(--clr-text-main)}
.text-shadow{ text-shadow:1px 1px 3px rgba(0,0,0,.4) }

/* -------------  RESPONSIVE TWEAKS ------------- */
@media(max-width:768px){
  h1{font-size:2.25rem}
  h2{font-size:1.75rem}
  #mobileMenu{gap:1rem}
  .card-image, .image-container{height:180px}
}