:root{
  --ink:#080B12;
  --surface:#0E131D;
  --surface-raised:#141A26;
  --hairline:#232B3B;
  --hairline-soft:#1A2130;
  --text-hi:#EEF1F8;
  --text-lo:#8792A8;
  --text-dim:#5B6479;
  --accent:#6C6CFF;
  --accent-dim:#4A4AC4;
  --signal:#2FE0C0;
  --gold:#D9B36C;
  --danger:#E0645A;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--text-hi);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.mono{font-family:'IBM Plex Mono', monospace;}
.display{font-family:'Space Grotesk', sans-serif;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 40px;}
::selection{background:var(--accent); color:#fff;}

/* ===== NAV ===== */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(8,11,18,0.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline-soft);
}

nav.wrap{
  height:76px; display:flex; align-items:center; justify-content:space-between;
}

.logo{display:flex; align-items:center; gap:5px;}
.logo svg{width:50px; height:50px; display:block;}
.logo-text{font-family:'Space Grotesk'; font-weight:700; font-size:20px; letter-spacing:0.5px;}
.logo-text span{color:var(--text-lo); font-weight:500;}

.nav-links{display:flex; align-items:center; gap:38px;}
.nav-links a{
  font-size:15.5px; color:var(--text-lo); font-weight:600;
  letter-spacing:0.2px; transition:color .2s;
}
.nav-links a:hover{color:var(--text-hi);}
.nav-links .mobile-login{display:none;}

.nav-cta{
  padding:10px 20px; border:1px solid var(--hairline); border-radius:8px;
  font-size:13.5px; font-weight:500; color:var(--text-hi);
  transition:border-color .2s, background .2s;
}
.nav-cta:hover{border-color:var(--accent); background:rgba(108,108,255,0.08);}

.nav-toggle{
  display:none; border:1px solid var(--hairline); background:rgba(255,255,255,0.02);
  border-radius:10px; width:42px; height:42px; padding:8px 10px; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  transition:border-color .2s, background .2s;
}
.nav-toggle:hover{border-color:var(--text-lo); background:rgba(255,255,255,0.04);}
.nav-toggle span{
  display:block; width:100%; height:2px; border-radius:999px; background:var(--text-hi);
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===== HERO SECTION ===== */
.hero {
  position: relative;
  padding: 96px 0 80px;
  border-bottom: 1px solid var(--hairline-soft);
  overflow: hidden;
}

/* Background Video */
.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none; /* Isse video par click nahi hoga aur text select kar payenge */
}

/* Dark overlay so text remains readable */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(8, 11, 18, 0.65); /* Video ko thoda dark karne ke liye */
  z-index: 1;
  pointer-events: none;
}

/* Hero Content (Text & Cards) */
.hero-grid {
  position: relative;
  z-index: 2; /* Ye content ko video aur overlay ke upar rakhega */
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:0.06em;
  color:var(--signal); text-transform:uppercase; margin-bottom:22px;
}

.eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--signal);
  box-shadow:0 0 0 3px rgba(47,224,192,0.18);
}

h1{
  font-family:'Space Grotesk'; font-weight:600; font-size:50px; line-height:1.08;
  letter-spacing:-0.015em; margin-bottom:22px;
}

h1 em{font-style:normal; color:var(--text-lo);}

.hero-sub{
  font-size:16.5px; line-height:1.65; color:var(--text-lo); max-width:480px; margin-bottom:34px;
}

.btn-row{display:flex; gap:14px; align-items:center;}

.btn-primary{
  background:var(--text-hi); color:var(--ink); padding:13px 24px; border-radius:8px;
  font-weight:600; font-size:14px; transition:transform .15s, background .2s;
  display:inline-block;
}

.btn-primary:hover{transform:translateY(-1px); background:var(--signal);}

.btn-ghost{
  padding:13px 22px; border-radius:8px; border:1px solid var(--hairline);
  font-size:14px; font-weight:500; color:var(--text-hi); transition:border-color .2s;
}

.btn-ghost:hover{border-color:var(--text-lo);}

/* dashboard panel */
.panel{
  background:var(--surface-raised); border:1px solid var(--hairline); border-radius:14px;
  padding:22px; position:relative; z-index:2;
}

.panel-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.panel-title{font-size:12.5px; color:var(--text-lo); font-family:'IBM Plex Mono';}
.panel-dot{width:7px; height:7px; border-radius:50%; background:var(--signal);}
.panel-live{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--signal); font-family:'IBM Plex Mono';}

