/* ==========================================
   Linkersdo Modular CSS v1.0 — Synchronized with index.css
   FILE: layout.css
   PURPOSE: Navigation, top bar, buttons, cards, footer, blockquotes
   Used in: All pages
   Depends on: base.css (vars, container)
   ========================================== */
.main-nav {
   background: #fff;
   border-bottom: 1px solid #e2e8f0;
   padding: 0.5rem 0 0;
}


.nav-container {
   display: flex;
   align-items: center;
   position: relative;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
}


.nav-menu {
   display: flex;
   gap: 18px;
   align-items: center;
   padding: 10px 0;
   margin: 0;
   list-style: none;
   align-items: flex-start;
   justify-content: flex-start;
   margin-left: 0px; /* Adjust until “Home line” underline lines up perfectly */
   margin-top: -30px; /* Bring “Home” underline lines upwards perfectly close to logo */
}

.nav-menu a {
   color: #0f172a;
   font-weight: 700;
   text-decoration: none;
   position: relative;
}

.nav-menu a.active:after {
   content: '';
   display: block;
   height: 3px;
   background: linear-gradient(90deg, #2563eb, #16a34a);
   border-radius: 3px;
   margin-top: 4px;
}

.top-bar {
   background-color: var(--header-bg, #fff);
   padding: .4rem 0
}

.top-bar-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: .5rem
}

.phone {
   font-weight: 700;
   color: #111827;
   white-space: nowrap
}

.btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   border: 1px solid var(--brand);
   color: #fff;
   background: linear-gradient(135deg, var(--brand), var(--brand-2));
   padding: 12px 18px;
   border-radius: 999px;
   box-shadow: var(--shadow);
   font-weight: 600
}

.btn.secondary {
   background: #fff;
   color: var(--brand);
   border-color: var(--line)
}

.btn:hover {
   transform: translateY(-1px)
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes the button to bottom */

   background: var(--card);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   padding: 24px
}

.section h2 {
   margin: 0 0 16px;
   font-size: clamp(28px, 4vw, 40px)
}

.section p.lead {
   color: var(--muted);
   font-size: 18px;
   max-width: 70ch
}

.footer {
   padding: 48px 0;
   border-top: 1px solid var(--line);
   background: linear-gradient(180deg, #fff, #f8fafc)
}

.footer {
   background: #111827;
   color: #f9fafb
}

.footer a {
   color: #e2e8f0
}

.footer h4 {
   color: #93c5fd;
   margin: 0 0 10px
}

.footer small {
   color: #94a3b8
}

blockquote {
   border-left: 4px solid var(--brand);
   padding-left: 12px;
   margin-left: 0;
   color: #334155
}

.hero-cta {
   margin-top: 24px
}