/* ====== RESET (tiny) ====== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; color: #1a1a1a; background:#fff; }
a { color: inherit; text-decoration: none; }

/* ====== LAYOUT HELPERS ====== */
.container { width: 92%; max-width: 1100px; margin: 0 auto; }

/* ====== HEADER & NAV (simple) ====== */
header { background:#fff; border-bottom:1px solid #e6e6e6; }
header .nav { display:flex; align-items:center; justify-content:space-between; padding:12px 0; overflow:visible; }
.logo { font-weight:700; font-size:1.25rem; color:#3b3bff; }

/* ====== H2 Tech Deco ====== */
h2.decotech{
  position: relative;
  display: inline-block;      /* centers the deco with the text */
  padding-bottom: 18px;       /* room for the symbol/line */
}

/* centered line */
h2.decotech::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2px;
  width: 110px;               /* line length */
  height: 2px;
  background: linear-gradient(90deg, transparent, #d9ddf0 20%, #d9ddf0 80%, transparent);
  border-radius: 2px;
}

/* centered symbol */
h2.decotech::after{
  content: "✦";               /* change to ◈ ⟡ ⌁ ◆ ▣ as you like */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  font-size: 18px;
  color: #5973ff;             /* accent color */
  background: transparent;
}

/* Dark-section variants (hero / final CTA) */
#hero h2.decotech::before,
#cta-banner h2.decotech::before{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35) 20%, rgba(255,255,255,.35) 80%, transparent);
}
#hero h2.decotech::after,
#cta-banner h2.decotech::after{
  color:#ffffff;
}







/* ====== HERO BUTTONS: standout + pulse + shine ====== */
#hero .hero-buttons { gap: 12px; }

/* Shared hero button look on dark bg */
#hero .btn{
  position: relative;
  isolation: isolate;                     /* keep shine under focus ring */
  padding: 12px 18px;
  font-weight: 800;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.55);
  color: #fff;
  background: rgba(255,255,255,0.06);
  box-shadow:
    0 8px 22px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

/* Primary = bright gradient chip with glow */
#hero .btn.primary{
  border-color: transparent;
  color: #1d1f60;
  background: linear-gradient(135deg, #ffffff 0%, #eaf0ff 65%, #dfe7ff 100%);
  box-shadow:
    0 10px 28px rgba(24,46,255,.28),
    0 2px 0 rgba(255,255,255,.7) inset;
}
#hero .btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 34px rgba(24,46,255,.32),
    inset 0 1px 0 rgba(255,255,255,.22);
}

/* Make sure the button clips the shine inside */
#hero .btn{
  position: relative;
  overflow: hidden;            /* <-- important */
  isolation: isolate;
}

/* Shine strip */
#hero .btn::before{
  content: "";
  position: absolute;
  top: 0;
  left: -60%;                  /* start well off the left */
  width: 50%;                  /* width of the shine band */
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.65) 50%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(0.5px);         /* tiny softening so it doesn't look harsh */
  opacity: .9;
  pointer-events: none;
}

/* Trigger the sweep on hover/focus */
#hero .btn:hover::before,
#hero .btn:focus-visible::before{
  animation: btnShineSweep 900ms ease;
}

@keyframes btnShineSweep{
  from { transform: translateX(0); }
  to   { transform: translateX(220%); }  /* travels fully across */
}




















