/* =============================================
   CVN Computers — Stylesheet v2
   Design: Matches cvncomputers.com light theme
   White/light bg, teal-blue CTAs, dark navy footer
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

/* ── LIGHT THEME (default) ── */
:root {
  --blue:         #017e84;
  --blue-dark:    #015f64;
  --blue-light:   #e8f5f6;
  /* Page surfaces */
  --bg:           #ffffff;
  --bg-alt:       #f1f5f9;
  --bg-card:      #ffffff;
  /* Text */
  --text-head:    #1c1c1e;
  --text-body:    #374151;
  --text-muted:   #64748b;
  --text-faint:   #94a3b8;
  /* Borders */
  --border:       #e2e8f0;
  /* Always-dark surfaces (topbar, footer, hero, testimonial) */
  --dark-surf:    #111827;
  --dark-surf2:   #0d2137;
  /* Keep --white and --navy for legacy compat */
  --white:        #ffffff;
  --navy:         #1c1c1e;
  --navy-soft:    #2d3748;
  --grey-bg:      #f1f5f9;
  --grey-light:   #e2e8f0;
  --grey-mid:     #94a3b8;
  --grey-text:    #64748b;
  --grey-dark:    #374151;
  --yellow:       #f59e0b;
  --radius:       6px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --tr:           0.2s ease;
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.05);
  --shadow:       0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:    0 10px 40px rgba(0,0,0,0.14);
  --shadow-blue:  0 4px 20px rgba(1,126,132,0.25);
  --alert-ok-bg:     #f0fdf4;
  --alert-ok-border: #bbf7d0;
  --alert-ok-text:   #166534;
  --alert-err-bg:    #fef2f2;
  --alert-err-bdr:   #fecaca;
  --alert-err-text:  #991b1b;
  --check-green:     #16a34a;
  /* Logo filter: dark logo on light bg */
  --logo-filter:        brightness(0) invert(0);
  --footer-logo-filter: brightness(0) invert(1);
}

/* ── DARK THEME ── */
:root[data-theme="dark"],
[data-theme="dark"] {
  --blue:         #0fb8c2;
  --blue-dark:    #0d9aa3;
  --blue-light:   #0d2f32;
  --bg:           #0f1117;
  --bg-alt:       #191e28;
  --bg-card:      #141820;
  --text-head:    #e8f0f8;
  --text-body:    #b8cce0;
  --text-muted:   #8899b0;
  --text-faint:   #5a6a80;
  --border:       #1e2d3d;
  /* Always-dark surfaces stay dark — just slightly different in dark mode */
  --dark-surf:    #090d14;
  --dark-surf2:   #060a10;
  --white:        #0f1117;
  --navy:         #e8f0f8;
  --navy-soft:    #c0d0e0;
  --grey-bg:      #191e28;
  --grey-light:   #1e2535;
  --grey-mid:     #5a6a80;
  --grey-text:    #8899b0;
  --grey-dark:    #b8cce0;
  --shadow-sm:    0 1px 4px rgba(0,0,0,0.35);
  --shadow:       0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg:    0 10px 48px rgba(0,0,0,0.65);
  --shadow-blue:  0 4px 20px rgba(15,184,194,0.25);
  --alert-ok-bg:     rgba(22,163,74,0.12);
  --alert-ok-border: rgba(22,163,74,0.3);
  --alert-ok-text:   #4ade80;
  --alert-err-bg:    rgba(239,68,68,0.12);
  --alert-err-bdr:   rgba(239,68,68,0.3);
  --alert-err-text:  #f87171;
  --check-green:     #4ade80;
  --logo-filter:        brightness(0) invert(1);
  --footer-logo-filter: brightness(0) invert(1);
}

/* ── AUTO: follow OS preference ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue:         #0fb8c2;
    --blue-dark:    #0d9aa3;
    --blue-light:   #0d2f32;
    --bg:           #0f1117;
    --bg-alt:       #191e28;
    --bg-card:      #141820;
    --text-head:    #e8f0f8;
    --text-body:    #b8cce0;
    --text-muted:   #8899b0;
    --text-faint:   #5a6a80;
    --border:       #1e2d3d;
    --dark-surf:    #090d14;
    --dark-surf2:   #060a10;
    --white:        #0f1117;
    --navy:         #e8f0f8;
    --navy-soft:    #c0d0e0;
    --grey-bg:      #191e28;
    --grey-light:   #1e2535;
    --grey-mid:     #5a6a80;
    --grey-text:    #8899b0;
    --grey-dark:    #b8cce0;
    --shadow-sm:    0 1px 4px rgba(0,0,0,0.35);
    --shadow:       0 4px 20px rgba(0,0,0,0.5);
    --shadow-lg:    0 10px 48px rgba(0,0,0,0.65);
    --shadow-blue:  0 4px 20px rgba(15,184,194,0.25);
    --alert-ok-bg:     rgba(22,163,74,0.12);
    --alert-ok-border: rgba(22,163,74,0.3);
    --alert-ok-text:   #4ade80;
    --alert-err-bg:    rgba(239,68,68,0.12);
    --alert-err-bdr:   rgba(239,68,68,0.3);
    --alert-err-text:  #f87171;
    --check-green:     #4ade80;
    --logo-filter:        brightness(0) invert(1);
    --footer-logo-filter: brightness(0) invert(1);
  }
}

/* ── SMOOTH theme transitions ── */
*, *::before, *::after {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease !important;
}
/* But don't animate layout-affecting properties or transforms */
.btn, .card, .feature-card, .service-card, .team-card, .accordion-item,
.tab-btn, .dropdown, .nav-links>li>a {
  transition: background-color 0.25s ease, border-color 0.25s ease,
              color 0.15s ease, transform 0.2s ease,
              box-shadow 0.2s ease, opacity 0.2s ease !important;
}

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--grey-light);
  border: 1.5px solid var(--border);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--grey-dark);
  font-size: 1.05rem;
  /* override the global transition override above */
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}
.theme-toggle:hover {
  background: var(--blue-light);
  border-color: var(--blue);
  color: var(--blue);
  transform: rotate(20deg);
}
/* Hide the icon that doesn't apply to current mode */
.theme-toggle .icon-moon  { display: none; }
.theme-toggle .icon-sun   { display: block; }
[data-theme="dark"]   .theme-toggle .icon-sun  { display: none; }
[data-theme="dark"]   .theme-toggle .icon-moon { display: block; }
/* Auto dark via OS — JS adds data-theme so these kick in automatically */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text-body);line-height:1.6;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:'Poppins',sans-serif;line-height:1.2;font-weight:700;color:var(--text-head)}
h1{font-size:clamp(1.9rem,4vw,3rem)}
h2{font-size:clamp(1.5rem,3vw,2.2rem)}
h3{font-size:clamp(1rem,2vw,1.3rem);font-weight:600}
h4{font-size:1rem;font-weight:600}
p{color:var(--text-body);line-height:1.7}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}

