/* ============================================================
   0. RESET & TOKENS
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }

:root{
  --kraft:      #E3D3AC;
  --kraft-2:    #D7C093;
  --paper:      #F8F1DF;
  --paper-2:    #FFFBF2;
  --ink:        #2A2015;
  --ink-soft:   #5B4C3A;
  --navy:       #1F3A54;
  --navy-2:     #16283C;
  --stamp:      #B23A21;
  --stamp-dark: #8F2C19;
  --hazard:     #E7AE38;
  --green:      #3E6B4F;
  --line:       rgba(42,32,21,.2);
  --radius:     16px;
  --shadow:     0 14px 34px -14px rgba(22,40,60,.4);
  --container:  1180px;

  --f-display: 'Anton', sans-serif;
  --f-eyebrow: 'Oswald', sans-serif;
  --f-body:    'Karla', sans-serif;
  --f-mono:    'Space Mono', monospace;
}

body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--kraft);
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}

/* paper grain overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea{ font:inherit; }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 24px; position:relative; z-index:1; }
section{ position:relative; z-index:1; }

/* 1. Hero Slogan (h1) - Standard Bold */
h1 { 
  font-family: var(--f-display); 
  line-height: 1.05; 
  letter-spacing: .01em; 
  color: var(--ink); 
}

/* 2. Section Titles (h2) - Modern, clean, Premium Espresso Brown */
h2 { 
  font-family: var(--f-eyebrow); 
  font-weight: 600;
  line-height: 1.15; 
  letter-spacing: .02em; 
  color: #4A3B2C; 
}

/* 3. Cards/Process (h3, h4) - Ab wapas Navy Blue (Jo pehle tha) */
h3, h4 { 
  font-family: var(--f-body); 
  font-weight: 800; 
  line-height: 1.3; 
  color: var(--navy); /* Ye wahi Navy Blue hai jo pehle cards mein tha */
}

.eyebrow{
  font-family:var(--f-eyebrow); text-transform:uppercase; letter-spacing:.16em;
  font-size:.78rem; font-weight:600; color:var(--stamp);
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
}
.eyebrow::before{ content:""; width:18px; height:2px; background:var(--stamp); display:inline-block; }

.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(2rem,4.6vw,3rem); margin-bottom:14px; }
.section-head p{ color:var(--ink-soft); font-size:1.05rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-eyebrow); text-transform:uppercase; letter-spacing:.06em; font-weight:600; font-size:.92rem;
  padding:15px 28px; border-radius:10px; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--stamp); color:var(--paper-2); box-shadow:var(--shadow); }
.btn-primary:hover{ background:var(--stamp-dark); transform:translateY(-2px); }
.btn-navy{ background:var(--navy); color:var(--paper-2); }
.btn-navy:hover{ background:var(--navy-2); transform:translateY(-2px); }
.btn-outline{ background:transparent; border:2px solid var(--ink); color:var(--ink); padding:13px 26px; }
.btn-outline:hover{ background:var(--ink); color:var(--paper-2); }
.btn-outline.on-dark{ border-color:rgba(248,241,223,.55); color:var(--paper-2); }
.btn-outline.on-dark:hover{ background:var(--paper-2); color:var(--navy); }
.btn-block{ width:100%; }
:focus-visible{ outline:3px solid var(--hazard); outline-offset:2px; }

/* hazard tape corner */
.tape{
  position:absolute; height:26px; width:150px;
  background:repeating-linear-gradient(45deg, var(--ink) 0 12px, var(--hazard) 12px 24px);
  box-shadow:0 3px 8px rgba(0,0,0,.25);
}


/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   1. TOP UTILITY BAR
   ============================================================ */
.topbar{
  background:var(--navy-2); color:var(--paper); font-family:var(--f-eyebrow);
  font-size:.8rem; letter-spacing:.03em;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; padding:9px 24px; gap:12px; flex-wrap:wrap; }
.topbar a{ display:inline-flex; align-items:center; gap:7px; }
.topbar a:hover{ color:var(--hazard); }
.topbar .tb-right{ display:flex; gap:20px; }

/* ============================================================
   2. HEADER
   ============================================================ */
