/* ------------------------------
  CSS RESET & BASE 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;
  box-sizing:border-box;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1.5;background:#F4F6FB;color:#162743;min-height:100vh;}
ol,ul{list-style:none;}
a{text-decoration:none; color:inherit;transition:color 0.2s;}
img,svg{max-width:100%;height:auto;vertical-align:middle;}
*, *::before, *::after { box-sizing: border-box; }
:focus{outline:2px solid #1CA0DD;outline-offset:2px;}

/* ------------------
  FONT DEFINITIONS
------------------- */
@import url('https://fonts.googleapis.com/css?family=Montserrat:700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
body{
  font-family: 'Roboto', Arial, sans-serif;
  font-size:16px;
  background-color: #F4F6FB;
  color: #162743;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Montserrat', Arial, sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.1;
  color:#162743;
}
h1{font-size:2.25rem;margin-bottom:20px;}
h2{font-size:1.7rem;margin-bottom:20px;}
h3{font-size:1.2rem;margin-bottom:8px;}
h4,h5,h6{font-size:1rem;margin-bottom:6px;}
p,li,blockquote,table,th,td{font-size:1rem; line-height:1.7;}
blockquote{
  font-family:'Montserrat', Arial, sans-serif;
  font-weight:500;
  font-size:1.22rem;
  color:#1CA0DD;
  border-left:5px solid #1CA0DD;
  margin:0 0 8px 0;
  padding:8px 0 8px 24px;
  background: #F4F6FB;
}
strong{font-weight:700;}

/* ---------------------------
  COLOR VARIABLES (fallbacks)
---------------------------- */
:root {
  --primary:#162743;
  --secondary:#1CA0DD;
  --accent:#F4F6FB;
  --white:#fff;
  --black:#141414;
  --gray:#ececec;
  --bg-gradient: linear-gradient(90deg, #1CA0DD 0%, #6e45e2 100%);
  --shadow: 0 2px 12px 0 rgba(28,160,221,0.07), 0 1.5px 8px 0 rgba(22,39,67,0.08);
  --section-radius:30px;
}

/* -------------------------
  LAYOUT CONTAINERS & GAPS
-------------------------- */
.container{
  width:100%;
  max-width:1220px;
  margin:0 auto;
  padding:0 20px;
}

.content-wrapper{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:flex-start;
}

.section{
  margin-bottom:60px;
  padding:40px 20px;
}

.card-container{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.card{
  margin-bottom:20px;
  background:var(--white);
  box-shadow:0 2px 16px rgba(28,160,221,0.13);
  border-radius:24px;
  overflow:hidden;
  position:relative;
  padding:32px 24px;
}
.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:center;
  gap:20px;
  background:#fff;
  border-radius:22px;
  box-shadow:0 2px 12px rgba(22,39,67,0.14);
  padding:20px;
  margin-bottom:20px;
  min-width:0;
  z-index:2;
}
.testimonial-meta{
  font-family:'Roboto',Arial,sans-serif;
  font-weight:500;
  font-size:1rem;
  color:#162743;
}

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

/* Hero Section Custom Artistic Style */
.hero {
  padding:60px 0 60px 0;
  min-height:340px;
  background:var(--bg-gradient);
  display:flex;
  align-items:center;
}
.hero .container .content-wrapper {
  color:#fff;
  align-items:flex-start;
}
.hero h1, .hero h2, .hero h3, .hero p {
  color:#fff;
}
.hero .btn-primary{
  margin-top:18px;
}

.cta {
  background:var(--secondary);
  border-radius:24px;
  box-shadow:0 2px 14px rgba(28,160,221,0.14);
  margin-bottom:60px;
}
.cta h2, .cta p {
  color:#fff;
}

/* Fancy creative lines */
.section, .cta, .hero {
  position:relative;
}
.section:before, .cta:before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:60px;
  height:6px;
  background:var(--secondary);
  border-radius:12px;
  opacity:0.13;
  z-index:1;
}

/* -----------------------------
  ARTISTIC CREATIVE STYLING
------------------------------ */
body{
  background:var(--accent);
}

/* Animated underline effect for links */
a:not(.btn-primary):not(.btn-secondary):after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: var(--secondary);
  transition: width .25s cubic-bezier(.4,0,.2,1);
}
a:not(.btn-primary):not(.btn-secondary):hover:after {
  width: 100%;
}

