/* --- CSS RESET & NORMALIZE --- */
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;
}
html{height:100%;}
body{line-height:1;font-family:'Open Sans',Arial,sans-serif;background:#101B1E;color:#FAFAFA;padding:0;min-height:100vh;-webkit-tap-highlight-color:transparent;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block;}
ol,ul{list-style:none;}
a{background:transparent;color:inherit;text-decoration:none;transition:color 0.2s,box-shadow 0.2s;border-radius:4px;}
button,a,select,input,textarea{font-family:'Open Sans',Arial,sans-serif;outline:none;}
img{border:none;max-width:100%;display:block;}

/* --- VARIABLES (FALLBACKS) --- */
:root {
  --color-primary: #20716C;
  --color-secondary: #F7CB6E;
  --color-accent: #FFFFFF;
  --color-bg: #101B1E;
  --color-bg-gradient: #1a2730;
  --color-surface: #172229;
  --color-surface-light: #182f2d;
  --color-danger: #E35656;
  --color-success: #38C99E;
  --color-info: #4AD7FE;
  --neon: 0 0 8px #27ffe9, 0 0 16px #2ffee5;
  --shadow-card: 0 8px 32px 0 rgba(32,80,100,0.15);
  --shadow-button: 0 4px 14px 0 rgba(39,255,233,0.12);
  --radius: 18px;
  --radius-sm: 10px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 60px;
  --font-display: 'Montserrat',Arial,sans-serif;
  --font-body: 'Open Sans',Arial,sans-serif;
}

/* --- TYPOGRAPHY --- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--color-accent);
  margin-bottom:var(--space-sm);
}
h1{font-size:2.2rem;line-height:1.18;margin-bottom:var(--space-md);}
h2{font-size:1.6rem;line-height:1.25;}
h3{font-size:1.1rem;line-height:1.2;}
h4{font-size:1rem;}
p,li,span,td,th{
  font-size:1rem;
  line-height:1.7;
  color:var(--color-accent);
}
a{
  color:var(--color-secondary);
}
a:focus{box-shadow:0 0 0 3px rgba(247,203,110,0.5);}
strong, b{font-weight:700;}

@media (min-width:600px) {
  h1{font-size:2.8rem;}
  h2{font-size:2rem;}
  h3{font-size:1.3rem;}
  p,li,span{font-size:1.05rem;}
}

@media (min-width:1024px) {
  h1{font-size:3.4rem;}
  h2{font-size:2.3rem;}
  h3{font-size:1.5rem;}
  p,li,span{font-size:1.09rem;}
}


/* --- BASIC LAYOUT CONTAINERS --- */
.container {
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--space-md);
}
.content-wrapper {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin:0 auto;
  gap:var(--space-md);
}

@media (min-width:900px) {
  .content-wrapper {
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--space-lg);
  }
}

.section {
  background:var(--color-surface);
  margin-bottom:var(--space-xl);
  padding:var(--space-lg) var(--space-sm);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  position:relative;
  z-index:1;
}

/* --- HEADER/NAVIGATION --- */
header {
  width:100%;
  background:linear-gradient(90deg,#132026 0 75%,#173638 100%);
  box-shadow:0 3px 12px 0 rgba(32,113,108,0.10);
  position:sticky;
  top:0;left:0;z-index:100;
}
header .container {
  padding-top:var(--space-md);
  padding-bottom:var(--space-md);
}
header .content-wrapper {
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md);
}
header img[alt="SgranConfl"] {height:36px;width:auto;vertical-align:middle;}

nav {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-sm);
  align-items:center;
}
nav a{
  padding:8px 18px;
  border-radius:var(--radius-sm);
  font-family:var(--font-display);
  color:var(--color-accent);
  font-weight:600;
  font-size:1rem;
  position:relative;
  transition:color 0.18s,background 0.18s;
}
nav a:hover,nav a.active{
  background:var(--color-primary);
  color:var(--color-secondary);
  box-shadow:0 0 0 2px var(--color-secondary);
}

