/* ═══════════════════════════════════════════════════════════
   INNOMERC TECH, MULTI-PAGE STYLES
   Supplements style.css · Teal #2CBCB6 · Orange #F29100
   ═══════════════════════════════════════════════════════════ */

/* ── NAV DROPDOWN ──────────────────────────────────────────── */
.nl-drop{position:relative;display:inline-flex}
.nl-parent{
  cursor:pointer;background:none;border:none;
  font-family:var(--font);font-size:.78rem;font-weight:500;
  line-height:1;letter-spacing:inherit;gap:.3rem;
}
.nl-parent .drop-arrow{transition:transform .25s var(--ease);flex-shrink:0}
.nl-drop:hover .drop-arrow,.nl-drop.open .drop-arrow{transform:rotate(180deg)}

.drop-menu{
  position:absolute;top:calc(100% + .75rem);left:50%;transform:translateX(-50%);
  min-width:300px;background:rgba(10,10,18,.96);
  border:1px solid var(--border-2);border-radius:var(--radius);
  padding:.5rem;opacity:0;visibility:hidden;pointer-events:none;
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 16px 48px rgba(0,0,0,.4),0 0 0 1px rgba(44,188,182,.06);
  transition:opacity .22s var(--ease),visibility .22s,transform .22s var(--ease);
  transform:translateX(-50%) translateY(-6px);
  z-index:2000;
}
.nl-drop:hover .drop-menu,.nl-drop.open .drop-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.drop-item{
  display:flex;align-items:center;gap:.65rem;padding:.55rem .85rem;
  border-radius:var(--radius-sm);color:var(--text-2);font-size:.8rem;font-weight:500;
  transition:all .2s var(--ease);white-space:nowrap;
}
.drop-item:hover{color:var(--teal);background:var(--teal-dim)}
.drop-item svg{flex-shrink:0;opacity:.6;transition:opacity .2s}
.drop-item:hover svg{opacity:1}
.drop-sep{height:1px;background:var(--border);margin:.25rem .5rem}

[data-theme="light"] .drop-menu{
  background:rgba(255,254,249,.97);
  box-shadow:0 16px 40px rgba(15,23,42,.1),0 0 0 1px rgba(13,148,136,.08);
}
[data-theme="light"] .drop-item{color:var(--text-2)}
[data-theme="light"] .drop-item:hover{color:var(--teal);background:var(--teal-dim)}

/* ── DRAWER (mobile hamburger panel) ─────────────────────────
   Full drawer styles are in style.css @media(max-width:768px) */

/* ── PAGE HERO (non-home pages) ───────────────────────────── */
.page-hero{
  padding-top:calc(var(--nav-h) + 4rem);padding-bottom:4.5rem;
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 90% 65% at 50% -5%, rgba(44,188,182,.25) 0%,transparent 60%),
    radial-gradient(ellipse 55% 50% at 85% 40%, rgba(242,145,0,.11) 0%,transparent 62%),
    radial-gradient(ellipse 45% 45% at 8%  70%, rgba(44,188,182,.09) 0%,transparent 58%),
    linear-gradient(180deg,transparent 55%,var(--bg) 100%);
}
.page-hero::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(44,188,182,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(44,188,182,.10) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 100% 90% at 50% 0%,black 5%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 100% 90% at 50% 0%,black 5%,transparent 75%);
}
/* Animated scan line sweeping across hero */
.page-hero::before{animation:hero-pulse 8s ease-in-out infinite alternate}
@keyframes hero-pulse{
  0%  {opacity:.85}
  50% {opacity:1}
  100%{opacity:.88}
}
.page-hero .container{position:relative;z-index:1}

/* Large decorative hero icon (page-specific) */
.page-hero-deco{
  position:absolute;right:-2rem;top:50%;transform:translateY(-50%);
  z-index:0;pointer-events:none;opacity:.10;
  animation:deco-breathe 6s ease-in-out infinite alternate;
}
@keyframes deco-breathe{
  0%  {opacity:.08;transform:translateY(-50%) scale(1)}
  100%{opacity:.14;transform:translateY(-52%) scale(1.03)}
}
.page-hero-deco svg{width:clamp(240px,40vw,440px);height:auto}
.page-hero-label{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal);margin-bottom:1rem;
}
.page-hero-label::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 8px rgba(44,188,182,.6);animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}
.page-hero-title{
  font-family:var(--font-d);font-size:clamp(2rem,5vw,3.2rem);font-weight:700;
  color:var(--text);line-height:1.15;letter-spacing:-.02em;margin-bottom:1rem;
  max-width:720px;
}
.page-hero-desc{
  font-size:clamp(1rem,2vw,1.15rem);color:var(--text-2);line-height:1.75;
  max-width:580px;margin-bottom:2rem;
}
.page-hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* Breadcrumb */
.breadcrumb{
  display:flex;align-items:center;gap:.35rem;font-size:.75rem;
  color:var(--text-3);margin-bottom:1.5rem;flex-wrap:wrap;
}
.breadcrumb a{color:var(--text-3);transition:color .2s}
.breadcrumb a:hover{color:var(--teal)}
.breadcrumb .bc-sep{opacity:.4}
.breadcrumb .bc-current{color:var(--teal)}

[data-theme="light"] .page-hero::before{
  background:
    radial-gradient(ellipse 90% 65% at 50% -5%, rgba(13,148,136,.18) 0%,transparent 60%),
    radial-gradient(ellipse 55% 50% at 85% 40%, rgba(234,88,12,.09) 0%,transparent 62%),
    radial-gradient(ellipse 45% 45% at 8%  70%, rgba(13,148,136,.07) 0%,transparent 58%),
    linear-gradient(180deg,transparent 55%,var(--bg) 100%);
}
[data-theme="light"] .page-hero::after{
  background-image:
    linear-gradient(rgba(13,148,136,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,148,136,.12) 1px,transparent 1px);
}
[data-theme="light"] .page-hero-deco{
  opacity:.10;
  filter:invert(47%) sepia(69%) saturate(497%) hue-rotate(145deg) brightness(90%);
}

/* ── PAGE HERO BACKGROUND BANNER (photo + dark overlay) ──── */
/*
   Usage: add a class like hero-contact, hero-services, hero-vapt
   to the <section class="page-hero"> element. Then place the
   matching image in /images/ (e.g. contact.jpg, service.jpg).
   The <div class="page-hero-bg"> inside the hero will display it.
*/
.page-hero-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center top;
  background-repeat:no-repeat;
  transition:opacity .6s ease;
}
.page-hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(
    135deg,
    rgba(5,5,8,.85) 0%,
    rgba(5,5,8,.70) 45%,
    rgba(5,5,8,.55) 100%
  );
}
[data-theme="light"] .page-hero-bg::after{
  background:linear-gradient(
    135deg,
    rgba(248,247,244,.92) 0%,
    rgba(248,247,244,.78) 45%,
    rgba(248,247,244,.65) 100%
  );
}

