/* ================= Global ================= */
:root {
  --accent:#FFC73B;
  --dark-bg:#1C2638;
  --bluegray: rgba(30,45,65,0.95);
  --muted:#ccc;
}

* { box-sizing: border-box; }
html,body { height:100%; scroll-behavior:smooth; }

body {
  margin:0;
  font-family:'Poppins',system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background-color:var(--dark-bg);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

a { color:var(--accent); text-decoration:none; }
a:hover { color:#e7e8e3; }

/* Animated Background */
.animated-background {
  position:fixed; inset:0;
  background: linear-gradient(270deg,#0f2027,#1e3c72);
  background-size:800% 800%;
  animation:gradientAnimation 75s linear infinite;
  z-index:-4;
  opacity:0.9;
}
@keyframes gradientAnimation {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Header & Footer Gradients */
.header-gradient, .footer-gradient {
  background: linear-gradient(270deg, #0f2027, #1e3c72);
  background-size: 600% 600%;
  animation: gradientAnimation 80s ease infinite;
  opacity:0.95;
}

/* Floating shapes */
.floating-shapes {position:fixed; inset:0; pointer-events:none; z-index:-3; overflow:hidden;}
.shape{position:absolute;border-radius:50%;opacity:0.14;filter:blur(120px);mix-blend-mode:screen;transition:transform 0.2s ease-out;}
.shape1{width:320px;height:320px;background:#4a90e2;top:12%;left:10%;}
.shape2{width:380px;height:380px;background:#357ab8;top:55%;left:65%;}
.shape3{width:360px;height:360px;background:#1f4e8c;top:70%;left:25%;}

/* ================= Navbar ================= */
.navbar {
  background-color: var(--bluegray);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 28px;
  position:fixed;
  width:100%;
  top:0;
  z-index:50;
  box-shadow:0 2px 12px rgba(0,0,0,0.35);
}
.logo img {
  height:120px;
  width:auto;
  object-fit:contain;
  transition:transform .2s ease;
}
.logo img:hover {transform:scale(1.02);}
.nav-links {display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center;}
.nav-links a {color:#fff;font-weight:500;padding:6px 0;display:inline-block;}
.nav-links a:hover,.nav-links .active {color:var(--accent);}
.nav-toggle {display:none;background:transparent;border:0;width:34px;height:26px;flex-direction:column;justify-content:space-between;cursor:pointer;}
.nav-toggle span{display:block;height:3px;background:#fff;border-radius:3px;transition:all .25s ease;}

/* ================= Hero (Homepage only) ================= */
.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:120px 20px 60px;
  text-align:center;
  overflow:hidden;
}
.hero-video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  filter:brightness(.48) contrast(.95);
  transform:translateZ(0);
  transition:transform .2s linear;
}
.hero-overlay {position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,20,40,0.25), rgba(10,20,40,0.55));}
.hero-content {position:relative; z-index:2; max-width:900px; padding:24px;}
.hero-content h1 {font-size:2.6rem; margin:0 0 12px; color:var(--accent);}
.hero-content p {font-size:1.12rem; color:#e6e6e6; margin:0 0 18px;}
.btn-primary {
  display:inline-block;
  background:var(--accent);
  color:#1C2638;
  padding:12px 26px;
  border-radius:26px;
  font-weight:600;
  transition:transform .2s ease, background .2s ease;
}
.btn-primary:hover {transform:scale(1.03); background:#ffdb70;}

/* ================= Content Sections ================= */
.content {
  max-width:1100px;
  margin:80px auto;
  padding:0 20px;
  text-align:center;
}
.content h2 {
  color:var(--accent);
  font-size:2rem;
  margin-bottom:14px;
}
.content p {
  color:#d8dbe0;
  max-width:820px;
  margin:0 auto 30px;
  line-height:1.7;
}

/* Service cards (homepage) */
.services .featured-images {display:flex;flex-wrap:wrap;justify-content:center;gap:20px;}
.service-card {
  background:rgba(46,59,85,0.85);
  padding:18px;
  border-radius:14px;
  width:300px;
  box-shadow:0 8px 22px rgba(0,0,0,0.28);
  transition:transform .25s ease;
}
.service-card:hover {transform:translateY(-5px);}
.service-card img {
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:12px;
}
.service-card h3 {color:var(--accent);margin:6px 0;}
.service-card p {color:#d1d6dc;margin-bottom:8px;}
.service-card ul {text-align:left;color:#e1e6eb;padding-left:20px;}

/* Animate on scroll */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0px);
}


/* ================= Page Layouts (new pages) ================= */
main.content {
  text-align:left;
  max-width:1000px;
  padding:0px 20px 80px;
}
main.content h1 {
  color:var(--accent);
  font-size:2.4rem;
  margin-bottom:18px;
  text-align:center;
}
main.content h2 {
  font-size:1.6rem;
  color:var(--accent);
  margin-top:40px;
  margin-bottom:14px;
  text-align:left;
}
main.content h3 {
  color:#ffdb70;
  font-size:1.1rem;
  margin-top:20px;
  margin-bottom:8px;
}
main.content p, main.content ul, main.content ol {
  color:#e2e5eb;
  font-size:1.05rem;
  line-height:1.8;
  margin-bottom:16px;
}
main.content ul, main.content ol {padding-left:20px;}
main.content ul li {margin-bottom:6px;}
main.content ol li {margin-bottom:6px;}
.cta {text-align:center;margin-top:40px;}
.cta .btn-primary {font-size:1rem;}

/* FAQ section for pages */
section h3 + p {margin-bottom:16px;}
section.faq, .faq {
  background:rgba(46,59,85,0.8);
  padding:20px;
  border-radius:14px;
  box-shadow:0 8px 22px rgba(0,0,0,0.25);
}

/* ================= Contact Section ================= */
.contact-section {
  width:100%;
  padding:80px 20px;
  display:flex;
  justify-content:center;
}
.contact-container {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  width:100%;
  max-width:1200px;
  background:rgba(46,59,85,0.85);
  border-radius:16px;
  padding:40px;
  box-shadow:0 8px 22px rgba(0,0,0,0.28);
}
.contact-info h2 {
  color:var(--accent);
  margin-bottom:12px;
  font-size:2rem;
}
.contact-info p {color:#d8dbe0;margin-bottom:20px;line-height:1.6;}
.contact-list {list-style:none;padding:0;margin:0;}
.contact-list li {color:#e1e6eb;margin-bottom:12px;font-size:1.05rem;}
.booking-wrapper {
  background:rgba(28,38,56,0.7);
  border-radius:14px;
  padding:10px;
}

/* ================= Footer ================= */
.site-footer {
  background:var(--bluegray);
  color:var(--muted);
  padding:36px 20px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,0.05);
  margin-top:40px;
}
.footer-copy {margin-top:14px;color:rgba(255,255,255,0.75);font-size:0.94rem;}

/* ================= Responsive ================= */
@media(max-width:900px){
  .hero-content h1{font-size:2.2rem;}
  main.content {padding-top:110px;}
}
@media(max-width:768px){
  .nav-toggle{display:flex;}
  .nav-links{
    position:fixed;
    top:72px;
    right:0;
    width:240px;
    height:calc(100% - 72px);
    padding:22px;
    flex-direction:column;
    gap:18px;
    background:rgba(30,45,65,0.98);
    transform:translateX(110%);
    transition:transform .28s ease;
    z-index:60;
  }
  .nav-links.open{transform:translateX(0);}
  .logo img{height:60px;}
  .service-card{width:100%;max-width:460px;}
  .contact-container{grid-template-columns:1fr;}
}
/* Service Page Hero */
.service-hero {
  position: relative;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 72px; /* accounts for fixed navbar */
}

.service-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* parallax */
  transform: translateZ(0);
}

.service-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,20,40,0.4), rgba(10,20,40,0.75));
}

.service-hero-content {
  position: relative;
  text-align: center;
  z-index: 2;
  padding: 20px;
}

.service-hero-content h1 {
  color: var(--accent);
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.service-hero-content p {
  color: #d8dbe0;
  font-size: 1.1rem;
}

/* ===== Service sections with left image + motion ===== */
.service-section{
  display:flex;
  align-items:flex-start;
  gap:28px;
  margin:40px 0;
  text-align:left;
}

.section-media{
  flex:0 0 180px;
  position:relative;
  min-height:120px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}

.parallax-img img{
  width:160px;
  height:auto;
  display:block;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  background:rgba(46,59,85,0.85);
  padding:12px;
  transform: translateY(0);                /* will be updated by JS */
  transition: transform .6s ease, opacity .6s ease;
  opacity:.98;
}

.section-content{
  flex:1 1 auto;
}

/* nicer spacing on lists next to icons */
.service-section ul, .service-section ol { margin-top:6px; }

/* scroll-reveal you already use, just a little snappier for these rows */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}


/* responsive stack on mobile */
@media (max-width: 900px){
  .service-section{flex-direction:column; align-items:center; text-align:left;}
  .section-media{width:100%; justify-content:center;}
  .parallax-img img{width:140px;}
}
/* ===== Service Page Icon Layout + Parallax Support ===== */

.service-section {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin: 50px 0;
  text-align: left;
}

.section-media {
  flex: 0 0 160px;
  min-height: 120px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.parallax-img img {
  width: 150px;
  height: auto;
  display: block;
  border-radius: 14px;
  background: rgba(46,59,85,0.85);
  padding: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
  transition: transform .6s ease;
}

/* When section becomes visible */
.service-section.animate-on-scroll {
/* Uniform spacing for service sections */
.service-section {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 28px 0; /* consistent vertical spacing */
  border-bottom: 1px solid rgba(255,255,255,0.05); /* subtle divider */
}

/* Remove divider on last section */
.service-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

/* Icon block */
.section-media {
  flex: 0 0 160px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 6px; /* ensures icons start same height */
}

/* Icon visuals */
.parallax-img img {
  width: 140px;
  padding: 14px;
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
  background: rgba(46,59,85,0.85);
}

}

/* ===/* ===== Uniform service icon alignment & spacing ===== */

.service-section {
  display: grid;
  grid-template-columns: 180px 1fr; /* icon column + text column */
  gap: 32px;
  padding: 40px 0;
  align-items: start;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.service-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

/* Icon wrapper */
.section-media {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 8px;
  min-height: 140px; /* keeps space equal for all icons */
}

/* Icon */
.parallax-img img {
  width: 140px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(46,59,85,0.85);
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
  display: block;
}

/* Mobile layout */
@media(max-width:900px){
  .service-section {
    grid-template-columns: 1fr;
    padding: 30px 0;
  }
  
  .section-media {
    justify-content: flex-start;
    min-height: auto;
  }

  .parallax-img img {
    width: 130px;
  }
}
/* ===== Restore animated circuit divider lines for grid layout ===== */
.service-section {
  position: relative;
}

.service-section:not(:last-of-type)::after {
  content: "";
  position: absolute;
  left: 90px; /* aligns with icon center — adjust +/- if needed */
  top: 100%;
  width: 2px;
  height: 70px;
  background: linear-gradient(to bottom, rgba(80,150,255,0.45), rgba(80,150,255,0));
  opacity: .7;
  animation: pulseLine 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulseLine {
  0%,100% { opacity: .35; height: 55px; }
  50%     { opacity: 1; height: 80px; }
}

@media(max-width:900px){
  .service-section:not(:last-of-type)::after {
    display: none;
  }
}

/* --- Pin section content to the top & remove extra top margins --- */
.service-section { align-items: start; padding: 18px 0; gap: 28px; }  /* slightly tighter */
.section-media { align-self: start; padding-top: 0; }                 /* icon starts at top */
.section-content { align-self: start; }                               /* text starts at top */

/* Kill top margin on the first element in each text block */
.section-content > *:first-child { margin-top: 0 !important; }

/* Headings inside sections: no big top gap on first one */
.section-content h2:first-child { margin-top: 0 !important; }

/* For subsequent headings keep a modest gap (not 40px) */
.section-content h2:not(:first-child) { margin-top: 18px; }

/* Tame list/p/ol default top margins so they don’t push down */
.section-content p,
.section-content ul,
.section-content ol { margin-top: 8px; }

/* Optional: make the icon column a touch narrower to visually balance */
@media (min-width: 901px){
  .service-section { grid-template-columns: 160px 1fr; } /* was 180px */
}
/* ===== BA page: grid layout with left motion tiles ===== */
.ba-section{
  display:grid;
  grid-template-columns: 180px 1fr; /* tile + content */
  gap:28px;
  padding:22px 0;
  align-items:start;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.ba-section:last-of-type{ border-bottom:none; padding-bottom:0; }

.ba-media{
  display:flex; justify-content:center; align-items:flex-start;
  min-height:140px; /* keeps column visually even */
}
.ba-content{ align-self:start; }
.ba-content > *:first-child{ margin-top:0; }
.ba-content h2:not(:first-child){ margin-top:18px; }

.parallax-tile img{
  width:150px; height:auto; display:block;
  border-radius:14px;
  /* Transparent tile artwork still benefits from a soft plate */
  background: rgba(30,40,70,0.28);
  backdrop-filter: blur(2px);
  padding:12px;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  transform: translateY(0);
  transition: transform .6s ease, filter .6s ease, opacity .6s ease;
}

/* BA reveal motion (slightly more “AI” than PM) */
.ba-section.animate-on-scroll{ opacity:0; transform: translateY(22px) scale(.985); }
.ba-section.animate-on-scroll.visible{
  opacity:1; transform: translateY(0) scale(1);
  transition: opacity .9s ease, transform .9s cubic-bezier(.19,1,.22,1);
}

/* Neural hero overlay */
.neural-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.0; /* will fade to .45 via JS for “Medium” */
}
.service-hero-content{ position:relative; z-index:2; } /* sit above overlay */

/* ==========================================================
   BUSINESS ANALYSIS — ALIGN TYPOGRAPHY & SPACING WITH PM PAGE
   ========================================================== */

/* Match top position of content to PM */
body.business-analysis-page .content {
  padding-top: 0px !important;
}

/* Normalize section vertical rhythm */
body.business-analysis-page .ba-section {
  padding: 16px 0 !important;
}

/* Match PM headline sizing */
body.business-analysis-page .ba-content h2 {
  font-size: 1.65rem !important;
  margin-top: 0 !important;
}

/* Match PM paragraph and bullet sizing */
body.business-analysis-page .ba-content p,
body.business-analysis-page .ba-content ul,
body.business-analysis-page .ba-content li {
  font-size: 2rem !important;
  line-height: 1.6 !important;
}

/* Ensure text starts at same height as PM */
body.business-analysis-page .ba-media,
body.business-analysis-page .ba-content {
  margin-top: 0 !important;
}

/* icon tile consistency */
body.business-analysis-page .ba-tile {
  width: 170px;
  padding: 12px;
}
/* === Handshake overlay fixed & animated === */
.handshake-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 20;
}

/* Τα ίδια .hand-left / .hand-right που έχεις ήδη,
   απλά τώρα θα "πατάνε" πάνω στο fixed overlay */
.handshake-overlay .hand-left,
.handshake-overlay .hand-right {
  position: absolute;
  top: 50%;
  width: 380px;
  max-width: 40vw;
  transform: translateY(-50%);
  opacity: calc(var(--hand-opacity, 1) * 0.7) !important;
  will-change: transform, opacity;
}

.handshake-overlay .hand-left {
  left: 150px;
  transform: translate(calc(-40% + var(--dx-left, 0px)), -50%);
}

.handshake-overlay .hand-right {
  right: 150px;
  transform: translate(calc(40% - var(--dx-right, 0px)), -50%);
}


.handshake-overlay .hand-light {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: var(--flash, 0);
  pointer-events: none;
}

.handshake-overlay .hand-light::after {
  content: "";
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.95) 0%,
    rgba(0,200,255,0) 65%);
  filter: blur(22px);
  transform: scale(var(--flash-scale, 1));
}
/* ===== MOBILE HANDSHAKE FIX ===== */
@media (max-width: 768px) {

  .handshake-overlay .hand-left,
  .handshake-overlay .hand-right {
    width: 220px;                /* smaller hands */
    max-width: 48vw;             /* scale nicely on mobile */
    opacity: calc(var(--hand-opacity, 1) * 0.28) !important; 
    filter: blur(1px);           /* softer look */
  }

  .handshake-overlay .hand-left {
    left: 20px;                   /* start further inside */
    transform: translate(calc(-50% + var(--dx-left, 0px)), -50%);
  }

  .handshake-overlay .hand-right {
    right: 20px;
    transform: translate(calc(50% - var(--dx-right, 0px)), -50%);
  }

  /* optional: reduce flash intensity */
  .handshake-overlay .hand-light::after {
    width: 180px;
    height: 180px;
    opacity: 0.6;
  }
}

@media(max-width:768px){
  .navbar{
    padding:10px 18px;
  }

  .logo img{
    height:90px !important;
  }

  .nav-links{
    gap:14px;
    padding-top:26px;
  }
}

@media(max-width:768px){
  .hero {
    padding-top:140px;
    min-height:80vh;
  }

  .hero-video {
    object-fit:cover;
    filter:brightness(.40);
  }

  .hero-content h1{
    font-size:1.8rem;
  }

  .hero-content p{
    font-size:1rem;
  }
}

@media(max-width:900px){
  #about > div {
    flex-wrap:wrap !important;
    gap:20px !important;
  }

  #about > div > div:first-child {
    width:100%;
    justify-content:center;
  }

  #about svg{
    width:120px;
    margin:0 auto;
  }
}

@media(max-width:768px){
  .featured-images{
    flex-direction:column;
    align-items:center;
  }

  .service-card{
    width:100%;
    max-width:360px;
  }
}

@media(max-width:768px){
  .contact-container{
    padding:20px;
  }
  .booking-wrapper{
    height:auto;
  }
}
//* Hide SVG in mobile */
@media(max-width: 768px){
  #about svg {
    display: none !important;
  }

  /* Αφαιρούμε και το κενό container */
  #about > div > div:first-child {
    display: none !important;
  }

  /* Το κείμενο να πιάνει όλο το πλάτος */
  #about > div {
    flex-direction: column !important;
    gap: 20px !important;
  }
}
@media(max-width: 768px){
  /* Κρύβουμε ΚΑΙ το SVG ΚΑΙ τα δύο containers του */
  #about > div > div:first-child,
  #about > div > div:first-child > div,
  #about svg {
    display: none !important;
  }
}
/* ================================
   BUSINESS ANALYSIS — MOBILE FIX
   ================================ */

