/* 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,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; vertical-align:baseline; box-sizing:border-box;
}
html { scroll-behavior:smooth; }
body { line-height:1; background:#10151A; color:#F4DCB6; }
ol, ul { list-style:none; }
a { color:inherit; text-decoration:none; background:transparent; transition:color .2s; }
img { max-width:100%; height:auto; display:block; }
button, input, select, textarea { font:inherit; }
button { background:none; border:none; cursor:pointer; }

/* Brand Fonts */
@import url('https://fonts.googleapis.com/css?family=Montserrat:700,500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600&display=swap');

body { font-family: 'Open Sans', Arial, sans-serif; font-size:16px; background-color:#10151A; color:#F4DCB6; }
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', Arial, sans-serif; font-weight:700; color:#fff; letter-spacing:0.02em; }
h1 { font-size:2.5rem; line-height:1.15; margin-bottom:24px; }
h2 { font-size:2rem; line-height:1.2; margin-bottom:20px; }
h3 { font-size:1.25rem; margin-bottom:8px; color:#F4DCB6; }

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

/* Utility classes */
.container {
  width:100%; max-width:1160px; margin:0 auto; padding:0 20px;
}
.content-wrapper {
  display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between;
}
.text-section { flex-direction:column; align-items:flex-start; }
.feature-grid {
  display: flex; flex-wrap: wrap; gap: 32px; justify-content: flex-start;
}
@media (max-width:868px){
  .feature-grid{ gap:20px;}
}

/* Layout Sections */
section { margin-bottom:60px; padding:40px 0 40px 0; background:transparent; position:relative; }
@media (max-width:768px){ section { padding:32px 0; margin-bottom:40px; } }

.card-container { display:flex; flex-wrap:wrap; gap:24px; }
.card { margin-bottom:20px; position:relative; background:#192c25; border-radius:18px; box-shadow:0 2px 12px 0 rgba(27, 207, 160, 0.08); padding:32px; transition:box-shadow .2s, transform .2s; }
.card:hover, .card:focus-within { box-shadow:0 8px 32px 0 rgba(64,255,189,0.25), 0 2px 12px 0 rgba(27, 207, 160, 0.12); transform:translateY(-4px) scale(1.015); z-index:2; }

.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 32px; background:#fff; color:#15443B; border-radius:15px; box-shadow:0 2px 16px rgba(27,207,160,0.09); margin-bottom:20px; min-width:250px; max-width:410px; transition:box-shadow .22s, transform .18s;
}
.testimonial-card:hover { box-shadow:0 8px 32px rgba(76,255,201,0.13); transform:translateY(-2px) scale(1.012); }
.testimonial-card strong { color:#15443B; }
.testimonial-card img { height: 24px; margin-right:2px; }
.testimonial-card p { margin-bottom:0; }

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

/* Buttons */
.cta-primary, .btn, .cookie-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Montserrat',Arial,sans-serif; font-weight:600;
  font-size:1.125rem;
  padding:13px 32px;
  background:#15443B; color:#F4DCB6;
  border:none; border-radius:30px;
  box-shadow:0 2px 18px 0 rgba(26,255,190,0.08);
  transition:background .2s,color .2s,box-shadow .18s,transform .18s;
  cursor:pointer; margin-top:16px; text-decoration:none;
}
.cta-primary:hover,.btn:hover, .cookie-btn:hover {
  background:#639A88; color:#10151A; box-shadow:0 8px 32px 0 rgba(52,255,186,0.12); transform:translateY(-2px) scale(1.01); }

/* Accent underline for links */
.text-section a:not(.cta-primary) {
  color: #F4DCB6; border-bottom:2px solid #639A88; padding-bottom:2px; transition:border .17s;
}
.text-section a:not(.cta-primary):hover { color:#639A88; border-bottom-color:#F4DCB6; }

/* Neon border effect */
.card, .testimonial-card, .feature-item, .content-wrapper > div {
  border: 1.5px solid rgba(99,154,136,0.10);
  box-shadow: 0 1px 18px 0 rgba(53,255,186,0.06);
}
.card:hover, .testimonial-card:hover, .feature-item:hover, .content-wrapper > div:hover {
  border-color:#639A88;
}

/* Section backgrounds */
section:nth-child(even) { background:#13211b; } /* subtle tech blocks */
section:nth-child(odd) { background: #10151A; }

/* Header & Navigation */
header{ width:100%; background:#10151A; border-bottom:1px solid rgba(153,230,212,0.07); position:relative; z-index:990; }
header .container { display:flex; align-items:center; justify-content:space-between; padding:19px 20px; min-height:86px; }
header nav { display:flex; gap:24px; }
header nav a { font-family:'Montserrat',Arial,sans-serif; font-weight:600; font-size:1rem; color:#F4DCB6; transition:color .17s; position:relative; padding:4px 0; }
header nav a:after { content:''; display:block; width:0; border-bottom:2px solid #639A88; transition:width .2s; }
header nav a:hover, header nav a:focus { color:#F4DCB6; }
header nav a:hover:after, header nav a:focus:after { width:100%; }
header img { height:44px; margin-right:18px; }

/* Hide mobile nav by default on desktop */
.mobile-menu-toggle { display:none; position:absolute; top:24px; right:28px; z-index:1001; background: #13211b; color: #F4DCB6; font-size:2.3rem; border-radius:50%; padding:7px; border:none; box-shadow:0 4px 22px rgba(27,207,160,0.07); transition:background 0.2s; }
.mobile-menu-toggle:focus,.mobile-menu-toggle:hover { background: #639A88; color:#10151A; }

.mobile-menu { display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(21,68,59,0.99); box-shadow:0 13px 44px rgba(26,255,190,0.09); z-index:1200;
  transform:translateX(100%); transition:transform .34s cubic-bezier(.86,.01,.31,1); flex-direction:column; justify-content:flex-start; }
.mobile-menu.open { display:flex; transform:translateX(0); }
.mobile-menu-close {
  position:absolute; top:22px; right:28px; font-size:2.1rem; background: #15443B; color: #F4DCB6; border-radius:50%; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border:none; box-shadow:0 2px 12px 0 rgba(27,207,160,0.12); transition:background .17s; z-index:1202;
}
.mobile-menu-close:focus,.mobile-menu-close:hover { background:#639A88; color:#10151A; }
.mobile-nav {
  display:flex; flex-direction:column; gap:26px; align-items:flex-start; margin:110px 0 0 38px;
}
.mobile-nav a {
  font-family:'Montserrat',Arial,sans-serif; color:#F4DCB6; background: none;
  font-size:1.32rem; font-weight:600; text-align:left; padding:8px 0; letter-spacing:.02em;
  border-bottom:2px solid transparent; transition:border .14s,color .15s;
}
.mobile-nav a:hover,.mobile-nav a:focus { color:#F4DCB6; border-bottom:2px solid #F4DCB6; }
@media (max-width: 1000px) {
  header nav { display:none; }
  .mobile-menu-toggle { display:block; }
}
@media (max-width: 768px) {
  .container{ padding:0 12px; }
}

/* Footer */
footer { background:#13211b; color:#639A88; border-top:1.5px solid rgba(99,154,136,0.08); padding:42px 0 24px 0; font-size:0.98rem; letter-spacing:.01em; }
footer .container { display:flex; flex-wrap:wrap; gap:32px; align-items:flex-start; justify-content:space-between; }
footer a img { height:46px; margin-bottom:14px; }
footer nav{display:flex; flex-direction:column; gap:7px;}
footer nav a{
  color: #f4dcB6;
  padding-bottom:2px; border-bottom:1.5px solid transparent; transition: border .16s, color .15s; font-weight:600;
}
footer nav a:hover, footer nav a:focus { color: #639A88; border-bottom:1.5px solid #639A88; }
.footer-contact{display:flex; flex-direction:column; gap:8px; color:#ADCDBF; font-size:.97rem;}
@media (max-width:700px){footer .container{flex-direction:column; gap:22px;align-items:flex-start;}}
footer p{margin-bottom:2px; color:#8DD9C0;line-height:1.5;}

/* Support block icons */
.support { margin-top:20px; display:flex; flex-direction:column; gap:8px; color:#F4DCB6; font-size:.98rem; align-items:flex-start; }
.support img { height:20px; margin-right:6px; vertical-align:middle; display:inline-block; }

/* FAQ, Lists, etc. */
.text-section ul, .text-section ol {
  padding-left:0; margin:0 0 20px 0; display:flex; flex-direction:column; gap:12px;
}
.text-section ul li, .text-section ol li {
  padding-left:0; position:relative; color:#f6f8f6; background:rgba(56,255,189,0.04); border-radius:9px; padding:8px 14px; line-height:1.6; }
.text-section ul li:before { content:'● '; color:#639A88; font-size:.88em; padding-right:5px; }
.text-section ol li { counter-increment:ol-list; }
.text-section ol { counter-reset: ol-list; }
.text-section ol li:before { content:counter(ol-list)'. '; color:#639A88; font-weight:700; font-size:.97em; }

.text-section strong{color:#15443B; font-weight:bold;}

/* Responsive Columns for Card/Feature Grids */
.feature-grid > div {
  min-width:260px; max-width:360px; background:rgba(21,68,59,0.94); color:#F4DCB6; border-radius:17px; box-shadow:0 2px 14px 0 rgba(27, 207, 160, 0.06); padding:28px 18px 24px 18px;
  display:flex; flex-direction:column; align-items:flex-start; gap:18px; transition:box-shadow .18s,background .17s,border-color .16s;
}
.feature-grid > div img { width:42px; height:42px; margin-bottom:10px; filter: drop-shadow(0 0 5px #41ffe7c0);
}
.feature-grid > div h3 { font-size:1.15rem; color:#F4DCB6; font-weight:700; margin-bottom:8px; }
.feature-grid > div p { font-size:.98rem; margin-bottom:6px; color:#ADCDBF; }
.feature-grid > div a { font-size:.99rem; color:#3aeabd; text-decoration:underline; margin-top:8px; }
.feature-grid > div:hover, .feature-grid > div:focus-within {
 background:rgba(39,220,175,0.13); box-shadow:0 8px 32px 0 rgba(64,255,189,0.12); border-color:#3AEDBF;
}

@media (max-width:1100px) {
  .feature-grid > div { min-width:44vw; max-width:100%; }
}
@media (max-width:768px){
  .feature-grid { flex-direction:column; gap:18px; }
  .feature-grid > div {min-width:0; width:100%; max-width:100%;}
}

/* For .text-image-section */
@media (max-width: 768px) {
  .text-image-section { flex-direction:column; align-items:flex-start; gap:20px; }
}

/* Cookie consent banner */
.cookie-banner {
  width:100vw; position:fixed; left:0; bottom:0; z-index:8000; padding:22px 8px 22px 20px; background:#13211b; color:#F4DCB6; font-size:1rem; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:24px; box-shadow:0 -2px 24px 0 rgba(27,207,160,0.09); transition:transform .33s cubic-bezier(.75,.01,.46,1); border-radius:21px 21px 0 0;
  border-top:1.5px solid #639A88;
}
.cookie-banner.hide{ transform:translateY(110%); pointer-events:none; }
.cookie-banner .cookie-btn {
  font-size:.97rem; padding:9px 26px; border-radius:22px; background:#639A88; color:#10151A; box-shadow:0 1px 9px rgba(91,255,196,0.12);
  font-weight:700; margin-right:10px; transition: background .17s, color .17s, transform .12s;
}
.cookie-banner .cookie-btn:hover { background:#F4DCB6; color:#13211b; transform:scale(1.04); }

@media(max-width:700px){
  .cookie-banner { flex-direction:column; align-items:flex-start; padding:17px 8px 17px 12px; gap:12px; }
}

/* Cookie modal */
.cookie-modal-overlay {
  position:fixed; left:0; top:0; width:100vw; height:100vh; background:rgba(21,68,59,0.81); z-index:9200; display:none; align-items:center; justify-content:center; transition:background .2s; }
.cookie-modal-overlay.open{display:flex;}
.cookie-modal {
  background:#10151A; color:#F4DCB6; border-radius:18px; box-shadow:0 12px 44px 0 rgba(52,255,186,0.25);
  max-width:440px; padding:36px 28px 28px 28px; display:flex; flex-direction:column; gap:16px; border:2px solid #639A88; position:relative;
}
.cookie-modal h3{font-family:'Montserrat',Arial,sans-serif; font-size:1.24rem; margin-bottom:11px;}
.cookie-modal label{display:flex; align-items:center; gap:9px; font-size:.98rem; margin-bottom:8px; cursor:pointer; }
.cookie-modal input[type=checkbox]{ accent-color:#639A88; width:19px; height:19px; margin-right:6px; }
.cookie-category{margin-bottom:10px;}
.cookie-category.essential label{ color:#8DD9C0; }
.cookie-modal .cookie-btn{margin-top:15px; margin-bottom:2px;}
.cookie-modal-close {
  position:absolute; top:12px; right:15px; background:#15443B; color:#F4DCB6; border:none; font-size:1.6rem; border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .14s;}
.cookie-modal-close:hover { background:#639A88; color:#10151A; }

/* Animations */
@keyframes fade-in-up {
  0%{opacity:0; transform:translateY(16px);}
  100%{opacity:1; transform:translateY(0);}
}
section, .feature-grid > div, .testimonial-card, .card {
  animation: fade-in-up .88s cubic-bezier(.15,.99,.41,.99) both;
}

/* Accessibility/Contrast */
.testimonial-card { background:#fff; color:#15443B; box-shadow:0 2px 12px rgba(27,207,160,0.07);}
.testimonial-card strong { color:#15443B; }
.testimonial-card p { color:#15443B; }

/* Typography hierarchy */
p { margin-bottom: 15px; font-size:1.01rem; line-height:1.7; color:#ADCDBF; }
a { transition: color .18s; }

/* Responsive general spacing & sizing */
@media (max-width: 900px) {
  .container{ max-width: 96vw; }
  section > .container, footer .container { padding:0 11px; }
}
@media (max-width:480px){
  h1{ font-size:1.32rem;}
  .testimonial-card,.card{ padding:11px 7px 15px 9px; font-size:.98rem; }
  .feature-grid>div{ padding:12px 6px; }
}

/* Custom selection */
::selection { background: #3AEDBF; color:#15443B; }

/* Hide no-js menu fallback */
.no-js .mobile-menu { display:none!important; }

/* Accessibility focus ring */
:focus-visible { outline:2.5px solid #3AEABD; outline-offset:2px; }

/* Misc fix: last child margin */
section:last-child { margin-bottom: 0; }

/* --- END --- */