/* =========================
GLOBAL
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Poppins', sans-serif;
  background:#021a30;
  color:#ffffff;
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
}

body.loading{
  overflow:hidden;
}

/* =========================
PRELOADER
========================= */

.preloader{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  z-index:9999;
  background:
    radial-gradient(
      circle at top left,
      rgba(114,183,218,0.22),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #021a30,
      #043968
    );
  opacity:1;
  visibility:visible;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.preloader::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      rgba(255,255,255,0.02) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.02) 1px,
      transparent 1px
    );
  background-size:70px 70px;
  animation:preloaderGrid 3s linear infinite;
}

.preloader.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.preloader-content{
  position:relative;
  display:grid;
  justify-items:center;
  gap:24px;
  padding:30px;
  text-align:center;
}

.preloader-content img{
  width:230px;
  max-width:76vw;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,0.28));
}

.preloader-orbit{
  position:relative;
  width:96px;
  height:96px;
  border:1px solid rgba(114,183,218,0.25);
  border-radius:50%;
}

.preloader-orbit::before,
.preloader-orbit::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:50%;
  border:2px solid transparent;
  border-top-color:#72B7DA;
  animation:preloaderSpin 1s linear infinite;
}

.preloader-orbit::after{
  inset:24px;
  border-top-color:#ffffff;
  animation-duration:1.6s;
  animation-direction:reverse;
}

.preloader-orbit span{
  position:absolute;
  inset:36px;
  border-radius:50%;
  background:#72B7DA;
  box-shadow:0 0 28px rgba(114,183,218,0.75);
  animation:preloaderPulse 1.35s ease-in-out infinite;
}

.preloader-content p{
  color:#d8e5ef;
  font-size:15px;
  font-weight:500;
}

@keyframes preloaderGrid{

  from{
    transform:translate(0,0);
  }

  to{
    transform:translate(-70px,-70px);
  }

}

@keyframes preloaderSpin{

  to{
    transform:rotate(360deg);
  }

}

@keyframes preloaderPulse{

  0%,
  100%{
    transform:scale(0.72);
    opacity:0.65;
  }

  50%{
    transform:scale(1);
    opacity:1;
  }

}

@media(prefers-reduced-motion:reduce){

  .preloader::before,
  .preloader-orbit::before,
  .preloader-orbit::after,
  .preloader-orbit span,
  .home-two-ribbons span,
  .home-two-kicker::before,
  .home-two-copy h1 span,
  .main-stage-card,
  .mini-card,
  .stage-hero-line,
  .stage-grid span,
  .stage-wave,
  .home-two-scroll-cue span::before,
  .footer::before,
  .footer::after{
    animation:none;
  }

  .preloader{
    transition:opacity 0.2s ease;
  }

}

/* =========================
TECH BACKGROUND
========================= */

.tech-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;

  background:
    linear-gradient(
      rgba(255,255,255,0.015) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.015) 1px,
      transparent 1px
    );

  background-size:80px 80px;
  background-color:#021a30;
}

.tech-bg::before{
  content:"";
  position:absolute;
  width:900px;
  height:900px;
  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(114,183,218,0.18),
      transparent 70%
    );

  top:-250px;
  left:-250px;

  animation:floatGlow 12s ease-in-out infinite;
}

.tech-bg::after{
  content:"";
  position:absolute;
  width:700px;
  height:700px;
  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(114,183,218,0.12),
      transparent 70%
    );

  bottom:-200px;
  right:-200px;

  animation:floatGlowTwo 15s ease-in-out infinite;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;

  background:
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 120px,
      rgba(114,183,218,0.03) 122px,
      transparent 124px
    );

  animation:moveTechLines 20s linear infinite;
}

@keyframes floatGlow{

  0%{
    transform:translate(0,0);
  }

  50%{
    transform:translate(60px,40px);
  }

  100%{
    transform:translate(0,0);
  }

}

@keyframes floatGlowTwo{

  0%{
    transform:translate(0,0);
  }

  50%{
    transform:translate(-40px,-60px);
  }

  100%{
    transform:translate(0,0);
  }

}

@keyframes moveTechLines{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-120px);
  }

}

/* =========================
GENERAL
========================= */

section{
  padding:120px 8%;
}

img{
  max-width:100%;
  display:block;
}

.section-title{
  text-align:center;
  margin-bottom:70px;
}

.section-title span{
  color:#72B7DA;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:14px;
  font-weight:600;
}

.section-title h2{
  font-size:42px;
  line-height:1.2;
  margin:15px 0;
}

.section-title p{
  max-width:760px;
  margin:auto;
  color:#c5d7e6;
}

.section-mini-title{
  color:#72B7DA;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:600;
}

/* =========================
BUTTONS
========================= */

.primary-btn{
  display:inline-block;
  background:#72B7DA;
  color:#043968;
  text-decoration:none;
  padding:16px 36px;
  border-radius:50px;
  font-weight:600;
  transition:0.3s;
}

.primary-btn:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 40px rgba(114,183,218,0.25);
}

.secondary-btn{
  display:inline-block;
  border:1px solid #72B7DA;
  color:#72B7DA;
  text-decoration:none;
  padding:16px 36px;
  border-radius:50px;
  font-weight:600;
  transition:0.3s;
}

.secondary-btn:hover{
  background:#72B7DA;
  color:#043968;
}

.consultation-btn{
  background:#ffffff;
  color:#043968;
}

.consultation-btn:hover{
  box-shadow:0 20px 40px rgba(255,255,255,0.18);
}

/* =========================
BACK TO TOP
========================= */

.back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:#72B7DA;
  color:#043968;
  cursor:pointer;
  font-size:18px;
  opacity:0;
  visibility:hidden;
  transform:translateY(18px);
  transition:0.3s;
  z-index:1200;
  box-shadow:0 18px 34px rgba(0,0,0,0.25);
}

.back-to-top.active{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.back-to-top:hover{
  transform:translateY(-5px);
}

/* =========================
NAVBAR
========================= */

.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:20px 6%;

  background:rgba(2,26,48,0.92);
  backdrop-filter:blur(14px);

  z-index:1000;

  border-bottom:1px solid rgba(255,255,255,0.05);
}

.logo-image{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.logo-image img{
  width:220px;
  max-width:100%;
}

.menu-toggle{
  display:none;
  font-size:28px;
  cursor:pointer;
  color:#72B7DA;
  z-index:1100;
}

nav{
  display:flex;
  align-items:center;
  margin-left:auto;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:40px;
  list-style:none;
}

.nav-links a{
  color:#ffffff;
  text-decoration:none;
  font-size:16px;
  font-weight:600;
  transition:none;
}

.nav-links a:hover{
  color:#72B7DA;
}

.nav-links a.active-link{
  color:#72B7DA;
}

.nav-dropdown{
  position:relative;
}

.nav-dropdown-toggle{
  display:flex;
  align-items:center;
  gap:8px;
}

.nav-dropdown-toggle i{
  font-size:11px;
  transition:none;
}


.nav-dropdown-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  width:min(1100px,92vw);
  background:rgba(2,32,58,0.98);
  border:1px solid rgba(114,183,218,0.12);
  border-radius:28px;
  padding:32px;
  display:none;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:none;
  backdrop-filter:blur(18px);
  box-shadow:0 30px 80px rgba(0,0,0,0.35);
  z-index:999;
  overflow:hidden;
}

.nav-dropdown-menu::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 0%, rgba(114,183,218,0.24), transparent 34%),
    linear-gradient(90deg, rgba(255,255,255,0.05), transparent 45%);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  display:grid;
  transform:translateX(-50%);
  top:100%;
}

.nav-dropdown:hover .nav-dropdown-toggle i,
.nav-dropdown:focus-within .nav-dropdown-toggle i{
  transform:none;
}

.nav-dropdown-menu li{
  width:100%;
  list-style:none;
}

.nav-dropdown-menu a{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.04);
  transition:none;
  width:100%;
  white-space:normal;
  line-height:1.5;
  min-height:auto;
}

.nav-dropdown-menu a:hover{
  background:rgba(114,183,218,0.08);
  border-color:rgba(114,183,218,0.18);
  transform:none;
}

.nav-dropdown-menu a > i{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  color:#72B7DA;
  background:rgba(114,183,218,0.14);
  font-size:18px;
  flex-shrink:0;
}

.nav-dropdown-menu span{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.nav-dropdown-menu strong{
  color:#ffffff;
  font-size:1rem;
  line-height:1.4;
}

.nav-dropdown-menu small{
  color:rgba(255,255,255,0.72);
  font-size:0.9rem;
  line-height:1.5;
}




.nav-btn{
  background:#72B7DA;
  color:#043968 !important;
  padding:12px 22px;
  border-radius:50px;
  font-weight:800;
  white-space:nowrap;
}

/* =========================
HERO
========================= */

.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:80px;
  padding-top:180px;
}

.hero-content h1{
  font-size:52px;
  line-height:1.15;
  margin:20px 0;
  max-width:680px;
}

.hero-content p{
  font-size:18px;
  color:#c5d7e6;
  max-width:650px;
  margin-bottom:35px;
}

.hero-tag{
  display:inline-block;
  background:rgba(114,183,218,0.15);
  color:#72B7DA;
  padding:10px 18px;
  border-radius:50px;
  border:1px solid rgba(114,183,218,0.2);
  font-size:14px;
}

.hero-buttons{
  display:flex;
  gap:20px;
  margin-bottom:45px;
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  max-width:620px;
}

.stat-box{
  display:flex;
  min-height:150px;
  flex-direction:column;
  justify-content:center;
  background:rgba(4,57,104,0.85);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.05);
  padding:22px;
  border-radius:20px;
}

.stat-box h3{
  font-size:clamp(30px, 3vw, 44px);
  line-height:1;
  color:#72B7DA;
}

.stat-box p{
  color:#d8e5ef;
  margin-top:12px;
  margin-bottom:0;
  font-size:15px;
  line-height:1.45;
}

/* =========================
HERO IMAGE
========================= */

.hero-image{
  position:relative;
}

.hero-image img{
  width:100%;
  border-radius:30px;
  box-shadow:0 30px 60px rgba(0,0,0,0.35);
}

.floating-card{
  position:absolute;
  background:#ffffff;
  color:#043968;
  padding:16px 24px;
  border-radius:16px;
  font-weight:600;
  box-shadow:0 20px 40px rgba(0,0,0,0.2);
}

.card-one{
  top:40px;
  left:-40px;
}

.card-two{
  bottom:40px;
  right:-20px;
}

/* =========================
HOME 2 EXPERIMENT
========================= */

.home-two-page{
  background:#011a31;
}

.home-two-hero{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(360px, 0.85fr);
  align-items:center;
  gap:70px;
  overflow:hidden;
  padding:180px 8% 110px;
  isolation:isolate;
}

.home-two-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-3;
}

.home-two-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(
      115deg,
      rgba(2,26,48,0.86),
      rgba(1,26,49,0.52) 48%,
      rgba(4,57,104,0.5)
    );
}

.home-two-ribbons{
  position:absolute;
  inset:-10%;
  z-index:-1;
  pointer-events:none;
}

.home-two-ribbons span{
  position:absolute;
  width:74%;
  height:12%;
  border:1px solid rgba(114,183,218,0.18);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(114,183,218,0.16),
    rgba(255,255,255,0.06),
    transparent
  );
  transform:rotate(-16deg);
  animation:ribbonDrift 13s ease-in-out infinite alternate;
}

.home-two-ribbons span:nth-child(1){
  top:16%;
  left:-24%;
}

.home-two-ribbons span:nth-child(2){
  top:48%;
  right:-22%;
  animation-delay:-4s;
  animation-duration:16s;
}

.home-two-ribbons span:nth-child(3){
  bottom:7%;
  left:12%;
  animation-delay:-8s;
  animation-duration:18s;
}

.home-two-copy{
  position:relative;
  z-index:2;
}

.home-two-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(114,183,218,0.3);
  background:rgba(114,183,218,0.12);
  color:#72B7DA;
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}

.home-two-kicker::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:#72B7DA;
  box-shadow:0 0 18px rgba(114,183,218,0.9);
  animation:kickerPulse 1.4s ease-in-out infinite;
}

.home-two-copy h1{
  max-width:780px;
  margin:26px 0;
  font-size:clamp(42px, 5vw, 78px);
  line-height:1.02;
  letter-spacing:0;
}

.home-two-copy h1 span{
  display:block;
  color:#72B7DA;
  text-shadow:0 0 34px rgba(114,183,218,0.28);
  animation:titleGlow 3.8s ease-in-out infinite;
}

.home-two-copy p{
  max-width:720px;
  color:#d6e3ed;
  font-size:19px;
  margin-bottom:36px;
}

.home-two-actions{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-bottom:42px;
}

.home-two-proof{
  display:grid;
  grid-template-columns:repeat(3, minmax(120px, 1fr));
  gap:16px;
  max-width:680px;
}

.home-two-proof div{
  padding:18px;
  border-radius:18px;
  background:rgba(4,57,104,0.64);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(12px);
}

.home-two-proof strong{
  display:block;
  color:#72B7DA;
  font-size:30px;
  line-height:1;
}

.home-two-proof span{
  display:block;
  color:#d8e5ef;
  font-size:13px;
  margin-top:8px;
}

.home-two-stage{
  position:relative;
  min-height:650px;
  perspective:1100px;
}

.stage-card{
  background:rgba(4,57,104,0.78);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 34px 90px rgba(0,0,0,0.38);
  backdrop-filter:blur(18px);
}

.main-stage-card{
  position:absolute;
  top:50%;
  right:0;
  width:min(560px, 100%);
  overflow:hidden;
  border-radius:34px;
  transform:translateY(-50%) rotateX(8deg) rotateY(-14deg);
  animation:stageFloat 5.8s ease-in-out infinite;
}

.stage-browser{
  display:flex;
  gap:8px;
  padding:18px 20px;
  background:rgba(2,26,48,0.72);
}

.stage-browser span{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#72B7DA;
}

.stage-browser span:nth-child(2){
  opacity:0.65;
}

.stage-browser span:nth-child(3){
  opacity:0.36;
}

.stage-screen{
  position:relative;
  min-height:390px;
  padding:42px;
  overflow:hidden;
}

.stage-hero-line{
  height:22px;
  width:76%;
  border-radius:999px;
  background:#72B7DA;
  box-shadow:0 0 30px rgba(114,183,218,0.35);
  animation:lineScan 3.5s ease-in-out infinite;
}

.stage-hero-line.short{
  width:48%;
  height:14px;
  margin-top:16px;
  opacity:0.62;
  animation-delay:-1.2s;
}

.stage-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:46px;
}

.stage-grid span{
  min-height:126px;
  border-radius:22px;
  background:linear-gradient(
    160deg,
    rgba(114,183,218,0.38),
    rgba(255,255,255,0.06)
  );
  animation:panelLift 4s ease-in-out infinite;
}

.stage-grid span:nth-child(2){
  animation-delay:-1.2s;
}

.stage-grid span:nth-child(3){
  animation-delay:-2.4s;
}

.stage-wave{
  position:absolute;
  left:-20%;
  bottom:0;
  width:140%;
  height:130px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(114,183,218,0.22),
    transparent
  );
  transform:skewY(-8deg);
  animation:waveSweep 4.8s linear infinite;
}

.mini-card{
  position:absolute;
  display:grid;
  gap:8px;
  width:220px;
  padding:22px;
  border-radius:24px;
  animation:miniFloat 4.5s ease-in-out infinite;
}

.mini-card i{
  color:#72B7DA;
  font-size:28px;
}

.mini-card strong{
  color:#ffffff;
  font-size:18px;
}

.mini-card span{
  color:#d8e5ef;
  font-size:13px;
}

.mini-card-one{
  top:46px;
  left:10px;
}

.mini-card-two{
  right:-12px;
  bottom:70px;
  animation-delay:-1.5s;
}

.mini-card-three{
  left:54px;
  bottom:0;
  animation-delay:-3s;
}

.home-two-scroll-cue{
  position:absolute;
  left:50%;
  bottom:30px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#c5d7e6;
  font-size:13px;
  transform:translateX(-50%);
}

.home-two-scroll-cue span{
  width:18px;
  height:34px;
  border:1px solid rgba(255,255,255,0.35);
  border-radius:999px;
  position:relative;
}

.home-two-scroll-cue span::before{
  content:"";
  position:absolute;
  left:50%;
  top:7px;
  width:4px;
  height:8px;
  border-radius:999px;
  background:#72B7DA;
  transform:translateX(-50%);
  animation:scrollDot 1.5s ease-in-out infinite;
}

.home-two-trust{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:55px 8%;
  background:rgba(3,36,66,0.8);
  text-align:center;
}

.home-two-trust p{
  color:#72B7DA;
  font-size:18px;
  font-weight:600;
}

.audit-section{
  position:relative;
  overflow:hidden;
  padding:90px 8%;
  background:
    radial-gradient(circle at 12% 22%, rgba(114,183,218,0.18), transparent 34%),
    radial-gradient(circle at 88% 70%, rgba(255,255,255,0.08), transparent 28%),
    rgba(3,36,66,0.78);
}

.audit-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(114,183,218,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114,183,218,0.06) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events:none;
}

.audit-shell{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:44px;
  align-items:center;
  max-width:1220px;
  margin:0 auto;
}

.audit-copy h2{
  max-width:680px;
  margin:18px 0;
  font-size:46px;
  line-height:1.15;
}

.audit-copy p{
  max-width:620px;
  color:#d2e0ea;
}

.audit-signals{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-top:30px;
}

.audit-signals span{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(4,57,104,0.72);
  border:1px solid rgba(114,183,218,0.18);
  color:#eaf6ff;
  font-size:14px;
  font-weight:700;
}

.audit-signals i{
  color:#72B7DA;
}

.audit-form{
  position:relative;
  overflow:hidden;
}