/* 1) Fix wrong BA font sizing caused by global overrides */
body.business-analysis-page .ba-content p,
body.business-analysis-page .ba-content ul,
body.business-analysis-page .ba-content li {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}

/* 2) Ensure BA layout is stable and predictable */
.ba-section {
  display: grid !important;
  grid-template-columns: 180px 1fr !important;
  gap: 28px !important;
  padding: 24px 0 !important;
  align-items: start !important;
}

/* 3) Fix the tile icon block */
.ba-media {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  min-height: 140px !important;
}

/* 4) Mobile stack for BA page ONLY */
@media(max-width: 900px) {
  .ba-section {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .ba-media {
    min-height: 0 !important;
    justify-content: flex-start !important;
  }
  .ba-tile {
    width: 120px !important;
  }
}

/* 5) Ensure section content aligns properly */
.ba-content > *:first-child {
  margin-top: 0 !important;
}

/* 6) Fix divider spacing carried over from PM page */
body.business-analysis-page .service-section {
  border-bottom: none !important;
  padding: 0 !important;
}
/* =====================
   UNIFIED SERVICE LAYOUT
   (BA / PM / AI PAGES)
   ===================== */

.service-section {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  align-items: start;
}

.service-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

/* Icon block */
.section-media {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0;
  min-height: 120px;
}

.parallax-img img {
  width: 140px;
  height: auto;
  border-radius: 16px;
  background: rgba(46,59,85,0.85);
  padding: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

/* Content rules */
.section-content > *:first-child {
  margin-top: 0 !important;
}

.section-content h2:not(:first-child) {
  margin-top: 18px;
}

/* Mobile stack */
@media(max-width: 900px) {
  .service-section {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px 0;
  }

  .section-media {
    justify-content: flex-start;
    min-height: auto;
  }

  .parallax-img img {
    width: 120px;
  }
}

/* Remove animated dividers in mobile */
@media(max-width:900px){
  .service-section:not(:last-of-type)::after {
    display: none !important;
  }
}
/* ====================================
   BUSINESS ANALYSIS FIX – TYPOGRAPHY
   ==================================== */

body.business-analysis-page .ba-content p,
body.business-analysis-page .ba-content ul,
body.business-analysis-page .ba-content li {
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}

/* Ensure grid alignment stays clean */
body.business-analysis-page .ba-section {
  grid-template-columns: 160px 1fr !important;
  padding: 26px 0 !important;
  gap: 28px !important;
}

@media(max-width:900px){
  body.business-analysis-page .ba-section {
    grid-template-columns: 1fr !important;
    padding: 20px 0 !important;
  }
}
/* ====================================
   HOME PAGE – REMOVE SVG ON MOBILE
   ==================================== */
@media(max-width: 900px){
  /* hide the entire left column (SVG + containers) */
  #about > div > div:first-child {
    display: none !important;
  }

  /* ensure text takes full width */
  #about > div {
    flex-direction: column !important;
    gap: 20px !important;
  }
}
/* Home hero mobile spacing fix */
@media(max-width: 900px){
  .hero {
    padding-top: 140px !important;
  }
}
/* Mobile nav jump fix */
@media(max-width: 900px){
  header.navbar {
    backdrop-filter: blur(12px);
  }
}
/* ====================================
   PM + AI PAGE LAYOUT UNIFICATION
   ==================================== */

