/* =========================================================
   ROOT VARIABLES
   ========================================================= */
:root{
  --bg-1:#f8fafc;
  --bg-2:#ffffff;

  --text:#0f172a;
  --muted:#475569;
  --muted2:#64748b;
  --text-soft-strong:#1e293b;

  --line:rgba(15,23,42,.10);
  --line-strong:rgba(15,23,42,.16);

  --accent:#1d4ed8;
  --accent2:#0f766e;

  --shadow-sm:0 8px 22px rgba(2,6,23,.06);
  --shadow-md:0 18px 45px rgba(2,6,23,.10);
  --shadow-lg:0 26px 70px rgba(2,6,23,.14);

  --radius:18px;
  --max:1120px;

  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;

  --ease:cubic-bezier(.2,.8,.2,1);
  --t-fast:160ms;
  --t-slow:320ms;
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:var(--font);
  color:var(--text);
  line-height:1.7;
  background:
    radial-gradient(1050px 360px at 16% -6%, rgba(29,78,216,.10), transparent 60%),
    radial-gradient(980px 360px at 86% -2%, rgba(15,118,110,.08), transparent 60%),
    linear-gradient(180deg,#f8fafc 0%,#ffffff 48%,#f8fafc 100%);
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:none}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 22px;
}

@media(max-width:600px){
  .container{padding:0 16px}
}

/* =========================================================
   TYPOGRAPHY - RESPONSIVE
   ========================================================= */
h1,h2,h3{
  margin:0;
  letter-spacing:-.02em;
}

h1{
  font-size:clamp(28px, 5vw, 46px);
  letter-spacing:-.7px;
}

h2{
  font-size:clamp(24px, 4vw, 30px);
}

h3{
  font-size:clamp(18px, 3vw, 22px);
}

p{margin:0;color:var(--muted)}

.lead{
  margin-top:14px;
  font-size:clamp(16px, 2.5vw, 18px);
  max-width:860px;
  color:rgba(71,85,105,.92);
}

.sub{
  font-size:clamp(14px, 2vw, 16px);
  max-width:760px;
  color:var(--muted2);
}

/* =========================================================
   HEADER - RESPONSIVE WITH MOBILE MENU
   ========================================================= */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  background:#ffffff;
  border-bottom:1px solid rgba(15,23,42,.10);
  box-shadow:0 8px 26px rgba(2,6,23,.06);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  gap:20px;
  position:relative;
}

/* =========================================================
   BRAND (LOGO + SLOGAN) - RESPONSIVE
   ========================================================= */
.brand{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:14px;
  z-index:101;
}

.logo-img{
  height:clamp(52px, 10vw, 76px);
  width:auto;
  display:block;
}

.brand-tagline{
  position:absolute;
  left:calc(100% + 14px);
  bottom:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  font-size:clamp(10px, 1.5vw, 12px);
  font-weight:600;
  letter-spacing:.25px;
  line-height:1.2;
  color:rgba(71,85,105,.88);
}

.brand-tagline span{
  display:block;
  white-space:nowrap;
  line-height:1.2;
}

@media(max-width:720px){
  .brand-tagline{display:none}
}

/* =========================================================
   MOBILE MENU TOGGLE BUTTON
   ========================================================= */
.menu-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:8px;
  cursor:pointer;
  z-index:101;
}

.menu-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:var(--text);
  transition:all var(--t-fast) var(--ease);
}

.menu-toggle.active span:nth-child(1){
  transform:rotate(45deg) translate(6px, 6px);
}

.menu-toggle.active span:nth-child(2){
  opacity:0;
}

.menu-toggle.active span:nth-child(3){
  transform:rotate(-45deg) translate(6px, -6px);
}

@media(max-width:900px){
  .menu-toggle{display:flex}
}

/* =========================================================
   NAV MENU - RESPONSIVE
   ========================================================= */