/* Desktop nav (default) */
nav { position: static; display:block; }
nav ul { list-style:none; display:flex; gap:16px; }
nav li a { padding:6px 4px; }
nav li a.cta { background:#3b3bff; color:#fff; padding:8px 12px; border-radius:8px; }

/* Hamburger (boxed) */
.menu-toggle{
  display:none;                /* hidden on desktop */
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  position: relative;
}
/* 3 simple bars */
.menu-toggle .bar{ display:block; width:22px; height:3px; background:#3b3bff; margin:3px 0; }

/* Show an X by swapping bars for text when open (no rotations) */
.menu-toggle .x{ display:none; position:absolute; inset:0; align-items:center; justify-content:center; font-size:26px; color:#3b3bff; }
.menu-toggle.open .bar{ display:none; }
.menu-toggle.open .x{ display:flex; }

/* ====== MOBILE ====== */
@media (max-width:768px){
  /* show hamburger */
  .menu-toggle{ display:block; }

  /* hide desktop menu by default */
  nav{
    position:absolute; right:10px; top:64px;
    width:240px; background:#fff; border:1px solid #e6e6e6; border-radius:10px;
    box-shadow:0 10px 20px rgba(0,0,0,.08);
    display:none; padding:14px; z-index:999;
  }
  nav.active{ display:block; }

  nav ul{ flex-direction:column; gap:10px; }
  nav li a{ display:block; padding:8px 6px; font-size:1.05rem; }
  nav li a.cta{ text-align:center; padding:10px 12px; }
}


/* ====== HERO: centered + tech background + glass card ====== */
#hero{
  /* layout */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 56px 0;

  /* color */
  color:#fff;
  position:relative;
  overflow:hidden;

  /* TECH BACKGROUND – Option A (default): gradient + subtle grid */
  background-color:#2f2fb3; /* fallback */
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,0.08), rgba(255,255,255,0) 60%),
    radial-gradient(800px 400px at -10% 110%, rgba(0,0,0,0.25), rgba(0,0,0,0) 50%),
    linear-gradient(135deg, #3b3bff 0%, #5a3bff 40%, #3421a8 100%),
    /* grid pattern on top */
    linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    28px 28px,           /* grid cell width */
    28px 28px;           /* grid cell height */
  background-position: center center;
}

/* Glass card for readability */
#hero .hero-inner{
  width:min(800px, 92%);
  background: rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.20);
  border-radius:16px;
  padding:28px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#hero h1{
  font-size:clamp(2rem, 4.5vw, 3rem);
  line-height:1.15;
  margin-bottom:12px;
  font-weight:800;
}

#hero p{
  font-size:clamp(1rem, 2.2vw, 1.15rem);
  color: #eef0ff;
  margin: 8px auto 18px auto;
}

#hero .hero-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

/* Buttons on dark bg */
#hero .btn{
  background: transparent;
  color:#fff;
  border:1px solid rgba(255,255,255,0.65);
}
#hero .btn:hover{ background: rgba(255,255,255,0.12); }
#hero .btn.primary{
  background:#ffffff;
  color:#3b3bff;
  border-color:#ffffff;
}
#hero .btn.primary:hover{ background:#f4f6ff; }

/* Mobile spacing */
@media (max-width:768px){
  #hero{ padding: 40px 0; }
  #hero .hero-inner{ padding:24px 18px; }
}

/* ====== SERVICES OVERVIEW: card containers ====== */
#services-overview{
  background:#f7f9ff;           /* subtle contrast from hero */
  padding:48px 0;
  text-align:center;
}

#services-overview h2{
  font-size:1.8rem;
  margin-bottom:8px;
}

#services-overview > p{
  color:#5d6470;
  max-width:700px;
  margin:0 auto 22px;
}

/* Grid */
.service-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:18px;
  margin-top:10px;
}

/* Card */
.service-cards .card{
  background:#fff;
  border:1px solid #e8eaf2;
  border-radius:14px;
  padding:22px;
  text-align:left;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative;
  overflow:hidden;
}

/* Subtle corner sheen */
.service-cards .card::after{
  content:"";
  position:absolute;
  top:-40px; right:-40px;
  width:120px; height:120px;
  background: radial-gradient(closest-side, rgba(59,59,255,.15), transparent 70%);
  pointer-events:none;
}

.service-cards .card:hover{
  transform: translateY(-6px);
  box-shadow:0 14px 28px rgba(0,0,0,.10);
  border-color:#d9ddf0;
}

/* Icon badge (drop an emoji or svg inside) */
.service-cards .card .icon{
  width:52px; height:52px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:#eef2ff;
  color:#3b3bff;
  font-size:26px;
  margin-bottom:12px;
}

/* Headings & text inside card */
.service-cards .card h3{
  font-size:1.2rem;
  margin-bottom:6px;
  color:#1a1a1a;
}

.service-cards .card p{
  color:#4a4f59;
  line-height:1.55;
  margin-bottom:12px;
}

/* Optional list items inside card */
.service-cards .card ul{
  margin:6px 0 12px 18px;
}
.service-cards .card li{
  margin:4px 0;
  color:#414755;
}