.metric-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px;}
.metric{background:var(--surface); border:1px solid var(--hairline-soft); border-radius:10px; padding:14px 16px;}
.metric-label{font-size:11px; color:var(--text-dim); margin-bottom:6px; letter-spacing:0.03em; text-transform:uppercase;}
.metric-val{font-family:'IBM Plex Mono'; font-size:20px; font-weight:500;}
.metric-val.up{color:var(--signal);}
.metric-val.down{color:var(--danger);}

.chart-area{height:96px; margin-bottom:6px;}
.chart-area svg{width:100%; height:100%; display:block;}

/* ===== AI INSIGHTS ===== */
.insights-hero{
  border-bottom:1px solid var(--hairline-soft); padding:90px 0 70px;
  background:radial-gradient(circle at 20% 20%, rgba(108,108,255,0.08), transparent 55%);
}

.insights-hero h2{font-size:42px; max-width:760px; margin-bottom:22px;}
.insights-hero .section-desc{max-width:620px; font-size:16px;}

.insights-disclaimer{
  margin-top:28px; font-size:12px; color:var(--text-dim); font-family:'IBM Plex Mono';
  border-left:2px solid var(--hairline); padding-left:14px; max-width:560px; line-height:1.6;
}

.insights-block{border-bottom:1px solid var(--hairline-soft); padding:80px 0;}
.insights-block .section-head{margin-bottom:0;}

.insights-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px;}

.insight-card{
  background:var(--surface-raised); border:1px solid var(--hairline); border-radius:14px;
  padding:28px 26px;
}

.insight-card .value-mark{font-size:11px; letter-spacing:0.08em;}
.insight-card h4{font-family:'Space Grotesk'; font-size:16px; font-weight:600; margin:14px 0 10px;}
.insight-card p{font-size:13.5px; color:var(--text-lo); line-height:1.65;}

.ecosystem-wrap{margin-top:44px;}
.ecosystem-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}

.eco-node{
  background:var(--surface); border:1px solid var(--hairline); border-radius:10px;
  padding:20px 18px; position:relative; transition:border-color .2s;
}

.eco-node:hover{border-color:var(--accent-dim);}

.eco-node::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--signal);
  display:block; margin-bottom:14px;
}

.eco-node span{font-size:14px; font-weight:500; color:var(--text-hi);}

.ecosystem-caption{
  margin-top:26px; font-size:13.5px; color:var(--text-lo); font-style:normal;
  border-top:1px solid var(--hairline-soft); padding-top:22px;
}

.insights-closing{
  padding:90px 0; text-align:left; border-bottom:1px solid var(--hairline-soft);
  background:var(--surface);
}

.insights-closing h2{font-size:38px; margin-bottom:8px;}
.insights-closing .sub{font-family:'Space Grotesk'; font-size:20px; color:var(--text-lo); font-weight:500; margin-bottom:22px;}
.insights-closing p{color:var(--text-lo); font-size:15px; line-height:1.7; max-width:560px; margin-bottom:30px;}

/* ===== SKYLINE BANNER ===== */
.skyline{
  position:relative; height:420px; overflow:hidden;
  border-bottom:1px solid var(--hairline-soft);
}

.skyline img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(0.9) brightness(0.62);
}

.skyline::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,11,18,0.15) 0%, rgba(8,11,18,0.55) 60%, var(--ink) 100%);
}

.skyline-content{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; padding-bottom:44px;
}

.skyline-content .section-eyebrow{color:var(--signal); margin-bottom:12px;}
.skyline-content h2{max-width:560px;}

/* ===== ABOUT ===== */
.about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:start;}
.about-lead{font-family:'Space Grotesk'; font-size:22px; font-weight:500; line-height:1.5; color:var(--text-hi); margin-bottom:20px;}
.about-body p{color:var(--text-lo); font-size:15px; line-height:1.75; margin-bottom:16px;}

.value-list{display:flex; flex-direction:column; gap:22px;}
.value-item{display:flex; gap:16px; padding-bottom:22px; border-bottom:1px solid var(--hairline-soft);}
.value-item:last-child{border-bottom:none; padding-bottom:0;}
.value-mark{font-family:'IBM Plex Mono'; font-size:12px; color:var(--signal); flex-shrink:0; padding-top:3px;}
.value-item h4{font-family:'Space Grotesk'; font-size:16px; font-weight:600; margin-bottom:6px;}
.value-item p{font-size:13.5px; color:var(--text-lo); line-height:1.65;}