.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
section{position:relative}
.section-pad{padding:5rem 0}
.section-pad-sm{padding:3rem 0}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.7rem 1.6rem;font-family:'Poppins',sans-serif;font-size:0.88rem;font-weight:600;border-radius:var(--radius);border:2px solid transparent;cursor:pointer;transition:all var(--tr);white-space:nowrap}
.btn-primary{background:var(--blue);color:var(--white);border-color:var(--blue);box-shadow:var(--shadow-blue)}
.btn-primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);transform:translateY(-1px);box-shadow:0 6px 24px rgba(0,0,0,0.25),var(--shadow-blue)}
.btn-outline{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:var(--white);transform:translateY(-1px)}
.btn-white{background:var(--white);color:var(--blue);border-color:var(--white)}
.btn-white:hover{background:var(--blue-light)}
.btn-dark{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn-dark:hover{background:var(--navy-soft)}
.btn-lg{padding:0.9rem 2.2rem;font-size:1rem}
.btn-sm{padding:0.45rem 1rem;font-size:0.8rem}

/* ── TOP BAR ── */
.topbar{background:var(--dark-surf);padding:0.45rem 0;font-size:0.78rem;color:#aab4c0}
.topbar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.4rem}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:1.1rem}
.topbar a{color:#aab4c0;display:inline-flex;align-items:center;gap:0.35rem;transition:color var(--tr)}
.topbar a:hover{color:var(--white)}
.topbar-right a{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid rgba(255,255,255,0.12);transition:all var(--tr)}
.topbar-right a:hover{border-color:var(--blue);color:var(--white);background:var(--blue-light)}

/* ── NAVBAR ── */
.navbar{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);transition:box-shadow var(--tr)}
.navbar.scrolled{box-shadow:var(--shadow)}
.navbar .container{display:flex;align-items:center;justify-content:space-between;height:70px;gap:1rem}
.nav-logo{display:flex;align-items:center;gap:0.5rem;flex-shrink:0}
/* logo filters are set per theme in :root blocks above */
.nav-logo img{height:44px;width:auto;object-fit:contain;filter:var(--logo-filter)}
.nav-links{display:flex;align-items:center;gap:0;list-style:none}
.nav-links>li{position:relative}
.nav-links>li>a{display:flex;align-items:center;gap:0.3rem;padding:0.5rem 0.9rem;font-size:0.86rem;font-weight:500;color:var(--grey-dark);border-radius:var(--radius);transition:color var(--tr),background var(--tr)}
.nav-links>li>a:hover,.nav-links>li>a.active{color:var(--blue);background:var(--blue-light)}
.nav-links>li>a svg{width:11px;height:11px;transition:transform var(--tr);flex-shrink:0}
.nav-links>li:hover>a svg{transform:rotate(180deg)}

/* Dropdown */
.dropdown{position:absolute;top:100%;left:0;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);min-width:240px;padding:0.5rem;padding-top:calc(0.5rem + 10px);opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity var(--tr),transform var(--tr);box-shadow:var(--shadow-lg)}
.dropdown::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px;background:transparent}
.nav-links>li:hover .dropdown{opacity:1;pointer-events:auto;transform:translateY(0)}
.dropdown a{display:block;padding:0.6rem 0.85rem;border-radius:var(--radius);font-size:0.86rem;color:var(--grey-dark);transition:background var(--tr),color var(--tr)}
.dropdown a:hover{background:var(--blue-light);color:var(--blue)}
.dropdown a strong{display:block;color:var(--text-head);font-size:0.88rem;font-weight:600;margin-bottom:1px}
.dropdown a span{font-size:0.74rem;color:var(--text-faint)}
.dropdown-divider{height:1px;background:var(--border);margin:0.3rem 0.5rem}
.nav-cta{display:flex;align-items:center;gap:0.6rem;flex-shrink:0}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.hamburger span{display:block;width:22px;height:2px;background:var(--text-head);border-radius:2px;transition:transform var(--tr),opacity var(--tr)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none;background:var(--bg);border-top:1px solid var(--border);padding:1rem 1.5rem 1.5rem}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:0.75rem 0;border-bottom:1px solid var(--border);font-size:0.93rem;font-weight:500;color:var(--text-body);transition:color var(--tr)}
.mobile-nav a:hover{color:var(--blue)}

/* ── HOME HERO ── */
.home-hero{position:relative;overflow:hidden;height:calc(100dvh - var(--chrome-height, 0px));min-height:600px;display:flex;align-items:center}
.hero-bg-img{position:absolute;inset:0;background-image:url('/assets/images/photos/hero-desk.jpg');background-size:cover;background-position:center;opacity:1}
.hero-bg-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,20,40,0.92) 0%,rgba(10,20,40,0.75) 55%,rgba(10,20,40,0.4) 100%)}
.home-hero .container{position:relative;z-index:2;padding-top:3rem;padding-bottom:3rem}
/* Scroll-down arrow */
.hero-scroll-arrow{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:0.4rem;cursor:pointer;text-decoration:none;animation:bounce 2s ease-in-out infinite}
.hero-scroll-arrow svg{width:36px;height:36px;color:rgba(255,255,255,0.7);filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4));transition:color 0.2s}
.hero-scroll-arrow:hover svg{color:#fff}
.hero-scroll-arrow span{font-size:0.72rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.55)}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}
.hero-text h1{color:var(--white);font-size:clamp(2rem,4.5vw,3.2rem);margin-bottom:1rem;line-height:1.15;max-width:600px}
.hero-text h1 strong{display:block}
.hero-text p{color:rgba(255,255,255,0.78);font-size:1.05rem;margin-bottom:1.8rem;max-width:500px}
.hero-actions{display:flex;flex-wrap:wrap;gap:0.85rem}

/* ── STATS BAR ── */
.stats-bar{background:var(--blue);padding:2rem 0}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;text-align:center}
.stat-item h3{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;color:var(--white);font-family:'Poppins',sans-serif}
.stat-item p{font-size:0.85rem;color:rgba(255,255,255,0.8);margin-top:0.2rem}

