:root{
  --blue:#0b3058; --blue-2:#134a82;
  --orange:#fa6400; --orange-2:#ff7d1a;
  --bg:#0a0c10; --glass:#141820; --text:#f5f7fa;
  --muted:#b5bdc9; --muted-2:#9aa5b3; --border:#23262f;
  --radius:22px; --container:1200px;
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(250,100,0,.10), transparent 60%),
    radial-gradient(1200px 800px at 85% -10%, rgba(11,48,88,.22), transparent 60%),
    var(--bg);
  color:var(--muted);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  scroll-behavior:smooth;
}
:focus-visible{outline:3px solid #6fb6ff; outline-offset:2px; border-radius:10px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important}
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;position:relative}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:96px 0; position:relative;}
.section::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:min(1080px,92%);height:2px;border-radius:2px;opacity:.5;pointer-events:none;
  background:linear-gradient(90deg, rgba(11,48,88,0), rgba(11,48,88,.55), rgba(250,100,0,.65), rgba(11,48,88,.55), rgba(11,48,88,0));
}

.h1{font-size:clamp(34px,6vw,68px);line-height:1.05;margin:0 0 18px;color:var(--text);font-weight:800}
.h2{font-size:clamp(28px,4.5vw,44px);line-height:1.15;margin:0 0 10px;color:var(--text);font-weight:800}
.h3{font-size:22px;color:var(--text);margin:0 0 8px}
.sub{max-width:780px;margin:8px 0 0;color:var(--muted)}