/* General section layout (same as BA) */
.pm-section,
.ai-section {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  align-items: start;
}

.pm-section:last-of-type,
.ai-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

/* Icon blocks (align with BA look) */
.pm-media,
.ai-media {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0;
  min-height: 120px;
}

.pm-media img,
.ai-media img {
  width: 140px;
  height: auto;
  border-radius: 16px;
  background: rgba(46,59,85,0.85);
  padding: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
}

/* Content structure */
.pm-content > *:first-child,
.ai-content > *:first-child {
  margin-top: 0 !important;
}

/* Remove weird top margins that existed in PM */
.pm-section h2 {
  margin-top: 0 !important;
}

/* Mobile rules */
@media(max-width:900px){
  .pm-section,
  .ai-section {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px 0;
  }

  .pm-media,
  .ai-media {
    justify-content: flex-start;
    min-height: auto;
  }

  .pm-media img,
  .ai-media img {
    width: 120px;
  }

  /* Remove section divider animation in mobile */
  .pm-section:not(:last-of-type)::after,
  .ai-section:not(:last-of-type)::after {
    display: none !important;
  }
}
/* Mobile performance: remove heavy blur */
@media(max-width:900px){
  header.navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: rgba(0,0,0,0.55) !important;
  }
}
/* Force GPU compositing on critical elements */
.hero,
.service-hero-bg,
.parallax-img img {
  transform: translateZ(0);
}
@media(max-width:900px){
  .service-hero-bg {
    background-attachment: scroll !important;
  }
}
/* Fix section anchor offset (due to fixed navbar) */
#about,
#services,
#contact {
  scroll-margin-top: 160px;
}

@media(max-width:900px){
  #about,
  #services,
  #contact {
    scroll-margin-top: 150px;
  }
}