/* ============================================
   Life Remedy Networks — Modern Landing Page
   styles.css  |  Logo-accurate color theme
   ============================================ */

/* ---------- CSS Variables — Logo Colors ---------- */
:root {
  /* Primary: Steel Blue (logo globe & "LIFE REMEDY" text) */
  --blue:         #2e5f8a;
  --blue-dark:    #1b3f60;
  --blue-deep:    #0f2540;
  --blue-mid:     #3a72a0;
  --blue-light:   #5a90bc;
  --blue-pale:    #e6eff7;

  /* Accent: Lime Green (logo swoosh & "NETWORKS" text) */
  --lime:         #7dc242;
  --lime-dark:    #5e9930;
  --lime-light:   #9ed666;
  --lime-pale:    #eef7e4;

  /* Neutrals */
  --white:        #ffffff;
  --off-white:    #f5f8fc;
  --light-gray:   #e8edf3;
  --mid-gray:     #8fa3b8;
  --text:         #1e3248;
  --text:         #1e3248;
  --text-pale:    #031a57;
  --muted:        #5a738a;
  --dark:         #0f2540;

  /* UI */
  --radius-sm:    8px;
  --radius-md:    16px;
  --radius-lg:    28px;
  --shadow-sm:    0 2px 12px rgba(46,95,138,.10);
  --shadow-md:    0 8px 32px rgba(46,95,138,.16);
  --shadow-lg:    0 20px 60px rgba(46,95,138,.22);
  --transition:   .35s cubic-bezier(.4,0,.2,1);
  --font-main:    'Poppins', sans-serif;
  --font-serif:   'Playfair Display', serif;
  --font-astro:   'a Astro Space', sans-serif;
                                                
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-main);
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--blue-pale); }
::-webkit-scrollbar-thumb { background: var(--blue-light); border-radius: 4px; }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp   { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInLeft { from { opacity:0; transform:translateX(-50px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeInRight{ from { opacity:0; transform:translateX(50px); } to { opacity:1; transform:translateX(0); } }
@keyframes zoomIn     { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }
@keyframes float      { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
@keyframes shimmer    { 0%{background-position:-200% center;} 100%{background-position:200% center;} }
@keyframes spin-slow  { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes pulse-ring { 0%{transform:scale(1);opacity:.6;} 100%{transform:scale(1.6);opacity:0;} }
@keyframes slideLine  { from{width:0;} to{width:60px;} }
@keyframes swooshIn   { from{stroke-dashoffset:400;} to{stroke-dashoffset:0;} }

/* Scroll-reveal helpers */
.reveal       { opacity:0; transform:translateY(40px);   transition:opacity .7s ease,transform .7s ease; }
.reveal-left  { opacity:0; transform:translateX(-50px);  transition:opacity .7s ease,transform .7s ease; }
.reveal-right { opacity:0; transform:translateX(50px);   transition:opacity .7s ease,transform .7s ease; }
.reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity:1; transform:none; }

/* ============================================
   HEADER / NAV
   ============================================ */
#navbar {
  position: fixed;
  top:0; left:0; right:0;
  z-index: 1000;
  padding: 0 5%;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), box-shadow var(--transition);
  border-bottom: 2px solid transparent;
}
#navbar.scrolled {
  background: rgba(255,255,255,.98);
  box-shadow: var(--shadow-md);
  border-bottom-color: var(--lime);
}

.nav-logo { display:flex; align-items:center; gap:12px; }
.nav-logo img { height:50px; width:auto; animation:zoomIn .6s ease; }
.nav-logo span {
  font-family: var(--font-astro);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.2;
  letter-spacing: 0.1em;

}
.nav-logo span em {
  font-style: normal;
  color: var(--lime-dark);
  display: block;
  font-size: 1rem;
  letter-spacing: 0.4em;
}

.nav-links { display:flex; gap:30px; align-items:center; }
.nav-links a {
  font-size: .88rem;
  font-weight: 500;
  color: var(--text);
  position: relative;
  padding-bottom: 10px;
  transition: color var(--transition);
}
.nav-links a::after {
  content:'';
  position:absolute;
  bottom:0; left:0;
  height:2px; width:0;
  background: var(--lime);
  transition:width var(--transition);
  border-radius:2px;
}
.nav-links a:hover { color:var(--blue); }
.nav-links a:hover::after { width:100%; }

.nav-cta {
  background: var(--blue) !important;
  color: var(--white) !important;
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 600 !important;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition) !important;
  border: 2px solid transparent !important;
}
.nav-cta:hover {
  background: var(--lime-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(125,194,66,.4) !important;
}
.nav-cta::after { display:none !important; }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; }
.hamburger span { display:block; height:2px; width:26px; background:var(--blue); border-radius:2px; transition:var(--transition); }

/* ============================================
   HERO SECTION
   ============================================ */
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  /* Logo-accurate gradient: deep blue → steel blue with lime accent glow */
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%, var(--blue-mid) 100%);
  padding: 100px 5% 60px;
}

