/* ===== 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,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 {
font-size:16px;
line-height:1.4;
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
}
body {
font-family:'Open Sans', Arial, Helvetica, sans-serif;
background:#F4F7FA;
color:#1A2739;
font-size:1rem;
min-height:100vh;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
display:block;
}
ol,ul {
list-style:none;
}
a {
color:inherit;
text-decoration:none;
cursor:pointer;
transition:color 0.2s linear;
}
button,input,select,textarea {
font-family:inherit;
font-size:inherit;
outline:none;
border:none;
background: none;
}
img {
max-width:100%;
display:block;
height:auto;
}

:root {
--brand-primary: #273A52;
--brand-secondary: #6CB384;
--brand-accent: #F4F7FA;
--brand-vibrant-1: #10B6FA;   /* Electric blue */
--brand-vibrant-2: #EA4C89;   /* Vivid magenta */
--brand-vibrant-3: #FECF2F;   /* Energetic yellow */
--brand-dark: #1A2739;
--brand-light: #fff;
--brand-shadow: rgba(39,58,82,0.1);
--text-main: #1A2739;
--text-light: #fff;
--text-dark-on-light: #1A2739;
--text-dark-on-accent: #273A52;
}

/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4,h5,h6 {
font-family: 'Merriweather', Georgia, serif;
font-weight:900;
color: var(--brand-primary);
margin-bottom: 16px;
line-height:1.15;
}
h1 { font-size:2.125rem; letter-spacing: -1px; }
h2 { font-size:1.5rem; letter-spacing: -.5px; }
h3 { font-size:1.25rem; font-weight:700; }
h4 { font-size:1.125rem; }
@media(min-width:600px){
h1{font-size:2.75rem;}
h2{font-size:2rem;}
h3{font-size:1.5rem;}
h4{font-size:1.2rem;}
}
p,li,span,ul {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size:1rem;
color: var(--brand-primary);
}
strong { font-weight:700; }
.cta-link, .cta-btn {
font-family: 'Merriweather', serif;
font-weight:700;
letter-spacing:0.5px;
}

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

.section {
margin-bottom:60px;
padding:40px 20px;
background:var(--brand-accent);
border-radius:18px;
box-shadow:0 3px 32px var(--brand-shadow);
display: flex;
flex-direction:column;
gap:32px;
}
@media(max-width:768px){
.section{
padding:28px 10px;
margin-bottom:36px;
}
}

.card-container {
display:flex;
flex-wrap:wrap;
gap:24px;
margin-bottom:32px;
}
.card {
background:var(--brand-light);
border-radius:18px;
box-shadow:0 6px 30px rgba(16,182,250,0.09), 0 1.5px 3px var(--brand-shadow);
padding:32px 24px;
margin-bottom:20px;
display:flex;
flex-direction:column;
position:relative;
gap:16px;
transition:transform 0.21s cubic-bezier(.3,.56,.55,1.23), box-shadow 0.21s;
}
.card:hover, .card:focus-within {
transform: translateY(-7px) scale(1.035);
box-shadow:0 12px 48px rgba(234,76,137,0.12), 0 2px 8px rgba(16,182,250,0.15);
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;
}
@media(max-width:768px){
.content-grid, .text-image-section {
flex-direction:column;
}
}

.card-content {
display: flex;
flex-direction:column;
justify-content:center;
}

.testimonial-card {
display:flex;
align-items:center;
gap:20px;
padding:20px 28px;
background:var(--brand-light);
border-radius:18px;
box-shadow:0 3px 22px rgba(39,58,82,0.12);
border:1.5px solid var(--brand-vibrant-1);
margin-bottom:20px;
flex-wrap:wrap;
min-width:0;
}
.testimonial-card p {
font-size:1.025rem;
font-style:italic;
color:var(--brand-dark);
margin:0 !important;
}
.testimonial-card span {
font-weight:700;
color:var(--brand-vibrant-2);
font-size:1rem;
margin-left:auto;
}
@media(max-width:600px){
.testimonial-card{
flex-direction:column;
align-items:flex-start;
padding:16px 12px;
}
.testimonial-card span {margin-left:0; margin-top:10px;}
}

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