/* ===== ACCOUNT / CLIENT SERVICES ===== */
.account-section{border-top:1px solid var(--hairline-soft); border-bottom:1px solid var(--hairline-soft); background:var(--surface);}
.account-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}

.account-card{
  background:var(--surface-raised); border:1px solid var(--hairline); border-radius:14px;
  padding:30px; display:flex; flex-direction:column; justify-content:space-between; min-height:190px;
}

.account-card h3{font-family:'Space Grotesk'; font-size:19px; font-weight:600; margin-bottom:10px;}
.account-card p{font-size:14px; color:var(--text-lo); line-height:1.65; margin-bottom:22px;}
.account-card .btn-ghost, .account-card .btn-primary{align-self:flex-start;}

/* ===== LOGIN ===== */
.auth-shell{
  padding:88px 0 100px; border-bottom:1px solid var(--hairline-soft);
  background:radial-gradient(circle at top left, rgba(108,108,255,0.15), transparent 42%);
}
.auth-wrap{display:flex; justify-content:center;}
.auth-panel{
  width:min(1120px, 100%); display:grid; grid-template-columns:1.08fr 0.92fr; gap:32px;
  align-items:center; background:rgba(20,26,38,0.55); border:1px solid var(--hairline); border-radius:22px;
  padding:28px; box-shadow:0 30px 80px rgba(2,6,12,0.35);
}
.auth-intro{padding:18px 10px 18px 12px;}
.auth-intro h1{margin-bottom:18px; font-size:44px;}
.auth-intro p{font-size:15px; line-height:1.7; color:var(--text-lo); max-width:560px;}
.auth-points{list-style:none; display:flex; flex-direction:column; gap:12px; margin-top:28px;}
.auth-point{display:flex; align-items:flex-start; gap:12px; color:var(--text-hi); font-size:14px;}
.auth-point::before{
  content:''; width:8px; height:8px; border-radius:50%; background:var(--signal);
  margin-top:8px; box-shadow:0 0 0 5px rgba(47,224,192,0.12);
}

.auth-card{
  background:var(--surface-raised); border:1px solid var(--hairline); border-radius:16px;
  padding:24px; display:flex; flex-direction:column; gap:18px;
}
.auth-card-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:6px;}
.auth-card-head .panel-title{font-size:11px; letter-spacing:0.12em; color:var(--text-dim);}
.chip{
  padding:6px 10px; border-radius:999px; font-family:'IBM Plex Mono'; font-size:10px;
  letter-spacing:0.08em; text-transform:uppercase; border:1px solid rgba(47,224,192,0.35); color:var(--signal);
  background:rgba(47,224,192,0.08);
}
.auth-form{display:flex; flex-direction:column; gap:16px;}
.field-group{display:flex; flex-direction:column; gap:8px;}
.field-group label{font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim); font-family:'IBM Plex Mono';}
.field-group input{
  width:100%; border:1px solid var(--hairline); border-radius:10px; background:rgba(8,11,18,0.6);
  color:var(--text-hi); padding:14px 14px; font-size:14px; outline:none; transition:border-color .2s, box-shadow .2s;
}
.field-group input:focus{
  border-color:rgba(108,108,255,0.8); box-shadow:0 0 0 3px rgba(108,108,255,0.14);
}
.checkbox-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:12px; color:var(--text-lo);
}
.check{display:inline-flex; align-items:center; gap:8px;}
.check input{accent-color:var(--signal); width:14px; height:14px;}
.checkbox-row a{color:var(--text-hi);}
.auth-submit{width:100%; border:none; cursor:pointer; text-align:center;}
.auth-divider{position:relative; text-align:center; color:var(--text-dim); font-size:11px; font-family:'IBM Plex Mono'; letter-spacing:0.08em; text-transform:uppercase;}
.auth-divider::before{
  content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--hairline-soft); z-index:0;
}
.auth-divider span{position:relative; z-index:1; display:inline-block; background:var(--surface-raised); padding:0 12px;}
.auth-secondary{width:100%; text-align:center; justify-content:center;}

/* ===== STAT STRIP ===== */
.stat-strip{border-bottom:1px solid var(--hairline-soft); background:var(--surface);}
.stat-strip .wrap{
  display:grid; grid-template-columns:repeat(4,1fr); padding:38px 40px;
}