.hero-bg-pattern {
  position: absolute; inset: 0;
    background-image:
    radial-gradient(circle at 20% 80%, rgba(125,194,66,.18) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(90,144,188,.2) 0%, transparent 50%);
  pointer-events: none;
}
.hero-bg-circles {
  position:absolute; inset:0;
  pointer-events:none; overflow:hidden;
}
.hero-bg-circles span {
  position:absolute; border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
}
.hero-bg-circles span:nth-child(1) { width:520px;height:520px;top:-160px;right:-100px;animation:spin-slow 45s linear infinite; }
.hero-bg-circles span:nth-child(2) { width:300px;height:300px;bottom:-80px;left:-80px;animation:spin-slow 30s linear infinite reverse; }
.hero-bg-circles span:nth-child(3) { width:180px;height:180px;top:38%;left:58%;animation:float 8s ease-in-out infinite; }

/* Lime swoosh decorative arc */
.hero-swoosh {
  position:absolute;
  bottom:-10px; left:-60px;
  width:600px; height:300px;
  pointer-events:none;
}
.hero-swoosh path {
  stroke: var(--lime);
  stroke-width: 3;
  fill: none;
  opacity: .25;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: swooshIn 2s ease .5s forwards;
}

.hero-content {
  position:relative; z-index:2;
  max-width:660px;
  animation:fadeInLeft .9s ease both;
}

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(125,194,66,.18);
  border: 1px solid rgba(125,194,66,.4);
  color: var(--lime-light);
  padding: 8px 18px; border-radius:50px;
  font-size:.82rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  margin-bottom:24px;
}
.hero-badge .dot {
  width:8px; height:8px;
  background:var(--lime); border-radius:50%; position:relative;
}
.hero-badge .dot::after {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  background:var(--lime); opacity:.4;
  animation:pulse-ring 1.5s ease-out infinite;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem,5vw,3.8rem);
  font-weight: 700; color: var(--white);
  line-height: 1.18; margin-bottom:20px;
}
.hero-title em {
  font-style:normal;
  background: linear-gradient(90deg, var(--lime-light), var(--lime), var(--lime-light));
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 3s linear infinite;
}

.hero-subtitle {
  font-size:1.05rem;
  color:rgba(255,255,255,.78);
  line-height:1.75; margin-bottom:36px;
  max-width:540px;
}

.hero-btns { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:48px; }
.btn-primary, .btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 30px; border-radius:50px;
  font-weight:600; font-size:.95rem;
  cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
  border:2px solid transparent;
}
.btn-primary {
  background: var(--lime);
  color: var(--dark);
}
.btn-primary:hover {
  background: var(--lime-light);
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(125,194,66,.45);
}
.btn-outline {
  background:transparent;
  border-color:rgba(255,255,255,.5);
  color:var(--white);
}
.btn-outline:hover {
  background:rgba(255,255,255,.1);
  border-color:var(--white);
  transform:translateY(-3px);
}

.hero-stats { display:flex; flex-wrap:wrap; gap:28px; }
.stat-item  { text-align:center; }
.stat-num {
  font-family:var(--font-serif); font-size:1.9rem;
  font-weight:700; color:var(--lime-light);
}
.stat-label {
  font-size:.78rem; color:rgba(255,255,255,.6);
  text-transform:uppercase; letter-spacing:.06em;
}