.audit-form::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(114,183,218,0.12), transparent 38%);
  pointer-events:none;
}

.audit-form > *{
  position:relative;
  z-index:1;
}

.audit-section-compact{
  padding:68px 8%;
}

.audit-section-compact .audit-shell{
  grid-template-columns:1fr 1fr;
  gap:34px;
}

.audit-section-compact .audit-copy h2{
  max-width:520px;
  font-size:38px;
}

.audit-section-compact .audit-copy p{
  max-width:520px;
  margin-bottom:0;
}

.performance-checker-shell{
  align-items:start;
}

.performance-checker-card{
  display:grid;
  gap:28px;
}

.performance-checker-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.checker-question{
  margin-bottom:0;
}

.checker-question-wide{
  grid-column:1 / -1;
}

.checker-message{
  min-height:24px;
  margin-top:14px;
  color:#72B7DA;
  font-size:14px;
  font-weight:700;
}

.checker-message.is-error{
  color:#ffb4b4;
}

.checker-result{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:24px;
  align-items:center;
  padding:26px;
  border-radius:26px;
  background:rgba(2,26,48,0.76);
  border:1px solid rgba(114,183,218,0.24);
}

.checker-result[hidden]{
  display:none;
}

.checker-score{
  aspect-ratio:1;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(114,183,218,0.2), rgba(4,57,104,0.92)),
    rgba(4,57,104,0.92);
  border:1px solid rgba(114,183,218,0.38);
  box-shadow:0 0 45px rgba(114,183,218,0.18);
}

.checker-score strong{
  display:block;
  color:#ffffff;
  font-size:44px;
  line-height:1;
}

.checker-score span{
  display:block;
  margin-top:8px;
  color:#72B7DA;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.4px;
}

.checker-result-copy > span{
  display:inline-flex;
  margin-bottom:10px;
  color:#72B7DA;
  font-size:13px;
  font-weight:800;
  word-break:break-word;
}

.checker-result-copy h3{
  font-size:25px;
  margin-bottom:10px;
}

.checker-result-copy p{
  color:#d8e5ef;
  margin-bottom:16px;
}

.checker-result-copy ul{
  display:grid;
  gap:10px;
  margin-bottom:22px;
  list-style:none;
}

.checker-result-copy li{
  position:relative;
  padding-left:24px;
  color:#d6e3ed;
}

.checker-result-copy li::before{
  content:"";
  position:absolute;
  top:10px;
  left:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#72B7DA;
  box-shadow:0 0 14px rgba(114,183,218,0.65);
}

.client-resources-grid{
  grid-template-columns:repeat(4, 1fr);
}

.home-two-momentum-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

.momentum-card{
  padding:36px;
  border-radius:28px;
  background:rgba(4,57,104,0.82);
  border:1px solid rgba(255,255,255,0.07);
  transition:0.3s;
}

.momentum-card:hover{
  transform:translateY(-10px);
  border-color:rgba(114,183,218,0.42);
  box-shadow:0 24px 50px rgba(0,0,0,0.2);
}

.momentum-card i{
  color:#72B7DA;
  font-size:32px;
  margin-bottom:22px;
}

.momentum-card h3{
  font-size:24px;
  margin-bottom:12px;
}

.momentum-card p{
  color:#d6e3ed;
}

.home-two-value{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

.home-two-value-visual{
  position:relative;
}

.home-two-value-visual img{
  width:100%;
  min-height:520px;
  object-fit:cover;
  border-radius:34px;
  box-shadow:0 32px 70px rgba(0,0,0,0.34);
}

.value-orbit{
  position:absolute;
  border:1px solid rgba(114,183,218,0.32);
  border-radius:50%;
  animation:valueOrbit 8s linear infinite;
}

.orbit-one{
  inset:8%;
}

.orbit-two{
  inset:18%;
  animation-direction:reverse;
  animation-duration:11s;
}

.value-orbit::before{
  content:"";
  position:absolute;
  top:-5px;
  left:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#72B7DA;
  box-shadow:0 0 18px rgba(114,183,218,0.9);
}

.home-two-value-content h2{
  font-size:44px;
  line-height:1.2;
  margin:20px 0;
}

.home-two-value-content p{
  color:#d2e0ea;
  margin-bottom:30px;
}

.home-two-checks{
  display:grid;
  gap:14px;
}

.home-two-checks span{
  position:relative;
  padding:18px 22px 18px 52px;
  border-radius:18px;
  background:rgba(4,57,104,0.78);
  border:1px solid rgba(255,255,255,0.06);
}

.home-two-checks span::before{
  content:"";
  position:absolute;
  left:22px;
  top:50%;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#72B7DA;
  box-shadow:0 0 16px rgba(114,183,218,0.85);
  transform:translateY(-50%);
}

.home-two-services,
.home-two-process,
.home-two-testimonials{
  background:rgba(3,36,66,0.35);
}

.home-two-service-grid,
.home-two-testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

.home-two-service-card,
.home-two-testimonial-card{
  position:relative;
  overflow:hidden;
  padding:36px;
  border-radius:28px;
  background:rgba(4,57,104,0.82);
  border:1px solid rgba(255,255,255,0.07);
  color:#ffffff;
  text-decoration:none;
  transition:0.3s;
}

.home-two-service-card::before,
.home-two-testimonial-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(114,183,218,0.14),
    transparent
  );
  transform:translateX(-120%);
  transition:0.7s;
}

.home-two-service-card:hover,
.home-two-testimonial-card:hover{
  transform:translateY(-10px);
  border-color:rgba(114,183,218,0.42);
  box-shadow:0 26px 54px rgba(0,0,0,0.22);
}

.home-two-service-card:hover::before,
.home-two-testimonial-card:hover::before{
  transform:translateX(120%);
}

.home-two-service-card i{
  color:#72B7DA;
  font-size:34px;
  margin-bottom:24px;
}

.home-two-service-card h3,
.home-two-testimonial-card h3{
  font-size:24px;
  margin-bottom:14px;
}

.home-two-service-card p,
.home-two-testimonial-card p{
  color:#d6e3ed;
}

.home-two-testimonial-card h3{
  color:#72B7DA;
  margin-top:24px;
  margin-bottom:0;
}

.home-two-process-line{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.home-two-process-step{
  position:relative;
  padding:34px;
  border-radius:26px;
  background:rgba(4,57,104,0.82);
  border:1px solid rgba(255,255,255,0.07);
  transition:0.3s;
}

.home-two-process-step:hover{
  transform:translateY(-10px) scale(1.02);
  border-color:rgba(114,183,218,0.42);
}

.home-two-process-step span{
  display:inline-flex;
  width:54px;
  height:54px;
  align-items:center;
  justify-content:center;
  margin-bottom:22px;
  border-radius:50%;
  background:#72B7DA;
  color:#043968;
  font-weight:800;
}

.home-two-process-step h3{
  margin-bottom:12px;
}

.home-two-process-step p{
  color:#d6e3ed;
}

.home-two-portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}

.home-two-project-card{
  position:relative;
  aspect-ratio:1252 / 1350;
  min-height:0;
  overflow:hidden;
  border-radius:30px;
  color:#ffffff;
  text-decoration:none;
  isolation:isolate;
  transition:0.35s;
}

.home-two-project-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
  z-index:-2;
  transition:0.6s;
}

.home-two-project-card::before{
  display:none;
}

.home-two-project-card span{
  position:absolute;
  left:24px;
  right:24px;
  bottom:24px;
  font-size:20px;
  font-weight:800;
}

.home-two-project-card:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 60px rgba(0,0,0,0.28);
}

.home-two-project-card:hover img{
  transform:scale(1.08) rotate(1deg);
}

.home-two-center-action{
  margin-top:48px;
  text-align:center;
}

@keyframes valueOrbit{

  to{
    transform:rotate(360deg);
  }

}

@keyframes ribbonDrift{

  from{
    transform:translate3d(-3%, -2%, 0) rotate(-16deg);
  }

  to{
    transform:translate3d(6%, 4%, 0) rotate(-10deg);
  }

}

@keyframes kickerPulse{

  50%{
    transform:scale(1.45);
    opacity:0.45;
  }

}

@keyframes titleGlow{

  50%{
    text-shadow:0 0 52px rgba(114,183,218,0.56);
  }

}

@keyframes stageFloat{

  50%{
    transform:translateY(calc(-50% - 18px)) rotateX(5deg) rotateY(-8deg);
  }

}

@keyframes miniFloat{

  50%{
    transform:translateY(-18px);
  }

}

@keyframes lineScan{

  50%{
    width:92%;
    opacity:0.76;
  }

}

@keyframes panelLift{

  50%{
    transform:translateY(-12px);
    background:linear-gradient(
      160deg,
      rgba(114,183,218,0.55),
      rgba(255,255,255,0.08)
    );
  }

}

@keyframes waveSweep{

  from{
    transform:translateX(-20%) skewY(-8deg);
  }

  to{
    transform:translateX(20%) skewY(-8deg);
  }

}

@keyframes scrollDot{

  50%{
    transform:translate(-50%, 12px);
    opacity:0.35;
  }

}

/* =========================
PAGE HERO
========================= */

.page-hero{
  min-height:88vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:80px;
  padding-top:180px;
}

.page-hero-content h1{
  font-size:52px;
  line-height:1.15;
  margin:20px 0;
  max-width:760px;
}

.page-hero-content p{
  font-size:18px;
  color:#c5d7e6;
  max-width:680px;
  margin-bottom:35px;
}

.page-hero-image{
  position:relative;
}

.page-hero-image img{
  width:100%;
  min-height:520px;
  object-fit:cover;
  border-radius:30px;
  box-shadow:0 30px 60px rgba(0,0,0,0.35);
}

.service-metric{
  position:absolute;
  display:grid;
  gap:4px;
  min-width:220px;
  padding:18px 22px;
  border-radius:18px;
  background:#ffffff;
  color:#043968;
  box-shadow:0 20px 40px rgba(0,0,0,0.2);
}

.service-metric strong{
  color:#0b538f;
}

.service-metric-one{
  top:38px;
  left:-38px;
}

.service-metric-two{
  right:-18px;
  bottom:42px;
}

/* =========================
SERVICES HERO
========================= */

.service-page-hero{
  position:relative;
  overflow:hidden;
}

.service-page-hero::before{
  content:"";
  position:absolute;
  width:460px;
  height:460px;
  right:-160px;
  top:110px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(114,183,218,0.24),
    transparent 68%
  );
  filter:blur(8px);
  animation:serviceHeroPulse 5s ease-in-out infinite;
  pointer-events:none;
}

.service-page-hero .page-hero-content{
  position:relative;
  z-index:2;
}

.service-page-hero .hero-tag{
  box-shadow:0 0 35px rgba(114,183,218,0.18);
  animation:serviceTagFloat 4s ease-in-out infinite;
}

.service-page-hero .page-hero-content h1{
  max-width:820px;
}

.service-page-hero .page-hero-content p{
  max-width:720px;
}

.service-hero-visual{
  min-height:620px;
  isolation:isolate;
}

.service-hero-visual::before{
  content:"";
  position:absolute;
  inset:34px;
  border-radius:38px;
  border:1px solid rgba(114,183,218,0.22);
  transform:rotate(-4deg);
  animation:serviceFrameTilt 7s ease-in-out infinite;
  z-index:0;
}

.service-hero-visual::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:42px;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,0.22) 45%,
      transparent 70%
    );
  transform:translateX(-120%);
  animation:serviceHeroSweep 5s ease-in-out infinite;
  pointer-events:none;
  z-index:3;
  mix-blend-mode:screen;
}

.service-hero-visual img{
  position:relative;
  z-index:1;
  min-height:620px;
  border-radius:42px;
  border:1px solid rgba(114,183,218,0.22);
  filter:saturate(1.05) contrast(1.04);
  animation:serviceImageFloat 6s ease-in-out infinite;
}

.service-hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(8px);
  opacity:0.75;
  z-index:0;
  pointer-events:none;
}

.service-hero-glow-one{
  width:160px;
  height:160px;
  background:rgba(114,183,218,0.42);
  top:4px;
  left:-34px;
  animation:serviceGlowDrift 7s ease-in-out infinite;
}

.service-hero-glow-two{
  width:220px;
  height:220px;
  background:rgba(255,255,255,0.12);
  right:-48px;
  bottom:70px;
  animation:serviceGlowDrift 8s ease-in-out infinite reverse;
}

.service-orbit-ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(114,183,218,0.28);
  z-index:2;
  pointer-events:none;
}

.service-orbit-ring-one{
  width:130px;
  height:130px;
  right:34px;
  top:54px;
  animation:serviceOrbit 10s linear infinite;
}

.service-orbit-ring-two{
  width:86px;
  height:86px;
  left:48px;
  bottom:112px;
  animation:serviceOrbit 8s linear infinite reverse;
}

.service-orbit-ring::after{
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  top:-6px;
  left:50%;
  border-radius:50%;
  background:#72B7DA;
  box-shadow:0 0 22px rgba(114,183,218,0.95);
}

.service-flow-panel,
.service-hero-stats,
.service-page-hero .service-metric{
  z-index:4;
  border:1px solid rgba(255,255,255,0.22);
  backdrop-filter:blur(18px);
}

.service-page-hero .service-metric{
  background:rgba(3,36,66,0.84);
  color:#d8ecf8;
  box-shadow:0 24px 50px rgba(0,0,0,0.28);
  animation:serviceCardFloat 5.5s ease-in-out infinite;
}

.service-page-hero .service-metric strong{
  color:#ffffff;
}

.service-page-hero .service-metric-one{
  top:54px;
  left:-28px;
}

.service-page-hero .service-metric-two{
  right:-26px;
  bottom:118px;
  animation-delay:0.7s;
}

.service-flow-panel{
  position:absolute;
  left:32px;
  right:32px;
  bottom:32px;
  display:grid;
  gap:10px;
  padding:22px;
  border-radius:24px;
  background:rgba(2,26,48,0.82);
  box-shadow:0 24px 60px rgba(0,0,0,0.32);
  animation:servicePanelLift 5s ease-in-out infinite;
}

.service-flow-panel span{
  color:#72B7DA;
  font-size:13px;
  font-weight:800;
  letter-spacing:1.8px;
  text-transform:uppercase;
}

.service-flow-panel strong{
  font-size:22px;
  line-height:1.25;
}

.service-flow-bars{
  display:grid;
  gap:9px;
  margin-top:4px;
}

.service-flow-bars i{
  display:block;
  height:8px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    #72B7DA,
    rgba(255,255,255,0.95)
  );
  transform-origin:left;
  animation:serviceBarGrow 2.8s ease-in-out infinite;
}

.service-flow-bars i:nth-child(1){
  width:74%;
}

.service-flow-bars i:nth-child(2){
  width:92%;
  animation-delay:0.25s;
}

.service-flow-bars i:nth-child(3){
  width:58%;
  animation-delay:0.5s;
}

.service-hero-stats{
  position:absolute;
  top:190px;
  right:-18px;
  display:grid;
  gap:8px;
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,0.12);
  box-shadow:0 18px 42px rgba(0,0,0,0.24);
  animation:serviceCardFloat 6.2s ease-in-out infinite reverse;
  z-index:4;
}

.service-hero-stats span{
  display:flex;
  align-items:center;
  gap:8px;
  color:#ffffff;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

.service-hero-stats span::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#72B7DA;
  box-shadow:0 0 16px rgba(114,183,218,0.8);
}

@keyframes serviceHeroPulse{

  50%{
    transform:scale(1.12);
    opacity:0.68;
  }

}

@keyframes serviceTagFloat{

  50%{
    transform:translateY(-5px);
  }

}

@keyframes serviceFrameTilt{

  50%{
    transform:rotate(3deg) scale(1.01);
  }

}

@keyframes serviceHeroSweep{

  42%,
  100%{
    transform:translateX(120%);
  }

}

@keyframes serviceImageFloat{

  50%{
    transform:translateY(-12px) scale(1.01);
  }

}

@keyframes serviceGlowDrift{

  50%{
    transform:translate(28px, 22px) scale(1.08);
  }

}

@keyframes serviceOrbit{

  to{
    transform:rotate(360deg);
  }

}

@keyframes serviceCardFloat{

  50%{
    transform:translateY(-12px);
  }

}

@keyframes servicePanelLift{

  50%{
    transform:translateY(-10px);
  }

}

@keyframes serviceBarGrow{

  0%,
  100%{
    transform:scaleX(0.38);
    opacity:0.55;
  }

  50%{
    transform:scaleX(1);
    opacity:1;
  }

}

/* =========================
PORTFOLIO HERO
========================= */

.portfolio-page-hero{
  position:relative;
  overflow:hidden;
}

.portfolio-page-hero::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  left:-210px;
  top:130px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(114,183,218,0.22),
    transparent 66%
  );
  filter:blur(10px);
  animation:portfolioHeroGlow 6s ease-in-out infinite;
  pointer-events:none;
}

.portfolio-page-hero .page-hero-content{
  position:relative;
  z-index:3;
}

.portfolio-page-hero .hero-tag{
  animation:portfolioTagSlide 4s ease-in-out infinite;
  box-shadow:0 0 32px rgba(114,183,218,0.16);
}

.portfolio-page-hero .page-hero-content h1{
  max-width:850px;
}

.portfolio-page-hero .page-hero-content p{
  max-width:720px;
}

.portfolio-hero-frame{
  min-height:620px;
  isolation:isolate;
}

.portfolio-hero-frame::before{
  content:"";
  position:absolute;
  inset:28px;
  border-radius:42px;
  border:1px solid rgba(114,183,218,0.26);
  background:
    linear-gradient(
      135deg,
      rgba(114,183,218,0.12),
      transparent 45%,
      rgba(255,255,255,0.08)
    );
  transform:rotate(4deg);
  animation:portfolioFrameFloat 7s ease-in-out infinite;
  z-index:0;
}