.stat{padding:0 24px; border-left:1px solid var(--hairline-soft);}
.stat:first-child{border-left:none; padding-left:0;}
.stat-num{font-family:'Space Grotesk'; font-size:28px; font-weight:600; color:var(--text-hi);}
.stat-num span{color:var(--signal);}
.stat-label{font-size:12.5px; color:var(--text-dim); margin-top:6px;}


.hero {
  position: relative;
  padding: 96px 0 80px;
  border-bottom: 1px solid var(--hairline-soft);
  overflow: hidden;
}

/* Background Video */
.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Dark overlay so text remains readable */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 18, 0.55);
  z-index: 1;
  pointer-events: none;
}


.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

/* Tablet */
@media (max-width: 900px) {
    .auth-shell {
        padding: 60px 20px 70px;
    }

    .auth-panel {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }

    .auth-intro {
        padding: 10px 8px;
        text-align: center;
    }

    .auth-intro h1 {
        font-size: 38px;
        margin-bottom: 14px;
    }

    .auth-intro p {
        max-width: 700px;
        margin: 0 auto;
    }

    .auth-points {
        max-width: 500px;
        margin: 24px auto 0;
        text-align: left;
    }

    .auth-card {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }
}


/* Mobile */
@media (max-width: 600px) {
    .auth-shell {
        padding: 40px 14px 50px;
    }

    .auth-panel {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 16px;
        border-radius: 16px;
    }

    .auth-intro {
        padding: 8px 4px;
    }

    .auth-intro h1 {
        font-size: 30px;
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .auth-intro p {
        font-size: 14px;
        line-height: 1.6;
    }

    .auth-points {
        gap: 10px;
        margin-top: 20px;
    }

    .auth-point {
        font-size: 13px;
        gap: 10px;
    }

    .auth-card {
        padding: 18px;
        border-radius: 14px;
        gap: 16px;
    }

    .auth-card-head {
        margin-bottom: 2px;
    }

    .auth-card-head .panel-title {
        font-size: 10px;
    }

    .chip {
        padding: 5px 8px;
        font-size: 9px;
    }

    .auth-form {
        gap: 14px;
    }

    .field-group {
        gap: 7px;
    }

    .field-group label {
        font-size: 11px;
    }

    .field-group input {
        padding: 12px;
        font-size: 14px;
        box-sizing: border-box;
    }

    .checkbox-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .auth-submit {
        padding: 13px 12px;
        font-size: 13px;
    }

    .auth-secondary {
        padding: 13px 12px;
        font-size: 13px;
    }
}


/* Small Mobile */
@media (max-width: 400px) {
    .auth-shell {
        padding: 30px 10px 40px;
    }

    .auth-panel {
        padding: 12px;
        border-radius: 14px;
    }

    .auth-intro h1 {
        font-size: 27px;
    }

    .auth-intro p {
        font-size: 13px;
    }

    .auth-point {
        font-size: 12px;
    }

    .auth-card {
        padding: 15px;
    }

    .field-group input {
        padding: 11px;
    }
}
/* ===== SECTION SHELL ===== */
section{padding:100px 0;}
.section-head{max-width:600px; margin-bottom:56px;}
.section-eyebrow{
  font-family:'IBM Plex Mono'; font-size:12px; color:var(--accent);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px;
}

h2{font-family:'Space Grotesk'; font-size:34px; font-weight:600; letter-spacing:-0.01em; line-height:1.2;}
.section-desc{color:var(--text-lo); font-size:15.5px; line-height:1.7; margin-top:16px;}

/* ===== SERVICES ===== */
.services{border-bottom:1px solid var(--hairline-soft);}
.service-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}

.service-card{
  background:var(--surface-raised); border:1px solid var(--hairline); border-radius:14px;
  padding:34px; transition:border-color .25s;
}

.service-card:hover{border-color:var(--accent-dim);}
.service-num{font-family:'IBM Plex Mono'; font-size:12px; color:var(--text-dim); margin-bottom:20px;}

.service-icon{
  width:44px; height:44px; border-radius:10px; background:rgba(108,108,255,0.1);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
}

.service-card h3{font-family:'Space Grotesk'; font-size:20px; font-weight:600; margin-bottom:12px;}
.service-card p{color:var(--text-lo); font-size:14.5px; line-height:1.7; margin-bottom:20px;}