.hero-image {
  /* position:absolute; right:5%; bottom:100px; */
  position:absolute; right:7%; bottom:18%;
  width:50%; max-width:650px;
  animation:fadeInRight 1s ease .3s both;
  pointer-events:none;
}
.hero-image img {
  width:100%;
  filter:drop-shadow(0 20px 60px rgba(255, 255, 255, 0.35));
  animation:float 6s ease-in-out infinite;
}

/* ============================================
   SECTION COMMONS
   ============================================ */
.section { padding:90px 5%; }
.section-alt { background:var(--off-white); }

.section-tag {
  display:inline-block;
  background:var(--blue-pale);
  color:var(--blue);
  padding:6px 16px; border-radius:50px;
  font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:12px;
}
.section-tag.lime {
  background:var(--lime-pale);
  color:var(--lime-dark);
}

.section-title {
  font-family:var(--font-serif);
  font-size:clamp(1.8rem,3.5vw,2.7rem);
  font-weight:700; color:var(--dark);
  margin-bottom:14px; line-height:1.25;
}
.section-title span { color:var(--blue); }
.section-title span.lime { color:var(--lime-dark); }

.section-line {
  width:0; height:4px;
  /* Blue-to-lime gradient matches the logo swoosh direction */
  background:linear-gradient(90deg, var(--blue), var(--lime));
  border-radius:2px; margin-bottom:20px;
}
.section-line.animated { animation:slideLine 1s ease .3s forwards; }

.section-desc {
  font-size:1rem; color:var(--muted);
  line-height:1.8; max-width:620px;
}
.section-header { margin-bottom:56px; }

/* ============================================
   ABOUT SECTION
   ============================================ */
#about .about-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:64px; align-items:center;
}
.about-card-main {
  background:linear-gradient(135deg, var(--blue-light) 0%, var(--blue-mid) 100%);
  border-radius:var(--radius-lg);
  padding:48px 40px;
  color:var(--text-pale);
  box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden;
  border-bottom:4px solid var(--lime);
}
.about-card-main::before {
  content:'';
  position:absolute; top:-60px; right:-60px;
  width:200px; height:200px;
  background:rgba(125,194,66,.08); border-radius:50%;
}
.about-card-main::after {
  content:'';
  position:absolute; bottom:-40px; left:-40px;
  width:150px; height:150px;
  background:rgba(255,255,255,.04); border-radius:50%;
}
.about-card-main .lrn-logo { width:120px; margin-bottom:24px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.3)); }
.about-card-main h3 { font-family:var(--font-serif); font-size:1.6rem; margin-bottom:10px; }
.about-card-main p  { font-size:.92rem; opacity:.85; line-height:1.7; }

.about-badge-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.about-badge {
  /* background:rgba(125,194,66,.18); */
  background:rgba(162, 214, 117, 0.79);
  border:1px solid rgba(125, 189, 69, 0.35);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  display:flex; align-items:center; gap:10px;
  font-size:.82rem; font-weight:600;
  backdrop-filter:blur(6px);
}
.about-badge .icon { font-size:1.4rem; }

.about-text .section-desc { max-width:100%; margin-bottom:28px; }
.about-highlights { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.highlight-item {
  display:flex; align-items:flex-start; gap:12px;
  padding:16px;
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  border-left:3px solid var(--lime);
  transition:transform var(--transition), box-shadow var(--transition);
}
.highlight-item:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.highlight-icon { font-size:1.6rem; flex-shrink:0; }
.highlight-text h4 { font-size:.88rem; font-weight:700; margin-bottom:2px; color:var(--dark); }
.highlight-text p  { font-size:.78rem; color:var(--muted); line-height:1.5; }

/* ============================================
   PROGRAMS SECTION
   ============================================ */
#programs .programs-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:28px;
}
.program-card {
  background:var(--white);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition), box-shadow var(--transition);
  position:relative;
}
.program-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.program-card-top {
  height:5px;
  background:linear-gradient(90deg, var(--blue), var(--lime));
}
.program-card-body { padding:28px; }