.portfolio-hero-frame::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:44px;
  background:
    linear-gradient(
      110deg,
      transparent 8%,
      rgba(255,255,255,0.2) 44%,
      transparent 66%
    );
  transform:translateX(-120%);
  animation:portfolioLightSweep 5.5s ease-in-out infinite;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:5;
}

.portfolio-hero-frame img{
  position:relative;
  z-index:2;
  min-height:620px;
  border-radius:44px;
  border:1px solid rgba(114,183,218,0.22);
  filter:saturate(1.08) contrast(1.04);
  animation:portfolioImageFloat 6s ease-in-out infinite;
}

.portfolio-hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(10px);
  opacity:0.72;
  z-index:1;
  pointer-events:none;
}

.portfolio-hero-glow-one{
  width:170px;
  height:170px;
  right:-34px;
  top:32px;
  background:rgba(114,183,218,0.36);
  animation:portfolioGlowDrift 7s ease-in-out infinite;
}

.portfolio-hero-glow-two{
  width:240px;
  height:240px;
  left:-50px;
  bottom:76px;
  background:rgba(255,255,255,0.11);
  animation:portfolioGlowDrift 8s ease-in-out infinite reverse;
}

.portfolio-design-stack{
  position:absolute;
  top:48px;
  right:42px;
  display:grid;
  gap:10px;
  z-index:4;
  animation:portfolioStackFloat 5.5s ease-in-out infinite;
}

.portfolio-design-stack span{
  display:block;
  width:112px;
  height:70px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.22);
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.24),
      rgba(114,183,218,0.18)
    );
  backdrop-filter:blur(16px);
  box-shadow:0 18px 38px rgba(0,0,0,0.22);
}

.portfolio-design-stack span:nth-child(2){
  transform:translateX(-18px);
}

.portfolio-design-stack span:nth-child(3){
  transform:translateX(-36px);
}

.portfolio-before-after-card{
  position:absolute;
  left:30px;
  right:30px;
  bottom:30px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(2,26,48,0.84);
  backdrop-filter:blur(18px);
  box-shadow:0 24px 60px rgba(0,0,0,0.32);
  z-index:6;
  animation:portfolioPanelRise 5s ease-in-out infinite;
}

.portfolio-before-after-card span{
  color:#ffffff;
  font-size:13px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.portfolio-split-preview{
  position:relative;
  height:56px;
  overflow:hidden;
  border-radius:16px;
  background:rgba(255,255,255,0.08);
}

.portfolio-split-preview::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  background:#ffffff;
  box-shadow:0 0 18px rgba(255,255,255,0.78);
  animation:portfolioDividerMove 3.8s ease-in-out infinite;
  z-index:2;
}

.portfolio-split-preview i{
  position:absolute;
  inset:0;
}

.portfolio-split-preview i:first-child{
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.12) 0 12px,
      rgba(255,255,255,0.04) 12px 24px
    ),
    linear-gradient(135deg, #0b3458, #021a30);
  clip-path:inset(0 48% 0 0);
}

.portfolio-split-preview i:last-child{
  background:
    linear-gradient(
      90deg,
      #72B7DA,
      rgba(255,255,255,0.92)
    );
  clip-path:inset(0 0 0 50%);
  animation:portfolioAfterReveal 3.8s ease-in-out infinite;
}

.portfolio-page-hero .service-metric{
  z-index:6;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(3,36,66,0.86);
  color:#d8ecf8;
  backdrop-filter:blur(18px);
  box-shadow:0 24px 50px rgba(0,0,0,0.3);
  animation:portfolioCardFloat 5.6s ease-in-out infinite;
}

.portfolio-page-hero .service-metric strong{
  color:#ffffff;
}

.portfolio-page-hero .service-metric-one{
  top:62px;
  left:-28px;
}

.portfolio-page-hero .service-metric-two{
  right:-26px;
  bottom:132px;
  animation-delay:0.65s;
}

.portfolio-hero-chip{
  position:absolute;
  top:214px;
  right:-18px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.12);
  color:#ffffff;
  font-size:13px;
  font-weight:800;
  backdrop-filter:blur(16px);
  box-shadow:0 18px 42px rgba(0,0,0,0.24);
  z-index:6;
  animation:portfolioCardFloat 6.4s ease-in-out infinite reverse;
}

.portfolio-hero-chip i{
  color:#72B7DA;
}

@keyframes portfolioHeroGlow{

  50%{
    transform:scale(1.14);
    opacity:0.72;
  }

}

@keyframes portfolioTagSlide{

  50%{
    transform:translateX(6px);
  }

}

@keyframes portfolioFrameFloat{

  50%{
    transform:rotate(-3deg) scale(1.01);
  }

}

@keyframes portfolioLightSweep{

  46%,
  100%{
    transform:translateX(120%);
  }

}

@keyframes portfolioImageFloat{

  50%{
    transform:translateY(-12px) scale(1.01);
  }

}

@keyframes portfolioGlowDrift{

  50%{
    transform:translate(-24px, 24px) scale(1.08);
  }

}

@keyframes portfolioStackFloat{

  50%{
    transform:translateY(-12px) rotate(-2deg);
  }

}

@keyframes portfolioPanelRise{

  50%{
    transform:translateY(-10px);
  }

}

@keyframes portfolioDividerMove{

  50%{
    left:58%;
  }

}

@keyframes portfolioAfterReveal{

  50%{
    clip-path:inset(0 0 0 42%);
  }

}

@keyframes portfolioCardFloat{

  50%{
    transform:translateY(-12px);
  }

}

/* =========================
ABOUT HERO
========================= */

.about-page-hero{
  position:relative;
  overflow:hidden;
}

.about-page-hero::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  right:-190px;
  top:120px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(114,183,218,0.2),
    transparent 68%
  );
  filter:blur(10px);
  animation:aboutHeroAura 6s ease-in-out infinite;
  pointer-events:none;
}

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

.about-page-hero .hero-tag{
  box-shadow:0 0 32px rgba(114,183,218,0.16);
  animation:aboutTagBreathe 4s ease-in-out infinite;
}

.about-page-hero .page-hero-content h1{
  max-width:840px;
}

.about-page-hero .page-hero-content p{
  max-width:720px;
}

.about-hero-visual{
  min-height:620px;
  isolation:isolate;
}

.about-hero-visual::before{
  content:"";
  position:absolute;
  inset:30px;
  border-radius:42px;
  border:1px solid rgba(114,183,218,0.24);
  background:
    linear-gradient(
      135deg,
      rgba(114,183,218,0.12),
      transparent 44%,
      rgba(255,255,255,0.08)
    );
  transform:rotate(-4deg);
  animation:aboutFrameFloat 7s ease-in-out infinite;
  z-index:0;
}

.about-hero-visual::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:44px;
  background:
    linear-gradient(
      115deg,
      transparent 8%,
      rgba(255,255,255,0.2) 44%,
      transparent 68%
    );
  transform:translateX(-120%);
  animation:aboutLightSweep 5.4s ease-in-out infinite;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:5;
}

.about-hero-visual img{
  position:relative;
  z-index:2;
  min-height:620px;
  border-radius:44px;
  border:1px solid rgba(114,183,218,0.22);
  filter:saturate(1.06) contrast(1.04);
  animation:aboutImageFloat 6s ease-in-out infinite;
}

.about-hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(10px);
  opacity:0.75;
  z-index:1;
  pointer-events:none;
}

.about-hero-glow-one{
  width:180px;
  height:180px;
  left:-42px;
  top:42px;
  background:rgba(114,183,218,0.38);
  animation:aboutGlowDrift 7s ease-in-out infinite;
}

.about-hero-glow-two{
  width:230px;
  height:230px;
  right:-46px;
  bottom:80px;
  background:rgba(255,255,255,0.11);
  animation:aboutGlowDrift 8s ease-in-out infinite reverse;
}

.about-story-lines{
  position:absolute;
  top:46px;
  right:42px;
  display:grid;
  gap:10px;
  width:168px;
  padding:16px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(2,26,48,0.64);
  backdrop-filter:blur(16px);
  box-shadow:0 20px 44px rgba(0,0,0,0.24);
  z-index:6;
  animation:aboutLinesFloat 5.4s ease-in-out infinite;
}

.about-story-lines span{
  display:block;
  height:9px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    #72B7DA,
    rgba(255,255,255,0.9)
  );
  transform-origin:left;
  animation:aboutLineGrow 3s ease-in-out infinite;
}

.about-story-lines span:nth-child(1){
  width:82%;
}

.about-story-lines span:nth-child(2){
  width:58%;
  animation-delay:0.22s;
}

.about-story-lines span:nth-child(3){
  width:94%;
  animation-delay:0.44s;
}

.about-identity-card{
  position:absolute;
  left:30px;
  right:30px;
  bottom:30px;
  display:grid;
  gap:6px;
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(2,26,48,0.84);
  backdrop-filter:blur(18px);
  box-shadow:0 24px 60px rgba(0,0,0,0.32);
  z-index:6;
  animation:aboutPanelRise 5s ease-in-out infinite;
}

.about-identity-card span{
  color:#72B7DA;
  font-size:13px;
  font-weight:800;
  letter-spacing:1.6px;
  text-transform:uppercase;
}

.about-identity-card strong{
  color:#ffffff;
  font-size:22px;
  line-height:1.25;
}

.about-identity-card p{
  color:#c5d7e6;
  font-size:14px;
  margin:0;
}

.about-page-hero .service-metric{
  z-index:6;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(3,36,66,0.86);
  color:#d8ecf8;
  backdrop-filter:blur(18px);
  box-shadow:0 24px 50px rgba(0,0,0,0.3);
  animation:aboutCardFloat 5.7s ease-in-out infinite;
}

.about-page-hero .service-metric strong{
  color:#ffffff;
}

.about-page-hero .service-metric-one{
  top:70px;
  left:-30px;
}

.about-page-hero .service-metric-two{
  right:-26px;
  bottom:142px;
  animation-delay:0.7s;
}

.about-hero-pill{
  position:absolute;
  top:220px;
  right:-18px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.12);
  color:#ffffff;
  font-size:13px;
  font-weight:800;
  backdrop-filter:blur(16px);
  box-shadow:0 18px 42px rgba(0,0,0,0.24);
  z-index:6;
  animation:aboutCardFloat 6.3s ease-in-out infinite reverse;
}

.about-hero-pill i{
  color:#72B7DA;
}

@keyframes aboutHeroAura{

  50%{
    transform:scale(1.14);
    opacity:0.7;
  }

}

@keyframes aboutTagBreathe{

  50%{
    transform:translateY(-5px);
  }

}

@keyframes aboutFrameFloat{

  50%{
    transform:rotate(3deg) scale(1.01);
  }

}

@keyframes aboutLightSweep{

  46%,
  100%{
    transform:translateX(120%);
  }

}

@keyframes aboutImageFloat{

  50%{
    transform:translateY(-12px) scale(1.01);
  }

}

@keyframes aboutGlowDrift{

  50%{
    transform:translate(24px, 22px) scale(1.08);
  }

}

@keyframes aboutLinesFloat{

  50%{
    transform:translateY(-12px) rotate(2deg);
  }

}

@keyframes aboutLineGrow{

  0%,
  100%{
    transform:scaleX(0.48);
    opacity:0.58;
  }

  50%{
    transform:scaleX(1);
    opacity:1;
  }

}

@keyframes aboutPanelRise{

  50%{
    transform:translateY(-10px);
  }

}

@keyframes aboutCardFloat{

  50%{
    transform:translateY(-12px);
  }

}

/* =========================
CONTACT HERO
========================= */

.contact-page-hero{
  position:relative;
  overflow:hidden;
}

.contact-page-hero::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  left:-190px;
  top:120px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(114,183,218,0.2),
    transparent 68%
  );
  filter:blur(10px);
  animation:contactHeroAura 6s ease-in-out infinite;
  pointer-events:none;
}

.contact-page-hero .page-hero-content{
  position:relative;
  z-index:3;
}

.contact-page-hero .hero-tag{
  box-shadow:0 0 32px rgba(114,183,218,0.16);
  animation:contactTagPulse 4s ease-in-out infinite;
}

.contact-page-hero .page-hero-content h1{
  max-width:840px;
}

.contact-page-hero .page-hero-content p{
  max-width:720px;
}

.contact-hero-visual{
  min-height:620px;
  isolation:isolate;
}

.contact-hero-visual::before{
  content:"";
  position:absolute;
  inset:30px;
  border-radius:42px;
  border:1px solid rgba(114,183,218,0.24);
  background:
    linear-gradient(
      135deg,
      rgba(114,183,218,0.12),
      transparent 44%,
      rgba(255,255,255,0.08)
    );
  transform:rotate(4deg);
  animation:contactFrameFloat 7s ease-in-out infinite;
  z-index:0;
}

.contact-hero-visual::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:44px;
  background:
    linear-gradient(
      115deg,
      transparent 8%,
      rgba(255,255,255,0.2) 44%,
      transparent 68%
    );
  transform:translateX(-120%);
  animation:contactLightSweep 5.4s ease-in-out infinite;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:5;
}

.contact-hero-visual img{
  position:relative;
  z-index:2;
  min-height:620px;
  border-radius:44px;
  border:1px solid rgba(114,183,218,0.22);
  filter:saturate(1.06) contrast(1.04);
  animation:contactImageFloat 6s ease-in-out infinite;
}

.contact-hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(10px);
  opacity:0.75;
  z-index:1;
  pointer-events:none;
}

.contact-hero-glow-one{
  width:180px;
  height:180px;
  right:-42px;
  top:42px;
  background:rgba(114,183,218,0.38);
  animation:contactGlowDrift 7s ease-in-out infinite;
}

.contact-hero-glow-two{
  width:230px;
  height:230px;
  left:-46px;
  bottom:80px;
  background:rgba(255,255,255,0.11);
  animation:contactGlowDrift 8s ease-in-out infinite reverse;
}

.contact-message-stack{
  position:absolute;
  top:44px;
  right:40px;
  display:grid;
  gap:10px;
  width:220px;
  z-index:6;
  animation:contactMessageFloat 5.4s ease-in-out infinite;
}

.contact-message-stack span{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:46px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(2,26,48,0.68);
  color:#ffffff;
  font-size:12px;
  font-weight:800;
  backdrop-filter:blur(16px);
  box-shadow:0 18px 38px rgba(0,0,0,0.22);
}

.contact-message-stack span::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#72B7DA;
  box-shadow:0 0 16px rgba(114,183,218,0.85);
}

.contact-message-stack span:nth-child(2){
  transform:translateX(-24px);
}

.contact-message-stack span:nth-child(3){
  transform:translateX(-48px);
}

.contact-response-card{
  position:absolute;
  left:30px;
  right:30px;
  bottom:30px;
  display:grid;
  gap:6px;
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(2,26,48,0.84);
  backdrop-filter:blur(18px);
  box-shadow:0 24px 60px rgba(0,0,0,0.32);
  z-index:6;
  animation:contactPanelRise 5s ease-in-out infinite;
}

.contact-response-card span{
  color:#72B7DA;
  font-size:13px;
  font-weight:800;
  letter-spacing:1.6px;
  text-transform:uppercase;
}

.contact-response-card strong{
  color:#ffffff;
  font-size:22px;
  line-height:1.25;
}

.contact-response-card p{
  color:#c5d7e6;
  font-size:14px;
  margin:0;
}

.contact-page-hero .service-metric{
  z-index:6;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(3,36,66,0.86);
  color:#d8ecf8;
  backdrop-filter:blur(18px);
  box-shadow:0 24px 50px rgba(0,0,0,0.3);
  animation:contactCardFloat 5.7s ease-in-out infinite;
}

.contact-page-hero .service-metric strong{
  color:#ffffff;
}

.contact-page-hero .service-metric-one{
  top:72px;
  left:-30px;
}

.contact-page-hero .service-metric-two{
  right:-26px;
  bottom:142px;
  animation-delay:0.7s;
}

.contact-hero-pill{
  position:absolute;
  top:220px;
  right:-18px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.12);
  color:#ffffff;
  font-size:13px;
  font-weight:800;
  backdrop-filter:blur(16px);
  box-shadow:0 18px 42px rgba(0,0,0,0.24);
  z-index:6;
  animation:contactCardFloat 6.3s ease-in-out infinite reverse;
}

.contact-hero-pill i{
  color:#72B7DA;
}

@keyframes contactHeroAura{

  50%{
    transform:scale(1.14);
    opacity:0.7;
  }

}

@keyframes contactTagPulse{

  50%{
    transform:translateY(-5px);
  }

}

@keyframes contactFrameFloat{

  50%{
    transform:rotate(-3deg) scale(1.01);
  }

}

@keyframes contactLightSweep{

  46%,
  100%{
    transform:translateX(120%);
  }

}

@keyframes contactImageFloat{

  50%{
    transform:translateY(-12px) scale(1.01);
  }

}

@keyframes contactGlowDrift{

  50%{
    transform:translate(-24px, 22px) scale(1.08);
  }

}

@keyframes contactMessageFloat{

  50%{
    transform:translateY(-12px) rotate(-2deg);
  }

}

@keyframes contactPanelRise{

  50%{
    transform:translateY(-10px);
  }

}

@keyframes contactCardFloat{

  50%{
    transform:translateY(-12px);
  }

}

/* =========================
TRUST SECTION
========================= */

.trust-section{
  background:rgba(3,36,66,0.8);
  backdrop-filter:blur(10px);
  padding:55px 8%;
  text-align:center;
}

.trust-section p{
  color:#72B7DA;
  font-size:18px;
  font-weight:500;
}

.trust-btn{
  margin-top:28px;
}

/* =========================
VALUE SECTION
========================= */

.value-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

.value-image img{
  border-radius:30px;
}