/* Home hero banner */
.hero-home .page-hero-bg{background-image:url('../images/home.jpg')}
/* Service overview page */
.hero-services .page-hero-bg{background-image:url('../images/service.jpg')}
/* Individual service pages */
.hero-cyber  .page-hero-bg{background-image:url('../images/cybersecurity.jpg')}
.hero-vapt   .page-hero-bg{background-image:url('../images/vapt.jpg')}
.hero-cloud  .page-hero-bg{background-image:url('../images/cloud.jpg')}
.hero-ai     .page-hero-bg{background-image:url('../images/ai.jpg')}
.hero-growth .page-hero-bg{background-image:url('../images/growth.jpg')}
/* Company pages */
.hero-about   .page-hero-bg{background-image:url('../images/about.jpg')}
.hero-partners .page-hero-bg{background-image:url('../images/partners.jpg')}
.hero-contact  .page-hero-bg{background-image:url('../images/contact.jpg')}
.hero-insights .page-hero-bg{background-image:url('../images/insights.jpg')}
/* Insight articles (same image folder, one level up) */
.hero-article .page-hero-bg{background-image:url('../images/insights.jpg')}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.5rem;border-radius:var(--radius-full);
  font-size:.88rem;font-weight:600;cursor:pointer;
  transition:all .3s var(--ease);position:relative;overflow:hidden;
  text-decoration:none;border:none;
}
.btn-primary{
  background:linear-gradient(135deg,var(--teal),var(--teal-l));
  color:#040e0c;font-weight:700; /* Dark text: 9.2:1 contrast on teal */
  box-shadow:0 4px 20px rgba(44,188,182,.28),0 0 0 1px rgba(44,188,182,.2);
}
.btn-primary:hover{
  background:linear-gradient(135deg,var(--teal-l),var(--teal));
  box-shadow:0 8px 32px rgba(44,188,182,.42),0 0 0 1px rgba(44,188,182,.3);
  transform:translateY(-2px);color:#040e0c;
}
.btn-secondary{
  background:linear-gradient(135deg,var(--orange),var(--orange-l));
  color:#fff;font-weight:600;
  box-shadow:0 4px 20px rgba(242,145,0,.28),0 0 0 1px rgba(242,145,0,.2);
}
.btn-secondary:hover{
  box-shadow:0 8px 32px rgba(242,145,0,.42);transform:translateY(-2px);
}
.btn-ghost{
  background:transparent;color:var(--text-2);
  border:1px solid var(--border-3);
}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-dim)}
.btn svg{flex-shrink:0}

/* ── SECTION TAGS, editorial line-prefix style ───────────── */
.tag{
  display:inline-flex;align-items:center;gap:.75rem;
  font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);background:none;border:none;border-radius:0;
  padding:0;margin-bottom:.75rem;
}
.tag::before{
  content:'';display:block;width:28px;height:1.5px;flex-shrink:0;
  background:linear-gradient(90deg,var(--teal),rgba(44,188,182,0));
  border-radius:2px;
}

/* ── SECTION HEADINGS ─────────────────────────────────────── */
.sec-title{
  font-family:var(--font-d);font-size:clamp(1.4rem,2.4vw,2rem);
  font-weight:700;color:var(--text);line-height:1.2;letter-spacing:-.025em;
  margin-bottom:.75rem;position:relative;display:block;
}
.sec-title::after{
  content:'';position:absolute;bottom:-8px;left:0;width:40px;height:2px;
  background:linear-gradient(90deg,var(--teal),var(--orange),transparent);
  border-radius:2px;box-shadow:0 0 8px rgba(44,188,182,.3);
}
.sec-desc{
  font-size:1rem;color:var(--text-2);line-height:1.75;max-width:680px;
  margin-bottom:2.5rem;
}

/* ── CARD COMPONENTS ──────────────────────────────────────── */
.card{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.75rem;
  transition:all .35s var(--ease);position:relative;overflow:hidden;
}
.card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at var(--spotlight-x,50%) var(--spotlight-y,50%),var(--card-spotlight),transparent 60%);
  opacity:0;transition:opacity .3s;
}
.card:hover::before{opacity:1}
.card:hover{border-color:rgba(44,188,182,.2);transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(0,0,0,.25)}
.card-icon,.card-icon-wrap{
  width:48px;height:48px;border-radius:var(--radius-sm);
  background:var(--teal-dim);border:1px solid rgba(44,188,182,.1);
  display:flex;align-items:center;justify-content:center;
  color:var(--teal);margin-bottom:1.1rem;flex-shrink:0;
}
.card-icon-orange,.card-icon-wrap-orange{
  background:var(--orange-dim);border-color:rgba(242,145,0,.1);color:var(--orange)
}
.card h3{font-size:1.05rem;font-weight:600;color:var(--text);margin-bottom:.6rem;line-height:1.35}
.card p{font-size:.9rem;color:var(--text-2);line-height:1.65}

/* Card accent variants, colored top bar */
.card-teal{border-top:2px solid var(--teal)}
.card-orange{border-top:2px solid var(--orange)}
.card-teal::after,.card-orange::after{
  content:'';position:absolute;top:0;left:0;right:0;height:40px;
  background:linear-gradient(180deg,rgba(44,188,182,.04),transparent);
  pointer-events:none;z-index:0;
}
.card-orange::after{background:linear-gradient(180deg,rgba(242,145,0,.05),transparent)}
.card-teal:hover{border-top-color:var(--teal);box-shadow:0 12px 40px rgba(44,188,182,.12),0 0 0 1px rgba(44,188,182,.08)}
.card-orange:hover{border-top-color:var(--orange);box-shadow:0 12px 40px rgba(242,145,0,.1),0 0 0 1px rgba(242,145,0,.08)}

/* Card content positioned above pseudo-elements */
.card-teal>*,.card-orange>*{position:relative;z-index:1}

/* Section with strong teal glow accent (reusable) */
.section-glow{
  position:relative;
}
.section-glow::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:600px;height:300px;
  background:radial-gradient(ellipse,rgba(44,188,182,.06) 0%,transparent 70%);
  pointer-events:none;z-index:0;
}
.section-glow>.container{position:relative;z-index:1}

/* Feature list */
.feat-list{list-style:none;padding:0;margin:1.25rem 0;display:flex;flex-direction:column;gap:.6rem}
.feat-list li{
  display:flex;align-items:flex-start;gap:.65rem;font-size:.9rem;color:var(--text-2);line-height:1.55;
}
.feat-list li::before{
  content:'';flex-shrink:0;width:16px;height:16px;border-radius:50%;margin-top:2px;
  background:var(--teal-dim);border:1px solid rgba(44,188,182,.25);
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%232CBCB6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:10px;background-repeat:no-repeat;background-position:center;
}

/* ── SERVICE PAGE CONTENT BLOCKS ──────────────────────────── */
.service-intro{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;
}
.service-intro-text h2{font-family:var(--font-d);font-size:clamp(1.4rem,3vw,2rem);font-weight:700;color:var(--text);margin-bottom:1rem;line-height:1.3;letter-spacing:-.02em}
.service-intro-text p{color:var(--text-2);line-height:1.75;margin-bottom:1rem}
.service-stat-box{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:2rem;display:flex;flex-direction:column;gap:1.25rem;
}
.ssb-item{display:flex;align-items:flex-start;gap:1rem}
.ssb-icon{
  width:42px;height:42px;flex-shrink:0;border-radius:var(--radius-sm);
  background:var(--teal-dim);border:1px solid rgba(44,188,182,.12);
  display:flex;align-items:center;justify-content:center;color:var(--teal);
}
.ssb-text strong{display:block;font-size:.95rem;color:var(--text);margin-bottom:.15rem}
.ssb-text span{font-size:.82rem;color:var(--text-3)}

/* Three column card grid */
.cards-3{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}