/* ── PAGE HERO ── */
.page-hero{background:linear-gradient(135deg,var(--dark-surf) 0%,var(--dark-surf2) 100%);padding:4rem 0 3.5rem;position:relative;overflow:hidden}
.page-hero-pattern{position:absolute;inset:0;background-image: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='%23ffffff' fill-opacity='0.03'%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/svg%3E")}
.page-hero .container{position:relative;z-index:1}
.breadcrumb{display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;color:rgba(255,255,255,0.45);margin-bottom:1.2rem}
.breadcrumb a{color:rgba(255,255,255,0.45);transition:color var(--tr)}
.breadcrumb a:hover{color:var(--white)}
.breadcrumb-sep{opacity:0.4}
.page-hero h1{color:var(--white);margin-bottom:0.85rem}
.page-hero h1 span{color:#4dd0e1}
.page-hero p{color:rgba(255,255,255,0.7);font-size:1.05rem;max-width:580px;margin-bottom:1.8rem}
.page-hero-actions{display:flex;flex-wrap:wrap;gap:0.85rem}

/* ── SECTION LABELS ── */
.section-label{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.75rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--blue);margin-bottom:0.6rem}
.section-label::before{content:'';width:20px;height:2px;background:var(--blue)}
.section-header{max-width:620px;margin-bottom:2.8rem}
.section-header h2{margin-bottom:0.6rem;color:var(--navy)}
.section-header p{color:var(--text-muted)}
.section-header.centered{margin-left:auto;margin-right:auto;text-align:center}
.section-header.centered .section-label{justify-content:center}

/* ── CARDS ── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.8rem;transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr);box-shadow:var(--shadow-sm)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue)}
.card-icon{width:52px;height:52px;border-radius:var(--radius);background:var(--blue-light);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1.1rem;border:1px solid rgba(15,184,194,0.2)}
.card h3{color:var(--text-head);margin-bottom:0.5rem}
.card p{font-size:0.9rem}

/* ── FEATURES ── */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem}
.feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.6rem;display:flex;gap:1rem;align-items:flex-start;box-shadow:var(--shadow-sm);transition:transform var(--tr),box-shadow var(--tr)}
.feature-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.feature-icon{width:44px;height:44px;border-radius:var(--radius);flex-shrink:0;background:var(--blue-light);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.feature-card h3{font-size:1rem;color:var(--text-head);margin-bottom:0.3rem}
.feature-card p{font-size:0.87rem}

/* ── SERVICES ── */
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.3rem}
.service-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.6rem;box-shadow:var(--shadow-sm);transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr)}
.service-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--blue)}
.service-card h3{font-size:1rem;color:var(--text-head);margin-bottom:0.55rem;font-weight:600}
.service-card p{font-size:0.87rem}
.service-tag{display:inline-block;background:var(--blue-light);color:var(--blue);font-size:0.7rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:0.2rem 0.6rem;border-radius:20px;margin-bottom:0.5rem}

/* ── TABS ── */
.tabs-wrap{}
.tab-nav{display:flex;flex-wrap:wrap;gap:0.4rem;border-bottom:2px solid var(--border);margin-bottom:2rem}
.tab-btn{padding:0.65rem 1.3rem;font-family:'Poppins',sans-serif;font-size:0.85rem;font-weight:600;background:none;border:none;color:var(--text-muted);cursor:pointer;position:relative;transition:color var(--tr);border-radius:var(--radius) var(--radius) 0 0}
.tab-btn::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--blue);transform:scaleX(0);transition:transform var(--tr)}
.tab-btn.active{color:var(--blue)}
.tab-btn.active::after,.tab-btn:hover::after{transform:scaleX(1)}
.tab-btn:hover{color:var(--blue)}
.tab-pane{display:none}
.tab-pane.active{display:block}

/* ── ACCORDION ── */
.accordion{max-width:840px;margin:0 auto}
.accordion-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:0.6rem;overflow:hidden;box-shadow:var(--shadow-sm);transition:border-color var(--tr),box-shadow var(--tr)}
.accordion-item.open{border-color:var(--blue);box-shadow:0 0 0 3px rgba(15,184,194,0.1)}
.accordion-header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.3rem;cursor:pointer;font-size:0.97rem;font-weight:600;color:var(--text-head);transition:color var(--tr);user-select:none}
.accordion-header:hover{color:var(--blue)}
.accordion-icon{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem;color:var(--text-faint);transition:transform var(--tr),background var(--tr),border-color var(--tr),color var(--tr)}
.accordion-item.open .accordion-icon{transform:rotate(45deg);background:var(--blue);border-color:var(--blue);color:var(--white)}
.accordion-body{max-height:0;overflow:hidden;transition:max-height 0.35s ease,padding var(--tr);padding:0 1.3rem}
.accordion-body.open{max-height:600px;padding:0 1.3rem 1.2rem}
.accordion-body p{font-size:0.93rem;line-height:1.75;color:var(--grey-dark)}

/* ── FORMS ── */
.form-section{background:var(--bg-alt);padding:5rem 0}
.form-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2.5rem;box-shadow:var(--shadow);max-width:800px;margin:0 auto}
.form-group{margin-bottom:1.2rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
label{display:block;margin-bottom:0.4rem;font-size:0.83rem;font-weight:600;color:var(--text-head)}
label .req{color:#ef4444;margin-left:2px}
input,select,textarea{width:100%;padding:0.7rem 0.9rem;background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius);color:var(--text-head);font-family:'Inter',sans-serif;font-size:0.92rem;transition:border-color var(--tr),box-shadow var(--tr);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(15,184,194,0.15)}
input::placeholder,textarea::placeholder{color:var(--text-faint)}
select option{background:var(--bg-card);color:var(--navy)}
textarea{resize:vertical;min-height:120px}
.form-hint{font-size:0.76rem;color:var(--text-faint);margin-top:0.3rem}
.required-note{font-size:0.8rem;color:var(--text-faint);margin-bottom:1.3rem}
select[multiple]{min-height:160px;padding:0.4rem}
.alert{padding:0.9rem 1.1rem;border-radius:var(--radius);margin-bottom:1.3rem;font-size:0.9rem;display:flex;align-items:flex-start;gap:0.65rem}
.alert-success{background:var(--alert-ok-bg);border:1px solid var(--alert-ok-border);color:var(--alert-ok-text)}
.alert-error{background:var(--alert-err-bg);border:1px solid var(--alert-err-bdr);color:var(--alert-err-text)}

/* ── CONTACT ── */
.contact-layout{display:grid;grid-template-columns:1fr 360px;gap:2.5rem;align-items:start}
.contact-info-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2rem;box-shadow:var(--shadow-sm)}
.contact-info-item{display:flex;align-items:flex-start;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--border)}
.contact-info-item:last-of-type{border-bottom:none}
.contact-info-icon{width:40px;height:40px;border-radius:var(--radius);flex-shrink:0;background:var(--blue-light);color:var(--blue);display:flex;align-items:center;justify-content:center}
.contact-info-item h4{font-size:0.85rem;font-weight:700;color:var(--navy);margin-bottom:0.2rem}
.contact-info-item p,.contact-info-item a{font-size:0.87rem;color:var(--text-muted)}
.contact-info-item a:hover{color:var(--blue)}
.hours-row{display:flex;justify-content:space-between;font-size:0.84rem;padding:0.2rem 0}
.hours-row span:first-child{color:var(--text-muted)}
.hours-row span:last-child{color:var(--text-head);font-weight:500}
.map-embed{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);margin-top:1.3rem}
.map-embed iframe{display:block;width:100%;height:220px;border:none}