.value-content h2{
  font-size:44px;
  line-height:1.2;
  margin:20px 0;
}

.value-content p{
  color:#d2e0ea;
  margin-bottom:30px;
}

.value-list{
  display:grid;
  gap:18px;
}

.value-item{
  background:rgba(4,57,104,0.85);
  backdrop-filter:blur(10px);
  padding:18px 24px;
  border-radius:18px;
}

/* =========================
SERVICES
========================= */

.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.service-card{
  background:rgba(4,57,104,0.85);
  backdrop-filter:blur(10px);
  padding:40px;
  border-radius:28px;
  transition:0.3s;
  border:1px solid rgba(255,255,255,0.05);
}

.service-card:hover{
  transform:translateY(-10px);
  border-color:rgba(114,183,218,0.4);
}

.service-icon{
  font-size:42px;
  margin-bottom:20px;
}

.service-card h3{
  margin-bottom:15px;
  font-size:24px;
}

.service-card p{
  color:#d6e3ed;
}

/* =========================
SERVICES PAGE
========================= */

.services-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.service-detail-card{
  position:relative;
  overflow:hidden;
  background:rgba(4,57,104,0.85);
  backdrop-filter:blur(10px);
  padding:38px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,0.06);
  transition:0.3s;
}

.service-detail-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    135deg,
    rgba(114,183,218,0.16),
    transparent 42%
  );
  opacity:0;
  transition:0.3s;
}

.service-detail-card:hover{
  transform:translateY(-10px);
  border-color:rgba(114,183,218,0.45);
}

.service-detail-card:hover::before{
  opacity:1;
}

.service-detail-card > *{
  position:relative;
}

.featured-service{
  background:linear-gradient(
    135deg,
    rgba(11,83,143,0.95),
    rgba(4,57,104,0.9)
  );
  border-color:rgba(114,183,218,0.35);
}

.service-detail-icon{
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
  border-radius:18px;
  background:rgba(114,183,218,0.15);
  color:#72B7DA;
  font-size:26px;
}

.service-detail-card h3{
  font-size:24px;
  line-height:1.25;
  margin-bottom:14px;
}

.service-detail-card p{
  color:#d8e5ef;
  margin-bottom:24px;
}

.service-detail-card ul{
  display:grid;
  gap:12px;
  list-style:none;
}

.service-detail-card li{
  position:relative;
  padding-left:24px;
  color:#d6e3ed;
}

.service-detail-card li::before{
  content:"";
  position:absolute;
  top:10px;
  left:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#72B7DA;
  box-shadow:0 0 14px rgba(114,183,218,0.65);
}

.service-inline-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:22px;
  color:#72B7DA;
  text-decoration:none;
  font-weight:800;
  transition:0.3s;
}

.service-inline-link:hover{
  gap:14px;
  color:#ffffff;
}

.deliverables-section{
  background:rgba(3,36,66,0.55);
}

.deliverables-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.deliverable-card{
  padding:34px;
  border-radius:24px;
  background:rgba(4,57,104,0.72);
  border:1px solid rgba(255,255,255,0.06);
}

.deliverable-card i{
  color:#72B7DA;
  font-size:30px;
  margin-bottom:22px;
}

.deliverable-card h3{
  font-size:20px;
  margin-bottom:12px;
}

.deliverable-card p{
  color:#d6e3ed;
}

.service-timeline{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  counter-reset:serviceStep;
}

.service-step{
  position:relative;
  padding:36px 28px;
  border-radius:24px;
  background:rgba(4,57,104,0.85);
  border:1px solid rgba(255,255,255,0.06);
}

.service-step span{
  display:inline-flex;
  width:52px;
  height:52px;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
  border-radius:50%;
  background:#72B7DA;
  color:#043968;
  font-weight:800;
}

.service-step h3{
  font-size:22px;
  margin-bottom:12px;
}

.service-step p{
  color:#d6e3ed;
}

.service-faq-section{
  padding-top:80px;
}

.faq-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  max-width:1100px;
  margin:auto;
}

.faq-card{
  padding:32px;
  border-radius:24px;
  background:rgba(4,57,104,0.85);
  border:1px solid rgba(255,255,255,0.06);
}

.faq-card h3{
  font-size:21px;
  margin-bottom:12px;
}

.faq-card p{
  color:#d6e3ed;
}

/* =========================
ABOUT PAGE
========================= */

.about-story-grid{
  display:grid;
  grid-template-columns:1.25fr 0.75fr;
  gap:60px;
  align-items:center;
}

.about-story-content h2,
.about-approach-content h2{
  font-size:44px;
  line-height:1.2;
  margin:20px 0;
}

.about-story-content p,
.about-approach-content p{
  color:#d2e0ea;
  margin-bottom:22px;
}

.about-story-card{
  padding:38px;
  border-radius:28px;
  background:rgba(4,57,104,0.85);
  border:1px solid rgba(114,183,218,0.18);
  box-shadow:0 24px 55px rgba(0,0,0,0.18);
}

.about-story-card h3{
  font-size:26px;
  margin-bottom:24px;
}

.about-story-card ul{
  display:grid;
  gap:16px;
  list-style:none;
}

.about-story-card li{
  position:relative;
  padding-left:28px;
  color:#d6e3ed;
}

.about-story-card li::before{
  content:"";
  position:absolute;
  top:10px;
  left:0;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#72B7DA;
  box-shadow:0 0 14px rgba(114,183,218,0.65);
}

.about-stats-section{
  padding-top:70px;
  padding-bottom:70px;
  background:rgba(3,36,66,0.55);
}

.about-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.about-stat-card{
  padding:34px 28px;
  border-radius:24px;
  background:rgba(4,57,104,0.75);
  border:1px solid rgba(255,255,255,0.06);
  text-align:center;
}

.about-stat-card h3{
  color:#72B7DA;
  font-size:42px;
  line-height:1;
  margin-bottom:14px;
}

.about-stat-card p{
  color:#d8e5ef;
}

.about-values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.about-value-card{
  padding:34px;
  border-radius:24px;
  background:rgba(4,57,104,0.85);
  border:1px solid rgba(255,255,255,0.06);
  transition:0.3s;
}

.about-value-card:hover{
  transform:translateY(-8px);
  border-color:rgba(114,183,218,0.42);
}

.about-value-card i{
  color:#72B7DA;
  font-size:30px;
  margin-bottom:22px;
}

.about-value-card h3{
  font-size:21px;
  margin-bottom:12px;
}

.about-value-card p{
  color:#d6e3ed;
}

.about-approach-section{
  background:rgba(3,36,66,0.42);
}

.about-approach-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

.about-approach-image img{
  width:100%;
  min-height:560px;
  object-fit:cover;
  border-radius:30px;
  box-shadow:0 30px 60px rgba(0,0,0,0.32);
}

.about-approach-list{
  display:grid;
  gap:20px;
  margin-top:32px;
}

.about-approach-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  padding:24px;
  border-radius:22px;
  background:rgba(4,57,104,0.78);
  border:1px solid rgba(255,255,255,0.06);
}

.about-approach-item span{
  display:inline-flex;
  width:48px;
  height:48px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#72B7DA;
  color:#043968;
  font-weight:800;
}

.about-approach-item h3{
  font-size:20px;
  margin-bottom:8px;
}

.about-approach-item p{
  margin-bottom:0;
}

/* =========================
WHY SECTION
========================= */

.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.why-card{
  background:rgba(4,57,104,0.85);
  backdrop-filter:blur(10px);
  padding:40px;
  border-radius:28px;
}

.why-card h3{
  margin-bottom:15px;
  font-size:24px;
}

.why-card p{
  color:#d6e3ed;
}

/* =========================
PROCESS
========================= */

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
}

.process-card{
  background:rgba(4,57,104,0.85);
  backdrop-filter:blur(10px);
  padding:35px;
  border-radius:25px;
}

.process-card h3{
  margin-bottom:15px;
  color:#72B7DA;
}

.process-card p{
  color:#d6e3ed;
}

/* =========================
PORTFOLIO
========================= */

.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.portfolio-item{
  aspect-ratio:1252 / 1350;
  overflow:hidden;
  border-radius:28px;
  background:rgba(4,57,104,0.85);
}

.portfolio-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.4s;
}

.portfolio-item:hover img{
  transform:scale(1.05);
}

/* =========================
PORTFOLIO PAGE
========================= */

.portfolio-showcase-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.portfolio-projects-section{
  position:relative;
  overflow:hidden;
  background:rgba(3,36,66,0.34);
}

.portfolio-projects-section::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-160px;
  top:80px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(114,183,218,0.16),
    transparent 68%
  );
  filter:blur(8px);
  pointer-events:none;
}

.portfolio-projects-section .section-title,
.portfolio-projects-section .portfolio-showcase-grid{
  position:relative;
  z-index:2;
}

.portfolio-project-card{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  background:rgba(4,57,104,0.85);
  border:1px solid rgba(255,255,255,0.06);
  transition:0.3s;
}

.portfolio-project-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.08),
    transparent
  );
  transform:translateX(-120%);
  transition:0.65s ease;
  pointer-events:none;
}

.portfolio-project-card:hover{
  transform:translateY(-10px);
  border-color:rgba(114,183,218,0.42);
  box-shadow:0 24px 50px rgba(0,0,0,0.22);
}

.portfolio-project-card:hover::after{
  transform:translateX(120%);
}

.portfolio-project-image{
  overflow:hidden;
  aspect-ratio:1.35;
}

.portfolio-project-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.45s;
}

.portfolio-project-card:hover .portfolio-project-image img{
  transform:scale(1.06);
}

.portfolio-project-content{
  padding:30px;
}

.portfolio-project-content span{
  display:inline-block;
  color:#72B7DA;
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:12px;
  text-transform:uppercase;
}

.portfolio-project-content h3{
  font-size:24px;
  line-height:1.25;
  margin-bottom:14px;
}

.portfolio-project-content p{
  color:#d6e3ed;
  margin-bottom:22px;
}

.portfolio-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.portfolio-tags small{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(114,183,218,0.12);
  color:#d8e5ef;
  font-size:12px;
  font-weight:600;
}

.portfolio-results-section{
  background:rgba(3,36,66,0.55);
}

.portfolio-results-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.portfolio-result-card{
  padding:34px;
  border-radius:24px;
  background:rgba(4,57,104,0.76);
  border:1px solid rgba(255,255,255,0.06);
}

.portfolio-result-card i{
  color:#72B7DA;
  font-size:30px;
  margin-bottom:22px;
}

.portfolio-result-card h3{
  font-size:20px;
  line-height:1.3;
  margin-bottom:12px;
}

.portfolio-result-card p{
  color:#d6e3ed;
}

.project-types-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

.project-types-content h2{
  font-size:44px;
  line-height:1.2;
  margin:20px 0;
}

.project-types-content p{
  color:#d2e0ea;
}

.project-type-list{
  display:grid;
  gap:18px;
}

.project-type-item{
  display:flex;
  align-items:center;
  gap:18px;
  padding:24px;
  border-radius:22px;
  background:rgba(4,57,104,0.85);
  border:1px solid rgba(255,255,255,0.06);
  color:#ffffff;
  font-size:18px;
  font-weight:700;
}

.project-type-item i{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border-radius:16px;
  background:rgba(114,183,218,0.15);
  color:#72B7DA;
  font-size:22px;
}

/* =========================
CALENDLY
========================= */

.calendly-section{
  background:rgba(3,36,66,0.45);
}

.calendly-wrapper{
  overflow:hidden;
  max-width:1100px;
  margin:auto;
  border-radius:28px;
  background:#ffffff;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 30px 60px rgba(0,0,0,0.26);
}

.calendly-inline-widget{
  width:100%;
  min-height:700px;
}

/* =========================
REVIEWS
========================= */

.reviews-section{
  padding-top:80px;
  padding-bottom:80px;
}

.reviews-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:42px;
  border-radius:30px;
  background:linear-gradient(
    135deg,
    rgba(4,57,104,0.92),
    rgba(11,83,143,0.84)
  );
  border:1px solid rgba(114,183,218,0.22);
  box-shadow:0 24px 55px rgba(0,0,0,0.2);
}

.reviews-card h2{
  font-size:34px;
  line-height:1.2;
  margin:14px 0;
}

.reviews-card p{
  max-width:720px;
  color:#d8e5ef;
}

.reviews-card .primary-btn{
  flex-shrink:0;
}

/* =========================
PARTNERS
========================= */

.partners-section{
  background:rgba(3,36,66,0.55);
}

.partners-grid{
  display:grid;
  gap:24px;
  overflow:hidden;
}

.partners-row{
  overflow:hidden;
}

.partners-track{
  display:flex;
  width:max-content;
  gap:20px;
  animation:partnersSlide 32s linear infinite;
  will-change:transform;
}

.partners-row-reverse .partners-track{
  animation-name:partnersSlideReverse;
  animation-duration:36s;
}

.partners-row:hover .partners-track{
  animation-play-state:paused;
}

.partner-card{
  display:flex;
  width:clamp(250px, 24vw, 360px);
  min-height:118px;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:24px;
  border-radius:22px;
  background:rgba(4,57,104,0.82);
  border:1px solid rgba(255,255,255,0.06);
  transition:0.3s;
  flex-shrink:0;
}

.partner-card:hover{
  transform:translateY(-8px);
  border-color:rgba(114,183,218,0.42);
  box-shadow:0 20px 44px rgba(0,0,0,0.22);
}

.partner-card img{
  width:36px;
  height:36px;
  object-fit:contain;
  flex-shrink:0;
}

.partner-lettermark{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border:3px solid #72B7DA;
  border-radius:50%;
  color:#72B7DA;
  font-size:24px;
  font-weight:800;
  line-height:1;
}

.partner-lettermark-wide{
  width:52px;
  border-radius:14px;
  font-size:18px;
}

.partner-card span{
  color:#ffffff;
  font-weight:700;
  overflow-wrap:anywhere;
}

@keyframes partnersSlide{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(calc(-50% - 10px));
  }

}

@keyframes partnersSlideReverse{

  from{
    transform:translateX(calc(-50% - 10px));
  }

  to{
    transform:translateX(0);
  }

}

/* =========================
CONTACT PAGE
========================= */

.contact-options-section{
  padding-top:70px;
  padding-bottom:70px;
  background:rgba(3,36,66,0.55);
}

.contact-options-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.contact-option-card{
  display:grid;
  gap:10px;
  padding:32px;
  border-radius:24px;
  background:rgba(4,57,104,0.85);
  border:1px solid rgba(255,255,255,0.06);
  color:#ffffff;
  text-decoration:none;
  transition:0.3s;
}

.contact-option-card:hover{
  transform:translateY(-8px);
  border-color:rgba(114,183,218,0.42);
  box-shadow:0 24px 50px rgba(0,0,0,0.22);
}

.contact-option-card i{
  color:#72B7DA;
  font-size:30px;
  margin-bottom:10px;
}

.contact-option-card span{
  color:#c5d7e6;
  font-size:14px;
}

.contact-option-card strong{
  overflow-wrap:anywhere;
  font-size:18px;
}

.contact-layout{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:60px;
  align-items:start;
}

.contact-form-content{
  position:sticky;
  top:130px;
}

.contact-form-content h2{
  font-size:44px;
  line-height:1.2;
  margin:20px 0;
}

.contact-form-content p{
  color:#d2e0ea;
  margin-bottom:28px;
}

.contact-note{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  padding:20px;
  border-radius:20px;
  background:rgba(114,183,218,0.12);
  border:1px solid rgba(114,183,218,0.2);
  color:#d8e5ef;
}

.contact-note i{
  color:#72B7DA;
  margin-top:4px;
}

.contact-form{
  padding:38px;
  border-radius:30px;
  background:rgba(4,57,104,0.88);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 30px 60px rgba(0,0,0,0.2);
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.form-group{
  display:grid;
  gap:10px;
  margin-bottom:20px;
}

.form-group label{
  color:#ffffff;
  font-size:14px;
  font-weight:600;
}

.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  background:rgba(2,26,48,0.72);
  color:#ffffff;
  font:inherit;
  outline:none;
  padding:15px 18px;
  transition:0.3s;
}

.form-group textarea{
  resize:vertical;
  min-height:170px;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
  color:#8ea9bd;
}

.form-group select{
  color:#d8e5ef;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:#72B7DA;
  box-shadow:0 0 0 4px rgba(114,183,218,0.12);
}

.form-submit-btn{
  border:0;
  cursor:pointer;
}

.form-honeypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.form-message{
  display:none;
  margin-bottom:18px;
  padding:15px 18px;
  border-radius:16px;
  font-size:15px;
  font-weight:600;
}

.form-message.show{
  display:block;
}

.form-message.success{
  background:rgba(67,204,139,0.14);
  border:1px solid rgba(67,204,139,0.3);
  color:#d8ffe9;
}

.form-message.error{
  background:rgba(255,101,101,0.14);
  border:1px solid rgba(255,101,101,0.32);
  color:#ffe1e1;
}

.form-submit-btn[disabled]{
  cursor:not-allowed;
  opacity:0.72;
}

.contact-steps-section{
  background:rgba(3,36,66,0.42);
}

.contact-steps-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.contact-step-card{
  padding:34px;
  border-radius:24px;
  background:rgba(4,57,104,0.85);
  border:1px solid rgba(255,255,255,0.06);
}

.contact-step-card span{
  display:inline-flex;
  width:52px;
  height:52px;
  align-items:center;
  justify-content:center;
  margin-bottom:22px;
  border-radius:50%;
  background:#72B7DA;
  color:#043968;
  font-weight:800;
}

.contact-step-card h3{
  font-size:22px;
  margin-bottom:12px;
}

.contact-step-card p{
  color:#d6e3ed;
}

/* =========================
TESTIMONIALS
========================= */

.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.testimonial-card{
  background:rgba(4,57,104,0.85);
  backdrop-filter:blur(10px);
  padding:40px;
  border-radius:28px;
}

