/* RESET & BASE STYLES --------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,main,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section {display:block;}
body {line-height:1;background:#F6F7F9;color:#23304c;}
ol,ul {list-style:none;}
table {border-collapse:collapse;border-spacing:0;}
img {max-width:100%;height:auto;display:block;}
a {text-decoration:none;color:inherit;transition:color .16s cubic-bezier(.44,1.14,.68,1.33);}
button,input,select,textarea {font-family:inherit;font-size:100%;border:none;background:none;outline:none;}
button {cursor:pointer;}

/* TYPOGRAPHY --------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Roboto:wght@400;500;700&display=swap');

body {
  font-family:'Roboto', Arial, sans-serif;
  font-size:16px;
  font-weight:400;
  color:#16204D;
  background:#F6F7F9;
  min-height:100vh;
  letter-spacing:0.01em;
}
h1,h2,h3,h4,h5,h6 {
  font-family:'Montserrat', 'Roboto', Arial, sans-serif;
  font-weight:700;
  color:#16204D;
}
h1 {font-size:2.25rem;line-height:1.15;margin-bottom:24px;}
h2 {font-size:1.5rem;line-height:1.2;margin-bottom:20px;}
h3 {font-size:1.125rem;line-height:1.25;margin-bottom:16px;}
p,ul,ol {font-size:1rem;line-height:1.7;margin-bottom:18px;}
strong {font-weight:700;}
small {font-size:0.875rem;}

/* CONTAINER --------------------------------------------------------- */
.container {
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  gap:0;
}

/* HEADER & NAV --------------------------------------------------------- */
header {
  background:#fff;
  box-shadow:0 2px 16px rgba(22,32,77,0.10);
  border-bottom:1.5px solid #eaecf1;
  position:relative;
  z-index:30;
}
header .container {
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:72px;
}
header img[alt='Lumina Fuel'] {
  height:44px;
}
nav {
  display:flex;
  gap:28px;
}
nav a {
  font-family:'Roboto', Arial, sans-serif;
  font-size:1rem;
  color:#16204D;
  font-weight:500;
  padding:8px 0;
  border-bottom:2px solid transparent;
  transition:color 0.16s, border-bottom 0.16s;
}
nav a:hover,nav a:focus {
  color:#37D1B5;
  border-bottom:2px solid #37D1B5;
}
.btn-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 32px;
  background:#16204D;
  color:#fff;
  font-family:'Montserrat', 'Roboto', sans-serif;
  font-weight:700;
  font-size:1rem;
  border-radius:26px;
  box-shadow:0 2px 16px rgba(22,32,77,0.10);
  margin-left:16px;
  transition:background .2s cubic-bezier(.44,1.14,.68,1.33), box-shadow .2s;
  border:2px solid #16204D;
}
.btn-primary:hover,.btn-primary:focus {
  background:#37D1B5;
  color:#16204D;
  box-shadow:0 4px 24px rgba(55,209,181,0.14);
  border:2px solid #37D1B5;
}

