/* --- CSS RESET AND NORMALIZATION --- */
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,menu,nav,output,ruby,section,summary,time,mark,audio,video {
 margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
 display:block;
}
body {
 line-height:1; background:#181E27; color:#F6F2ED;
}
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }

/* --- VARIABLES AND FALLBACKS --- */
:root {
  --primary: #6A462F;
  --secondary: #338068;
  --accent: #F6F2ED;
  --background: #181E27;
  --surface: #232B36;
  --neon-green: #6af7b5;
  --neon-blue: #10E4F7;
  --neon-yellow: #ffe249;
  --error: #ff3259;
  --shadow: 0 8px 20px 0 rgba(16, 228, 247, 0.10);
  --radius: 14px;
  --radius-lg: 22px;
  --transition: 0.22s cubic-bezier(.72,.12,.19,.96);
  --font-display: 'Roboto Slab', serif;
  --font-body: 'Montserrat', Arial, sans-serif;
}

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab'), local('RobotoSlab-Regular'),
    url('https://fonts.gstatic.com/s/robotoslab/v36/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat'), local('Montserrat-Regular'),
    url('https://fonts.gstatic.com/s/montserrat/v26/JTUQjIg1_i6t8kCHKm459WlhzQ.woff2') format('woff2');
}

/* --- BASE TYPOGRAPHY --- */
body {
  font-family: var(--font-body);
  font-size: 16px;
  background: linear-gradient(120deg, #181E27 0%, #232B36 100%);
  color: var(--accent);
}
h1,h2,h3,h4,h5,h6 {
 font-family: var(--font-display);
 color: var(--accent);
 letter-spacing: 0.5px;
}
h1 { font-size: 2.75rem; font-weight:700; margin-bottom:16px; }
h2 { font-size: 2.0rem; margin-bottom:14px; font-weight:600; }
h3 { font-size: 1.4rem; margin-bottom:12px; font-weight:600; }
h4,h5,h6 { font-size: 1.1rem; margin-bottom:8px; font-weight:600; }
p,li,ul,ol,blockquote,em,strong,span {
 font-family: var(--font-body);
 font-size: 16px;
 letter-spacing: 0.02em;
}
p { margin-bottom: 16px; line-height:1.6; }
.subheadline { font-size:18px; opacity:0.96; margin-bottom: 24px; }
strong { font-weight:700; }
em { color:var(--secondary); font-style:italic; }
a { color: var(--neon-blue); text-decoration:none; transition:color var(--transition); }
a:hover,a:focus { color: var(--neon-green); text-decoration:underline; }

/* --- LAYOUT CONTAINERS --- */
.container {
  max-width:1360px; margin:0 auto; padding:0 20px; box-sizing:border-box;
}
.content-wrapper {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}

.section {
 margin-bottom:60px; padding:40px 20px; background: rgba(35, 43, 54, 0.97); border-radius: var(--radius-lg);
 box-shadow:var(--shadow);
}

.card-container {
  display:flex; flex-wrap:wrap; gap:24px; margin-bottom:20px;
}
.card {
 background: var(--surface); border-radius:var(--radius); margin-bottom:20px; box-shadow: var(--shadow);
 padding:28px 24px; display:flex; flex-direction:column; position:relative;
 border:2px solid var(--secondary);
 transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card:hover {
  border-color:var(--neon-blue);
  box-shadow:0 4px 32px 0 rgba(16, 228, 247, 0.17);
  transform: translateY(-5px) scale(1.020);
}

.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 26px; margin-bottom:20px; background: #F6F2ED;
  color: #191919; border-radius:var(--radius); box-shadow:0 3px 18px 0 rgba(16,228,247,0.098);
  border-left: 4px solid var(--neon-blue);
  min-width:260px;
  transition:box-shadow var(--transition), border-color var(--transition);
}
.testimonial-card:hover {
  box-shadow: 0 6px 28px 0 rgba(16,228,247,0.19);
  border-left: 4px solid var(--neon-green);
}
.testimonial-card span {
  font-weight:600; opacity:0.82; margin-bottom:2px;
}
.testimonial-card div {
  font-size:1.1rem; font-weight:bold; color:var(--secondary);
}

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

/* --- HEADER & NAVIGATION --- */
header {
  background: rgba(24, 30, 39, 0.95); position: relative; box-shadow:0 4px 24px 0 rgba(16, 228, 247, 0.09);
}
header .container {
  display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px;
}
header nav {
  display: flex; gap:28px;
  margin-left:20px;
}
header nav a {
  color:var(--accent); font-weight:500; font-size:16px; letter-spacing:0.04em;
  padding:6px 0; border-bottom:2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  position: relative;
}
header nav a:hover, header nav a:focus {
  color:var(--neon-blue); border-bottom:2px solid var(--neon-blue);
}
.cta-button {
  background:linear-gradient(90deg, var(--neon-green) 15%, var(--neon-blue) 100%);
  color:#181E27; padding:12px 32px; border:none; border-radius:50px; font-family:var(--font-display);
  font-size:1.10rem; font-weight:600; box-shadow:0 2px 12px 0 rgba(16, 228, 247, 0.13);
  letter-spacing:0.05em; cursor:pointer; outline:none; margin-left:26px; transition: box-shadow var(--transition), background var(--transition), color var(--transition); position:relative;
}
.cta-button:hover, .cta-button:focus {
  background:linear-gradient(90deg, var(--neon-blue) 5%, var(--neon-green) 98%);
  box-shadow:0 0 0 4px var(--neon-blue), 0 10px 32px 0 rgba(106,247,181,0.12);
  color:var(--primary);
}

/* --- MOBILE MENU --- */
.mobile-menu-toggle {
  display:none; position:absolute; top:25px; right:25px; font-size:2rem; background:none; border:none;
  color:var(--neon-green); z-index:888; padding:8px 12px; cursor:pointer; outline:none;
  transition: color var(--transition), background var(--transition);
}
.mobile-menu-toggle:focus,.mobile-menu-toggle:hover {
  background:rgba(16,228,247,0.04); color:var(--neon-blue);
  border-radius:50%;
}
.mobile-menu {
  position:fixed; top:0; right:0; height:100vh; width:100vw; background:rgba(24,30,39,0.98);
  z-index:1000; display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform 0.36s cubic-bezier(.98,.16,.18,.96),opacity 0.28s;
  opacity:1; box-shadow:-10px 0 45px 0 rgba(16,228,247,0.12);
}
.mobile-menu.open {
  transform:translateX(0%); opacity:1;
}
.mobile-menu-close {
  background:none; color:var(--neon-yellow); border:none; font-size:2.1rem;
  position:absolute; top:26px; right:24px; z-index:1025; cursor:pointer;
  transition:color var(--transition); padding:10px;
}
.mobile-menu-close:focus, .mobile-menu-close:hover {
  color:var(--error); background:rgba(255,50,89,0.09); border-radius:50%;
}
.mobile-nav {
  width:100%; display:flex; flex-direction:column; align-items:center; gap:26px; padding-top:100px; /*ensure below close*/
}
.mobile-nav a {
  color:var(--accent); font-size:1.25rem; letter-spacing:0.06em;
  font-family:var(--font-display); padding:15px 38px;
  border-radius: var(--radius);
  transition:background var(--transition),color var(--transition),box-shadow var(--transition);
}
.mobile-nav a:hover, .mobile-nav a:focus {
  background:rgba(16,228,247,0.12); color:var(--neon-blue); box-shadow:0 2px 24px 0 rgba(16,228,247,0.10);
}

/* --- MAIN SECTIONS / CARDS / FEATURE --- */
main {
  min-height:60vh; /*for sticky footer*/
  padding-bottom:64px;
}
section {
  margin-bottom:60px; padding:40px 0; width:100%;
  display:flex; flex-direction:column; align-items:center;
}
section .container { width:100%; }
section .content-wrapper > * { margin-bottom:12px; }
section .content-wrapper > *:last-child { margin-bottom:0; }

/* --- LIST STYLES --- */
ul, ol {
  margin-bottom:14px; margin-top:4px;
  padding-left:22px;
}
ul li, ol li {
  margin-bottom:10px; line-height:1.6; font-size: 16px;
}
ul li::before {
  content:""; display:inline-block; width:8px; height:8px;
  border-radius: 3px; background:var(--neon-blue);
  margin-right:12px; margin-left:-20px;
  box-shadow:0 0 8px 1px var(--neon-blue);
  vertical-align:middle;
}
ol li::before {
  display:none;
}

/* --- BUTTON STYLES --- */
button, .cta-button {
  font-family:var(--font-display); outline:none; border:none; cursor:pointer;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
button {
  background:var(--secondary); color:var(--accent); padding:10px 28px; border-radius:var(--radius);
  font-size:16px; font-weight:600; letter-spacing:0.04em; box-shadow:0 2px 12px rgba(51,128,104,0.12); margin-top:8px;
}
button:hover, button:focus {
  background:var(--primary); color:var(--neon-yellow); box-shadow:0 3px 24px 0 rgba(106,247,181,0.11);
}

/* --- FOOTER --- */
footer {
  background:rgba(35,43,54,0.995); margin-top: 0; box-shadow:0 -8px 32px 0 rgba(16,228,247,0.07);
  padding-top: 38px; padding-bottom: 36px;
}
footer .container {
  display: flex; flex-direction: column; align-items: center; gap:24px;
}
footer .content-wrapper {
  display:flex; flex-wrap: wrap; gap:38px; justify-content:center; align-items:flex-start;
  width:100%;
}
footer nav {
  display:flex; flex-direction:column; gap:8px; min-width:120px; margin-bottom:0;
}
footer nav a {
  color:var(--accent); opacity:0.78; font-size:15px; font-family:var(--font-body);
  padding:3px 0;
}
footer nav a:hover,footer nav a:focus{ color:var(--neon-blue); opacity:1; }
footer ul { display:flex; flex-direction:column; gap:2px; min-width:158px; }
footer ul a { color:var(--neon-blue); font-size:15px; opacity:1; }
footer ul a:hover { color:var(--neon-green); text-decoration:underline; }
footer div { font-size:14px; opacity:0.84; }
footer img { max-height:34px; margin-bottom:8px; }

/* --- FORM/LIST SUPPORT --- */
input, textarea, select {
  width:100%; max-width:440px; background:rgba(246,242,237,0.95); color: #181E27; border:2px solid var(--secondary); border-radius:var(--radius);
  font-size:16px; padding:13px 14px; margin-bottom: 12px; font-family:var(--font-body);
  box-shadow:0 2px 14px 0 rgba(16,228,247,0.04);
  transition: border var(--transition), box-shadow var(--transition);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--neon-blue);
  box-shadow:0 0 0 2px var(--neon-blue);
}

/* --- CARD/CTA --- */
.card-content {
 display:flex; flex-direction:column; justify-content:center; gap:16px;
}

/* --- ANIMATIONS & MICRO-INTERACTIONS --- */
.cta-button,
button,
a {
  transition: background var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition), transform var(--transition), opacity var(--transition);
}
.card, .testimonial-card {
  transition:box-shadow var(--transition), border-color var(--transition), transform var(--transition), background var(--transition), color var(--transition);
}
.mobile-menu, .mobile-menu-toggle, .mobile-menu-close, .mobile-nav a {
  transition:background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}