.testimonial-card p{
  color:#d8e5ef;
  margin-bottom:25px;
}

.testimonial-card h4{
  color:#72B7DA;
}

.google-reviews-block{
  margin-top:70px;
}

.google-reviews-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}

.google-reviews-heading span{
  color:#72B7DA;
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}

.google-reviews-heading a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#72B7DA;
  text-decoration:none;
  font-weight:700;
}

.google-reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.google-review-card{
  display:block;
  padding:28px;
  border-radius:24px;
  background:#2b2d34;
  border:1px solid rgba(255,255,255,0.08);
  color:#d8d8dc;
  text-decoration:none;
  transition:0.3s;
}

.google-review-card:hover{
  transform:translateY(-8px);
  border-color:rgba(114,183,218,0.35);
  box-shadow:0 24px 50px rgba(0,0,0,0.25);
}

.google-review-top{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  margin-bottom:22px;
}

.google-avatar{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:50%;
  color:#ffffff;
  font-size:26px;
  font-weight:500;
  flex-shrink:0;
}

.text-avatar{
  background:#d9470f;
}

.blue-avatar{
  background:#168bd4;
}

.image-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.google-review-top h3{
  color:#ffffff;
  font-size:21px;
  line-height:1.2;
}

.google-review-top p{
  color:#b8b8bd;
  margin-top:3px;
}

.google-icon{
  color:#ffffff;
  opacity:0.8;
}

.google-stars{
  color:#fbbc04;
  font-size:22px;
  letter-spacing:1px;
  margin-bottom:20px;
}

.google-stars span{
  color:#b8b8bd;
  font-size:15px;
  letter-spacing:0;
  margin-left:8px;
}

.google-review-card > p{
  color:#d0d0d4;
  line-height:1.65;
}

/* =========================
CTA
========================= */

.cta-section{
  margin:100px 8%;
  background:linear-gradient(
    135deg,
    #043968,
    #0b538f
  );
  border-radius:40px;
  text-align:center;
}

.cta-content h2{
  font-size:46px;
  line-height:1.2;
  margin-bottom:20px;
}

.cta-content p{
  max-width:700px;
  margin:auto;
  margin-bottom:40px;
  color:#d8e5ef;
}

/* =========================
POLICY PAGE
========================= */

.policy-hero{
  position:relative;
  overflow:hidden;
  padding-top:180px;
  padding-bottom:80px;
}

.policy-hero::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  left:50%;
  top:80px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(114,183,218,0.2),
    transparent 68%
  );
  transform:translateX(-50%);
  filter:blur(10px);
  animation:policyAura 6s ease-in-out infinite;
  pointer-events:none;
}

.policy-hero .section-title{
  position:relative;
  z-index:2;
}

.policy-hero h1{
  font-size:64px;
  line-height:1.1;
  margin:18px 0;
}

.policy-hero small{
  display:inline-flex;
  margin-top:22px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(114,183,218,0.12);
  color:#72B7DA;
  font-weight:700;
  border:1px solid rgba(114,183,218,0.22);
}

.policy-content-section{
  padding-top:40px;
}

.policy-layout{
  display:grid;
  grid-template-columns:0.85fr 1.7fr;
  gap:34px;
  align-items:start;
}

.policy-summary,
.policy-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(3,57,104,0.72);
  box-shadow:0 24px 58px rgba(0,0,0,0.2);
}

.policy-summary{
  position:sticky;
  top:120px;
  padding:34px;
}

.policy-summary::before,
.policy-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,0.12),
      transparent 38%
    );
  opacity:0.5;
  pointer-events:none;
}

.policy-summary h2,
.policy-card h2{
  position:relative;
  color:#ffffff;
  line-height:1.25;
}

.policy-summary p,
.policy-card p,
.policy-card li{
  position:relative;
  color:#d6e3ed;
}

.policy-summary p{
  margin:18px 0 26px;
}

.policy-content{
  display:grid;
  gap:20px;
}

.policy-card{
  padding:30px;
}

.policy-card h2{
  font-size:24px;
  margin-bottom:14px;
}

.policy-card p + p{
  margin-top:14px;
}

.policy-card ul{
  position:relative;
  display:grid;
  gap:10px;
  margin-top:14px;
  padding-left:20px;
}

.policy-card a{
  color:#72B7DA;
  text-decoration:none;
  font-weight:700;
}

.policy-card a:hover{
  color:#ffffff;
}

@keyframes policyAura{

  50%{
    transform:translateX(-50%) scale(1.12);
    opacity:0.72;
  }

}

/* =========================
FOOTER
========================= */

.footer{
  position:relative;
  overflow:hidden;
  padding:110px 8% 46px;
  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(114,183,218,0.2),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 15%,
      rgba(114,183,218,0.16),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #021a30,
      #032442 48%,
      #011526
    );
  border-top:1px solid rgba(114,183,218,0.22);
}

.footer::before{
  content:"";
  position:absolute;
  top:0;
  left:-30%;
  width:60%;
  height:2px;
  background:linear-gradient(
    90deg,
    transparent,
    #72B7DA,
    #ffffff,
    transparent
  );
  animation:footerLightSweep 4.8s linear infinite;
}

.footer::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      rgba(255,255,255,0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.018) 1px,
      transparent 1px
    );
  background-size:70px 70px;
  mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,0.78),
    transparent
  );
  animation:footerGridMove 18s linear infinite;
}

.footer-grid,
.footer-socials,
.footer-bottom{
  position:relative;
  z-index:1;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.55fr 0.9fr 1.25fr 1.45fr;
  gap:28px;
  margin-bottom:56px;
}

.footer-column{
  position:relative;
  overflow:hidden;
  padding:30px;
  border-radius:26px;
  background:rgba(4,57,104,0.46);
  border:1px solid rgba(255,255,255,0.07);
  backdrop-filter:blur(14px);
  transition:0.35s;
}

.footer-column::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    125deg,
    transparent,
    rgba(114,183,218,0.12),
    transparent
  );
  transform:translateX(-120%);
  transition:0.7s ease;
}

.footer-column:hover{
  transform:translateY(-8px);
  border-color:rgba(114,183,218,0.34);
  box-shadow:0 24px 54px rgba(0,0,0,0.24);
}

.footer-column:hover::before{
  transform:translateX(120%);
}

.footer-column h3{
  position:relative;
  margin-bottom:25px;
  font-size:22px;
}

.footer-column h3::after{
  content:"";
  display:block;
  width:42px;
  height:3px;
  margin-top:12px;
  border-radius:999px;
  background:#72B7DA;
  box-shadow:0 0 16px rgba(114,183,218,0.7);
}

.footer-column p{
  position:relative;
  color:#d6e3ed;
}

.footer-column ul{
  position:relative;
  list-style:none;
}

.footer-column ul li{
  margin-bottom:14px;
}

.footer-column ul li a{
  position:relative;
  color:#d6e3ed;
  text-decoration:none;
  transition:0.3s;
  display:flex;
  align-items:center;
  gap:10px;
}

.footer-column ul li a::before{
  content:"";
  width:0;
  height:2px;
  border-radius:999px;
  background:#72B7DA;
  transition:0.3s;
}

.footer-column ul li a:hover{
  color:#72B7DA;
  transform:translateX(6px);
}

.footer-column ul li a:hover::before{
  width:18px;
}

/* SOCIAL ICONS */

.footer-socials{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  padding-bottom:10px;
  margin-bottom:34px;
}

.footer-socials a{
  position:relative;
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.08);
  color:#ffffff;
  text-decoration:none;
  font-size:20px;
  transition:0.35s;
  flex-shrink:0;
}

.footer-socials a::before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:50%;
  border:1px solid rgba(114,183,218,0.18);
  transform:scale(0.75);
  opacity:0;
  transition:0.35s;
}

.footer-socials a:hover{
  background:#72B7DA;
  color:#043968;
  transform:translateY(-8px) scale(1.05);
  box-shadow:0 18px 34px rgba(114,183,218,0.28);
}

.footer-socials a:hover::before{
  transform:scale(1);
  opacity:1;
}

.footer-bottom{
  padding:24px;
  border-radius:20px;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.07);
  color:#c5d7e6;
  text-align:center;
}

.footer-copy-main,
.footer-copy-rights{
  display:inline;
}

@keyframes footerLightSweep{

  to{
    left:110%;
  }

}

@keyframes footerGridMove{

  from{
    transform:translate(0,0);
  }

  to{
    transform:translate(-70px,-70px);
  }

}

/* =========================
MENU OVERLAY
========================= */

.menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  opacity:0;
  visibility:hidden;
  transition:none;
  z-index:999;
}

.menu-overlay.active{
  opacity:1;
  visibility:visible;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:1200px){

  .hero,
  .value-section,
  .page-hero,
  .home-two-hero,
  .home-two-value{
    grid-template-columns:1fr;
  }

  .home-two-hero{
    gap:46px;
    padding-top:150px;
    padding-bottom:80px;
  }

  .home-two-stage{
    min-height:560px;
  }

  .main-stage-card{
    left:50%;
    right:auto;
    transform:translate(-50%, -50%) rotateX(6deg) rotateY(-8deg);
    animation:none;
  }

  .services-grid,
  .why-grid,
  .portfolio-grid,
  .testimonials-grid,
  .google-reviews-grid,
  .services-detail-grid,
  .client-resources-grid,
  .deliverables-grid,
  .about-stats-grid,
  .about-values-grid,
  .portfolio-showcase-grid,
  .portfolio-results-grid,
  .contact-options-grid,
  .contact-steps-grid,
  .home-two-service-grid,
  .home-two-portfolio-grid,
  .home-two-testimonial-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .process-grid,
  .service-timeline,
  .about-story-grid,
  .about-approach-grid,
  .project-types-grid,
  .contact-layout{
    grid-template-columns:repeat(2,1fr);
  }

  .home-two-process-line{
    grid-template-columns:repeat(2,1fr);
  }

  .service-metric-one{
    left:28px;
  }

  .service-metric-two{
    right:28px;
  }

  .service-page-hero{
    gap:64px;
  }

  .service-hero-visual{
    max-width:780px;
    width:100%;
    min-height:560px;
    margin:0 auto;
  }

  .service-hero-visual img{
    min-height:560px;
  }

  .service-page-hero .service-metric-one{
    left:28px;
  }

  .service-page-hero .service-metric-two,
  .service-hero-stats{
    right:28px;
  }

  .portfolio-page-hero{
    gap:64px;
  }

  .portfolio-hero-frame{
    max-width:780px;
    width:100%;
    min-height:560px;
    margin:0 auto;
  }

  .portfolio-hero-frame img{
    min-height:560px;
  }

  .portfolio-page-hero .service-metric-one{
    left:28px;
  }

  .portfolio-page-hero .service-metric-two,
  .portfolio-hero-chip{
    right:28px;
  }

  .about-page-hero{
    gap:64px;
  }

  .about-hero-visual{
    max-width:780px;
    width:100%;
    min-height:560px;
    margin:0 auto;
  }

  .about-hero-visual img{
    min-height:560px;
  }

  .about-page-hero .service-metric-one{
    left:28px;
  }

  .about-page-hero .service-metric-two,
  .about-hero-pill{
    right:28px;
  }

  .contact-page-hero{
    gap:64px;
  }

  .contact-hero-visual{
    max-width:780px;
    width:100%;
    min-height:560px;
    margin:0 auto;
  }

  .contact-hero-visual img{
    min-height:560px;
  }

  .contact-page-hero .service-metric-one{
    left:28px;
  }

  .contact-page-hero .service-metric-two,
  .contact-hero-pill{
    right:28px;
  }

  .checker-result{
    grid-template-columns:1fr;
  }

  .checker-score{
    width:190px;
    margin:0 auto;
  }

  .policy-layout{
    grid-template-columns:1fr;
  }

  .policy-summary{
    position:relative;
    top:auto;
  }

  .hero-stats{
    max-width:100%;
  }

}

@media(max-width:992px){

  .logo-image img{
    width:180px;
  }

  .nav-links{
    gap:24px;
  }

}