/* ── CTA SECTIONS ─────────────────────────────────────────── */
.cta-section{
  background:linear-gradient(135deg,rgba(44,188,182,.07) 0%,rgba(242,145,0,.05) 100%);
  border:1px solid rgba(44,188,188,.12);border-radius:calc(var(--radius)*1.5);
  padding:clamp(2.5rem,5vw,4rem);text-align:center;position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(44,188,182,.08),transparent 70%);
  pointer-events:none;
}
.cta-section h2{font-family:var(--font-d);font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:700;color:var(--text);margin-bottom:.75rem;letter-spacing:-.02em}
.cta-section p{color:var(--text-2);max-width:520px;margin:0 auto 2rem;line-height:1.7}
.cta-btns{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}

/* ── PROCESS STEPS (horizontal) ──────────────────────────── */
.steps-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;
  counter-reset:steps;
}
.step-item{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.75rem;position:relative;counter-increment:steps;
  transition:all .3s var(--ease);
}
.step-item:hover{border-color:rgba(44,188,182,.2);transform:translateY(-3px)}
.step-num{
  font-family:var(--font-d);font-size:2.5rem;font-weight:800;
  background:linear-gradient(135deg,var(--teal),var(--orange));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:.75rem;line-height:1;
}
.step-item h3,.step-item h4{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:.5rem}
.step-item p{font-size:.88rem;color:var(--text-2);line-height:1.6}

/* ── CARD LINK (inside card, styled as subtle text link) ───── */
.card-link{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.82rem;font-weight:600;color:var(--teal);
  margin-top:1rem;transition:gap .2s var(--ease);
}
.card-link:hover{gap:.6rem}

/* ── FAQ STYLES ───────────────────────────────────────────── */
.faq-list{display:flex;flex-direction:column;gap:.75rem}
.faq-item{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;
  border-left:3px solid transparent;transition:border-color .3s;
}
.faq-item.active{border-left-color:var(--teal)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding:1.1rem 1.25rem;font-size:.95rem;font-weight:500;
  color:var(--text);cursor:pointer;background:none;border:none;font-family:var(--font);
  text-align:left;
}
.faq-icon{
  flex-shrink:0;width:20px;height:20px;border:1px solid var(--border-2);
  border-radius:50%;position:relative;transition:all .3s var(--ease);
}
.faq-icon::before,.faq-icon::after{
  content:'';position:absolute;top:50%;left:50%;
  width:8px;height:1.5px;background:var(--text-2);transform:translate(-50%,-50%);
  transition:all .3s var(--ease);
}
.faq-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item.active .faq-icon{background:var(--teal-dim);border-color:rgba(44,188,182,.3)}
.faq-item.active .faq-icon::after{transform:translate(-50%,-50%) rotate(0deg);opacity:0}
.faq-item.active .faq-icon::before{background:var(--teal)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq-a p{padding:0 1.25rem 1.1rem;font-size:.9rem;color:var(--text-2);line-height:1.7}

/* ── CONTACT FORM ─────────────────────────────────────────── */
.contact-wrap{display:grid;grid-template-columns:1fr 1.5fr;gap:3.5rem;align-items:start}
.contact-info h2{font-family:var(--font-d);font-size:clamp(1.4rem,3vw,1.9rem);font-weight:700;color:var(--text);margin-bottom:.85rem;letter-spacing:-.02em}
.contact-info p{color:var(--text-2);line-height:1.7;margin-bottom:1.5rem;font-size:.95rem}
.contact-detail{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}
.cd-item{display:flex;align-items:flex-start;gap:.75rem}
.cd-icon{
  width:38px;height:38px;flex-shrink:0;border-radius:var(--radius-sm);
  background:var(--teal-dim);border:1px solid rgba(44,188,182,.12);
  display:flex;align-items:center;justify-content:center;color:var(--teal);
}
.cd-text strong{display:block;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:.15rem}
.cd-text a,.cd-text span{font-size:.92rem;color:var(--text-2);transition:color .2s}
.cd-text a:hover{color:var(--teal)}

.form-box{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:2rem;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1rem}
.form-group label{font-size:.78rem;font-weight:600;color:var(--text-3);letter-spacing:.04em;text-transform:uppercase}
.form-group input,.form-group select,.form-group textarea{
  background:var(--surface-3);border:1px solid var(--border-2);
  border-radius:var(--radius-sm);padding:.75rem 1rem;
  font-family:var(--font);font-size:.9rem;color:var(--text);
  transition:border-color .2s,box-shadow .2s;width:100%;
  -webkit-appearance:none;appearance:none;
}
.form-group select{
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232CBCB6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
  padding-right:2.5rem;cursor:pointer;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(44,188,182,.1);
}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-4)}
.form-group textarea{resize:vertical;min-height:120px;line-height:1.6}
.form-submit{
  width:100%;padding:.875rem;border-radius:var(--radius-full);
  background:linear-gradient(135deg,var(--teal),var(--teal-l));
  color:#fff;font-size:.9rem;font-weight:700;cursor:pointer;
  border:none;font-family:var(--font);
  transition:all .3s var(--ease);display:flex;align-items:center;justify-content:center;gap:.5rem;
  box-shadow:0 4px 20px rgba(44,188,182,.28);
}
.form-submit:hover{box-shadow:0 8px 32px rgba(44,188,182,.4);transform:translateY(-2px)}
.form-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.form-note{font-size:.75rem;color:var(--text-3);margin-top:.75rem;text-align:center}
.form-success{
  display:none;padding:1.25rem;border-radius:var(--radius-sm);
  background:rgba(44,188,182,.08);border:1px solid rgba(44,188,182,.2);
  color:var(--teal);font-size:.9rem;text-align:center;
}
.form-success.show{display:block}
.form-error{
  display:none;padding:1.25rem;border-radius:var(--radius-sm);
  background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.2);
  color:#f87171;font-size:.9rem;text-align:center;
}
.form-error.show{display:block}

[data-theme="light"] .form-group input,[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea{
  background:var(--surface);border-color:rgba(15,23,42,.1);color:var(--text);
}
[data-theme="light"] .form-box{background:var(--surface);box-shadow:0 2px 12px rgba(15,23,42,.06)}
[data-theme="light"] .form-group input::placeholder,[data-theme="light"] .form-group textarea::placeholder{color:#94a3b8}

/* ── PARTNER ECOSYSTEM ────────────────────────────────────── */
.partner-types{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:2.5rem;
}
.pt-card{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.5rem;transition:all .3s var(--ease);cursor:default;
}
.pt-card:hover{border-color:rgba(44,188,182,.2);transform:translateY(-3px)}
.pt-card-icon{
  width:44px;height:44px;border-radius:var(--radius-sm);
  background:var(--teal-dim);border:1px solid rgba(44,188,182,.12);
  display:flex;align-items:center;justify-content:center;
  color:var(--teal);margin-bottom:1rem;
}
.pt-card-icon-orange{background:var(--orange-dim);border-color:rgba(242,145,0,.12);color:var(--orange)}
.pt-card h3{font-size:.95rem;font-weight:600;color:var(--text);margin-bottom:.5rem}
.pt-card p{font-size:.84rem;color:var(--text-2);line-height:1.6}

/* ── INSIGHTS / BLOG ──────────────────────────────────────── */
.insights-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;
}
.insight-card{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:all .35s var(--ease);display:flex;flex-direction:column;
}
.insight-card:hover{border-color:rgba(44,188,182,.2);transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(0,0,0,.25)}
.ic-thumb{
  aspect-ratio:16/9;background:var(--surface-3);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
}
.ic-thumb-inner{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--surface-2),var(--surface-3));
}
.ic-thumb-icon{color:var(--teal);opacity:.4}
.ic-body{padding:1.5rem;flex:1;display:flex;flex-direction:column}
.ic-cat{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--teal);margin-bottom:.6rem;
}
.ic-title{
  font-size:1rem;font-weight:600;color:var(--text);line-height:1.4;
  margin-bottom:.65rem;transition:color .2s;
}
.insight-card:hover .ic-title{color:var(--teal)}
.ic-excerpt{font-size:.85rem;color:var(--text-2);line-height:1.6;flex:1;margin-bottom:1rem}
.ic-meta{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.75rem;color:var(--text-3);padding-top:.75rem;
  border-top:1px solid var(--border);
}
.ic-read{
  font-size:.78rem;font-weight:600;color:var(--teal);
  display:flex;align-items:center;gap:.3rem;transition:gap .2s;
}
.insight-card:hover .ic-read{gap:.5rem}