/* --- COOKIE CONSENT BANNER --- */
.cookie-banner {
  position:fixed; left:0; right:0; bottom:0; z-index:3000;
  background:rgba(24,30,39,0.97); color:var(--accent);
  box-shadow:0 -2px 26px 0 rgba(16,228,247,0.17);
  padding: 26px 20px; display: flex;
  flex-direction: row; align-items: center; gap: 18px; justify-content: center;
  font-size: 16px; border-top: 2px solid var(--neon-blue);
  opacity:1; transform: translateY(0); pointer-events:auto;
  transition: opacity 0.36s var(--transition), transform 0.44s cubic-bezier(.69,-0.01,.39,1.21);
}
.cookie-banner.hide {
  opacity:0; transform: translateY(100px); pointer-events:none;
}
.cookie-banner .cookie-actions {
  display:flex; flex-wrap:wrap; gap:14px; margin-left:10px; align-items:center;
}
.cookie-banner button {
  background:var(--neon-green); color:#181E27; padding:9px 22px; border-radius:33px; font-family:var(--font-body);
  font-size:15px; font-weight:500; margin:0; box-shadow:0 2px 6px 0 rgba(16,228,247,0.11); border: none;
}
.cookie-banner .cookie-reject {
  background: var(--primary); color: var(--accent);
}
.cookie-banner .cookie-settings {
  background: var(--neon-blue); color:#181E27;
}
.cookie-banner button:hover, .cookie-banner button:focus {
  filter: brightness(1.09);
  background: linear-gradient(91deg,var(--neon-blue),var(--neon-green));
  color:var(--primary);
}