header.site{
  position:sticky; top:0; z-index:50;
  background:var(--paper); border-bottom:1px solid var(--line);
  transition:padding .25s ease, box-shadow .25s ease;
}
header.site.scrolled{ box-shadow:0 8px 20px -12px rgba(0,0,0,.25); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
header.site.scrolled .nav-inner{ padding:10px 0; }

.logo{ display:flex; align-items:center; gap:12px; }
.logo-mark{
  width:46px; height:46px; border-radius:50%;
  border:2px solid var(--stamp); display:flex; align-items:center; justify-content:center;
  color:var(--stamp); font-size:1.2rem; flex-shrink:0;
}
.logo-text{ font-family:var(--f-display); line-height:1; text-transform:uppercase; }
.logo-text .l1{ font-size:1.05rem; display:block; color:var(--ink); }
.logo-text .l2{ font-family:var(--f-eyebrow); font-size:.62rem; letter-spacing:.16em; font-weight:600; color:var(--stamp); display:block; margin-top:3px; }

nav.main-nav ul { 
  display: flex; 
  gap: 18px; /* Gap thoda kam kiya taaki sab fit aaye */
  align-items: center; 
}
nav.main-nav a { 
  font-family: var(--f-eyebrow); 
  font-weight: 500; 
  letter-spacing: .02em; 
  font-size: .88rem; /* Font slightly sleek kiya */
  text-transform: uppercase; 
  position: relative; 
  padding: 6px 0; 
  white-space: nowrap; /* THE MAGIC FIX - text tootega nahi */
}

.nav-cta{ display:flex; align-items:center; gap:14px; }
.hamburger{ display:none; flex-direction:column; gap:5px; padding:8px; }
.hamburger span{ width:24px; height:2px; background:var(--ink); border-radius:2px; }

.mobile-panel{
  display:none; background:var(--paper); border-top:1px solid var(--line);
  padding:18px 24px 26px;
}
.mobile-panel.open{ display:block; }
.mobile-panel ul{ display:flex; flex-direction:column; gap:4px; margin-bottom:16px; }
.mobile-panel a{ display:block; padding:12px 4px; font-family:var(--f-eyebrow); text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line); }

@media (max-width:920px){
  nav.main-nav, .nav-cta .btn-outline{ display:none; }
  .hamburger{ display:flex; }

  /* ------------------------------------------------------------
     MOBILE HEADER OVERFLOW FIX
     The logo mark ships as an inline style at 85x85px on every
     page, and the header CTA cluster (quote button + hamburger)
     used to be forced to stay at full/nowrap size. On narrow
     phones that combined width was wider than the viewport,
     which pushed the hamburger button off-screen to the right
     and made the whole page horizontally scrollable/jumpy.
     These overrides (some need !important to beat the inline
     style) make sure logo + CTA + hamburger always fit on one
     row, on any phone width.
     ------------------------------------------------------------ */
  .logo-mark{ width:42px !important; height:42px !important; margin-right:8px !important; border-radius:8px !important; }
  .logo-text .l2{ display:none; }
  .logo-text .l1{ font-size:.82rem !important; }
  .nav-cta{ gap:8px; margin-left:8px !important; }
  .nav-cta .btn-primary{
    white-space:normal; text-align:center; line-height:1.15;
    padding:8px 12px; font-size:.68rem; max-width:92px;
  }
  .hamburger{ padding:6px; }

  /* ------------------------------------------------------------
     MOBILE "BACK TO HOME" FIX
     On phones the full-text .btn-outline (Call Now / Back to
     Home) is hidden above to save space, but on inner pages that
     left NO way back to the home page from the header without
     opening the hamburger menu first. This adds a small round
     home-icon button that stays visible on mobile only, on every
     inner page, right next to the hamburger.
     ------------------------------------------------------------ */
  .nav-back-mobile{
    display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; flex-shrink:0;
    border-radius:50%; border:2px solid var(--ink);
    background:var(--paper); color:var(--ink);
    font-size:.9rem; text-decoration:none;
  }
  .nav-back-mobile:active{ background:var(--ink); color:var(--paper-2); }
}
@media (min-width:921px){
  .nav-back-mobile{ display:none; }
}

