/* ===============================
   Elecro Gleam — Vibrant Energetic UI
   Single style.css for all pages
   Requirements:
   - Flexbox-only layouts
   - Mobile-first responsive design
   - Bold, energetic visuals with brand colors
   - Mobile burger menu + cookie consent UI
   =============================== */

/* 1) RESET & NORMALIZE */
*,*::before,*::after{box-sizing:border-box}
html{line-height:1.15;-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding-left:1.25rem}
img{max-width:100%;height:auto;display:block}
a{background-color:transparent;text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
table{border-collapse:collapse;border-spacing:0;width:100%}
th,td{padding:12px 14px;text-align:left}

/* 2) THEME TOKENS (with fallbacks) */
:root{
  --color-primary:#1F2A44; /* brand navy */
  --color-secondary:#6C2BD9; /* brand purple */
  --color-accent:#F4F6FB; /* brand accent light */
  --color-dark:#0F1424;
  --color-body:#25314F;
  --color-white:#FFFFFF;
  --color-electric-blue:#00D1FF; /* energetic accent */
  --color-neon-green:#00E887;    /* energetic accent */
  --color-hot-pink:#FF3B81;      /* energetic accent */
  --color-warning:#FF6B00;       /* energetic accent */

  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;

  --shadow-sm:0 6px 18px rgba(31,42,68,.12);
  --shadow-md:0 10px 30px rgba(108,43,217,.25);
  --shadow-lg:0 16px 50px rgba(31,42,68,.25);

  --gap-1:8px; --gap-2:12px; --gap-3:16px; --gap-4:20px; --gap-5:24px; --gap-6:32px; --gap-7:40px; --gap-8:60px;
}

/* 3) BASE TYPOGRAPHY */
body{
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  color:var(--color-body);
  background:var(--color-white);
  font-size:16px; line-height:1.7;
}
h1,h2,h3,.display{font-family:'Trebuchet MS','Segoe UI',Arial,sans-serif;color:var(--color-primary)}
h1{font-size:48px;line-height:1.1;font-weight:800;letter-spacing:.3px}
h2{font-size:32px;line-height:1.2;font-weight:800;letter-spacing:.25px;margin-bottom:var(--gap-4)}
h3{font-size:24px;line-height:1.25;font-weight:800;letter-spacing:.2px}
p,li,dd,td{font-size:16px}
small,.meta{font-size:14px;color:#5C6A8A}
strong{font-weight:800}

/* Links & focus */
a{color:var(--color-secondary)}
a:hover{color:var(--color-hot-pink)}
:focus-visible{outline:3px solid var(--color-electric-blue);outline-offset:2px;border-radius:6px}

/* 4) GLOBAL LAYOUT */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column;gap:var(--gap-5)}

/* Section spacing (global) */
section{margin-bottom:var(--gap-8);padding:40px 0}

/* MANDATORY SPACING/ALIGNMENT PATTERNS (exact values) */
.section{margin-bottom:60px;padding:40px 20px}
.card-container{display:flex;flex-wrap:wrap;gap:24px}
.card{margin-bottom:20px;position:relative}
.content-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between}
.text-image-section{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.testimonial-card{display:flex;align-items:center;gap:20px;padding:20px}
.feature-item{display:flex;flex-direction:column;align-items:flex-start;gap:15px}

/* 5) HEADER & NAVIGATION */
header{position:relative;z-index:50;border-bottom:4px solid var(--color-secondary);background:var(--color-white)}
header .container{gap:0}
nav{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-4);padding:14px 0}
nav > a img{height:34px;width:auto}
nav ul{list-style:none;display:none;align-items:center;gap:var(--gap-5)}
nav ul li a{padding:10px 12px;border-radius:10px;font-weight:700;color:var(--color-primary);transition:all .2s ease}
nav ul li a:hover{background:var(--color-accent);color:var(--color-secondary)}
.header-btns{display:none;align-items:center;gap:var(--gap-3)}