/* --- COOKIE SETTINGS MODAL --- */
.cookie-modal {
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(1); z-index:3200;
  background:#232B36; color:var(--accent); border-radius:var(--radius-lg);
  box-shadow:0 8px 38px 0 rgba(16,228,247,0.17);
  padding: 38px 26px 32px 26px; min-width:310px; min-height:180px;
  opacity:1; transition: opacity 0.27s var(--transition), transform 0.34s;
  display:flex; flex-direction:column; gap:22px;
}
.cookie-modal.hide { opacity:0; pointer-events:none; transform:scale(0.87) translate(-50%,-50%); }
.cookie-modal h2 {
  font-size:1.35rem; color:var(--neon-blue); margin-bottom:10px;
}
.cookie-modal .cookie-category {
  display:flex; align-items:center; gap:16px; margin-bottom:12px;
}
.cookie-modal label {
  font-size:1rem; color:var(--accent); margin-left:3px;
}
.cookie-modal input[type="checkbox"] {
  accent-color:var(--neon-green); width:20px; height:20px;
}
.cookie-modal .cookie-close {
  position:absolute; top:13px; right:20px; background:none; border:none; color:var(--neon-yellow); font-size:1.4rem; cursor:pointer;
  transition:color var(--transition),background var(--transition);
}
.cookie-modal .cookie-close:hover,.cookie-modal .cookie-close:focus{ color:var(--error); background: rgba(255,50,89,0.17); border-radius:50%; }

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 1100px) {
  header .container, footer .content-wrapper { flex-wrap:wrap; gap:20px; }
}
@media (max-width: 900px) {
  .header .container { flex-direction:column; gap:20px; }
  footer .content-wrapper { flex-direction:column; align-items:center; gap:22px; }
}
@media (max-width: 768px) {
  .container { padding: 0 8px; }
  h1 { font-size:2rem; }
  h2 { font-size:1.4rem; }
  main { padding-bottom:38px; }
  section { margin-bottom:40px; padding:22px 0; }
  .section { padding:22px 10px; margin-bottom:32px; }
  .content-wrapper { gap:14px; }
  .card-container, .content-grid { gap:12px; }
  .testimonial-card, .card { padding:18px 12px; min-width:0; }
  footer .content-wrapper { flex-direction:column; gap:20px; }
  header .container { flex-direction:row; }
  header nav, .cta-button { display: none; }
  .mobile-menu-toggle { display: block; }
}
@media (max-width: 580px) {
  .testimonial-card, .card { font-size:15px; padding: 13px 6px; }
  .cookie-banner { font-size:14px; padding:16px 5px; }
  .cookie-modal { padding:22px 7px; min-width:210px; }
}
/* --- FLEX ONLY: ENFORCE PROPER GAPS AND SPACING --- */
.section, section, .card-container, .card, .content-grid, .text-image-section, .testimonial-card, .feature-item {
  gap: 20px;
}
.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; }

/* --- SPECIAL VISUAL EFFECTS: NEON --- */
.cta-button:before {
  content: ''; display: block; position: absolute; left:-6px; top:-6px; right:-6px; bottom:-6px;
  border-radius: 60px;
  box-shadow: 0 0 16px 4px var(--neon-blue), 0 0 28px 10px var(--neon-green);
  opacity:0.20; z-index:0;
  pointer-events:none;
  transition: opacity var(--transition);
}
.cta-button:hover:before { opacity:0.32; }

/* --- UTILITY --- */
.hidden { display: none !important; }

/* Accessibility: Always strong contrast for testimonials/reviews */
.testimonial-card p, .testimonial-card span { color: #181E27 !important; }

/* Ensure no content overlaps on mobile or desktop
   and all layout containers have at least 20px gap */
.card, .testimonial-card, .feature-item, .content-grid, .card-container, .text-image-section { box-sizing: border-box; min-width:0; }

/* END STYLE --- ALL FLEXBOX, NO GRID OR COLUMNS */