.tag-row{display:flex; flex-wrap:wrap; gap:8px;}
.tag{
  font-family:'IBM Plex Mono'; font-size:11px; color:var(--text-lo);
  border:1px solid var(--hairline); padding:5px 10px; border-radius:6px;
}

/* ===== APPROACH ===== */
.approach-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline-soft); border:1px solid var(--hairline-soft); border-radius:14px; overflow:hidden;}
.approach-step{background:var(--surface); padding:30px 26px;}
.approach-num{font-family:'IBM Plex Mono'; font-size:12px; color:var(--signal); margin-bottom:16px;}
.approach-step h4{font-family:'Space Grotesk'; font-size:16px; font-weight:600; margin-bottom:10px;}
.approach-step p{font-size:13.5px; color:var(--text-lo); line-height:1.6;}

/* ===== TESTIMONIAL ===== */
.testimonial-section{border-top:1px solid var(--hairline-soft); border-bottom:1px solid var(--hairline-soft); background:var(--surface);}
.testimonial{max-width:720px;}
.stars{color:var(--gold); font-size:14px; margin-bottom:24px; letter-spacing:2px;}

blockquote{
  font-family:'Space Grotesk'; font-size:26px; font-weight:500; line-height:1.45;
  color:var(--text-hi); margin-bottom:26px;
}

.cite{display:flex; align-items:center; gap:12px;}
.cite-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk'; font-weight:600; font-size:13px;
}

.cite-name{font-size:14px; font-weight:600;}
.cite-role{font-size:12.5px; color:var(--text-dim);}

/* ===== CONTACT ===== */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
.info-row{display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--hairline-soft);}
.info-row:first-child{padding-top:0;}

