/* Custom styles to enhance homepage visuals */
:root{
  --accent: #0ea5e9; /* sky-500 */
  --accent-dark: #0369a1; /* sky-800 */
}

/* Alan Sans - local @font-face. Place font files in assets/fonts/ with these names:
   - assets/fonts/AlanSans-Regular.woff2
   - assets/fonts/AlanSans-SemiBold.woff2 (optional)
   - assets/fonts/AlanSans-Bold.woff2 (optional)
 If those files are not present the hero will fall back to Poppins. */
@font-face{
  font-family: 'Alan Sans';
  src: url('../assets/fonts/AlanSans-Regular.woff2') format('woff2'),
       url('../assets/fonts/AlanSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Alan Sans';
  src: url('../assets/fonts/AlanSans-SemiBold.woff2') format('woff2'),
       url('../assets/fonts/AlanSans-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* Use Poppins for a smooth modern look */
body { font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
/* Font smoothing for crisper rendering */
html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Apply Alan Sans to hero if available, fall back to Poppins */
.hero-font{ font-family: 'Alan Sans', 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }

/* Small utility to apply Alan Sans to a single element (falls back to Poppins) */
.alan-sans{ font-family: 'Alan Sans', 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; font-weight:400; }

/* Hero background using header_background.jpg */
.hero-illustration{
  background-image: linear-gradient(180deg, rgba(2,6,23,0.35), rgba(2,6,23,0.35)), url('header_background.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Glass card */
.glass-card{
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.6);
}

/* Decorative SVG wave placement */
.svg-wave{ transform: translateY(-1px); }

/* Service icon circle */
.service-icon{
  width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center; border-radius:9999px; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:white; box-shadow:0 8px 18px rgba(3,105,161,0.12);
}

/* Footer tweak */
footer{ background: linear-gradient(90deg,var(--accent-dark),#075985); }

/* Subtle focus outline for accessibility */
:focus{ outline: 3px solid rgba(14,165,233,0.18); outline-offset:2px; }

/* Responsive tweaks */
@media (max-width:640px){
  .hero-illustration{ background-position: 50% 30%; background-size: contain; background-repeat: no-repeat; }
}

/* About section background and card */
.about-section{
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
  background-image: linear-gradient(180deg, rgba(14,165,233,0.02) 0%, rgba(3,105,161,0.02) 100%), linear-gradient(135deg, rgba(255,255,255,0.4) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.4) 75%, transparent 75%, transparent 100%);
  background-size: cover, 28px 28px;
}

.about-card{
  background: rgba(255,255,255,0.9);
  border-radius: 14px;
  padding: 2.25rem;
  box-shadow: 0 12px 30px rgba(2,6,23,0.06);
  border: 1px solid rgba(2,6,23,0.04);
}

/* Curve the bottom of the hero section */
.hero-illustration { position: relative; overflow: hidden; }
.hero-illustration::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 120px;
  background: white;
  border-top-left-radius: 50% 30px;
  border-top-right-radius: 50% 30px;
  transform: translateY(40%);
}

/* Reduce vertical gaps between sections */
section{ padding-top: 3.25rem; padding-bottom: 3.25rem; }


@media (max-width:640px){
  .about-card{ padding: 1rem; }
}

/* About typography and illustration */
.about-lead{
  font-size: 1.125rem;
  line-height: 1.7;
  color: #334155; /* slate-700 */
}

.about-separator{
  height: 3px;
  width: 64px;
  background: linear-gradient(90deg,var(--accent),var(--accent-dark));
  border-radius: 9999px;
  margin-top: 1rem;
  margin-bottom: 1.25rem;
}

.about-fig{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%;
}

.about-badge{
  width:300px; height:300px; border-radius:18px; background:linear-gradient(135deg,rgba(14,165,233,0.12),rgba(3,105,161,0.06)); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(2,6,23,0.06);
}

@media (max-width:768px){
  .about-badge{ width:200px; height:200px; }
}