/* CTA link in card (optional) */
.service-cards .card .card-cta{
  display:inline-block;
  margin-top:6px;
  font-weight:700;
  color:#3b3bff;
}
.service-cards .card .card-cta:hover{ text-decoration:underline; }

/* Responsive tweaks */
@media (max-width:768px){
  #services-overview{ padding:36px 0; }
  .service-cards{ gap:14px; }
  .service-cards .card{ padding:18px; }
}

/* ====== FEATURES LIST ====== */
.features{
  list-style: none;
  max-width: 800px;
  margin: 10px auto 0;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;                /* row / column gaps */
}

/* each item as a pill/card with a check icon */
.features li{
  position: relative;
  padding: 10px 12px 10px 40px;  /* left space for icon */
  border: 1px solid #e8eaf2;
  border-radius: 12px;
  background: #fff;
  color: #2b2f3a;
  line-height: 1.45;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

/* check icon */
.features li::before{
  content: "✔";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #3b3bff;
  border-radius: 6px;
}

/* subtle hover (optional) */
.features li:hover{
  border-color: #d9ddf0;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  transform: translateY(-1px);
  transition: all .15s ease;
}

/* ====== PORTFOLIO PREVIEW ====== */
#portfolio-preview{
  background:#f7f9ff;
  padding:48px 0;
}

#portfolio-preview h2{
  text-align:center;
  font-size:1.8rem;
  margin-bottom:22px;
}

/* Grid */
.portfolio-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:18px;
}

/* Card */
.project{
  background:#fff;
  border:1px solid #e8eaf2;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex;
  flex-direction:column;
}

/* Thumbnail with fixed aspect ratio */
.project .thumb{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 10;              /* keeps thumbnails consistent */
  background:#eef2ff;                 /* fallback color */
  overflow:hidden;
}
.project .thumb img{
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  display:block;
  transition: transform .35s ease;
}

/* Content */
.project .body{
  padding:14px 14px 16px;
}
.project .title{
  font-size:1.1rem;
  font-weight:700;
  color:#1a1a1a;
  margin-bottom:6px;
}
.project .meta{
  color:#5d6470;
  font-size:.95rem;
  margin-bottom:8px;
}
.project .desc{
  color:#444b57;
  font-size:.98rem;
}

/* Tags (optional) */
.project .tags{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:0 14px 14px;
}
.project .tag{
  font-size:.8rem;
  padding:4px 8px;
  background:#eef2ff;
  color:#3b3bff;
  border-radius:999px;
  border:1px solid #dbe0ff;
}

/* Footer link/button */
.project .actions{
  margin-top:auto;
  padding:12px 14px 16px;
}
.project .link{
  display:inline-block;
  font-weight:700;
  color:#3b3bff;
}
.project .link:hover{ text-decoration:underline; }

/* Hover */
.project:hover{
  transform: translateY(-6px);
  box-shadow:0 14px 28px rgba(0,0,0,.10);
  border-color:#d9ddf0;
}
.project:hover .thumb img{
  transform: scale(1.04);
}

/* Optional: overlay caption on hover */
.project .overlay{
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 55%);
  color:#fff;
  opacity:0;
  transition: opacity .25s ease;
  padding:12px;
}
.project:hover .overlay{ opacity:1; }

@media (max-width:768px){
  #portfolio-preview{ padding:36px 0; }
  .portfolio-cards{ gap:14px; }
}

/* ====== FINAL CTA BANNER ====== */
#cta-banner{
  position: relative;
  padding: 56px 0;
  text-align: center;
  color: #fff;

  /* Techy gradient background */
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(255,255,255,0.12), rgba(255,255,255,0) 60%),
    radial-gradient(700px 300px at -10% 110%, rgba(0,0,0,0.25), rgba(0,0,0,0) 60%),
    linear-gradient(135deg, #3b3bff 0%, #5a3bff 40%, #3421a8 100%);
  overflow: hidden;
}

#cta-banner h2{
  font-size: clamp(1.6rem, 3.2vw, 2rem);
  margin-bottom: 8px;
  font-weight: 800;
}

#cta-banner p{
  max-width: 740px;
  margin: 0 auto 18px;
  color: #eef0ff;
  font-size: clamp(1rem, 2.2vw, 1.1rem);
}