/* ── ARTICLE PAGE ─────────────────────────────────────────── */
.article-wrap{display:grid;grid-template-columns:1fr 300px;gap:3rem;align-items:start}
.article-body h2{font-family:var(--font-d);font-size:1.4rem;font-weight:700;color:var(--text);margin:2rem 0 .85rem;letter-spacing:-.02em}
.article-body h3{font-size:1.1rem;font-weight:600;color:var(--text);margin:1.5rem 0 .65rem}
.article-body p{font-size:.95rem;color:var(--text-2);line-height:1.8;margin-bottom:1rem}
.article-body ul,.article-body ol{margin:1rem 0 1rem 1.5rem;color:var(--text-2);font-size:.95rem;line-height:1.75}
.article-body li{margin-bottom:.4rem}
.article-body blockquote{
  border-left:3px solid var(--teal);padding:.75rem 1.25rem;margin:1.5rem 0;
  background:var(--teal-dim);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-style:italic;color:var(--text-2);
}
.article-sidebar{position:sticky;top:calc(var(--nav-h) + 1.5rem)}
.sidebar-box{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.5rem;margin-bottom:1.25rem;
}
.sidebar-box h4{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);margin-bottom:1rem}
.sidebar-links{display:flex;flex-direction:column;gap:.4rem}
.sidebar-links a{font-size:.85rem;color:var(--text-2);padding:.35rem 0;border-bottom:1px solid var(--border);transition:color .2s}
.sidebar-links a:hover{color:var(--teal)}
.sidebar-links a:last-child{border-bottom:none}

/* ── CASE STUDY CARDS ─────────────────────────────────────── */
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem}
.case-card{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:2rem;
  transition:all .3s var(--ease);position:relative;overflow:hidden;
}
.case-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--teal),var(--orange));
}
.case-card:hover{border-color:rgba(44,188,182,.2);transform:translateY(-3px)}
.cc-industry{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:.85rem}
.cc-label{display:inline-block;padding:.2rem .6rem;border-radius:4px;background:var(--teal-dim);color:var(--teal);font-size:.7rem;font-weight:600;margin-bottom:.65rem}
.case-card h3{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:.5rem;line-height:1.4}
.case-card p{font-size:.88rem;color:var(--text-2);line-height:1.65;margin-bottom:.75rem}
.cc-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
.cc-tag{font-size:.72rem;padding:.2rem .55rem;border-radius:4px;background:var(--surface-3);color:var(--text-3);border:1px solid var(--border)}

/* ── TRUST SECTION ────────────────────────────────────────── */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.trust-item{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.75rem 1.5rem;transition:all .3s var(--ease);
  display:flex;flex-direction:column;gap:.75rem;
}
.trust-item:hover{
  border-color:rgba(44,188,182,.2);
  box-shadow:0 8px 32px rgba(44,188,182,.06);
  transform:translateY(-3px);
}
.trust-icon{
  width:44px;height:44px;flex-shrink:0;
  border-radius:var(--radius-sm);background:var(--teal-dim);
  border:1px solid rgba(44,188,182,.12);
  display:flex;align-items:center;justify-content:center;color:var(--teal);
}
.trust-item h4{
  font-size:.95rem;font-weight:600;color:var(--text);
  line-height:1.3;margin:0;
}
.trust-item p{
  font-size:.85rem;color:var(--text-2);line-height:1.65;margin:0;flex:1;
}

/* ── PARTNER CRITERIA LIST ────────────────────────────────── */
/* Horizontal icon + text items used inside a card (partner page) */
.criteria-list{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem}
.criteria-item{
  display:flex;align-items:flex-start;gap:.9rem;
  padding:.9rem 1rem;border-radius:var(--radius-sm);
  background:var(--surface-3);border:1px solid var(--border);
  transition:border-color .2s;
}
.criteria-item:hover{border-color:rgba(44,188,182,.2)}
.criteria-icon{
  width:32px;height:32px;flex-shrink:0;border-radius:6px;
  background:var(--teal-dim);border:1px solid rgba(44,188,182,.12);
  display:flex;align-items:center;justify-content:center;color:var(--teal);
  margin-top:.05rem;
}
.criteria-item p{font-size:.9rem;color:var(--text-2);line-height:1.65;margin:0}
.criteria-item strong{color:var(--text);font-weight:600}

/* ── INSIGHT CARD IMAGE (real photo support) ──────────────── */
a.ic-thumb{text-decoration:none;display:block}
.ic-thumb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);display:block;z-index:1;
}
/* Hide the SVG fallback when the real image loads */
.ic-thumb:has(img) .ic-thumb-fallback{display:none}
/* When image errors, onerror adds ic-thumb--placeholder; show fallback */
.ic-thumb.ic-thumb--placeholder .ic-thumb-fallback{display:flex}
.ic-thumb-fallback{position:absolute;inset:0;z-index:0}
.insight-card:hover .ic-thumb img{transform:scale(1.04)}

/* Article featured image */
.article-featured-img{
  width:100%;aspect-ratio:16/9;border-radius:var(--radius);
  overflow:hidden;margin-bottom:2rem;border:1px solid var(--border);
}
.article-featured-img img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* ── INDUSTRIES SECTION ───────────────────────────────────── */
.ind-grid{display:flex;flex-wrap:wrap;gap:.65rem}
.ind-chip{
  padding:.45rem 1rem;border-radius:var(--radius-full);
  font-size:.82rem;font-weight:500;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--border);
  transition:all .25s var(--ease);cursor:default;
}
.ind-chip:hover{background:var(--teal-dim);border-color:var(--teal);color:var(--teal)}

/* ── 404 PAGE ─────────────────────────────────────────────── */
.not-found{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:2rem;
}
.nf-code{
  font-family:var(--font-d);font-size:clamp(5rem,18vw,10rem);font-weight:800;
  line-height:1;letter-spacing:-.04em;
  background:linear-gradient(135deg,var(--teal),var(--orange));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:.5rem;
}
.nf-title{font-family:var(--font-d);font-size:clamp(1.2rem,3vw,1.8rem);font-weight:600;color:var(--text);margin-bottom:.75rem}
.nf-desc{color:var(--text-2);max-width:460px;margin:0 auto 2rem;line-height:1.7;font-size:.95rem}
.nf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.65rem;margin-top:1.5rem}
.nf-link{
  padding:.5rem 1rem;border-radius:var(--radius-full);border:1px solid var(--border-2);
  color:var(--text-2);font-size:.85rem;transition:all .2s;
}
.nf-link:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-dim)}