/* -----------------
     BUTTONS
------------------ */
.btn-primary,.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:700;
  font-size:1rem;
  border:none;
  padding:16px 36px;
  border-radius:28px;
  cursor:pointer;
  transition:background 0.15s,color 0.15s, box-shadow .22s;
  letter-spacing:0.01em;
  margin-top:8px;
  margin-bottom:8px;
  min-width:150px;
  box-shadow:0 2px 10px rgba(28,160,221,0.09);
  position:relative;
}
.btn-primary{
  background:var(--secondary);
  color:#fff;
}
.btn-primary:hover, .btn-primary:focus{
  background:#1785b8;
  box-shadow:0 4px 15px rgba(28,160,221,0.18);
}
.btn-secondary{
  background:var(--accent);
  color:var(--secondary);
  border:2px solid var(--secondary);
}
.btn-secondary:hover, .btn-secondary:focus{
  background:var(--secondary);
  color:#fff;
}

/* Lists with creative markers */
ul, ol {
  padding-left:1.4em;
}
ul li,ol li{
  position:relative;
  margin-bottom:10px;
  padding-left:8px;
}
ul li::before{
  content:"\2022";
  position:absolute;
  left:-1.4em;
  color:var(--secondary);
  font-weight:bold;
  font-size:1.2em;
  line-height:1;
}
/* For ordered list */
ol li { list-style-type: decimal; }

/* TABLES (Technology page) */
table {
  width:100%;
  border-collapse:collapse;
  margin: 32px 0 24px 0;
  background:var(--white);
  border-radius:18px;
  box-shadow: 0 2px 10px rgba(28,160,221,0.08);
  overflow:hidden;
}
th, td {
  padding:13px 15px;
  border-bottom:1px solid #e4eaf2;
}
th {
  background:var(--secondary);
  color:#fff;
  font-weight:bold;
}
tr:last-child td {
  border-bottom:none;
}


/* ----------
   NAVIGATION
----------- */
header {
  width:100%;
  background:var(--primary);
  color:#fff;
  min-height:64px;
  display:flex;
  align-items:center;
  position:relative;
  z-index:101;
  box-shadow:0 2px 16px rgba(22,39,67,0.10);
}
header nav {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  width:100%;
  max-width:1220px;
  margin:0 auto;
  padding:0 20px;
}
header nav .logo {
  margin-right:26px;
  display:inline-flex;
  align-items:center;
}
header nav a{
  color:#fff;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:1rem;
  opacity:.92;
  position:relative;
  padding:8px 10px;
  border-radius:6px;
  transition:background 0.18s, color 0.17s;
}
header nav a:hover,
header nav a:focus{
  background:rgba(28,160,221,0.18);
  color:var(--secondary);
}
header nav .btn-primary{
  margin-left:18px;
  color:#fff !important;
  background:var(--secondary);
}
header nav .btn-primary:hover,header nav .btn-primary:focus{
  background:#1785b8;
  color:#fff;
}
header .mobile-menu-toggle {
  background:none;
  border:none;
  font-size:2.1rem;
  color:#1CA0DD;
  display:none;
  align-items:center;
  justify-content:center;
  padding:8px 18px;
  margin-left:auto;
  cursor:pointer;
  z-index:130;
  border-radius:12px;
  transition: background .2s;
}
header .mobile-menu-toggle:hover,
header .mobile-menu-toggle:focus {
  background:rgba(28,160,221,0.09);
}