/* ============================================================
   3. HERO
   ============================================================ */
.hero{
  padding:80px 0 60px; overflow:hidden; position:relative;
}
.hero .tape.tl{ top:22px; left:-40px; transform:rotate(-40deg); }
.hero .tape.br{ bottom:14px; right:-40px; transform:rotate(-40deg); }

.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
}
@media (max-width:940px){ .hero-grid{ grid-template-columns:1fr; } }

.hero h1{ font-size:clamp(2.6rem,6vw,4.4rem); margin-bottom:20px; }
.hero h1 .accent{ color:var(--stamp); }
.hero p.lede{ font-size:1.15rem; color:var(--ink-soft); max-width:520px; margin-bottom:28px; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:34px; }

.hero-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font-family:var(--f-mono); font-size:.78rem; background:var(--paper-2);
  border:1px dashed var(--ink-soft); border-radius:30px; padding:7px 14px;
  display:inline-flex; align-items:center; gap:7px; color:var(--ink-soft);
}
.chip i{ color:var(--green); }

/* hero visual: hanging tag + ink stamp */
.hero-visual{ position:relative; display:flex; justify-content:center; align-items:flex-start; padding-top:10px; }
.hang-tag{
  background:var(--paper-2); width:290px; border-radius:6px;
  box-shadow:var(--shadow); position:relative; padding:30px 24px 26px;
  transform:rotate(4deg);
  border:1px solid var(--line);
}
.hang-tag::before{
  content:""; position:absolute; top:-34px; left:50%; transform:translateX(-50%);
  width:2px; height:36px; background:var(--ink-soft);
}
.hang-tag::after{
  content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:20px; height:20px; border-radius:50%; border:4px solid var(--ink-soft); background:var(--kraft);
}
.hang-tag .tag-eyebrow{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; color:var(--stamp); text-transform:uppercase; margin-bottom:6px; }
.hang-tag h3{ font-size:1.55rem; margin-bottom:14px; }
.tag-rule{ border-top:1px dashed var(--line); margin:14px 0; }
.tag-facts{ display:flex; flex-direction:column; gap:10px; font-family:var(--f-mono); font-size:.82rem; }
.tag-facts div{ display:flex; justify-content:space-between; gap:10px; color:var(--ink-soft); }
.tag-facts b{ color:var(--ink); }

.ink-stamp{ width:150px; height:150px; position:absolute; top:-26px; right:-14px; color:var(--stamp); mix-blend-mode:multiply; transform:rotate(-9deg); opacity:.95; }
.ink-stamp circle{ fill:none; stroke:currentColor; }
.ink-stamp .ring-o{ stroke-width:2.5; }
.ink-stamp .ring-i{ stroke-width:1.4; stroke-dasharray:3 4; }
.ink-stamp text{ font-family:var(--f-mono); }
@media (max-width:560px){ .ink-stamp{ display:none; } }

/* ============================================================
   4. TRUST STRIP
   ============================================================ */
.trust-strip{ background:var(--navy); color:var(--paper); padding:26px 0; }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
@media (max-width:800px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }
.trust-item{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.trust-item i{ font-size:1.5rem; color:var(--hazard); }
.trust-item span{ font-family:var(--f-eyebrow); font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; }

/* ============================================================
   5. SERVICES
   ============================================================ */
.services{ padding:96px 0; }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:940px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .svc-grid{ grid-template-columns:1fr; } }

.svc-card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; transition:transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column; gap:14px;
}
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.svc-icon{
  width:56px; height:56px; border-radius:50%; background:var(--kraft);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--stamp);
}
.svc-card h3{ font-size:1.25rem; }
.svc-card p{ color:var(--ink-soft); font-size:.96rem; flex-grow:1; }
.svc-link{ font-family:var(--f-eyebrow); text-transform:uppercase; font-size:.82rem; letter-spacing:.04em; font-weight:600; color:var(--stamp); display:inline-flex; align-items:center; gap:8px; }
.svc-link i{ transition:transform .2s ease; }
.svc-card:hover .svc-link i{ transform:translateX(4px); }
.services-foot{ text-align:center; margin-top:40px; color:var(--ink-soft); font-style:italic; }

