/*
  style.css
  Theme: Financial Consulting
  Design System: Glassmorphism with Dynamic Color Transitions
  Fonts: Inter (Headings), IBM Plex Sans (Body)
*/

/* --- 1. CSS VARIABLES & SETUP --- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&family=Inter:wght@700;900&display=swap');

:root {
  /* Dynamic Color Palette (Pastel) */
  --color-primary: #a881e6; /* Lavender */
  --color-primary-dark: #9b6ddb;
  --color-secondary: #8ec5fc; /* Light Blue */
  --color-accent: #f6d365; /* Soft Gold */
  
  /* Background Gradient */
  --gradient-start: #e0c3fc;
  --gradient-end: #8ec5fc;

  /* Text Colors */
  --text-dark: #2c3e50; /* Dark Slate Blue for high contrast */
  --text-dark-subtle: #34495e;
  --text-light: #ffffff;
  --text-light-subtle: #f0f0f0;
  
  /* Glassmorphism */
  --glass-background: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur: 10px;
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

  /* Fonts */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  
  /* Transitions */
  --transition-speed: 0.4s;
  --transition-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Non-linear */
}

/* --- 2. GLOBAL STYLES --- */
html {
  scroll-behavior: smooth;
  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  line-height: 1.7;
}

/* --- 3. TYPOGRAPHY & LINKS --- */
h1, h2, h3, h4, h5, h6, .title, .subtitle {
  font-family: var(--font-heading);
  color: var(--text-dark);
}

.section-title {
  color: #222222;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
  margin-bottom: 3rem !important;
  text-align: center;
}

a {
  color: var(--color-primary);
  transition: color var(--transition-speed) ease;
}

a:hover {
  color: var(--color-primary-dark);
}

.read-more-link {
    display: inline-block;
    margin-top: 1rem;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    padding-bottom: 5px;
}

.read-more-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-speed) var(--transition-easing);
}

.read-more-link:hover::after {
    transform: scaleX(1);
}


/* --- 4. LAYOUT & PAGE-SPECIFIC WRAPPERS --- */
.section {
    padding: 4rem 1.5rem;
}

/* For pages like privacy.html and terms.html */
.content-page {
    padding-top: 100px;
    padding-bottom: 50px;
}

/* For success.html page */
.full-vh-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
}

/* --- 5. COMPONENTS --- */

/* 5.1 Navigation Bar */
.navbar.is-fixed-top {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.navbar-item, .navbar-link {
  color: var(--text-dark) !important;
  font-weight: 500;
  transition: all var(--transition-speed) var(--transition-easing);
}

.navbar-item:hover, .navbar-link:hover, .navbar-item.is-active {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--color-primary) !important;
  transform: translateY(-2px);
}

.navbar-burger {
  color: var(--text-dark) !important;
}

/* 5.2 Hero Section */
.hero.is-fullheight {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%);
  z-index: 1;
}

.hero .hero-body {
  position: relative;
  z-index: 2;
}

.hero .title, .hero .subtitle {
  color: var(--text-light);
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

/* 5.3 Global Button Styles */
.button.is-primary, button, input[type="submit"], .btn {
  background: var(--color-primary);
  border: none;
  font-family: var(--font-heading);
  font-weight: 700;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: all var(--transition-speed) var(--transition-easing);
  transform: perspective(1px) translateZ(0);
}

.button.is-primary:hover, button:hover, input[type="submit"]:hover, .btn:hover {
  background: var(--color-primary-dark);
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* 5.4 Glassmorphism Card */
.glass-card {
  background: var(--glass-background);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  overflow: hidden;
  height: 100%;
  transition: transform var(--transition-speed) var(--transition-easing), box-shadow var(--transition-speed) var(--transition-easing);
  display: flex;
  flex-direction: column;
}

.glass-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}

.glass-card .card-content {
  color: var(--text-dark);
  flex-grow: 1;
}

/* Strict Card Image Styling */
.card-image {
    text-align: center;
    width: 100%;
}
.card-image .image {
    height: 250px; /* Fixed height for consistency */
    overflow: hidden;
}
.card-image img {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.card .content {
    text-align: left;
}
.card .media {
    text-align: left;
}

/* 5.5 Forms */
.glass-input, .glass-textarea {
  background: rgba(255, 255, 255, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 8px !important;
  color: var(--text-dark) !important;
  backdrop-filter: blur(2px);
  transition: all var(--transition-speed) var(--transition-easing);
  box-shadow: none !important;
}

.glass-input::placeholder, .glass-textarea::placeholder {
  color: #5a6e82 !important;
}

.glass-input:focus, .glass-textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 0.125em rgba(168, 129, 230, 0.5) !important;
}

.label {
    color: var(--text-dark) !important;
    font-weight: 500;
}

/* 5.6 Progress Indicator */
progress.progress.is-primary::-webkit-progress-bar {
  background-color: rgba(255, 255, 255, 0.4);
}
progress.progress.is-primary::-webkit-progress-value {
  background: var(--color-primary);
  transition: width 1s var(--transition-easing);
}
progress.progress.is-primary::-moz-progress-bar {
  background: var(--color-primary);
}

/* --- 6. FOOTER --- */
.footer {
  background-color: rgba(10, 10, 10, 0.3);
  color: var(--text-light-subtle);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer .title {
  color: var(--text-light);
}

.footer .subtitle {
  color: #e0e0e0;
}

.footer a {
  color: #d1b8f8;
  transition: color var(--transition-speed) ease, padding-left var(--transition-speed) var(--transition-easing);
  position: relative;
}

.footer a:hover {
  color: var(--text-light);
  padding-left: 8px;
}
.footer a:hover::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 0;
}


/* --- 7. ANIMATIONS --- */
[data-aos] {
  transition-timing-function: var(--transition-easing);
}


/* --- 8. RESPONSIVE DESIGN --- */
@media screen and (max-width: 1023px) {
  .navbar-menu {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    border-radius: 0 0 15px 15px;
    padding: 0.5rem 0;
  }
}

@media screen and (max-width: 768px) {
  .section {
    padding: 3rem 1rem;
  }
  .hero.is-fullheight .hero-body {
    padding: 2rem;
  }
  .title.is-1 {
    font-size: 2.5rem;
  }
  .subtitle.is-3 {
    font-size: 1.25rem;
  }
}