/* =========================================================
  FinanAR · Futuristic Triadic Theme
  Author: YourName
  Description: Modular, performance-oriented layer that
               complements Bulma without overriding its core
               ------------------------------------------------
  01 : Root Tokens / Triad Palette
  02 : Generic Resets & Helpers
  03 : Layout Blocks (Hero, Sections, Grid)
  04 : Cards & Image Handling
  05 : Typography / Links / Buttons
  06 : Effects (Hover, Scroll, Parallax, Glass)
  07 : Utilities & Responsive Queries
========================================================= */

/* ============= 01 · ROOT TOKENS ======================= */
:root{
  /* Triadic Core */
  --clr-primary:   #0d8bff;       /* Bright Azure   */
  --clr-secondary: #ff4da6;       /* Neon Fuchsia   */
  --clr-tertiary:  #7BFF4D;       /* Cyber Lime     */

  /* Tints / Shades */
  --clr-primary-dark:   #005ac4;
  --clr-secondary-dark: #c30078;
  --clr-tertiary-dark:  #46c400;

  --clr-bg:  #0e1013;             /* Global Dark BG */
  --clr-surface: #16191f;         /* Section BG     */
  --clr-glass: rgba(255,255,255,.06);

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

  /* Elevation */
  --radius-s: .5rem;
  --shadow-s: 0 4px 12px rgba(0,0,0,.15);

  /* Transitions */
  --tr-fast: 150ms ease;
  --tr-med:  300ms ease;
}

/* ============= 02 · GENERIC RESETS & HELPERS ========== */
html{scroll-behavior:smooth;background:var(--clr-bg);}
body{color:#f5f7fa;font-family:var(--ff-body);line-height:1.6;background:var(--clr-bg);}
h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-heading);
  font-weight:800;
  line-height:1.2;
  color:#fff;
}
.section{padding:4rem 1.5rem;background:var(--clr-surface);}
.text-center{text-align:center;}
/* Padding top fix for pages under fixed navbar */
body[data-barba-namespace="privacy"],
body[data-barba-namespace="terms"]{padding-top:100px;}

/* Success page */
body[data-barba-namespace="success"]{
  min-height:100vh;
  display:flex;justify-content:center;align-items:center;
}

/* ============= 03 · LAYOUT BLOCKS ===================== */
/* Hero */
.hero{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  background-size:cover;background-repeat:no-repeat;background-position:center;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5));
  z-index:0;
}
.hero .container{position:relative;z-index:1;}
.hero .title,
.hero .subtitle{color:#fff;text-shadow:1px 1px 4px rgba(0,0,0,.7);}
.hero .field{margin-top:2rem;}
/* Parallax helper */
.parallax{background-attachment:fixed;}

/* Section Grid Generic */
.section-grid{
  display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

/* ============= 04 · CARDS & IMAGE HANDLING ============ */
.card, .item, .testimonial, .team-member, .product-card{
  display:flex;flex-direction:column;align-items:center;
  background:var(--clr-glass);
  backdrop-filter:blur(12px);
  border-radius:var(--radius-s);
  box-shadow:var(--shadow-s);
  overflow:hidden;
  transition:transform var(--tr-med), box-shadow var(--tr-med);
}
.card:hover{transform:translateY(-6px);box-shadow:0 8px 24px rgba(0,0,0,.25);}

.image-container{
  width:100%;height:240px; /* Fixed height */
  overflow:hidden;
}
.image-container img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  margin:0 auto;
}
.card-content{text-align:center;padding:1.5rem;}

/* ============= 05 · TYPOGRAPHY / LINKS / BUTTONS ====== */
a{color:var(--clr-primary);transition:color var(--tr-fast);}
a:hover{color:var(--clr-secondary);}
a.read-more{
  font-weight:600;
  position:relative;
}
a.read-more::after{
  content:"";
  position:absolute;left:0;bottom:-2px;
  width:100%;height:2px;
  background:var(--clr-secondary);
  transition:transform var(--tr-fast);
  transform:scaleX(0);transform-origin:left;
}
a.read-more:hover::after{transform:scaleX(1);}

/* Global Button Set */
.btn,
button,
input[type='submit']{
  font-family:var(--ff-heading);
  font-weight:600;
  padding:.75rem 1.75rem;
  border:none;border-radius:var(--radius-s);
  background:var(--clr-primary);
  color:#fff;
  cursor:pointer;
  transition:background var(--tr-fast), transform var(--tr-fast);
}
.btn.is-secondary{background:var(--clr-secondary);}
.btn.is-tertiary{background:var(--clr-tertiary);}
.btn:hover,
button:hover,
input[type='submit']:hover{background:var(--clr-primary-dark);transform:translateY(-2px);}
.btn:active{transform:scale(.96);}

/* ============= 06 · EFFECTS & ANIMATIONS ============== */
/* Scroll Reveal */
.scroll-reveal{opacity:0;transform:translateY(40px);transition:opacity var(--tr-med),transform var(--tr-med);}
.scroll-reveal.in-view{opacity:1;transform:none;}

/* Glassmorphism Utility */
.glass{
  background:var(--clr-glass);
  backdrop-filter:blur(14px) saturate(160%);
  border-radius:var(--radius-s);
}

/* Social Links (text-only) */
.footer a{
  color:var(--clr-tertiary);
  font-weight:500;
  margin:0 .35rem;
  transition:color var(--tr-fast);
}
.footer a:hover{color:var(--clr-secondary);text-decoration:underline;}

/* Sticky / Transparent Navbar */
.navbar{
  background:rgba(14,16,19,.75);
  backdrop-filter:blur(10px);
}
.navbar.is-spaced{padding:.75rem 1.5rem;}
.navbar-item{font-family:var(--ff-heading);font-weight:600;}

/* ============= 07 · UTILITIES & RESPONSIVE ============ */
.mt-0{margin-top:0!important;}
.mb-0{margin-bottom:0!important;}
.pt-6{padding-top:6rem!important;}
.pb-6{padding-bottom:6rem!important;}

/* Media */
@media (max-width:768px){
  .section{padding:3rem 1rem;}
  .hero .title{font-size:2rem;}
  .hero .subtitle{font-size:1.125rem;}
}

/* ======================================================
   End Stylesheet
====================================================== */