header .btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--color-secondary);
  color:var(--color-primary);
  font-family:var(--font-display);
  font-weight:700;
  border:none;
  padding:10px 30px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-button),var(--neon);
  cursor:pointer;
  font-size:1.09rem;
  transition:background 0.2s,color 0.2s,box-shadow 0.22s;
  margin-left:var(--space-md);
  letter-spacing:0.03em;
  outline:none;
}
header .btn-primary:hover,header .btn-primary:focus{
  background:var(--color-primary);
  color:var(--color-secondary);
  box-shadow:0 4px 18px 0 #3ffbee33,var(--neon);
}

/* --- MOBILE MENU --- */
.mobile-menu-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.9rem;
  background:none;
  border:none;
  color:var(--color-secondary);
  margin-left:var(--space-md);
  z-index:110;
  cursor:pointer;
  border-radius:50%;
  padding:4px 8px;
  transition:background 0.15s,box-shadow 0.2s;
}
.mobile-menu-toggle:hover{
  background:rgba(247,203,110,0.07);
  box-shadow:0 2px 12px 0 #f7cb6e33;
}

.mobile-menu{
  position:fixed;
  top:0;left:0;width:100vw;height:100vh;
  background:rgba(15,27,34,0.96);
  z-index:998;
  transform:translateX(-105%);
  transition:transform 0.36s cubic-bezier(.46,.03,0,1.05);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  padding:var(--space-md) var(--space-lg);
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu-close{
  align-self:flex-end;
  font-size:2.1rem;
  background:none;
  border:none;
  color:var(--color-secondary);
  margin-bottom:var(--space-md);
  cursor:pointer;
  border-radius:50%;
  transition:background 0.15s;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus{
  background:rgba(247,203,110,0.16);
}
.mobile-nav{
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
  width:100%;
  margin-top:var(--space-md);
}
.mobile-nav a{
  color:var(--color-secondary);
  font-size:1.15rem;
  padding:16px 0 10px 0;
  font-family:var(--font-display);
  font-weight:600;
  border-radius:var(--radius-sm);
  transition:background 0.18s,color 0.18s;
}
.mobile-nav a:hover,
.mobile-nav a:focus{
  background:var(--color-primary);
  color:var(--color-accent);
}

@media (min-width: 992px) {
  .mobile-menu-toggle{display:none;}
  .mobile-menu{display:none !important;}
}
@media (max-width: 991px) {
  header nav,
  header .btn-primary{display:none;}
  .mobile-menu-toggle{display:inline-flex;}
}

/* --- HERO & MAIN SECTIONS --- */
.hero {
  background:linear-gradient(120deg,#20716C 0 50%,#293E46 100%);
  padding:var(--space-lg) 0 var(--space-xl) 0;
  margin-bottom:var(--space-xl);
  border-bottom:5px solid var(--color-secondary);
  box-shadow:0 6px 36px 0 rgba(32,113,108,0.12);
}
.hero .content-wrapper{
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-md);
}
.hero h1,
.hero p{color:var(--color-accent);text-shadow:0 7px 18px #101b1eea,var(--neon);}
.hero a.btn-primary{margin-top:var(--space-md);}

/* --- FEATURE GRID --- */
.feature-grid{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-lg);
  align-items:stretch;
  margin-top:var(--space-md);
  margin-bottom:var(--space-md);
}
.feature{
  display:flex;
  flex-direction:column;
  background:var(--color-surface-light);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card),var(--neon);
  align-items:flex-start;
  gap:var(--space-sm);
  padding:var(--space-md);
  flex:1 1 210px;
  transition:box-shadow 0.16s,transform 0.11s;
  margin-bottom:20px;
}
.feature img{height:38px;width:auto;filter:drop-shadow(0 3px 8px #2ffee522);margin-bottom:12px;}
.feature:hover{box-shadow:0 10px 38px 0 #27ffe944,0 0 16px #F7CB6E;transform:translateY(-4px) scale(1.03);}
.feature h3{color:var(--color-secondary);}

/* --- SERVICE HIGHLIGHTS --- */
.service-list{
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  margin:var(--space-sm) 0 28px 0;
}
.service-highlight{
  background:rgba(32,113,108,0.07);
  border:1.5px solid var(--color-primary);
  border-radius: var(--radius-sm);
  box-shadow:var(--shadow-card);
  padding:var(--space-sm) var(--space-md);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.service-highlight strong{color:var(--color-secondary);font-weight:700;}

.btn-primary,.btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  border-radius:var(--radius);
  font-family:var(--font-display);
  font-weight:600;
  outline:none;
  font-size:1.08rem;
  box-shadow:var(--shadow-button);
  cursor:pointer;
  border:none;
  margin-top:var(--space-md);
  padding:12px 38px;
  letter-spacing:0.02em;
  transition:background 0.2s,color 0.2s,box-shadow 0.22s;
}
.btn-primary{background:var(--color-secondary);color:var(--color-primary);}
.btn-secondary{background:var(--color-primary);color:var(--color-secondary);}
.btn-primary:hover,.btn-primary:focus{background:var(--color-primary);color:var(--color-secondary);box-shadow:0 4px 18px 0 #3ffbee65,var(--neon);}
.btn-secondary:hover,.btn-secondary:focus{background:var(--color-secondary);color:var(--color-primary);box-shadow:0 4px 18px 0 #3ffbee65,var(--neon);}

/* --- TEXT SECTIONS, LISTS --- */
.text-section{
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
  color:var(--color-accent);
  margin-bottom:var(--space-md);
}
.text-section ul{
  margin-left:var(--space-lg);
  margin-bottom:var(--space-sm);
}
.text-section li{margin-bottom:6px;}

/* --- CARD AND FLEX CONTAINERS --- */
.card-container{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.card{margin-bottom:20px;position:relative;background:var(--color-surface-light);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:var(--space-md);}
.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;
  padding:20px;
  background:var(--color-accent);
  color:#181c1e;
  border-radius:var(--radius);
  margin-bottom:20px;
  box-shadow:0 2px 14px #20716C23;
  border:2px solid var(--color-secondary);
  max-width:480px;
}
.testimonial-card p{color:#1a2332;font-size:1.08rem;background:none;}
.testimonial-card span{color:#445;text-shadow:0 1px 0 #f7cb6eb0;font-size:0.95rem;}

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

/* --- RESPONSIVE FLEX DIRECTION CHANGES --- */
@media (max-width: 900px) {
  .feature-grid, .service-list, .content-grid, .card-container {
    flex-direction:column;
    gap:var(--space-md);
  }
  .text-image-section{flex-direction:column;gap:18px;}
}

@media (max-width: 600px) {
  .container{padding:0 10px;}
  .section{padding:var(--space-md) var(--space-xs);margin-bottom:36px;}
  .hero{padding:var(--space-md) 0 40px 0;}
}


/* --- FOOTER --- */
footer{
  background:linear-gradient(90deg,#132026 0 70%,#173638 100%);
  color:var(--color-accent);
  padding:var(--space-lg) 0 var(--space-md) 0;
  box-shadow:0 -3px 16px 0 #20716C15;
}
footer .container{padding-bottom:var(--space-md);}
footer .content-wrapper{flex-direction:column;align-items:flex-start;gap:var(--space-md);}
.footer-menu{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-md);
  margin-bottom:var(--space-md);
}
.footer-menu a{
  color:var(--color-secondary);
  font-size:1rem;
  font-family:var(--font-body);
  padding:6px 0;
  transition:color 0.18s;
}
.footer-menu a:hover{color:var(--color-accent);}
.contact-info{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  color:var(--color-secondary);
  font-size:0.96rem;
}
.contact-info img{height:22px;width:auto;margin-right:3px;vertical-align:middle;}
.social-links{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  margin-top:var(--space-sm);
}
.social-links a img{height:30px;transition:filter 0.17s;filter:brightness(1.2) drop-shadow(0 0 8px #27ffe9cc);}
.social-links a:hover img{filter:brightness(2.1) drop-shadow(0 0 16px #f7cb6e);}

@media (max-width:900px){
  footer .content-wrapper,.footer-menu,.contact-info,.social-links{flex-direction:column;align-items:flex-start;gap:14px;}
}

/* --- CONTACT INFO/DETAILS --- */
.contact-details, .map-location {
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
  margin-bottom:var(--space-md);
  color:var(--color-accent);
}
.contact-details img{height:20px;width:20px;margin-right:7px;vertical-align:middle;}
.map-location {font-style:italic;}

/* --- CARD COMPONENTS --- */
.card-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--space-sm);
}

/* --- TABLES --- */
table{
  width:100%;
  border-collapse:collapse;
  background:var(--color-surface-light);
  border-radius:var(--radius-sm);
  overflow:hidden;
  margin-bottom:var(--space-md);
  box-shadow:0 2px 9px 0 #20716C12;
}
th,td{
  padding:14px 10px;
  text-align:left;
}
th{color:var(--color-secondary);font-weight:700;font-size:1.06rem;}
tr:nth-child(even){background:#192d2c;}

/* --- FORM ELEMENTS --- */
input, textarea, select{
  background:rgba(21,34,38,0.96);
  color:var(--color-accent);
  padding:10px 15px;
  border:2px solid var(--color-primary);
  border-radius:var(--radius-sm);
  font-size:1rem;
  margin-bottom:var(--space-sm);
  width:100%;
  transition:border-color 0.18s,box-shadow 0.17s;
}
input:focus, textarea:focus, select:focus{
  border-color:var(--color-secondary);
  box-shadow:0 0 0 3px #F7CB6E44;
}
button{
  font-family:var(--font-display);font-weight:600;
  border:none;
  border-radius:var(--radius-sm);
  padding:11px 28px;
  background:var(--color-secondary);
  color:var(--color-primary);
  box-shadow:0 2px 10px #20716C25;
  cursor:pointer;
  margin-top:var(--space-sm);
  transition:background 0.18s,color 0.18s;
}
button:hover, button:focus{background:var(--color-primary);color:var(--color-secondary);}

/* --- COOKIE CONSENT BANNER --- */
.cookie-banner {
  position:fixed;
  left:0;right:0;bottom:0;
  width:100vw;
  z-index:1100;
  background:var(--color-bg-gradient);
  border-top:3px solid var(--color-secondary);
  box-shadow:0 -2px 14px 0 #101B1E90;
  color:var(--color-accent);
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md);
  padding:18px var(--space-lg);
  font-size:1rem;
  animation:cookie-fadein 0.6s;
}
@keyframes cookie-fadein{0%{transform:translateY(100px);opacity:0;}100%{transform:translateY(0);opacity:1;}}
.cookie-banner p{flex:1 1 200px;}
.cookie-buttons{
  display:flex;
  gap:var(--space-sm);
  flex-wrap:wrap;
}
.cookie-buttons .cookie-btn{
  padding:8px 22px;
  border-radius:var(--radius-sm);
  border:none;
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:600;
  margin-left:2px;
  cursor:pointer;
  transition:background 0.16s,color 0.16s;
}
.cookie-btn.accept{background:var(--color-success);color:#07392A;}
.cookie-btn.accept:hover{background:var(--color-secondary);color:var(--color-primary);}
.cookie-btn.reject{background:var(--color-danger);color:#fff;}
.cookie-btn.reject:hover{background:var(--color-accent);color:var(--color-danger);}
.cookie-btn.settings{background:var(--color-secondary);color:var(--color-primary);}
.cookie-btn.settings:hover{background:var(--color-primary);color:var(--color-secondary);}

/* --- COOKIE MODAL --- */
.cookie-modal-overlay{
  position:fixed;
  left:0;top:0;width:100vw;height:100vh;
  background:rgba(14,21,32,0.86);
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity 0.36s;
}
.cookie-modal-overlay.open{opacity:1;pointer-events:auto;}
.cookie-modal{
  background:var(--color-surface);
  color:var(--color-accent);
  border-radius:var(--radius);
  min-width:300px;max-width:98vw;
  box-shadow:0 10px 40px #000a,0 0 12px #27ffe966;
  padding:var(--space-lg) var(--space-md);
  display:flex;flex-direction:column;
  gap:var(--space-md);
  animation:modal-popin 0.32s;
  position:relative;
}
@keyframes modal-popin{0%{transform:scale(0.88);opacity:0;}100%{transform:scale(1);opacity:1;}}
.cookie-modal h3{color:var(--color-secondary);margin-bottom:6px;}
.cookie-modal .cookie-category{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs);
  margin-bottom:10px;
}
.cookie-modal .cookie-switch{
  display:inline-block;
  position:relative;width:44px;height:24px;
}
.cookie-modal .cookie-switch input[type="checkbox"]{
  opacity:0;width:44px;height:24px;position:absolute;top:0;left:0;z-index:2;cursor:pointer;
}
.cookie-modal .slider{
  display:block;
  width:44px;height:24px;
  border-radius:24px;background:#2e5765;border:2px solid #20716C;
  transition:background 0.18s;
  position:relative;
}
.cookie-modal .slider:before{
  content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;
  background:var(--color-secondary);border-radius:50%;transition:transform .19s,background .17s;
  box-shadow:0 2px 6px #F7CB6E99;
}
.cookie-modal .cookie-switch input:checked+.slider{background:var(--color-success);}
.cookie-modal .cookie-switch input:checked+.slider:before{transform:translateX(18px);background:#00e1c5;}
.cookie-modal .cookie-switch input:disabled+.slider{background:#174043;filter:grayscale(50%);}
.cookie-modal .modal-actions {
  display:flex;gap:var(--space-md);justify-content:flex-end;align-items:center;margin-top:var(--space-sm);
}
.cookie-modal .modal-close-btn{
  position:absolute;top:10px;right:12px;background:none;border:none;font-size:1.8rem;color:var(--color-secondary);cursor:pointer;transition:color 0.18s;}
.cookie-modal .modal-close-btn:hover{color:var(--color-danger);}

@media (max-width: 600px) {
  .cookie-modal{min-width:0;padding:var(--space-md) var(--space-sm);}
  .cookie-banner{flex-direction:column;padding:12px var(--space-sm);gap:15px;}
}

/* --- STATE/INTERACTIONS --- */
::-webkit-scrollbar {width:8px;background:#172229;}
::-webkit-scrollbar-thumb {background:var(--color-primary);border-radius:var(--radius-sm);}
::-webkit-selection {background:var(--color-secondary);color:var(--color-primary);}
::selection {background:var(--color-secondary);color:var(--color-primary);}

/* --- ANIMATIONS --- */
.btn-primary,.btn-secondary,button,nav a,.feature,.card,.testimonial-card{transition:all 0.22s cubic-bezier(.36,.07,.19,.97);}

/* --- CUSTOM UTILITIES & EXTRAS --- */
.mt-0{margin-top:0!important;}
.mb-0{margin-bottom:0!important;}
.mb-md{margin-bottom:var(--space-md)!important;}
.mt-md{margin-top:var(--space-md)!important;}
.text-center{text-align:center!important;}
.text-right{text-align:right!important;}

/* --- END OF STYLE.CSS --- */