/* ── BRANDS ── */
.brands-section{padding:3.5rem 0;background:var(--bg-alt)}
.brands-row{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:center;margin-top:2rem}
.brand-logo-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.8rem;display:flex;align-items:center;justify-content:center;transition:box-shadow var(--tr),border-color var(--tr);box-shadow:var(--shadow-sm)}
.brand-logo-item:hover{box-shadow:var(--shadow);border-color:var(--blue)}
.brand-logo-item img{height:34px;width:auto;object-fit:contain;filter:grayscale(20%);transition:filter var(--tr)}
.brand-logo-item:hover img{filter:grayscale(0%)}

/* ── TESTIMONIAL ── */
.testimonial-section{background:var(--dark-surf);padding:5rem 0}
.testimonial-card{max-width:720px;margin:0 auto;text-align:center}
.testimonial-stars{color:var(--yellow);font-size:1.3rem;letter-spacing:0.1rem;margin-bottom:1.3rem}
.testimonial-text{font-size:1.1rem;line-height:1.75;color:rgba(255,255,255,0.85);font-style:italic;margin-bottom:1.6rem;font-family:'Poppins',sans-serif}
.testimonial-author strong{display:block;color:var(--white);font-weight:600;margin-bottom:0.2rem}
.testimonial-author span{font-size:0.85rem;color:rgba(255,255,255,0.5)}

/* ── CIRCUIT / MOTHERBOARD SECTION ── */
.circuit-section{position:relative;overflow:hidden;background:var(--dark-surf);padding:5rem 0}
.circuit-bg{position:absolute;inset:0;background-image:url('/assets/images/photos/motherboard.jpg');background-size:cover;background-position:center;opacity:0.14}
.circuit-section .container{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.circuit-text h2{color:var(--white);margin-bottom:0.7rem}
.circuit-text p{color:rgba(255,255,255,0.65);margin-bottom:1.5rem}
.circuit-bullets{margin-bottom:1.8rem}
.circuit-bullets li{display:flex;align-items:center;gap:0.6rem;color:rgba(255,255,255,0.75);font-size:0.93rem;padding:0.35rem 0}
.circuit-bullets li::before{content:'›';color:#4dd0e1;font-weight:700;font-size:1.2rem}

/* ── ABOUT ── */
.about-intro{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.about-img{width:100%;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);object-fit:cover;aspect-ratio:4/3}
.about-text h2{color:var(--text-head);margin-bottom:1rem}
.about-text p{margin-bottom:0.9rem}
.about-checklist{margin:1.5rem 0}
.about-checklist li{display:flex;align-items:flex-start;gap:0.65rem;padding:0.45rem 0;border-bottom:1px solid var(--border);font-size:0.92rem;color:var(--grey-dark)}
.about-checklist li:last-child{border-bottom:none}
.about-checklist li::before{content:'✓';color:var(--blue);font-weight:700;flex-shrink:0;margin-top:1px}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.3rem}
.team-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--tr),box-shadow var(--tr);text-align:center}
.team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.team-avatar-img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--bg-alt)}
.team-avatar-initials{width:100%;aspect-ratio:1;background:linear-gradient(135deg,var(--blue),#4dd0e1);display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-size:2rem;font-weight:700;color:var(--white)}
.team-card-body{padding:1.1rem 1rem}
.team-card h3{font-size:1rem;color:var(--text-head);margin-bottom:0.25rem}
.team-card p{font-size:0.8rem;color:var(--text-faint)}
.timeline{position:relative;padding-left:2rem;max-width:700px}
.timeline::before{content:'';position:absolute;left:0.5rem;top:0;bottom:0;width:2px;background:var(--blue-light);border-radius:2px}
.timeline-item{position:relative;margin-bottom:2rem;padding-left:1.5rem}
.timeline-dot{position:absolute;left:-2.1rem;top:0.3rem;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--blue);box-shadow:0 0 0 3px var(--blue-light)}
.timeline-date{font-size:0.78rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue);margin-bottom:0.3rem}
.timeline-item h3{font-size:1.05rem;color:var(--text-head);margin-bottom:0.3rem}
.timeline-item p{font-size:0.88rem}

/* ── PROGRAMS ── */
.program-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.program-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),#4dd0e1)}
.program-badge{display:inline-flex;align-items:center;gap:0.4rem;background:var(--blue-light);border-radius:20px;padding:0.3rem 0.9rem;font-size:0.76rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue);margin-bottom:1rem}
.program-price{font-family:'Poppins',sans-serif;font-size:2.4rem;font-weight:800;color:var(--blue);margin-bottom:0.4rem}
.program-price span{font-size:1rem;font-weight:400;color:var(--text-faint)}
.program-includes{margin:1.2rem 0}
.program-includes li{display:flex;align-items:flex-start;gap:0.6rem;padding:0.4rem 0;font-size:0.9rem;color:var(--text-body);border-bottom:1px solid var(--border)}
.program-includes li:last-child{border-bottom:none}
.program-includes li::before{content:'✓';color:var(--check-green);font-weight:700;flex-shrink:0}
.coming-soon-badge{display:inline-flex;align-items:center;gap:0.5rem;background:var(--bg-alt);border:1px solid var(--border);border-radius:20px;padding:0.4rem 1rem;font-size:0.8rem;color:var(--text-faint)}

/* ── WARRANTY ── */
.warranty-prose{max-width:840px;margin:0 auto;font-size:0.93rem;color:var(--text-body);line-height:1.8}
.warranty-prose h4{font-size:0.95rem;font-weight:700;color:var(--navy);margin:1.8rem 0 0.6rem;text-transform:uppercase;letter-spacing:0.04em}
.warranty-prose p{margin-bottom:0.9rem}
.warranty-prose ul{margin:0.5rem 0 1rem 1rem;list-style:disc}
.warranty-prose ul li{margin-bottom:0.4rem;padding-left:0.2rem}
.warranty-updated{display:inline-flex;align-items:center;gap:0.5rem;font-size:0.8rem;color:var(--grey-mid);background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius);padding:0.35rem 0.75rem;margin-bottom:1.5rem}

