@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Kalam:wght@700&display=swap');

:root{
  --navy:#0f2438;
  --blue:#dff1ff;
  --blue-2:#cfeaff;
  --mid-blue:#4b93d1;
  --soft:#ffffff;
  --paper:#fbfbf8;
  --coral:#ff6b5f;
  --green:#8fbe86;
  --yellow:#ffbd4a;
  --shadow:0 22px 55px rgba(15,36,56,.14);
  --line:rgba(15,36,56,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--navy);
  background:var(--paper);
  overflow-x:hidden;
}
a{color:inherit}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px clamp(22px,6vw,86px);
  background:rgba(223,241,255,.74);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.55);
  will-change:transform;
}
.brand img{
  width:230px;
  height:auto;
  display:block;
}
.nav{display:flex;gap:30px;align-items:center;font-size:14px;font-weight:700}
.nav a{text-decoration:none}
.nav-cta{
  background:var(--navy);
  color:white!important;
  padding:12px 22px;
  border-radius:999px;
  box-shadow:0 12px 25px rgba(15,36,56,.22);
}
.mobile-menu{display:none}

.panel{
  position:relative;
  padding:110px clamp(22px,8vw,120px);
}
.blue{background:linear-gradient(180deg,var(--blue),var(--blue-2))}
.blue-soft{background:#eaf7ff}
.white{background:var(--paper)}

.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:50px;
  align-items:center;
  padding-top:150px;
  overflow:hidden;
}
.hero:after,.problem:after,.solution:after,.process:after,.about:after{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-42px;
  height:84px;
  background:var(--paper);
  border-radius:50% 50% 0 0/100% 100% 0 0;
  z-index:2;
}
.about:after{background:var(--paper)}
.hero-copy,.section-copy,.quote-block,.contact-copy,.about-copy{position:relative;z-index:3}
.eyebrow{
  margin:0 0 15px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:13px;
  font-weight:800;
  color:var(--mid-blue);
}
h1,h2{
  margin:0;
  font-family:Kalam, Inter, sans-serif;
  letter-spacing:-.04em;
  line-height:.98;
}
h1{
  font-size:clamp(54px,7vw,96px);
  max-width:760px;
}
h1 span{
  color:var(--mid-blue);
  text-decoration:underline;
  text-decoration-thickness:6px;
  text-underline-offset:8px;
}
h2{font-size:clamp(40px,5vw,72px)}
h3{margin:0 0 10px;font-size:21px}
p{font-size:18px;line-height:1.55}
.hero-text{max-width:530px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 26px;
  border-radius:18px;
  text-decoration:none;
  font-weight:800;
}
.primary{
  color:white;
  background:linear-gradient(135deg,#ff806f,var(--coral));
  box-shadow:0 16px 34px rgba(255,107,95,.25);
}
.secondary{
  background:white;
  border:1px solid var(--line);
}
.hero-visual{
  position:relative;
  min-height:520px;
  z-index:3;
}
.card-xl,.strategy-board,.service-card,.compare-card,.contact-form,.about-card{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow);
  border-radius:28px;
}
.dashboard{
  position:absolute;
  right:8%;
  top:8%;
  width:min(500px,85vw);
  height:360px;
  transform:rotate(3deg);
}
.dash-top{
  position:absolute;top:28px;left:30px;right:30px;height:26px;border-radius:20px;background:#e9eef4;
}
.chart-line{
  position:absolute;left:70px;right:70px;top:130px;height:100px;
  background:
    linear-gradient(135deg, transparent 12%, var(--mid-blue) 13%, var(--mid-blue) 16%, transparent 17%),
    linear-gradient(45deg, transparent 40%, var(--mid-blue) 41%, var(--mid-blue) 44%, transparent 45%);
  opacity:.75;
}
.bar{position:absolute;bottom:42px;width:34px;border-radius:10px 10px 0 0;background:#8dc4ef}
.b1{left:80px;height:70px}.b2{left:130px;height:115px}.b3{left:180px;height:90px}.b4{left:230px;height:145px}
.pie{
  position:absolute;right:52px;bottom:54px;width:96px;height:96px;border-radius:50%;
  background:conic-gradient(var(--coral) 0 28%, var(--yellow) 28% 48%, var(--mid-blue) 48% 78%, var(--green) 78%);
}
.floating-icon{
  position:absolute;
  display:grid;
  place-items:center;
  width:92px;
  height:92px;
  border-radius:24px;
  background:white;
  box-shadow:0 16px 32px rgba(15,36,56,.16);
  font-size:42px;
  font-weight:800;
}
.target{right:0;top:88px;color:var(--coral)}
.megaphone{left:0;top:80px;color:var(--mid-blue)}
.growth{right:40px;bottom:45px;color:#4faa64}
.users{left:80px;bottom:70px;color:#194a80;font-size:30px}
.blob{
  position:absolute;
  border-radius:50%;
  background:rgba(108,178,232,.24);
  filter:blur(.2px);
}
.blob-one{width:330px;height:330px;left:-90px;bottom:110px}
.blob-two{width:520px;height:520px;right:4%;top:17%}

.problem{
  min-height:520px;
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  align-items:center;
  gap:40px;
}
.section-copy{max-width:760px}
.section-copy.right{justify-self:center}
.noise-visual{position:relative;height:310px;z-index:3}
.bubble{
  position:absolute;
  display:grid;
  place-items:center;
  border-radius:24px;
  background:#d9efff;
  color:#397fc2;
  width:100px;height:76px;
  font-size:32px;
  font-weight:800;
  box-shadow:0 12px 30px rgba(15,36,56,.08);
}
.bubble:nth-child(1){left:10%;top:30%}
.bubble:nth-child(2){left:38%;top:12%}
.bubble:nth-child(3){left:28%;top:50%;font-size:58px;color:#111}
.bubble:nth-child(4){left:58%;top:42%}

.solution{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}
blockquote{
  margin:28px 0 0;
  padding-left:24px;
  border-left:8px solid var(--mid-blue);
  font-family:Kalam,Inter,sans-serif;
  font-size:28px;
  line-height:1.25;
}
.strategy-board{
  min-height:330px;
  padding:36px;
  position:relative;
}
.board-title{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#477fb8;
  margin-bottom:22px;
}
.board-row,.board-row.short{
  height:18px;
  width:70%;
  background:#e5edf5;
  border-radius:999px;
  margin:17px 0;
}
.board-row.short{width:48%}
.mini-chart{
  position:absolute;
  left:36px;
  bottom:36px;
  width:230px;
  height:110px;
  border-radius:18px;
  background:#eef7ff;
}
.mini-chart:after{
  content:"";
  position:absolute;
  left:25px;
  right:25px;
  top:40px;
  height:45px;
  border-bottom:6px solid var(--mid-blue);
  border-right:6px solid var(--mid-blue);
  transform:skewY(-13deg);
}
.checklist{position:absolute;right:44px;bottom:54px;display:grid;gap:16px}
.checklist span{width:140px;height:18px;background:#e9eef4;border-radius:999px}
.checklist span:before{content:"✓";color:#4faa64;font-weight:900;margin-right:12px}

.section-intro{
  max-width:850px;
  margin:0 auto 42px;
  text-align:center;
  position:relative;
  z-index:3;
}
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  position:relative;
  z-index:3;
}
.service-card{
  text-align:center;
  padding:34px 24px;
}
.icon{
  width:74px;height:74px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:white;
  font-size:35px;
  font-weight:900;
  margin:0 auto 18px;
}
.red{background:var(--coral)}
.blue-icon{background:var(--mid-blue)}
.green{background:var(--green)}
.yellow{background:var(--yellow)}

.comparison-section{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:46px;
  align-items:center;
}
.comparison{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:center}
.compare-card{padding:26px}
.compare-card h3{
  background:var(--navy);
  color:white;
  margin:-26px -26px 22px;
  padding:16px 24px;
  border-radius:28px 28px 0 0;
}
.compare-card.featured h3{background:var(--mid-blue)}
.compare-card ul{margin:0;padding-left:22px;line-height:2}
.vs{
  width:74px;height:74px;border-radius:50%;
  background:var(--mid-blue);
  color:white;
  display:grid;place-items:center;
  font-weight:900;
  box-shadow:var(--shadow);
}

.timeline{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  position:relative;
  z-index:3;
}
.timeline:before{
  content:"";
  position:absolute;
  top:42px;
  left:8%;
  right:8%;
  height:3px;
  border-top:3px dashed #bddcf5;
}
.step{
  position:relative;
  text-align:center;
  padding:0 10px;
}
.step span{
  position:relative;
  z-index:2;
  width:86px;height:86px;
  border-radius:50%;
  background:var(--mid-blue);
  color:white;
  display:grid;
  place-items:center;
  margin:0 auto 22px;
  font-size:32px;
  font-weight:900;
  box-shadow:0 16px 30px rgba(75,147,209,.25);
}

.about{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:50px;
  align-items:center;
}
.about-copy{
  max-width:820px;
  position:relative;
  z-index:3;
}
.about-copy blockquote{
  margin:28px 0 0;
  padding-left:24px;
  border-left:8px solid var(--mid-blue);
  font-family:Kalam, Inter, sans-serif;
  font-size:26px;
  line-height:1.25;
  color:var(--navy);
}
.about-card{
  padding:28px;
  position:relative;
  z-index:3;
}
.portrait-wrap{
  height:420px;
  border-radius:24px;
  background:
    radial-gradient(circle at top right, rgba(112,182,232,.35), transparent 38%),
    linear-gradient(180deg, #DFF1FF, #F8FBFF);
  display:grid;
  place-items:center;
  margin-bottom:24px;
  overflow:hidden;
}
.portrait-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}
.about-card h3{
  font-size:26px;
  margin:0 0 4px;
}
.about-title{
  margin:0 0 18px;
  color:#4B93D1;
  font-weight:800;
}
.about-card ul{
  margin:0;
  padding-left:20px;
  line-height:1.8;
}

.final-quote{text-align:center}
.final-quote p{max-width:780px;margin:20px auto 0}

.contact{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:50px;
  align-items:start;
}
.contact-copy a{text-decoration:none;font-weight:800;color:var(--mid-blue)}
.contact-form{
  padding:28px;
  display:grid;
  gap:14px;
}
.contact-form input,.contact-form textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:15px 16px;
  font:inherit;
  color:var(--navy);
  background:white;
}
.contact-form button{
  border:0;
  border-radius:14px;
  min-height:52px;
  background:linear-gradient(135deg,#ff806f,var(--coral));
  color:white;
  font-weight:900;
  cursor:pointer;
}
.form-note{font-size:13px;margin:0;color:#5f7182}
.honeypot{display:none!important}

.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:34px clamp(22px,8vw,120px);
  background:var(--navy);
  color:white;
}
.footer img{
  width:82px;
  height:auto;
  display:block;
}
.footer p{font-size:14px;margin:0}

.social-links{
  display:flex;
  align-items:center;
  gap:12px;
}
.social-links a{
  width:40px;
  height:40px;
  border-radius:50%;
  background:#DFF1FF;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s ease, background .25s ease;
}
.social-links a:hover{
  transform:translateY(-3px);
  background:#70B6E8;
}
.social-links svg{
  width:20px;
  height:20px;
  fill:#0F2438;
}

[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .75s ease, transform .75s ease;
}
[data-reveal].visible{
  opacity:1;
  transform:translateY(0);
}

@media(max-width:980px){
  .nav{display:none;position:absolute;top:78px;right:22px;left:22px;background:white;border-radius:24px;padding:20px;box-shadow:var(--shadow);flex-direction:column}
  .nav.open{display:flex}
  .mobile-menu{display:block;border:0;background:var(--navy);color:white;border-radius:999px;padding:12px 16px;font-weight:800}
  .hero,.problem,.solution,.comparison-section,.contact,.about{grid-template-columns:1fr}
  .hero-visual{min-height:420px}
  .service-grid,.timeline{grid-template-columns:1fr 1fr}
  .comparison{grid-template-columns:1fr}
  .vs{margin:auto}
}
@media(max-width:640px){
  .site-header{padding:14px 18px}
  .brand img{width:180px}
  .panel{padding:90px 22px}
  .hero{padding-top:120px}
  .hero-visual{min-height:330px}
  .dashboard{right:0;width:100%;height:280px}
  .floating-icon{width:70px;height:70px;font-size:30px}
  .service-grid,.timeline{grid-template-columns:1fr}
  .timeline:before{display:none}
  .portrait-wrap{height:360px}
  .footer{flex-direction:column;text-align:center}
  .social-links{justify-content:center}
  .footer img{width:68px}
  h1{font-size:50px}
}



/* Separate About page */
.about-hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:50px;
  align-items:center;
  padding-top:150px;
  overflow:hidden;
}

.about-hero:after{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-42px;
  height:84px;
  background:var(--paper);
  border-radius:50% 50% 0 0/100% 100% 0 0;
  z-index:2;
}

.about-hero-copy{
  position:relative;
  z-index:3;
}

.about-portrait-card{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow);
  border-radius:28px;
  padding:28px;
  position:relative;
  z-index:3;
}

.about-copy.wide{
  max-width:980px;
  margin:0 auto;
}

.about-trust .service-grid{
  margin-top:30px;
}

.about-cta{
  text-align:center;
}

.about-cta p{
  max-width:760px;
  margin:20px auto 28px;
}

@media(max-width:980px){
  .about-hero{
    grid-template-columns:1fr;
  }
}


/* Transparent logo refinements */
.brand{
  display:flex;
  align-items:center;
}

.brand img{
  object-fit:contain;
}

.footer img{
  object-fit:contain;
}


/* Footer logo correction */
.footer img{
  width:82px;
  height:auto;
  display:block;
  object-fit:contain;
}



/* Visual Insights fix */
.insights-hero{
  min-height:78vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:50px;
  align-items:center;
  padding-top:150px;
  overflow:hidden;
}
.insights-hero:after,.article-hero:after{
  content:"";
  position:absolute;
  left:-5%;
  right:-5%;
  bottom:-42px;
  height:84px;
  background:var(--paper);
  border-radius:50% 50% 0 0/100% 100% 0 0;
  z-index:2;
}
.insights-hero-copy,.article-heading{position:relative;z-index:3}
.insights-visual{position:relative;z-index:3;min-height:360px}
.insights-board{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow);
  border-radius:32px;
  padding:34px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  transform:rotate(2deg);
}
.insights-board span{
  min-height:110px;
  display:grid;
  place-items:center;
  border-radius:24px;
  background:#eef7ff;
  font-family:Kalam, Inter, sans-serif;
  font-size:30px;
  color:var(--navy);
}
.insight-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  position:relative;
  z-index:3;
}
.insight-card{
  background:rgba(255,255,255,.9);
  border:1px solid rgba(15,36,56,.08);
  box-shadow:var(--shadow);
  border-radius:28px;
  padding:0;
  display:flex;
  flex-direction:column;
  min-height:430px;
  overflow:hidden;
}
.insight-card-visual{
  min-height:150px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,107,95,.20), transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(75,147,209,.22), transparent 30%),
    linear-gradient(180deg,#DFF1FF,#F8FBFF);
  display:grid;
  align-content:center;
  justify-items:center;
  gap:16px;
  padding:24px;
}
.insight-card-visual span{
  font-family:Kalam, Inter, sans-serif;
  font-size:32px;
  color:var(--navy);
}
.mini-bars{display:flex;gap:8px;align-items:end}
.mini-bars i{display:block;width:18px;border-radius:8px 8px 0 0;background:var(--mid-blue)}
.mini-bars i:nth-child(1){height:28px}.mini-bars i:nth-child(2){height:46px;background:var(--coral)}.mini-bars i:nth-child(3){height:36px;background:var(--green)}
.insight-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--mid-blue);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:22px 24px 14px;
}
.insight-card h3{font-size:23px;line-height:1.15;margin:0 24px 12px}
.insight-card p{font-size:16px;margin:0 24px 24px}
.read-more{margin:auto 24px 26px;font-weight:900;color:var(--mid-blue);text-decoration:none}
.article-hero{
  min-height:76vh;
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:42px;
  align-items:center;
  padding-top:150px;
  overflow:hidden;
}
.article-heading{max-width:900px}
.article-heading h1{font-size:clamp(42px,6vw,76px)}
.article-meta{
  margin-top:24px;
  font-size:14px;
  color:var(--mid-blue);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.back-link{display:inline-block;margin-bottom:24px;color:var(--navy);font-weight:800;text-decoration:none}
.article-visual{
  position:relative;
  z-index:3;
  min-height:320px;
  border-radius:32px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--shadow);
  display:grid;
  place-items:center;
  padding:34px;
  transform:rotate(2deg);
}
.article-visual span{
  font-family:Kalam, Inter, sans-serif;
  font-size:42px;
  text-align:center;
}
.article-visual-line{
  width:72%;
  height:8px;
  border-radius:999px;
  background:var(--mid-blue);
}
.article-visual-dots{display:flex;gap:12px}
.article-visual-dots i{width:18px;height:18px;border-radius:50%;background:var(--coral);display:block}
.article-visual-dots i:nth-child(2){background:var(--yellow)}.article-visual-dots i:nth-child(3){background:var(--green)}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start}
.article-content{max-width:880px}
.article-content section{margin-bottom:44px}
.article-content h2{font-size:clamp(32px,4vw,50px);margin-bottom:14px}
.article-content p{font-size:19px}
.article-sidebar{position:sticky;top:130px;display:grid;gap:20px}
.sidebar-card{background:rgba(255,255,255,.9);border:1px solid rgba(15,36,56,.08);box-shadow:var(--shadow);border-radius:28px;padding:24px}
.sidebar-card p{font-size:16px}
.related-card{display:grid;gap:12px}
.related-card a{color:var(--mid-blue);font-weight:800;text-decoration:none;line-height:1.3}
@media(max-width:980px){
  .insights-hero,.article-hero{grid-template-columns:1fr}
  .insight-grid{grid-template-columns:1fr 1fr}
  .article-layout{grid-template-columns:1fr}
  .article-sidebar{position:relative;top:auto}
}
@media(max-width:640px){
  .insight-grid{grid-template-columns:1fr}
  .insights-board{grid-template-columns:1fr}
  .article-hero,.insights-hero{padding-top:120px}
}