@media(max-width:768px){

  section{
    padding:90px 6%;
  }

  .navbar{
    padding:18px 6%;
  }

  .menu-toggle{
    display:block;
    margin-left:auto;
  }

  nav{
    margin-left:0;
  }

.nav-links{
  position:fixed;
  top:0;
  right:-100%;
  width:100%;
  max-width:380px;
  height:100vh;
  overflow-y:auto;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;

  padding:110px 24px 40px;

  background:
    linear-gradient(
      180deg,
      rgba(2,26,48,0.98),
      rgba(3,36,66,0.98)
    );

  backdrop-filter:blur(18px);

  border-left:1px solid rgba(114,183,218,0.15);

  transition:none;

  z-index:1000;

  box-shadow:
    -20px 0 60px rgba(0,0,0,0.45);
}

.nav-links.active{
  right:0;
}

.nav-links a{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:16px 18px;

  border-radius:16px;

  background:rgba(255,255,255,0.04);

  border:1px solid rgba(255,255,255,0.05);

  font-size:17px;
  font-weight:600;

  transition:none;
}

.nav-links a:hover{
  background:rgba(114,183,218,0.12);
  border-color:rgba(114,183,218,0.25);
  transform:none;
}

  .nav-links .nav-btn,
  .nav-links a.nav-btn,
  .nav-links.active .nav-btn,
  .nav-links.active a.nav-btn{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff;
  }

  .nav-dropdown{
    width:100%;
  }

  .nav-dropdown-toggle{
    justify-content:space-between;
    width:100%;
  }

  .nav-dropdown-menu{
    position:static;
    min-width:0;
    width:100%;
    display:none;
    grid-template-columns:1fr;
    gap:8px;
    margin-top:12px;
    padding:10px;
    opacity:1;
    visibility:visible;
    transform:none;
    transition:none;
    background:rgba(2,26,48,0.72);
    box-shadow:none;
  }

  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu{
    display:none;
    transform:none;
  }

  .nav-dropdown.open .nav-dropdown-menu{
    display:grid;
  }

.nav-dropdown-menu a{
    min-height:auto;
    grid-template-columns:38px 1fr;
    justify-content:flex-start;
    align-items:flex-start;
    text-align:left;
    padding:12px;
    transform:none;
}

  .nav-dropdown-menu a > i{
    width:38px;
    height:38px;
    border-radius:12px;
  }

  .nav-dropdown-toggle i{
    transform:none !important;
  }

  .nav-dropdown.open .nav-dropdown-toggle i{
    transform:none !important;
  }

  .hero{
    grid-template-columns:1fr;
    padding-top:150px;
    gap:50px;
  }

  .page-hero{
    padding-top:150px;
    gap:50px;
  }

  .service-page-hero{
    min-height:auto;
    padding-bottom:80px;
  }

  .portfolio-page-hero{
    min-height:auto;
    padding-bottom:80px;
  }

  .hero-content h1,
  .page-hero-content h1{
    font-size:34px;
    line-height:1.25;
  }

  .hero-content p,
  .page-hero-content p{
    font-size:16px;
  }

  .hero-buttons{
    flex-direction:column;
  }

  .hero-buttons .primary-btn,
  .hero-buttons .secondary-btn{
    text-align:center;
  }

  .hero-stats{
    grid-template-columns:1fr;
  }

  .stat-box{
    min-height:auto;
    padding:22px 24px;
  }

  .floating-card{
    display:none;
  }

  .page-hero-image img{
    min-height:360px;
    border-radius:24px;
  }

  .service-hero-visual{
    min-height:510px;
    margin-top:6px;
  }

  .service-hero-visual::before{
    inset:18px;
    border-radius:30px;
  }

  .service-hero-visual::after{
    border-radius:30px;
  }

  .service-hero-visual img{
    min-height:510px;
    border-radius:30px;
  }

  .service-page-hero::before{
    width:280px;
    height:280px;
    right:-90px;
    top:180px;
  }

  .service-metric{
    display:none;
  }

  .service-page-hero .service-metric{
    display:none;
  }

  .service-orbit-ring-one{
    width:96px;
    height:96px;
    right:20px;
    top:32px;
  }

  .service-orbit-ring-two{
    width:68px;
    height:68px;
    left:24px;
    bottom:126px;
  }

  .service-flow-panel{
    left:16px;
    right:16px;
    bottom:18px;
    padding:18px;
    border-radius:22px;
  }

  .service-flow-panel strong{
    font-size:18px;
  }

  .service-hero-stats{
    top:auto;
    right:16px;
    left:16px;
    bottom:154px;
    grid-template-columns:1fr;
    padding:14px;
    border-radius:18px;
  }

  .service-hero-stats span{
    font-size:12px;
  }

  .portfolio-hero-frame{
    min-height:510px;
    margin-top:6px;
  }

  .portfolio-hero-frame::before{
    inset:18px;
    border-radius:30px;
  }

  .portfolio-hero-frame::after{
    border-radius:30px;
  }

  .portfolio-hero-frame img{
    min-height:510px;
    border-radius:30px;
  }

  .portfolio-page-hero::before{
    width:280px;
    height:280px;
    left:-110px;
    top:190px;
  }

  .portfolio-page-hero .service-metric{
    display:none;
  }

  .portfolio-design-stack{
    top:28px;
    right:22px;
    gap:8px;
  }

  .portfolio-design-stack span{
    width:82px;
    height:52px;
    border-radius:14px;
  }

  .portfolio-before-after-card{
    left:16px;
    right:16px;
    bottom:18px;
    grid-template-columns:1fr;
    gap:10px;
    padding:16px;
    border-radius:22px;
  }

  .portfolio-before-after-card span{
    font-size:12px;
  }

  .portfolio-split-preview{
    height:64px;
  }

  .portfolio-hero-chip{
    top:auto;
    right:16px;
    left:16px;
    bottom:148px;
    justify-content:center;
    border-radius:18px;
    font-size:12px;
  }

  .about-hero-visual{
    min-height:510px;
    margin-top:6px;
  }

  .about-hero-visual::before{
    inset:18px;
    border-radius:30px;
  }

  .about-hero-visual::after{
    border-radius:30px;
  }

  .about-hero-visual img{
    min-height:510px;
    border-radius:30px;
  }

  .about-page-hero{
    min-height:auto;
    padding-bottom:80px;
  }

  .about-page-hero::before{
    width:280px;
    height:280px;
    right:-100px;
    top:190px;
  }

  .about-page-hero .service-metric{
    display:none;
  }

  .about-story-lines{
    top:28px;
    right:22px;
    width:132px;
    padding:13px;
    border-radius:18px;
  }

  .about-story-lines span{
    height:7px;
  }

  .about-identity-card{
    left:16px;
    right:16px;
    bottom:18px;
    padding:18px;
    border-radius:22px;
  }

  .about-identity-card strong{
    font-size:18px;
  }

  .about-identity-card p{
    font-size:13px;
  }

  .about-hero-pill{
    top:auto;
    right:16px;
    left:16px;
    bottom:152px;
    justify-content:center;
    border-radius:18px;
    font-size:12px;
  }

  .contact-hero-visual{
    min-height:510px;
    margin-top:6px;
  }

  .contact-hero-visual::before{
    inset:18px;
    border-radius:30px;
  }

  .contact-hero-visual::after{
    border-radius:30px;
  }

  .contact-hero-visual img{
    min-height:510px;
    border-radius:30px;
  }

  .contact-page-hero{
    min-height:auto;
    padding-bottom:80px;
  }

  .contact-page-hero::before{
    width:280px;
    height:280px;
    left:-110px;
    top:190px;
  }

  .contact-page-hero .service-metric{
    display:none;
  }

  .contact-message-stack{
    top:28px;
    right:18px;
    width:178px;
    gap:8px;
  }

  .contact-message-stack span{
    min-height:40px;
    padding:10px 12px;
    font-size:11px;
  }

  .contact-message-stack span:nth-child(2){
    transform:translateX(-16px);
  }

  .contact-message-stack span:nth-child(3){
    transform:translateX(-32px);
  }

  .contact-response-card{
    left:16px;
    right:16px;
    bottom:18px;
    padding:18px;
    border-radius:22px;
  }

  .contact-response-card strong{
    font-size:18px;
  }

  .contact-response-card p{
    font-size:13px;
  }

  .contact-hero-pill{
    top:auto;
    right:16px;
    left:16px;
    bottom:152px;
    justify-content:center;
    border-radius:18px;
    font-size:12px;
  }

  .policy-hero{
    padding-top:150px;
    padding-bottom:64px;
  }

  .policy-hero h1{
    font-size:46px;
  }

  .policy-content-section{
    padding-top:30px;
  }

  .section-title h2,
  .value-content h2,
  .cta-content h2,
  .about-story-content h2,
  .about-approach-content h2,
  .project-types-content h2,
  .contact-form-content h2{
    font-size:30px;
    line-height:1.3;
  }

  .home-two-copy h1{
    font-size:clamp(34px, 10vw, 44px);
    line-height:1.08;
    margin:20px 0;
  }

  .home-two-kicker{
    max-width:100%;
    padding:9px 13px;
    gap:8px;
    font-size:11px;
    letter-spacing:0.2px;
  }

  .home-two-copy p{
    font-size:16px;
    margin-bottom:28px;
  }

  .home-two-actions,
  .home-two-trust{
    align-items:stretch;
    flex-direction:column;
  }

  .audit-shell{
    grid-template-columns:1fr;
    gap:32px;
  }

  .audit-section-compact .audit-shell{
    grid-template-columns:1fr;
  }

  .audit-copy h2{
    font-size:30px;
    line-height:1.25;
  }

  .audit-signals{
    grid-template-columns:1fr;
  }

  .home-two-proof,
  .home-two-momentum-grid,
  .home-two-service-grid,
  .home-two-process-line,
  .home-two-portfolio-grid,
  .home-two-testimonial-grid{
    grid-template-columns:1fr;
  }

  .home-two-value-content h2{
    font-size:30px;
    line-height:1.3;
  }

  .home-two-value-visual img{
    min-height:360px;
    border-radius:24px;
  }

  .value-orbit{
    display:none;
  }

  .home-two-stage{
    min-height:auto;
  }

  .main-stage-card{
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    transform:none;
    animation:none;
  }

  .stage-screen{
    min-height:300px;
    padding:28px;
  }

  .stage-grid{
    grid-template-columns:1fr;
    margin-top:34px;
  }

  .stage-grid span{
    min-height:72px;
  }

  .mini-card{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    top:auto;
    width:100%;
    margin-top:16px;
  }

  .home-two-scroll-cue{
    display:none;
  }

  .services-grid,
  .why-grid,
  .process-grid,
  .portfolio-grid,
  .testimonials-grid,
  .google-reviews-grid,
  .footer-grid,
  .services-detail-grid,
  .deliverables-grid,
  .service-timeline,
  .faq-grid,
  .about-story-grid,
  .about-stats-grid,
  .about-values-grid,
  .about-approach-grid,
  .portfolio-showcase-grid,
  .portfolio-results-grid,
  .project-types-grid,
  .contact-options-grid,
  .contact-layout,
  .form-row,
  .contact-steps-grid,
  .performance-checker-grid{
    grid-template-columns:1fr;
  }

  .reviews-card{
    align-items:flex-start;
    flex-direction:column;
    padding:28px;
  }

  .google-reviews-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .reviews-card h2{
    font-size:28px;
  }

  .calendly-wrapper{
    border-radius:22px;
  }

  .calendly-inline-widget{
    height:980px !important;
    min-height:980px;
  }

  .back-to-top{
    right:18px;
    bottom:92px;
    width:48px;
    height:48px;
  }

  .service-detail-card,
  .deliverable-card,
  .service-step,
  .faq-card,
  .about-story-card,
  .about-stat-card,
  .about-value-card,
  .about-approach-item,
  .portfolio-project-content,
  .portfolio-result-card,
  .project-type-item,
  .contact-option-card,
  .contact-form,
  .checker-result,
  .contact-step-card,
  .partner-card{
    padding:28px;
  }

  .partners-grid{
    gap:16px;
  }

  .partner-card{
    width:260px;
    min-height:104px;
  }

  .google-review-card{
    padding:24px;
  }

  .footer{
    padding:80px 6% 36px;
  }

  .footer-column{
    padding:26px;
  }

  .footer-socials{
    flex-wrap:nowrap;
    gap:10px;
    overflow-x:visible;
  }

  .footer-socials a{
    width:46px;
    height:46px;
    min-width:46px;
    font-size:17px;
  }

  .footer-copy-main,
  .footer-copy-rights{
    display:block;
  }

  .footer-copy-main{
    white-space:nowrap;
  }

  .footer-bottom{
    padding:24px 18px;
    font-size:14px;
    line-height:1.7;
  }

  .contact-form-content{
    position:static;
  }

  .about-approach-image img{
    min-height:360px;
    border-radius:24px;
  }

}

@media(max-width:480px){

  .service-page-hero{
    padding-top:135px;
    gap:38px;
  }

  .service-page-hero .page-hero-content h1{
    font-size:30px;
  }

  .service-page-hero .page-hero-content p{
    font-size:15px;
  }

  .service-hero-visual{
    min-height:455px;
  }

  .service-hero-visual img{
    min-height:455px;
  }

  .service-hero-visual::before{
    inset:12px;
  }

  .service-orbit-ring-one{
    width:78px;
    height:78px;
  }

  .service-orbit-ring-two{
    display:none;
  }

  .service-hero-stats{
    bottom:142px;
    padding:12px;
  }

  .service-flow-panel{
    padding:16px;
  }

  .service-flow-panel span{
    font-size:11px;
  }

  .service-flow-panel strong{
    font-size:16px;
  }

  .portfolio-page-hero{
    padding-top:135px;
    gap:38px;
  }

  .portfolio-page-hero .page-hero-content h1{
    font-size:30px;
  }

  .portfolio-page-hero .page-hero-content p{
    font-size:15px;
  }

  .portfolio-hero-frame{
    min-height:455px;
  }

  .portfolio-hero-frame img{
    min-height:455px;
  }

  .portfolio-hero-frame::before{
    inset:12px;
  }

  .portfolio-design-stack span{
    width:68px;
    height:44px;
  }

  .portfolio-hero-chip{
    bottom:138px;
    padding:12px;
  }

  .portfolio-before-after-card{
    padding:14px;
  }

  .portfolio-split-preview{
    height:56px;
  }

  .about-page-hero{
    padding-top:135px;
    gap:38px;
  }

  .about-page-hero .page-hero-content h1{
    font-size:30px;
  }

  .about-page-hero .page-hero-content p{
    font-size:15px;
  }

  .about-hero-visual{
    min-height:455px;
  }

  .about-hero-visual img{
    min-height:455px;
  }

  .about-hero-visual::before{
    inset:12px;
  }

  .about-story-lines{
    width:112px;
  }

  .about-hero-pill{
    bottom:140px;
    padding:12px;
  }

  .about-identity-card{
    padding:15px;
  }

  .about-identity-card span{
    font-size:11px;
  }

  .about-identity-card strong{
    font-size:16px;
  }

  .contact-page-hero{
    padding-top:135px;
    gap:38px;
  }

  .contact-page-hero .page-hero-content h1{
    font-size:30px;
  }

  .contact-page-hero .page-hero-content p{
    font-size:15px;
  }

  .contact-hero-visual{
    min-height:455px;
  }

  .contact-hero-visual img{
    min-height:455px;
  }

  .contact-hero-visual::before{
    inset:12px;
  }

  .contact-message-stack{
    width:152px;
  }

  .contact-message-stack span{
    font-size:10px;
  }

  .contact-hero-pill{
    bottom:140px;
    padding:12px;
  }

  .contact-response-card{
    padding:15px;
  }

  .contact-response-card span{
    font-size:11px;
  }

  .contact-response-card strong{
    font-size:16px;
  }

  .policy-hero{
    padding-top:135px;
    padding-bottom:56px;
  }

  .policy-hero h1{
    font-size:38px;
  }

  .policy-content-section{
    padding-top:20px;
  }

  .policy-summary,
  .policy-card{
    border-radius:20px;
  }

  .policy-summary,
  .policy-card{
    padding:24px;
  }

  .policy-card h2{
    font-size:20px;
  }

}

/* =========================
CLIENT DASHBOARD PORTAL
========================= */

.client-portal-body{
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 15% 12%, rgba(114,183,218,0.2), transparent 34%),
    radial-gradient(circle at 85% 82%, rgba(255,255,255,0.08), transparent 28%),
    #021a30;
  color:#ffffff;
  font-family:"Poppins", sans-serif;
}

.client-login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:40px 6%;
}

.client-login-panel{
  width:min(1180px, 100%);
  display:grid;
  grid-template-columns:1fr 460px;
  gap:34px;
  align-items:center;
}

.client-login-brand,
.client-login-card,
.client-sidebar,
.client-dashboard-header,
.client-metrics-grid article,
.client-progress-card,
.client-timeline-item{
  border:1px solid rgba(114,183,218,0.18);
  background:linear-gradient(145deg, rgba(4,57,104,0.84), rgba(2,26,48,0.92));
  box-shadow:0 30px 80px rgba(0,0,0,0.28);
}

.client-login-brand{
  position:relative;
  overflow:hidden;
  min-height:620px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:56px;
  border-radius:34px;
}

.client-login-brand::before,
.client-dashboard-main::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(114,183,218,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114,183,218,0.06) 1px, transparent 1px);
  background-size:42px 42px;
  pointer-events:none;
}

.client-login-brand > *{
  position:relative;
  z-index:1;
}

.client-login-brand img,
.client-sidebar-logo img{
  width:220px;
  height:auto;
}

.client-login-brand span,
.client-card-header span,
.client-section-heading span,
.client-dashboard-header span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#72B7DA;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.4px;
}

.client-login-brand h1{
  max-width:720px;
  margin:26px 0 18px;
  font-size:56px;
  line-height:1.08;
}

.client-login-brand p,
.client-section-heading p,
.client-dashboard-header p,
.client-progress-card p,
.client-timeline-item p,
.client-login-note{
  color:#c5d7e6;
}

.client-login-card{
  padding:36px;
  border-radius:30px;
}

.client-card-header{
  margin-bottom:28px;
}

.client-card-header h2{
  margin-top:12px;
  font-size:34px;
}

.client-form-group{
  display:grid;
  gap:10px;
  margin-bottom:20px;
}

.client-form-group label{
  font-size:14px;
  font-weight:700;
}

.client-input-wrap{
  display:grid;
  grid-template-columns:22px 1fr;
  align-items:center;
  gap:12px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;
  background:rgba(2,26,48,0.72);
}

.client-input-wrap i{
  color:#72B7DA;
}

.client-input-wrap input{
  width:100%;
  min-height:54px;
  border:0;
  outline:0;
  background:transparent;
  color:#ffffff;
  font:inherit;
}

.client-input-wrap input::placeholder{
  color:#8ea9bd;
}

.client-login-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:4px 0 24px;
}

.client-checkbox{
  display:flex;
  align-items:center;
  gap:10px;
  color:#d8e5ef;
  font-size:14px;
}

.client-checkbox input{
  accent-color:#72B7DA;
}

.client-login-options button{
  border:0;
  background:transparent;
  color:#72B7DA;
  cursor:pointer;
  font:inherit;
  font-size:14px;
  font-weight:700;
}

.client-login-btn,
.client-header-cta,
.client-logout-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:54px;
  border:0;
  border-radius:18px;
  background:#72B7DA;
  color:#043968;
  cursor:pointer;
  text-decoration:none;
  font:inherit;
  font-weight:800;
}

.client-login-btn:disabled{
  cursor:not-allowed;
  opacity:0.72;
}

.client-auth-message{
  display:none;
  margin-top:18px;
  padding:14px 16px;
  border-radius:16px;
  font-size:14px;
}

.client-auth-message.show{
  display:block;
}

.client-auth-message.info{
  color:#d8e5ef;
  background:rgba(114,183,218,0.12);
}

.client-auth-message.success{
  color:#b8ffd5;
  background:rgba(40,190,100,0.14);
}

.client-auth-message.error{
  color:#ffd0d0;
  background:rgba(255,90,90,0.14);
}

.client-login-note{
  display:flex;
  gap:12px;
  margin-top:22px;
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,0.04);
  font-size:14px;
}

.client-login-note i{
  color:#72B7DA;
  margin-top:3px;
}

.client-dashboard-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:300px 1fr;
}

.client-sidebar{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:32px;
  padding:30px;
  border-width:0 1px 0 0;
  border-radius:0;
}

.client-sidebar-overlay,
.client-sidebar-close{
  display:none;
}

.client-sidebar-nav{
  display:grid;
  gap:12px;
}

.client-sidebar-nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 16px;
  border-radius:16px;
  color:#d8e5ef;
  text-decoration:none;
  font-weight:700;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.05);
}

.client-sidebar-nav a.active,
.client-sidebar-nav a:hover{
  color:#043968;
  background:#72B7DA;
}

.client-logout-btn{
  margin-top:auto;
  color:#ffffff;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.08);
}

.client-dashboard-main{
  position:relative;
  overflow:hidden;
  display:grid;
  gap:28px;
  padding:34px;
}

.client-dashboard-main > *{
  position:relative;
  z-index:1;
}

.client-dashboard-header{
  position:relative;
  z-index:80;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:32px;
  border-radius:28px;
}

.client-dashboard-header h1{
  margin:12px 0 4px;
  font-size:38px;
}

.client-dashboard-header h1 strong{
  color:#72B7DA;
}

.client-header-cta{
  width:auto;
  padding:0 24px;
  white-space:nowrap;
}

.client-sidebar-toggle{
  display:none;
  width:48px;
  height:48px;
  border:0;
  border-radius:14px;
  background:#72B7DA;
  color:#043968;
  font-size:18px;
}

.client-metrics-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}

.client-metrics-grid article{
  padding:24px;
  border-radius:24px;
}

.client-metrics-grid i{
  color:#72B7DA;
  font-size:24px;
  margin-bottom:18px;
}

.client-metrics-grid span,
.client-card-top span{
  display:block;
  color:#9fb8cc;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
}

.client-metrics-grid strong{
  display:block;
  margin-top:8px;
  font-size:24px;
}

.client-metrics-grid strong:empty::after{
  content:"Pending Update";
  color:#9fb8cc;
}

.client-dashboard-section{
  display:grid;
  gap:22px;
}

.client-section-heading h2{
  margin:12px 0;
  font-size:34px;
}

.client-progress-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}

.client-progress-card{
  padding:26px;
  border-radius:26px;
}

.client-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}

.client-card-top strong{
  color:#72B7DA;
  font-size:22px;
}

.client-progress-card h3{
  font-size:22px;
  margin-bottom:10px;
}

.client-progress-track{
  height:10px;
  overflow:hidden;
  margin-top:22px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
}

.client-progress-track i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #72B7DA, #ffffff);
}

.client-dashboard-split{
  grid-template-columns:0.85fr 1.15fr;
  align-items:start;
}

.client-timeline{
  display:grid;
  gap:16px;
}

.client-timeline-item{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:20px;
  padding:22px;
  border-radius:22px;
}

.client-timeline-item > span{
  color:#72B7DA;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
}

.client-timeline-item h3{
  font-size:19px;
  margin-bottom:6px;
}

.client-empty-state{
  grid-column:1 / -1;
  padding:28px;
  border-radius:24px;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(114,183,218,0.16);
}

.client-empty-state i{
  color:#72B7DA;
  font-size:24px;
  margin-bottom:16px;
}

