/* ============================================================
   OMNIVALL — Design System v2  (light · white + blue)
   Web development + digital marketing · Gujarat
   ============================================================ */

:root{
  /* surfaces */
  --bg:        #FBFCFE;   /* page */
  --bg-2:      #F3F6FC;   /* raised / alt sections */
  --bg-3:      #EDF1FB;   /* tint blocks */
  --card:      #FFFFFF;
  --ink:       #0B1220;   /* headings / near-black */
  --ink-2:     #384155;   /* body text */
  --dim:       #6b7590;   /* muted */
  --line:      #E5EAF4;
  --line-2:    #d6def0;

  /* brand — white + blue */
  --blue:      #1C45F5;   /* primary */
  --blue-600:  #123bd6;
  --blue-400:  #4f74ff;
  --blue-100:  #E7ECFF;   /* soft tint */
  --blue-050:  #F2F5FF;
  --ink-blue:  #0A1E6B;   /* deep navy for dark blocks */

  --grad:      linear-gradient(120deg,#1C45F5,#4f74ff);
  --grad-soft: linear-gradient(180deg,#F2F5FF,#FBFCFE);

  --maxw:      1200px;
  --rad:       20px;
  --rad-sm:    14px;
  --rad-lg:    28px;
  --pill:      100px;

  --shadow-sm: 0 1px 2px rgba(11,18,32,.06), 0 4px 14px -8px rgba(11,18,32,.10);
  --shadow:    0 10px 30px -12px rgba(11,18,32,.18);
  --shadow-lg: 0 30px 70px -30px rgba(28,69,245,.35);

  --gap:       clamp(16px, 2.4vw, 26px);
  --sec-y:     clamp(64px, 8vw, 128px);

  --ff-head:   "Poppins", ui-sans-serif, system-ui, sans-serif;
  --ff-body:   "Poppins", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:88px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--ff-body);
  background:var(--bg);
  color:var(--ink-2);
  line-height:1.65;
  font-size:clamp(15px,1.05vw,17px);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--ff-head); color:var(--ink); font-weight:700; line-height:1.06; letter-spacing:-.02em; margin:0; }
p{ margin:0; }
::selection{ background:var(--blue); color:#fff; }

/* dot-grid backdrop like Leadora */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 50% at 80% -5%, rgba(28,69,245,.08), transparent 60%),
    radial-gradient(50% 40% at 0% 10%, rgba(79,116,255,.07), transparent 60%);
}

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(18px,5vw,32px); }
.section{ padding-block:var(--sec-y); position:relative; }
.section.alt{ background:var(--bg-2); }
.center{ text-align:center; }
.mt-lg{ margin-top:clamp(2.4rem,5vw,4rem); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--ff-head); font-weight:600; font-size:.82rem;
  letter-spacing:.02em; color:var(--blue);
  padding:.4rem .85rem; border:1px solid var(--blue-100); border-radius:var(--pill);
  background:var(--blue-050);
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--blue); }

.h-title{ font-size:clamp(2rem,4.8vw,3.4rem); margin:.7rem 0 .9rem; color:var(--ink); }
.display{ font-size:clamp(2.6rem,6.5vw,5rem); line-height:1.02; letter-spacing:-.03em; }
.lede{ color:var(--dim); font-size:clamp(1.02rem,1.4vw,1.2rem); max-width:62ch; }
.center .lede{ margin-inline:auto; }

/* highlighted phrase block (Leadora-style) */
.hl{ display:inline-block; background:var(--blue); color:#fff; padding:.02em .3em; border-radius:12px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.hl-out{ color:var(--blue); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--ff-head); font-weight:600; font-size:.98rem;
  padding:.85rem 1.5rem; border-radius:var(--pill); border:1px solid transparent;
  cursor:pointer; transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, background .22s, color .22s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 10px 24px -10px rgba(28,69,245,.7); }