.info-icon{
  width:36px; height:36px; border-radius:8px; background:var(--surface-raised);
  border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.info-label{font-size:11.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:5px;}
.info-val{font-size:14.5px; color:var(--text-hi);}

.map-box{
  background:var(--surface-raised); border:1px solid var(--hairline); border-radius:14px;
  height:100%; min-height:280px; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:24px;
}

.map-box svg{position:absolute; inset:0; width:100%; height:100%;}
.map-label{position:relative; z-index:2; font-family:'IBM Plex Mono'; font-size:12px; color:var(--text-lo);}

/* ===== FOOTER ===== */
footer{padding:48px 0; border-top:1px solid var(--hairline-soft);}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.footer-links{display:flex; gap:28px;}
.footer-links a{font-size:13px; color:var(--text-dim); transition:color .2s;}
.footer-links a:hover{color:var(--text-lo);}
.footer-copy{font-size:12.5px; color:var(--text-dim);}

/* ===== TABLET BREAKPOINT (900px and below) ===== */
@media (max-width:900px){
  .wrap{padding:0 22px;}
  
  /* Hero */
  .hero-grid{grid-template-columns:1fr;}
  h1{font-size:36px;}
  .panel{margin-top:40px;}
  
  /* Stats */
  .stat-strip .wrap{grid-template-columns:1fr 1fr; row-gap:24px;}
  .stat{border-left:none; padding-left:0; padding:0;}
  
  /* Services */
  .service-grid{grid-template-columns:1fr;}
  
  /* Approach */
  .approach-grid{grid-template-columns:1fr 1fr; gap:1px;}
  
  /* Contact */
  .contact-grid{grid-template-columns:1fr;}
  
  /* About */
  .about-grid{grid-template-columns:1fr; gap:36px;}
  
  /* Account */
  .account-grid{grid-template-columns:1fr;}
  
  /* Insights */
  .insights-cards{grid-template-columns:1fr;}
  .ecosystem-grid{grid-template-columns:1fr 1fr; gap:12px;}
  .insights-hero h2{font-size:30px;}
  .insights-closing h2{font-size:28px;}
  
  /* Skyline */
  .skyline{height:280px;}
  
  /* Nav */
  .nav-toggle{display:flex;}
  .nav-cta{display:none;}
  .nav-links{
    position:absolute; top:100%; left:0; right:0; display:flex; flex-direction:column;
    align-items:flex-start; gap:0; background:rgba(8,11,18,0.98); border-bottom:1px solid var(--hairline-soft);
    padding:12px 22px 20px; transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:all .2s ease; z-index:90;
  }
  nav.wrap{position:relative;}
  nav.wrap.menu-open .nav-links{
    transform:translateY(0); opacity:1; pointer-events:auto;
  }
  .nav-links a{padding:12px 0; width:100%; border-bottom:1px solid var(--hairline-soft); font-size:14px;}
  .nav-links a:last-child{border-bottom:none;}
  .nav-links .mobile-login{
    display:block; margin-top:6px; padding:12px 14px; border:1px solid var(--hairline);
    border-radius:10px; background:rgba(108,108,255,0.08); color:var(--text-hi); text-align:center;
  }
  
  /* Testimonial */
  blockquote{font-size:21px;}
  
  /* Buttons */
  .btn-row{flex-direction:column; align-items:flex-start;}
  .btn-primary, .btn-ghost{width:100%; text-align:center;}
  
  /* Sections */
  section{padding:60px 0;}
  .section-head{margin-bottom:40px;}
}

/* ===== SMALL TABLET / LARGE PHONE (768px and below) ===== */
@media (max-width:768px){
  .wrap{padding:0 16px;}
  
  /* Typography */
  h1{font-size:28px; line-height:1.2;}
  h2{font-size:24px;}
  
  /* Hero */
  .hero{padding:60px 0 40px;}
  .hero-grid{gap:30px;}
  .panel{padding:16px;}
  .metric-row{grid-template-columns:1fr;}
  .chart-area{height:80px;}
  
  /* Buttons */
  .btn-primary, .btn-ghost{font-size:13px; padding:11px 18px;}
  .btn-row{flex-direction:column;}
  
  /* Nav */
  nav.wrap{height:64px;}
  .logo-text{font-size:14px;}
  .nav-cta{display:none;}
  .nav-toggle{width:38px; height:38px;}
  
  /* Stats */
  .stat-strip{padding:30px 16px;}
  .stat-strip .wrap{grid-template-columns:1fr; row-gap:20px; padding:0;}
  .stat-num{font-size:24px;}
  .stat-label{font-size:11px;}
  
  /* About */
  .about-lead{font-size:18px;}
  .value-item{gap:12px; padding-bottom:16px;}
  .value-mark{font-size:11px;}
  
  /* Services */
  .service-card{padding:24px;}
  .service-num{font-size:11px;}
  .service-icon{width:40px; height:40px;}
  
  /* Approach */
  .approach-grid{grid-template-columns:1fr; gap:0;}
  .approach-step{padding:20px 18px;}
  .approach-num{font-size:11px;}
  .approach-step h4{font-size:14px;}
  .approach-step p{font-size:12.5px;}
  
  /* Insights */
  .insights-hero{padding:60px 0 40px;}
  .insights-hero h2{font-size:22px;}
  .insights-hero .section-desc{font-size:14px;}
  .insights-cards{gap:16px;}
  .insight-card{padding:20px;}
  .ecosystem-grid{grid-template-columns:1fr; gap:10px;}
  .eco-node{padding:16px; font-size:13px;}
  .insights-closing h2{font-size:22px;}
  .insights-closing .sub{font-size:16px;}
  
  /* Skyline */
  .skyline{height:220px;}
  .skyline-content{padding-bottom:30px;}
  .skyline-content h2{font-size:22px; max-width:100%;}
  
  /* Account */
  .account-card{padding:20px; min-height:auto;}
  .account-card h3{font-size:16px;}
  .account-card p{font-size:13px;}
  
  /* Testimonial */
  blockquote{font-size:18px; line-height:1.4;}
  .cite-avatar{width:32px; height:32px; font-size:11px;}
  .cite-name{font-size:13px;}
  .cite-role{font-size:11px;}
  
  /* Contact */
  .contact-grid{gap:30px;}
  .info-row{gap:12px; padding:16px 0;}
  .info-icon{width:32px; height:32px;}
  .info-label{font-size:10px;}
  .info-val{font-size:13px;}
  .map-box{min-height:240px;}
  
  /* Sections */
  section{padding:50px 0;}
  .section-head{margin-bottom:30px;}
  .section-eyebrow{font-size:11px; margin-bottom:12px;}
  .section-desc{font-size:14px;}
  
  /* Footer */
  footer{padding:30px 0;}
  .footer-row{flex-direction:column; gap:16px;}
  .footer-links{gap:16px;}
  .footer-links a{font-size:12px;}
  .footer-copy{font-size:11px;}
}

/* ===== MOBILE (576px and below) ===== */
@media (max-width:576px){
  .wrap{padding:0 12px;}
  
  /* Typography */
  h1{font-size:24px; line-height:1.15;}
  h2{font-size:20px; line-height:1.15;}
  h3{font-size:16px;}
  h4{font-size:13px;}
  
  /* Hero */
  .hero{padding:50px 0 30px; border-bottom:1px solid var(--hairline-soft);}
  .hero-grid{grid-template-columns:1fr; gap:24px;}
  .eyebrow{font-size:10px; margin-bottom:16px;}
  .hero-sub{font-size:14px; line-height:1.6; margin-bottom:24px;}
  .panel{padding:14px;}
  .panel-title{font-size:10px;}
  .panel-live{font-size:10px;}
  .metric-label{font-size:9px;}
  .metric-val{font-size:16px;}
  .chart-area{height:70px;}
  
  /* Buttons */
  .btn-primary, .btn-ghost{width:100%; font-size:12px; padding:10px 14px;}
  .btn-row{gap:10px; flex-direction:column;}
  
  /* Nav */
  nav.wrap{height:56px; gap:12px;}
  .logo{gap:2px;}
  .logo svg{width:40px; height:40px;}
  .logo-text{font-size:18px;}
  .nav-toggle{width:36px; height:36px; padding:7px 9px;}
  .nav-links{padding:10px 12px 16px;}
  .nav-links a{padding:10px 0; font-size:15px;}
  .nav-cta{display:none;}
  
  /* Stats */
  .stat-strip{padding:24px 12px;}
  .stat{padding:12px 0 !important; border-bottom:1px solid var(--hairline-soft);}
  .stat:last-child{border-bottom:none;}
  .stat-num{font-size:20px;}
  .stat-label{font-size:10px; margin-top:4px;}
  
  /* About */
  .about-lead{font-size:16px; margin-bottom:16px;}
  .about-body p{font-size:13px; line-height:1.6;}
  .value-item{gap:10px; padding-bottom:12px;}
  .value-mark{font-size:10px;}
  .value-item h4{font-size:14px; margin-bottom:4px;}
  .value-item p{font-size:12px;}
  
  /* Services */
  .service-card{padding:18px;}
  .service-num{font-size:9px; margin-bottom:12px;}
  .service-icon{width:36px; height:36px; margin-bottom:14px;}
  .service-card h3{font-size:16px; margin-bottom:8px;}
  .service-card p{font-size:13px; line-height:1.6; margin-bottom:12px;}
  .tag{font-size:10px; padding:4px 8px;}
  .tag-row{gap:6px;}
  
  /* Approach */
  .approach-grid{grid-template-columns:1fr; gap:0;}
  .approach-step{padding:16px 14px;}
  .approach-num{font-size:9px; margin-bottom:10px;}
  .approach-step h4{font-size:13px; margin-bottom:6px;}
  .approach-step p{font-size:12px; line-height:1.5;}
  
  /* Insights */
  .insights-hero{padding:50px 0 30px;}
  .insights-hero .eyebrow{font-size:9px;}
  .insights-hero h2{font-size:20px; margin-bottom:16px;}
  .insights-hero .section-desc{font-size:13px; line-height:1.6;}
  .insights-hero .btn-row{margin-top:20px;}
  .insights-disclaimer{font-size:11px; padding-left:10px; margin-top:16px;}
  
  .insights-block{padding:50px 0;}
  .insight-card{padding:16px;}
  .insight-card .value-mark{font-size:9px;}
  .insight-card h4{font-size:14px; margin:10px 0 6px;}
  .insight-card p{font-size:12px; line-height:1.6;}
  
  .ecosystem-grid{grid-template-columns:1fr;}
  .eco-node{padding:12px 14px; font-size:12px;}
  .eco-node::before{margin-bottom:8px;}
  
  .insights-closing{padding:50px 0;}
  .insights-closing h2{font-size:20px; margin-bottom:6px;}
  .insights-closing .sub{font-size:14px; margin-bottom:12px;}
  .insights-closing p{font-size:13px; line-height:1.6; margin-bottom:20px;}
  
  /* Skyline */
  .skyline{height:180px;}
  .skyline-content{padding-bottom:20px;}
  .skyline-content .section-eyebrow{font-size:9px; margin-bottom:8px;}
  .skyline-content h2{font-size:18px; line-height:1.2;}
  
  /* Account */
  .account-section{border-top:none;}
  .account-card{padding:18px; gap:12px;}
  .account-card h3{font-size:16px;}
  .account-card p{font-size:12px; margin-bottom:12px;}
  
  /* Testimonial */
  .testimonial-section{border-top:1px solid var(--hairline-soft);}
  .stars{font-size:13px; margin-bottom:16px;}
  blockquote{font-size:16px; line-height:1.4; margin-bottom:16px;}
  .cite{gap:10px;}
  .cite-avatar{width:28px; height:28px; font-size:10px;}
  .cite-name{font-size:12px;}
  .cite-role{font-size:10px;}
  
  /* Contact */
  .contact-grid{gap:24px;}
  .info-row{gap:10px; padding:12px 0;}
  .info-row:first-child{padding-top:0;}
  .info-icon{width:28px; height:28px; font-size:12px;}
  .info-label{font-size:9px;}
  .info-val{font-size:12px;}
  .map-box{min-height:200px; padding:16px;}
  .map-label{font-size:10px;}
  
  /* Sections */
  section{padding:40px 0;}
  .section-head{margin-bottom:24px;}
  .section-eyebrow{font-size:9px; letter-spacing:0.05em; margin-bottom:10px;}
  .section-desc{font-size:13px; line-height:1.6;}
  
  /* Footer */
  footer{padding:24px 0;}
  .footer-row{flex-direction:column; gap:12px;}
  .logo{gap:2px; margin-bottom:8px;}
  .footer-copy{font-size:10px;}
  .footer-links{gap:12px;}
  .footer-links a{font-size:11px;}
}

/* ===== EXTRA SMALL MOBILE (400px and below) ===== */
@media (max-width:400px){
  .wrap{padding:0 10px;}
  
  /* Typography */
  h1{font-size:20px;}
  h2{font-size:18px;}
  
  /* Hero */
  .hero{padding:40px 0 20px;}
  .eyebrow{font-size:9px; margin-bottom:12px;}
  .hero-sub{font-size:13px; margin-bottom:16px;}
  
  /* Buttons */
  .btn-primary, .btn-ghost{font-size:11px; padding:9px 12px;}
  
  /* Panels & Cards */
  .panel{padding:12px;}
  .metric-row{gap:10px;}
  .metric{padding:10px 12px;}
  
  /* Stats */
  .stat-num{font-size:18px;}
  
  /* Services */
  .service-card{padding:14px;}
  
  /* Approach */
  .approach-step{padding:12px 10px;}
  
  /* Section headings */
  .section-desc{font-size:12px;}
  
  /* Testimonial */
  blockquote{font-size:14px;}
}


/* LimePhone Callback Widget */
#callback-widget {
  width: 100%;
}