.client-empty-state h3{
  margin-bottom:8px;
  font-size:22px;
}

.client-empty-state p{
  max-width:720px;
  color:#c5d7e6;
}

.client-support-section{
  padding:30px;
  border-radius:28px;
  background:linear-gradient(145deg, rgba(4,57,104,0.84), rgba(2,26,48,0.92));
  border:1px solid rgba(114,183,218,0.18);
  box-shadow:0 30px 80px rgba(0,0,0,0.22);
}

.client-support-card{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:52px;
  padding:0 24px;
  border-radius:16px;
  background:#72B7DA;
  color:#043968;
  text-decoration:none;
  font-weight:800;
}

.admin-dashboard-shell{
  grid-template-columns:320px 1fr;
}

.admin-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
}

.admin-panel{
  padding:28px;
  border-radius:28px;
  background:linear-gradient(145deg, rgba(4,57,104,0.84), rgba(2,26,48,0.92));
  border:1px solid rgba(114,183,218,0.18);
  box-shadow:0 30px 80px rgba(0,0,0,0.2);
}

.admin-form{
  display:grid;
  gap:14px;
}

.admin-form input,
.admin-form textarea,
.admin-form select,
.admin-search{
  width:100%;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  background:rgba(2,26,48,0.72);
  color:#ffffff;
  font:inherit;
  outline:none;
  padding:15px 18px;
}

.admin-form textarea{
  min-height:120px;
  resize:vertical;
}

.admin-form input::placeholder,
.admin-form textarea::placeholder,
.admin-search::placeholder{
  color:#8ea9bd;
}

.admin-form select,
.partner-project-actions select{
  appearance:none;
  color:#ffffff;
  background-color:rgba(2,26,48,0.72);
  background-image:linear-gradient(45deg, transparent 50%, #72B7DA 50%), linear-gradient(135deg, #72B7DA 50%, transparent 50%);
  background-position:calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

.admin-form select option,
.partner-project-actions select option{
  color:#021a30;
  background:#ffffff;
}

.admin-form [disabled]{
  cursor:not-allowed;
  opacity:0.55;
}

.admin-update-grid{
  grid-template-columns:1fr;
}

.admin-panel-wide{
  max-width:1040px;
}

#chat-manager .admin-panel-wide,
#partner-manager .admin-panel-wide,
#completed-projects-library .admin-panel-wide,
#payment-manager .admin-panel-wide,
#invoice-manager .admin-panel-wide,
#assets-vault-manager .admin-panel-wide,
#approval-manager .admin-panel-wide,
#task-manager .admin-panel-wide{
  width:100%;
  max-width:none;
  grid-column:1 / -1;
}

#chat-manager,
#partner-manager,
#completed-projects-library,
#payment-manager,
#invoice-manager,
#assets-vault-manager,
#approval-manager,
#task-manager{
  grid-template-columns:1fr;
}

#chat-manager .admin-panel-wide{
  width:100%;
  justify-self:stretch;
  padding:40px;
  border-radius:34px;
}

#chat-manager .client-section-heading{
  display:block;
  max-width:900px;
  margin:0 auto 26px;
  text-align:center;
}

#chat-manager .client-section-heading h2{
  max-width:760px;
  margin:12px auto 0;
  font-size:44px;
  line-height:1.12;
}

#chat-manager .client-section-heading p{
  max-width:780px;
  margin:18px auto 0;
  font-size:17px;
  line-height:1.75;
}

.admin-client-update-form{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.admin-client-update-form textarea,
.admin-form-divider,
.admin-client-update-form button{
  grid-column:1 / -1;
}

.portal-header-actions{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
  z-index:10000;
}

.portal-notification-bell{
  position:relative;
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border:1px solid rgba(114,183,218,0.24);
  border-radius:18px;
  color:#ffffff;
  background:rgba(255,255,255,0.06);
  cursor:pointer;
}

.portal-notification-bell span{
  position:absolute;
  top:-8px;
  right:-8px;
  display:grid;
  place-items:center;
  min-width:24px;
  height:24px;
  padding:0 7px;
  border-radius:999px;
  color:#043968;
  background:#72B7DA;
  font-size:12px;
  font-weight:900;
}

.portal-notification-dropdown{
  position:fixed;
  top:118px;
  right:clamp(18px, 5vw, 72px);
  z-index:10000;
  display:none;
  width:min(420px, calc(100vw - 32px));
  max-height:min(520px, calc(100vh - 150px));
  overflow:auto;
  padding:14px;
  border-radius:22px;
  background:rgba(2,26,48,0.98);
  border:1px solid rgba(114,183,218,0.24);
  box-shadow:0 28px 70px rgba(0,0,0,0.35);
}

.portal-notification-dropdown.open{
  display:grid;
  gap:10px;
}

.portal-notification-item{
  display:grid;
  gap:6px;
  padding:14px;
  border-radius:16px;
  color:#d8e5ef;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(114,183,218,0.12);
}

.portal-notification-item.unread{
  border-color:rgba(114,183,218,0.42);
  background:rgba(114,183,218,0.1);
}

.portal-notification-item strong{
  color:#ffffff;
}

.portal-notification-item p,
.portal-notification-item small{
  margin:0;
}

.portal-notification-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.portal-notification-actions button,
.portal-notification-actions a{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border:0;
  border-radius:999px;
  color:#043968;
  background:#72B7DA;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.portal-summary-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin:18px 0;
}

.portal-summary-grid article{
  padding:18px;
  border-radius:18px;
  background:rgba(114,183,218,0.08);
  border:1px solid rgba(114,183,218,0.15);
}

.portal-summary-grid span{
  display:block;
  margin-bottom:8px;
  color:#c5d7e6;
  font-size:13px;
}

.portal-summary-grid strong{
  color:#ffffff;
  font-size:26px;
}

.portal-record-list{
  display:grid;
  gap:14px;
  margin-top:16px;
}

.portal-record-card{
  display:grid;
  gap:12px;
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(114,183,218,0.16);
}

.portal-record-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.portal-record-card h3{
  margin:0;
  color:#ffffff;
  font-size:22px;
}

.portal-record-card p{
  margin:0;
  color:#c5d7e6;
}

.portal-record-card small,
.portal-status-pill{
  color:#72B7DA;
  font-weight:800;
}

.portal-record-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.portal-record-actions button,
.portal-record-actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 14px;
  border:0;
  border-radius:999px;
  color:#043968;
  background:#72B7DA;
  text-decoration:none;
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}

.portal-record-actions button:disabled,
.portal-record-actions button.completed-clicked{
  color:#ffffff;
  background:rgba(55,185,125,0.36);
  border:1px solid rgba(55,185,125,0.42);
  cursor:default;
}

.portal-record-actions .danger{
  color:#ffd8d8;
  background:rgba(255,107,107,0.14);
  border:1px solid rgba(255,107,107,0.35);
}

.portal-invoice-modal{
  position:fixed;
  inset:0;
  z-index:12000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.portal-invoice-modal.open{
  display:flex;
}

body.invoice-modal-open{
  overflow:hidden;
}

.portal-invoice-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(1,12,23,0.72);
  cursor:pointer;
}

.portal-invoice-dialog{
  position:relative;
  z-index:1;
  width:min(1020px, 100%);
  max-height:calc(100vh - 48px);
  overflow:auto;
  padding:18px;
  border-radius:30px;
  background:rgba(2,26,48,0.98);
  border:1px solid rgba(114,183,218,0.22);
  box-shadow:0 36px 90px rgba(0,0,0,0.38);
}

.portal-invoice-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.portal-invoice-toolbar p{
  margin:0;
  color:#ffffff;
  font-size:18px;
  font-weight:800;
}

.portal-invoice-toolbar-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.portal-invoice-print-btn{
  min-height:48px;
  width:auto;
  padding:0 18px;
}

.portal-invoice-download-btn{
  min-height:48px;
  padding:0 18px;
  white-space:nowrap;
}

.portal-invoice-close{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid rgba(114,183,218,0.22);
  border-radius:16px;
  color:#ffffff;
  background:rgba(255,255,255,0.05);
  cursor:pointer;
}

.portal-invoice-document{
  display:grid;
  gap:20px;
  padding:30px;
  border-radius:28px;
  background:#ffffff;
  color:#14273b;
}

.portal-invoice-document *{
  box-sizing:border-box;
}

.portal-invoice-top{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap:18px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(20,39,59,0.1);
}

.portal-invoice-brand{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:18px;
}

.portal-invoice-brand img{
  width:180px;
  height:auto;
  object-fit:contain;
}

.portal-invoice-kicker{
  display:block;
  color:#4e6f8e;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.portal-invoice-brand h2{
  margin:10px 0 14px;
  color:#0d2740;
  font-size:40px;
  line-height:1;
}

.portal-invoice-contact-list{
  display:grid;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
  color:#45617b;
}

.portal-invoice-contact-list a{
  color:#0d2740;
  font-weight:700;
  text-decoration:none;
}

.portal-invoice-meta{
  display:grid;
  gap:10px;
  align-content:start;
  padding:18px;
  border-radius:22px;
  background:#f4f8fb;
}

.portal-invoice-meta div,
.portal-invoice-summary-card{
  display:grid;
  gap:6px;
}

.portal-invoice-meta span,
.portal-invoice-block > span,
.portal-invoice-summary-card span{
  color:#5b7891;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.1px;
  text-transform:uppercase;
}

.portal-invoice-meta strong,
.portal-invoice-summary-card strong{
  color:#0d2740;
  font-size:18px;
}

.portal-invoice-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.portal-invoice-block{
  display:grid;
  gap:8px;
  padding:18px;
  border-radius:22px;
  background:#f8fbfe;
  border:1px solid rgba(20,39,59,0.08);
  break-inside:avoid;
  page-break-inside:avoid;
}

.portal-invoice-block h3{
  margin:0;
  color:#0d2740;
  font-size:24px;
}

.portal-invoice-block p{
  margin:0;
  color:#4f677f;
  line-height:1.7;
  white-space:pre-line;
}

.portal-invoice-table{
  display:grid;
  border:1px solid rgba(20,39,59,0.12);
  border-radius:24px;
  overflow:hidden;
}

.portal-invoice-table-row{
  display:grid;
  grid-template-columns:1.1fr 1.9fr 0.55fr 0.75fr;
  gap:18px;
  padding:14px 18px;
  align-items:start;
  break-inside:avoid;
  page-break-inside:avoid;
}

.portal-invoice-table-row span{
  color:#324c65;
  line-height:1.65;
}

.portal-invoice-table-head{
  background:#0d2740;
}

.portal-invoice-table-head span{
  color:#ffffff;
  font-size:13px;
  font-weight:800;
  letter-spacing:0.3px;
}

.portal-invoice-summary{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.portal-invoice-summary-card{
  padding:18px;
  border-radius:22px;
  background:#eff6fb;
  border:1px solid rgba(20,39,59,0.08);
  break-inside:avoid;
  page-break-inside:avoid;
}

.portal-invoice-status{
  color:#0d2740;
}

.portal-invoice-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
  color:#ffffff;
  background:#0d2740;
  font-weight:800;
  text-decoration:none;
}

.portal-approval-feedback{
  display:grid;
  gap:10px;
}

.portal-approval-feedback textarea{
  width:100%;
  min-height:110px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  background:rgba(2,26,48,0.72);
  color:#ffffff;
  font:inherit;
  padding:14px;
}

.admin-form-divider{
  margin-top:8px;
  padding:18px;
  border-radius:18px;
  background:rgba(114,183,218,0.1);
  border:1px solid rgba(114,183,218,0.18);
}

.admin-form-divider span{
  display:block;
  color:#72B7DA;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
}

.admin-form-divider p{
  margin:6px 0 0;
  color:#c5d7e6;
  font-size:14px;
}

.partner-project-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

.partner-project-card{
  padding:26px;
  border-radius:26px;
  background:linear-gradient(145deg, rgba(4,57,104,0.84), rgba(2,26,48,0.92));
  border:1px solid rgba(114,183,218,0.18);
  box-shadow:0 30px 80px rgba(0,0,0,0.2);
}

.partner-project-card h3{
  margin-bottom:18px;
  font-size:24px;
}

.portal-collapsible-card{
  display:block;
}

.portal-collapse-toggle{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto auto;
  gap:16px;
  align-items:center;
  border:0;
  border-radius:20px;
  padding:18px;
  color:#ffffff;
  background:rgba(255,255,255,0.045);
  cursor:pointer;
  text-align:left;
  font:inherit;
}

.portal-collapse-toggle span{
  display:grid;
  gap:5px;
  min-width:0;
}

.portal-collapse-toggle small{
  color:#72B7DA;
  font-size:12px;
  font-weight:900;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.portal-collapse-toggle strong{
  color:#ffffff;
  font-size:clamp(1rem, 1.6vw, 1.25rem);
  line-height:1.3;
}

.portal-collapse-toggle em{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  color:#043968;
  background:#72B7DA;
  font-style:normal;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
}

.portal-collapse-toggle > i{
  color:#72B7DA;
  transition:transform 0.2s ease;
}

.portal-collapse-toggle[aria-expanded="true"] > i,
.portal-collapsible-card.open .portal-collapse-toggle > i{
  transform:rotate(180deg);
}

.portal-collapsible-body{
  display:grid;
  gap:18px;
  padding-top:20px;
}

.portal-collapsible-body[hidden]{
  display:none;
}

.partner-project-details{
  display:grid;
  gap:14px;
  margin:0;
}

.partner-project-details div{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,0.045);
}

.partner-project-details dt{
  margin-bottom:6px;
  color:#72B7DA;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
}

.partner-project-details dd{
  margin:0;
  color:#d8e5ef;
}

.partner-assets-box{
  display:grid;
  gap:14px;
  margin-top:18px;
  padding:18px;
  border-radius:20px;
  background:rgba(114,183,218,0.08);
  border:1px solid rgba(114,183,218,0.16);
}

.partner-assets-box h4{
  margin:0;
  font-size:18px;
}

.partner-assets-box p{
  margin:0;
  color:#c5d7e6;
}

.partner-asset-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.partner-asset-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  color:#043968;
  background:#72B7DA;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
}

.partner-assets-notes{
  margin-top:0;
}

.partner-project-details .protected-note{
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(2,26,48,0.78);
}

.protected-note dt{
  display:flex;
  align-items:center;
  gap:8px;
}

.portal-message-form{
  margin-top:18px;
}

.portal-message-list{
  display:grid;
  gap:14px;
}

.portal-message-card{
  display:grid;
  gap:12px;
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(114,183,218,0.16);
}

.portal-message-card span{
  display:inline-flex;
  margin-bottom:8px;
  color:#72B7DA;
  font-size:12px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}

.portal-message-card h3{
  margin:0 0 8px;
  font-size:20px;
}

.portal-message-card p{
  margin:0;
  color:#d8e5ef;
}

.portal-message-card small{
  color:#9fb8cc;
  line-height:1.7;
}

.admin-chat-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:28px;
}

.portal-chat-box{
  display:grid;
  gap:14px;
  padding:22px;
  border-radius:22px;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(114,183,218,0.16);
}

#chat-manager .portal-chat-box{
  min-width:0;
  min-height:650px;
  padding:28px;
  border-radius:30px;
  background:linear-gradient(145deg, rgba(4,57,104,0.72), rgba(2,26,48,0.92));
}

.portal-chat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.portal-chat-header strong{
  font-size:18px;
}

#chat-manager .portal-chat-header{
  align-items:flex-start;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
}

#chat-manager .portal-chat-header strong{
  max-width:360px;
  font-size:24px;
  line-height:1.25;
}

.portal-chat-header span,
.portal-unread-pill{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  color:#043968;
  background:#72B7DA;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.portal-chat-messages{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:280px;
  max-height:440px;
  overflow:auto;
  padding:16px;
  border-radius:18px;
  background:rgba(2,26,48,0.62);
  border:1px solid rgba(255,255,255,0.06);
}

#chat-manager .portal-chat-messages{
  min-height:360px;
  max-height:440px;
  border-radius:24px;
}

.portal-chat-messages.compact{
  min-height:180px;
  max-height:300px;
}

.portal-chat-message{
  width:min(78%, 620px);
  align-self:flex-start;
  padding:16px 18px;
  border-radius:18px 18px 18px 6px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.06);
}

.portal-chat-message.own{
  align-self:flex-end;
  border-radius:18px 18px 6px 18px;
  color:#043968;
  background:#72B7DA;
}

.portal-chat-message strong{
  display:block;
  margin-bottom:6px;
  font-size:13px;
}

.portal-chat-message p{
  margin:0;
  color:inherit;
}

.portal-chat-message span{
  display:block;
  margin-top:8px;
  opacity:0.74;
  font-size:11px;
  font-weight:700;
}

.portal-chat-empty{
  margin:auto;
  text-align:center;
  color:#c5d7e6;
}

.portal-chat-empty strong,
.portal-chat-empty span{
  display:block;
}

.portal-chat-form{
  display:grid;
  grid-template-columns:1fr 130px;
  gap:12px;
  align-items:end;
}

#chat-manager .portal-chat-form{
  grid-template-columns:minmax(0, 1fr) 150px;
  align-items:stretch;
}

.portal-chat-form textarea{
  min-height:70px;
  max-height:160px;
  resize:vertical;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  background:rgba(2,26,48,0.72);
  color:#ffffff;
  font:inherit;
  outline:none;
  padding:15px 18px;
}

#chat-manager .portal-chat-form textarea{
  min-height:78px;
  max-height:140px;
  font-size:16px;
}

#chat-manager .portal-chat-form .client-login-btn{
  min-height:78px;
}

.partner-chat-shortcut,
.partner-status-card{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:16px;
  padding:18px;
  border-radius:20px;
  color:#ffffff;
  text-decoration:none;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(114,183,218,0.16);
}

.partner-chat-shortcut strong,
.partner-status-summary strong{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.2;
}

