/* ==========================================================
   DEEALVI ULTRA LUX — main.css
   ========================================================== */

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

html{scroll-behavior:smooth;}

body.deealvi-body{
  font-family:'Montserrat',sans-serif;
  background:#0b0b0d;
  color:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

.root{
  font-family:'Montserrat',sans-serif;
  background:#0b0b0d;
  color:#fff;
  overflow-x:hidden;
}

/* ── NAV ─────────────────────────────────────────────────── */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 36px;
  background:#0b0b0d;
  border-bottom:1px solid rgba(51,60,179,0.12);
  position:fixed;
  top:0;left:0;right:0;
  z-index:9999;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.nav::after{
  content:'';
  position:absolute;
  bottom:0;left:10%;right:10%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(51,60,179,0.4),transparent);
}
.nav-spacer{height:70px;}

/* Fix: backdrop-filter on .nav creates a "containing block" for the
   fixed-position mobile menu, confining it to the nav bar instead of
   the full screen. Removing it while the menu is open lets the menu
   cover the whole viewport properly. */
.nav.menu-open{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Center the menu in the nav bar on desktop/tablet */
@media(min-width:769px){
  .nav-links{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }
}

/* "Get a Quote" — separate copies so it can sit in the corner on
   desktop (outside the centered menu) while still appearing inside
   the full-screen mobile menu list */
.nav-cta-mobile{ display:none; }
.nav-cta-desktop{ display:inline-flex; }
@media(max-width:768px){
  .nav-cta-desktop{ display:none !important; }
  .nav-cta-mobile{ display:inline-flex; }
}

/* ── LOGO SIZE CONTROL ───────────────────────────────────────
   Sirf yahan se logo ka size change karo:
   --logo-img-height  => Image logo ki height (default: 36px)
   --logo-font-size   => Text logo ka font size (default: 22px)
   Bara karna ho: value barhao  |  Chota karna ho: value ghato
   ──────────────────────────────────────────────────────────── */
:root {
  --logo-img-height: 36px;
  --logo-font-size:  22px;
}

.logo{
  display:flex;
  align-items:center;
  text-decoration:none;
  gap:10px;
}
.logo img{
  height:var(--logo-img-height);
  width:auto;
  object-fit:contain;
  display:block;
  transition:height 0.2s ease;
}
.logo-text{
  font-size:var(--logo-font-size);
  font-weight:900;
  letter-spacing:-1.5px;
  background:linear-gradient(110deg,#ffffff 0%,#c8ccff 40%,#333cb3 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  transition:font-size 0.2s ease;
}

.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{
  color:rgba(255,255,255,0.38);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  text-decoration:none;
  transition:color 0.2s;
}
.nav-links a:hover{color:#fff;}
.nav-cta{
  background:linear-gradient(135deg,#454fd6 0%,#333cb3 60%,#2a3294 100%)!important;
  color:#fff!important;
  padding:9px 20px!important;
  border-radius:4px;
  box-shadow:0 0 24px rgba(51,60,179,0.55),0 0 60px rgba(51,60,179,0.15),inset 0 1px 0 rgba(255,255,255,0.15);
  transition:box-shadow 0.3s ease,transform 0.25s ease;
}
.nav-cta:hover{
  box-shadow:0 0 36px rgba(51,60,179,0.75),0 0 80px rgba(51,60,179,0.25),inset 0 1px 0 rgba(255,255,255,0.2);
  transform:translateY(-1px);
  color:#fff!important;
}

/* "Get a Quote" — desktop corner button, premium clean look
   (no sweep line through the text — solid glow + subtle border) */
.nav-cta-desktop{
  font-family:'Montserrat',sans-serif;
  font-size:9.5px!important;
  font-weight:700;
  letter-spacing:2.2px;
  text-transform:uppercase;
  text-decoration:none!important;
  padding:12px 26px!important;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.18);
  background:linear-gradient(135deg,#4d57e0 0%,#333cb3 55%,#272f8c 100%)!important;
  box-shadow:0 2px 4px rgba(0,0,0,0.25),0 0 26px rgba(51,60,179,0.5),inset 0 1px 0 rgba(255,255,255,0.22)!important;
}
.nav-cta-desktop:hover{
  text-decoration:none!important;
  border-color:rgba(255,255,255,0.3);
  box-shadow:0 4px 10px rgba(0,0,0,0.3),0 0 40px rgba(51,60,179,0.7),inset 0 1px 0 rgba(255,255,255,0.28)!important;
  transform:translateY(-1px);
}
.nav-cta-desktop:active{transform:translateY(0) scale(0.98);}

/* ── HERO ────────────────────────────────────────────────── */
.hero{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  min-height:480px;
  position:relative;
  overflow:hidden;
  background:#0b0b0d;
}
.hero-bg{position:absolute;inset:0;}

/* ── Full-width Code Background Hero variant ────────────────── */
.hero.hero-full-code{
  display:block;
  min-height:600px;
}
.hero.hero-full-code .hero-left{
  position:relative;
  z-index:3;
  max-width:920px;
  width:100%;
  margin:0 auto;
  padding:110px 40px 100px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.hero-bg-code{
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0.62; /* clearly visible code, overlay below keeps text readable */
}
.hero-bg-code canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.hero-bg-code #heroCodeBack{ filter:blur(0.4px); }
.hero-bg-code #heroCodeFront{ mix-blend-mode:screen; }
.hero-bg-code .hero-code-beam{
  position:absolute;
  top:-20%;
  left:-30%;
  width:60%;
  height:140%;
  background:linear-gradient(100deg, transparent 35%, rgba(150,165,255,0.06) 50%, transparent 65%);
  transform:rotate(8deg);
  animation:heroCodeSweep 7s ease-in-out infinite;
  pointer-events:none;
}
.hero-bg-code .hero-code-scanlines{
  position:absolute; inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.025) 0px,
    rgba(255,255,255,0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:overlay;
  opacity:.5;
}
/* dark gradient on top of the code so headline/buttons read perfectly clean */
.hero-code-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 65% 75% at 50% 50%, rgba(11,11,13,0.88) 0%, rgba(11,11,13,0.6) 55%, rgba(11,11,13,0.32) 80%),
    linear-gradient(180deg, rgba(11,11,13,0.65) 0%, transparent 22%, transparent 72%, rgba(11,11,13,0.7) 100%);
}
.hero-bg::before{
  content:'';
  position:absolute;
  width:800px;height:800px;
  background:radial-gradient(circle,rgba(51,60,179,0.22) 0%,transparent 65%);
  top:-250px;right:-150px;
  filter:blur(60px);
}
.hero-bg::after{
  content:'';
  position:absolute;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(51,60,179,0.1) 0%,transparent 65%);
  bottom:-100px;left:5%;
  filter:blur(40px);
}
/* ── Ultra Pro centered typography for full-code hero ───────── */
.hero-noise{
  position:absolute;inset:0;
  opacity:0.02;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}
.hero.hero-full-code .eyebrow{
  margin-bottom:28px;
  gap:14px;
}
.hero.hero-full-code .eyebrow-line{
  width:22px;
  box-shadow:0 0 14px #333cb3;
}
.hero.hero-full-code .eyebrow-text{
  font-size:11px;
  letter-spacing:5px;
  color:rgba(255,255,255,0.55);
}
.hero.hero-full-code h1{
  width:100%;
  font-size:clamp(46px,7vw,84px);
  font-weight:900;
  line-height:0.98;
  letter-spacing:-3.5px;
  margin-bottom:22px;
  text-shadow:0 0 60px rgba(51,60,179,0.35);
}
.hero.hero-full-code h1 .accent{
  background:linear-gradient(135deg,#7d86ff 0%,#454fd6 45%,#333cb3 70%,#9aa3ff 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 24px rgba(51,60,179,0.5));
  line-height:1;
  display:inline-block;
}

/* Reserved slot for the rotating word — width is set precisely by
   JavaScript (hero-typewriter.js) based on the actual rendered
   width of the longest word, so "We Build [word]" always fits on
   one line and never wraps or shifts, at any screen size. */
/* "We Build" + the rotating word are grouped together and centered
   as ONE unit — so as the word grows/shrinks, the whole cluster
   re-centers itself (including "We Build" shifting with it),
   instead of the word floating inside a fixed empty box. */
.hero.hero-full-code h1 .head-line1{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0.28em;
  width:100%;
  min-height:1em;
  line-height:1;
}
.hero.hero-full-code h1 .accent-wrap{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}

.hero.hero-full-code h1 .thin{
  font-weight:500;
  font-style:bold;
  color:rgba(255,255,255,0.55);
}

/* Typewriter cursor — drawn as a slim glowing bar (not a text
   character), so it always looks crisp and proportional to the
   text, regardless of font rendering quirks. */
.hero.hero-full-code h1 .type-cursor{
  display:inline-block;
  width:2px;
  height:0.72em;
  margin-left:4px;
  vertical-align:-0.05em;
  border-radius:1px;
  background:#ffffff;
  box-shadow:0 0 6px rgba(255,255,255,0.7), 0 0 16px rgba(255,255,255,0.3);
  animation:typeCursorBlink 1.1s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes typeCursorBlink{
  0%, 42%{ opacity:1; }
  50%, 92%{ opacity:0.12; }
  100%{ opacity:1; }
}

.hero.hero-full-code .hero-sub{
  font-size:16px;
  line-height:1.8;
  max-width:650px;
  margin:0 0 38px;
  color:rgba(255,255,255,0.5);
  letter-spacing:0.2px;
}
.hero.hero-full-code .cta-row{
  justify-content:center;
  gap:18px;
}
.hero.hero-full-code .btn-primary,
.hero.hero-full-code .btn-ghost{
  font-size:11px;
  letter-spacing:3px;
  padding:17px 36px;
  border-radius:6px;
}
.hero.hero-full-code .stats-row{
  margin-top:56px;
  padding-top:40px;
  justify-content:center;
  gap:0;
  max-width:680px;
}
.hero.hero-full-code .stat-num{
  font-size:34px;
  letter-spacing:-2px;
}
.hero.hero-full-code .stat-num sup{
  font-size:17px;
}
.hero.hero-full-code .stat-label{
  font-size:9.5px;
  letter-spacing:2.5px;
  margin-top:7px;
}

.hero-left{
  padding:74px 40px 60px 36px;
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;}
.eyebrow-line{width:24px;height:1px;background:#333cb3;box-shadow:0 0 8px #333cb3;}
.eyebrow-text{font-size:9px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);}
.hero h1{font-size:38px;font-weight:900;line-height:1.0;letter-spacing:-2.5px;margin-bottom:10px;}
.hero h1 .accent{
  background:linear-gradient(135deg,#6b75ff 0%,#333cb3 50%,#8890ff 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero h1 .thin{font-weight:300;font-style:italic;color:rgba(255,255,255,0.5);}
.hero-sub{font-size:12px;color:rgba(255,255,255,0.38);line-height:1.85;max-width:360px;margin:18px 0 28px;font-weight:400;letter-spacing:0.1px;}
.cta-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}

.btn-primary{
  display:inline-block;
  background:linear-gradient(135deg,#454fd6 0%,#333cb3 55%,#2a3294 100%);
  color:#fff;
  padding:14px 28px;
  border-radius:4px;
  font-family:'Montserrat',sans-serif;
  font-size:9.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  border:none;cursor:pointer;text-decoration:none;
  box-shadow:0 0 30px rgba(51,60,179,0.55),0 0 80px rgba(51,60,179,0.15),inset 0 1px 0 rgba(255,255,255,0.15);
  position:relative;overflow:hidden;
  transition:box-shadow 0.35s ease,transform 0.25s ease;
}
.btn-primary::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);
  transition:left 0.5s;
}
.btn-primary:hover{
  box-shadow:0 0 42px rgba(51,60,179,0.75),0 0 100px rgba(51,60,179,0.25),inset 0 1px 0 rgba(255,255,255,0.2);
  transform:translateY(-2px);
}
.btn-primary:hover::before{left:100%;}
.btn-primary:active{transform:translateY(0) scale(0.98);}
.btn-ghost{
  display:inline-block;
  background:rgba(255,255,255,0.02);color:rgba(255,255,255,0.55);
  padding:14px 28px;border-radius:4px;
  font-family:'Montserrat',sans-serif;
  font-size:9.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.12);cursor:pointer;text-decoration:none;
  transition:border-color 0.25s,color 0.25s,background 0.25s,transform 0.25s;
}
.btn-ghost:hover{
  border-color:rgba(51,60,179,0.5);color:#fff;
  background:rgba(51,60,179,0.08);
  transform:translateY(-2px);
  box-shadow:0 0 20px rgba(51,60,179,0.2);
}
.btn-ghost:active{transform:translateY(0) scale(0.98);}

.stats-row{display:flex;gap:0;margin-top:40px;padding-top:32px;border-top:1px solid rgba(255,255,255,0.05);}
.stat{flex:1;padding-right:24px;border-right:1px solid rgba(255,255,255,0.05);}
.stat:last-child{border-right:none;padding-right:0;padding-left:24px;}
.stat:not(:first-child){padding-left:24px;}
.stat-num{font-size:26px;font-weight:900;letter-spacing:-1.5px;color:#fff;line-height:1;}
.stat-num sup{font-size:14px;color:#333cb3;}
.stat-label{font-size:8.5px;color:rgba(255,255,255,0.3);letter-spacing:2px;text-transform:uppercase;margin-top:5px;font-weight:700;}

.hero-right{position:relative;z-index:2;overflow:hidden;}
.hero-img{width:100%;height:100%;object-fit:cover;filter:brightness(0.55) saturate(1.3);}
.hero-img-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,0.6) 0%,transparent 40%),
             linear-gradient(135deg,rgba(51,60,179,0.25) 0%,transparent 60%);
}
.hero-left-border{
  position:absolute;left:0;top:0;bottom:0;width:1.5px;
  background:linear-gradient(to bottom,transparent 0%,#333cb3 40%,#333cb3 60%,transparent 100%);
  box-shadow:0 0 20px rgba(51,60,179,0.6);
}
.float-card{
  position:absolute;bottom:28px;left:24px;
  background:rgba(0,0,0,0.88);
  border:1px solid rgba(51,60,179,0.25);
  border-radius:4px;padding:14px 18px;
  backdrop-filter:blur(20px);
}
.float-card-label{font-size:8px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:4px;}
.float-card-num{
  font-size:24px;font-weight:900;letter-spacing:-1.5px;
  background:linear-gradient(135deg,#fff,#8890ff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ── SECTION COMMONS ─────────────────────────────────────── */
.section{padding:64px 36px;}
.section.alt{background:#0e0e12;}
.section-header{margin-bottom:40px;}
.pre-label{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;}
.pre-line{width:20px;height:1px;background:#333cb3;box-shadow:0 0 6px #333cb3;}
.pre-text{font-size:9px;font-weight:800;letter-spacing:3.5px;text-transform:uppercase;color:#333cb3;}
.sec-title{font-size:30px;font-weight:900;letter-spacing:-1.5px;line-height:1.05;color:#fff;}
.sec-title .dim{color:rgba(255,255,255,0.25);font-weight:300;font-style:italic;}
.sec-sub{font-size:12px;color:rgba(255,255,255,0.35);line-height:1.85;max-width:480px;margin-top:10px;font-weight:400;}

/* ── SERVICES ────────────────────────────────────────────── */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,0.04);}
.svc-card{background:#0b0b0d;padding:30px 24px;position:relative;overflow:hidden;cursor:default;}
.svc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(51,60,179,0.7),transparent);
  transform:scaleX(0);transition:transform 0.4s;
}
.svc-card:hover::before{transform:scaleX(1);}
.svc-card:hover{background:#040408;}
.svc-num{font-size:9px;font-weight:800;letter-spacing:2px;color:rgba(51,60,179,0.4);margin-bottom:18px;}
.svc-icon{font-size:22px;margin-bottom:14px;display:block;}
.svc-card h3{font-size:13px;font-weight:800;letter-spacing:-0.3px;margin-bottom:8px;color:#fff;}
.svc-card p{font-size:11px;color:rgba(255,255,255,0.38);line-height:1.7;}
.svc-arrow{font-size:9px;font-weight:700;color:#333cb3;letter-spacing:1.5px;text-transform:uppercase;margin-top:16px;display:block;opacity:0.7;}

/* ── ABOUT ───────────────────────────────────────────────── */
.about-split{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.about-img-side{position:relative;overflow:hidden;min-height:380px;}
.about-img-side img{width:100%;height:100%;object-fit:cover;filter:brightness(0.5) saturate(1.2);}
.about-img-side::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 50%,#0b0b0d 100%),
             linear-gradient(135deg,rgba(51,60,179,0.2),transparent 60%);
}
.about-right-border{
  position:absolute;right:0;top:0;bottom:0;width:1.5px;
  background:linear-gradient(to bottom,transparent,#333cb3,transparent);
  box-shadow:0 0 20px rgba(51,60,179,0.5);z-index:2;
}
.about-content{padding:56px 40px;display:flex;flex-direction:column;justify-content:center;background:#0b0b0d;}
.about-tag{
  display:inline-block;font-size:9px;font-weight:800;letter-spacing:3px;text-transform:uppercase;
  color:rgba(51,60,179,0.8);margin-bottom:20px;
  border-left:2px solid #333cb3;padding-left:12px;
}
.about-title{font-size:26px;font-weight:900;letter-spacing:-1.5px;line-height:1.05;margin-bottom:16px;}
.about-body{font-size:11.5px;color:rgba(255,255,255,0.38);line-height:1.85;margin-bottom:10px;}
.about-metrics{display:flex;gap:0;margin-top:28px;border-top:1px solid rgba(255,255,255,0.05);padding-top:28px;}
.metric{flex:1;text-align:center;}
.metric-num{
  font-size:28px;font-weight:900;letter-spacing:-1.5px;
  background:linear-gradient(135deg,#fff 0%,#fff 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.metric-label{font-size:8px;color:rgba(255,255,255,0.28);letter-spacing:2px;text-transform:uppercase;margin-top:4px;font-weight:700;}

/* ── PRICING ─────────────────────────────────────────────── */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;}
.p-card{
  background:#080808;border:1px solid rgba(255,255,255,0.06);border-radius:4px;
  padding:28px 24px;display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.p-card.featured{
  background:#05050e;border-color:rgba(51,60,179,0.45);
  box-shadow:0 0 60px rgba(51,60,179,0.22),0 0 120px rgba(51,60,179,0.08),
             -1px 0 0 rgba(51,60,179,0.3),1px 0 0 rgba(51,60,179,0.3);
  transform:scaleY(1.02);transform-origin:center;
}
.p-card.featured::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#333cb3 30%,#6b75ff 50%,#333cb3 70%,transparent);
  box-shadow:0 0 20px rgba(51,60,179,0.8);
}
.p-tier{font-size:8.5px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:rgba(51,60,179,0.7);margin-bottom:12px;}
.p-card h3{font-size:15px;font-weight:900;letter-spacing:-0.5px;margin-bottom:6px;}
.p-desc{font-size:10.5px;color:rgba(255,255,255,0.3);line-height:1.65;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,0.05);}
.p-price{display:flex;align-items:flex-end;gap:4px;margin-bottom:22px;}
.p-cur{font-size:13px;font-weight:700;color:rgba(255,255,255,0.5);margin-bottom:6px;}
.p-amount{font-size:36px;font-weight:900;letter-spacing:-2.5px;color:#fff;line-height:1;}
.p-period{font-size:10px;font-weight:500;color:rgba(255,255,255,0.25);margin-bottom:4px;}
.p-features{list-style:none;flex:1;margin-bottom:24px;display:flex;flex-direction:column;gap:8px;}
.p-features li{font-size:10.5px;color:rgba(255,255,255,0.5);display:flex;align-items:flex-start;gap:9px;line-height:1.45;}
.p-features li::before{
  content:'';width:12px;height:12px;border-radius:50%;
  background:rgba(51,60,179,0.2);border:1px solid rgba(51,60,179,0.4);
  flex-shrink:0;margin-top:1px;
}
.featured .p-features li::before{background:rgba(51,60,179,0.3);border-color:#333cb3;box-shadow:0 0 6px rgba(51,60,179,0.4);}
.p-btn{
  display:block;text-align:center;padding:13px;border-radius:4px;
  font-family:'Montserrat',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;cursor:pointer;border:none;text-decoration:none;
  transition:box-shadow 0.3s ease,transform 0.25s ease,background 0.25s ease,border-color 0.25s ease,color 0.25s ease;
}
.p-btn.solid{
  background:linear-gradient(135deg,#454fd6 0%,#333cb3 60%,#2a3294 100%);
  color:#fff;
  box-shadow:0 0 25px rgba(51,60,179,0.5),inset 0 1px 0 rgba(255,255,255,0.15);
}
.p-btn.solid:hover{
  box-shadow:0 0 38px rgba(51,60,179,0.7),inset 0 1px 0 rgba(255,255,255,0.2);
  transform:translateY(-2px);
}
.p-btn.outline{background:rgba(255,255,255,0.02);color:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.1);}
.p-btn.outline:hover{
  border-color:rgba(51,60,179,0.5);color:#fff;
  background:rgba(51,60,179,0.08);
  transform:translateY(-2px);
}

/* ── PROCESS ─────────────────────────────────────────────── */
.process-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative;}
.process-grid::before{
  content:'';position:absolute;top:28px;left:5%;right:5%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(51,60,179,0.3),rgba(51,60,179,0.5),rgba(51,60,179,0.3),transparent);
}
.proc-step{padding:0 12px;text-align:center;}
.proc-dot{
  width:14px;height:14px;border-radius:50%;background:#333cb3;
  border:2px solid rgba(51,60,179,0.3);box-shadow:0 0 15px rgba(51,60,179,0.6);
  margin:21px auto 20px;
}
.proc-num{font-size:8px;font-weight:900;letter-spacing:2px;color:rgba(51,60,179,0.5);margin-bottom:8px;text-transform:uppercase;}
.proc-step h4{font-size:11px;font-weight:800;margin-bottom:6px;letter-spacing:-0.2px;}
.proc-step p{font-size:9.5px;color:rgba(255,255,255,0.3);line-height:1.6;}

/* ── WHY ─────────────────────────────────────────────────── */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,0.04);}
.why-card{background:#0b0b0d;padding:26px 22px;display:flex;align-items:flex-start;gap:14px;}
.why-card:hover{background:#030308;}
.why-icon-box{
  width:38px;height:38px;border-radius:3px;
  background:rgba(51,60,179,0.08);border:1px solid rgba(51,60,179,0.18);
  display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;
}
.why-card h4{font-size:11.5px;font-weight:800;margin-bottom:5px;letter-spacing:-0.2px;}
.why-card p{font-size:10.5px;color:rgba(255,255,255,0.33);line-height:1.65;}

/* ── TESTIMONIALS ────────────────────────────────────────── */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.testi-card{
  background:#080808;border:1px solid rgba(255,255,255,0.05);border-radius:4px;
  padding:26px 22px;position:relative;overflow:hidden;
}
.testi-card::before{
  content:'\201C';position:absolute;top:-10px;left:14px;
  font-size:90px;line-height:1;color:rgba(51,60,179,0.06);font-family:Georgia,serif;pointer-events:none;
}
.testi-stars{color:#333cb3;font-size:10px;letter-spacing:3px;margin-bottom:12px;}
.testi-card>p{font-size:11px;color:rgba(255,255,255,0.42);line-height:1.8;font-style:italic;position:relative;z-index:1;}
.testi-author{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.04);}
.author-av{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#333cb3,#6b75ff);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;flex-shrink:0;box-shadow:0 0 12px rgba(51,60,179,0.4);
}
.author-av-info h5{font-size:11.5px;font-weight:700;}
.author-av-info span{font-size:9.5px;color:rgba(255,255,255,0.3);}

/* ── CTA ─────────────────────────────────────────────────── */
.cta-section{
  margin:0 36px 56px;border-radius:5px;background:#020209;
  border:1px solid rgba(51,60,179,0.2);padding:56px 40px;
  text-align:center;position:relative;overflow:hidden;
  box-shadow:-80px 0 140px rgba(51,60,179,0.14),80px 0 140px rgba(51,60,179,0.14),
             0 0 60px rgba(51,60,179,0.06);
}
.cta-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 45% 100% at 0% 50%,rgba(51,60,179,0.1),transparent 60%),
             radial-gradient(ellipse 45% 100% at 100% 50%,rgba(51,60,179,0.1),transparent 60%);
}
.cta-vl{position:absolute;top:15%;bottom:15%;left:0;width:1.5px;background:linear-gradient(to bottom,transparent,#333cb3,transparent);box-shadow:0 0 18px rgba(51,60,179,0.6);}
.cta-vr{position:absolute;top:15%;bottom:15%;right:0;width:1.5px;background:linear-gradient(to bottom,transparent,#333cb3,transparent);box-shadow:0 0 18px rgba(51,60,179,0.6);}
.cta-section>*{position:relative;z-index:1;}
.cta-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;}
.cta-line{width:20px;height:1px;background:#333cb3;box-shadow:0 0 6px #333cb3;}
.cta-label{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.3);}
.cta-title{font-size:28px;font-weight:900;letter-spacing:-1.5px;line-height:1.1;margin-bottom:12px;}
.cta-title .hi{
  background:linear-gradient(135deg,#6b75ff,#333cb3);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.cta-sub{font-size:12px;color:rgba(255,255,255,0.33);margin-bottom:28px;max-width:420px;margin-left:auto;margin-right:auto;line-height:1.75;}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ── FOOTER ──────────────────────────────────────────────── */
.footer{background:#0b0b0d;border-top:1px solid rgba(255,255,255,0.04);padding:40px 36px 24px;position:relative;}
.footer::before{
  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(51,60,179,0.35),transparent);
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:36px;margin-bottom:32px;}
.footer-logo{
  font-size:20px;font-weight:900;letter-spacing:-1.2px;
  background:linear-gradient(110deg,#fff,#8890ff,#333cb3);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:12px;
  display:inline-block;
}
.footer-logo img{
  height:24px;width:auto;object-fit:contain;display:block;
}
.footer-desc{font-size:11px;color:rgba(255,255,255,0.28);line-height:1.8;max-width:240px;}
.footer-col h5{font-size:8.5px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.22);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.05);}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:10px;}
.footer-links a{
  font-size:11px;color:rgba(255,255,255,0.38);text-decoration:none;font-weight:500;
  display:flex;align-items:center;gap:9px;transition:color 0.2s,gap 0.2s;
}
.footer-links a::before{
  content:'';width:4px;height:4px;border-radius:50%;
  background:#333cb3;box-shadow:0 0 6px rgba(51,60,179,0.7);
  flex-shrink:0;transition:box-shadow 0.2s;
}
.footer-links a:hover{color:#fff;gap:12px;}
.footer-links a:hover::before{box-shadow:0 0 10px rgba(51,60,179,1);}
.footer-contact-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:13px;}
.footer-contact-icon{font-size:13px;margin-top:1px;flex-shrink:0;opacity:0.7;}
.footer-contact-text{font-size:11px;color:rgba(255,255,255,0.38);line-height:1.6;font-weight:500;}
.footer-contact-text a{color:rgba(255,255,255,0.38);text-decoration:none;}
.footer-contact-text a:hover{color:#8890ff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.04);padding-top:18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.footer-copy{font-size:10px;color:rgba(255,255,255,0.2);letter-spacing:0.5px;}
.socials{display:flex;gap:8px;}
.social-btn{
  width:32px;height:32px;border-radius:3px;
  border:1px solid rgba(255,255,255,0.07);background:rgba(255,255,255,0.02);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;color:rgba(255,255,255,0.3);cursor:pointer;
  transition:border-color 0.2s,color 0.2s;
}
.social-btn:hover{border-color:rgba(51,60,179,0.5);color:#fff;}

/* ── WORDPRESS ADMIN BAR FIX ─────────────────────────────── */
.admin-bar .nav{top:32px;}
@media screen and (max-width:782px){
  .admin-bar .nav{top:46px;}
  .admin-bar .nav-spacer{height:116px;}
}

/* ==========================================================
   MOBILE & TABLET RESPONSIVE — DEEALVI ULTRA LUX
   ========================================================== */

/* ── HAMBURGER BUTTON ───────────────────────────────────── */
/* Hamburger — ONLY mobile, completely hidden on desktop */
.hamburger{
  display:none !important;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px;height:40px;
  background:none;border:none;cursor:pointer;
  padding:4px;z-index:10001;
}
@media(max-width:768px){
  .hamburger{ display:flex !important; }
}
.hamburger span{
  display:block;width:24px;height:2px;
  background:#fff;border-radius:2px;
  transition:all 0.3s ease;
  transform-origin:center;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ── TABLET — 1024px ────────────────────────────────────── */
@media(max-width:1024px){

  .nav{padding:14px 24px;}
  .nav-links{gap:18px;}
  .nav-links a{font-size:8.5px;letter-spacing:1.8px;}

  .hero{grid-template-columns:1fr 1fr;}
  .hero-left{padding:52px 24px 40px 24px;}
  .hero h1{font-size:30px;letter-spacing:-1.5px;}
  .stat{padding-right:14px !important;}
  .stat:not(:first-child){padding-left:14px !important;}
  .stat-num{font-size:21px;}
  .stat-label{font-size:7.5px;letter-spacing:1.5px;}

  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .pricing-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .p-card.featured{transform:none;}
  .pricing-grid .p-card:last-child{grid-column:1/-1;max-width:420px;margin:0 auto;width:100%;}

  .process-grid{grid-template-columns:repeat(3,1fr);gap:0;}
  .process-grid::before{display:none;}

  .why-grid{grid-template-columns:repeat(2,1fr);}
  .testi-grid{grid-template-columns:repeat(2,1fr);}
  .testi-grid .testi-card:last-child{grid-column:1/-1;}

  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .cta-section{margin:0 24px 40px;padding:40px 28px;}
}

/* ── MOBILE — 768px ─────────────────────────────────────── */
@media(max-width:768px){

  .hero.hero-full-code{ min-height:620px; }
  .hero.hero-full-code .hero-left{ max-width:100%; padding:100px 20px 72px !important; }
  .hero-bg-code{ opacity:0.5; }

  /* Nav mobile */
  .nav{padding:14px 20px;}
  .hamburger{display:flex;}

  .nav-links{
    display:none;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:
      linear-gradient(180deg, rgba(11,11,13,0.90), rgba(11,11,13,0.95)),
      url("https://deealvi.site/wp-content/uploads/2026/07/18706-1.jpg") center/cover no-repeat;
      /* ↑ PLACEHOLDER IMAGE — apni image se replace karne ke liye:
         yahan url("...") ke andar apni image ka link/path daal do.
         Local theme image use karni ho to:
         url("<?php echo get_template_directory_uri(); ?>/assets/img/menu-bg.jpg") */
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:32px;
    z-index:10000;
    padding:80px 40px 40px;
  }
  .nav-links.open{display:flex;}
  .nav-links a{
    font-size:14px;
    letter-spacing:3px;
    color:#fff;
    text-align:center;
  }
  .nav-links a:hover{color:#8890ff;}
  .nav-cta{
    margin-top:8px;
    padding:14px 36px !important;
    font-size:11px !important;
  }
  .nav-spacer{height:64px;}

  /* Hero mobile */
  .hero{
    grid-template-columns:1fr;
    padding-top:0;
    min-height:auto;
  }
  .hero-right{
    height:260px;
    order:1;
  }
  .hero-left{
    order:2;
    padding:48px 20px 40px;
  }
  .hero h1{font-size:28px;letter-spacing:-1.2px;line-height:1.05;}
  .hero-sub{font-size:12px;max-width:100%;}
  .cta-row{flex-direction:column;align-items:flex-start;gap:10px;}
  .btn-primary,.btn-ghost{width:100%;text-align:center;padding:14px 20px;}

  /* Blue left border — hide on mobile only */
  .hero-left-border{display:none !important;}

  /* Stats — single horizontal row, all 4 in one line, centered */
  .stats-row{
    display:flex;
    flex-direction:row;
    gap:0;
    padding-top:22px;
    margin-top:24px;
    overflow:visible;
    border-top:1px solid rgba(255,255,255,0.05);
    width:100%;
    max-width:380px;
    margin-left:auto;
    margin-right:auto;
    justify-content:center;
    align-self:center;
  }
  .stat{
    flex:1;
    min-width:0;
    padding:0 8px !important;
    border-right:1px solid rgba(255,255,255,0.05);
    text-align:center;
  }
  .stat:last-child{border-right:none;}
  .stat:nth-child(2n){border-right:1px solid rgba(255,255,255,0.05);}
  .stat:nth-child(2n):last-child{border-right:none;}
  .stat:nth-child(n+3){padding-top:0 !important;border-top:none;}
  .stat-num{font-size:15px;letter-spacing:-0.8px;}
  .stat-num sup{font-size:9px;}
  .stat-label{font-size:6.5px;letter-spacing:1px;margin-top:3px;}
  .float-card{display:none;}

  /* Spacer between header and hero */
  div[style*="height:40px"]{height:0px !important;}

  /* Sections */
  .section{padding:48px 20px;}
  .sec-title{font-size:24px;letter-spacing:-1px;}
  .cta-title{font-size:22px;letter-spacing:-1px;}

  /* Services */
  .svc-grid{grid-template-columns:1fr;gap:1px;}

  /* About */
  .about-split{grid-template-columns:1fr;}
  .about-img-side{min-height:220px;order:1;}
  .about-img-side::after{background:linear-gradient(to bottom,transparent 60%,#0b0b0d 100%);}
  .about-right-border{display:none;}
  .about-content{order:2;padding:32px 20px;}
  .about-title{font-size:22px;}
  .about-metrics{gap:0;}
  .metric-num{font-size:22px;}

  /* Pricing */
  .pricing-grid{grid-template-columns:1fr;}
  .p-card.featured{transform:none;}
  .pricing-grid .p-card:last-child{grid-column:auto;max-width:100%;}
  .p-amount{font-size:30px;}

  /* Process */
  .process-grid{grid-template-columns:repeat(2,1fr);gap:0;}
  .process-grid::before{display:none;}
  .proc-step{padding:16px 12px;text-align:left;display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;}
  .proc-dot{margin:4px 0 0;flex-shrink:0;}

  /* Why */
  .why-grid{grid-template-columns:1fr;}

  /* Testimonials */
  .testi-grid{grid-template-columns:1fr;}
  .testi-grid .testi-card:last-child{grid-column:auto;}

  /* CTA */
  .cta-section{margin:0 16px 40px;padding:36px 20px;}
  .cta-btns{flex-direction:column;align-items:center;}
  .cta-btns .btn-primary,.cta-btns .btn-ghost{width:100%;max-width:280px;text-align:center;}

  /* Footer */
  .footer{padding:36px 20px 20px;}
  .footer-grid{grid-template-columns:1fr;gap:28px;}
  .footer-desc{max-width:100%;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px;}
  .footer-logo img{height:20px;}
}

/* ── SMALL MOBILE — 400px ───────────────────────────────── */
@media(max-width:400px){
  .hero h1{font-size:24px;}
  .sec-title{font-size:20px;}
  .cta-title{font-size:19px;}
  .about-title{font-size:19px;}
  .stat-num{font-size:13px;}
  .stat-label{font-size:6px;letter-spacing:0.8px;}
  .process-grid{grid-template-columns:1fr;}
}

/* ==========================================================
   BUG FIXES
   ========================================================== */

/* ── Dot fix — WordPress admin bar stray element ─────────── */
.nav > *:not(.logo):not(.hamburger):not(.nav-links):not(.nav-cta-desktop){display:none !important;}
#wp-admin-bar-root-default li a::before,
#wp-admin-bar-root-default li a::after{display:none !important;}
.nav br{display:none !important;}

/* ── Mobile hero overflow fix ────────────────────────────── */
html, body{overflow-x:hidden !important; max-width:100vw;}
.root{overflow-x:hidden; max-width:100vw;}
.hero{overflow:hidden; max-width:100%;}
.hero-right{overflow:hidden; max-width:100%;}
.hero-bg{overflow:hidden;}

@media(max-width:768px){
  .hero{
    display:grid;
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100vw !important;
    overflow:hidden !important;
  }
  .hero-right{
    width:100% !important;
    max-width:100vw !important;
    overflow:hidden !important;
  }
  .hero-left{
    width:100% !important;
    max-width:100vw !important;
    padding:36px 20px 40px !important;
  }
  .hero-bg::before, .hero-bg::after{
    display:none;
  }
  * {
    max-width:100vw;
  }
}

/* ── Nav dot/bullet complete fix ─────────────────────────── */
.nav::before{ content:none !important; }
.nav > text,
.nav > #text { display:none !important; }
/* WordPress injects a separator bullet in some setups */
.nav-links > li { list-style:none; }
.nav > span:empty,
.nav > div:empty { display:none !important; }

/* ==========================================================
   DEEALVI ULTRA PRO — CREATIVE UPGRADE LAYER
   Additive only — does not touch any rule above.
   ========================================================== */

/* ── SCROLL REVEAL (signature motion) ───────────────────── */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ── TRUST MARQUEE STRIP (signature element) ─────────────── */
.trust-strip{
  background:#0b0b0d;
  border-top:1px solid rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(255,255,255,0.04);
  padding:18px 0;
  overflow:hidden;
  position:relative;
}
.trust-strip::before,
.trust-strip::after{
  content:'';
  position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
}
.trust-strip::before{left:0;background:linear-gradient(90deg,#0b0b0d,transparent);}
.trust-strip::after{right:0;background:linear-gradient(270deg,#0b0b0d,transparent);}
.trust-track{
  display:flex;
  gap:56px;
  width:max-content;
  animation:trustScroll 28s linear infinite;
}
.trust-track span{
  font-size:11px;
  font-weight:800;
  letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.22);
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:10px;
}
.trust-track span::before{
  content:'';
  width:5px;height:5px;border-radius:50%;
  background:#333cb3;
  box-shadow:0 0 8px rgba(51,60,179,0.7);
}
@keyframes trustScroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* ── SECTION KICKER BADGE (signature numbering for ordered content) ── */
.kicker-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px 6px 8px;
  border:1px solid rgba(51,60,179,0.25);
  border-radius:30px;
  background:rgba(51,60,179,0.06);
  margin-bottom:18px;
}
.kicker-pill .dot{
  width:6px;height:6px;border-radius:50%;
  background:#333cb3;box-shadow:0 0 10px rgba(51,60,179,0.8);
  animation:kickerPulse 2s ease-in-out infinite;
}
@keyframes kickerPulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.kicker-pill span{font-size:9px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.55);}

/* ── PROJECTS / PORTFOLIO SHOWCASE ───────────────────────── */
.projects-section{padding:64px 36px;background:#0b0b0d;position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,0.04);}
.projects-section .glow-a{
  position:absolute;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(51,60,179,0.1) 0%,transparent 65%);
  top:-150px;left:-100px;filter:blur(60px);pointer-events:none;
}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative;z-index:1;}
.proj-card{
  position:relative;border-radius:6px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.06);
  background:#0a0a0a;
  min-height:300px;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:border-color 0.35s, transform 0.35s;
}
.proj-card:hover{border-color:rgba(51,60,179,0.4);transform:translateY(-4px);}
.proj-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(0.42) saturate(1.15);
  transition:transform 0.6s ease, filter 0.4s ease;
}
.proj-card:hover img{transform:scale(1.06);filter:brightness(0.32) saturate(1.25);}
.proj-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,0.92) 100%);
  z-index:1;
}
.proj-tag{
  position:relative;z-index:2;margin:0 22px 6px;
  display:inline-flex;align-self:flex-start;
  font-size:8px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:#8890ff;background:rgba(51,60,179,0.15);
  border:1px solid rgba(51,60,179,0.3);
  padding:4px 10px;border-radius:20px;
}
.proj-card h4{position:relative;z-index:2;margin:0 22px 4px;font-size:15px;font-weight:800;letter-spacing:-0.3px;color:#fff;}
.proj-card p{position:relative;z-index:2;margin:0 22px 22px;font-size:10.5px;color:rgba(255,255,255,0.45);line-height:1.6;}

/* ── SIGNATURE CORNER ACCENTS (used on featured cards/sections) ── */
.corner-accent{position:relative;}
.corner-accent::before,
.corner-accent::after{
  content:'';position:absolute;width:14px;height:14px;
  border:1.5px solid rgba(51,60,179,0.5);pointer-events:none;
}
.corner-accent::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.corner-accent::after{bottom:-1px;right:-1px;border-left:none;border-top:none;}

/* ── CSS COUNTER WORK NUMBERS (process steps get true sequence numbers) ── */
.process-grid{counter-reset:proc;}
.proc-step{counter-increment:proc;}

/* ── ENHANCED BUTTON MICRO-INTERACTION ───────────────────── */
.btn-primary,.btn-ghost{position:relative;}
.btn-primary:active,.btn-ghost:active{transform:scale(0.97);}

/* ── PRICING — subtle floating glow on featured tier ─────── */
@keyframes featGlow{
  0%,100%{box-shadow:0 0 60px rgba(51,60,179,0.22),0 0 120px rgba(51,60,179,0.08),-1px 0 0 rgba(51,60,179,0.3),1px 0 0 rgba(51,60,179,0.3);}
  50%{box-shadow:0 0 76px rgba(51,60,179,0.32),0 0 140px rgba(51,60,179,0.12),-1px 0 0 rgba(51,60,179,0.4),1px 0 0 rgba(51,60,179,0.4);}
}
.p-card.featured{animation:featGlow 4.5s ease-in-out infinite;}

/* ── TESTIMONIAL HOVER LIFT ──────────────────────────────── */
.testi-card{transition:transform 0.3s ease, border-color 0.3s ease;}
.testi-card:hover{transform:translateY(-4px);border-color:rgba(51,60,179,0.25);}

/* ── SERVICE CARD ICON GLOW ON HOVER ─────────────────────── */
.svc-card{transition:background 0.35s;}
.svc-icon{transition:filter 0.3s, transform 0.3s;}
.svc-card:hover .svc-icon{filter:drop-shadow(0 0 8px rgba(51,60,179,0.6));transform:translateY(-2px);}

/* ── WHY CARD ICON LIFT ──────────────────────────────────── */
.why-icon-box{transition:background 0.3s, box-shadow 0.3s, transform 0.3s;}
.why-card:hover .why-icon-box{background:rgba(51,60,179,0.16);box-shadow:0 0 16px rgba(51,60,179,0.3);transform:translateY(-2px);}

/* ── FOOTER SOCIAL ICON ANIMATION (upgrade existing .social-btn) ── */
.social-btn{transition:all 0.25s ease;cursor:pointer;text-decoration:none;}
.social-btn:hover{transform:translateY(-2px);box-shadow:0 0 12px rgba(51,60,179,0.4);background:rgba(51,60,179,0.1);}

/* ── AVAILABILITY BADGE (footer, signature trust element) ── */
.avail-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;margin-top:14px;
  background:rgba(51,60,179,0.07);
  border:1px solid rgba(51,60,179,0.18);
  border-radius:4px;
}
.avail-dot{
  width:7px;height:7px;border-radius:50%;
  background:#333cb3;box-shadow:0 0 8px rgba(51,60,179,0.7);
  animation:kickerPulse 2s ease-in-out infinite;
}
.avail-badge span{font-size:8.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.4);}

/* ── HERO SCROLL CUE (signature micro-detail) ────────────── */
.scroll-cue{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  z-index:3;opacity:0.5;
}
.scroll-cue span{font-size:7px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.4);}
.scroll-cue-line{width:1px;height:24px;background:linear-gradient(to bottom,#333cb3,transparent);animation:cueMove 1.8s ease-in-out infinite;}
@keyframes cueMove{0%{opacity:0;transform:translateY(-6px);}50%{opacity:1;}100%{opacity:0;transform:translateY(10px);}}
@media(max-width:768px){.scroll-cue{display:none;}}

/* ── RESPONSIVE: PROJECTS GRID ───────────────────────────── */
@media(max-width:1024px){
  .proj-grid{grid-template-columns:repeat(2,1fr);}
  .projects-section{padding:48px 24px;}
}
@media(max-width:768px){
  .proj-grid{grid-template-columns:1fr;}
  .projects-section{padding:40px 20px;}
  .trust-track{gap:36px;}
  .trust-track span{font-size:9.5px;}
}