/* ── PROCESS ── */
.process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}
.process-step{text-align:center;padding:1.5rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.step-num{width:56px;height:56px;border-radius:50%;background:var(--blue);color:var(--white);display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-size:1.4rem;font-weight:800;margin:0 auto 1rem;box-shadow:var(--shadow-blue)}
.process-step h3{font-size:1rem;color:var(--navy);margin-bottom:0.4rem}
.process-step p{font-size:0.87rem}

/* ── CTA BANNER ── */
.cta-banner{background:linear-gradient(135deg,var(--dark-surf) 0%,var(--dark-surf2) 100%);border-radius:var(--radius-xl);padding:3rem;text-align:center;margin:4rem 0;position:relative;overflow:hidden}
.cta-banner .container{position:relative;z-index:1}
.cta-banner h2{color:var(--white);margin-bottom:0.7rem}
.cta-banner p{color:rgba(255,255,255,0.65);margin-bottom:1.8rem}
.cta-banner .btn-group{display:flex;justify-content:center;flex-wrap:wrap;gap:0.9rem}

/* ── FOOTER ── */
.footer{background:var(--dark-surf);color:rgba(255,255,255,0.75)}
.footer-top{padding:4rem 0 2.5rem;border-bottom:1px solid rgba(255,255,255,0.08)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:2.5rem}
.footer-logo{display:flex;align-items:center;gap:0.7rem;margin-bottom:1rem}
.footer-logo img{height:38px;width:auto;filter:var(--footer-logo-filter);opacity:0.9}
.footer-logo span{font-family:'Poppins',sans-serif;font-size:1.15rem;font-weight:700;color:var(--white)}
.footer-brand p{font-size:0.87rem;color:rgba(255,255,255,0.5);line-height:1.7;max-width:290px}
.footer-socials{display:flex;gap:0.6rem;margin-top:1.3rem}
.footer-socials a{width:34px;height:34px;border-radius:var(--radius);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.6);transition:all var(--tr)}
.footer-socials a:hover{background:var(--blue);border-color:var(--blue);color:var(--white)}
.footer-col h4{font-size:0.83rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--white);margin-bottom:1rem;font-family:'Poppins',sans-serif}
.footer-col ul li{margin-bottom:0.5rem}
.footer-col ul li a{font-size:0.87rem;color:rgba(255,255,255,0.5);transition:color var(--tr)}
.footer-col ul li a:hover{color:var(--white)}
.footer-contact li{display:flex;align-items:flex-start;gap:0.6rem;font-size:0.87rem;color:rgba(255,255,255,0.5);margin-bottom:0.75rem}
.footer-contact li svg{flex-shrink:0;margin-top:2px;color:var(--blue)}
.footer-contact li a{color:rgba(255,255,255,0.5)}
.footer-contact li a:hover{color:var(--white)}
.footer-hours{margin-top:1rem;padding-top:0.9rem;border-top:1px solid rgba(255,255,255,0.07)}
.footer-hours strong{display:block;font-size:0.78rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:rgba(255,255,255,0.6);margin-bottom:0.5rem}
.footer-hours p{font-size:0.83rem;color:rgba(255,255,255,0.45);margin-bottom:0.2rem}
.footer-bottom{padding:1.2rem 0}
.footer-bottom .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem}
.footer-bottom p{font-size:0.79rem;color:rgba(255,255,255,0.4)}
.footer-bottom-links{display:flex;gap:1.5rem}
.footer-bottom-links a{font-size:0.79rem;color:rgba(255,255,255,0.4);transition:color var(--tr)}
.footer-bottom-links a:hover{color:var(--white)}

/* ── COOKIE ── */
.cookie-banner{position:fixed;bottom:1.5rem;left:1.5rem;right:1.5rem;z-index:999;background:var(--dark-surf);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-lg);padding:1.1rem 1.5rem;box-shadow:var(--shadow-lg);transform:translateY(140%);opacity:0;transition:transform 0.4s cubic-bezier(.4,0,.2,1),opacity 0.4s;max-width:780px;margin:0 auto}
.cookie-banner.show{transform:translateY(0);opacity:1}
.cookie-content{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.cookie-content p{font-size:0.87rem;color:rgba(255,255,255,0.7)}
.cookie-content a{color:#4dd0e1}
.cookie-actions{display:flex;gap:0.6rem;flex-shrink:0}

/* ── GOOGLE REVIEWS ── */
.reviews-section{}
.reviews-summary{
  display:flex;justify-content:center;margin-bottom:2.5rem;
}
.reviews-summary-inner{
  display:inline-flex;align-items:center;gap:1.4rem;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:1.4rem 2rem;
  box-shadow:var(--shadow-sm);
}
.reviews-overall-score{
  font-family:'Poppins',sans-serif;font-size:3rem;font-weight:800;
  color:var(--text-head);line-height:1;
}
.reviews-stars{font-size:1.3rem;color:#f59e0b;letter-spacing:0.1rem;margin-bottom:0.3rem}
.reviews-total{font-size:0.84rem;color:var(--text-muted);margin-bottom:0.5rem}
.reviews-google-link{
  display:inline-flex;align-items:center;gap:0.4rem;
  font-size:0.8rem;font-weight:600;color:var(--blue);
  transition:opacity var(--tr);
}
.reviews-google-link:hover{opacity:0.8}

.reviews-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.3rem;
  margin-bottom:1.5rem;
}
.review-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.5rem;
  box-shadow:var(--shadow-sm);
  transition:transform var(--tr),box-shadow var(--tr);
  display:flex;flex-direction:column;gap:0.8rem;
}
.review-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.review-header{display:flex;align-items:center;gap:0.8rem}
.review-avatar{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),#4dd0e1);
  display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;font-size:1.1rem;font-weight:700;
  color:#fff;overflow:hidden;
}
.review-avatar img{width:100%;height:100%;object-fit:cover}
.review-author-name{font-weight:600;font-size:0.92rem;color:var(--text-head);margin-bottom:0.15rem}
.review-time{font-size:0.76rem;color:var(--text-faint)}
.review-stars{color:#f59e0b;font-size:0.95rem;letter-spacing:0.06rem}
.review-text{
  font-size:0.88rem;color:var(--text-body);line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.review-text.expanded{-webkit-line-clamp:unset}
.review-read-more{
  font-size:0.8rem;font-weight:600;color:var(--blue);
  background:none;border:none;cursor:pointer;padding:0;
  text-align:left;align-self:flex-start;
}
.review-read-more:hover{opacity:0.8}

.reviews-loading{
  grid-column:1/-1;display:flex;flex-direction:column;
  align-items:center;gap:1rem;padding:3rem;color:var(--text-muted);
}
.reviews-spinner{
  width:32px;height:32px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--blue);
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.reviews-footer{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:0.5rem;
  font-size:0.78rem;color:var(--text-faint);padding-top:0.75rem;
  border-top:1px solid var(--border);
}
.reviews-powered{display:inline-flex;align-items:center;gap:0.35rem}

/* ── UTILITY CLASSES ── */
.bg-grey{background:var(--grey-bg)}
.bg-alt{background:var(--bg-alt)}
.text-blue{color:var(--blue)}
.mt-1{margin-top:1rem}
.mb-1{margin-bottom:1rem}
.mb-md{margin-bottom:1.5rem}

/* ── TWO-COL GRID (replaces inline style="grid-template-columns:1fr 1fr") ── */
.two-col-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}

/* ── FEATURES 2-COL OVERRIDE ── */
.features-grid-2col{grid-template-columns:1fr 1fr}

/* ── MINI STAT CARDS (3-col row inside about section) ── */
.mini-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;text-align:center}
.mini-stat-card{padding:1.2rem 0.8rem !important}
.mini-stat-num{font-size:1.8rem;font-weight:800;font-family:'Poppins',sans-serif;color:var(--blue);line-height:1.1}
.mini-stat-label{font-size:0.82rem;color:var(--grey-text);margin-top:0.25rem}