.program-icon {
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; margin-bottom:18px; position:relative;
}
.program-icon::after {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:2px dashed; opacity:.3;
  animation:spin-slow 12s linear infinite;
}
.p-blue   { background:var(--blue-pale); }
.p-blue::after   { border-color:var(--blue); }
.p-lime   { background:var(--lime-pale); }
.p-lime::after   { border-color:var(--lime); }

.program-card h3 { font-size:1.08rem; font-weight:700; color:var(--dark); margin-bottom:8px; }
.program-card p  { font-size:.87rem; color:var(--muted); line-height:1.7; margin-bottom:18px; }
.program-tags    { display:flex; flex-wrap:wrap; gap:6px; }
.program-tag {
  font-size:.74rem; font-weight:600; padding:4px 10px;
  border-radius:50px;
  background:var(--blue-pale); color:var(--blue);
}
.program-tag.lime-tag { background:var(--lime-pale); color:var(--lime-dark); }

/* ============================================
   FEATURES / WHY CHOOSE US
   ============================================ */
#features {
  background:linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 100%);
  color:var(--white); position:relative; overflow:hidden;
}
#features::before {
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* Lime accent bar at bottom */
#features::after {
  content:''; position:absolute;
  bottom:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--lime), var(--blue-light));
}
#features .section-tag { background:rgba(125,194,66,.2); color:var(--lime-light); }
#features .section-title { color:var(--white); }
#features .section-title span { color:var(--lime-light); }
#features .section-desc { color:rgba(255,255,255,.65); }

.features-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:24px; position:relative; z-index:1;
}
.feature-card {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-top:3px solid var(--lime);
  border-radius:var(--radius-md); padding:28px 24px;
  transition:background var(--transition), transform var(--transition);
  backdrop-filter:blur(8px);
}
.feature-card:hover { background:rgba(255,255,255,.1); transform:translateY(-6px); }
.feature-icon { font-size:2.2rem; margin-bottom:14px; }
.feature-card h3 { font-size:1rem; font-weight:700; color:var(--white); margin-bottom:8px; }
.feature-card p  { font-size:.85rem; color:rgba(255,255,255,.6); line-height:1.7; }

/* ============================================
   CURRICULUM SECTION
   ============================================ */
.curriculum-tabs { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:36px; }
.tab-btn {
  padding:10px 22px; border-radius:50px;
  border:2px solid var(--blue);
  background:transparent; color:var(--blue);
  font-weight:600; font-size:.88rem;
  cursor:pointer;
  transition:background var(--transition), color var(--transition), transform var(--transition);
  font-family:var(--font-main);
}
.tab-btn:hover, .tab-btn.active {
  background:var(--blue); color:var(--white);
  transform:translateY(-2px);
}
/* Active tab with lime underline */
.tab-btn.active { box-shadow:0 4px 16px rgba(46,95,138,.3); }
.tab-content { display:none; }
.tab-content.active { display:block; animation:fadeInUp .4s ease; }

.curriculum-list {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:16px;
}
.curriculum-item {
  display:flex; align-items:flex-start; gap:14px;
  padding:18px; background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(46,95,138,.1);
  transition:transform var(--transition), box-shadow var(--transition);
}
.curriculum-item:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.ci-icon {
  width:40px; height:40px; border-radius:10px;
  background:var(--blue-pale);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; flex-shrink:0;
}
.ci-icon.lime-icon { background:var(--lime-pale); }
.ci-text h4 { font-size:.9rem; font-weight:700; margin-bottom:3px; color:var(--dark); }
.ci-text p  { font-size:.78rem; color:var(--muted); line-height:1.5; }

/* ============================================
   QUOTE BAND — Logo blue → lime gradient
   ============================================ */
.quote-band {
  background:linear-gradient(90deg, var(--blue-dark), var(--blue), var(--lime-dark));
  padding:60px 5%; text-align:center;
  position:relative; overflow:hidden;
}
.quote-band::before, .quote-band::after {
  content:'"'; font-family:var(--font-serif);
  font-size:14rem; position:absolute;
  color:rgba(255,255,255,.06); line-height:1; top:-20px;
}
.quote-band::before { left:2%; }
.quote-band::after  { right:2%; content:'"'; }
.quote-band blockquote {
  font-family:var(--font-serif);
  font-size:clamp(1.2rem,2.5vw,1.8rem);
  color:var(--white); max-width:860px;
  margin:0 auto 20px; line-height:1.55; font-style:italic;
}
.quote-band cite {
  font-size:.88rem; color:rgba(255,255,255,.7);
  font-style:normal; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
}