/* ── REVEAL ANIMATIONS ────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.visible{opacity:1;transform:none}

/* ── HIGHLIGHT BOX ────────────────────────────────────────── */
.highlight-box{
  background:linear-gradient(135deg,rgba(44,188,182,.06),rgba(242,145,0,.04));
  border:1px solid rgba(44,188,182,.12);border-radius:var(--radius);
  padding:1.5rem 2rem;margin:2rem 0;
}
.highlight-box p{font-size:.95rem;color:var(--text-2);line-height:1.75;margin:0}
.highlight-box strong{color:var(--teal)}

/* ── SECTION DIVIDER ──────────────────────────────────────── */
.sec-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-2) 20%,var(--border-2) 80%,transparent);margin:0}

/* ── SUBPAGE FIXES ────────────────────────────────────────── */
/* First section after page-hero: suppress the top divider line */
.page-hero + .section::before{display:none}

/* ── PAGE HERO TEXT: prevent overlap with right-side deco widgets ── */
/* Widgets sit at right:4% width≈300px — at 1180px container, 75% = 885px,
   widget starts at ~952px → safe 67px gap. h1 kept at 680px for tight layout. */
@media(min-width:900px){
  .page-hero .container>h1{max-width:680px}
  /* Description: 75% of container = wide, readable, safely clear of widget */
  .page-hero .container>p,.page-hero-desc{
    max-width:75%;
    text-align:justify;
    hyphens:auto;
    -webkit-hyphens:auto;
  }
  .page-hero .container>.page-hero-ctas,
  .page-hero .container>.hero-ctas{max-width:680px}
  .page-hero .container>.breadcrumb{max-width:none} /* breadcrumb stays full */
}

/* Two-column grid used on About and other subpages */
.two-col-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;
}
@media(max-width:768px){.two-col-grid{grid-template-columns:1fr;gap:2rem}}

/* Stat panel used on About page */
.stat-panel{
  display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:2rem;
}
.stat-block{text-align:center;padding:1rem;border-radius:var(--radius-sm);background:var(--surface-3)}
.stat-num{
  font-family:var(--font-d);font-size:2rem;font-weight:800;
  background:linear-gradient(135deg,var(--teal),var(--orange));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1;margin-bottom:.35rem;
}
.stat-label{font-size:.78rem;color:var(--text-3);font-weight:500;letter-spacing:.04em;text-transform:uppercase}

/* Industry grid (platforms grid) */
.industry-grid{display:flex;flex-wrap:wrap;gap:.65rem}
.industry-chip{
  padding:.45rem 1rem;border-radius:var(--radius-full);
  font-size:.82rem;font-weight:500;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--border);
  transition:all .25s var(--ease);cursor:default;
}
.industry-chip:hover{background:var(--teal-dim);border-color:var(--teal);color:var(--teal)}

/* Contact info panel (sidebar for contact/partner pages) */
.contact-info-panel{
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:2rem;
}
.contact-info-panel h3{font-family:var(--font-d);font-size:1.2rem;font-weight:700;color:var(--text);margin-bottom:1rem}
.contact-info-panel p{font-size:.9rem;color:var(--text-2);line-height:1.7;margin-bottom:1.25rem}
.cip-item{display:flex;align-items:flex-start;gap:.85rem;margin-bottom:1.1rem}
.cip-icon{
  width:38px;height:38px;flex-shrink:0;border-radius:var(--radius-sm);
  background:var(--teal-dim);border:1px solid rgba(44,188,182,.12);
  display:flex;align-items:center;justify-content:center;color:var(--teal)
}
.cip-text strong{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:.2rem}
.cip-text a,.cip-text span{font-size:.9rem;color:var(--text-2);transition:color .2s}
.cip-text a:hover{color:var(--teal)}

/* Nepal badge (About page) */
.nepal-badge-wrap{
  display:flex;flex-direction:column;
  align-items:stretch;gap:1rem;
  margin-top:0;
}
.nepal-badge{
  display:flex;align-items:center;gap:1rem;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.1rem 1.25rem;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.nepal-badge:hover{
  border-color:rgba(44,188,182,.2);
  box-shadow:0 4px 20px rgba(44,188,182,.06);
}
.nepal-badge svg{flex-shrink:0;width:28px;height:28px;}
.nepal-badge>div{flex:1}
.nepal-badge strong{
  display:block;font-size:.9rem;font-weight:600;
  color:var(--teal);margin-bottom:.2rem;line-height:1.3;
}
.nepal-badge p{
  font-size:.83rem;color:var(--text-2);line-height:1.5;margin:0;
  text-align:left!important;hyphens:none!important;
}

/* Feature list inside cards (VAPT page) */
.feature-list{list-style:none;padding:0;margin:.75rem 0 0;display:flex;flex-direction:column;gap:.5rem}
.feature-list li{font-size:.82rem;color:var(--text-2);display:flex;align-items:flex-start;gap:.5rem;line-height:1.45}
.feature-list li::before{
  content:'';flex-shrink:0;width:14px;height:14px;margin-top:2px;
  border-radius:50%;background:var(--teal-dim);
  border:1px solid rgba(44,188,182,.25);
  background-image:url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%232CBCB6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:8px;background-repeat:no-repeat;background-position:center;
}

/* ── INDUSTRY TAG (VAPT / service pages) ───────────────────── */
.industry-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.45rem 1rem;border-radius:var(--radius-full);
  font-size:.8rem;font-weight:500;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--border);
  transition:all .22s var(--ease);cursor:default;
}
.industry-tag svg{flex-shrink:0;color:var(--teal);opacity:.7;transition:opacity .2s}
.industry-tag:hover{background:var(--teal-dim);border-color:rgba(44,188,182,.3);color:var(--teal)}
.industry-tag:hover svg{opacity:1}

/* ── INFO CARD (VAPT "What is VAPT" panel) ─────────────────── */
.info-card{
  display:flex;align-items:flex-start;gap:1rem;
  padding:1.1rem 1.25rem;border-radius:var(--radius);
  background:var(--surface-2);border:1px solid var(--border);
  transition:border-color .2s;
}
.info-card:hover{border-color:rgba(44,188,182,.25)}
.info-card svg{flex-shrink:0;margin-top:2px}
.info-card strong{display:block;font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:.25rem}
.info-card p{font-size:.82rem;color:var(--text-2);line-height:1.55;margin:0}
.vapt-stat-panel{display:flex;flex-direction:column;gap:.85rem;justify-content:center}

/* ── VAPT THREAT STRIP (hero stat bar) ─────────────────────── */
.vapt-threat-strip{
  display:flex;align-items:center;gap:2rem;flex-wrap:wrap;
  margin-top:2.5rem;padding:1.25rem 1.5rem;
  border-radius:var(--radius);
  background:rgba(44,188,182,.04);
  border:1px solid rgba(44,188,182,.12);
  border-left:3px solid var(--teal);
}
.vts-item{display:flex;align-items:baseline;gap:.65rem}
.vts-num{
  font-family:var(--font-d);font-size:1.25rem;font-weight:700;
  color:var(--teal);letter-spacing:-.02em;white-space:nowrap;flex-shrink:0;
}
.vts-label{font-size:.78rem;color:var(--text-3);line-height:1.4;max-width:160px}
.vts-sep{width:1px;height:32px;background:var(--border);flex-shrink:0}