/* ── HERO OUTLINE BUTTON (always white border/text on dark hero) ── */
.btn-hero-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,0.5)}
.btn-hero-outline:hover{background:rgba(255,255,255,0.12);border-color:#fff}

/* ── CIRCUIT SECTION HELPERS ── */
.circuit-label{color:#4dd0e1}
.circuit-img-wrap{display:flex;align-items:center;justify-content:center}
.circuit-img{width:100%;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);opacity:0.85;object-fit:cover;aspect-ratio:4/3}

/* ── CONTACT LIST (map section) ── */
.contact-list{list-style:none;margin-bottom:1.5rem}
.contact-list li{display:flex;align-items:center;gap:0.6rem;padding:0.45rem 0;font-size:0.93rem;color:var(--grey-dark);border-bottom:1px solid var(--border)}
.contact-list li:last-child{border-bottom:none}
.contact-list li a{color:var(--grey-dark);transition:color var(--tr)}
.contact-list li a:hover{color:var(--blue)}

/* ── MAP EMBED HEIGHT ── */
.map-embed iframe{height:300px}

/* ── PAGE HERO EXTRAS (used across all inner pages) ── */
.page-hero-eyebrow{font-size:0.78rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:#4dd0e1;margin-bottom:0.6rem}
.page-hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 60% 40%,rgba(1,126,132,0.18) 0%,transparent 70%)}

/* ── SERVICE CARDS ICON ── */
.service-icon{font-size:1.8rem;margin-bottom:0.75rem;display:block}

/* ── HOURS GRID (contact page) ── */
.hours-grid{margin-top:0.5rem}
.hours-row{display:flex;justify-content:space-between;gap:1rem;font-size:0.84rem;padding:0.25rem 0;border-bottom:1px solid var(--border)}
.hours-row:last-child{border-bottom:none}
.hours-row span:first-child{color:var(--text-muted)}
.hours-row span:last-child{color:var(--text-head);font-weight:500}

/* ── QUICK INFO CARDS GRID (order-service) ── */
.quick-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.5rem;max-width:760px;margin-left:auto;margin-right:auto}
.quick-info-card{text-align:center}
.quick-info-card .card-icon{margin:0 auto 0.75rem}

/* ── PROGRAM CARD BODY TEXT ── */
.program-note{background:rgba(255,255,255,0.04);border-radius:var(--radius);padding:1rem;font-size:0.88rem;margin-bottom:1.2rem}
.program-note strong{color:#fff;display:block;margin-bottom:0.5rem}
.program-note p{color:rgba(255,255,255,0.7);margin-bottom:0.3rem}
.program-actions{margin-top:1.5rem}

/* ── CONTACT FORM HEADING ── */
.contact-form-heading{margin-bottom:0.5rem}
.contact-form-heading span{color:var(--blue)}
.contact-form-lead{margin-bottom:2rem;color:var(--text-muted)}

/* ── MISC INLINE STYLE REPLACEMENTS ── */
.text-center{text-align:center}
.w-full{width:100%}
.justify-center{justify-content:center}
.mt-sm{margin-top:0.75rem}
.mb-sm{margin-bottom:0.75rem}
.section-label-center{justify-content:center}
.card-centered .card-icon{margin:0 auto 1rem}

/* ══════════════════════════════════════════════
   RESPONSIVE — Mobile-first, comprehensive
   Breakpoints: 1024 · 768 · 600 · 480 · 380
   ══════════════════════════════════════════════ */

/* ── Tablet ≤ 1024px ── */
@media(max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .footer-brand{grid-column:1/-1}
  /* Two-column grids collapse to single column */
  .about-intro,
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr !important}
  .contact-layout{grid-template-columns:1fr}
  .circuit-section .container{grid-template-columns:1fr;text-align:center}
  .circuit-section .container img{max-width:500px;margin:0 auto}
  /* Features forced to 2-col on tablet */
  .features-grid{grid-template-columns:repeat(2,1fr)}
  /* Hero text centred when image shows fully */
  .hero-text{max-width:100%}
}