.btn-primary:hover{ background:var(--blue-600); box-shadow:0 16px 34px -12px rgba(28,69,245,.8); }
.btn-ghost{ background:#fff; border-color:var(--line-2); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn-lg{ padding:1rem 1.8rem; font-size:1.05rem; }

/* ---------- nav ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; padding-top:14px; transition:padding .3s; }
.nav-in{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem .7rem .7rem 1.1rem; border-radius:var(--pill);
  background:rgba(255,255,255,.8); backdrop-filter:saturate(150%) blur(14px);
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:box-shadow .3s;
}
.nav.scrolled .nav-in{ box-shadow:var(--shadow); }
.brand{ display:flex; align-items:center; gap:.55rem; font-family:var(--ff-head); font-weight:700; font-size:1.2rem; color:var(--ink); }
.brand img{ width:48px; height:48px; border-radius:0; object-fit:contain; margin:-6px 0; }
.footer .brand img{ width:44px; height:44px; }
.nav-links{ display:flex; align-items:center; gap:.4rem; }
.nav-links a{ color:var(--ink-2); font-size:.95rem; font-weight:500; padding:.5rem .9rem; border-radius:var(--pill); transition:background .2s,color .2s; }
.nav-links a:hover,.nav-links a.active{ background:var(--blue-050); color:var(--blue); }
.nav-cta{ display:flex; align-items:center; gap:.5rem; }
.burger{ display:none; background:none; border:0; color:var(--ink); cursor:pointer; padding:.4rem; }

/* ---------- hero ---------- */
.hero{ position:relative; padding-top:clamp(120px,15vw,170px); padding-bottom:clamp(48px,7vw,90px); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero h1{ font-size:clamp(2.6rem,6vw,4.6rem); }
.hero .lede{ margin-top:1.4rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.hero-trust{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; margin-top:2.2rem; color:var(--dim); font-size:.9rem; }
.hero-trust .stars{ color:#f5a623; letter-spacing:.06em; }
#hero3d{ width:100%; aspect-ratio:1/1; max-width:520px; margin-inline:auto; overflow:hidden; }
#hero3d canvas{ width:100% !important; height:100% !important; }
.hero-visual{ position:relative; }
.hero-badge{ position:absolute; background:#fff; border:1px solid var(--line); border-radius:var(--rad-sm); box-shadow:var(--shadow); padding:.7rem 1rem; display:flex; align-items:center; gap:.6rem; font-size:.85rem; font-weight:600; color:var(--ink); }
.hero-badge b{ font-family:var(--ff-head); }
.hero-badge .ic{ width:34px; height:34px; border-radius:9px; background:var(--blue-050); color:var(--blue); display:grid; place-items:center; }

/* ---------- stat strip ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.stat{ text-align:center; padding:1.4rem 1rem; }
.stat b{ display:block; font-family:var(--ff-head); font-size:clamp(1.8rem,4vw,2.8rem); color:var(--blue); letter-spacing:-.02em; }
.stat span{ color:var(--dim); font-size:.9rem; }

/* ---------- section head ---------- */
.sec-head{ max-width:720px; }
.center.sec-head{ margin-inline:auto; }

/* ---------- cards / services ---------- */
.grid{ display:grid; gap:var(--gap); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }

.card{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--rad); padding:1.7rem; transition:transform .3s, box-shadow .3s, border-color .3s;
  box-shadow:var(--shadow-sm);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--blue-100); }
.card .ico{ width:54px; height:54px; display:grid; place-items:center; border-radius:15px; background:var(--blue-050); color:var(--blue); margin-bottom:1.1rem; }
.card h3{ font-size:1.22rem; margin-bottom:.5rem; }
.card p{ color:var(--dim); font-size:.96rem; }
.card .more{ display:inline-flex; align-items:center; gap:.35rem; margin-top:1.1rem; font-family:var(--ff-head); font-weight:600; font-size:.9rem; color:var(--blue); }
.card:hover .more{ gap:.6rem; }

/* feature card with dark navy */
.card-dark{ background:var(--ink-blue); color:#fff; border:0; }
.card-dark h3{ color:#fff; } .card-dark p{ color:#c7d2ff; }
.card-dark .ico{ background:rgba(255,255,255,.12); color:#fff; }

/* ---------- work / portfolio ---------- */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.work{ display:block; border-radius:var(--rad); overflow:hidden; border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow-sm); transition:transform .35s, box-shadow .35s; }
.work:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.work .shot{ aspect-ratio:16/10; overflow:hidden; position:relative; background:var(--bg-3); }
.work .shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .6s ease; }
.work:hover .shot img{ transform:scale(1.05); }
.work .shot.shot-fallback{ display:grid; place-items:center; background:linear-gradient(135deg,#1C45F5,#4f74ff); }
.work .shot.shot-fallback span{ color:#fff; font-family:var(--ff-head); font-weight:700; font-size:1.4rem; letter-spacing:-.02em; padding:1rem; text-align:center; }
.work .meta{ padding:1rem 1.2rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.work .meta b{ font-family:var(--ff-head); font-size:1.02rem; color:var(--ink); }
.work .meta .cat{ color:var(--blue); font-size:.78rem; font-weight:600; background:var(--blue-050); padding:.25rem .6rem; border-radius:var(--pill); white-space:nowrap; }

/* ---------- reviews ---------- */
.rev-head{ display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; align-items:center; justify-content:center; }
.rev-score{ display:flex; align-items:center; gap:1rem; }
.rev-score .big{ font-family:var(--ff-head); font-size:3.2rem; color:var(--ink); line-height:1; }
.rev-stars{ color:#f5a623; font-size:1.2rem; letter-spacing:.08em; }
.rev-track{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:var(--gap); }
.rev{ background:var(--card); border:1px solid var(--line); border-radius:var(--rad); padding:1.5rem; box-shadow:var(--shadow-sm); }
.rev-top{ display:flex; align-items:center; gap:.75rem; margin-bottom:.7rem; }
.rev-av{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-family:var(--ff-head); }
.rev-top b{ display:block; color:var(--ink); font-size:.96rem; }
.rev-top em{ font-style:normal; color:var(--dim); font-size:.78rem; }
.rev .st{ color:#f5a623; letter-spacing:.06em; margin-bottom:.5rem; }
.rev p{ color:var(--ink-2); font-size:.95rem; }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--ink-blue); border-radius:var(--rad-lg); padding:clamp(2.4rem,6vw,4.5rem); text-align:center; color:#fff; position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 50% -20%, rgba(79,116,255,.55), transparent 60%); }
.cta-band > *{ position:relative; }
.cta-band h2{ color:#fff; font-size:clamp(1.8rem,4vw,3rem); }
.cta-band p{ color:#c7d2ff; margin:1rem auto 0; max-width:52ch; }
.cta-band .btn-primary{ background:#fff; color:var(--blue); }
.cta-band .btn-primary:hover{ background:#eef2ff; }

/* ---------- contact ---------- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); }
.info .row{ display:flex; gap:.9rem; align-items:flex-start; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.info .row .ic{ width:44px; height:44px; flex:none; border-radius:12px; background:var(--blue-050); color:var(--blue); display:grid; place-items:center; }
.info .row b{ display:block; font-family:var(--ff-head); color:var(--ink); }
.info .row a,.info .row span{ color:var(--dim); }
.form{ display:grid; gap:1rem; background:var(--card); border:1px solid var(--line); border-radius:var(--rad); padding:1.8rem; box-shadow:var(--shadow-sm); }
.field{ display:grid; gap:.35rem; }
.field label{ font-size:.85rem; color:var(--ink-2); font-family:var(--ff-head); font-weight:600; }
.field input,.field textarea,.field select{ width:100%; padding:.85rem 1rem; border-radius:var(--rad-sm); background:var(--bg); border:1px solid var(--line-2); color:var(--ink); font-family:var(--ff-body); font-size:.98rem; transition:border-color .2s, box-shadow .2s; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-100); }
.form .btn{ width:100%; }
.form-msg{ font-size:.9rem; text-align:center; min-height:1.2em; }

/* ---------- service blocks ---------- */
.svc{ scroll-margin-top:100px; }
.svc-head{ display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.svc-head .ico{ margin:0; flex:none; }
.svc-head h3{ font-size:clamp(1.3rem,2.4vw,1.7rem); margin:0; }
.svc-head .tag{ color:var(--blue); font-weight:600; font-size:.95rem; }
.feat{ list-style:none; padding:0; margin:1.3rem 0; display:grid; grid-template-columns:1fr 1fr; gap:.55rem 1.5rem; }
.feat li{ display:flex; gap:.55rem; align-items:flex-start; color:var(--ink-2); font-size:.94rem; }
.feat li svg{ color:var(--blue); flex:none; width:18px; height:18px; margin-top:.2rem; }
@media (max-width:560px){ .feat{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; }
.faq details{ background:var(--card); border:1px solid var(--line); border-radius:var(--rad-sm); padding:1.1rem 1.3rem; margin-bottom:.8rem; box-shadow:var(--shadow-sm); }
.faq summary{ font-family:var(--ff-head); font-weight:600; color:var(--ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--blue); font-size:1.4rem; line-height:1; transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ color:var(--dim); margin-top:.8rem; }

/* ---------- footer ---------- */
.footer{ background:#fff; border-top:1px solid var(--line); padding-block:clamp(48px,7vw,72px) 2rem; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem; }
.foot-grid p{ color:var(--dim); margin-top:1rem; max-width:34ch; font-size:.92rem; }
.foot-grid h4{ font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color:var(--dim); margin-bottom:.9rem; }
.foot-grid a{ display:block; color:var(--ink-2); padding:.28rem 0; font-size:.93rem; transition:color .2s; }
.foot-grid a:hover{ color:var(--blue); }
.foot-bottom{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; margin-top:2.6rem; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--dim); font-size:.85rem; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s } .reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s } .reveal[data-d="4"]{ transition-delay:.32s }

#progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:60; background:var(--grad); }

.wa-float{ position:fixed; right:20px; bottom:20px; z-index:45; width:58px; height:58px; border-radius:16px; display:grid; place-items:center; box-shadow:0 12px 30px -8px rgba(37,211,102,.6); transition:transform .25s; overflow:hidden; }
.wa-float img{ width:100%; height:100%; object-fit:cover; display:block; }
.wa-float:hover{ transform:scale(1.08); }

/* ---------- responsive ---------- */
@media (max-width: 960px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:420px; margin-inline:auto; }
  .g-3,.g-4{ grid-template-columns:repeat(2,1fr); }
  .work-grid{ grid-template-columns:repeat(2,1fr); }
  .contact{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
  .menu-only{ display:none; }
  .nav-links a.btn-primary{ color:#fff; }
  .nav-links a.btn-ghost{ color:var(--ink); }
  .nav-links a.btn:hover{ background:var(--blue-600); }
  .nav-links a.btn-ghost:hover{ background:#fff; color:var(--blue); }
@media (max-width: 620px){
  .nav-links{ display:none; }
  .nav-links.open{ display:flex; position:absolute; top:72px; left:14px; right:14px; flex-direction:column; align-items:stretch; gap:.4rem; padding:1rem; background:#fff; border:1px solid var(--line); border-radius:var(--rad); box-shadow:var(--shadow); }
  .nav-links.open a{ padding:.7rem .9rem; }
  .nav-links.open .menu-only{ display:flex; margin-top:.3rem; }
  .burger{ display:block; }
  .nav .nav-cta .btn{ display:none; }
  .g-2,.g-3,.g-4,.work-grid,.foot-grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
}
/* ---------- Lucide icons ---------- */
.card .ico [data-lucide], .card .ico svg{ width:26px; height:26px; }
.ico svg{ stroke-width:2; }
.card:hover .ico{ transform:translateY(-2px) rotate(-4deg); transition:transform .3s; }
.info .row .ic svg{ width:20px; height:20px; }

/* ---------- extra animations (Leadora-style) ---------- */
/* floating hero badges */
.hero-badge{ animation:floaty 5s ease-in-out infinite; }
.hero-badge:nth-of-type(2){ animation-delay:-2.5s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }

/* animated blobs behind hero */
.hero::before,.hero::after{ content:""; position:absolute; border-radius:50%; filter:blur(60px); z-index:-1; opacity:.5; }
.hero::before{ width:420px; height:420px; background:radial-gradient(circle,#4f74ff,transparent 70%); top:-100px; right:-60px; animation:drift 14s ease-in-out infinite; }
.hero::after{ width:360px; height:360px; background:radial-gradient(circle,#c9d6ff,transparent 70%); bottom:-120px; left:-80px; animation:drift 18s ease-in-out infinite reverse; }
@keyframes drift{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(40px,30px) scale(1.12) } }

/* highlight pop-in */
.hl{ animation:hlpop .6s cubic-bezier(.2,1.4,.4,1) both; animation-delay:.25s; }
@keyframes hlpop{ 0%{ transform:scale(.82) rotate(-2deg); opacity:0 } 100%{ transform:none; opacity:1 } }

/* button sheen */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-18deg); transition:left .6s; }
.btn-primary:hover::after{ left:130%; }

/* marquee */
.marquee{ overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee-track{ display:flex; gap:1rem; width:max-content; animation:scrollx 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.chip{ display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; padding:.6rem 1.1rem; border:1px solid var(--line); border-radius:var(--pill); background:var(--card); color:var(--ink-2); font-weight:500; font-size:.92rem; box-shadow:var(--shadow-sm); }
.chip svg{ width:18px; height:18px; color:var(--blue); }
@keyframes scrollx{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* stat pulse underline */
.stat b{ position:relative; }
.card .more svg{ width:16px; height:16px; transition:transform .25s; }
.card:hover .more svg{ transform:translateX(4px); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero-badge,.hero::before,.hero::after,.hl,.marquee-track{ animation:none !important; }
  *{ animation-duration:.01ms !important; }
}