/* ------ FLEX SPACING REGULARITY ------ */
.features-section .feature-grid,
.about-section ul, .example-solutions-section ul, .services-grid, .benefit-list, .team-members-grid, .articles-grid, .blog-categories ul {
display:flex;
flex-wrap:wrap;
gap:24px;
}
@media(max-width:820px){
.features-section .feature-grid,
.services-grid,
.team-members-grid,
.articles-grid {
flex-direction:column;
gap:14px;
}
}
.features-section .feature-grid li, .services-grid li, .benefit-list li, .team-members-grid .team-profile, .articles-grid article {
flex:1 1 240px;
min-width:220px;
background: var(--brand-light);
border-radius:16px;
padding:28px 20px;
box-shadow:0 4px 20px var(--brand-shadow);
margin-bottom:20px;
transition: box-shadow 0.17s, transform 0.17s;
display: flex;
flex-direction:column;
gap:15px;
}
.features-section .feature-grid li:hover, .services-grid li:hover, .benefit-list li:hover, .team-members-grid .team-profile:hover, .articles-grid article:hover {
box-shadow:0 10px 36px rgba(16,182,250,0.13), 0 2.5px 7px rgba(234,76,137,0.08);
transform: translateY(-5px) scale(1.025);
z-index:2;
}
.features-section .feature-grid img, .benefit-list img {
height:44px; width:44px;
}

/* ====== NAVIGATION & HEADER ======= */
header {
background: var(--brand-light);
box-shadow:0 3px 18px var(--brand-shadow);
padding:0;
z-index:1100;
position:relative;
}
header .container {
height:82px;
flex-direction: row;
align-items:center;
gap:24px;
}
.logo img {
height:48px;
width:auto;
}
.main-nav {
display:flex;
gap:22px;
align-items:center;
margin-left:32px;
font-family:'Merriweather',serif;
font-size:1rem;
font-weight:700;
}
.main-nav a {
color: var(--brand-primary);
padding:8px 0;
border-bottom:2.5px solid transparent;
transition: border 0.18s, color 0.18s;
}
.main-nav a:hover,
.main-nav a:focus {
border-bottom:2.5px solid var(--brand-vibrant-2);
color: var(--brand-vibrant-2);
}
.cta-btn {
display:inline-block;
background: linear-gradient(90deg, var(--brand-vibrant-1), var(--brand-vibrant-2));
color:var(--brand-light);
border-radius:34px;
padding:12px 30px;
font-weight:800;
font-size:1.09rem;
box-shadow:0 6px 24px rgba(16,182,250,0.13);
letter-spacing:0.5px;
margin-left:30px;
transition: background 0.21s, box-shadow 0.2s, transform 0.14s;
}
.cta-btn:hover, .cta-btn:focus {
background:linear-gradient(90deg, var(--brand-vibrant-2), var(--brand-vibrant-1));
transform: scale(1.05);
box-shadow:0 20px 48px rgba(234,76,137,0.13);
}
.cta-link {
color:var(--brand-vibrant-1);
font-weight:700;
transition:color 0.18s;
}
.cta-link:hover, .cta-link:focus { color: var(--brand-vibrant-2); }

/* === Hamburger icon button === */
.mobile-menu-toggle {
background:var(--brand-vibrant-1);
border-radius:10px;
color:#fff;
border:none;
height:46px;
width:46px;
display:none;
font-size:2rem;
justify-content:center;
align-items:center;
margin-left:auto;
transition:background 0.19s,box-shadow .18s;
box-shadow:0 2px 16px rgba(16,182,250,0.13);
z-index:1151;
}
.mobile-menu-toggle:hover, .mobile-menu-toggle:focus {
background:var(--brand-vibrant-2);
box-shadow:0 4px 22px rgba(234,76,137,0.11);
}

@media(max-width:1100px){
.main-nav{display:none;}
.mobile-menu-toggle{display:flex;}
.cta-btn{margin-left:auto;}
}

