/* --- CSS RESET & BASE --- */
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,caption,tbody,tfoot,thead,tr,th,td,main,section,article,aside,footer,header,nav,figure,figcaption{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box;}html{scroll-behavior:smooth;box-sizing:border-box;}*,*::before,*::after{box-sizing:inherit;}body{line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#182A3A;color:#F6F8FA;font-family:'Open Sans',Helvetica,Arial,sans-serif;}

/* --- BRAND FONTS --- */
@import url('https://fonts.googleapis.com/css?family=Montserrat:700,600,400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
:root {
  --color-primary: #205372;
  --color-secondary: #59A3CF;
  --color-accent: #F6F8FA;
  --color-bg-dark: #15223F;
  --color-bg-darker: #0d1726;
  --color-bg-card: #223648;
  --color-bg-gradient: #182A3A;
  --color-text: #F6F8FA;
  --color-text-dark: #222831;
  --color-text-light: #B6CDDF;
  --color-neon: #28FDFE;
  --color-alert: #F24B6A;
  --color-success: #53EF72;
  --shadow-1: 0 2px 14px 0 rgba(32,83,114,0.14);
  --shadow-2: 0 4px 28px 0 rgba(32,83,114,0.21);
  --font-display: 'Montserrat', 'Arial', sans-serif;
  --font-body: 'Open Sans', 'Arial', sans-serif;
  --radius: 14px;
  --radius-lg: 22px;
  --transition: 0.22s cubic-bezier(.57,.21,.69,1.25);
}

body{
  background: linear-gradient(135deg, var(--color-bg-gradient), var(--color-bg-dark) 90%);
  color:var(--color-text);
  min-height:100vh;
}

img{max-width:100%;height:auto;display:block;}
a{color:var(--color-secondary);text-decoration:none;transition:color var(--transition);}
a:hover,a:focus{text-decoration:underline;color:var(--color-neon);}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;}
h1{font-size:2.6rem;line-height:1.18;margin-bottom:24px;}
h2{font-size:2rem;margin-bottom:18px;}
h3{font-size:1.25rem;margin-bottom:10px;}
h4{font-size:1rem;margin-bottom:8px;}
p,ul,ol,li{font-family:var(--font-body);font-size:1rem;line-height:1.7;color:var(--color-text-light);}
strong{color:var(--color-neon);}

@media (max-width: 768px){
  h1{font-size:2rem;}
  h2{font-size:1.6rem;}
}

.container{
  width:100%;max-width:1200px;margin:0 auto;padding:0 18px;
}
.content-wrapper{
  display:flex;flex-direction:column;gap:24px;width:100%;
}

.section {
  margin-bottom:60px;
  padding:40px 20px;
  background:none;
}
@media (max-width: 768px){
  .section{padding:28px 8px;}
}

/* --- HEADER / NAV --- */
header{
  background:var(--color-bg-dark);
  box-shadow:var(--shadow-1);
  position:sticky;top:0;z-index:40;
  width:100%;
}
nav{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding:20px 0;
}
nav > a img {height:40px;width:auto;}
nav ul{
  display:flex;align-items:center;gap:20px;list-style:none;
}
nav ul li a{
  color:var(--color-text);
  font-family:var(--font-display);
  font-weight:600;
  padding:8px 6px;
  border-radius:6px;
  transition:background var(--transition),color var(--transition);
}
nav ul li a:hover,nav ul li a:focus{
  background:rgba(41,220,254,0.08);
  color:var(--color-neon);
}
.cta-btn{
  display:inline-block;
  background:linear-gradient(90deg,var(--color-neon) 0%,var(--color-secondary) 100%);
  color:var(--color-text-dark);
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:700;
  padding:12px 30px;
  border-radius:var(--radius);
  box-shadow:0 3px 14px 0 rgba(41,220,254,0.17);
  border:none;
  cursor:pointer;
  letter-spacing:0.03em;
  transition:box-shadow var(--transition),background var(--transition),color var(--transition),transform var(--transition);
  text-shadow:0 2px 10px #2ae8ff44;
}
.cta-btn:hover,.cta-btn:focus{
  background:linear-gradient(90deg,var(--color-secondary) 0%,var(--color-neon) 100%);
  color:var(--color-bg-darker);
  box-shadow:0 8px 24px 0 #28fdfe55,0 2px 14px 0 #20537244;
  transform:translateY(-1px) scale(1.04);
}

@media (max-width: 980px){
  nav ul{gap:12px;}
  nav > a img {height:34px;}
}
@media (max-width: 768px){
  nav ul, nav .cta-btn{
    display:none;
  }
  nav{padding:14px 0;}
}

/* --- MOBILE MENU --- */
.mobile-menu-toggle {
  display:none;
  position:fixed;
  top:20px;right:20px;
  z-index: 70;
  width:48px;
  height:48px;
  font-size:2.2rem;
  background:rgba(32,83,114,0.92);
  color:var(--color-neon);
  border:none;
  border-radius:50%;
  box-shadow:0 0 16px 0 #2ae8ff44;
  transition:background var(--transition),color var(--transition);
  cursor:pointer;
  align-items:center;justify-content:center;
}
.mobile-menu-toggle:focus,
.mobile-menu-toggle:hover {background:var(--color-neon);color:var(--color-bg-dark);}

@media (max-width: 768px){
  .mobile-menu-toggle {display:flex;}
}

.mobile-menu {
  display:flex;flex-direction:column;align-items:flex-end;
  position:fixed;top:0;right:0;height:100vh;width:100vw;
  background:rgba(13,23,38,0.98);
  transform:translateX(100%);
  transition:transform 0.38s cubic-bezier(.71,-0.34,.45,1.41);
  z-index:100;
}
.mobile-menu.open {transform:translateX(0);}
.mobile-menu-close {
  margin:22px 28px 0 0;
  background:none;border:none;
  color:var(--color-neon);
  font-size:2.2rem;
  cursor:pointer;
  transition:color var(--transition);
  z-index:110;
}
.mobile-menu-close:hover,.mobile-menu-close:focus{color:var(--color-alert);}
.mobile-nav{
  display:flex;flex-direction:column;align-items:center;margin-top:40px;width:100%;gap:22px;
}

.mobile-nav a{
  color:var(--color-text);
  background:rgba(41,220,254,0.11);
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:700;
  padding:16px 0;
  width:100%;
  text-align:center;
  border-radius:0;
  letter-spacing:0.01em;
  border-bottom:1px solid #20537233;
  transition:background var(--transition),color var(--transition);
}
.mobile-nav a:hover,.mobile-nav a:focus{
  background:rgba(41,220,254,0.18);
  color:var(--color-neon);
}
@media (min-width:769px){
  .mobile-menu,.mobile-menu-toggle{display:none!important;}
}

/* --- HERO --- */
.hero{
  padding:68px 0 58px 0;
  background:linear-gradient(120deg,#205372 60%,#59A3CF 100%);
  color:var(--color-text);
  box-shadow:0 14px 60px 0 #20537244;
}
.hero .container{display:flex;align-items:center;justify-content:center;min-height:350px;}
.hero .content-wrapper h1{color:var(--color-neon);margin-bottom:12px;text-shadow:0 4px 24px #59a3cf79;}
.hero .content-wrapper p{font-size:1.1rem;max-width:540px;color:var(--color-accent);margin-bottom:30px;}
.hero .cta-btn{font-size:1.18rem;}
@media (max-width:768px){
  .hero{padding:42px 0 22px 0;}
  .hero .container{min-height:210px;}
  .hero .content-wrapper h1{font-size:2rem;}
}

/* --- FLEXBOX UTILITY CONTAINERS --- */
.card-container{
  display:flex;flex-wrap:wrap;gap:24px;
}
.card{
  background:var(--color-bg-card);
  margin-bottom:20px;
  position:relative;
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  padding:28px 20px;
  flex:1 1 280px;
  transition:box-shadow var(--transition),transform var(--transition);
}
.card:hover,.card:focus-within{
  box-shadow:0 2px 32px 0 #2ae8ff22,0 8px 24px 0 #20537233;
  transform:translateY(-2.5px) scale(1.03);
}

.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;
}
@media (max-width: 768px){
  .text-image-section{flex-direction:column;align-items:flex-start;gap:18px;}
}
.testimonial-card{
  display:flex;align-items:center;gap:20px;padding:20px;
  background:#fff;
  color:var(--color-text-dark);
  border-radius:var(--radius);
  margin-bottom:24px;
  box-shadow:0 2px 12px 0 #2053721a;
  min-height:84px;
  transition:box-shadow var(--transition),transform var(--transition);
  flex:1 1 330px;
}
.testimonial-card:hover{box-shadow:0 6px 26px #20537222,0 2px 12px #28fdfe1f;transform:scale(1.012);}
.testimonial-rating{color:var(--color-neon);font-weight:bold;letter-spacing:0.08em;}

.feature-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:15px;
}

/* --- FEATURE GRID on index --- */
.feature-grid{
  display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;margin:24px 0;
}
.feature-grid>div{
  background:var(--color-bg-card);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  padding:24px 18px;
  flex:1 1 240px;
  min-width:240px;
  transition:box-shadow var(--transition),transform var(--transition);
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
}
.feature-grid>div:hover{
  box-shadow:0 2px 32px #28fdfe1a,0 8px 24px #59A3CF17;
  transform:translateY(-2px) scale(1.02);
}
.feature-grid img{width:44px;height:44px;filter:drop-shadow(0 0 10px #2ae8ff66);}

/* --- SERVICE LIST (index, services) --- */
.services-list{
  list-style:none;display:flex;flex-wrap:wrap;gap:24px;align-items:stretch;margin:28px 0 20px 0;padding:0;
}
.services-list li{
  background:var(--color-bg-card);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  flex:1 1 290px;
  min-width:220px;
  padding:22px 16px;margin-bottom:20px;transition:box-shadow var(--transition),transform var(--transition);
}
.services-list li:hover{box-shadow:0 2px 32px #28fdfe1b,0 8px 24px #59A3CF11;transform:scale(1.015);}
.services-list h3{color:var(--color-neon);margin-bottom:4px;font-size:1.15rem;}
.services-list p{color:var(--color-text-light);}

/* --- SERVICE TABS (services.html) --- */
.service-tabs{
  display:flex;flex-wrap:wrap;gap:24px;margin-bottom:24px;
}
.service-tabs article{
  flex:1 1 280px;
  min-width:240px;
  background:var(--color-bg-card);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  padding:26px 16px;
  margin-bottom:22px;
  transition:box-shadow var(--transition),transform var(--transition);
}
.service-tabs article:hover{box-shadow:0 4px 24px var(--color-neon),0 2px 10px #59A3CF22;transform:translateY(-2px) scale(1.015);}
.service-tabs h2{color:var(--color-secondary);}

/* --- SERVICE PRICING TABLE --- */
.service-pricing {
  width:100%;margin:34px 0 18px 0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 2px 24px #20537225;
}
.service-pricing caption{font-family:var(--font-display);font-weight:700;padding:14px 0;background:var(--color-bg-card);color:var(--color-neon);font-size:1.19rem;margin-bottom:3px;}
.service-pricing th,.service-pricing td{padding:13px 10px;text-align:left;font-family:var(--font-body);}
.service-pricing thead tr{background:var(--color-secondary);color:var(--color-bg-dark);}
.service-pricing tbody tr{background:var(--color-accent);color:var(--color-text-dark);}
.service-pricing tbody tr:nth-child(odd){background:#E8F4FB;}

/* --- CTA BANNER --- */
.cta-banner{
  margin-top:40px;
  padding:38px 0 30px 0;
  background:linear-gradient(90deg,#59A3CF 19%,#28FDFF 81%);box-shadow:0 2px 22px #28fdfe21;
  border-radius:var(--radius-lg);
  color:var(--color-bg-dark);
  text-align:center;
}
.cta-banner h2{color:var(--color-bg-dark);margin-bottom:12px;}
.cta-banner p{color:#113848;}

/* --- EQUIPMENTS SECTIONS --- */
.equipment-categories,.top-brands,.equipment-features{
  background:var(--color-bg-card);
  border-radius:var(--radius);
  padding:22px 14px;margin-bottom:20px;box-shadow:var(--shadow-1);
  color:var(--color-text-light);
}

/* --- REALISATIONS PROJECT SUMMARY --- */
.project-summary{
  background:var(--color-bg-card);
  border-radius:var(--radius);
  padding:22px 14px;margin-bottom:22px;box-shadow:var(--shadow-1);
}

.methodology,.quality-commitment{
  background:var(--color-bg-card);
  border-radius:var(--radius);
  padding:20px 14px;margin-bottom:20px;box-shadow:var(--shadow-1);
}

/* --- FAQ ACCORDION --- */
.faq-accordion{
  display:flex;flex-direction:column;gap:20px;margin-bottom:32px;margin-top:10px;
}
.faq-accordion > div{
  background:var(--color-bg-card);
  border-radius:var(--radius);
  padding:22px 16px;transition:box-shadow var(--transition),transform var(--transition);box-shadow:var(--shadow-1);
}
.faq-accordion > div:hover {box-shadow:0 2px 28px #28fdfe19,0 8px 24px #59A3CF13;transform:scale(1.015);}
.faq-accordion h2{font-family:var(--font-display);color:var(--color-secondary);font-size:1.12rem;margin-bottom:10px;}
.faq-accordion p{color:var(--color-text-light);}
.faq-cta{margin-top:18px;}

/* --- CONTACT PAGE --- */
.text-section{margin-bottom:20px;}
.company-details, .company-map, .business-hours{
  background:var(--color-bg-card);
  border-radius:var(--radius);
  padding:20px 14px;margin-bottom:18px;box-shadow:var(--shadow-1);
  color:var(--color-text-light);
}
.business-hours ul{padding-left:18px;}
.business-hours li{margin-bottom:9px;color:var(--color-neon);}

/* --- FOOTER --- */
footer{
  background:var(--color-bg-dark);
  color:var(--color-accent);
  border-top:2px solid #59A3CF44;
  padding:30px 0;
}
footer .container{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;justify-content:space-between;}
footer a{color:var(--color-accent);font-size:0.98rem;transition:color var(--transition);}
footer a:hover,footer a:focus{color:var(--color-neon);}
.footer-nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
footer address{font-style:normal;font-size:0.97rem;color:var(--color-text-light);margin-top:6px;}
footer img{height:40px;filter:drop-shadow(0 0 10px #28fdfe44);}
@media (max-width:768px){
  footer .container{flex-direction:column;gap:18px;align-items:flex-start;}
}

/* --- COOKIE CONSENT BANNER --- */
.cookie-banner{
  position:fixed;bottom:0;left:0;width:100%;z-index:200;
  background:linear-gradient(90deg,#205372 60%,#182A3A 100%);
  color:var(--color-accent);
  padding:22px 24px;
  box-shadow:0 -2px 18px #59a3cf29;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  font-size:1rem;
  transition:transform 0.27s var(--transition),opacity 0.22s var(--transition);
}
.cookie-banner.hide{transform:translateY(100%);opacity:0;pointer-events:none;}
.cookie-banner p{margin-right:auto;max-width:580px;}
.cookie-banner .cookie-actions{display:flex;gap:16px;flex-wrap:wrap;}
.cookie-btn{
  background:var(--color-neon);
  color:var(--color-bg-dark);
  border:none;
  padding:10px 26px;
  font-family:var(--font-display);
  font-weight:700;
  border-radius:var(--radius);
  cursor:pointer;
  transition:background var(--transition),color var(--transition),box-shadow var(--transition);
  box-shadow:0 2px 16px #2ae8ff22;
}
.cookie-btn:hover,.cookie-btn:focus{background:var(--color-secondary);color:var(--color-bg-dark);}
.cookie-btn.reject{background:var(--color-alert);color:#fff;}
.cookie-btn.reject:hover{background:var(--color-bg-darker);color:var(--color-alert);}
.cookie-btn.settings{background:transparent;border:2px solid var(--color-neon);color:var(--color-neon);}
.cookie-btn.settings:hover{background:var(--color-neon);color:var(--color-bg-dark);}

/* --- COOKIE SETTINGS MODAL --- */
.cookie-modal-backdrop{
  position:fixed;top:0;left:0;z-index:210;width:100vw;height:100vh;background:rgba(13,23,38,0.83);
  display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity 0.22s var(--transition);
}
.cookie-modal{
  background:var(--color-bg-card);
  border-radius:var(--radius-lg);
  box-shadow:0 8px 48px #28fdfe22,0 2px 12px #20537244;
  color:var(--color-text);
  min-width:310px;max-width:98vw;
  padding:38px 24px 30px 24px;
  display:flex;flex-direction:column;align-items:stretch;gap:22px;
  animation:modalin 0.33s cubic-bezier(.59,-0.01,.39,1.12);
}
@keyframes modalin {from{transform:scale(0.88) translateY(40px);opacity:0;}to{transform:none;opacity:1;}}
.cookie-modal h2{font-size:1.4rem;color:var(--color-neon);margin-bottom:13px;}
.cookie-category{
  display:flex;flex-wrap:wrap;gap:13px;align-items:center;
  margin-bottom:7px;margin-top:7px;
}
.cookie-category strong{margin-right:8px;color:var(--color-secondary);}
.cookie-toggle{
  margin-left:auto;
  width:54px;height:30px;
  border-radius:16px;background:#19294a;
  border:1.5px solid var(--color-neon);
  position:relative;display:inline-block;vertical-align:middle;}
.cookie-toggle input{display:none;}
.cookie-toggle span{
  display:block;width:26px;height:26px;background:var(--color-neon);border-radius:50%;position:absolute;left:2px;top:1.5px;transition:left var(--transition),background var(--transition);box-shadow:0 1px 6px #2ae8ff36;}
.cookie-toggle input:checked + span{left:26px;background:var(--color-success);}
.cookie-modal-actions{display:flex;gap:18px;justify-content:flex-end;margin-top:24px;}
.cookie-modal-actions .cookie-btn{min-width:128px;}

/* --- Z-INDEX CLARIFICATION --- */
header, .mobile-menu, .cookie-banner, .cookie-modal-backdrop {z-index:100;}

/* --- GENERAL UTILITIES & ANIMATIONS --- */
::-webkit-scrollbar{width:10px;background:#19294a;}
::-webkit-scrollbar-thumb{background:#205372;border-radius:12px;}
::-webkit-scrollbar-thumb:hover{background:#59A3CF;}

@media (max-width: 992px){
  .feature-grid,.services-list,.service-tabs,.card-container,.content-grid{flex-direction:column;gap:18px;}
  .cta-banner{margin-top:24px;}
}
@media (max-width:600px){
  .container{padding:0 5px;}
  .section{padding:18px 2px;}
  .hero{padding:28px 0 8px 0;}
  .cta-btn{padding:11px 16px;font-size:0.98rem;}
  .card,.testimonial-card,.feature-grid>div,.services-list li{padding:16px 10px;}
  .footer-nav{gap:8px;}
  .card-container,.content-grid{gap:12px;}
}
/* --- MICRO-INTERACTIONS --- */
button, .cta-btn, .mobile-menu-toggle, .mobile-menu-close, .cookie-btn,input[type=button],input[type=submit]{outline:none;transition:box-shadow var(--transition),background var(--transition),color var(--transition),transform var(--transition);}
button:active, .cta-btn:active,.cookie-btn:active{transform:scale(0.97);}

/* --- REMOVE NUMBER INPUT ARROWS --- */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none;margin:0; }
input[type=number]{-moz-appearance:textfield;}

/* --- SUP ELEMENT (used in contact) --- */
sup{font-size:0.76em;}

/* --- ACCESSIBILITY: FOCUS RING --- */
:focus-visible{outline:2px solid var(--color-neon);outline-offset:2px;}

/* --- KEY SPACING AND ALIGNMENT (Flex, Margin, Gap) --- */
.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;}

/* --- END STYLES --- */