/* ============================================================
   DESIGN TOKENS  —  Rednirus house system
   ============================================================ */
:root{
  --navy:#07132A;
  --navy-2:#0C1E3D;
  --navy-soft:#13294B;
  --teal:#00C6AE;
  --teal-deep:#04A28F;
  --orange:#000000;
  --gold:#F6C344;
  --ink:#0B1B33;
  --slate:#5A6B85;
  --line:#E4E9F2;
  --paper:#FFFFFF;
  --mist:#F5F8FC;
  --mist-2:#EDF3FA;
  --slate-400: #7C8AA0;
  --bg-soft: #F5F8FD;
    --c-primary: #0b4a8c;
    --c-primary-dark: #0a4537;
    --c-primary-light: #e8f2ee;
    --c-accent: #e89b7b;
    --c-accent-dark: #d67e5c;
    --c-gold: #c9a961;
    --c-gold-light: #f4ecd8;
    --c-cream: #faf6ef;
    --c-cream-warm: #f5efe3;
    --c-ink: #1a1d29;
    --c-ink-soft: #4a4f5e;
    --c-mute: #8a8f9c;
    --c-line: #e8e4da;
    --c-bg: #fff;
    --c-success: #2ba876;
    --c-danger: #d9534f;
    --c-warn: #e0a23a;
    --r-pill: 999px;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:34px;
  --shadow-sm:0 2px 10px rgba(7,19,42,.06);
  --shadow-md:0 14px 40px rgba(7,19,42,.10);
  --shadow-lg:0 30px 80px rgba(7,19,42,.16);
  --maxw:1240px;

  --f-display:"Fraunces",Georgia,serif;
  --f-body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
   --font-display: var(--f-display);
  --radius-pill: var(--r-pill);
  --sh-lg: var(--shadow-lg);
  --shadow: var(--shadow-md);
  --t-base: .2s ease;
  --t-fast: .15s ease;
  --teal-50: rgba(0,198,174,.14);
  --bg-tint: var(--mist-2);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
  font-size:16px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal-deep);display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--teal);border-radius:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.1;letter-spacing:-.01em;color:var(--navy)}
.section{padding:84px 0}
.section-head{max-width:660px;margin:0 auto 52px;text-align:center}
.section-head h2{font-size:clamp(1.9rem,4vw,2.85rem);margin:14px 0 16px}
.section-head p{color:var(--slate);font-size:1.06rem}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:.97rem;padding:14px 26px;border-radius:var(--r-sm);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--orange);color:#fff;box-shadow: 0 10px 26px rgb(0 0 0 / 32%);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.42)}
.btn-teal{background:var(--teal);color:white;box-shadow:0 10px 26px rgba(0,198,174,.30)}
.btn-teal:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,198,174,.40)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.btn-ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.btn-outline{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
.btn-outline:hover{border-color:var(--teal);color:var(--teal-deep);transform:translateY(-2px)}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{background:var(--navy);color:#cdd8ea;font-size:.84rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:42px;gap:18px}
.topbar a{color:#cdd8ea;display:inline-flex;align-items:center;gap:7px;transition:color .15s}
.topbar a:hover{color:var(--teal)}
.topbar .tb-left{display:flex;gap:22px}
.topbar .tb-right{display:flex;gap:18px;align-items:center}
.tb-pill{background:var(--teal);color:var(--navy)!important;padding:5px 13px;border-radius:30px;font-weight:700}
.tb-pill:hover{background:#fff;color:var(--navy)!important}
.topbar svg{width:14px;height:14px;flex:0 0 auto}

/* ============================================================
   HEADER  /  NAV  /  MEGA MENU
   ============================================================ */
.header{position:sticky;top:0;z-index:90;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .25s}
.header.scrolled{box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand-mark{
  width:46px;height:46px;border-radius:13px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--navy),var(--navy-soft));
  display:grid;place-items:center;position:relative;overflow:hidden;
}
.brand-mark::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(0,198,174,.5),transparent 60%)}
.brand-mark svg{width:26px;height:26px;position:relative;z-index:1}
.brand-name{font-family:var(--f-display);font-weight:700;font-size:1.12rem;color:var(--navy);line-height:1.05}
.brand-name span{display:block;font-family:var(--f-body);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep)}