/* Button row */
#cta-banner .cta-buttons{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Buttons on dark background */
#cta-banner .btn{
  border: 1px solid rgba(255,255,255,0.65);
  color: #fff;
  background: transparent;
}
#cta-banner .btn:hover{
  background: rgba(255,255,255,0.12);
}
#cta-banner .btn.primary{
  background: #ffffff;
  color: #3b3bff;
  border-color: #ffffff;
}
#cta-banner .btn.primary:hover{
  background: #f4f6ff;
}








/* ====== GLOBAL PRIMARY BUTTON (light sections) ====== */
.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  font-weight:800;
  text-decoration:none;
  border:1px solid #dcdcdc;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
  will-change: transform;
}

.btn.primary{
  color:#1d1f60;
  background: linear-gradient(135deg, #ffffff 0%, #eef3ff 60%, #e3eaff 100%);
  border-color:#e3e8ff;
  box-shadow:
    0 10px 24px rgba(59,59,255,.16),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.btn.primary:hover{
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ffffff 0%, #eaf0ff 60%, #dae4ff 100%);
  box-shadow:
    0 14px 30px rgba(59,59,255,.22),
    inset 0 1px 0 rgba(255,255,255,.9);
  border-color:#dae2ff;
}

.btn.primary:active{
  transform: translateY(0);
  box-shadow:
    0 6px 14px rgba(59,59,255,.18),
    inset 0 1px 0 rgba(255,255,255,.8);
}

/* Keyboard focus ring */
.btn.primary:focus-visible{
  outline: 3px solid rgba(59,59,255,.35);
  outline-offset: 3px;
}

/* Optional: subtle pulse to draw attention */
.btn.primary.pulse{
  animation: ctaPulse 2.6s ease-in-out infinite;
}
@keyframes ctaPulse{
  0%,100%{ box-shadow: 0 10px 24px rgba(59,59,255,.16), inset 0 1px 0 rgba(255,255,255,.85); }
  50%    { box-shadow: 0 18px 42px rgba(59,59,255,.28), inset 0 1px 0 rgba(255,255,255,.9); }
}

/* Optional: precise shine sweep on hover (aligned) */
.btn.primary{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn.primary::before{
  content:"";
  position:absolute;
  top:0; left:-60%;
  width:50%; height:100%;
  background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%);
  pointer-events:none;
  opacity:.9;
}
.btn.primary:hover::before,
.btn.primary:focus-visible::before{
  animation: btnShineSweep 900ms ease;
}
@keyframes btnShineSweep{
  from{ transform: translateX(0); }
  to  { transform: translateX(220%); }
}

/* Mobile: allow full-width CTA if desired */
@media (max-width:768px){
  .btn.primary.block-mobile{ display:block; width:100%; text-align:center; }
}


/* ====== ABOUT ====== */
#about{
  background:#ffffff;
  padding:56px 0;
}

#about .lead{
  max-width: 820px;
  margin: 10px auto 16px;
  color:#42495a;
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  text-align: center;
}

.about-pills{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
  list-style:none;
  margin:12px 0 26px;
}
.about-pills li{
  background:#eef2ff;
  color:#3b3bff;
  border:1px solid #dbe0ff;
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
}

/* Cards explaining mission / audience / process */
.about-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
  margin: 10px 0 28px;
}
.about-card{
  background:#fff;
  border:1px solid #e8eaf2;
  border-radius:14px;
  padding:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.about-card h3{
  margin-bottom:8px;
  font-size:1.15rem;
  color:#1a1a1a;
}
.about-card p{
  color:#4a4f59;
  line-height:1.6;
}

/* Simple numbered steps */
.about-steps{
  list-style:none;
  margin:0; padding:0;
  display:grid; gap:10px;
}
.about-steps li{
  display:flex; align-items:center; gap:10px;
  color:#414755;
}
.about-steps li span{
  width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#3b3bff; color:#fff; border-radius:8px;
  font-weight:800; font-size:.95rem;
}

/* CTA under section */
.about-cta{ text-align:center; margin-top:24px; }

/* Responsive */
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  #about{ padding:44px 0; }
  .about-grid{ grid-template-columns: 1fr; }
}