/* ============================================================
   6. PROCESS
   ============================================================ */
.process{ padding:96px 0; background:var(--kraft-2); }
.process-list{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
@media (max-width:940px){ .process-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .process-list{ grid-template-columns:1fr; } }
.proc-step{ background:var(--paper-2); border-radius:var(--radius); padding:26px 20px; border:1px solid var(--line); position:relative; }
.proc-num{ font-family:var(--f-display); font-size:2.4rem; color:var(--stamp); opacity:.28; line-height:1; margin-bottom:10px; }
.proc-step h4{ font-size:1rem; margin-bottom:8px; letter-spacing:.02em; }
.proc-step p{ font-size:.88rem; color:var(--ink-soft); }

/* ============================================================
   7. WHY US / STATS
   ============================================================ */
.whyus{ padding:96px 0; }
.whyus-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media (max-width:900px){ .whyus-grid{ grid-template-columns:1fr; gap:40px; } }
.why-list{ display:flex; flex-direction:column; gap:20px; margin-top:24px; }
.why-item{ display:flex; gap:16px; }
.why-item i{ font-size:1.2rem; color:var(--green); margin-top:3px; }
.why-item h4{ font-family:var(--f-eyebrow); font-size:1rem; text-transform:uppercase; margin-bottom:4px; }
.why-item p{ color:var(--ink-soft); font-size:.92rem; }

.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.stat-card{
  background:var(--navy); color:var(--paper); border-radius:var(--radius); padding:28px 20px; text-align:center;
}
.stat-num{ font-family:var(--f-display); font-size:2.6rem; color:var(--hazard); }
.stat-label{ font-family:var(--f-eyebrow); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; margin-top:6px; }
.stat-note{ grid-column:1/-1; font-family:var(--f-mono); font-size:.72rem; color:var(--ink-soft); text-align:center; opacity:.75; }

/* ============================================================
   8. QUOTE FORM
   ============================================================ */
.quote{ padding:96px 0; background:var(--navy); color:var(--paper); position:relative; overflow:hidden; }
.quote-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:flex-start; }
@media (max-width:940px){ .quote-grid{ grid-template-columns:1fr; } }
.quote .eyebrow{ color:var(--hazard); }
.quote .eyebrow::before{ background:var(--hazard); }
.quote h2{ color:var(--paper); font-size:clamp(2rem,4.4vw,2.9rem); margin-bottom:16px; }
.quote p.lede{ color:rgba(248,241,223,.8); max-width:460px; margin-bottom:26px; }
.quote-perks{ display:flex; flex-direction:column; gap:14px; }
.quote-perks div{ display:flex; gap:12px; align-items:flex-start; font-size:.94rem; color:rgba(248,241,223,.9); }
.quote-perks i{ color:var(--hazard); margin-top:3px; }

.manifest{
  background:var(--paper-2); color:var(--ink); border-radius:var(--radius); padding:34px 30px;
  box-shadow:0 26px 60px -20px rgba(0,0,0,.5);
}
.manifest-head{ display:flex; justify-content:space-between; align-items:center; border-bottom:2px dashed var(--line); padding-bottom:14px; margin-bottom:22px; }
.manifest-head h3{ font-size:1.15rem; }
.manifest-head span{ font-family:var(--f-mono); font-size:.7rem; color:var(--stamp); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:var(--f-eyebrow); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
.field input, .field select, .field textarea{
  border:1px solid var(--line); border-radius:8px; padding:12px 14px; background:var(--paper); color:var(--ink);
  transition:border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--stamp); outline:none; }
