/* === 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,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 { line-height: 1.15; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { line-height:1.4; min-height:100vh; background: #1D2337; color: #E3E8F0; font-family: "Roboto", Arial, sans-serif; font-size:16px; }
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section { display:block; }
img { max-width:100%; display:block; height:auto; }
a { color: inherit; text-decoration: none; transition: color .22s; }
ul,ol { list-style: none; }
button,input,select,textarea { font: inherit; }
:focus { outline: 2px solid #FFB347; outline-offset: 1px; }

/* === FONT IMPORTS === */
@import url('https://fonts.googleapis.com/css?family=Montserrat:700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

/* === COLOR SCHEME === */
:root {
  --color-primary: #253858;
  --color-secondary: #E3E8F0;
  --color-accent: #FFB347;
  --color-dark: #181D2A;
  --color-light: #ffffff;
  --color-heroBg: #222944;
  --color-bg-card: #23294a;
  --color-bg-card-light: #2B3257;
  --color-success: #16F0A7;
  --color-danger: #e74c3c;
  --color-shadow: rgba(0,12,60,0.12);
  --font-display: "Montserrat", Arial, sans-serif;
  --font-body: "Roboto", Arial, sans-serif;
}

/* === LAYOUT CONTAINERS === */
.container {
  width:100%;
  max-width:1140px;
  margin-left:auto;
  margin-right:auto;
  padding-left:18px;
  padding-right:18px;
}
.content-wrapper {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* === HEADER === */
header {
  width:100%;
  background: var(--color-heroBg);
  box-shadow:0 2px 12px var(--color-shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0 16px 0;
  position: relative;
  min-height:72px;
}
.logo img {
  height:44px;
  width:auto;
  filter:drop-shadow(0 0 8px #5247FF33);
}

.main-nav {
  display:flex;
  align-items:center;
  gap:18px;
}
.main-nav a {
  font-family:var(--font-display);
  font-weight:700;
  color:var(--color-secondary);
  padding:7px 14px;
  border-radius:6px;
  letter-spacing:0.02em;
  transition: background .19s, color .19s;
}
.main-nav a:hover, .main-nav a:focus {
  background:var(--color-accent);
  color:var(--color-primary);
}

.cta-btn {
  display:inline-block;
  color:var(--color-dark);
  background:var(--color-accent);
  font-family:var(--font-display);
  font-weight:800;
  font-size:16px;
  border:none;
  outline:none;
  border-radius:38px;
  padding:12px 34px;
  box-shadow:0 6px 20px -7px #FFB34766;
  cursor:pointer;
  letter-spacing:0.03em;
  text-shadow: 0 2px 12px #FFB34733;
  margin-left:22px;
  transition: background 0.23s, color 0.24s, box-shadow 0.18s;
  position:relative;
  z-index:2;
}
.cta-btn:hover, .cta-btn:focus {
  background:#FFD981;
  color:var(--color-primary);
  box-shadow:0 10px 32px -8px #FFB34733, 0 0 8px #FFB34788;
}

.mobile-menu-toggle {
  display:none;
  background:none;
  border:none;
  color:var(--color-accent);
  font-size:32px;
  cursor:pointer;
  z-index:1001;
  position:relative;
  margin-left:18px;
  transition: color .23s, box-shadow .18s;
}
.mobile-menu-toggle:focus { color: #FFD981; }

@media (max-width: 1050px) {
  .main-nav { gap:10px; }
}
@media (max-width: 940px) {
  .container { max-width: 98vw; }
}
@media (max-width: 820px) {
  .main-nav {
    display:none;
  }
  .cta-btn {
    display:none;
  }
  .mobile-menu-toggle {
    display:inline-block;
  }
}

/* === MOBILE MENU === */
.mobile-menu {
  position:fixed;
  inset:0;
  background: linear-gradient(135deg, #23294a 72%, #191d2d);
  z-index:5000;
  transform:translateX(100%);
  transition:transform 0.35s cubic-bezier(.51,.1,.39,.95);
  display:flex;
  flex-direction:column;
  justify-content:start;
  align-items:flex-start;
  padding:32px 26px;
}
.mobile-menu.open {
  transform:translateX(0);
}
.mobile-menu-close {
  background:none;
  border:none;
  color:#fff;
  font-size:32px;
  cursor:pointer;
  align-self:flex-end;
  margin-bottom:24px;
  transition: color .19s;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus { color: var(--color-accent); }

.mobile-nav { display: flex; flex-direction:column; gap:20px; width:100%; }
.mobile-nav a {
  color:var(--color-secondary);
  font-family:var(--font-display);
  font-size:22px;
  font-weight:700;
  letter-spacing:0.03em;
  padding:11px 10px;
  border-radius: 7px;
  transition: background .2s, color .2s;
}
.mobile-nav a:hover, .mobile-nav a:focus {
  background:var(--color-accent);
  color:var(--color-dark);
}

/* === HERO SECTION === */
.hero {
  background:radial-gradient(circle at 58% 20%, #283165 40%, #192038 100%);
  min-height:330px;
  display:flex;
  align-items:center;
  padding: 0 0 14px 0;
}
.hero .container { width:100%; }
.hero .content-wrapper {
  align-items:flex-start;
  justify-content:center;
  min-height:290px;
  gap: 28px;
  padding-top:32px;
  padding-bottom:32px;
}
.hero h1 {
  font-family:var(--font-display);
  color:var(--color-accent);
  font-weight:800;
  font-size: 2.4rem;
  margin-bottom:0.35em;
  letter-spacing:0.01em;
  text-shadow:0 8px 36px #FFB34720;
  line-height: 1.13;
}
.hero p {
  font-size: 1.2rem;
  color: #F8FAFF;
  line-height:1.5;
  max-width:540px;
  margin-bottom:20px;
}
@media (max-width:840px) {
  .hero {
    min-height:220px;
  }
  .hero .content-wrapper { min-height:120px; padding-top:16px; padding-bottom:16px; }
  .hero h1 { font-size: 1.7rem; }
  .hero p { font-size: 1rem; }
}

/* === SECTIONS & SPACING === */
section {
  margin-bottom:60px;
  padding:40px 20px;
  background: none;
  width:100%;
}
@media (max-width: 640px) {
  section { padding:28px 5vw; margin-bottom:34px; }
}

.card-container { display:flex; flex-wrap:wrap; gap:24px; margin-bottom:24px; }
.card { margin-bottom:20px; position:relative; background:var(--color-bg-card); border-radius:17px; box-shadow:0 6px 32px -12px #00041522; padding:28px 22px; transition: box-shadow .18s, transform .20s; }
.card:hover { box-shadow:0 14px 44px -10px #FFB34755, 0 0 15px 1px #FFB34720; transform:translateY(-2px) scale(1.015); }

.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; background:#F7F8FA; color:#23294a; border-radius:16px; margin-bottom:20px; box-shadow:0 6px 24px -8px #23468819; flex-direction: column; }
.feature-item { display: flex; flex-direction:column; align-items:flex-start; gap:15px; }

/* === FEATURE GRIDS / USP LISTS === */
.feature-grid, .usp-list, .service-cards, .case-studies, .step-list, .valuation-steps {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-bottom:24px;
  align-items: flex-start;
  margin-top:20px;
}
.feature-grid li, .service-cards li, .case-studies li {
  background: var(--color-bg-card-light);
  color: var(--color-secondary);
  border-radius:15px;
  min-width:240px;
  flex:1 1 230px;
  padding:26px 18px 21px 22px;
  position:relative;
  margin-bottom:20px;
  box-shadow:0 4px 22px -9px #2B325777;
  transition: box-shadow .16s, transform .17s;
  display: flex;
  flex-direction: column;
  gap:12px;
}
.feature-grid li:hover, .service-cards li:hover, .case-studies li:hover {
  box-shadow:0 8px 30px -7px #FFB34744, 0 0 9px #1a1e4749;
  transform:translateY(-3px) scale(1.014);
}
.feature-grid li img {
  height:42px;
  margin-bottom:9px;
  filter: drop-shadow(0 0 8px #FFB34780);
}
.feature-grid h3, .service-cards h3, .case-studies h3 {
  font-family:var(--font-display);
  color:var(--color-accent);
  font-weight:700;
  font-size:19px;
  margin-bottom:8px;
}
.feature-grid p, .service-cards p, .case-studies p {
  color:var(--color-secondary);
  font-size:15px;
  line-height:1.5;
}
.usp-list {
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  color:var(--color-success);
  font-weight: 600;
}
.usp-list li {
  background:none;
  color:var(--color-success);
  font-size:16px;
  padding-left:5px;
}

/* === TEXT SECTIONS === */
.text-section {
  color:var(--color-secondary);
  font-size: 16px;
  background: none;
  line-height:1.66;
  margin-bottom:14px;
}
.text-section p { margin-bottom:9px; }
.text-section h2 { color:var(--color-accent); }

/* === CERTIFICATIONS BAR === */
.certifications {
  display: flex;
  align-items:center;
  gap:20px;
  margin-top:9px;
}
.certifications img {
  height:36px;
  width:auto;
  filter: drop-shadow(0 0 6px #FFB34766);
}

/* === TESTIMONIALS (CARD + LIST) === */
.testimonial-list {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  justify-content:flex-start;
  margin-bottom:24px;
}
.testimonial-card {
  background: #F7F8FA;
  color: #23294a;
  border-radius: 18px;
  box-shadow: 0 4px 24px -7px #14447723;
  padding: 24px 20px 20px 20px;
  min-width: 240px;
  flex:1 1 230px;
  max-width:350px;
  font-size:16px;
  position:relative;
  margin-bottom:20px;
  transition: box-shadow .18s, transform .19s;
  display: flex;
  flex-direction: column;
  gap:13px;
  align-items: flex-start;
}
.testimonial-card .stars {
  color: var(--color-accent);
  font-size: 19px;
  letter-spacing:1px;
}
.testimonial-card blockquote {
  font-family:var(--font-body);
  color:#23294a;
  font-size:16px;
  line-height:1.5;
  margin-left:0;
}
.testimonial-card footer {
  font-size:15px;
  color:var(--color-primary);
  font-style:normal;
  font-family:var(--font-display);
}
.testimonial-card:hover {
  box-shadow: 0 12px 36px -7px #FFB34733, 0 0 12px #FFB34714;
  transform:translateY(-3px) scale(1.016);
}

/* === CONTACT DETAILS === */
.contact-details {
  display:flex;
  flex-direction:column;
  gap:19px;
}
.contact-details ul { display:flex; flex-direction:column; gap:14px; }
.contact-details li {
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--color-secondary);
  font-size:15px;
}
.contact-details img { height:22px; width:auto; filter: drop-shadow(0 2px 4px #FFB34734); }

/* === FOOTER === */
footer {
  width:100%;
  background: var(--color-heroBg);
  color:var(--color-secondary);
  font-size:16px;
  padding:32px 0 16px 0;
  box-shadow:0 -6px 26px -12px #0e112d99;
  margin-top:56px;
}
.footer-nav {
  width:100%;
  display:flex; flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  align-items:center;
  font-size:15px;
  margin-bottom:19px;
}
.footer-nav a {
  color:var(--color-secondary); opacity:.75; transition:color .16s, opacity .16s;
}
.footer-nav a:hover, .footer-nav a:focus { color: var(--color-accent); opacity:1; }
.footer-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  gap:18px;
  margin:11px auto 0 auto;
  font-size:15px;
}
.footer-brand img { height:38px; width:auto; }

/* === PAGE TYPE STYLES === */
h1 {
  font-family:var(--font-display);
  font-weight:800;
  color:var(--color-accent);
  font-size:2.3rem;
  margin-bottom:12px;
  letter-spacing:0.01em;
}
h2 {
  font-family:var(--font-display);
  color:var(--color-accent);
  font-size:1.5rem;
  font-weight:700;
  margin-bottom:12px;
  margin-top:3px;
  letter-spacing:0.01em;
}
h3 {
  font-family:var(--font-display);
  color:var(--color-accent);
  font-size:1.13rem;
  margin-bottom:8px;
}
h4, h5, h6 {
  font-family:var(--font-body);
  color:var(--color-secondary);
  margin-bottom:7px;
}
p,li,blockquote,address {
  font-family:var(--font-body);
  font-size:15px;
  color:var(--color-secondary);
}

strong { color: var(--color-primary); font-weight: 700; }

/* === BUTTONS === */
button, .btn {
  font-family:var(--font-display);
  font-weight:700;
  color:var(--color-dark);
  background:var(--color-accent);
  border: none; outline:none;
  border-radius:32px;
  padding:10px 27px;
  cursor:pointer;
  transition: background .22s, color .22s, box-shadow .14s;
  font-size:15px;
  box-shadow:0 4px 14px -7px #FFB34733;
}
button:hover, .btn:hover, button:focus, .btn:focus {
  background:#FFD981;
  color:var(--color-primary);
  box-shadow:0 8px 30px -7px #FFB34768;
}

/* === FORMS: INPUTS & LABELS === */
input, textarea, select {
  font-family:var(--font-body);
  font-size:15px;
  color:var(--color-primary);
  background:var(--color-secondary);
  border-radius:8px;
  border:1px solid #aeb8cd;
  padding:11px 13px;
  margin-bottom:16px;
  width:100%;
  box-shadow:0 2px 15px -7px #1D233760;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--color-accent);
  background: #F7F7FA;
}
label { font-family:var(--font-display); color:var(--color-primary); font-weight:600; margin-bottom:7px; display:block; }

/* === TABLES (PRIVACY/COOKIES) === */
table { width:100%; border-collapse: collapse; margin-bottom:18px; background:var(--color-bg-card-light); border-radius:7px; overflow: hidden; }
th,td { padding:12px 9px; text-align:left; }
th { background:var(--color-primary); color:var(--color-accent); font-family:var(--font-display); }
td { color:var(--color-secondary); }
tr:nth-child(even) td { background: #24294e; }

/* === RESPONSIVE DESIGN === */
@media (max-width:690px) {
  .hero h1 { font-size: 1.18rem; }
  .content-wrapper { gap:15px; }
  .feature-grid, .testimonial-list, .service-cards, .case-studies { gap:14px; }
  .card, .feature-grid li, .testimonial-card, .service-cards li, .case-studies li { min-width:120px; padding:15px 8px 16px 10px; }
  section { padding:15px 2vw; }
}
@media (max-width:540px) {
  .hero .container, .container { padding-left:0px; padding-right:0px; }
  .feature-grid, .service-cards, .case-studies { flex-direction:column; }
  .testimonial-list { flex-direction:column; }
  .footer-brand { flex-direction:column; gap:5px; }
}

/* === FLEXBOX LAYOUT ADJUSTMENTS (FORCED FLEX DIRECTION) === */
@media (max-width: 768px) {
  .content-grid, .card-container, .testimonial-list, .feature-grid, .service-cards, .case-studies, .text-image-section {
    flex-direction:column !important;
    gap:18px;
  }
}
.text-image-section { align-items: center; gap:30px; flex-wrap:wrap; }
@media (max-width:768px) {
  .text-image-section {
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }
}

/* === COOKIES CONSENT BANNER === */
.cookie-banner {
  position:fixed;
  z-index:9000;
  left:0; right:0;
  bottom:0;
  width:100vw;
  background: var(--color-primary);
  color: var(--color-secondary);
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:18px;
  padding:18px 16px 19px 16px;
  box-shadow: 0 -4px 28px -10px #111935aa;
  animation: slideInBanner .6s cubic-bezier(.6,0,.5,1);
}
@keyframes slideInBanner { from { transform:translateY(80px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.cookie-banner p { font-size:15px; color:var(--color-secondary); text-align: center; max-width:510px; line-height:1.48; }
.cookie-btn-row {
  display:flex; flex-direction:row; gap:18px; margin:0 auto; justify-content:center;
}
.cookie-banner .btn {
  font-weight:700;
  font-size:15px;
  border-radius:24px;
  padding:8px 26px;
  background:var(--color-accent);
  color:var(--color-dark);
  border: none;
  outline:none;
  box-shadow:0 2px 8px -3px #FFB34733;
  transition: background .18s, color .19s, box-shadow .19s;
}
.cookie-banner .btn:focus, .cookie-banner .btn:hover { background: #FFD981; color: var(--color-primary); box-shadow:0 4px 18px -6px #FFB34733; }
.cookie-banner .btn.settings { background:none; color:var(--color-accent); border:1.5px solid var(--color-accent); }
.cookie-banner .btn.settings:hover, .cookie-banner .btn.settings:focus {
  background:#FFD98111; color:var(--color-accent); border-color:var(--color-accent);
}

@media (max-width: 480px) {
  .cookie-banner { gap:11px; padding:10px 3vw 12px 3vw;}
  .cookie-btn-row { gap:10px; flex-direction:column; }
}

/* === COOKIE SETTINGS MODAL === */
.cookie-modal-overlay {
  position:fixed; z-index:9900; inset:0;
  background:rgba(27,33,56,0.57);
  display:flex; align-items:center; justify-content:center;
  animation: fadeIn 0.3s;
}
@keyframes fadeIn { from{ opacity:0; } to{ opacity:1; } }
.cookie-modal {
  width:100%; max-width:410px;
  background:var(--color-bg-card);
  color:var(--color-secondary);
  border-radius:15px;
  box-shadow:0 8px 40px -7px #23294acc, 0 1px 9px #FFB34712;
  padding:34px 24px 26px 24px;
  display:flex;
  flex-direction:column;
  gap:22px;
  animation:slideInModal .36s cubic-bezier(.52,0,.41,1);
  position:relative;
}
@keyframes slideInModal { from{ transform:translateY(100px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.cookie-modal h2 { font-size:1.17rem; color:var(--color-accent); margin-bottom:3px; }
.cookie-modal .category-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
}
.cookie-modal .switch {
  position:relative;
  width:40px;
  height:22px;
  display:inline-block;
}
.cookie-modal .switch input {opacity: 0; width:0; height:0;}
.cookie-modal .slider {
  position:absolute; cursor:pointer;
  top:0; left:0; right:0; bottom:0;
  background:#2b3049; border-radius:34px;
  transition: background 0.24s;
}
.cookie-modal .switch input:checked + .slider { background:var(--color-accent); }
.cookie-modal .slider:before {
  position:absolute; left:4px; top:4px; content:"";
  height:14px; width:14px; border-radius:50%; background:#fff;
  transition:transform .22s, background .17s;
}
.cookie-modal .switch input:checked + .slider:before { transform:translateX(16px); background:var(--color-dark); }
.cookie-modal .slider {
  box-shadow: 0 0 4px #0007; border:1px solid #384475;
}
.cookie-modal .category-title { font-weight:600; }
.cookie-modal .desc { color:#c7cff5; font-size:13px; }
.cookie-modal .modal-actions { display:flex; gap:14px; margin-top:4px; }
.cookie-modal .btn { font-size:15px; border-radius:24px; padding:6px 24px; }
.cookie-modal-close {
  position:absolute;
  top:9px; right:15px;
  background:none; border:none;
  color: var(--color-accent);
  font-size:27px;
  cursor:pointer;
  transition: color .16s;
}
.cookie-modal-close:hover, .cookie-modal-close:focus { color:var(--color-secondary); }

@media (max-width:470px) {
  .cookie-modal { padding:21px 7vw 18px 7vw; gap: 13px; }
}

/* === Animations for focus/hover neon === */
.cta-btn, .btn, .card, .testimonial-card, .feature-grid li, .service-cards li, .case-studies li {
  box-shadow:0 0 0 0 transparent;
  transition: box-shadow .18s, transform .18s;
}
.cta-btn:focus, .btn:focus, .card:focus, .testimonial-card:focus, .feature-grid li:focus, .service-cards li:focus, .case-studies li:focus {
  box-shadow:0 0 12px 4px #FFB34799, 0 6px 22px -2px #FFB34744;
  outline:none;
  z-index:2;
}

/* === SCROLLBAR (CHROME/EDGE) === */
::-webkit-scrollbar { width:8px; background: #222944; }
::-webkit-scrollbar-thumb { background: #253858; border-radius:6px; }

/* === MISC UTILITIES === */
.neon-accent { text-shadow:0 0 6px #FFB34752, 0 3px 13px #FFB34732; color:var(--color-accent)!important; }
.shadow {
  box-shadow:0 8px 30px -10px #23294a80, 0 4px 8px #0002;
}
.bg-light { background: #fff!important; color: #253858!important; }
.bg-dark { background: #23294a!important; color: #E3E8F0!important; }

/* === HELPER FLEX UTILITIES === */
.flex-center { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.flex-col { display:flex; flex-direction:column; }

/* === A11Y FOCUS INDICATOR FOR TABBED NAVIGATION === */
:focus-visible { outline:2.5px solid #FFB347; outline-offset: 2.5px; }

/* === PRINT STYLES (minified) === */
@media print { header,footer,.mobile-menu,.cookie-banner,.cookie-modal-overlay { display:none!important; } section { margin:0; padding:0; } }