.partner-status-summary{
  display:grid;
  gap:6px;
}

.partner-chat-shortcut span,
.partner-status-card span{
  color:#c5d7e6;
}

.partner-chat-shortcut span{
  text-align:right;
}

.partner-status-card em{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  color:#043968;
  background:#72B7DA;
  font-style:normal;
  font-weight:800;
  white-space:nowrap;
}

.partner-status-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}

.admin-secondary-btn{
  width:auto;
  min-height:42px;
  padding:0 16px;
  color:#d8e7f2;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.08);
}

.partner-status-edit-form{
  grid-column:1 / -1;
  margin-top:4px;
  padding:18px;
  border-radius:18px;
  background:rgba(2,26,48,0.5);
  border:1px solid rgba(114,183,218,0.14);
}

.partner-status-edit-form[hidden]{
  display:none;
}

.completed-library-controls{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(170px, 0.85fr) minmax(170px, 0.85fr) minmax(160px, auto);
  gap:14px;
  align-items:center;
  margin:26px 0;
  width:100%;
}

.completed-library-controls .client-login-btn{
  min-height:56px;
  white-space:nowrap;
}

.partner-completed-controls{
  grid-template-columns:minmax(240px, 1fr) auto;
}

.partner-project-actions .partner-status-apply{
  min-height:52px;
  padding-inline:20px;
  white-space:nowrap;
}

.completed-projects-list{
  display:grid;
  gap:16px;
}

.completed-project-card{
  padding:24px;
  border:1px solid rgba(114,183,218,0.2);
  border-radius:24px;
  background:linear-gradient(135deg, rgba(3,54,93,0.78), rgba(4,29,53,0.9));
  box-shadow:0 22px 50px rgba(0,0,0,0.18);
}

.completed-project-card-main{
  display:grid;
  gap:12px;
}

.completed-project-card-main > span{
  color:#72B7DA;
  font-size:0.78rem;
  font-weight:900;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.completed-project-card h3{
  color:#ffffff;
  font-size:clamp(1.25rem, 2vw, 1.8rem);
  margin:0;
}

.completed-project-card p{
  color:#c5d7e6;
  line-height:1.7;
  margin:0;
}

.completed-project-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.completed-project-meta small,
.completed-project-actions span,
.completed-project-actions a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  color:#d8e7f2;
  background:rgba(255,255,255,0.08);
  font-weight:800;
}

.completed-project-notes{
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,0.08);
}

.completed-project-actions{
  display:flex;
  justify-content:flex-end;
}

.completed-project-actions a{
  color:#043968;
  background:#72B7DA;
  text-decoration:none;
}

@media (max-width: 1180px){
  .completed-library-controls{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 920px){
  .completed-library-controls,
  .portal-collapse-toggle,
  .partner-project-actions{
    grid-template-columns:1fr;
  }

  .portal-collapse-toggle{
    text-align:left;
  }

  .partner-project-actions .partner-status-apply{
    width:100%;
  }

  .completed-project-actions{
    justify-content:flex-start;
  }

  .completed-project-actions a,
  .completed-project-actions span{
    width:100%;
    justify-content:center;
  }
}

.portal-notepad-form{
  display:grid;
  gap:16px;
}

.portal-notepad-form textarea{
  min-height:260px;
  resize:vertical;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:22px;
  background:rgba(2,26,48,0.72);
  color:#ffffff;
  font:inherit;
  outline:none;
  padding:20px;
}

.portal-chat-form .client-login-btn{
  min-height:58px;
}

.sitemap-hero{
  min-height:58vh;
  padding-bottom:54px;
}

.sitemap-quick-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  max-width:980px;
  margin:28px auto 0;
}

.sitemap-quick-links a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  color:#043968;
  background:#72B7DA;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
}

.sitemap-section{
  position:relative;
  z-index:1;
  padding:40px 6% 110px;
}

.sitemap-shell{
  width:min(1240px, 100%);
  margin:0 auto;
  display:grid;
  gap:28px;
}

.sitemap-intro-panel{
  display:grid;
  grid-template-columns:minmax(0, 0.85fr) minmax(280px, 0.55fr);
  gap:26px;
  align-items:center;
  padding:30px;
  border-radius:30px;
  background:linear-gradient(145deg, rgba(4,57,104,0.84), rgba(2,26,48,0.92));
  border:1px solid rgba(114,183,218,0.18);
  box-shadow:0 30px 80px rgba(0,0,0,0.2);
}

.sitemap-intro-panel h2{
  margin-bottom:10px;
  font-size:32px;
}

.sitemap-intro-panel p{
  color:#c5d7e6;
}

.sitemap-intro-panel ul{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.sitemap-intro-panel li{
  display:flex;
  align-items:center;
  gap:10px;
  color:#d8e5ef;
  font-weight:700;
}

.sitemap-intro-panel i{
  color:#72B7DA;
}

.sitemap-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
}

.sitemap-card{
  display:grid;
  align-content:start;
  gap:14px;
  padding:28px;
  border-radius:28px;
  background:linear-gradient(145deg, rgba(4,57,104,0.84), rgba(2,26,48,0.92));
  border:1px solid rgba(114,183,218,0.18);
  box-shadow:0 30px 80px rgba(0,0,0,0.2);
}

.sitemap-card h2{
  margin-bottom:4px;
  font-size:26px;
}

.sitemap-card p{
  margin-bottom:8px;
  color:#c5d7e6;
}

.sitemap-card a{
  display:grid;
  gap:4px;
  padding:15px 16px;
  border-radius:18px;
  color:#ffffff;
  text-decoration:none;
  font-weight:800;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
}

.sitemap-card a span{
  color:#b8cfdf;
  font-size:13px;
  font-weight:600;
}

.sitemap-card a:hover{
  color:#043968;
  background:#72B7DA;
}

.sitemap-card a:hover span{
  color:#043968;
}

.partner-project-actions{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 180px 170px;
  gap:14px;
  margin-top:18px;
}

.partner-project-actions a,
.partner-project-actions select,
.partner-project-actions button{
  min-height:50px;
  border-radius:16px;
  font:inherit;
  font-weight:800;
}

.partner-project-actions a{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  color:#043968;
  text-decoration:none;
  background:#72B7DA;
}

.partner-project-actions select{
  border:1px solid rgba(255,255,255,0.08);
  padding:0 38px 0 16px;
}

.admin-client-list{
  display:grid;
  gap:12px;
  max-height:460px;
  overflow:auto;
  margin-top:16px;
  padding-right:4px;
}

.admin-client-item{
  width:100%;
  display:grid;
  gap:5px;
  padding:16px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  background:rgba(255,255,255,0.04);
  color:#ffffff;
  text-align:left;
  font:inherit;
}

.admin-client-select{
  display:grid;
  gap:5px;
  width:100%;
  padding:0;
  border:0;
  color:inherit;
  background:transparent;
  cursor:pointer;
  text-align:left;
  font:inherit;
}

.admin-client-item.active,
.admin-client-item:hover{
  border-color:rgba(114,183,218,0.42);
  background:rgba(114,183,218,0.13);
}

.admin-danger-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:max-content;
  min-height:36px;
  margin-top:8px;
  padding:0 12px;
  border:1px solid rgba(255,122,122,0.28);
  border-radius:999px;
  color:#ffd2d2;
  background:rgba(255,90,90,0.12);
  cursor:pointer;
  font:inherit;
  font-size:12px;
  font-weight:800;
}

.admin-danger-btn:hover{
  color:#ffffff;
  background:rgba(255,90,90,0.3);
}

.admin-client-item span,
.admin-client-item small,
.admin-selected-client{
  color:#b8cfdf;
}

.admin-selected-client{
  margin-top:14px;
  font-weight:700;
}

.client-meeting-actions{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

.client-meeting-actions a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:58px;
  padding:14px 18px;
  border-radius:18px;
  background:rgba(114,183,218,0.14);
  border:1px solid rgba(114,183,218,0.22);
  color:#ffffff;
  text-decoration:none;
  font-weight:800;
}

.client-meeting-actions a:hover{
  background:#72B7DA;
  color:#043968;
}

.client-calendly-section{
  padding:30px;
  border-radius:28px;
  background:linear-gradient(145deg, rgba(4,57,104,0.84), rgba(2,26,48,0.92));
  border:1px solid rgba(114,183,218,0.18);
  box-shadow:0 30px 80px rgba(0,0,0,0.22);
}

.client-calendly-frame{
  overflow:hidden;
  border-radius:24px;
  background:#ffffff;
  border:1px solid rgba(114,183,218,0.22);
}

.client-calendly-frame .calendly-inline-widget{
  width:100%;
  height:760px !important;
  min-height:760px;
}

.portal-back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:35;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:0;
  border-radius:50%;
  color:#043968;
  background:#72B7DA;
  box-shadow:0 18px 40px rgba(0,0,0,0.28);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(12px);
  transition:opacity 0.2s ease, transform 0.2s ease;
}

.portal-back-to-top.show{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

@media(max-width:1100px){

  .client-login-panel,
  .client-dashboard-split,
  .admin-grid,
  .partner-project-grid,
  .portal-summary-grid,
  .sitemap-grid{
    grid-template-columns:1fr;
  }

  .client-login-brand{
    min-height:auto;
  }

  .client-progress-grid{
    grid-template-columns:1fr;
  }

  .admin-client-update-form{
    grid-template-columns:1fr;
  }

  .portal-header-actions{
    width:100%;
    justify-content:space-between;
    margin-left:0;
  }

  #chat-manager .client-section-heading,
  .sitemap-intro-panel{
    grid-template-columns:1fr;
  }

  #chat-manager .client-section-heading p{
    margin-left:0;
  }

}

@media(max-width:860px){

  body.dashboard-menu-open{
    overflow:hidden;
  }

  .client-dashboard-shell{
    grid-template-columns:1fr;
  }

  .client-sidebar-overlay{
    position:fixed;
    inset:0;
    display:block;
    z-index:19;
    pointer-events:none;
    opacity:0;
    background:rgba(1,12,24,0.82);
    backdrop-filter:blur(8px);
  }

  .client-dashboard-shell.sidebar-open .client-sidebar-overlay{
    pointer-events:auto;
    opacity:1;
  }

  .client-sidebar{
    position:fixed;
    inset:0 auto 0 0;
    width:min(340px, 86vw);
    transform:translateX(-100%);
    z-index:20;
    overflow-y:auto;
    padding-bottom:24px;
    background:linear-gradient(145deg, rgba(3,35,65,0.98), rgba(1,17,33,0.99));
    box-shadow:22px 0 70px rgba(0,0,0,0.44);
  }

  .client-dashboard-shell.sidebar-open .client-sidebar{
    transform:translateX(0);
  }

  .client-sidebar-close{
    display:inline-grid;
    place-items:center;
    position:absolute;
    top:18px;
    right:18px;
    width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:14px;
    background:rgba(255,255,255,0.08);
    color:#ffffff;
    cursor:pointer;
    font-size:18px;
  }

  .client-sidebar-toggle{
    display:inline-grid;
    place-items:center;
  }

  .client-dashboard-main{
    padding:22px;
  }

  .client-dashboard-header{
    position:sticky;
    top:0;
    z-index:12;
    align-items:flex-start;
    flex-direction:column;
    background:linear-gradient(145deg, rgba(4,57,104,0.96), rgba(2,26,48,0.98));
    backdrop-filter:blur(14px);
  }

  .client-logout-btn{
    margin-top:20px;
    margin-bottom:44px;
  }

  .client-header-cta{
    width:100%;
  }

  .client-support-card{
    width:100%;
  }

  .client-metrics-grid{
    grid-template-columns:1fr;
  }

  .client-meeting-actions{
    grid-template-columns:1fr;
  }

  .partner-project-actions{
    grid-template-columns:1fr;
  }

  #chat-manager .admin-panel-wide{
    padding:24px;
  }

  #chat-manager .client-section-heading h2{
    font-size:34px;
  }

  .admin-chat-grid,
  .portal-chat-form{
    grid-template-columns:1fr;
  }

  .portal-chat-message{
    width:92%;
  }

  .client-calendly-frame .calendly-inline-widget{
    height:min(720px, 78vh) !important;
    min-height:620px;
  }

  .sitemap-hero{
    min-height:auto;
  }

  .sitemap-intro-panel,
  .sitemap-card{
    padding:22px;
    border-radius:24px;
  }

}

@media(max-width:760px){
  .partner-chat-shortcut,
  .partner-status-card{
    grid-template-columns:1fr;
  }

  .partner-chat-shortcut{
    gap:10px;
  }

  .partner-chat-shortcut span{
    text-align:left;
  }

  .partner-status-actions{
    justify-content:flex-start;
  }

  .partner-status-actions .admin-danger-btn,
  .partner-status-actions .admin-secondary-btn{
    width:100%;
  }
}

@media(max-width:560px){

  .client-login-page{
    padding:24px 5%;
  }

  .client-login-brand,
  .client-login-card,
  .client-dashboard-header{
    padding:24px;
    border-radius:24px;
  }

  .client-login-brand h1{
    font-size:34px;
  }

  .client-card-header h2,
  .client-section-heading h2,
  .client-dashboard-header h1{
    font-size:28px;
  }

  .client-login-options{
    align-items:flex-start;
    flex-direction:column;
  }

  .client-timeline-item{
    grid-template-columns:1fr;
  }

  .client-dashboard-main{
    padding:16px;
  }

  .portal-notification-dropdown{
    top:86px;
    right:16px;
    left:16px;
    width:auto;
    max-height:calc(100vh - 112px);
  }

  .portal-invoice-modal{
    padding:14px;
  }

  .portal-invoice-dialog{
    max-height:calc(100vh - 28px);
    padding:14px;
    border-radius:24px;
  }

  .portal-invoice-top,
  .portal-invoice-grid,
  .portal-invoice-summary{
    grid-template-columns:1fr;
  }

  .portal-invoice-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }

  .portal-invoice-toolbar-actions{
    flex-direction:column;
    align-items:stretch;
    width:100%;
  }

  .portal-invoice-print-btn,
  .portal-invoice-download-btn,
  .portal-invoice-close{
    width:100%;
  }

  .portal-invoice-document{
    padding:20px;
    border-radius:22px;
  }

  .portal-invoice-brand{
    display:grid;
    gap:16px;
  }

  .portal-invoice-brand img{
    width:160px;
  }

  .portal-invoice-brand h2{
    font-size:32px;
  }

  .portal-invoice-table-row{
    grid-template-columns:1fr;
    gap:10px;
  }

  .portal-record-card-head{
    flex-direction:column;
  }

  .portal-back-to-top{
    right:16px;
    bottom:18px;
    width:48px;
    height:48px;
  }

  .client-support-section,
  .client-calendly-section,
  .partner-project-card,
  .admin-panel{
    padding:20px;
    border-radius:22px;
  }

  .portal-chat-box{
    padding:16px;
    border-radius:20px;
  }

  .portal-chat-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .portal-chat-messages,
  .portal-chat-messages.compact{
    min-height:360px;
    max-height:520px;
    padding:12px;
  }

  .portal-chat-message{
    width:96%;
    padding:16px;
    font-size:16px;
    line-height:1.55;
  }

  .portal-chat-message p{
    font-size:16px;
  }

  .portal-chat-form{
    grid-template-columns:1fr;
  }

  .portal-chat-form textarea{
    min-height:120px;
    font-size:16px;
  }

  .client-calendly-frame .calendly-inline-widget{
    height:640px !important;
    min-height:580px;
  }

  .partner-chat-shortcut,
  .partner-status-card{
    align-items:flex-start;
  }

}

@media print{
  @page{
    margin:10mm;
    size:A4 portrait;
  }

  body.printing-invoice{
    background:#ffffff !important;
  }

  body.printing-invoice .client-dashboard-shell,
  body.printing-invoice .client-sidebar,
  body.printing-invoice .client-dashboard-header,
  body.printing-invoice .client-sidebar-overlay,
  body.printing-invoice .portal-back-to-top{
    display:none !important;
  }

  body.printing-invoice .portal-invoice-modal{
    position:static;
    inset:auto;
    display:block !important;
    padding:0;
    background:none;
  }

  body.printing-invoice .portal-invoice-backdrop,
  body.printing-invoice .portal-invoice-toolbar,
  body.printing-invoice .portal-invoice-close,
  body.printing-invoice .portal-invoice-print-btn,
  body.printing-invoice .portal-invoice-download-btn{
    display:none !important;
  }

  body.printing-invoice .portal-invoice-dialog{
    width:100%;
    max-height:none;
    overflow:visible;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
  }

  body.printing-invoice .portal-invoice-document{
    padding:0;
    border-radius:0;
    box-shadow:none;
    gap:14px;
    font-size:13px;
    line-height:1.45;
  }

  body.printing-invoice .portal-invoice-top{
    gap:12px;
    padding-bottom:12px;
  }

  body.printing-invoice .portal-invoice-brand{
    gap:12px;
  }

  body.printing-invoice .portal-invoice-brand img{
    width:150px;
  }

  body.printing-invoice .portal-invoice-brand h2{
    margin:6px 0 10px;
    font-size:28px;
  }

  body.printing-invoice .portal-invoice-meta,
  body.printing-invoice .portal-invoice-block,
  body.printing-invoice .portal-invoice-summary-card{
    padding:12px;
    border-radius:14px;
  }

  body.printing-invoice .portal-invoice-grid,
  body.printing-invoice .portal-invoice-summary{
    gap:10px;
  }

  body.printing-invoice .portal-invoice-table-row{
    padding:10px 12px;
    gap:10px;
  }

  body.printing-invoice .portal-invoice-contact-list{
    gap:4px;
    font-size:12px;
  }

  body.printing-invoice .portal-invoice-block p,
  body.printing-invoice .portal-invoice-table-row span{
    line-height:1.45;
  }
}