.menu{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.menu a{
  padding:9px 12px;
  border-radius:12px;
  color:var(--muted);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
  white-space:nowrap;
}

.menu a:hover{
  background:rgba(15,23,42,.05);
  color:var(--text);
}

.menu a.active{
  background:rgba(29,78,216,.10);
  color:var(--text);
}

/* Mobile menu styling */
@media(max-width:900px){
  .menu{
    position:fixed;
    top:0;
    right:-100%;
    width:280px;
    height:100vh;
    background:#ffffff;
    flex-direction:column;
    align-items:stretch;
    padding:90px 24px 24px;
    gap:8px;
    box-shadow:-8px 0 24px rgba(0,0,0,.1);
    transition:right var(--t-slow) var(--ease);
  }
  
  .menu.active{
    right:0;
  }
  
  .menu a{
    padding:14px 16px;
    font-size:16px;
  }
}

/* =========================================================
   BUTTONS - RESPONSIVE
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:clamp(8px, 1.5vw, 10px) clamp(12px, 2vw, 16px);
  border-radius:14px;
  font-weight:650;
  font-size:clamp(14px, 1.8vw, 15px);
  border:1px solid var(--line-strong);
  background:#fff;
  transition:all var(--t-fast) var(--ease);
  white-space:nowrap;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.btn.primary{
  border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;
  font-weight:800;
  box-shadow:0 16px 40px rgba(29,78,216,.18);
}

.btn.primary:hover{
  box-shadow:0 20px 50px rgba(29,78,216,.25);
}

/* Hide header CTA button on mobile to save space */
@media(max-width:900px){
  .nav > .btn.primary{
    display:none;
  }
}

/* =========================================================
   HERO - RESPONSIVE
   ========================================================= */
.hero{
  padding:clamp(40px, 8vw, 86px) 0 clamp(32px, 6vw, 56px);
}

.hero .btn-group{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Stack buttons vertically on very small screens */
@media(max-width:480px){
  .hero .btn-group{
    flex-direction:column;
  }
  
  .hero .btn-group .btn{
    width:100%;
  }
}

/* =========================================================
   SECTIONS - RESPONSIVE
   ========================================================= */
.section{
  padding:clamp(40px, 8vw, 70px) 0;
}

.section > .container{
  background:rgba(255,255,255,.58);
  border:1px solid rgba(15,23,42,.08);
  border-radius:clamp(16px, 3vw, 22px);
  padding:clamp(20px, 4vw, 32px) clamp(16px, 3vw, 28px);
  box-shadow:0 10px 34px rgba(2,6,23,.045);
}

.section h2{
  margin-bottom:10px;
}

/* =========================================================
   CARDS - FULLY RESPONSIVE GRID
   ========================================================= */
.cards{
  display:grid;
  gap:clamp(12px, 2.5vw, 20px);
  margin-top:24px;
}

/* Default: 4 columns */
.cards{
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}

/* 2-column variant */
.cards.cards-2{
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}

/* 4-column variant - responsive breakpoints */
.cards.cards-4{
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
}

/* Tablet optimization */
@media(max-width:900px){
  .cards.cards-4{
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  }
}

/* Mobile: always single column for better readability */
@media(max-width:600px){
  .cards,
  .cards.cards-2,
  .cards.cards-4{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   CARD STYLES - RESPONSIVE
   ========================================================= */
.card{
  position:relative;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--radius);
  padding:clamp(16px, 3vw, 22px);
  box-shadow:0 10px 28px rgba(2,6,23,.06);
  transition:transform var(--t-slow) var(--ease),box-shadow var(--t-slow) var(--ease);
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 70px rgba(2,6,23,.14);
}

.card h3{
  margin-bottom:10px;
}

.card p{
  margin-bottom:14px;
  font-size:clamp(14px, 2vw, 15px);
}

.card ul{
  margin:0;
  padding-left:18px;
  font-size:clamp(13px, 1.8vw, 14px);
}

.card li{
  color:var(--text-soft-strong);
  margin:6px 0;
  line-height:1.6;
}

/* =========================================================
   FOOTER - RESPONSIVE
   ========================================================= */
.footer{
  margin-top:clamp(32px, 8vw, 64px);
  padding:clamp(32px, 6vw, 56px) 0 0;
  border-top:1px solid rgba(15,23,42,.12);
  background:
    radial-gradient(900px 240px at 18% 0%, rgba(29,78,216,.08), transparent 55%),
    radial-gradient(900px 240px at 82% 0%, rgba(15,118,110,.06), transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(241,245,249,1));
  color:#334155;
  font-size:clamp(13px, 1.8vw, 14px);
  text-align:center;
}

.footer .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}

.footer a{
  color:var(--accent);
}

.footer-right img{
  height:clamp(32px, 5vw, 42px);
  width:auto;
  opacity:.95;
}

.footer::after{
  content:"";
  display:block;
  margin-top:clamp(24px, 5vw, 40px);
  height:clamp(40px, 6vw, 54px);
  background:linear-gradient(180deg,rgba(15,23,42,.02),rgba(15,23,42,.06));
  border-top:1px solid rgba(15,23,42,.10);
}

@media(max-width:700px){
  .footer .container{
    flex-direction:column;
    text-align:center;
  }
}

/* =========================================================
   UTILITY CLASSES
   ========================================================= */

/* Flexible button groups */
.btn-group{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Hide on mobile */
@media(max-width:600px){
  .hide-mobile{display:none !important}
}

/* Hide on desktop */
@media(min-width:601px){
  .hide-desktop{display:none !important}
}

/* =========================================================
   OVERLAY FOR MOBILE MENU
   ========================================================= */
.menu-overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.4);
  z-index:99;
  opacity:0;
  transition:opacity var(--t-slow) var(--ease);
}

.menu-overlay.active{
  display:block;
  opacity:1;
}

@media(min-width:901px){
  .menu-overlay{display:none !important}
}

/* =========================================================
   ACCESSIBILITY & FOCUS STATES
   ========================================================= */
a:focus,
button:focus,
.btn:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* =========================================================
   PRINT STYLES
   ========================================================= */
@media print{
  .topbar,
  .btn,
  .menu-toggle{display:none}
  
  body{
    background:#fff;
    color:#000;
  }
  
  .section > .container{
    border:1px solid #ccc;
    box-shadow:none;
  }
}
/* =========================================================
   CARD HIGHLIGHT EFFECT (Add to end of styles.css)
   ========================================================= */

/* Highlighted card style */
.card-highlighted {
  background: linear-gradient(135deg, 
    rgba(29, 78, 216, 0.08) 0%, 
    rgba(15, 118, 110, 0.06) 100%) !important;
  border: 2px solid rgba(29, 78, 216, 0.3) !important;
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.1), 
              0 20px 50px rgba(29, 78, 216, 0.15) !important;
  transform: translateY(-2px) !important;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Fade out transition */
.card-highlight-fade {
  transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px; /* Account for sticky header */
}