/* ====== SERVICES HERO (uses your hero glass style) ====== */
#services-hero{
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(255,255,255,0.12), rgba(255,255,255,0) 60%),
    radial-gradient(700px 300px at -10% 110%, rgba(0,0,0,0.25), rgba(0,0,0,0) 60%),
    linear-gradient(135deg, #3b3bff 0%, #5a3bff 40%, #3421a8 100%);
  color:#fff;
  padding:56px 0;
  text-align:center;
}
#services-hero .hero-inner{
  width:min(900px, 92%);
  margin:0 auto;
  background: rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.20);
  border-radius:16px;
  padding:28px 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#services-hero h1{ font-size: clamp(2rem, 4.2vw, 2.6rem); margin-bottom:10px; }
#services-hero .lead{ color:#eef0ff; }

/* ====== SERVICE CATEGORIES intro ====== */
#service-categories{ padding:44px 0; }
#service-categories .section-intro{
  max-width:760px; margin:8px auto 18px; text-align:center; color:#5d6470;
}

/* reuse existing .service-cards styles for the grid/cards */

/* ====== DETAIL SECTIONS ====== */
.service-detail{ padding:44px 0; background:#fff; }
.service-detail.alt{ background:#f7f9ff; }
.detail-grid{
  display:grid; grid-template-columns: 1.4fr 1fr; gap:22px; align-items:center;
}
.detail-text p{ color:#444b57; margin: 8px 0 10px; }
.bullets{ list-style: none; margin: 8px 0 16px; padding: 0; }
.bullets li{ margin: 6px 0; padding-left: 20px; position: relative; color:#414755; }
.bullets li::before{
  content:"•"; position:absolute; left:0; color:#3b3bff; font-weight:900;
}

/* mockup placeholders (replace with imgs later) */
.detail-media .mockup{
  width:100%; aspect-ratio: 16/10; border-radius:14px;
  background:
    linear-gradient(135deg, #eaf0ff, #dde6ff);
  border:1px solid #dbe0ff;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.detail-media .mockup.two{ background: linear-gradient(135deg, #f0f7ff, #e6efff); }
.detail-media .mockup.three{ background: linear-gradient(135deg, #ebf8ff, #def1ff); }
.detail-media .mockup.four{ background: linear-gradient(135deg, #f7f0ff, #ede6ff); }
.detail-media .mockup.five{ background: linear-gradient(135deg, #f0fff6, #e6ffee); }

/* ====== PROCESS ====== */
#process{ background:#fff; padding:44px 0; text-align:center; }
.process-row{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px; margin-top:14px;
}
.step{
  background:#fff; border:1px solid #e8eaf2; border-radius:14px; padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.step .num{
  width:28px; height:28px; margin:0 auto 8px;
  border-radius:8px; background:#3b3bff; color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.step h4{ margin-bottom:6px; }

/* ====== FAQ ====== */
#faq{ background:#f7f9ff; padding:44px 0; }
.faq-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px 18px; }
details{
  background:#fff; border:1px solid #e8eaf2; border-radius:12px; padding:12px 14px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
summary{ cursor:pointer; font-weight:700; }
details p{ margin-top:6px; color:#444b57; }

/* ====== RESPONSIVE ====== */
@media (max-width: 900px){
  .detail-grid{ grid-template-columns: 1fr; }
  .process-row{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .faq-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  #services-hero{ padding:40px 0; }
  #service-categories{ padding:36px 0; }
  .service-detail{ padding:36px 0; }
}


/* ====== PRICING HERO ====== */
#pricing-hero{
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(255,255,255,0.12), rgba(255,255,255,0) 60%),
    radial-gradient(700px 300px at -10% 110%, rgba(0,0,0,0.25), rgba(0,0,0,0) 60%),
    linear-gradient(135deg, #3b3bff 0%, #5a3bff 40%, #3421a8 100%);
  color:#fff; padding:56px 0; text-align:center;
}
#pricing-hero .hero-inner{
  width:min(900px, 92%); margin:0 auto;
  background: rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.20);
  border-radius:16px; padding:28px 22px;
  backdrop-filter: blur(8px);
}

/* ====== PRICE CARDS ====== */
.price-cards{
  display:grid; gap:18px; margin-top:14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.price-card{
  background:#fff; border:1px solid #e8eaf2; border-radius:16px;
  padding:18px; box-shadow:0 6px 18px rgba(0,0,0,.06);
  display:flex; flex-direction:column; justify-content:space-between;
}
.price-card .pc-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.price-card h3{ font-size:1.2rem; }
.price-card .pill{
  font-size:.8rem; padding:6px 10px; border-radius:999px;
  background:#eef2ff; color:#3b3bff; border:1px solid #dbe0ff; font-weight:700;
}
.price-card .price{ font-size:1.6rem; font-weight:800; margin:6px 0 10px; color:#1a1a1a; }
.price-card .price .from{ font-size:.85rem; color:#616777; font-weight:700; margin-right:6px; }
.pc-list{ list-style:none; margin:0 0 14px; padding:0; }
.pc-list li{ margin:8px 0; padding-left:20px; position:relative; color:#414755; }
.pc-list li::before{
  content:"•"; position:absolute; left:0; color:#3b3bff; font-weight:900;
}

/* Popular card */
.price-card.popular{
  border-color:#dbe0ff;
  box-shadow:0 12px 28px rgba(59,59,255,.12);
  position:relative;
}
.price-card .badge{
  position:absolute; top:-10px; right:14px;
  background:#3b3bff; color:#fff; font-weight:800; font-size:.78rem;
  padding:6px 10px; border-radius:999px; box-shadow:0 6px 16px rgba(59,59,255,.25);
}

/* Notes */
.price-notes{ text-align:center; color:#596070; margin-top:10px; }

/* ====== ADDONS ====== */
.addon-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px;
}
.addon{
  background:#fff; border:1px solid #e8eaf2; border-radius:14px; padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.addon h4{ margin-bottom:6px; }
.addon p{ color:#4a4f59; }
.addon-price{ margin-top:8px; font-weight:800; color:#1a1a1a; }

/* ====== COMPARISON TABLE ====== */
.compare-wrap{ overflow:auto; border-radius:14px; border:1px solid #e8eaf2; }
.compare{
  width:100%; border-collapse:collapse; background:#fff;
}
.compare th, .compare td{
  padding:12px 14px; border-bottom:1px solid #eef0f6; text-align:left;
}
.compare thead th{
  background:#f7f9ff; font-weight:800;
}
.compare tbody tr:hover{ background:#fafbff; }

/* Responsive spacing */
@media (max-width:560px){
  #pricing-hero{ padding:40px 0; }
}


/* ====== PORTFOLIO HERO ====== */
#portfolio-hero{
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(255,255,255,0.12), rgba(255,255,255,0) 60%),
    radial-gradient(700px 300px at -10% 110%, rgba(0,0,0,0.25), rgba(0,0,0,0) 60%),
    linear-gradient(135deg, #3b3bff 0%, #5a3bff 40%, #3421a8 100%);
  color:#fff; padding:56px 0; text-align:center;
}
#portfolio-hero .hero-inner{
  width:min(900px, 92%); margin:0 auto;
  background: rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.20);
  border-radius:16px; padding:28px 22px;
  backdrop-filter: blur(8px);
}

/* ====== FEATURED CASES ====== */
.case-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:18px; margin-top:14px;
}
.case{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:14px;
  background:#fff; border:1px solid #e8eaf2; border-radius:16px; padding:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.case-media img{
  width:100%; height:auto; display:block; border-radius:12px; border:1px solid #dbe0ff;
}
.case-body h3{ margin-bottom:6px; }
.case-desc{ color:#4a4f59; margin-bottom:8px; }
.case-points{ list-style:none; padding:0; margin:0 0 10px; }
.case-points li{ margin:6px 0; padding-left:18px; position:relative; color:#414755; }
.case-points li::before{ content:"•"; position:absolute; left:0; color:#3b3bff; font-weight:900; }
.case-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* Responsive case layout */
@media (max-width:900px){ .case{ grid-template-columns: 1fr; } }

/* ====== LIGHTBOX ====== */
dialog#lightbox{
  border:none; padding:0; border-radius:12px;
  max-width:min(1000px, 92%); width:auto;
  background:#000; position:relative;
}
dialog#lightbox::backdrop{ background: rgba(0,0,0,.6); }
#lb-img{ display:block; max-width:100%; height:auto; border-radius:12px; }
#lb-close{
  position:absolute; right:10px; top:10px;
  width:36px; height:36px; border:none; border-radius:8px;
  background:#ffffff; color:#1a1a1a; font-size:22px; line-height:1; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* ====== GALLERY ====== */
/* Reuses your .portfolio-cards and .project styles from earlier */
#portfolio-gallery{ padding:44px 0; }


/* ====== CONTACT HERO ====== */
#contact-hero{
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(255,255,255,0.12), rgba(255,255,255,0) 60%),
    radial-gradient(700px 300px at -10% 110%, rgba(0,0,0,0.25), rgba(0,0,0,0) 60%),
    linear-gradient(135deg, #3b3bff 0%, #5a3bff 40%, #3421a8 100%);
  color:#fff; padding:56px 0; text-align:center;
}
#contact-hero .hero-inner{
  width:min(900px, 92%); margin:0 auto;
  background: rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.20);
  border-radius:16px; padding:28px 22px;
  backdrop-filter: blur(8px);
}

/* ====== FORM ====== */
.quote-form{
  max-width: 900px; margin:14px auto 0;
  background:#fff; border:1px solid #e8eaf2; border-radius:16px; padding:18px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.quote-form .grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:14px;
}
@media (max-width:720px){ .quote-form .grid{ grid-template-columns: 1fr; } }

.field{ display:flex; flex-direction:column; gap:6px; }
.field label, .quote-form legend{ font-weight:700; font-size:.96rem; color:#1a1a1a; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="file"],
.field select,
.field textarea{
  border:1px solid #dfe3ee; border-radius:10px; padding:10px 12px;
  font:inherit; color:#1a1a1a; background:#fff;
}
.field textarea{ resize:vertical; }

.choices{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:6px; }
.choices label{ display:flex; align-items:center; gap:8px; font-weight:600; color:#414755; }

.muted{ color:#667085; }
.small{ font-size:.9rem; }

.agree{ margin:10px 0; font-weight:600; }
.actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* Honeypot hidden */
.hp{ display:none; }

/* Success alert */
.form-success{
  max-width:900px; margin:0 auto 12px; padding:12px 14px;
  background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; border-radius:10px;
}

/* Direct contact block */
.contact-direct{
	  text-align:center;
	 margin-top:18px;
	 padding:26px;
}





















/* Optional: top wave divider */
#cta-banner::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 24px;
  background: linear-gradient(to bottom, #f7f9ff 0%, transparent 100%);
  opacity: .8;
  pointer-events: none;
}

/* Optional: soft glow dots for depth */
#cta-banner::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(6px 6px at 20% 70%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(6px 6px at 75% 35%, rgba(255,255,255,.18), transparent 60%);
  pointer-events: none;
}

/* ====== FOOTER ====== */
footer{
  background: #0f1326;                 /* deep navy */
  color: #cfd3e0;                       /* soft gray text */
  position: relative;
}

/* subtle top divider glow */
footer::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:16px;
  background: linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,0));
  pointer-events:none;
}

.footer-grid{
  padding: 40px 0 26px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

/* headings */
footer h4{
  color:#ffffff;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.02em;
  margin-bottom:12px;
  position:relative;
}

/* tiny accent underline */
footer h4::after{
  content:"";
  display:block;
  width:28px; height:2px;
  background:#5973ff;                  /* brand accent */
  margin-top:8px;
  border-radius:2px;
}

/* lists */
footer ul{ list-style:none; }
footer li{ margin:8px 0; }

/* links */
footer a{
  color:#cfd3e0;
  text-decoration:none;
  transition: color .15s ease, transform .15s ease;
}
footer a:hover{
  color:#ffffff;
  transform: translateX(2px);
}
footer a:focus-visible{
  outline:2px solid rgba(89,115,255,.6);
  outline-offset:3px;
  border-radius:4px;
}

/* contact block text */
footer p{ margin:6px 0; }

/* bottom bar */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:14px 0 22px;
  text-align:center;
  font-size:.95rem;
  color:#a9afc4;
}

/* responsive */
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; gap:22px; }
}









/* Responsive spacing */
@media (max-width:768px){
  #cta-banner{ padding: 44px 0; }
}


/* single-column on mobile */
@media (max-width: 768px){
  .features{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0;
  }
}


/* ====== FOOTER (minimal) ====== */
footer{ background:#111; color:#ddd; padding:24px 0; font-size:.95rem; }