/* MOBILE BURGER NAV */
.mobile-menu {
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0;
  width:100vw; height:100vh;
  background:rgba(28,160,221,0.98);
  z-index:2002;
  transform:translateX(100vw);
  opacity:0;
  transition:transform .38s cubic-bezier(.64,.09,.08,1), opacity .12s;
  pointer-events:none;
}
.mobile-menu.open {
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}
.mobile-menu-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 2.3rem;
  align-self: flex-end;
  margin: 18px 26px 12px 0;
  cursor:pointer;
  border-radius:12px;
  padding:4px 10px;
  transition: background .2s;
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
  background:rgba(22,39,67,0.10);
}
.mobile-nav {
  display:flex;
  flex-direction:column;
  gap:26px;
  align-items:flex-start;
  margin-left:38px;
  margin-top:16px;
}
.mobile-nav a {
  color:#fff;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:1.2rem;
  padding:8px 0;
  border-radius:6px;
  min-width:180px;
  transition: background .15s, color .12s;
}
.mobile-nav a:hover,.mobile-nav a:focus{
  background:rgba(22,39,67,0.10);
}

/* Footer */
footer {
  width:100%;
  background:var(--primary);
  color:#fff;
  padding:54px 0 0 0;
  font-size:1rem;
  border-top:4px solid var(--secondary);
  margin-top:60px;
  box-shadow:0 -3px 22px rgba(44,75,133,0.11);
}
footer .container {
  padding:0 20px 0 20px;
}
footer .content-wrapper {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:32px;
  align-items:flex-start;
  justify-content:space-between;
}
footer nav {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
footer nav a {
  color: #fff;
  opacity:.8;
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:500;
  font-size:1rem;
  padding:6px 10px;
  border-radius:6px;
  transition:background .16s, color .15s;
}
footer nav a:hover,footer nav a:focus{
  background:rgba(28,160,221,0.13);
  color:var(--secondary);
}
footer .contact-details{
  margin:3px 0 10px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:#d7e6f7;
  font-size:0.98rem;
}
footer .newsletter-signup{
  margin:0 0 0 0;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:#fff;
}
footer .newsletter-signup h3{font-size:1.09rem; font-weight:700;}
footer .social-links{
  display:flex;
  gap:14px;
  align-items:center;
}
footer .social-links a{
  display:inline-flex;
  align-items:center;
  padding:8px;
  border-radius:14px;
  background:rgba(28,160,221,0.10);
  transition:background .16s;
}
footer .social-links a:hover,footer .social-links a:focus{background:rgba(28,160,221,0.20);}
footer .legal-links{
  color:#c9dff1;
  margin:9px 0 0 0;
  font-size:.92rem;
  opacity:.85;
}
footer .legal-links a{
  color:#c9dff1;
  text-decoration:underline;
  margin:0 0 0 0;
  opacity:1;
}
footer .legal-links a:hover,footer .legal-links a:focus{color:#fff;}

/* -----------
  CARDS & Specials
------------- */
.card, .testimonial-card{
  background:var(--white);
  border-radius:var(--section-radius);
  box-shadow:var(--shadow);
}
.partner-logos{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px;
  margin:14px 0;
}

/* Feature grid as flex */
.feature-grid{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:flex-start;
}
.feature-grid > div{
  flex:1 1 200px;
  min-width:210px;
  background:var(--white);
  border-radius:18px;
  box-shadow:0 2px 11px rgba(44,75,133,0.08);
  padding:28px 18px 28px 18px;
  margin-bottom:12px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  position:relative;
}
.feature-grid img{height:46px;width:46px;object-fit:contain;filter:brightness(1);margin-bottom:10px;}
.feature-grid h3{
  font-size:1.13rem;
  margin-bottom:4px;
  color:var(--secondary);
}

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

.post-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:12px 0;
}
.post-list li {
  font-size:1.03rem;
  position:relative;
  padding-left:12px;
}
.post-list li::before{
  content:"\25b6";
  color:var(--secondary);
  position:absolute;
  left:-10px;
  font-size:.9em;
  top:.12em;
}
.post-list span{
  color:#888;font-size:.96em;margin-left:7px;
}

/* FAQ style inside technology.html */
ul.faq-list li{margin-bottom:16px;}
ul.faq-list strong{color:var(--secondary);}

/* Artistic accents for creative, vibrant feeling */
.section, .card, .testimonial-card, .cta, .feature-grid>div {
  background-clip: padding-box;
  box-shadow: 0 2px 16px rgba(28,160,221,0.08);
  border-radius: 22px;
}

/* FAQ strong colored */
ul li strong{color:var(--secondary);font-weight:700;}

/* ---------------
   SPACING & GAPS
------------------ */
.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;}