.menu{display:flex;align-items:center;gap:4px}
.menu > li > a, .menu > li > .menu-trigger{
  display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:9px;
  font-weight:600;font-size:.95rem;color:var(--navy-2);transition:.15s;
}
.menu > li > a:hover,.menu > li > .menu-trigger:hover{background:var(--mist-2);color:var(--teal-deep)}
.menu .caret{width:10px;height:10px;transition:transform .2s}
.has-mega{position:static}
.has-drop{position:relative}

/* ============================================================
   MOBILE NAV — IMPROVED STYLING
   ============================================================ */
   .m-accordion-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.m-accordion-trigger .caret {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.m-accordion-trigger .caret.rotated {
  transform: rotate(180deg);
}
.m-submenu {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  overflow: hidden;
}
.m-sub-item {
  padding: 8px 0;
  font-size: 0.9rem;
  opacity: 0.85;
}
.scrim.active {
  display: block;
}
.mnav.active {
  transform: translateX(0);
}
.mnav{
  padding: 0;
}
.mnav-head{
  padding: 20px 22px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.mnav-head .brand-name{
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
}

.mnav a.m-item,
.mnav button.m-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 22px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--navy-2);
  border-bottom: 1px solid var(--line);
  transition: background .15s, color .15s;
}
.mnav a.m-item:hover,
.mnav button.m-item:hover{
  background: var(--mist-2);
  color: var(--teal-deep);
}

.m-accordion{
  border-bottom: 1px solid var(--line);
}
.m-accordion .m-item{
  border-bottom: none;
}
.m-accordion-trigger{
  padding: 15px 22px;
}

.m-submenu{
  padding: 0 22px 12px 22px;
  gap: 2px;
  background: var(--mist);
}
.m-sub-item{
  padding: 11px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--navy-2);
  border-radius: 8px;
  opacity: 1;
  transition: background .15s, color .15s;
}
.m-sub-item:hover{
  background: #fff;
  color: var(--teal-deep);
}

.mnav .m-cta{
  padding: 22px;
  margin-top: 10px;
}
.mnav .m-cta .btn{
  width: 100%;
}