/* ── Phablet ≤ 768px ── */
@media(max-width:768px){
  /* Topbar: stack vertically, centred */
  .topbar .container{flex-direction:column;align-items:center;gap:0.5rem;padding:0.6rem 1rem}
  .topbar-left,.topbar-right{gap:1rem}
  .topbar-left{flex-wrap:wrap;justify-content:center}

  /* Nav */
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-cta .btn{display:none}   /* hide "Order Service" btn; it's in mobile nav */
  .mobile-nav a:last-child{
    display:inline-block;
    margin-top:0.75rem;
    background:var(--blue);
    color:#fff !important;
    padding:0.65rem 1.4rem;
    border-radius:var(--radius);
    font-weight:600;
    text-align:center;
  }

  /* Layout */
  .section-pad{padding:3rem 0}
  .section-pad-sm{padding:2rem 0}
  .container{padding:0 1rem}

  /* Two-col grids → single column */
  .two-col-grid{grid-template-columns:1fr;gap:2rem}
  /* Mini stats stay 3-col at 768 — they're small enough */
  .mini-stats-grid{gap:0.75rem}

  /* Features 2-col → 1-col */
  .features-grid-2col{grid-template-columns:1fr}

  /* Hero */
  .home-hero{min-height:500px;align-items:flex-end;padding-bottom:5rem}
  .home-hero .container{padding-top:2rem;padding-bottom:2rem}
  .hero-text h1{font-size:clamp(1.7rem,6vw,2.4rem);max-width:100%}
  .hero-text p{font-size:0.95rem;max-width:100%}
  .hero-actions{gap:0.6rem}
  .hero-actions .btn{flex:1 1 auto;justify-content:center;min-width:0}
  .hero-bg-overlay{background:linear-gradient(180deg,rgba(10,20,40,0.75) 0%,rgba(10,20,40,0.92) 100%)}

  /* Stats bar */
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:0.75rem}
  .stat-item h3{font-size:clamp(1.6rem,5vw,2.2rem)}

  /* Grids → single column */
  .about-intro,
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr !important;gap:2rem !important}
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important;gap:0.75rem !important}
  .features-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .reviews-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}

  /* About image order fix — image comes after text on mobile */
  .about-intro>div:last-child{order:2}

  /* Circuit / motherboard section */
  .circuit-section .container{grid-template-columns:1fr;text-align:left}
  .circuit-section .container>div:last-child{display:none} /* hide image on small screens */

  /* Contact layout */
  .contact-layout{grid-template-columns:1fr}

  /* Reviews */
  .reviews-summary-inner{flex-direction:column;text-align:center;padding:1.2rem}
  .reviews-overall-score{font-size:2.2rem}

  /* Cards */
  .card,.feature-card,.service-card{padding:1.3rem}
  .form-card{padding:1.5rem;border-radius:var(--radius-lg)}

  /* CTA */
  .cta-banner{padding:2rem 1.25rem;margin:2.5rem 0;border-radius:var(--radius-lg)}
  .cta-banner .btn-group{flex-direction:column;align-items:stretch}
  .cta-banner .btn-group .btn{justify-content:center}

  /* Footer */
  .footer-grid{grid-template-columns:1fr}
  .footer-top{padding:2.5rem 0 1.5rem}
  .footer-bottom .container{flex-direction:column;align-items:flex-start;gap:0.5rem}
  .footer-bottom-links{flex-wrap:wrap;gap:1rem}

  /* Map */
  .map-embed iframe{height:220px}

  /* Tab nav */
  .tab-nav{gap:0.2rem;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tab-nav::-webkit-scrollbar{display:none}
  .tab-btn{font-size:0.8rem;padding:0.55rem 0.9rem;white-space:nowrap;flex-shrink:0}

  /* Brands */
  .brands-row{gap:0.75rem}
  .brand-logo-item{padding:0.75rem 1.2rem}
  .brand-logo-item img{height:26px}

  /* Cookie banner */
  .cookie-banner{left:0.75rem;right:0.75rem;bottom:0.75rem}
  .cookie-content{flex-direction:column;align-items:flex-start}
  .cookie-actions{width:100%;justify-content:flex-end}

  /* Page hero */
  .page-hero{padding:2.5rem 0 2rem}
  .page-hero h1{font-size:clamp(1.5rem,5vw,2rem)}
  .page-hero p{font-size:0.95rem}
  .page-hero-actions{flex-direction:column;align-items:flex-start;gap:0.6rem}
  .page-hero-actions .btn{width:100%;justify-content:center;text-align:center}

  /* Testimonial */
  .testimonial-section{padding:3rem 0}
  .testimonial-text{font-size:0.97rem}

  /* Quick info cards → 1 col */
  .quick-info-grid{grid-template-columns:1fr}

  /* Contact layout: form first, info second */
  .contact-layout>div:first-child{order:1}
  .contact-layout>div:last-child{order:2}

  /* Program cards full-width */
  .program-card{padding:1.5rem}
  .program-price{font-size:1.8rem}

  /* Service icon size */
  .service-icon{font-size:1.5rem}

  /* CTA section-label center */
  .cta-banner .section-label{justify-content:center}

  /* Warranty prose */
  .warranty-prose{font-size:0.9rem}

  /* Ensure inline-style max-width containers are fluid on mobile */
  .container [style*="max-width:700px"],
  .container [style*="max-width: 700px"]{max-width:100% !important}
  .container [style*="max-width:500px"],
  .container [style*="max-width: 500px"]{max-width:100% !important}
  .container [style*="max-width:760px"],
  .container [style*="max-width: 760px"]{max-width:100% !important}

  /* Accordion */
  .accordion-header{font-size:0.92rem;padding:1rem 1.1rem}

  /* Multi-select dropdowns on mobile */
  select[multiple]{min-height:120px}
}
  .footer-brand{grid-column:auto}
  .footer-top{padding:2.5rem 0 1.5rem}
  .footer-bottom .container{flex-direction:column;align-items:flex-start;gap:0.5rem}
  .footer-bottom-links{flex-wrap:wrap;gap:1rem}

  /* Map */
  .map-embed iframe{height:220px}

  /* Tab nav */
  .tab-nav{gap:0.2rem}
  .tab-btn{font-size:0.8rem;padding:0.55rem 0.9rem}

  /* Brands */
  .brands-row{gap:0.75rem}
  .brand-logo-item{padding:0.75rem 1.2rem}
  .brand-logo-item img{height:26px}

  /* Cookie banner */
  .cookie-banner{left:0.75rem;right:0.75rem;bottom:0.75rem}
  .cookie-content{flex-direction:column;align-items:flex-start}
  .cookie-actions{width:100%;justify-content:flex-end}

  /* Page hero */
  .page-hero{padding:2.5rem 0 2rem}
  .page-hero h1{font-size:clamp(1.5rem,5vw,2rem)}
  .page-hero p{font-size:0.95rem}
  .page-hero-actions{flex-direction:column;align-items:flex-start;gap:0.6rem}
  .page-hero-actions .btn{width:100%;justify-content:center}

  /* Testimonial */
  .testimonial-section{padding:3rem 0}
  .testimonial-text{font-size:0.97rem}

  /* Inline stat mini-cards on index */
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(3,1fr) !important}
}

/* ── Mobile ≤ 600px ── */
@media(max-width:600px){
  /* Features → single column always */
  .features-grid,.features-grid-2col{grid-template-columns:1fr}

  /* Mini stat 3-col → 1-col */
  .mini-stats-grid{grid-template-columns:1fr;gap:0.6rem}
  .mini-stat-card{padding:0.85rem !important}

  /* Circuit image hidden on narrow — keep for 600+ */
  .circuit-img-wrap{display:none}

  /* Hero buttons stack */
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%;justify-content:center}

  /* Inline 3-col mini stats → 3-col still (they're small) */
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(3,1fr) !important;gap:0.5rem !important}
  [style*="grid-template-columns:repeat(3,1fr)"] .card{padding:0.9rem 0.4rem !important}

  /* Process 2→1 col */
  .process-grid{grid-template-columns:1fr}

  /* Team grid 2-col stays */
  .team-grid{grid-template-columns:repeat(2,1fr)}

  /* Section label */
  .section-header{margin-bottom:1.8rem}
}

/* ── Small mobile ≤ 480px ── */
@media(max-width:480px){
  html{font-size:15px}
  .container{padding:0 0.9rem}

  /* Topbar — hide email on very small, just show phone */
  .topbar-left a:last-child{display:none}

  /* Stats: 2-col */
  .stats-grid{grid-template-columns:repeat(2,1fr)}

  /* Mini stat cards → 1-col on tiny screens */
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(3,1fr) !important}

  /* Brands */
  .brands-row{gap:0.5rem}
  .brand-logo-item{padding:0.6rem 1rem}
  .brand-logo-item img{height:22px}

  /* Process */
  .process-grid{grid-template-columns:1fr}

  /* Team */
  .team-grid{grid-template-columns:repeat(2,1fr);gap:0.75rem}

  /* Tabs */
  .tab-nav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .tab-btn{white-space:nowrap;font-size:0.78rem;padding:0.5rem 0.8rem}

  /* Accordion */
  .accordion-header{font-size:0.9rem;padding:0.9rem 1rem}

  /* Form card */
  .form-card{padding:1.25rem}

  /* CTA */
  .cta-banner{padding:1.5rem 1rem}

  /* Footer bottom links stack */
  .footer-bottom-links{flex-direction:column;gap:0.5rem}

  /* Hero scroll arrow smaller */
  .hero-scroll-arrow svg{width:28px;height:28px}
  .hero-scroll-arrow span{font-size:0.65rem}

  /* Reviews summary */
  .reviews-summary-inner{padding:1rem;gap:0.8rem}
  .reviews-overall-score{font-size:1.8rem}
}