.field textarea{ resize:vertical; min-height:80px; }
.form-note{ font-family:var(--f-mono); font-size:.72rem; color:var(--ink-soft); margin-top:14px; text-align:center; }
.form-success{ display:none; align-items:center; gap:10px; background:#e7f2ea; border:1px solid var(--green); color:var(--green); border-radius:8px; padding:12px 14px; font-size:.88rem; margin-top:14px; }
.form-success.show{ display:flex; }

/* ============================================================
   9. TESTIMONIALS
   ============================================================ */
.reviews{ padding:96px 0; }
.review-track-wrap{ position:relative; overflow:hidden; }
.review-track{ display:flex; gap:24px; }
.review-card{
  min-width:100%; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:36px 34px; position:relative; display:flex; gap:22px; flex-wrap:wrap;
}
.review-card::before, .review-card::after{
  content:""; position:absolute; top:50%; width:22px; height:22px; border-radius:50%; background:var(--kraft);
  transform:translateY(-50%);
}
.review-card::before{ left:-11px; }
.review-card::after{ right:-11px; }
.review-stars{ color:var(--hazard); margin-bottom:10px; letter-spacing:2px; }
.review-quote{ font-size:1.08rem; color:var(--ink); flex:1 1 100%; }
.review-who{ font-family:var(--f-eyebrow); font-size:.85rem; text-transform:uppercase; color:var(--ink-soft); letter-spacing:.03em; }
.review-controls{ display:flex; justify-content:center; gap:10px; margin-top:26px; }
.review-dot{ width:9px; height:9px; border-radius:50%; background:var(--line); transition:background .2s ease; }
.review-dot.active{ background:var(--stamp); }
.review-arrows{ display:flex; justify-content:center; gap:16px; margin-top:16px; }
.review-arrows button{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.review-arrows button:hover{ background:var(--navy); color:var(--paper); }

/* ============================================================
   10. FAQ
   ============================================================ */
.faq{ padding:96px 0; background:var(--kraft-2); }
.faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq details{ background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:18px 22px; }
.faq summary{ font-family:var(--f-eyebrow); font-weight:600; letter-spacing:.02em; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"\002B"; font-family:var(--f-display); font-size:1.3rem; color:var(--stamp); transition:transform .2s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin-top:14px; color:var(--ink-soft); font-size:.95rem; }

/* ============================================================
   11. AREA / MAP
   ============================================================ */
.area{ padding:96px 0; }
.area-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
@media (max-width:900px){ .area-grid{ grid-template-columns:1fr; } }
.locality-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.map-frame{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); }
.map-frame iframe{ width:100%; height:340px; border:0; display:block; }

/* ============================================================
   12. CONTACT / FOOTER
   ============================================================ */
.contact-cta{ background:var(--stamp); color:var(--paper-2); padding:56px 0; text-align:center; }
.contact-cta h2{ color:var(--paper-2); font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:10px; }
.contact-cta p{ margin-bottom:26px; opacity:.9; }
.contact-cta .btns{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

footer{ background:var(--navy-2); color:rgba(248,241,223,.85); padding:64px 0 26px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:46px; }
@media (max-width:820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-brand .logo-text .l1{ color:var(--paper); }
.foot-brand p{ margin-top:14px; font-size:.9rem; opacity:.8; max-width:280px; }
.foot-col h4{ font-family:var(--f-eyebrow); text-transform:uppercase; font-size:.85rem; letter-spacing:.05em; margin-bottom:16px; color:var(--hazard); }
.foot-col ul{ display:flex; flex-direction:column; gap:10px; font-size:.9rem; }
.foot-col a:hover{ color:var(--hazard); }
.foot-col li{ display:flex; gap:10px; align-items:flex-start; }
.foot-social{ display:flex; gap:12px; margin-top:16px; }
.foot-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(248,241,223,.3); display:flex; align-items:center; justify-content:center; }
.foot-social a:hover{ background:var(--hazard); color:var(--navy-2); border-color:var(--hazard); }
.foot-bottom{ border-top:1px solid rgba(248,241,223,.15); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem; opacity:.7; }

/* ============================================================
   13. FLOATING BUTTONS
   ============================================================ */
.float-stack{ position:fixed; right:22px; bottom:22px; z-index:60; display:flex; flex-direction:column; gap:12px; align-items:center; }
.float-btn{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; box-shadow:0 10px 24px -8px rgba(0,0,0,.4); transition:transform .2s ease;
}
.float-btn:hover{ transform:scale(1.08); }
.float-btn.wa{ background:#25D366; color:#fff; }
.float-btn.call{ background:var(--stamp); color:#fff; }
.float-btn.top{ background:var(--paper-2); color:var(--ink); border:1px solid var(--line); font-size:1.1rem; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.float-btn.top.show{ opacity:1; pointer-events:auto; }

@keyframes pulse-wa{ 0%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 50%{ box-shadow:0 0 0 10px rgba(37,211,102,0);} }
.float-btn.wa{ animation:pulse-wa 2.4s infinite; }






/* ============================================================
   CORPORATE BRANDS (NEON SPOTLIGHT & GLASSMORPHISM)
   ============================================================ */
.corporate-brands-pro {
  padding: 70px 0 80px;
  background: var(--navy-2); /* Dark background for glowing effect */
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  position: relative;
}

/* Subtle tech grid overlay behind the logos */
.corporate-brands-pro::before {
  content: ""; position: absolute; inset: 0; opacity: 0.15;
  background-image: radial-gradient(rgba(248, 241, 223, 0.4) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.brand-heading-pro {
  text-align: center;
  margin-bottom: 50px;
  position: relative;
  z-index: 2;
}
.brand-heading-pro .eyebrow {
  color: var(--hazard); /* Hazard yellow taaki dark background pe pop ho */
  letter-spacing: 0.15em;
  font-size: 0.9rem;
}
.brand-heading-pro .eyebrow::before {
  background: var(--hazard);
}

.brand-marquee-wrap-pro {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  display: flex;
  overflow: hidden;
  /* Faded edges taaki logos dhund se niklein */
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  z-index: 2;
  padding: 30px 0; /* Padding glow effect ke liye */
}

.brand-marquee-track-pro {
  display: flex;
  align-items: center;
  gap: 35px;
  padding: 0 20px;
  width: max-content;
  animation: brandScrollPro 35s linear infinite; 
}

@keyframes brandScrollPro {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } 
}

/* THE PREMIUM GLASS CARD */
.brand-glass-card {
  width: 190px;
  height: 95px;
  background: rgba(255, 255, 255, 0.95); /* Bright white inside for max color vibrance */
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  position: relative;
}

.brand-glass-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

/* =======================================
   THE MAGIC: SPOTLIGHT & BLUR EFFECT 
   ======================================= */

/* 1. Jab pure track pe hover ho, toh sab kuch dim aur blur kar do */
.brand-marquee-track-pro:hover {
  animation-play-state: paused;
}
.brand-marquee-track-pro:hover .brand-glass-card {
  opacity: 0.25;
  filter: blur(4px) grayscale(60%);
  transform: scale(0.95);
}

/* 2. Par jab kisi specific logo pe hover ho, toh usey pop aur glow karao! */
.brand-marquee-track-pro .brand-glass-card:hover {
  opacity: 1;
  filter: blur(0px) grayscale(0%);
  transform: scale(1.2) translateY(-8px);
  z-index: 10;
  background: #ffffff; /* Pure white for max punch */
}

/* SPECIFIC BRAND NEON GLOWS (Game Changer Detail) */
.brand-glass-card.accenture:hover { box-shadow: 0 15px 40px rgba(161, 0, 255, 0.6); border-color: #a100ff; }
.brand-glass-card.airtel:hover { box-shadow: 0 15px 40px rgba(255, 0, 0, 0.6); border-color: #ff0000; }
.brand-glass-card.axisbank:hover { box-shadow: 0 15px 40px rgba(134, 27, 63, 0.6); border-color: #861b3f; }
.brand-glass-card.bankbaroda:hover { box-shadow: 0 15px 40px rgba(240, 90, 40, 0.6); border-color: #f05a28; }
.brand-glass-card.hero:hover { box-shadow: 0 15px 40px rgba(227, 30, 36, 0.6); border-color: #e31e24; }
.brand-glass-card.icici:hover { box-shadow: 0 15px 40px rgba(242, 101, 34, 0.6); border-color: #f26522; }
.brand-glass-card.infosys:hover { box-shadow: 0 15px 40px rgba(0, 124, 195, 0.6); border-color: #007cc3; }
.brand-glass-card.pnb:hover { box-shadow: 0 15px 40px rgba(166, 12, 59, 0.6); border-color: #a60c3b; }
.brand-glass-card.sbi:hover { box-shadow: 0 15px 40px rgba(21, 55, 126, 0.6); border-color: #15377e; }
.brand-glass-card.tata:hover { box-shadow: 0 15px 40px rgba(92, 104, 115, 0.6); border-color: #5c6873; }
.brand-glass-card.tvsmotor:hover { box-shadow: 0 15px 40px rgba(0, 56, 147, 0.6); border-color: #003893; }
.brand-glass-card.unionbank:hover { box-shadow: 0 15px 40px rgba(32, 76, 161, 0.6); border-color: #204ca1; }
.brand-glass-card.wipro:hover { box-shadow: 0 15px 40px rgba(0, 177, 160, 0.6); border-color: #00b1a0; }

@media(max-width: 768px) {
  .brand-glass-card { width: 140px; height: 75px; padding: 12px; }
  .brand-marquee-track-pro { gap: 20px; }
  .brand-marquee-wrap-pro { padding: 15px 0; }
}


/* ============================================================
   ULTRA-PREMIUM EDITORIAL MODE (BLOGS)
   ============================================================ */

/* 1. Bento Grid Layout for Main Blog Page */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 900px) { .bento-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .bento-grid { grid-template-columns: 1fr; } }

.bento-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
}

/* Featured Card spans 2 columns */
.bento-featured {
  grid-column: span 2;
  background: var(--navy-2);
  color: var(--paper);
}
@media (max-width: 900px) { .bento-featured { grid-column: span 1; } }

.bento-img-wrap {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--kraft) 0%, var(--kraft-2) 100%);
  position: relative;
}
.bento-featured .bento-img-wrap {
  height: 300px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--midnight) 100%);
}
.bento-img-wrap i {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
  color: rgba(255,255,255,0.2);
  transition: transform 0.5s ease;
}

.bento-content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.bento-card h3 {
  font-size: 1.5rem;
  margin: 15px 0;
  line-height: 1.3;
  transition: color 0.3s ease;
}
.bento-featured h3 { font-size: 2.2rem; color: var(--paper-2); }
.bento-featured p { color: rgba(248, 241, 223, 0.8); font-size: 1.1rem; }

.bento-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  border-color: var(--stamp);
}
.bento-card:hover .bento-img-wrap i { transform: translate(-50%, -50%) scale(1.2); color: var(--stamp); }
.bento-featured:hover .bento-img-wrap i { color: var(--hazard); }
.bento-card:hover h3 { color: var(--stamp); }
.bento-featured:hover h3 { color: var(--hazard); }

/* 2. Reading Progress Bar (Articles ke liye) */
.progress-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 5px;
  background: transparent;
  z-index: 9999;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--stamp), var(--hazard));
  width: 0%;
  box-shadow: 0 0 10px var(--hazard);
}

/* 3. 3D Glassmorphism Tips (Pro-Tips) */
.pro-tip-glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-left: 5px solid var(--stamp);
  padding: 25px;
  border-radius: 12px;
  margin: 35px 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}
.pro-tip-glass::after {
  content: '\f0eb';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: -20px;
  bottom: -20px;
  font-size: 6rem;
  color: var(--stamp);
  opacity: 0.05;
  transform: rotate(-15deg);
}
.pro-tip-glass h4 { color: var(--navy); margin-bottom: 10px; font-family: var(--f-display); letter-spacing: 0.05em; }

/* 4. Contextual Stealth CTA Button */
.stealth-cta {
  display: block;
  text-align: center;
  background: var(--navy-2);
  color: var(--paper);
  padding: 20px;
  border-radius: 12px;
  margin: 40px 0;
  border: 2px dashed var(--hazard);
  transition: all 0.3s ease;
  font-family: var(--f-eyebrow);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.stealth-cta i { color: var(--hazard); margin-right: 10px; }
.stealth-cta:hover { background: var(--stamp); border-color: var(--stamp); transform: scale(1.02); box-shadow: 0 10px 20px rgba(178, 58, 33, 0.3); }