.mnav .caret{
  width: 14px;
  height: 14px;
  color: var(--slate-400);
  flex-shrink: 0;
}
/* mega panel */
.mega{
  position:absolute;left:0;right:0;top:100%;background:#fff;
  border-top:1px solid var(--line);box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s;z-index:80;
}
.has-mega:hover .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-inner{max-width:var(--maxw);margin:0 auto;padding:30px 24px;display:grid;grid-template-columns:repeat(4,1fr) 1.1fr;gap:26px}
.mega-col h4{font-family:var(--f-body);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:12px}
.mega-col a{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:.9rem;color:var(--navy-2);border-radius:6px;transition:.13s}
.mega-col a:hover{color:var(--teal-deep);transform:translateX(3px)}
.mega-col a b{font-weight:700}
.mega-feature{background:linear-gradient(160deg,var(--navy),var(--navy-soft));border-radius:var(--r-md);padding:24px;color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.mega-feature h5{font-family:var(--f-display);font-size:1.15rem;color:#fff;margin-bottom:8px}
.mega-feature p{font-size:.86rem;color:#b9c6dc;margin-bottom:16px}

/* small dropdown */
.drop{
  position:absolute;top:100%;left:0;min-width:250px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;z-index:80;
}
.has-drop:hover .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:9px 12px;border-radius:8px;font-size:.9rem;font-weight:500;color:var(--navy-2)}
.drop a:hover{background:var(--mist-2);color:var(--teal-deep)}

.nav-cta{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.burger{display:none;width:44px;height:44px;border-radius:10px;background:var(--mist-2);place-items:center}
.burger svg{width:22px;height:22px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:74px 0 86px}
.hero::before{content:"";position:absolute;inset:0;    background: linear-gradient(135deg, #0a1f3d 0%, #16365e 50%, #1d4380 100%);}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  padding:8px 16px;border-radius:30px;font-size:.82rem;font-weight:600;color:#dfe8f5;margin-bottom:22px}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(0,198,174,.25)}
.hero h1{font-size:clamp(2.3rem,5vw,3.7rem);color:#fff;letter-spacing:-.02em;line-height:1.04}
.hero h1 .hl{color:var(--teal);font-style:italic;font-weight:500}
.hero-sub{font-size:1.13rem;color:#c2cfe2;margin:22px 0 30px;max-width:560px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.hero-trust{display:flex;gap:30px;flex-wrap:wrap}
.hero-trust .t{display:flex;flex-direction:column}
.hero-trust .t b{font-family:var(--f-display);font-size:1.7rem;color:#fff;line-height:1}
.hero-trust .t span{font-size:.8rem;color:#9fb0c9;margin-top:4px}

.sec{padding:clamp(58px,6vw,104px) 0}
.sec-soft{background:var(--bg-soft)}
.sec-navy{background:var(--navy);color:#fff}
.sec-navy .section-title,.sec-navy h2,.sec-navy h3{color:#fff}
.sec-navy .section-sub{color:#aebbd2}

.marquee-strip {
    background: #000000;
    padding: 14px 0;
    overflow: hidden;
}

.marquee-track {
    display: flex;
    gap: 0;
    animation: marquee 30s linear infinite;
    width: max-content;
}


@keyframes marquee {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

.marquee-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-size: 13px;
    padding: 0 32px;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.25)
}

.marquee-item i {
    font-size: 14px;
    opacity: .8
}

.about-image {
    border-radius: var(--r-xl);
    aspect-ratio: 4/5;
    width: 100%;
    background-image: url(../images/herobgimage.webp);
    position: relative;
    overflow: hidden;
    box-shadow: var(--sh-lg);
    background-size: cover;
    background-repeat: no-repeat
}

/* hero requirement card */
.req-card{background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-lg);position:relative}
.req-card::before{content:"";position:absolute;inset:-1px;border-radius:var(--r-lg);padding:1px;
  background:linear-gradient(160deg,var(--teal),transparent 45%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.req-card .rc-head{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.req-card .rc-ico{width:40px;height:40px;border-radius:11px;background:var(--mist-2);display:grid;place-items:center}
.req-card .rc-ico svg{width:22px;height:22px}
.req-card h3{font-size:1.3rem}
.req-card .rc-note{font-size:.86rem;color:var(--slate);margin-bottom:18px}
.field{margin-bottom:13px}
.field label{display:block;font-size:.78rem;font-weight:600;color:var(--navy-2);margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.4px solid var(--line);border-radius:10px;font-family:inherit;font-size:.94rem;color:var(--ink);background:#fff;transition:.15s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,198,174,.14)}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.rc-sub{font-size:.74rem;color:var(--slate);text-align:center;margin-top:11px;display:flex;align-items:center;justify-content:center;gap:6px}
.rc-sub svg{width:13px;height:13px;color:var(--teal-deep)}

/* ============================================================
   LOGO / CERT STRIP
   ============================================================ */
.certstrip{background:var(--mist);border-bottom:1px solid var(--line)}
.certstrip .wrap{display:flex;align-items:center;justify-content:center;gap:14px 40px;flex-wrap:wrap;padding:26px 24px}
.certstrip .cs-label{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.cert-chip{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--navy-2);font-size:.94rem}
.cert-chip svg{width:22px;height:22px;color:var(--teal-deep)}

/* ============================================================
   STAT BAND
   ============================================================ */
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{text-align:center;padding:30px 18px;background:var(--mist);border-radius:var(--r-md);border:1px solid var(--line)}
.stat b{display:block;font-family:var(--f-display);font-size:2.5rem;color:var(--navy);line-height:1}
.stat b em{font-style:normal;color:var(--orange)}
.stat span{display:block;font-size:.9rem;color:var(--slate);margin-top:8px;font-weight:500}

/* ============================================================
   HOW IT WORKS  (real 3-step sequence -> numbered)
   ============================================================ */
.how{background:var(--mist)}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}


/* ============================================================
   CATEGORY GRID
   ============================================================ */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cat{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:26px 22px;overflow:hidden;transition:.2s;display:flex;flex-direction:column;gap:13px;
}
.cat::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--teal);transition:width .3s}
.cat:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.cat:hover::after{width:100%}
.cat-ico{width:52px;height:52px;border-radius:14px;background:linear-gradient(150deg,var(--mist-2),#fff);border:1px solid var(--line);display:grid;place-items:center}
.cat-ico svg{width:27px;height:27px;color:var(--teal-deep)}
.cat h3{font-size:1.12rem}
.cat p{font-size:.86rem;color:var(--slate);flex:1}
.cat .cat-link{font-size:.84rem;font-weight:700;color:var(--orange);display:inline-flex;align-items:center;gap:6px}
.cat .cat-link svg{width:14px;height:14px;transition:transform .15s}
.cat:hover .cat-link svg{transform:translateX(4px)}

/* ============================================================
   WHY / VERIFICATION
   ============================================================ */
.why{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.why::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 420px at 90% 0%,rgba(0,198,174,.16),transparent 60%)}
.why-grid{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}
.why-left .eyebrow{color:var(--teal)}
.why-left h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.7rem);margin:14px 0 16px}
.why-left p{color:#b9c6dc;font-size:1.05rem;margin-bottom:26px}
.why-feats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wfeat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:20px}
.wfeat .wf-ico{width:42px;height:42px;border-radius:11px;background:rgba(0,198,174,.16);display:grid;place-items:center;margin-bottom:13px}
.wfeat .wf-ico svg{width:22px;height:22px;color:var(--teal)}
.wfeat h4{font-family:var(--f-display);font-size:1.06rem;color:#fff;margin-bottom:5px}
.wfeat p{font-size:.85rem;color:#a9b8d0;margin:0}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testi{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;position:relative}
.testi .quote{font-family:var(--f-display);font-size:2.6rem;line-height:.6;color:var(--teal);opacity:.5;height:24px}
.testi p{color:var(--navy-2);font-size:.98rem;margin:14px 0 20px}
.testi .who{display:flex;align-items:center;gap:12px}
.testi .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--teal-deep));display:grid !important;place-items:center;color:#fff !important;font-weight:700;font-family:var(--f-display)}
.testi .who b{font-size:.92rem;color:var(--navy)}
.testi .who span{display:block;font-size:.78rem;color:var(--slate)}

/* ============================================================
   FAQ
   ============================================================ */
.faq-wrap{max-width:820px;margin:0 auto}
.faq{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:12px;overflow:hidden;background:#fff;transition:.2s}
.faq.open{border-color:var(--teal);box-shadow:var(--shadow-sm)}
.faq-q{width:100%;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font-weight:700;font-size:1.02rem;color:var(--navy)}
.faq-q .pm{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:var(--mist-2);display:grid;place-items:center;transition:.2s}
.faq.open .pm{background:var(--teal);transform:rotate(45deg)}
.faq-q .pm svg{width:14px;height:14px}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a div{padding:0 22px 20px;color:var(--slate);font-size:.96rem}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{background:linear-gradient(160deg,var(--navy),var(--navy-2));color:#fff;border-radius:var(--r-xl);padding:54px;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 400px at 100% 0%,rgba(0,198,174,.18),transparent 55%),radial-gradient(500px 380px at 0% 100%,rgba(255,92,26,.16),transparent 55%)}
.final-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.final h2{color:#fff;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.06;margin-bottom:16px}
.final p{color:#c2cfe2;font-size:1.06rem;margin-bottom:24px}
.final-list{display:flex;flex-direction:column;gap:11px}
.final-list li{display:flex;align-items:center;gap:11px;color:#dbe5f2;font-size:.98rem}
.final-list svg{width:20px;height:20px;color:var(--teal);flex:0 0 auto}
.final-form{background:#fff;border-radius:var(--r-lg);padding:30px;color:var(--ink)}
.final-form h3{font-size:1.25rem;margin-bottom:4px}
.final-form .ff-note{font-size:.85rem;color:var(--slate);margin-bottom:18px}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--navy);color:#aebbd0;padding:64px 0 0}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr;gap:34px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.09)}
.foot-brand .brand-name{color:#fff}
.foot-brand p{font-size:.9rem;margin:16px 0 18px;color:#94a4bf;max-width:280px}
.foot-contact a{display:flex;align-items:center;gap:10px;font-size:.9rem;margin-bottom:10px;color:#c2cfe2}
.foot-contact a:hover{color:var(--teal)}
.foot-contact svg{width:16px;height:16px;color:var(--teal)}
.foot-col h4{font-family:var(--f-body);color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.foot-col a{display:block;font-size:.9rem;padding:6px 0;color:#a3b2c9;transition:.13s}
.foot-col a:hover{color:var(--teal);transform:translateX(3px)}
.foot-cta{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:22px}
.foot-cta h4{color:#fff;font-family:var(--f-display);font-size:1.1rem;margin-bottom:8px;text-transform:none;letter-spacing:0}
.foot-cta p{font-size:.84rem;color:#94a4bf;margin-bottom:14px}
.foot-social{display:flex;gap:10px;margin-top:16px}
.foot-social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.07);display:grid;place-items:center;transition:.15s}
.foot-social a:hover{background:var(--teal);color:var(--navy)}
.foot-social svg{width:18px;height:18px}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0;font-size:.84rem;color:#7e8eaa}
.foot-bottom .fb-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-bottom a:hover{color:var(--teal)}

/* ============================================================
   FLOATING ACTION BUTTONS
   ============================================================ */
.fabs{position:fixed;right:18px;bottom:18px;z-index:95;display:flex;flex-direction:column;gap:12px}
.fab{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:var(--shadow-md);transition:transform .18s;position:relative}
.fab:hover{transform:scale(1.08)}
.fab svg{width:27px;height:27px;color:#fff}
.fab.wa{background:#25D366}
.fab.call{background:var(--orange)}
.fab::after{content:attr(data-tip);position:absolute;right:68px;top:50%;transform:translateY(-50%);background:var(--navy);color:#fff;font-size:.78rem;font-weight:600;padding:6px 12px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s}
.fab:hover::after{opacity:1}
.fab .ping{position:absolute;inset:0;border-radius:50%;animation:ping 2s ease-out infinite}
.fab.wa .ping{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
@keyframes ping{to{box-shadow:0 0 0 16px rgba(37,211,102,0)}}

/* ============================================================
   MODALS  (enquiry + exit intent)
   ============================================================ */
.modal-overlay{position:fixed;inset:0;background:rgba(7,19,42,.62);backdrop-filter:blur(4px);z-index:120;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.show{display:flex;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:var(--r-lg);max-width:480px;width:100%;padding:34px;position:relative;box-shadow:var(--shadow-lg);animation:pop .25s ease}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:10px;background:var(--mist-2);display:grid;place-items:center;color:var(--slate)}
.modal-close:hover{background:var(--orange);color:#fff}
.modal-close svg{width:18px;height:18px}
.modal .m-eyebrow{color:var(--teal-deep)}
.modal h3{font-size:1.5rem;margin:10px 0 6px}
.modal > p{color:var(--slate);font-size:.94rem;margin-bottom:20px}
.exit .exit-badge{display:inline-flex;align-items:center;gap:8px;background:var(--mist-2);color:var(--orange);font-weight:700;font-size:.8rem;padding:7px 14px;border-radius:30px;margin-bottom:6px}

/* ============================================================
   SCROLL REVEAL  (with safe fallback)
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none}
  *{animation:none!important}
}

/* ============================================================
   MOBILE NAV PANEL
   ============================================================ */
.mnav{position:fixed;inset:0 0 0 auto;width:min(86vw,360px);background:#fff;z-index:110;transform:translateX(100%);transition:transform .3s ease;box-shadow:var(--shadow-lg);overflow-y:auto;padding:22px}
.mnav.open{transform:translateX(0)}
.mnav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mnav a.m-item{display:block;padding:13px 12px;border-radius:10px;font-weight:600;color:var(--navy-2);border-bottom:1px solid var(--line)}
.mnav a.m-item:hover{background:var(--mist-2)}
.mnav .m-cta{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.scrim{position:fixed;inset:0;background:rgba(7,19,42,.5);z-index:105;display:none}
.scrim.show{display:block}

.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative;margin-top:50px}
.step{position:relative;padding-top:14px}
.step-num{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--navy);width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid var(--teal);display:grid;place-items:center;margin-bottom:20px;position:relative;z-index:2}
.sec-navy .step-num{background:var(--navy);color:var(--teal);border-color:rgba(0,198,174,.5)}
.step h3{font-size:1.18rem;margin-bottom:8px}
.step p{color:var(--slate);font-size:.92rem}
.sec-navy .step p{color:#aebbd2}
.step-line{position:absolute;top:41px;left:54px;right:-22px;height:2px;background:repeating-linear-gradient(90deg,rgba(0,198,174,.5) 0 8px,transparent 8px 16px);z-index:1}
.step:last-child .step-line{display:none}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr !important;gap:40px}
  .req-card{max-width:480px}
  .final-grid{grid-template-columns:1fr;gap:34px}
  .why-grid,.final-grid{grid-template-columns:1fr;gap:34px}
  .mega-inner{grid-template-columns:repeat(3,1fr)}
  .mega-feature{display:none}
  .foot-top{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:920px){
  .menu,.nav-cta .btn-text{display:none}
  .burger{display:grid}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .cat-grid{grid-template-columns:1fr 1fr}
  .how-grid,.testi-grid{grid-template-columns:1fr}
  .why-feats{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .section{padding:60px 0}
  .wrap{padding:0 18px}
  .topbar .tb-left{display:none}
  .brand-name{font-size:1rem; display:none;}
  .brand-name span{display:none}
  .brand-mark{width:42px;height:42px}
  .nav{gap:10px}
  .nav-cta{gap:8px}
  .nav-cta .btn-primary{padding:11px 15px;font-size:.84rem;box-shadow:unset;}
  .cat-grid,.stats .wrap,.why-feats,.field-2{grid-template-columns:1fr}
  .final{padding:32px 22px}
  .hero-trust{gap:20px}
  .foot-top{grid-template-columns:1fr 1fr;gap:22px}
  .foot-top>*{min-width:0}
  .foot-brand{grid-column:1/-1}
  .foot-col:last-child{grid-column:1/-1}
  .foot-bottom{flex-direction:column;text-align:center}
}

.about {
    padding: 56px 0
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: center
}

.about-image-wrap {
    position: relative;
    padding: 24px
}



.about-image::after {
    content: '';
    position: absolute;
    bottom: 24px;
    left: 24px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.3)
}

.about-bubble {
    position: absolute;
    padding: 16px 20px;
    background: #fff;
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2
}

.bubble-1 {
    top: 0;
    right: 0
}

.bubble-2 {
    bottom: 60px;
    left: -10px
}

.about-bubble .bub-ic {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--c-primary-light);
    color: var(--c-primary);
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.bubble-2 .bub-ic {
    background: var(--c-gold-light);
    color: var(--c-gold)
}

.about-bubble .b-num {
    font-family: var(--f-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--c-primary);
    line-height: 1
}

.bubble-2 .b-num {
    color: var(--c-gold)
}

.about-bubble .b-label {
    font-size: 11.5px;
    color: var(--c-mute);
    margin-top: 2px
}

.about-content .eyebrow {
    margin-bottom: 16px
}

.about-content h2 {
    font-size: clamp(30px,4vw,46px);
    margin-bottom: 18px;
    line-height: 1.1
}

.about-content p {
    color: var(--c-ink-soft);
    margin-bottom: 16px;
    font-size: 15.5px
}

.feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 28px 0 32px
}

.feat {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: var(--r-md);
    background: var(--c-cream);
    border: 1px solid var(--c-line);
    transition: all var(--t-base)
}

.feat:hover {
    background: #fff;
    box-shadow: var(--sh-md);
    transform: translateY(-2px);
    border-color: var(--c-primary-light)
}

.feat-ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #004699;
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0
}

.feat h4 {
    font-family: var(--f-body);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px
}

.feat p {
    font-size: 12.5px;
    color: var(--c-mute);
    margin: 0;
    line-height: 1.45
}

.section-title em{
        font-style: italic;
    color: #004699;
    font-weight: 500;
}
.about-bubble .b-num {
    font-size: 18px;
    font-weight: 700;
    color: #004699;
    line-height: 1;
}
@media(max-width: 920px) {
    .about-grid {
        grid-template-columns:1fr;
        gap: 40px
    }

    .feature-list {
        grid-template-columns: 1fr
    }

    .about {
        padding: 64px 0
    }
}

.ranges-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.range-search{position:relative;width:min(340px,100%)}
.range-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--slate-400)}
.range-search input{width:100%;padding:14px 16px 14px 46px;border:1.5px solid var(--line);border-radius:var(--radius-pill);font-family:inherit;font-size:.94rem;background:#fff;transition:border .2s,box-shadow .2s}
.range-search input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-50)}

.ranges-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.range-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.range-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--teal)}
.range-ic{width:46px;height:46px;border-radius:12px;background:var(--bg-tint);display:grid;place-items:center;flex-shrink:0;font-size:1.4rem !important;transition:background .25s}
.range-card:hover .range-ic{background:var(--teal-50)}
.range-card b{font-size:.95rem;font-weight:600;color:var(--navy);line-height:1.25}
.range-card span{display:block;font-size:.76rem;color:var(--slate-400);font-weight:500;margin-top:2px}
.range-card.hide{display:none}
.ranges-foot{text-align:center;margin-top:38px}
.no-results{text-align:center;color:var(--slate);padding:40px;display:none;grid-column:1/-1}
/* Small phone */
@media (max-width:700px){
  .container{padding-inline:15px}
  .ranges-grid{grid-template-columns:1fr}
  .brand-text b{font-size:1.1rem}
  .brand-text span{display:none}
  .nav{gap:12px}
  .hero-card{padding:24px 20px}
  .btn{padding:14px 20px;font-size:.92rem}
}
@media (max-width:780px){
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .ranges-grid{grid-template-columns:repeat(1,1fr)}
  .process-grid{grid-template-columns:repeat(2,1fr);gap:34px 22px}
  .step-line{display:none}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px}
}

.pan-india {
    padding: 96px 0;
    background: linear-gradient(135deg,var(--c-primary-dark),var(--c-primary));
    color: #fff;
    position: relative;
    overflow: hidden
}

.pan-india::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%,rgba(232,155,123,0.15),transparent 50%);
    pointer-events: none
}

.pan-india .section-head h2 {
    color: #fff
}

.pan-india .section-head p {
    color: rgba(255,255,255,0.85)
}

.pan-india .section-head .eyebrow {
    color: var(--c-gold)
}

.pan-india .section-head .eyebrow::before {
    background: var(--c-gold)
}

.states-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 980px;
    margin: 48px auto 0
}

.state-pill {
    padding: 9px 18px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,0.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    font-size: 13.5px;
    font-weight: 500;
    transition: all var(--t-fast);
    backdrop-filter: blur(4px);
    cursor: pointer
}

.state-pill:hover {
    background: var(--c-gold);
    color: var(--c-primary-dark);
    border-color: var(--c-gold)
}

.cities-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1px solid rgba(255,255,255,0.15)
}

.cities-row span {
    font-size: 13px;
    color: var(--c-gold-light);
    opacity: .85;
    letter-spacing: .04em
}

.city-pill {
    padding: 7px 14px;
    border-radius: var(--r-pill);
    background: var(--c-gold);
    color: var(--c-primary-dark);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em
}

@media(max-width: 720px) {
    .pan-india {
        padding:64px 0
    }

    .bubble-1 {
        display: none
    }
}
.breadcrum {
    background-image: linear-gradient(90deg, #1CABFF 0%, #1A3C6E 100%);
    padding: 50px 0px;
    text-align: center;
}
.breadcrum ul li{
    display: inline-block;
    color: white;
    margin-right: 10px;
}
.breadcrum h1{
    color:white;
    padding-top: 20px;
}

@media (max-width:768px){
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .stat-c::after{display:none}
  .why-grid{grid-template-columns:1fr}
  .types-grid{grid-template-columns:1fr}
  .products{grid-template-columns:1fr;gap:10px}
  .fab{top:auto;bottom:80px;transform:none}
}

@media (max-width:520px){
  .container{padding:0 14px}
  .page-hero{padding:36px 0 44px}
  .page-hero h1{font-size:1.6rem}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{justify-content:center}
  .hero-meta-row{gap:14px}
  .hm-i .num{font-size:1.3rem}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat-c .v{font-size:1.2rem}
  .modal-card{padding:22px}
  .form-row{grid-template-columns:1fr}
  .results-bar{flex-direction:column;align-items:flex-start}
  .prod-card{padding:14px}
  .prod-mark{width:46px;height:46px;font-size:.9rem}
  .listing-grid{padding:0}
}


.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.popup-box {
  position: relative;
  background: #fff;
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #555;
}

.popup-title {
  margin: 0 0 12px;
  font-size: 18px;
}

.popup-content {
  font-size: 14px;
  color: #333;
}