#callback-widget .wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

#callback-widget .center-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  text-align: center;
}

#limephone-callback {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* Tablet */
@media (max-width: 768px) {
 
}

/* Mobile */
@media (max-width: 480px) {
  
  #callback-widget .center-box {
    width: 100%;
  }

  #limephone-callback {
    width: 100%;
    max-width: 100%;
  }
}


/* ========================================= */
/* ===== HERO SECTION RESPONSIVE FIXES ===== */
/* ========================================= */

/* Tablet Screens (900px and below) */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr; /* Text aur panel ek ke neeche ek aayenge */
    gap: 40px;
  }
  h1 {
    font-size: 42px; /* Heading ka size adjust kiya */
  }
  .panel {
    margin-top: 20px;
  }
}

/* Mobile Screens (768px and below) */
@media (max-width: 768px) {
  .hero {
    padding: 70px 0 50px; /* Upar-neeche ki jagah thodi kam ki */
  }
  h1 {
    font-size: 34px;
    line-height: 1.15;
  }
  .hero-sub {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
  }
  .btn-row {
    flex-direction: column; /* Buttons ek ke neeche ek rahenge */
    gap: 12px;
  }
  .btn-primary, .btn-ghost {
    width: 100%; /* Mobile par buttons full width acche lagte hain */
    text-align: center;
  }
  .metric-row {
    grid-template-columns: 1fr 1fr; /* Panel ke numbers 2 column me rahenge */
  }
}

/* Small Mobile Screens (576px and below) */
@media (max-width: 576px) {
  .hero {
    padding: 50px 0 40px;
  }
  .eyebrow {
    font-size: 10px;
    margin-bottom: 16px;
  }
  h1 {
    font-size: 28px;
  }
  .chart-area {
    height: 70px; /* Chart ki height mobile par thodi choti ki */
  }
  .metric-val {
    font-size: 16px;
  }
}