/* Light theme overrides for subpage components */
[data-theme="light"] .stat-panel{background:var(--surface);box-shadow:0 2px 12px rgba(15,23,42,.05)}
[data-theme="light"] .stat-block{background:var(--surface-2)}
[data-theme="light"] .contact-info-panel{background:var(--surface);box-shadow:0 2px 12px rgba(15,23,42,.05)}
[data-theme="light"] .industry-chip{background:var(--surface);box-shadow:0 1px 3px rgba(15,23,42,.04)}
[data-theme="light"] .info-card{background:var(--surface);box-shadow:0 1px 4px rgba(15,23,42,.05)}
[data-theme="light"] .industry-tag{background:var(--surface);box-shadow:0 1px 3px rgba(15,23,42,.04)}
[data-theme="light"] .vapt-threat-strip{background:rgba(13,148,136,.04);border-color:rgba(13,148,136,.15);border-left-color:#0d9488}

/* ══ RESPONSIVE ═══════════════════════════════════════════ */
@media(max-width:1024px){
  .service-intro{grid-template-columns:1fr;gap:2rem}
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .partner-types{grid-template-columns:repeat(2,1fr)}
  .article-wrap{grid-template-columns:1fr;gap:2rem}
  .article-sidebar{position:static}
}
@media(max-width:768px){
  .cards-3,.cards-2{grid-template-columns:1fr}
  .case-grid{grid-template-columns:1fr}
  .insights-grid{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr;gap:2rem}
  .form-row{grid-template-columns:1fr}
  .partner-types{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .cta-btns{flex-direction:column;align-items:center}
  .page-hero-ctas{flex-direction:column;align-items:flex-start}
  .steps-grid{grid-template-columns:1fr 1fr}
  .drop-menu{left:0;transform:translateX(0)}
  .nl-drop:hover .drop-menu,.nl-drop.open .drop-menu{transform:translateX(0) translateY(0)}
}
@media(max-width:480px){
  .trust-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .cards-4{grid-template-columns:1fr}
  .vapt-threat-strip{gap:1.25rem;flex-direction:column;align-items:flex-start}
  .vts-sep{width:100%;height:1px}
}

/* ── PAGE AMBIENT ANIMATIONS, floating orbs per page ── */
.page-ambient{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:0;animation:orb-float 12s ease-in-out infinite alternate;}
.orb-teal{background:radial-gradient(circle,rgba(44,188,182,.75),transparent 70%);width:560px;height:560px;}
.orb-orange{background:radial-gradient(circle,rgba(242,145,0,.65),transparent 70%);width:440px;height:440px;}
.orb-purple{background:radial-gradient(circle,rgba(139,92,246,.55),transparent 70%);width:380px;height:380px;}
.orb-1{top:-10%;left:-5%;animation-delay:0s;}
.orb-2{bottom:-15%;right:-5%;animation-delay:-4s;animation-duration:18s;animation-name:orb-drift;}
.orb-3{top:40%;left:60%;animation-delay:-8s;animation-duration:15s;}

@keyframes orb-float{
  0%  {opacity:.12;transform:translate(0,0) scale(1)}
  40% {opacity:.22;transform:translate(20px,-30px) scale(1.12)}
  100%{opacity:.15;transform:translate(35px,-50px) scale(1.18)}
}
@keyframes orb-drift{
  0%  {opacity:.10;transform:translate(0,0) scale(1)}
  30% {opacity:.20;transform:translate(-25px,20px) scale(1.08)}
  70% {opacity:.15;transform:translate(15px,-35px) scale(.95)}
  100%{opacity:.12;transform:translate(-10px,15px) scale(1.05)}
}
/* Light theme: orbs much more visible via color + opacity boost */
[data-theme="light"] .orb-teal{background:radial-gradient(circle,rgba(13,148,136,.4),transparent 70%)}
[data-theme="light"] .orb-orange{background:radial-gradient(circle,rgba(234,88,12,.3),transparent 70%)}
[data-theme="light"] .orb-purple{background:radial-gradient(circle,rgba(124,58,237,.2),transparent 70%)}
[data-theme="light"] .orb{filter:blur(120px)}

/* ── NEW SERVICE PAGE HERO BACKGROUNDS ────────────────────── */
.hero-training .page-hero-bg{background-image:url('../images/training.jpg')}
.hero-appdev   .page-hero-bg{background-image:url('../images/app-dev.jpg')}
.hero-secaudit .page-hero-bg{background-image:url('../images/security-audit.jpg')}
.hero-consult  .page-hero-bg{background-image:url('../images/consultation.jpg')}

/* ═══════════════════════════════════════════════════════════
   COLOR SPECIALIST ENHANCEMENT LAYER
   Vivid gradients · Animated borders · Colored glows · Variety
   ═══════════════════════════════════════════════════════════ */

/* ── GRADIENT UTILITY CLASSES ──────────────────────────────── */
/* Apply to any heading for iridescent teal→orange gradient text */
.gradient-sec-title{
  background:linear-gradient(135deg,var(--teal) 0%,var(--orange) 55%,var(--teal-l) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  display:inline-block;
}
[data-theme="light"] .gradient-sec-title{
  background:linear-gradient(135deg,#0d9488 0%,#ea580c 55%,#14b8a6 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* Subtle gradient for page hero titles (optional — add class to h1) */
.page-hero-title.gradient{
  background:linear-gradient(135deg,var(--text) 0%,var(--teal-l) 50%,var(--orange-l) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
[data-theme="light"] .page-hero-title.gradient{
  background:linear-gradient(135deg,#0f172a 0%,#0d9488 45%,#ea580c 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ── ENHANCED CTA SECTION ──────────────────────────────────── */
.cta-section{
  background:
    linear-gradient(135deg,rgba(44,188,182,.12) 0%,rgba(242,145,0,.09) 55%,rgba(139,92,246,.06) 100%);
  border-color:rgba(44,188,182,.22);
  box-shadow:
    0 0 80px rgba(44,188,182,.07) inset,
    0 0 50px rgba(242,145,0,.04) inset,
    0 4px 40px rgba(0,0,0,.18);
}
.cta-section::before{
  width:650px;height:280px;top:-100px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(44,188,182,.16) 0%,rgba(242,145,0,.08) 40%,transparent 70%);
  animation:cta-orb-pulse 5s ease-in-out infinite alternate;
}
@keyframes cta-orb-pulse{
  0%{opacity:.6;transform:translateX(-50%) scale(.95)}
  100%{opacity:1;transform:translateX(-50%) scale(1.2)}
}
/* Animated teal→orange shimmer line at the bottom */
.cta-section::after{
  content:'';position:absolute;bottom:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,var(--teal) 30%,var(--orange) 70%,transparent);
  background-size:200% 100%;
  animation:cta-line-flow 3.5s linear infinite;
}
@keyframes cta-line-flow{0%{background-position:0% 0%}100%{background-position:200% 0%}}
/* CTA heading: teal gradient accent */
.cta-section h2{
  background:linear-gradient(135deg,var(--text) 0%,var(--teal-l) 50%,var(--orange-l) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
[data-theme="light"] .cta-section{
  background:linear-gradient(135deg,rgba(13,148,136,.1) 0%,rgba(234,88,12,.07) 55%,rgba(124,58,237,.05) 100%);
  border-color:rgba(13,148,136,.25);
  box-shadow:0 0 60px rgba(13,148,136,.06) inset,0 4px 30px rgba(15,23,42,.07);
}
[data-theme="light"] .cta-section h2{
  background:linear-gradient(135deg,#0f172a 0%,#0d9488 50%,#ea580c 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ── CARD PURPLE VARIANT ────────────────────────────────────── */
.card-purple{border-top:2px solid rgba(139,92,246,.7)}
.card-purple::after{
  content:'';position:absolute;top:0;left:0;right:0;height:40px;
  background:linear-gradient(180deg,rgba(139,92,246,.07),transparent);
  pointer-events:none;z-index:0;
}
.card-purple>*{position:relative;z-index:1}
.card-purple:hover{
  border-top-color:rgba(139,92,246,.9);
  box-shadow:0 16px 48px rgba(139,92,246,.14),0 0 0 1px rgba(139,92,246,.1),0 0 60px rgba(139,92,246,.06);
}
.card-icon-purple,.card-icon-wrap-purple{
  background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.15);
  color:rgba(139,92,246,.9);
}

/* ── STRONGER CARD HOVER GLOWS ─────────────────────────────── */
.card-teal:hover{
  box-shadow:0 16px 48px rgba(44,188,182,.2),0 0 0 1px rgba(44,188,182,.15),0 0 60px rgba(44,188,182,.08);
}
.card-orange:hover{
  box-shadow:0 16px 48px rgba(242,145,0,.18),0 0 0 1px rgba(242,145,0,.14),0 0 60px rgba(242,145,0,.07);
}

/* ── STEP NUMBER COLOR VARIETY (3-cycle rotation) ──────────── */
.steps-grid .step-item:nth-child(3n+2) .step-num{
  background:linear-gradient(135deg,var(--orange),rgba(139,92,246,1));
  -webkit-background-clip:text;background-clip:text;
}
.steps-grid .step-item:nth-child(3n+3) .step-num{
  background:linear-gradient(135deg,rgba(139,92,246,1),var(--teal));
  -webkit-background-clip:text;background-clip:text;
}
.steps-grid .step-item:nth-child(3n+2):hover{border-color:rgba(242,145,0,.25)}
.steps-grid .step-item:nth-child(3n+3):hover{border-color:rgba(139,92,246,.25)}

/* ── INSIGHT CARD BORDER VARIETY ───────────────────────────── */
.insight-card:nth-child(3n+1){border-top:2px solid rgba(44,188,182,.45)}
.insight-card:nth-child(3n+2){border-top:2px solid rgba(242,145,0,.4)}
.insight-card:nth-child(3n+3){border-top:2px solid rgba(139,92,246,.35)}
.insight-card:nth-child(3n+1):hover{box-shadow:0 16px 48px rgba(44,188,182,.12),0 0 0 1px rgba(44,188,182,.08)}
.insight-card:nth-child(3n+2):hover{box-shadow:0 16px 48px rgba(242,145,0,.1),0 0 0 1px rgba(242,145,0,.08)}
.insight-card:nth-child(3n+3):hover{box-shadow:0 16px 48px rgba(139,92,246,.1),0 0 0 1px rgba(139,92,246,.08)}
.insight-card:nth-child(3n+2):hover .ic-title{color:var(--orange)}
.insight-card:nth-child(3n+3):hover .ic-title{color:rgba(139,92,246,.9)}
.insight-card:nth-child(3n+2) .ic-cat{color:var(--orange)}
.insight-card:nth-child(3n+3) .ic-cat{color:rgba(139,92,246,.9)}

/* ── CASE CARD ALTERNATE GRADIENT DIRECTION ─────────────────── */
.case-grid .case-card:nth-child(2n)::before{
  background:linear-gradient(90deg,var(--orange),var(--teal));
}

/* ── TRUST ITEM ICON COLOR ROTATION ────────────────────────── */
.trust-grid .trust-item:nth-child(2) .trust-icon{
  background:var(--orange-dim);border-color:rgba(242,145,0,.12);color:var(--orange);
}
.trust-grid .trust-item:nth-child(3) .trust-icon{
  background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.12);color:rgba(139,92,246,.9);
}
.trust-grid .trust-item:nth-child(4) .trust-icon{
  background:linear-gradient(135deg,var(--teal-dim),var(--orange-dim));
  border-color:rgba(44,188,182,.1);color:var(--teal);
}

/* ── SECTION BACKGROUND ACCENT HELPERS ─────────────────────── */
/* Use on .section to add a subtle colored radial glow */
.section-teal-accent::before{display:none}
.section-teal-accent{
  background:
    radial-gradient(ellipse 60% 55% at 15% 50%,rgba(44,188,182,.045),transparent),
    var(--bg-2);
}
.section-orange-accent{
  background:
    radial-gradient(ellipse 55% 50% at 85% 50%,rgba(242,145,0,.04),transparent),
    var(--bg-2);
}
[data-theme="light"] .section-teal-accent{
  background:
    radial-gradient(ellipse 60% 55% at 15% 50%,rgba(13,148,136,.06),transparent),
    var(--bg-2);
}
[data-theme="light"] .section-orange-accent{
  background:
    radial-gradient(ellipse 55% 50% at 85% 50%,rgba(234,88,12,.05),transparent),
    var(--bg-2);
}

/* ── HIGHLIGHT BOX ORANGE VARIANT ──────────────────────────── */
.highlight-box-orange{
  background:linear-gradient(135deg,rgba(242,145,0,.07),rgba(44,188,182,.04));
  border:1px solid rgba(242,145,0,.18);border-radius:var(--radius);
  padding:1.5rem 2rem;margin:2rem 0;
}
.highlight-box-orange p{font-size:.95rem;color:var(--text-2);line-height:1.75;margin:0}
.highlight-box-orange strong{color:var(--orange)}
/* Purple variant */
.highlight-box-purple{
  background:linear-gradient(135deg,rgba(139,92,246,.07),rgba(44,188,182,.03));
  border:1px solid rgba(139,92,246,.15);border-radius:var(--radius);
  padding:1.5rem 2rem;margin:2rem 0;
}
.highlight-box-purple p{font-size:.95rem;color:var(--text-2);line-height:1.75;margin:0}
.highlight-box-purple strong{color:rgba(139,92,246,.9)}

/* ── PARTNER TYPE CARD COLOR ROTATION ──────────────────────── */
.partner-types .pt-card:nth-child(2) .pt-card-icon{
  background:var(--orange-dim);border-color:rgba(242,145,0,.12);color:var(--orange);
}
.partner-types .pt-card:nth-child(3) .pt-card-icon{
  background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.12);color:rgba(139,92,246,.9);
}

/* ── STRONGER SECTION GLOW ─────────────────────────────────── */
.section-glow::before{
  width:800px;height:400px;
  background:radial-gradient(ellipse,rgba(44,188,182,.09) 0%,rgba(242,145,0,.04) 50%,transparent 70%);
  animation:section-glow-pulse 6s ease-in-out infinite alternate;
}
@keyframes section-glow-pulse{
  0%{opacity:.7;transform:translateX(-50%) scale(.95)}
  100%{opacity:1;transform:translateX(-50%) scale(1.1)}
}

/* ── VAPT THREAT STRIP GLOW ────────────────────────────────── */
.vapt-threat-strip{
  background:rgba(44,188,182,.06);
  border-color:rgba(44,188,182,.18);
  box-shadow:0 0 30px rgba(44,188,182,.06) inset;
}
.vts-num{text-shadow:0 0 20px rgba(44,188,182,.3)}

/* ── FAQ ITEM HOVER IMPROVEMENTS ───────────────────────────── */
.faq-item:hover{border-color:rgba(44,188,182,.1)}
.faq-item.active{
  background:linear-gradient(135deg,rgba(44,188,182,.03),rgba(242,145,0,.015));
}

/* ── SERVICE STAT BOX ACCENT ───────────────────────────────── */
.service-stat-box{
  border-left:3px solid var(--teal);
  box-shadow:0 4px 24px rgba(0,0,0,.1),-4px 0 24px rgba(44,188,182,.06);
}
[data-theme="light"] .service-stat-box{
  box-shadow:0 4px 20px rgba(15,23,42,.06),-4px 0 20px rgba(13,148,136,.06);
}

/* ── BREADCRUMB ACCENT ─────────────────────────────────────── */
.breadcrumb .bc-current{
  background:var(--teal-dim);padding:.15rem .5rem;border-radius:var(--radius-full);
}

/* ── ARTICLE BLOCKQUOTE UPGRADE ────────────────────────────── */
.article-body blockquote{
  background:linear-gradient(135deg,rgba(44,188,182,.07),rgba(242,145,0,.04));
  border-left-color:var(--teal);
  box-shadow:-3px 0 20px rgba(44,188,182,.1);
}

/* ── CONTACT FORM SUBMIT PULSE GLOW ────────────────────────── */
.form-submit{
  position:relative;overflow:hidden;
  color:#040e0c; /* Dark text on light teal = high contrast */
}
.form-submit::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 25%,rgba(255,255,255,.08) 50%,transparent 75%);
  background-size:200% 100%;background-position:200% 0;
  transition:background-position .6s var(--ease);
}
.form-submit:hover::after{background-position:-200% 0}

/* ── PAGE HERO LABEL GLOW ──────────────────────────────────── */
.page-hero-label{
  background:rgba(44,188,182,.08);
  border:1px solid rgba(44,188,182,.18);
  border-radius:var(--radius-full);
  padding:.25rem .85rem .25rem .6rem;
}
[data-theme="light"] .page-hero-label{
  background:rgba(13,148,136,.07);
  border-color:rgba(13,148,136,.2);
}

/* ── CARD ICON ORANGE HOVER GLOW ───────────────────────────── */
.card:hover .card-icon-orange,.card:hover .card-icon-wrap-orange{
  box-shadow:0 0 16px rgba(242,145,0,.25);
}
.card:hover .card-icon,.card:hover .card-icon-wrap{
  box-shadow:0 0 16px rgba(44,188,182,.25);
}
.card:hover .card-icon-purple,.card:hover .card-icon-wrap-purple{
  box-shadow:0 0 16px rgba(139,92,246,.3);
}

/* ── STAT PANEL GRADIENT NUMBERS ───────────────────────────── */
.stat-block:nth-child(2) .stat-num{
  background:linear-gradient(135deg,var(--orange),var(--teal));
  -webkit-background-clip:text;background-clip:text;
}
.stat-block:nth-child(3) .stat-num{
  background:linear-gradient(135deg,rgba(139,92,246,1),var(--orange));
  -webkit-background-clip:text;background-clip:text;
}
.stat-block:nth-child(4) .stat-num{
  background:linear-gradient(135deg,var(--teal-l),rgba(139,92,246,1));
  -webkit-background-clip:text;background-clip:text;
}

/* ── LIGHT THEME: ENHANCED CARD ACCENTS ────────────────────── */
[data-theme="light"] .card-teal{border-top-color:rgba(13,148,136,.8)}
[data-theme="light"] .card-orange{border-top-color:rgba(234,88,12,.75)}
[data-theme="light"] .card-purple{border-top-color:rgba(124,58,237,.65)}
[data-theme="light"] .card-teal:hover{box-shadow:0 12px 40px rgba(13,148,136,.14),0 0 0 1px rgba(13,148,136,.1)}
[data-theme="light"] .card-orange:hover{box-shadow:0 12px 40px rgba(234,88,12,.12),0 0 0 1px rgba(234,88,12,.08)}
[data-theme="light"] .faq-item.active{background:linear-gradient(135deg,rgba(13,148,136,.04),rgba(234,88,12,.02))}

/* ── LIGHT THEME: INSIGHT CARD BORDERS ─────────────────────── */
[data-theme="light"] .insight-card:nth-child(3n+1){border-top-color:rgba(13,148,136,.55)}
[data-theme="light"] .insight-card:nth-child(3n+2){border-top-color:rgba(234,88,12,.5)}
[data-theme="light"] .insight-card:nth-child(3n+3){border-top-color:rgba(124,58,237,.45)}
[data-theme="light"] .insight-card:nth-child(3n+2):hover .ic-title{color:#ea580c}
[data-theme="light"] .insight-card:nth-child(3n+3):hover .ic-title{color:#7c3aed}
[data-theme="light"] .insight-card:nth-child(3n+2) .ic-cat{color:#ea580c}
[data-theme="light"] .insight-card:nth-child(3n+3) .ic-cat{color:#7c3aed}
[data-theme="light"] .vapt-threat-strip{box-shadow:0 0 24px rgba(13,148,136,.06) inset}
[data-theme="light"] .vts-num{text-shadow:0 0 16px rgba(13,148,136,.2)}
[data-theme="light"] .service-stat-box{border-left-color:#0d9488}
[data-theme="light"] .breadcrumb .bc-current{background:rgba(13,148,136,.08)}

/* ══ MOBILE: CLEAN HERO — hide all decorative widgets ═══════════
   JS also skips creating them (isMobile check), so this is a
   double-safety: catches resize events, large tablets, and any
   edge case. Widgets only render on ≥ 1024 px true desktops.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:1023px){

  /* All JS-injected right-side decorative hero elements */
  .v-radar-wrap,       /* VAPT radar rings        */
  .orbit-wrap,         /* Training orbiting certs */
  .p-orbit-wrap,       /* Partners orbit rings    */
  .svc-wheel,          /* Services rotating wheel */
  .about-term,         /* About terminal block    */
  .consult-q,          /* Consultation typewriter */
  .code-bg,            /* App dev code block      */
  .g-chart,            /* Growth bar chart        */
  .ins-float,          /* Insights category tags  */
  .sa-check,           /* Sec-audit checklist     */
  .sa-beam,            /* Sec-audit scan line     */
  .hex-f,              /* Cloud floating hexagons */
  .page-hero canvas,   /* AI / Cyber / Contact canvas */
  .v-target,           /* VAPT crosshair cursor   */
  .page-hero-deco      /* Large SVG deco icon     */
  { display:none !important; }

  /* Hero text: no widget on tablet/mobile, so text can breathe */
  .page-hero .container > h1,
  .page-hero .container > .page-hero-ctas,
  .page-hero .container > .hero-ctas{max-width:100% !important;}
  /* Description keeps 75% on tablet for visual elegance */
  .page-hero .container > p,
  .page-hero-desc{max-width:75% !important;}

  /* Tighten hero padding on tablet */
  .page-hero{padding-top:calc(var(--nav-h) + 2.5rem);padding-bottom:3rem}
}

/* Phones: slightly less padding, ensure title text is readable */
@media(max-width:600px){
  .page-hero{padding-top:calc(var(--nav-h) + 2rem);padding-bottom:2rem}

  /* Hero heading: scale up slightly so it fills the screen nicely */
  .page-hero .container > h1,
  .page-hero-title{
    font-size:clamp(1.75rem,8vw,2.4rem) !important;
    line-height:1.18;
  }

  /* Sub-text legible, not cramped; full width on phones */
  .page-hero .container > p,
  .page-hero-desc{font-size:.95rem !important;line-height:1.7;max-width:100% !important;}

  /* Label pill: smaller so it doesn't crowd */
  .page-hero-label{font-size:.66rem;padding:.2rem .7rem .2rem .5rem}

  /* CTA buttons stack cleanly */
  .page-hero-ctas,.hero-ctas{
    flex-direction:column !important;
    align-items:flex-start;
    gap:.6rem;
  }
}