/* Buttons */
.btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:14px;font-weight:800;letter-spacing:.2px;transition:transform .15s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease;min-width:140px;white-space:nowrap}
.btn-primary{background:var(--color-secondary);color:var(--color-white);box-shadow:0 10px 24px rgba(108,43,217,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(108,43,217,.45)}
.btn-secondary{background:var(--color-accent);color:var(--color-secondary);border:2px solid var(--color-secondary)}
.btn-secondary:hover{background:var(--color-secondary);color:#fff;box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* Trust badges */
.trust-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.trust-badges span{background:var(--color-accent);color:var(--color-primary);padding:8px 12px;border-radius:999px;font-weight:700;border:2px solid #E1E6F2}

/* 6) HERO / CONTENT WRAPPERS */
.content-wrapper{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gap-5)}
.content-wrapper > div, .content-wrapper > ul, .content-wrapper > ol, .content-wrapper > p, .content-wrapper > dl{max-width:900px}
.content-wrapper h1 + p{font-size:18px}

/* Feature grid & service cards */
.feature-grid,.service-cards,.package-cards{display:flex;flex-wrap:wrap;gap:20px}
.feature-grid > div,.service-cards > div,.package-cards > div{
  flex:1 1 100%;
  background:var(--color-accent);
  border:2px solid #E4E9F5;
  border-radius:16px;
  padding:22px;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:12px
}
.feature-grid img{width:34px;height:34px}

/* Cards energy accent on hover */
.feature-grid > div:hover,.service-cards > div:hover,.package-cards > div:hover{box-shadow:0 16px 40px rgba(31,42,68,.2);transform:translateY(-2px);transition:all .2s ease}

/* Badge */
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--color-hot-pink);color:#fff;font-size:12px;font-weight:800;letter-spacing:.3px}

/* 7) LISTS & BLOCKQUOTES */
ul li{margin-bottom:8px}
ol{padding-left:1.25rem}
ol li{margin-bottom:8px}
blockquote{margin:0;padding:0;border-left:6px solid var(--color-secondary);padding-left:14px;color:var(--color-primary);font-size:18px;font-weight:700}
cite{font-style:normal;color:#52607D;font-weight:700}

/* 8) TESTIMONIALS (readable on light bg) */
.testimonial-card{background:var(--color-accent);border:2px solid #E1E6F2;border-radius:16px;box-shadow:var(--shadow-sm)}
.testimonial-card blockquote{border-left:6px solid var(--color-neon-green)}
.rating-summary{display:flex;align-items:center;gap:10px;background:#EAF2FF;color:var(--color-primary);padding:10px 14px;border-radius:12px;border:2px solid #CFE0FF;font-weight:800}

/* 9) LOGO STRIPS */
.logo-strip,.client-logo-strip{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.logo-strip span,.client-logo-strip img{filter:grayscale(0.1);opacity:.9}
.client-logo-strip img{height:34px;width:auto}

/* 10) FOOTER */
footer{border-top:6px solid var(--color-secondary);background:#0F1424;color:#C9D2EA;padding:30px 0}
footer .container{gap:var(--gap-4)}
.footer-nav,.contact-info,.social-links,.newsletter-signup,.legal-links{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.footer-nav a{color:#E6EAFA;padding:6px 10px;border-radius:8px}
.footer-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.contact-info img{height:28px;width:auto}
.social-links a{display:inline-flex;padding:8px;border-radius:12px;background:rgba(255,255,255,.06)}
.social-links a:hover{background:rgba(255,255,255,.12)}
.legal-links{opacity:.9}

/* 11) TABLES (responsive without grid/columns) */
.content-wrapper table{display:block;overflow-x:auto;border:2px solid #E4E9F5;border-radius:12px}
.content-wrapper thead{background:#EEF3FF;color:var(--color-primary);font-weight:800}
.content-wrapper th{white-space:nowrap}
.content-wrapper tbody tr{border-top:1px solid #E4E9F5}

/* 12) CHIPS & INFO ROWS */
.content-wrapper > div:has(img){display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* 13) MOBILE NAVIGATION */
.mobile-menu-toggle{position:fixed;right:14px;bottom:14px;z-index:60;height:54px;width:54px;border-radius:50%;background:var(--color-secondary);color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(108,43,217,.35);transition:transform .2s ease}
.mobile-menu-toggle:hover{transform:translateY(-2px)}
.mobile-menu{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;background:rgba(15,20,36,.92);backdrop-filter:saturate(120%);transform:translateX(100%);transition:transform .3s ease;z-index:70;padding:20px}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu-close{align-self:flex-end;height:48px;width:48px;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center}
.mobile-nav{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:20px}
.mobile-nav a{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:12px;background:#141B33;color:#EAF0FF;font-weight:800;border:2px solid rgba(255,255,255,.08)}
.mobile-nav a:hover{background:#1C2544}

/* Hide desktop nav on mobile; show toggle */
@media (max-width: 991px){
  nav ul,.header-btns{display:none}
}
/* Desktop nav visible; hide floating toggle */
@media (min-width: 992px){
  nav ul{display:flex}
  .header-btns{display:flex}
  .mobile-menu-toggle{display:none}
}

/* 14) COOKIE CONSENT */
.cookie-banner{position:fixed;left:0;right:0;bottom:-200px;z-index:80;display:flex;flex-direction:column;gap:12px;align-items:flex-start;background:var(--color-primary);color:#EAF0FF;padding:16px 18px;border-top:6px solid var(--color-secondary);box-shadow:0 -12px 30px rgba(0,0,0,.25);transition:bottom .3s ease}
.cookie-banner.show{bottom:0}
.cookie-banner .actions{display:flex;flex-wrap:wrap;gap:10px}
.cookie-btn{padding:10px 14px;border-radius:12px;font-weight:800}
.cookie-accept{background:var(--color-neon-green);color:#042A19}
.cookie-reject{background:transparent;color:#EAF0FF;border:2px solid #EAF0FF}
.cookie-settings{background:var(--color-secondary);color:#fff}
.cookie-btn:hover{filter:brightness(1.05)}

.cookie-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:90}
.cookie-modal-backdrop.open{opacity:1;pointer-events:auto}
.cookie-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-40%);background:#fff;color:var(--color-primary);width:min(92vw,640px);border-radius:18px;border:3px solid var(--color-secondary);box-shadow:var(--shadow-lg);padding:20px;display:flex;flex-direction:column;gap:14px;z-index:95;opacity:0;transition:transform .25s ease,opacity .25s ease}
.cookie-modal.open{opacity:1;transform:translate(-50%,-50%)}
.cookie-modal .row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--color-accent);border:2px solid #E4E9F5;border-radius:12px;padding:12px}
.cookie-modal .cta{display:flex;gap:10px;justify-content:flex-end}

/* 15) UTILITIES & COMPONENT ENHANCEMENTS */
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#ECFEF5;color:#065F46;border:2px solid #BAFCE0;font-weight:700}
.pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:#FFF3E8;color:#7A2E00;font-weight:800}
.hr{height:2px;background:#E4E9F5;border-radius:2px}

/* Lift on hover for standard .card blocks if used */
.card{background:var(--color-accent);border:2px solid #E4E9F5;border-radius:16px;padding:20px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}

/* 16) PAGE-SPECIFIC LAYOUT IMPROVEMENTS */
/* Index: rating, badges already handled */
/* Portfolio/client logos handled via .client-logo-strip */

/* Pricing: package cards highlight */
.package-cards > div h3{color:var(--color-secondary)}
.package-cards > div span{font-weight:800}

/* FAQ / DL styling */
dl{display:flex;flex-direction:column;gap:8px}
dt{font-weight:800;color:var(--color-primary)}
dd{margin-left:0;padding-left:0}

/* 17) RESPONSIVE BEHAVIOR */
/* Mobile first: each card 100% width. Scale up with breakpoints */
@media (min-width: 600px){
  .feature-grid > div,.service-cards > div{flex:1 1 calc(50% - 10px)}
}
@media (min-width: 900px){
  .feature-grid > div,.service-cards > div{flex:1 1 calc(33.333% - 14px)}
  .package-cards > div{flex:1 1 calc(33.333% - 14px)}
}

/* Text-image sections become rows on wider screens as required */
@media (max-width: 768px){
  .text-image-section{flex-direction:column}
}
@media (min-width: 769px){
  .text-image-section{flex-direction:row}
}

/* Footer: arrange rows into columns on desktop */
@media (min-width: 992px){
  footer .container{flex-direction:row;flex-wrap:wrap;row-gap:18px;column-gap:24px}
  .footer-nav{flex:1 1 100%}
  .contact-info{flex:2 1 50%}
  .social-links{flex:1 1 auto;justify-content:flex-end}
  .newsletter-signup{flex:1 1 100%}
  .legal-links{flex:1 1 100%}
}

/* 18) ENERGY STRIP ACCENTS (decorative, not affecting layout) */
/* Decorative highlight under h1 using pseudo-element within section context */
.content-wrapper h1{position:relative}
.content-wrapper h1::after{content:"";position:absolute;left:0;bottom:-10px;height:6px;width:84px;background:var(--color-neon-green);border-radius:8px}

/* 19) FORMS (if added later) basic inputs */
input[type="text"],input[type="email"],input[type="tel"],textarea,select{width:100%;padding:12px 14px;border:2px solid #DDE4F4;border-radius:12px;background:#fff;transition:border-color .2s ease,box-shadow .2s ease}
input:focus,textarea:focus,select:focus{border-color:var(--color-secondary);box-shadow:0 0 0 4px rgba(108,43,217,.15)}
label{font-weight:700;color:var(--color-primary);margin-bottom:6px;display:inline-flex}

/* 20) ACCESSIBILITY & STATES */
.btn-primary:active,.btn-secondary:active{transform:translateY(0)}
[disabled],[aria-disabled="true"]{opacity:.6;pointer-events:none}

/* 21) SPECIFIC CLASS ALIGNMENTS FROM REQUIREMENTS */
/* Ensure vertical centering and spacing uses flex gap, no overlaps */
.content-grid > *,.card-container > *,.service-cards > *,.feature-grid > *,.package-cards > *{min-width:260px}

/* 22) HEADINGS WRAP NICE ON TINY SCREENS */
@media (max-width:480px){
  h1{font-size:38px}
  h2{font-size:28px}
  h3{font-size:22px}
  .btn-primary,.btn-secondary{min-width:0;width:100%}
}

/* 23) ENSURE NO OVERLAP - provide breathing room */
section > .container > .content-wrapper > *{margin-right:0}
section .content-wrapper{gap:24px}

/* 24) IMAGE ICONS WITH TEXT LINES */
.content-wrapper > div img[alt]{height:22px;width:auto}

/* 25) HIGHLIGHT LIST-METRICS */
.content-wrapper ul li strong{color:var(--color-primary)}

/* 26) DARK SECTION VARIANT (if any section manually given .section--dark) */
.section--dark{background:#0F1424;color:#EAF0FF;border-top:6px solid var(--color-secondary);border-bottom:6px solid var(--color-secondary)}
.section--dark a{color:var(--color-electric-blue)}

/* 27) PRINTABLE TWEAKS */
@media print{.mobile-menu,.mobile-menu-toggle,.cookie-banner,.cookie-modal,.cookie-modal-backdrop{display:none !important}}

/* Compliance check:
   - Only flexbox used for layouts
   - No CSS grid/columns used
   - Adequate gaps and margins between elements
*/