/* ============================================
   CONTACT SECTION
   ============================================ */
#contact .contact-grid {
  display:grid; grid-template-columns:1fr 1.4fr;
  gap:56px; align-items:start;
}
.contact-info h3 {
  font-family:var(--font-serif); font-size:1.5rem;
  color:var(--dark); margin-bottom:20px;
}
.contact-items { display:flex; flex-direction:column; gap:18px; margin-bottom:32px; }
.contact-item {
  display:flex; align-items:flex-start; gap:16px;
  padding:18px; background:var(--white);
  border-radius:var(--radius-md); box-shadow:var(--shadow-sm);
  border-left:4px solid var(--blue);
  transition:transform var(--transition);
}
.contact-item:hover { transform:translateX(6px); }
.contact-icon {
  width:44px; height:44px; border-radius:50%;
  background:var(--blue-pale);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; flex-shrink:0;
}
.contact-item-text strong { display:block; font-size:.82rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px; }
.contact-item-text span   { font-size:.95rem; color:var(--dark); font-weight:500; }

.map-container {
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:3px solid var(--blue-pale);
}
.map-container iframe { width:100%; height:400px; display:block; border:none; }
.map-label {
  padding:16px 20px;
  background:linear-gradient(90deg, var(--blue), var(--lime-dark));
  color:var(--white); font-weight:600; font-size:.9rem;
  display:flex; align-items:center; gap:10px;
}

/* ============================================
   FOOTER
   ============================================ */
footer {
  background:var(--blue-deep);
  color:rgba(255,255,255,.75);
  padding:60px 5% 30px;
  border-top:4px solid var(--lime);
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr;
  gap:48px; margin-bottom:48px;
}
.footer-brand img { height:96px; margin-bottom:16px; }
.footer-brand p { font-size:.88rem; line-height:1.75; color:rgba(255,255,255,.5); max-width:300px; }
.footer-col h4 {
  font-size:.9rem; font-weight:700; color:var(--lime-light);
  margin-bottom:16px; text-transform:uppercase; letter-spacing:.07em;
}
.footer-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-col li a {
  font-size:.87rem; color:rgba(255,255,255,.5);
  transition:color var(--transition), padding-left var(--transition);
}
.footer-col li a:hover { color:var(--lime-light); padding-left:6px; }
.footer-divider { border:none; border-top:1px solid rgba(255,255,255,.08); margin-bottom:24px; }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
  font-size:.82rem; color:rgba(255,255,255,.3);
}
.footer-bottom a { color:var(--lime-light); }

/* ============================================
   SCROLL-TO-TOP
   ============================================ */
#scrollTop {
  position:fixed; bottom:30px; right:30px;
  width:48px; height:48px; border-radius:50%;
  background:var(--blue); color:var(--white);
  font-size:1.3rem; border:2px solid var(--lime);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(46,95,138,.4);
  opacity:0; transform:translateY(20px);
  transition:opacity var(--transition), transform var(--transition), background var(--transition);
  z-index:999;
}
#scrollTop.visible { opacity:1; transform:translateY(0); }
#scrollTop:hover { background:var(--lime-dark); border-color:var(--lime-dark); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:900px) {
  #about .about-grid    { grid-template-columns:1fr; }
  #contact .contact-grid{ grid-template-columns:1fr; }
  .footer-grid          { grid-template-columns:1fr 1fr; }
  .hero-image           { display:none; visibility: visible;}
  .hero-content         { max-width:100%; }
}
@media (max-width:680px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .nav-links.open {
    display:flex; flex-direction:column;
    position:absolute; top:76px; left:0; right:0;
    background:rgba(255,255,255,.97);
    padding:20px 5%; box-shadow:var(--shadow-md); gap:20px;
  }
  .about-highlights { grid-template-columns:1fr; }
  .footer-grid      { grid-template-columns:1fr; }
  .hero-stats       { gap:20px; }
  .about-badge-grid { grid-template-columns:1fr; }
}