/* --------
  FORMS
--------- */
input,textarea,select{
  font-family:'Roboto',Arial,sans-serif;
  font-size:1rem;
  border-radius:7px;
  border:1.5px solid #c7def1;
  padding:12px 14px;
  margin-bottom:12px;
  background: #F4F6FB;
  transition: border-color .15s;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--secondary);
}
label{font-weight:500;margin-bottom:7px;color:var(--primary);}

/* ---------------------------
  COOKIE CONSENT BANNER
---------------------------- */
.cookie-banner{
  position:fixed;
  left:0; right:0;
  bottom:0;
  width:100vw;
  background: #fff;
  color: #162743;
  border-top: 2px solid var(--secondary);
  box-shadow: 0 -5px 22px rgba(28,160,221,0.13);
  z-index:2100;
  padding:24px 20px 18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
  font-size:1rem;
  animation:cookieBannerAppear .8s cubic-bezier(.69,-0.09,.36,1.04);
}
@keyframes cookieBannerAppear { from { opacity: 0; transform: translateY(44px);} to { opacity: 1; transform: translateY(0); } }

.cookie-banner-text{
  flex:1 1 300px;
  margin-right:18px;
  color: #162743;
}
.cookie-banner-buttons{
  display:flex;
  gap:13px;
}
.cookie-banner .btn-primary,.cookie-banner .btn-secondary{
  margin:0;
  font-size:.98rem;
  padding:12px 26px;
  border-radius:17px;
}
.btn-cookie-settings{
  background: #fff;
  border: 2px solid var(--secondary);
  color: var(--secondary);
}
.btn-cookie-settings:hover,.btn-cookie-settings:focus{
  background: var(--accent);
  color: var(--secondary);
  border-color: #1785b8;
}

/* Cookie modal */
.cookie-modal-overlay{
  position:fixed; z-index:2125;
  top:0;left:0;width:100vw;height:100vh;
  background:rgba(22,39,67,0.16);
  display:none;
  align-items:center;justify-content:center;
}
.cookie-modal-overlay.open{display:flex;}
.cookie-modal{
  background:#fff;
  border-radius:26px;
  box-shadow: 0 2px 32px rgba(28,160,221,0.17);
  max-width:420px;
  width:94vw;
  padding:28px 26px 22px 26px;
  position:relative;
  z-index:2202;
  animation:cookieModalIn .42s cubic-bezier(.54,.03,.18,1.1);
  display:flex;
  flex-direction:column;
  gap:15px;
}
@keyframes cookieModalIn { from { opacity: 0; transform: scale(.97) translateY(24px);} to { opacity: 1; transform: scale(1) translateY(0); } }
.cookie-modal-title{font-family:'Montserrat',Arial,sans-serif; font-size:1.11rem; font-weight:700; margin-bottom:10px;color:var(--primary);}
.cookie-categories{
  margin:14px 0 14px 0;
  display:flex;
  flex-direction:column;
  gap:17px;
}
.cookie-category{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:.99rem;
}
.cookie-category input[type=checkbox]{accent-color:var(--secondary);width:19px;height:19px;}
.cookie-category.essential label{
  color:#ccc;
  cursor:not-allowed;
}
.cookie-modal .close-modal{
  position:absolute;
  top:14px; right:20px;
  border:none; background:none;
  color: var(--secondary);
  font-size:1.55rem;
  cursor:pointer;
  border-radius:10px;
  padding:2px 7px;
  transition:background .2s;
}
.cookie-modal .close-modal:hover, .cookie-modal .close-modal:focus{background:rgba(28,160,221,0.10);}
.cookie-modal .btn-primary,.cookie-modal .btn-secondary{
  margin:7px 3px 0 0;
  font-size:.97rem;
  padding:10px 22px;
  border-radius:16px;
}