/* MOBILE MENU --------------------------------------------------------- */
.mobile-menu-toggle {
  display:none;
  font-size:2rem;
  background:none;
  color:#16204D;
  padding:5px 15px;
  border-radius:6px;
  margin-left:8px;
  z-index:111;
  border:2px solid transparent;
  transition:background 0.16s, border-color 0.2s;
}
.mobile-menu-toggle:focus,
.mobile-menu-toggle:hover {
  border:2px solid #37D1B5;
  background:rgba(55,209,181,0.08);
}
.mobile-menu {
  position:fixed;
  top:0;left:0;width:100vw;height:100vh;
  background:rgba(22,32,77,0.98);
  display:flex;flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  padding:32px 26px 0 32px;
  z-index:1002;
  transform:translateX(-100%);
  transition:transform .38s cubic-bezier(.44,1.14,.68,1.33);
  pointer-events:none;
  opacity:0;
}
.mobile-menu.open {
  transform:translateX(0);
  pointer-events:auto;
  opacity:1;
}
.mobile-menu-close {
  font-size:2rem;
  color:#fff;
  background:none;
  border:none;
  align-self:flex-end;
  margin-bottom:28px;
  border-radius:6px;
  padding:3px 13px;
  transition:background 0.16s, color 0.16s;
}
.mobile-menu-close:focus {outline:2px solid #F2D94E;}
.mobile-menu-close:hover {background:rgba(242,217,78,0.16);color:#F2D94E;}
.mobile-nav {
  display:flex;
  flex-direction:column;
  gap:18px;
  width:100%;
}
.mobile-nav a {
  color:#fff;
  font-size:1.25rem;
  font-family:'Montserrat', 'Roboto', sans-serif;
  font-weight:500;
  padding:12px 0 12px 4px;
  border-radius:6px;
  transition:background 0.14s, color 0.18s;
}
.mobile-nav a:hover,
.mobile-nav a:focus {
  background:#23304c;
  color:#F2D94E;
}

/* MAIN & SECTION LAYOUT --------------------------------------------------------- */
main {
  flex:1 0 auto;
  width:100%;
  min-height:calc(100vh - 160px);
  background:#F6F7F9;
}
.section,
main > section {
  margin-bottom:60px;
  padding:40px 20px;
  background:#fff;
  border-radius:24px;
  box-shadow:0 2px 12px rgba(22,32,77,0.05);
  position:relative;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.content-wrapper {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:24px;
  margin:10px 0 0 0;
}

/* FLEXBOX PATTERNS --------------------------------------------------------- */
.card-container {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.card {
  background:#fff;
  border-radius:18px;
  box-shadow:0 1px 8px rgba(22,32,77,0.055);
  margin-bottom:20px;
  padding:24px 24px 20px;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:260px;
  flex:1 1 340px;
  transition:box-shadow .18s;
}
.card:hover {box-shadow:0 4px 32px rgba(22,32,77,0.13);}
.card-content {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
}
.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;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  background:#f8fafc;
  color:#16204D;
  border-radius:16px;
  padding:20px;
  box-shadow:0 2px 10px rgba(22,32,77,0.06);
  margin-bottom:20px;
  min-width:260px;
  max-width:420px;
  flex:1 1 320px;
  border-left:4px solid #37D1B5;
  transition:box-shadow .16s, transform .18s;
}
.testimonial-card:hover {
  box-shadow:0 5px 18px rgba(22,32,77,0.12);
  transform:translateY(-4px) scale(1.02);
}
.testimonial-details {
  font-size:1rem;
  color:#16204D;
  margin-top:6px;
}
.feature-item {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
  background:#f6fafe;
  border-radius:10px;
  padding:18px;
}
.logo-row {
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:18px;
  flex-wrap:wrap;
}

/* LISTS & ICONS --------------------------------------------------------- */
ul li, ol li {
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:1rem;
  color:#23304c;
}
ul li img, .contact-info img {
  width:28px;height:28px;min-width:28px;min-height:28px;
  margin-right:8px;
}

/* SEARCH & INPUTS --------------------------------------------------------- */
input[type='search'] {
  width:100%;
  background:#f6fafc;
  border-radius:16px;
  padding:14px 18px;
  border:2px solid #eaecf1;
  font-size:1rem;
  color:#16204D;
  margin:6px 0 18px 0;
  transition:border-color 0.18s;
}
input[type='search']:hover,input[type='search']:focus {
  border-color:#37D1B5;
  outline:none;
}

/* FOOTER STYLES --------------------------------------------------------- */
footer {
  background:#16204D;
  color:#fff;
  padding:42px 0 30px 0;
  border-top:5px solid #37D1B5;
  width:100%;
}
footer .container {
  flex-direction:row;
  gap:50px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}
.footer-links {
  display:flex;
  flex-direction:column;
  gap:14px;
}
.footer-links a {
  color:#f6fafc;
  font-size:1rem;
  font-family:'Roboto', Arial, sans-serif;
  opacity:0.87;
  transition:color 0.15s;
}
.footer-links a:hover,
.footer-links a:focus { color:#F2D94E; }
.footer-contact {
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:1rem;
  color:#f6fafc;
  margin-top:4px;
  font-family:'Roboto', Arial, sans-serif;
}
.footer-contact img {
  width:18px;
  margin-right:7px;
  vertical-align:middle;
}
.footer-social {
  display:flex;
  gap:20px;
  margin-top:12px;
}
.footer-social a {display:inline-flex;align-items:center;}
.footer-social img {
  width:28px;height:28px;
  filter:brightness(0) invert(1);
  opacity:0.82;
  transition:opacity 0.18s;
}
.footer-social a:hover img {
  opacity:1;
  filter:drop-shadow(0 2px 6px #37D1B5);
}


/* CONTACT PAGE EXTRAS --------------------------------------------------------- */
.contact-info {
  background:#f6fafc;
  border-radius:14px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.contact-info p {margin-bottom:8px;}
.map-location {
  display:flex;flex-direction:row;align-items:center;gap:16px;margin-top:18px;
  background:#eaf5fa;
  border-radius:10px;
  padding:14px 20px;
}
.map-location img {
  width:64px;
  height:64px;
}

/* BUTTONS - SECONDARY, COOKIE ETC ----------------------------------------- */
.btn-secondary, .cookie-btn-secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 24px;
  background:#fff;
  color:#16204D;
  font-family:'Montserrat', 'Roboto', sans-serif;
  font-weight:700;
  font-size:1rem;
  border-radius:26px;
  border:2px solid #37D1B5;
  margin-left:7px;
  transition:background .17s, border-color .17s, color .17s;
}
.btn-secondary:hover,.btn-secondary:focus {
  background:#37D1B5;
  color:#fff;
  border-color:#37D1B5;
}

/* COOKIE CONSENT BANNER --------------------------------------------------------- */
.cookie-banner {
  position:fixed;
  left:0;
  bottom:0;
  width:100vw;
  background:#fff;
  color:#16204D;
  box-shadow:0 -4px 24px rgba(22,32,77,0.10);
  border-top:4px solid #F2D94E;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:28px 18px;
  font-size:1rem;
  z-index:10010;
  opacity:0;
  pointer-events:none;
  transform:translateY(100px);
  transition:opacity .3s, transform .32s cubic-bezier(.44,1.14,.68,1.33);
}
.cookie-banner.show {
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.cookie-banner .cookie-message {
  flex:1 1 360px;
  min-width:190px;
  font-size:1rem;
}
.cookie-banner .cookie-actions {
  display:flex;
  flex-direction:row;
  gap:8px;
}
.cookie-btn-primary {
  background:#37D1B5;
  color:#fff;
  font-family:'Montserrat', 'Roboto', sans-serif;
  font-weight:700;
  font-size:1rem;
  border-radius:24px;
  border:none;
  padding:10px 19px;
  margin-left:0;
  margin-right:6px;
  box-shadow:0 1px 8px rgba(55,209,181,0.12);
  transition:background .18s, color .16s, box-shadow .18s;
}
.cookie-btn-primary:hover,.cookie-btn-primary:focus {
  background:#16204D;
  color:#F2D94E;
  box-shadow:0 4px 16px #37D1B544;
}
.cookie-btn-secondary {
  border:2px solid #16204D;
  background:#fff;
  color:#16204D;
  margin-left:0;
  margin-right:6px;
}
.cookie-btn-secondary:hover,
.cookie-btn-secondary:focus {
  background:#f2d94e;
  color:#16204D;
  border-color:#f2d94e;
}

/* COOKIE PREFERENCES MODAL --------------------------------------------------------- */
.cookie-modal {
  position:fixed;
  left:0;top:0;width:100vw;height:100vh;
  background:rgba(22,32,77,0.72);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:11000;
  pointer-events:none;
  opacity:0;
  transition:opacity .22s;
}
.cookie-modal.show {
  pointer-events:all;
  opacity:1;
}
.cookie-modal-content {
  background:#fff;
  color:#16204D;
  border-radius:18px;
  max-width:410px;
  width:92vw;
  padding:36px 30px 28px 30px;
  box-shadow:0 8px 40px rgba(22,32,77,0.17);
  display:flex;
  flex-direction:column;
  gap:19px;
  position:relative;
  min-width:260px;
}
.cookie-modal-content h3 {
  margin-bottom:11px;
  font-size:1.18rem;
}
.cookie-modal-content ul {
  display:flex;
  flex-direction:column;
  gap:13px;
}
.cookie-modal-content li {
  font-size:1rem;
  display:flex;
  align-items:center;
  gap:12px;
}
.cookie-toggle {
  width:36px;
  height:20px;
  background:#eaecf1;
  border-radius:12px;
  position:relative;
  cursor:pointer;
  appearance:none;
  outline:none;
  transition:background .15s;
  margin-left:7px;
}
.cookie-toggle:checked {
  background:#37D1B5;
}
.cookie-toggle:before {
  content:'';
  display:block;
  position:absolute;top:2px;left:2px;width:16px;height:16px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 4px #16204D12;
  transition:left .2s cubic-bezier(.44,1.14,.68,1.33);
}
.cookie-toggle:checked:before {
  left:18px;
}
.cookie-modal-close {
  position:absolute;top:12px;right:14px;
  font-size:1.5rem;
  color:#16204D;
  border:none;
  background:none;
  cursor:pointer;
  padding:2px 7px;
  border-radius:6px;
  transition:background .14s;
}
.cookie-modal-close:hover,
.cookie-modal-close:focus {
  background:#37D1B5;
  color:#fff;
}

/* RESPONSIVE DESIGN --------------------------------------------------------- */
@media (max-width:1200px) {
  .container {max-width:96vw;}
}
@media (max-width:900px) {
  header .container,footer .container{flex-direction:column;gap:12px;align-items:flex-start;}
  .footer-links,.footer-contact,.footer-social{margin-bottom:10px;}
}
@media (max-width:768px) {
  h1 {font-size:1.55rem;} h2 {font-size:1.25rem;} h3 {font-size:1rem;}
  main > section,.section{padding:25px 8px;margin-bottom:38px;}
  .card-container,.content-grid{gap:11px;}
  .testimonial-card, .card{min-width:180px;max-width:100%;padding:16px 9px;}
  .logo-row{gap:14px;}
  nav{display:none;}
  .btn-primary{margin-left:0;}
  .mobile-menu-toggle{display:inline-flex;}
  /* Column layout becomes vertical */
  .container{padding:0 9px;}
  .text-image-section{flex-direction:column;align-items:flex-start;gap:14px;}
  .footer-social{gap:9px;}
  .map-location{flex-direction:column;gap:8px;align-items:flex-start;padding:10px 8px;}
}
@media (min-width:769px) {
  .mobile-menu, .mobile-menu.open {display:none !important;}
  .mobile-menu-toggle {display:none !important;}
  nav {display:flex !important;}
}
@media (max-width:466px) {
  .cookie-banner{flex-direction:column;align-items:flex-start;gap:16px;font-size:0.97rem;}
  .footer-links,.footer-contact,.footer-social,.container{gap:7px;}
}

/* MICRO-INTERACTIONS --------------------------------------------------------- */
a,button,.btn-primary,.btn-secondary,.footer-links a,.mobile-menu-toggle,.mobile-nav a,.cookie-btn-primary,.cookie-btn-secondary,.cookie-modal-close {
  transition:background .17s, color .13s, box-shadow .13s, transform .17s;
}
.btn-primary:active,.btn-secondary:active,.cookie-btn-primary:active,.cookie-btn-secondary:active{
  transform:scale(0.97);
}

/* VISUAL HIERARCHY EXTRAS --------------------------------------------------------- */
h2 + .content-wrapper, h3 + .content-wrapper {margin-top:8px;}
.section h2,main>section h2 {margin-top:0;}
h1 + p {margin-top:-12px;}
.card strong,li strong {color:#16204D;}

/* ACCESSIBILITY --------------------------------------------------------- */
:focus {outline:2px solid #37D1B5;outline-offset:1px;}

/* END OF CSS */