/* ── Tiny phones ≤ 380px ── */
@media(max-width:380px){
  .container{padding:0 0.75rem}
  .navbar .container{padding:0 0.75rem}
  .nav-logo img{height:36px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:0.5rem}
  .stat-item h3{font-size:1.5rem}
  .hero-text h1{font-size:1.55rem}
  .section-pad{padding:2.5rem 0}
  .section-pad-sm{padding:1.5rem 0}
  /* 3-col mini stats → single col on truly tiny screens */
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important;gap:0.5rem !important}
  /* Hamburger area */
  .nav-cta{gap:0.4rem}
  .theme-toggle{width:30px;height:30px;font-size:0.9rem}
}

/* ── DARK MODE FONT FIXES ── */
/* The --white variable is overridden to dark bg in dark theme for btn-white.
   Any element that uses color:#fff or color:var(--white) for text on dark
   surfaces must be re-anchored to always-white literals. */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5 {
  color: var(--text-head);
}
[data-theme="dark"] p,
[data-theme="dark"] li {
  color: var(--text-body);
}
/* Nav links visible in dark mode */
[data-theme="dark"] .nav-links>li>a { color: var(--grey-dark); }
[data-theme="dark"] .dropdown a { color: var(--grey-dark); }
[data-theme="dark"] .mobile-nav a { color: var(--text-body); }
/* Sections that use --navy for heading colour (maps to dark text in light, light text in dark) */
[data-theme="dark"] .section-header h2 { color: var(--text-head); }
/* Cards */
[data-theme="dark"] .card h3,
[data-theme="dark"] .feature-card h3 { color: var(--text-head); }
[data-theme="dark"] .card p,
[data-theme="dark"] .feature-card p { color: var(--text-body); }
/* Testimonial — on always-dark surface, text must stay white */
[data-theme="dark"] .testimonial-text { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .testimonial-author strong { color: #fff; }
/* CTA banner */
[data-theme="dark"] .cta-banner h2,
[data-theme="dark"] .cta-banner p { color: #fff; }
/* Hero text always white regardless of theme */
.hero-text h1 { color: #fff !important; }
.hero-text p { color: rgba(255,255,255,0.78) !important; }
/* Stats bar always has white text */
.stat-item h3 { color: #fff !important; }
.stat-item p { color: rgba(255,255,255,0.8) !important; }
/* OS-level dark media query — same fixes */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) h1,
  :root:not([data-theme="light"]) h2,
  :root:not([data-theme="light"]) h3,
  :root:not([data-theme="light"]) h4,
  :root:not([data-theme="light"]) h5 { color: var(--text-head); }
  :root:not([data-theme="light"]) p,
  :root:not([data-theme="light"]) li { color: var(--text-body); }
  :root:not([data-theme="light"]) .nav-links>li>a { color: var(--grey-dark); }
  :root:not([data-theme="light"]) .dropdown a { color: var(--grey-dark); }
  :root:not([data-theme="light"]) .mobile-nav a { color: var(--text-body); }
  :root:not([data-theme="light"]) .section-header h2 { color: var(--text-head); }
  :root:not([data-theme="light"]) .card h3,
  :root:not([data-theme="light"]) .feature-card h3 { color: var(--text-head); }
  :root:not([data-theme="light"]) .card p,
  :root:not([data-theme="light"]) .feature-card p { color: var(--text-body); }
  :root:not([data-theme="light"]) .testimonial-text { color: rgba(255,255,255,0.85); }
  :root:not([data-theme="light"]) .testimonial-author strong { color: #fff; }
  :root:not([data-theme="light"]) .cta-banner h2,
  :root:not([data-theme="light"]) .cta-banner p { color: #fff; }
}

/* ── ADDITIONAL COMPONENT CLASSES (new pages) ── */

/* Button full-width */
.btn-full{width:100%;justify-content:center}

/* Submit button large */
.btn-submit-lg{padding:0.9rem;font-size:1rem}

/* Form submit note */
.form-submit-note{text-align:center;font-size:0.8rem;color:var(--text-muted);margin-top:0.75rem}

/* Contact directions link */
.contact-directions-link{font-size:0.82rem;color:var(--blue);margin-top:0.3rem;display:inline-block}
.contact-info-item-last{border-bottom:none}

/* mb-md utility */
.mb-md{margin-bottom:1.5rem}
.mb-sm{margin-bottom:0.75rem}
.mt-md{margin-top:1.5rem}

/* Program card wrap — centres and constrains program cards */
.program-card-wrap{max-width:700px;margin:0 auto}
.program-tagline{margin:0.75rem 0 0.5rem;font-size:1rem;color:rgba(255,255,255,0.7)}
.program-desc{font-size:0.9rem;margin-top:0.5rem;margin-bottom:0.75rem;color:rgba(255,255,255,0.75)}
.program-fine-print{font-size:0.8rem;color:rgba(255,255,255,0.5)}

/* Warranty contact card */
.warranty-contact-card{max-width:500px;margin:2.5rem auto 0;padding:1.5rem}
.warranty-contact-card h3{margin-bottom:1rem}
.warranty-prose strong{color:var(--text-head)}
.warranty-prose a{color:var(--blue)}

/* Alert info for enterprise panel */
.alert-info-enterprise{
  background:rgba(29,124,242,0.08);
  border:1px solid rgba(29,124,242,0.25);
  color:var(--text-body);
  padding:1rem 1.2rem;
  border-radius:var(--radius);
  margin-bottom:1rem;
  font-size:0.92rem;
}
.alert-info-enterprise a{color:var(--blue)}

/* Services page — process bg */
.services-process-bg{background:var(--bg-alt)}

/* FAQ: strong in accordion body */
.accordion-body strong{color:var(--text-head)}

/* Mobile nav last link styled as CTA */
.mobile-nav-cta{
  display:block;
  margin-top:0.75rem;
  background:var(--blue) !important;
  color:#fff !important;
  padding:0.65rem 1.4rem;
  border-radius:var(--radius);
  font-weight:600;
  text-align:center;
  border-bottom:none !important;
}

/* Touch-friendly minimum target sizes */
@media(max-width:768px){
  .btn{min-height:44px;padding:0.75rem 1.4rem}
  .btn-sm{min-height:38px}
  input,select,textarea{min-height:44px;font-size:16px} /* 16px prevents iOS zoom */
  .accordion-header{min-height:52px}
  .tab-btn{min-height:40px}
  .nav-cta .theme-toggle{min-height:44px;min-width:44px}
  .hamburger{min-height:44px;min-width:44px;justify-content:center;align-items:center}
  .footer-socials a{width:44px;height:44px}
  .topbar a{min-height:36px;display:inline-flex;align-items:center}
}

/* Prevent horizontal scroll on all pages */
body{overflow-x:hidden}
.container{max-width:min(1200px, 100%)}
img{max-width:100%;height:auto}
iframe{max-width:100%}

/* Services grid minimum column width fix for narrow screens */
@media(max-width:400px){
  .services-grid{grid-template-columns:1fr !important}
}