.pill{background:linear-gradient(90deg,var(--blue),var(--orange));border-radius:999px;padding:10px 14px;display:inline-block;color:#fff;font-weight:700}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;font-weight:700;transition:.25s;position:relative;overflow:hidden;cursor:pointer}
.btn-primary{color:#111;background:linear-gradient(90deg,var(--orange),var(--orange-2))}
.btn-ghost{border:1px solid rgba(255,255,255,.18);color:var(--text);background:transparent}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(-120%);transition:transform .5s ease}
.btn:hover::before{transform:translateX(120%)}
.badge{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:#1a1f28;color:#1c2430;font-weight:800}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.metrics{display:flex;gap:28px;margin-top:26px;padding-top:24px;border-top:1px solid var(--border);flex-wrap:wrap}
.metric strong{font-size:22px;color:var(--text);display:block}

.grad-orange{background:linear-gradient(90deg,var(--orange),var(--orange-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-blue{background:linear-gradient(90deg,var(--blue),var(--blue-2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Header */
.nav{
  position:sticky; top:0; z-index:60;
  background:#f8f9fb; border-bottom:1px solid #e5e9f0; box-shadow:none;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.nav.scrolled{ box-shadow:0 10px 24px rgba(0,0,0,.12); border-bottom-color:#e2e6ee; }
.nav__row{height:68px;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:900;letter-spacing:.08em;font-size:1.1rem}
.brand .vrinda{color:var(--blue);}
.brand .sn{color:var(--orange);}
.menu{display:flex;gap:26px;align-items:center}
.menu a{color:#0b3058;opacity:.95;font-weight:600}
.menu a:hover{opacity:1}
.menu a.active{color:var(--orange);font-weight:800}
.menu-toggle{display:none}
@media (max-width: 880px){
  .menu{display:none;position:absolute;left:0;right:0;top:68px;background:#f8f9fb;border-bottom:1px solid #e5e9f0;flex-direction:column;padding:14px 24px}
  .menu.show{display:flex}
  .menu-toggle{display:inline-flex;border:1px solid #cfd6e0;border-radius:12px;background:#f8f9fb;color:#0b3058;width:42px;height:42px;align-items:center;justify-content:center}
}

/* Mobile sticky CTA */
.mobile-cta{display:none;position:sticky;top:68px;z-index:55;gap:8px;padding:8px;background:#0b0f15;border-bottom:1px solid #1b2230}
.mobile-cta a{flex:1;text-align:center;padding:10px 12px;border-radius:999px;font-weight:800}
.mobile-cta a:first-child{background:linear-gradient(90deg,var(--orange),var(--orange-2));color:#111}
.mobile-cta a:last-child{background:#1c242f;border:1px solid #2a3140;color:#eaf2ff}
@media (max-width:880px){.mobile-cta{display:flex}}

/* Spotlight */
#spotlight{
  position:fixed; top:0; left:0; width:260px; height:260px; pointer-events:none;
  transform:translate(-50%,-50%); border-radius:50%; filter:blur(40px);
  mix-blend-mode:screen; z-index:40;
  background:radial-gradient(circle at center, rgba(250,100,0,.38) 0%, rgba(11,48,88,.28) 52%, transparent 70%);
}

/* Link underline */
a:not(.btn):not(.pill)::after{
  content:"";position:absolute;left:0;bottom:-3px;height:2px;width:100%;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
  background:linear-gradient(90deg,var(--orange),var(--orange-2));
}
a:not(.btn):not(.pill):hover::after{transform:scaleX(1)}

/* Glass + tilt base */
.glass{
  position:relative;border-radius:var(--radius);border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.glass::before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;opacity:.0;background:conic-gradient(from 0deg, rgba(250,100,0,.5), rgba(11,48,88,.55), rgba(250,100,0,.5));filter:blur(14px);transition:opacity .25s ease}
.glass:hover{transform:translateY(-8px);box-shadow:0 30px 90px rgba(250,100,0,.20),0 12px 30px rgba(0,0,0,.40)}
.glass:hover::before{opacity:.55}
.tilt{transform-style:preserve-3d}

/* Hero */
.hero{padding:90px 0 60px}
.hero-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.headline{margin-bottom:16px}
.headline .line-1{background:linear-gradient(90deg,var(--orange),var(--orange-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.headline .line-2{background:linear-gradient(90deg,var(--blue),var(--blue-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.headline .line-3{color:#fff}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.widget{background:linear-gradient(180deg,#1c2532,#1a212d);border:1px solid #253244;border-radius:var(--radius);padding:14px;box-shadow:0 10px 40px rgba(11,48,88,.35);position:relative}
.widget:after{content:"";position:absolute;right:18px;top:18px;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffc98a,rgba(255,211,123,.1))}
.rows{display:flex;flex-direction:column;gap:14px}
.row{display:flex;justify-content:space-between;align-items:center;background:#212a39;border-radius:14px;padding:14px;color:#eaf2ff}
.row b{color:#80ffbf}
@media (max-width: 980px){.hero-wrap{grid-template-columns:1fr}}

/* Services */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:28px}
.svc{padding:26px;border-radius:20px;border:1px solid #2a3140;background:linear-gradient(180deg,#1a202a,#171c24)}
.svc h3{color:#fff}
.svc p{color:#cfd6e3}
.svc ul{margin:14px 0 0;padding-left:0;list-style:none}
.svc li{display:flex;gap:8px;align-items:center;margin:8px 0;color:#d7deea}
.svc li:before{content:"✓";color:#7ef0b7;font-weight:900}
.svc .learn{margin-top:12px;display:inline-flex;gap:8px;align-items:center;font-weight:700}
@media (max-width:980px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.svc-grid{grid-template-columns:1fr}}

.center{display:flex;justify-content:center;margin-top:26px}

/* Success Stories */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px}
.case{border-radius:20px;padding:22px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.tag{background:#0000001a;border:1px solid #2a3140;color:#111;padding:6px 10px;border-radius:999px;font-size:.82rem}
.case .nums{display:flex;gap:20px;flex-wrap:wrap;margin-top:8px;color:#111}
.case .nums .n{display:flex;flex-direction:column}
.case .nums .n b{font-size:20px}
.case.pink{background:#fad1e8}
.case.grey{background:#c7d4d7}
.case.yellow{background:#fff49b}
@media (max-width:980px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

/* High-contrast light cards */
.case--light{border:1px solid rgba(15,23,42,.08);box-shadow:0 12px 28px rgba(0,0,0,.08);color:#0b0d14}
.case--light h3,.case--light p,.case--light .nums,.case--light .nums b,.case--light .tag{color:#0b0d14}
.case--light .badge{background:rgba(0,0,0,.14);color:#0b0d14}
.case--light .tag{background:#fff;border:1px solid rgba(15,23,42,.12)}
.case.pink{background:linear-gradient(180deg,#f9d1de,#edbfcf)}
.case.grey{background:linear-gradient(180deg,#dae5e8,#cfd8dc)}
.case.yellow{background:linear-gradient(180deg,#fff49b,#ffe87a)}

/* About */
.about .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:26px}
.about .card{background:#edf2f7;color:#1a2433;border-radius:18px;border:1px solid #d1dae6;padding:24px}
.about .statgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.about .stat{background:#fff;border:1px solid #e5ecf5;border-radius:16px;padding:22px;text-align:center}
.about .stat div:first-child{font-size:28px;font-weight:800;color:#0f1724}
.about .stat small{display:block;color:#6b7280;letter-spacing:.12em;margin-top:6px}
.about .bullets{margin-top:12px}
.about .bullets li{list-style:none;margin:10px 0}
.about .bullets li:before{content:"✓ ";color:#119e67;font-weight:900}
@media (max-width:980px){.about .grid{grid-template-columns:1fr}}

/* AI video */
.aivideo{background:linear-gradient(180deg, rgba(11,48,88,.16), rgba(250,100,0,.08));border-top:1px solid #1a2230;border-bottom:1px solid #1a2230}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
.step{background:#141820;border:1px solid #232a38;border-radius:16px;padding:16px}
.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.check{display:flex;gap:8px;align-items:center}
.check b{color:#fff}
.demo{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.demo .ph{border-radius:14px;overflow:hidden;border:1px solid #262c3a}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}.demo{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.steps{grid-template-columns:1fr}.demo{grid-template-columns:1fr}}

/* Gallery */
.gallery{background:#0f1217}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.filter{padding:10px 14px;border:1px solid #2a3140;border-radius:999px;background:#151a22;color:#e7eef7;cursor:pointer}
.filter.active{background:linear-gradient(90deg,var(--orange),var(--orange-2));color:#111;border-color:transparent}
.grid-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.ph{border-radius:14px;overflow:hidden;border:1px solid #262c3a;cursor:pointer;transition:transform .25s}
.ph:hover{transform:translateY(-4px)}
@media (max-width:980px){.grid-photos{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-photos{grid-template-columns:1fr}}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:80}
.lightbox.show{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:16px}
.lightbox .close{position:absolute;top:18px;right:22px;background:#000;border:1px solid #333;border-radius:999px;color:#fff;padding:10px 14px;cursor:pointer}

/* Contact */
.contact .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.card{background:var(--glass);border:1px solid #232a38;border-radius:var(--radius);padding:24px;box-shadow:0 18px 60px rgba(0,0,0,.35)}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.input, select, textarea{padding:14px;border-radius:12px;border:1px solid #232a38;background:#0b0f15;color:#f3f7ff;outline:none}
.input:focus, select:focus, textarea:focus{border-color:#6fb6ff;box-shadow:0 0 0 3px #6fb6ff22}
.btn-long{width:100%;height:48px;border-radius:999px;background:linear-gradient(90deg,var(--orange),var(--orange-2));color:#111;font-weight:800}
.aside .tile{background:#0c1118;border:1px solid #232a38;border-radius:16px;padding:14px;margin-bottom:12px}
.aside .cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:980px){.contact .grid{grid-template-columns:1fr}}

/* Footer */
footer{background:#0a0c10;border-top:1px solid #141821;padding:46px 0 20px}
.fcols{display:grid;grid-template-columns:2fr 1.5fr 1.5fr 2fr;gap:26px}
.wordmark{font-weight:900;letter-spacing:.08em}
.wordmark .vrinda{color:var(--blue)}
.wordmark .sn{color:var(--orange)}
.socials{display:flex;gap:10px;margin-top:10px}
.socials .dot{width:36px;height:36px;border-radius:50%;background:#161b23;display:grid;place-items:center;color:#fff;border:1px solid #2a3140}
.newsletter{margin-top:18px;display:flex;gap:10px}
.newsletter input{flex:1;padding:14px;border-radius:12px;border:1px solid #2a3140;background:#10151c;color:#fff}
.copyright{margin-top:26px;border-top:1px solid #141821;padding-top:16px;color:var(--muted-2);text-align:center}
@media (max-width:980px){.fcols{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.fcols{grid-template-columns:1fr}}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1;transform:none}

/* Back to Top */
#topBtn{position:fixed;right:16px;bottom:86px;display:none;border:none;
  width:44px;height:44px;border-radius:50%;font-weight:800;cursor:pointer;
  background:linear-gradient(90deg,var(--blue),var(--orange));color:#fff;box-shadow:0 10px 20px #0006;z-index:95}
#topBtn.show{display:grid;place-items:center}

/* WhatsApp */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:90}
.wa-btn{display:flex;align-items:center;gap:10px;background:#25D366;color:#0a0c10;font-weight:800;border-radius:999px;padding:12px 16px;border:none;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.wa-btn:hover{transform:translateY(-2px)}

/* === VISIBILITY + CONTRAST FIXES === */
.hero .sub{color:#dbe6f7;}
.badge{background:#101620;border:1px solid #2a3140;color:#e7f0ff;letter-spacing:.04em}
.btn-ghost{background:#0d1219;border:1px solid #2a3140;color:#eef4ff;box-shadow:0 8px 18px rgba(0,0,0,.25)}
.btn-primary{color:#111;text-shadow:none;box-shadow:0 10px 24px rgba(250,100,0,.28)}
.hero-wrap{position:relative}
.hero-wrap .reveal{position:relative; z-index:2}
.hero-wrap .widget{z-index:1}
.headline .line-3{color:#ffffff; text-shadow:0 1px 0 rgba(255,255,255,.04)}
#home .section::after{opacity:.75}
.badges{margin-top:18px; margin-bottom:10px}
.hero-cta{margin-top:14px}
.badge{font-weight:800}
.svc p, .svc li, .card, .tile{color:#e1e9f5}
/* Header Logo */
.logo {
  width: 160px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Fix white gap and sticky header */
header.nav {
  background: #f8f9fb; /* soft white/gray header */
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* subtle shadow */
  padding: 10px 0;
}

/* Adjust body top padding so hero doesn’t hide under header */
body {
  margin: 0;
  padding-top: 80px;
}

/* Dark mode hover nav fix */
.nav_row a:hover {
  color: #fa6400;
}
/* Compact, fixed white header */
header.nav{
  position: fixed; /* or sticky if you prefer */
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #f8f9fb;
  border-bottom: 1px solid #e5e9f0;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.nav__row{
  height: 68px;                 /* keeps header compact */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-link{display:inline-flex;align-items:center}
.logo{
  width: 180px;                 /* adjust 160–200 if needed */
  height: auto;
  display: block;
  object-fit: contain;
}

/* Make room for the fixed header so content isn't hidden */
html{scroll-padding-top: 86px;}
body{padding-top: 86px;}        /* match header height + small gap */

/* Mobile menu spacing stays sane */
@media (max-width:880px){
  .menu{top: 68px;}             /* dropdown starts below header */
}
.demo video,
.demo iframe {
  border-radius: 16px;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  transition: transform 0.3s ease;
}

.demo video:hover,
.demo iframe:hover {
  transform: scale(1.03);
}