/* ---------------
 RESPONSE DESIGN
----------------- */
@media (max-width:1200px){ 
  .container{max-width:95vw;}
}

@media (max-width:991px){
  footer .content-wrapper{gap:18px;}
}
@media (max-width:900px){
  .feature-grid{gap:16px;}
  footer .content-wrapper{flex-wrap:wrap;gap:18px;}
}
@media (max-width:820px){
  .content-grid{gap:12px;}
}
@media (max-width:768px){
  h1{font-size:1.45rem;}
  h2{font-size:1.19rem;}
  .section{margin-bottom:34px;padding:26px 8.5vw;}
  .cta,.card{border-radius:17px;}
  .feature-grid>div{padding:20px 8px;}
  header nav .btn-primary{margin-left:0;}
  .container{max-width:100vw;padding:0 6vw;}

  .content-wrapper,
  .footer .content-wrapper {
    gap:12px;
  }
  .text-image-section{flex-direction:column;gap:18px;}
  .content-grid{flex-direction:column;gap:13px;}
  .feature-grid{flex-direction:column;gap:14px;}
  .partner-logos{gap:14px;flex-wrap:wrap;}
  .hero{padding:36px 0 32px 0;min-height:220px;}
  .testimonial-card{padding:13px; margin-bottom:14px;}
}
@media (max-width:740px){
  .cta{padding:32px 5vw;}
}
@media (max-width:650px){
  footer .content-wrapper{flex-direction:column;gap:10px;}
}
@media (max-width:599px){
  
  header nav {display:none;}
  header .mobile-menu-toggle {display:flex;}
  .hero .container .content-wrapper, .cta .container .content-wrapper { align-items: flex-start;}
  .feature-grid>div,.card{border-radius:12px;}
  .newsletter-signup{margin:8px 0 0 0;}
}
@media (max-width:470px){
  .feature-grid img{height:32px;width:32px;}
  .feature-grid>div{padding:13px 2px;}
  .cta{padding:14px 2vw;}
}


/* --------------
  ARTISTIC FLAIR
-------------- */
.section, .cta, .hero, .card, .testimonial-card, .card-content, .feature-grid>div {
  box-shadow:0 1.5px 10px rgba(28,160,221,0.08), 0 0.9px 7px rgba(44,75,133,0.07);
  border-radius:22px;
}
.hero,.cta{
  /* artistic gradient border effect */
  border-bottom:4px solid #1CA0DD;
  border-right:2px solid #A8E7FF33;
}
/* Hand drawn creative squiggle (pseudo-classes) */
.hero h1::after, .cta h2::after {
  content: '';
  display: block;
  margin-top: 14px;
  width: 56px;
  height: 7px;
  border-radius: 9px;
  background: #FDEB49;
  opacity: 0.77;
  box-shadow: 0 1px 9px #FDEB49ee;
}

/* -- Micro-interactions -- */
.card:hover,.feature-grid>div:hover {
  box-shadow:0 8px 22px rgba(28,160,221,0.16);
  transform:translateY(-3px) scale(1.018);
  transition: box-shadow .22s, transform .19s;
}
.testimonial-card:hover {
  box-shadow:0 5px 24px rgba(22,39,67,0.18);
  transform:translateY(-2px) scale(1.012);
  transition:box-shadow .19s, transform .16s;
}

/* Accent for artistic bullets/symbols */
ul li::marker,ol li::marker{color:var(--secondary);}

/* -------------------
  PRINT STYLES (minimal)
---------------------- */
@media print {
  header,footer,.mobile-menu,.cookie-banner,.cookie-modal-overlay{display:none!important;}
  body{background:#fff;}
}

/* End of CSS */