/* ===== MOBILE MENU ===== */
.mobile-menu {
position:fixed;
top:0; left:0;
width:100vw;
height:100vh;
background:rgba(39,58,82,0.96);
backdrop-filter:blur(2px);
transform: translateX(-100vw);
transition:transform 0.33s cubic-bezier(.65,.05,.36,.99);
z-index:1200;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding:0;
}
.mobile-menu.open {
transform: translateX(0);
}
.mobile-menu-close {
background:rgba(234,76,137,1);
border-radius:10px;
color:var(--brand-light);
border:none;
font-size:2.18rem;
height:48px;
width:48px;
display:flex;
justify-content:center;
align-items:center;
position: absolute;
top:14px; right:18px;
z-index:10;
box-shadow:0 2px 24px rgba(234,76,137,0.16);
transition:box-shadow .2s, background .2s;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus{background:var(--brand-vibrant-1);}
.mobile-nav {
margin-top:70px;
display: flex;
flex-direction: column;
gap:24px;
padding-left:32px;
}
.mobile-nav a {
font-size:1.25rem;
font-weight:800;
line-height:1.5;
color:#fff;
padding:16px 0px 8px 0;
display:block;
transition:color .18s,background .15s;
border-radius:4px;
}
.mobile-nav a:hover,
.mobile-nav a:focus {
color:var(--brand-vibrant-3);
background:rgba(16,182,250,0.11);
}

@media(min-width:1101px){.mobile-menu {display:none !important;}}

/* ===== HERO & SECTIONS ===== */
.hero-section {
width:100%;
background:linear-gradient(90deg, #10B6FA 2%, #FECF2F 98%);
color:var(--brand-dark);
min-height:340px;
display:flex;
align-items:center;
padding:0;
}
.hero-section .container {
height:100%;
justify-content:center;
align-items: flex-start;
padding:44px 20px 44px 20px;
}
.hero-section .content-wrapper {
gap:20px;
align-items:flex-start;
max-width:600px;
}
.hero-section h1 {
color:var(--brand-primary);
font-weight:900;
text-shadow:0 2px 10px rgba(254,207,47,0.13);
}
.hero-section p {
color:var(--brand-dark);
font-size:1.1rem;
font-weight:600;
margin-bottom:0;
}
.hero-section .cta-btn {margin-left:0;}
@media(max-width:700px){.hero-section .container{padding:32px 10px;}}

.features-section, .about-section, .team-section, .blog-section, .privacy-policy-section, .gdpr-section, .cookies-policy-section, .terms-of-service-section, .benefits-section, .faq-section {
margin-bottom:56px;
}
.services-preview, .about-preview, .team-preview, .services-section, .help-range-section, .example-solutions-section, .contact-form-section, .thank-you-section {
padding:32px 0;
background: var(--brand-accent);
border-radius:18px;
box-shadow:0 3px 32px var(--brand-shadow);
margin-bottom:30px;
}
.services-preview ul, .about-preview ul, .services-section ul, .help-range-section ul, .example-solutions-section ul, .faq-accordion, .blog-categories ul {
display: flex;
flex-direction:column;
gap:18px;
margin-bottom:18px;
}
.services-preview ul li, .about-preview ul li, .services-section ul li, .help-range-section ul li, .example-solutions-section ul li, .blog-categories ul li {
padding:10px 0;
font-size:1.08rem;
font-weight:600;
color:var(--brand-primary);
}
/* About / team */
.team-members-grid {
display: flex;
flex-wrap:wrap;
gap:24px;
}
.team-members-grid .team-profile {
flex:1 1 260px;
min-width:220px;
background:var(--brand-light);
border-radius:16px;
padding:26px 18px;
box-shadow:0 4px 22px var(--brand-shadow);
gap:15px;
}
.team-members-grid .team-profile h3 {
color:var(--brand-vibrant-2);
font-size:1.3rem;
font-weight:800;
}

/* --------- FAQ Accordion ---------- */
.faq-accordion {margin-top:16px;}
.faq-accordion > div {
background:var(--brand-light);
border-radius:13px;
padding:16px 22px 16px 18px;
margin-bottom:18px;
box-shadow:0 2px 15px var(--brand-shadow);
transition: box-shadow 0.16s;
cursor:pointer;
}
.faq-accordion > div:hover, .faq-accordion > div:focus-within {
box-shadow:0 7px 30px rgba(16,182,250,0.13);
z-index:1;
}
.faq-accordion h3 {font-size:1.1rem; font-family:'Merriweather'; color:var(--brand-vibrant-1); margin:0;margin-bottom:4px;cursor:pointer;}
.faq-accordion div > div {
display:block;
color:var(--brand-primary);
padding-top:6px;
font-size:1.03rem;
font-family:inherit;
}

/* ---- Blog cards ---- */
.articles-grid {
display:flex;
flex-wrap:wrap;
gap:24px;
margin-bottom:28px;
}
.articles-grid article {
flex:1 1 300px;
min-width:230px;
background:var(--brand-light);
border-radius:16px;
padding:22px 15px 19px 15px;
box-shadow:0 4px 18px var(--brand-shadow);
margin-bottom:20px;
transition: box-shadow 0.15s, transform 0.14s;
display: flex;
flex-direction:column;
gap:8px;
}
.articles-grid article a {
color:var(--brand-vibrant-1);
font-weight:700;
margin-top:8px;
font-size:1.04rem;
letter-spacing:.2px;
}
.articles-grid article a:hover {color:var(--brand-vibrant-2);}
.featured-post {
background:linear-gradient(88deg, #10B6FA 60%, #EA4C89 100%);
border-radius:18px;
padding:24px 32px;
box-shadow:0 2px 25px rgba(16,182,250,0.10);
color:var(--brand-light);
margin-bottom:22px;
}
.featured-post h2, .featured-post a {color:var(--brand-light);}
.featured-post a {text-decoration:underline; font-weight:700;}

/* ---- CTA Final & .cta-section ---- */
.cta-final, .cta-section {
background: linear-gradient(87deg, var(--brand-vibrant-1), var(--brand-secondary) 85%);
border-radius:20px;
padding:46px 36px;
margin-bottom:32px;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
box-shadow:0 7px 36px rgba(16,182,250,0.14);
}
.cta-final h2,.cta-section h2 {color:var(--brand-light);}
.cta-final p img,.cta-section p img {vertical-align:middle; margin-right:8px;}
.cta-final .cta-btn,.cta-section .cta-btn {
margin-top:14px;
background:linear-gradient(90deg, var(--brand-vibrant-2), var(--brand-vibrant-1));
color:#fff;
padding:12px 38px;
border-radius:28px;
margin-bottom:16px;
font-size:1.15rem;
}
.cta-final .cta-btn:hover, .cta-final .cta-btn:focus, .cta-section .cta-btn:hover, .cta-section .cta-btn:focus {
background:linear-gradient(90deg, var(--brand-vibrant-1), var(--brand-vibrant-2));
}
@media(max-width:600px){
.cta-final, .cta-section {padding:22px 8px;}
}
/* === THANK YOU / CONTACT === */
.thank-you-section h1, .contact-form-section h1 {color:var(--brand-vibrant-1);}
.thank-you-section ul {padding-left:17px;}

/* ===== FOOTER ===== */
footer {
padding:0;
background: var(--brand-primary);
color:#fff;
}
.footer-flex {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:36px;
padding:44px 18px 24px 18px;
}
footer img {height:36px;}
footer > .container{padding:0;}
footer a {color:var(--brand-vibrant-3);text-decoration:none;font-weight:700;}
footer a:hover { color: var(--brand-vibrant-1); }
footer strong {
display:block;
font-size:1.09rem;
color:var(--brand-vibrant-2);
margin-bottom:14px;
font-family:'Merriweather',serif;
font-weight:900;
}
footer nav ul {display:flex;flex-direction:column;gap:8px;}
footer .socials {
display:flex;
gap:20px;
margin:16px 0 0 0;
}
@media(max-width:800px){
.footer-flex{flex-direction:column;gap:32px;align-items:flex-start;}
footer > .container {padding:0 8px;}
}
footer p,footer li,footer span{color:#F4F7FA;font-size:1rem;line-height:1.35;}
footer .socials img {filter: drop-shadow(0 1px 2px rgba(0,0,0, 0.15));}

/* ====== COOKIES BANNER ======= */
.cookie-banner {
position:fixed;
bottom:0; left:0;
width:100vw;
z-index:1400;
display:flex;
justify-content:center;
align-items:center;
background: var(--brand-dark);
color: #fff;
padding:18px 12px;
box-shadow:0 -2px 18px var(--brand-shadow);
animation:cbannerfadein 0.7s;
}
@keyframes cbannerfadein{
from{transform:translateY(60px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.cookie-banner p {
margin:0 22px 0 0;
font-size:1rem;
color:#fff;
}
.cookie-banner .cookie-btn {
background: linear-gradient(90deg, var(--brand-vibrant-1), var(--brand-vibrant-2));
color: #fff;
padding:7px 19px;
border:none;
border-radius:20px;
font-family:'Merriweather',serif;
font-weight:800;
cursor:pointer;
margin-left:12px;
margin-right:6px;
font-size:1rem;
transition:box-shadow .18s, background .16s;
box-shadow:0 1px 5px rgba(16,182,250,0.13);
}
.cookie-banner .cookie-btn:hover, .cookie-banner .cookie-btn:focus {
background:linear-gradient(90deg, var(--brand-vibrant-2), var(--brand-vibrant-1));
}
.cookie-banner .settings-btn {
background: var(--brand-vibrant-3);
color:var(--brand-primary);
font-family:'Merriweather',serif;
font-weight:700;
}
.cookie-banner .settings-btn:hover {background: #ffc61c;}
@media(max-width:540px){
.cookie-banner{
flex-direction:column;
text-align:center;
padding:12px 8px;
}
.cookie-banner p{margin:0 0 5px 0;}
}

/* COOKIE PREFERENCES MODAL */
.cookie-modal-overlay {
position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1440;
background:rgba(39,58,82,0.82);
display:flex;align-items:center;justify-content:center;
animation:fademodal .36s;
}
@keyframes fademodal{from{opacity:0;}to{opacity:1;}}
.cookie-modal {
background:#fff;
border-radius:22px;
box-shadow:0 7px 42px rgba(16,182,250,.13);
max-width:420px;
padding:28px 30px 18px 30px;
display:flex;
flex-direction:column;
gap:22px;
position:relative;
}
.cookie-modal h2{color:var(--brand-vibrant-2);font-size:1.3rem;margin-bottom:0;}
.cookie-modal .cookie-toggle-row{
display:flex;
justify-content:space-between;
align-items:center;
margin:7px 0;
padding:10px 0;
border-bottom:1px dashed #e5e5e5;
}
.cookie-modal label{font-weight:700;color:var(--brand-primary);}
.cookie-modal input[type="checkbox"] {accent-color: var(--brand-vibrant-1);width:20px;height:20px;}
.cookie-modal .modal-actions {
display:flex;
gap:12px;justify-content:flex-end;margin-top:15px;
}
.cookie-modal .modal-btn {
background: linear-gradient(90deg, var(--brand-vibrant-1), var(--brand-vibrant-2));
color:#fff;
padding:8px 16px;
border-radius:18px;
font-family:'Merriweather',serif;
font-weight:800;
font-size:1.02rem;
border:none;cursor:pointer;
transition:background 0.18s;
}
.cookie-modal .modal-btn:hover{background:linear-gradient(90deg, var(--brand-vibrant-2), var(--brand-vibrant-1));}
.cookie-modal .modal-close {
position:absolute;top:13px;right:15px;background:var(--brand-vibrant-2);color:#fff;border-radius:12px;border:none;font-size:1.2rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:background .16s;}
.cookie-modal .modal-close:hover{background:var(--brand-vibrant-1);}

/* ======= GENERAL INTERACTIONS ======= */
.card, .feature-grid li, .benefit-list li, .team-profile, .articles-grid article, .faq-accordion > div,
.cta-btn, .cta-link, .main-nav a, .mobile-nav a, .cookie-btn, .modal-btn {
transition:box-shadow .18s, background .17s, color .15s, transform .16s;
cursor:pointer;
}
*:focus-visible {
outline: 3px solid var(--brand-vibrant-2);
outline-offset: 1px;
}

/* ======= SCROLLBAR ======= */
::-webkit-scrollbar {width:12px;background:var(--brand-accent);}
::-webkit-scrollbar-thumb {background:var(--brand-vibrant-1);border-radius:10px;}
::-webkit-scrollbar-thumb:hover {background:var(--brand-vibrant-2);}

/* ======= RESPONSIVE ADJUSTMENTS ======= */
@media(max-width:950px){
header .container {gap:12px;}
footer .footer-flex {gap:22px;}
}
@media(max-width:600px){
h1{font-size:1.68rem;}
h2{font-size:1.12rem;}
h3{font-size:1.04rem;}
.content-wrapper{gap:14px;}
}

/* ===== UTILITY CLASSES ===== */
.hide-mobile {display:none !important;}
@media(min-width:1101px){.hide-desktop{display:none !important;}}

/* ====== ACCESSIBILITY ====== */
[aria-current="page"]{color:var(--brand-vibrant-2) !important;border-bottom:2.5px solid var(--brand-vibrant-2) !important;}

/* ====== PRINT STYLES ====== */
@media print {
* {background:transparent !important; color:#000 !important; box-shadow:none !important;}
header,.cta-final,.cookie-banner,.mobile-menu,footer {display:none !important;}
}