/* ================================================================
   Veegent Technologies — Main Stylesheet (Rebuilt)
   Brand palette:
   --color-primary-blue:     #1E40AF  (CTAs, buttons, links, headers)
   --color-secondary-purple: #6D28D9  (highlights, badges, accents)
   --color-orange:           #F97316  (callouts, warnings, emphasis)
   --color-yellow:           #FACC15  (notifications, highlights)
   --color-gold:             #D4AF37  (premium, pricing, awards)
   ================================================================ */

:root {
  --color-primary-blue:     #1E40AF;
  --color-secondary-purple: #6D28D9;
  --color-orange:           #F97316;
  --color-yellow:           #FACC15;
  --color-gold:             #D4AF37;
  --blue:   #1E40AF;
  --purple: #6D28D9;
  --orange: #F97316;
  --yellow: #FACC15;
  --gold:   #D4AF37;
  --dark:   #0f172a;
  --dark2:  #1e293b;
  --text:   #374151;
  --muted:  #6b7280;
  --border: #e5e7eb;
  --light:  #f8fafc;
  --radius:    .75rem;
  --radius-sm: .5rem;
  --shadow:    0 4px 24px rgba(0,0,0,.08);
  --shadow-md: 0 8px 36px rgba(0,0,0,.12);
  --trans:     .3s ease;
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--text);background:#fff;line-height:1.65}
h1,h2,h3,h4,h5,h6{font-family:'Sora','Inter',sans-serif;font-weight:700;line-height:1.25;color:var(--dark2)}
a{color:var(--blue);text-decoration:none;transition:color var(--trans)}
a:hover{color:var(--orange)}
img{display:block;max-width:100%}

/* ── Topbar ─────────────────────────────────────────────────── */
/* .topbar removed */
/* .social-icon removed */
/* .social-icon:hover removed */
/* .hover-orange removed */

/* ── Navbar ─────────────────────────────────────────────────── */
.main-navbar{background:var(--blue);padding:.8rem 0;box-shadow:0 2px 20px rgba(30,64,175,.35);z-index:1040}
.brand-text{font-family:'Sora',sans-serif;font-weight:800;font-size:1.65rem;color:#fff;letter-spacing:-.5px}
.brand-accent{color:var(--orange)}
.brand-sub{font-size:.58rem;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.45);line-height:1}
.main-navbar .nav-link{color:rgba(255,255,255,.88)!important;font-weight:500;font-size:.93rem;padding:.5rem 1rem!important;border-radius:var(--radius-sm);transition:all var(--trans);position:relative}
.main-navbar .nav-link::after{content:'';position:absolute;bottom:2px;left:1rem;right:1rem;height:2px;background:var(--orange);transform:scaleX(0);transition:transform var(--trans);border-radius:1px}
/* Only underline pure nav-links when active — NOT the CTA button */
.main-navbar .nav-link:not(.btn):hover::after,.main-navbar .nav-link:not(.btn).active::after{transform:scaleX(1)}
.main-navbar .nav-link:hover,.main-navbar .nav-link.active{color:#fff!important}
/* Services link: no orange underline (hover or active) */
.main-navbar .nav-link.nav-no-line::after{display:none!important}
/* CTA button active state: ring glow only */
.main-navbar .btn-primary-brand.active{box-shadow:0 0 0 3px rgba(249,115,22,.5),0 6px 20px rgba(249,115,22,.4)}
.mega-drop{border:none;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.18);padding:.4rem;min-width:230px;animation:dropIn .2s ease;overflow:visible!important;position:relative!important}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mega-drop .dropdown-item{border-radius:var(--radius-sm);padding:.6rem 1rem;font-size:.88rem;font-weight:500;transition:all var(--trans);color:var(--dark2)}
.mega-drop .dropdown-item:hover{background:var(--blue);color:#fff}.mega-drop .dropdown-item:hover i{color:#fff!important}
.btn-primary-brand{background:var(--orange);border:none;color:#fff;font-weight:600;border-radius:2rem;padding:.55rem 1.5rem;transition:all var(--trans);white-space:nowrap}
.btn-primary-brand:hover{background:#ea6c05;color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(249,115,22,.4)}
.flash-wrap{position:fixed;top:90px;right:20px;z-index:9999;min-width:300px;max-width:420px}

/* ── Hero ───────────────────────────────────────────────────── */
/* .svc-hero-bg (the Services-page hero) shares this exact rule so its
   padding, min-height and vertical centering always match the homepage
   hero pixel-for-pixel — see the negative-margin offset in services.html
   that cancels out .svc-detail's own padding so this can sit flush. */
.hero-section,.svc-hero-bg{background:linear-gradient(135deg,#060f1e 0%,#0c1f4a 45%,var(--blue) 100%);position:relative;overflow:hidden;padding:4.5rem 0 8rem}
@media(min-width:992px){
  /* Vertically center the hero row (text block + floating cards) inside the
     section, so the gap above the heading and the gap below the buttons are
     equal, instead of the content sitting pinned near the top. */
  .hero-section,.svc-hero-bg{min-height:calc(100vh - var(--nav-h, 62px));display:flex;align-items:center}
  .hero-section>.container-fluid,.svc-hero-bg>.container-fluid{width:100%}
}
.hero-bg-animation{position:absolute;inset:0;background:radial-gradient(ellipse 700px 500px at 75% 50%,rgba(109,40,217,.22) 0%,transparent 70%),radial-gradient(ellipse 400px 400px at 10% 80%,rgba(249,115,22,.1) 0%,transparent 70%);pointer-events:none}
.hero-h1{font-size:clamp(2.6rem,5.5vw,4.2rem);color:#fff;line-height:1.15;margin-bottom:.75rem}
.hero-sub{font-size:1.15rem;color:rgba(255,255,255,.72);font-weight:500;margin-bottom:.75rem}
.hero-desc{color:rgba(255,255,255,.6);font-size:.97rem;max-width:860px;line-height:1.75}
.gradient-text{background:linear-gradient(130deg,var(--orange) 0%,var(--yellow) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.badge-pill-outline{border:1.5px solid rgba(255,255,255,.28);color:rgba(255,255,255,.88);border-radius:2rem;padding:.3rem 1rem;font-size:.78rem;font-weight:600;display:inline-block;letter-spacing:.3px}
.trust-badge{color:rgba(255,255,255,.72);font-size:.85rem;font-weight:500;white-space:nowrap}
.hero-trust{max-width:530px;width:100%;justify-content:space-between!important}
@media (max-width:575px){.hero-trust{justify-content:flex-start!important}}
.min-vh-90{min-height:80vh}
.hero-wave{position:absolute;bottom:-2px;left:0;right:0}
.hero-wave svg{display:block;width:100%}
.hero-align-home{padding-left:0;transition:padding-left .15s ease}

/* ── Hero 3D visual ─────────────────────────────────────────────
   rings, evoking global network/cloud infrastructure) plus a service
   card for every one of Veegent's 7 offerings, each arranged in a
   circle around the globe and parked at its own translateZ depth.
   The whole .hero-3d-world tilts a few degrees toward the cursor
   (bound in main.js), so the globe and the cards — being at
   different depths — visibly shift against each other: real
   parallax, not a flat image. */
.hero-3d-stage{position:relative;width:460px;height:460px;flex:0 0 460px;perspective:1500px}
.hero-3d-world{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(0deg) rotateY(0deg);transition:transform .5s cubic-bezier(.22,.68,0,1.01);will-change:transform}

.hero-globe{position:absolute;top:50%;left:50%;width:190px;height:190px;margin:-95px 0 0 -95px;transform-style:preserve-3d;transform:translateZ(-6px)}
.hero-globe-core{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(125,211,252,.6),rgba(109,40,217,.4) 55%,rgba(12,31,74,.15) 100%);box-shadow:0 0 80px rgba(56,189,248,.35),inset 0 0 46px rgba(255,255,255,.14)}
.hero-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.26);transform-style:preserve-3d;transform:rotateX(72deg)}
.hero-ring-1{animation:ringspin 16s linear infinite}
.hero-ring-2{inset:-22px;border-color:rgba(249,115,22,.32);animation:ringspin 22s linear infinite reverse}
.hero-ring-3{inset:-44px;border-color:rgba(250,204,21,.28);animation:ringspin 30s linear infinite}
@keyframes ringspin{from{transform:rotateX(72deg) rotateZ(0deg)}to{transform:rotateX(72deg) rotateZ(360deg)}}

/* Uniform floating cards: same size and padding, one for each of the
   7 services, arranged evenly around the globe on a circle so the
   cluster reads as a "wheel" of offerings — each one additionally
   sits at its own --tz depth for the 3D parallax effect. */
.hero-card{position:absolute;width:108px;box-sizing:border-box;background:rgba(255,255,255,.1);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.22);border-radius:.85rem;padding:.85rem .6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:#fff;font-size:.72rem;font-weight:600;text-align:center;line-height:1.2;box-shadow:0 18px 30px -12px rgba(0,0,0,.45)}
.hero-card i{font-size:1.35rem!important}
.hero-card-1{top:17px;left:176px;background:rgba(250,204,21,.14);border-color:rgba(250,204,21,.35);animation:float1 3s ease-in-out infinite}
.hero-card-2{top:83px;left:313px;background:rgba(167,139,250,.16);border-color:rgba(167,139,250,.38);animation:float2 3.6s ease-in-out infinite .3s}
.hero-card-3{top:231px;left:347px;background:rgba(52,211,153,.16);border-color:rgba(52,211,153,.38);animation:float3 4s ease-in-out infinite .6s}
.hero-card-4{top:350px;left:252px;background:rgba(249,115,22,.16);border-color:rgba(249,115,22,.38);animation:float4 3.4s ease-in-out infinite .9s}
.hero-card-5{top:350px;left:100px;background:rgba(212,175,55,.16);border-color:rgba(212,175,55,.38);animation:float1 3.8s ease-in-out infinite 1.2s}
.hero-card-6{top:231px;left:5px;background:rgba(251,113,133,.16);border-color:rgba(251,113,133,.38);animation:float2 3.3s ease-in-out infinite 1.5s}
.hero-card-7{top:83px;left:39px;background:rgba(56,189,248,.18);border-color:rgba(56,189,248,.4);animation:float3 3.6s ease-in-out infinite 1.8s}
@keyframes float1{0%,100%{transform:translateZ(var(--tz,0)) translateY(0)}50%{transform:translateZ(var(--tz,0)) translateY(-12px)}}
@keyframes float2{0%,100%{transform:translateZ(var(--tz,0)) translateY(0)}50%{transform:translateZ(var(--tz,0)) translateY(-12px)}}
@keyframes float3{0%,100%{transform:translateZ(var(--tz,0)) translateY(0)}50%{transform:translateZ(var(--tz,0)) translateY(-12px)}}
@keyframes float4{0%,100%{transform:translateZ(var(--tz,0)) translateY(0)}50%{transform:translateZ(var(--tz,0)) translateY(-12px)}}
@media(prefers-reduced-motion:reduce){
  .hero-ring-1,.hero-ring-2,.hero-ring-3,.hero-card-1,.hero-card-2,.hero-card-3,.hero-card-4,.hero-card-5,.hero-card-6,.hero-card-7{animation:none}
  .hero-3d-world{transition:none}
}

.text-purple{color:var(--purple)!important}
.text-orange{color:var(--orange)!important}

/* ── Stats ──────────────────────────────────────────────────── */
/* Primary blue background for stats — blue used for CTAs/headers per spec */
.stats-section{background:var(--blue);padding:3.5rem 0}
.stat-card{padding:1.5rem 1rem}
.stat-num{font-size:2.8rem;font-weight:800;line-height:1;color:#fff;margin-bottom:.3rem}
.stat-label{color:rgba(255,255,255,.72);font-size:.82rem;font-weight:500}

/* ── Section Utilities ──────────────────────────────────────── */
.section-pad{padding:5.5rem 0}
.bg-light-blue{background:#f0f5ff}
.bg-gray{background:#f8fafc}
.section-label{font-size:.72rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:.5rem}
.section-title{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:1rem}
.section-sub{color:var(--muted);max-width:560px;margin:0 auto}
.section-header{max-width:620px;margin:0 auto}

/* ── Service Cards ──────────────────────────────────────────── */
.service-card{background:#fff;border-radius:var(--radius);padding:2rem;border:1.5px solid var(--border);box-shadow:var(--shadow);transition:transform var(--trans),box-shadow var(--trans),border-color var(--trans)}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--blue)}
.service-icon{width:62px;height:62px;border-radius:1rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1.25rem;transition:transform var(--trans)}
.service-card:hover .service-icon{transform:scale(1.08)}
.service-title{font-size:1.1rem;margin-bottom:.4rem}
.service-tagline{font-size:.87rem;margin-bottom:1rem;color:var(--muted)}
.service-link{font-size:.87rem;font-weight:600;color:var(--blue)}
.service-link:hover{color:var(--orange)}
.service-card-h{background:#fff;border-radius:var(--radius);padding:1.75rem 2rem;border:1.5px solid var(--border);box-shadow:var(--shadow);display:flex;gap:1.5rem;transition:transform var(--trans),box-shadow var(--trans)}
.service-card-h:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.service-icon-lg{width:72px;height:72px;border-radius:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.service-list{list-style:none;padding:0;margin:0}
.service-list li{padding:.22rem 0;font-size:.88rem;color:var(--muted)}
.service-list li::before{content:"→ ";color:var(--blue);font-weight:700}

/* ── Why / Feature Cards ────────────────────────────────────── */
.why-item{display:flex;align-items:center;margin-bottom:.8rem;font-weight:500}
.feature-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);padding:1.75rem;box-shadow:var(--shadow);transition:transform var(--trans),box-shadow var(--trans)}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.feature-icon{margin-bottom:.85rem}

/* ── Testimonials ───────────────────────────────────────────── */
.testi-card{background:#fff;border-radius:var(--radius);padding:1.75rem;border:1.5px solid var(--border);box-shadow:var(--shadow);transition:transform var(--trans),box-shadow var(--trans)}
.testi-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.testi-quote{color:var(--text);font-style:italic;font-size:.96rem;line-height:1.7;margin-bottom:1.25rem;margin-top:.5rem}
.testi-client{display:flex;align-items:center;gap:.75rem}
.testi-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.testi-stars{font-size:.82rem}
.testi-card-full{background:#fff;border-radius:var(--radius);padding:2rem;border:1.5px solid var(--border);box-shadow:var(--shadow)}
.testi-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.testi-avatar-lg{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;font-weight:800;font-size:1.4rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.testi-section{border-top:1px solid var(--border);padding-top:1rem;margin-top:1rem}
.testi-section-title{font-size:.78rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.4rem}

/* ── Blog Cards ─────────────────────────────────────────────── */
.blog-card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1.5px solid var(--border);box-shadow:var(--shadow);transition:transform var(--trans),box-shadow var(--trans)}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.blog-img{height:200px;overflow:hidden}
.blog-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--trans)}
.blog-card:hover .blog-img img{transform:scale(1.05)}
.blog-img-placeholder{display:flex;align-items:center;justify-content:center;background:#f0f5ff}
.blog-body{padding:1.35rem}
.blog-cat{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--blue);display:block;margin-bottom:.4rem}
.blog-title{font-size:1rem;margin-bottom:.5rem}
.blog-title a{color:var(--dark2);font-weight:700}
.blog-title a:hover{color:var(--blue)}
.blog-excerpt{color:var(--muted);font-size:.875rem;line-height:1.6;margin-bottom:.75rem}
.blog-content{font-size:1.05rem;line-height:1.85;color:var(--text)}
.blog-content h2{font-size:1.65rem;margin:2.25rem 0 1rem;color:var(--blue)}
.blog-content h3{font-size:1.3rem;margin:1.75rem 0 .75rem}
.blog-content p{margin-bottom:1.1rem}
.blog-content ul,.blog-content ol{padding-left:1.5rem;margin-bottom:1rem}
.blog-content li{margin-bottom:.4rem}
.blog-content blockquote{border-left:4px solid var(--blue);padding:1rem 1.5rem;color:var(--muted);font-style:italic;margin:1.75rem 0;background:#f0f5ff;border-radius:0 var(--radius) var(--radius) 0}

/* ── Sidebar + detail-panel layout (shared by /services and /industries) ──── */
/* --nav-h is set from the real navbar height by a tiny script in base.html (fallback 80px).
   The page scrolls as ONE page (no inner scrollbar). The dark sidebar grows to its full
   height and stretches alongside the content, so every service stays visible at any
   browser zoom and is never cut off by the footer. */
.svc-page { display:flex; align-items:stretch; min-height:calc(100vh - var(--nav-h, 80px)); background:#f4f7ff; width:100%; overflow-x:hidden; overflow-x:clip; }

.svc-tree {
  width:240px; min-width:240px; flex-shrink:0;
  padding:1.1rem .8rem 1.2rem .8rem;
  background:linear-gradient(160deg,#060f1e 0%,#0c1f4a 45%,#1e40af 100%);
  border-right:1px solid rgba(255,255,255,.08);
  overflow:visible; height:auto; position:relative;
  text-align:center; display:flex; flex-direction:column; justify-content:flex-start;
}
.svc-tree-heading { font-family:'Sora',sans-serif; font-size:1.1rem; font-weight:800; color:#fff; margin-bottom:.6rem; text-align:left; width:100%; box-sizing:border-box; }
.svc-tree-heading span { background:linear-gradient(130deg,#f97316 0%,#facc15 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.svc-main-label { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:.65rem; padding:.6rem .75rem; margin-bottom:.45rem; border-radius:13px; }
.svc-main-clickable { cursor:pointer; border:1px solid rgba(255,255,255,.1); width:100%; background:rgba(255,255,255,.06); backdrop-filter:blur(8px); transition:all .22s ease; text-align:left; position:relative; }
.svc-main-clickable:hover { background:rgba(255,255,255,.12); transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.26); border-color:rgba(255,255,255,.22); }
.svc-main-clickable.active { background:linear-gradient(135deg, rgba(249,115,22,.18), rgba(250,204,21,.1)); border-color:#f97316; box-shadow:0 0 0 1px rgba(249,115,22,.35), 0 8px 18px rgba(0,0,0,.28); }
.svc-main-icon { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:.85rem; transition:transform .22s; }
.svc-main-clickable:hover .svc-main-icon, .svc-main-clickable.active .svc-main-icon { transform:scale(1.1); }
.svc-main-title { font-size:.76rem; font-weight:800; color:#fff; white-space:normal; line-height:1.2; }
.svc-main-clickable.active .svc-main-title { color:#fbbf24; }

.svc-detail { flex:1; min-width:0; padding:2rem 2.5rem 4rem; overflow:visible; height:auto; min-height:calc(100vh - var(--nav-h, 80px)); background:#f4f7ff; }
.svc-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#cbd5e1; gap:1rem; }
.svc-empty i { font-size:3rem; opacity:.25; }
.svc-empty-title { font-size:1rem; font-weight:600; color:#94a3b8; }
.svc-empty-sub { font-size:.82rem; color:#cbd5e1; }

.panel-header-row { display:flex; align-items:center; gap:.85rem; margin-bottom:.6rem; }
.panel-main-icon { width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; box-shadow:0 6px 20px rgba(0,0,0,.1); }
.panel-name { font-family:'Sora',sans-serif; font-size:1.6rem; font-weight:800; color:#0f172a; line-height:1.2; margin-bottom:0; }
.panel-desc { font-size:.92rem; color:#475569; line-height:1.8; margin-bottom:1.5rem; max-width:600px; }
.panel-sec-title { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:#94a3b8; margin-bottom:.85rem; display:flex; align-items:center; gap:.6rem; }
.panel-sec-title::after { content:''; flex:1; height:1px; background:#e2e8f0; }

@media (max-width:768px) {
  .svc-page { flex-direction:column; align-items:stretch; }
  .svc-tree { width:100% !important; min-width:unset !important; height:auto; position:static; overflow:visible; border-right:none; border-bottom:1px solid #e2e8f0; padding:1.25rem 1rem; text-align:left !important; }
  .svc-tree-heading { font-size:1.5rem; text-align:left !important; margin-bottom:1rem; background:none !important; border:none !important; padding:0 !important; width:100%; box-sizing:border-box; }
  .svc-main-clickable { text-align:left; }
  .svc-detail { height:auto; min-height:0; padding:1.2rem 1rem 3rem; }
}

/* ── Industries: company grid shown in the detail panel ─────────────────── */
.ind-company-grid { display:grid; grid-template-columns:repeat(auto-fill, 108px); gap:.75rem; margin-bottom:1.8rem; justify-content:start; }
.ind-company-card { display:flex; align-items:center; gap:.75rem; background:#fff; border:1px solid #e8edf5; border-radius:13px; padding:.9rem 1.1rem; transition:box-shadow .18s, transform .18s; }
.ind-company-card:hover { box-shadow:0 6px 18px rgba(30,64,175,.1); transform:translateY(-2px); }
.ind-company-logo { width:44px; height:44px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:800; font-size:1rem; color:#fff; }
.ind-company-name { font-size:.86rem; font-weight:700; color:#0f172a; line-height:1.3; }
.ind-company-tag { font-size:.68rem; color:#94a3b8; font-weight:600; }

/* Logo-only client tile (no name / no CTA) — fixed, uniform size for every logo */
.ind-logo-tile { display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #e8edf5; border-radius:12px; width:108px; height:68px; padding:.5rem; overflow:hidden; transition:box-shadow .18s, transform .18s; }
.ind-logo-tile:hover { box-shadow:0 6px 18px rgba(30,64,175,.1); transform:translateY(-2px); }
.ind-logo-tile .ind-logo-img { display:block; max-width:100%; max-height:38px; width:auto; height:auto; object-fit:contain; }
.ind-logo-tile span { font-family:'Sora',sans-serif; font-weight:800; font-size:.95rem; }
.ind-logo-link { cursor:pointer; text-decoration:none; }
.ind-logo-link:hover { border-color:#f97316; box-shadow:0 6px 18px rgba(249,115,22,.18); transform:translateY(-2px); }
.ind-logo-link:focus-visible { outline:2px solid #f97316; outline-offset:2px; }


/* ── Contact ─────────────────────────────────────────────────── */
.contact-info-card{background:#fff;border-radius:var(--radius);padding:2rem;border:1.5px solid var(--border);box-shadow:var(--shadow);transition:transform var(--trans)}
.contact-info-card:hover{transform:translateY(-4px)}
.contact-icon{width:58px;height:58px;border-radius:1rem;display:flex;align-items:center;justify-content:center;margin:0 auto .85rem}
.contact-form-card{background:#fff;border-radius:var(--radius);padding:2.5rem;border:1.5px solid var(--border);box-shadow:var(--shadow)}

/* ── CTA Section ─────────────────────────────────────────────── */
/* Blue→Purple gradient per spec: blue=CTAs/headers, purple=highlights */
.cta-section{background:linear-gradient(135deg,var(--blue) 0%,var(--purple) 100%);padding:5.5rem 0;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.cta-title{font-size:clamp(1.8rem,3.5vw,2.6rem);color:#fff;margin-bottom:.75rem}
.cta-sub{color:rgba(255,255,255,.75);font-size:1.05rem;margin-bottom:2.25rem}
.cta-sidebar-card{background:linear-gradient(135deg,var(--blue),var(--purple));border-radius:var(--radius);padding:1.75rem}

/* ── Page Hero ───────────────────────────────────────────────── */
.page-hero{background:linear-gradient(135deg,#060f1e 0%,#0c1f4a 100%);padding:5rem 0;position:relative;overflow:hidden}
.page-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 600px 400px at 80% 50%,rgba(109,40,217,.18) 0%,transparent 70%);pointer-events:none}
.page-hero .container{position:relative;z-index:2}
.page-hero-title{font-size:clamp(2rem,4.5vw,3rem);color:#fff;margin-bottom:.5rem}
.page-hero-sub{color:rgba(255,255,255,.65);font-size:1.05rem;margin-top:.5rem}
.breadcrumb-item a{color:rgba(255,255,255,.55)}
.breadcrumb-item.active{color:rgba(255,255,255,.4)}
.breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.3)}

/* ── Misc ────────────────────────────────────────────────────── */
.offering-item{display:flex;align-items:center;background:#f0f5ff;border-radius:var(--radius-sm);padding:.65rem 1rem;font-size:.9rem;font-weight:500}
.offerings-grid{background:#f0f5ff;border-radius:var(--radius);padding:1.5rem 2rem}
.badge-cat{background:#e0e7ff;color:var(--blue);font-size:.7rem;font-weight:700;padding:.25rem .65rem;border-radius:999px;text-transform:uppercase;letter-spacing:.5px;display:inline-block}
.prose-content{max-width:820px;margin:0 auto;line-height:1.9}
.prose-content h3{margin:2.25rem 0 .75rem;font-size:1.25rem;font-weight:700;color:var(--blue);border-left:4px solid var(--orange);padding-left:.85rem}
.prose-content h3:first-of-type{margin-top:1.5rem}
.prose-content p{margin-bottom:1.1rem;color:var(--text)}
.prose-content ul{padding-left:1.5rem;margin-bottom:1.1rem}
.prose-content ul li{margin-bottom:.5rem;color:var(--text)}
.prose-content a{color:var(--blue);text-decoration:underline}
.prose-content a:hover{color:var(--orange)}
.prose-content .lead{font-size:1.1rem;color:#475569;border-left:4px solid var(--blue);padding:.75rem 1rem;background:#f0f5ff;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin-bottom:2rem}

/* ── Logo Sliders ────────────────────────────────────────────── */
.logo-section{overflow:hidden}
.logo-slider-wrap{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%)}
.logo-track{display:flex;align-items:center;width:max-content;gap:.75rem;padding:.5rem 0}
.partner-track{animation:scrollLeft 32s linear infinite}
.client-track-reverse{animation:scrollRight 42s linear infinite}
@keyframes scrollLeft{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes scrollRight{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
.logo-slider-wrap:hover .partner-track,.logo-slider-wrap:hover .client-track-reverse{animation-play-state:paused}
.logo-item{display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.07);padding:.7rem 1.5rem;min-width:140px;max-width:200px;height:88px;margin:0 .25rem;transition:box-shadow .3s ease,transform .3s ease}
.logo-item:hover{box-shadow:0 6px 24px rgba(30,64,175,.15);transform:translateY(-3px)}
.logo-item img{height:56px;width:auto;max-width:160px;object-fit:contain;filter:grayscale(20%) opacity(.88);transition:filter .35s ease}
.logo-item img:hover,.logo-item:hover img{filter:grayscale(0%) opacity(1)}
.client-track .logo-item img,.client-track-reverse .logo-item img{height:52px;max-width:150px}
.logo-item img[src$=".svg"]{height:48px;width:auto;max-width:150px}

/* ── Pagination ──────────────────────────────────────────────── */
.page-link{color:var(--blue);border-radius:var(--radius-sm);margin:0 .15rem;border-color:var(--border)}
.page-item.active .page-link{background:var(--blue);border-color:var(--blue)}
.page-link:hover{background:#eff6ff;color:var(--blue)}

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer{background:var(--dark)}
.footer-top{padding:4.5rem 0 2rem}
.footer-brand{font-family:'Sora',sans-serif;font-size:1.85rem;font-weight:800;color:#fff}
.footer-heading{font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:1.1rem}
.footer-links{list-style:none;padding:0}
.footer-links li{margin-bottom:.55rem}
.footer-links a{color:rgba(255,255,255,.55);font-size:.88rem;display:block;transition:all var(--trans)}
.footer-links a:hover{color:var(--orange);padding-left:5px}
.footer-contact-list{list-style:none;padding:0}
.footer-contact-list li{color:rgba(255,255,255,.55);font-size:.88rem;margin-bottom:.85rem;display:flex;gap:.5rem;align-items:flex-start}
.footer-contact-list a{color:rgba(255,255,255,.55)}
.footer-contact-list a:hover{color:var(--orange)}
.footer-social{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.07);display:inline-flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);font-size:.85rem;transition:all var(--trans)}
.footer-social:hover{background:var(--orange);color:#fff;transform:translateY(-2px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding:1.35rem 0}
.footer-bottom span,.footer-bottom span a{color:rgba(255,255,255,.55)!important}
.footer-bottom span a:hover{color:var(--orange)!important}

/* ── Back to top ─────────────────────────────────────────────── */
.back-to-top{position:fixed;bottom:28px;right:28px;width:48px;height:48px;border-radius:50%;background:var(--blue);color:#fff;display:none;align-items:center;justify-content:center;z-index:999;box-shadow:0 4px 16px rgba(30,64,175,.4);transition:all var(--trans)}
.back-to-top:hover{background:var(--orange);color:#fff;transform:translateY(-3px)}

/* ── Forms ───────────────────────────────────────────────────── */
.form-control,.form-select{border-radius:var(--radius-sm);border-color:var(--border);font-size:.95rem;transition:border-color var(--trans),box-shadow var(--trans)}
.form-control:focus,.form-select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,64,175,.13)}

/* Multi-select checkboxes */
.services-checkbox-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:.6rem;margin-top:.25rem}
.service-checkbox-item{display:flex;cursor:pointer;list-style:none}
.service-checkbox-item input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.service-checkbox-label{display:flex;align-items:center;gap:.65rem;width:100%;padding:.65rem 1rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.875rem;font-weight:500;color:var(--text);background:#fff;cursor:pointer;user-select:none;transition:all .2s ease}
.service-checkbox-label:hover{border-color:var(--blue);background:#eff6ff}
.check-icon{width:18px;height:18px;min-width:18px;border-radius:4px;border:1.5px solid #d1d5db;display:inline-flex;align-items:center;justify-content:center;font-size:.6rem;color:transparent;background:#fff;transition:all .2s ease}
.service-checkbox-item input[type="checkbox"]:checked+.service-checkbox-label{border-color:var(--blue);background:#eff6ff;color:var(--blue);font-weight:600}
.service-checkbox-item input[type="checkbox"]:checked+.service-checkbox-label .check-icon{background:var(--blue);border-color:var(--blue);color:#fff}
.service-checkbox-item input[type="checkbox"]:focus+.service-checkbox-label{outline:2px solid var(--blue);outline-offset:2px}

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:991.98px){
  .hero-section,.svc-hero-bg{padding:4rem 0 5.5rem}
  .section-pad{padding:3.75rem 0}
  .main-navbar .btn-primary-brand{margin-top:.75rem}
  .topbar{display:none!important}
  .logo-item{padding:.5rem 1rem;min-width:100px;height:70px;border-radius:8px}
  .logo-item img{height:40px;max-width:100px}
  .client-track .logo-item img,.client-track-reverse .logo-item img{height:36px;max-width:95px}
  .partner-track{animation-duration:22s}
  .client-track-reverse{animation-duration:30s}
}
@media(max-width:767.98px){
  .hero-h1{font-size:2.2rem}
  .cta-title{font-size:1.8rem}
  .page-hero-title{font-size:1.9rem}
  .services-checkbox-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:575.98px){
  .contact-form-card{padding:1.5rem}
  .hero-section,.svc-hero-bg{padding:3rem 0 4.5rem}
  .services-checkbox-grid{grid-template-columns:1fr}
}


/* ════════════════════════════════════════════════════════════════
   TOPBAR — Ticker + Contact bar
   ════════════════════════════════════════════════════════════════ */
.topbar-wrapper {
  position: sticky;
  top: 0;
  z-index: 1050;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

/* Scrolling ticker strip */
.topbar-ticker {
  background: linear-gradient(90deg, var(--blue) 0%, var(--purple) 50%, var(--blue) 100%);
  background-size: 200% 100%;
  animation: tickerBg 8s ease infinite;
  overflow: hidden;
  padding: .28rem 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .4px;
  color: #fff;
}
@keyframes tickerBg {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.ticker-inner {
  display: flex;
  width: max-content;
  animation: tickerScroll 28s linear infinite;
  white-space: nowrap;
  align-items: center;
  gap: 0;
}
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.topbar-ticker:hover .ticker-inner { animation-play-state: paused; }
.ticker-item { padding: 0 1.5rem; color: rgba(255,255,255,.92); }
.ticker-sep   { color: rgba(255,255,255,.35); font-size: .65rem; }

/* Contact bar below ticker */
.topbar-contact {
  background: var(--dark);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar-link {
  color: rgba(255,255,255,.65);
  font-size: .78rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: color .2s ease;
}
.topbar-link:hover { color: var(--orange); }
.topbar-link i { color: var(--orange); font-size: .72rem; }

.topbar-social {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6); font-size: .65rem;
  text-decoration: none; transition: all .25s ease;
}
.topbar-social:hover { background: var(--orange); color: #fff; transform: translateY(-2px); }

/* ════════════════════════════════════════════════════════════════
   FOOTER — Description text fix (was .text-muted = dark blue)
   ════════════════════════════════════════════════════════════════ */
.footer-brand-wrap { line-height: 1; }
.footer-brand {
  font-family: 'Sora', sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  color: #fff;
}
/* Navbar brand logo image */
.brand-logo-img {
  filter: brightness(0) invert(1);
  transition: transform .25s ease;
}
.navbar-brand:hover .brand-logo-img { transform: rotate(-8deg) scale(1.08); }

/* ✅ This was the dark/invisible text — now clearly white */
.footer-desc {
  color: rgba(255,255,255,.80) !important;
  font-size: .9rem;
  line-height: 1.75;
  margin-bottom: 0;
}

.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--orange);
  color: #fff !important;
  font-size: .82rem;
  font-weight: 600;
  padding: .5rem 1.1rem;
  border-radius: 2rem;
  text-decoration: none;
  transition: all .25s ease;
}
.footer-cta-btn:hover {
  background: #ea6c05;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(249,115,22,.4);
}

/* Footer bottom copy text — clearly visible */
.footer-copy { color: rgba(255,255,255,.5) !important; font-size: .8rem; }
.footer-copy-link { color: rgba(255,255,255,.5) !important; text-decoration: none; transition: color .2s ease; }
.footer-copy-link:hover { color: var(--orange) !important; }

/* Override Bootstrap .text-muted inside footer */
.site-footer .text-muted { color: rgba(255,255,255,.55) !important; }

/* Footer bottom bar — force light colors */
.footer-bottom span,
.footer-bottom a { color: rgba(255,255,255,.5) !important; }
.footer-bottom a:hover { color: var(--orange) !important; }

/* ════════════════════════════════════════════════════════════════
   NAVBAR — body top offset when topbar is present
   ════════════════════════════════════════════════════════════════ */
/* Adjust sticky nav position to sit below topbar */
#mainNav { top: 0; }

@media (max-width: 767.98px) {
  .topbar-contact { display: none !important; }
  .ticker-inner   { animation-duration: 18s; }
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE REFINEMENTS  (landing-page audit)
   Everything below is scoped to homepage-only classes
   (.hero-home, .stats-compact, .feature-card-sm, .partners-section,
   .why-section) so the shared hero used on the Services page is
   not affected.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero copy: 640px column, SEO H1 sized 52–64px on desktop ── */
.hero-home .hero-copy{max-width:640px}
.hero-home .hero-h1{line-height:1.15;letter-spacing:-.01em;margin-bottom:.9rem}
.hero-home .hero-tagline{font-family:'Sora','Inter',sans-serif;font-weight:700;font-size:1.15rem;margin-bottom:1rem}
.hero-home .hero-desc{color:rgba(255,255,255,.82);max-width:none;margin-bottom:.6rem}
.hero-home .hero-reach{font-size:.95rem;color:rgba(255,255,255,.62);margin-bottom:0}
.hero-home .btn-lg{padding:.7rem 1.6rem}

/* ── Hero visual: logo core + 5 cards (Cloud & Cybersecurity emphasised) ── */
.hero-home .hero-globe-logo{position:absolute;top:50%;left:50%;width:92px;height:92px;margin:-46px 0 0 -46px;object-fit:contain;pointer-events:none;transform:translateZ(8px);filter:brightness(0) invert(1) drop-shadow(0 0 14px rgba(125,211,252,.55))}
/* Pentagon layout around the core (card centres ≈175px from centre) */

/* ── Floating-card wheel: 10 services, shared by the homepage hero and the Services page hero ── */
.hero-home .hero-card,.svc-hero-default .hero-card{width:96px;padding:.7rem .4rem;font-size:.68rem}
.hero-home .hero-card i,.svc-hero-default .hero-card i{font-size:1.2rem!important}
.hero-card-8{background:rgba(20,184,166,.16);border-color:rgba(20,184,166,.4);animation:float2 3.5s ease-in-out infinite .4s}
.hero-card-9{background:rgba(232,121,249,.16);border-color:rgba(232,121,249,.4);animation:float3 3.9s ease-in-out infinite .8s}
.hero-card-10{background:rgba(96,165,250,.16);border-color:rgba(96,165,250,.4);animation:float4 3.7s ease-in-out infinite 1.1s}
.hero-home .hero-card-1,.svc-hero-default .hero-card-1{top:6px;left:182px}
.hero-home .hero-card-2,.svc-hero-default .hero-card-2{top:40px;left:288px}
.hero-home .hero-card-3,.svc-hero-default .hero-card-3{top:130px;left:353px}
.hero-home .hero-card-4,.svc-hero-default .hero-card-4{top:242px;left:353px}
.hero-home .hero-card-8,.svc-hero-default .hero-card-8{top:332px;left:288px}
.hero-home .hero-card-9,.svc-hero-default .hero-card-9{top:366px;left:182px}
.hero-home .hero-card-10,.svc-hero-default .hero-card-10{top:332px;left:76px}
.hero-home .hero-card-5,.svc-hero-default .hero-card-5{top:242px;left:11px}
.hero-home .hero-card-6,.svc-hero-default .hero-card-6{top:130px;left:11px}
.hero-home .hero-card-7,.svc-hero-default .hero-card-7{top:40px;left:76px}
@media (prefers-reduced-motion:reduce){.hero-card-8,.hero-card-9,.hero-card-10{animation:none}}

/* ── Hero visual on mobile / tablet: orb + 3 key categories ── */
.hero-mobile-visual{margin-top:2.25rem;display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.hero-orb-sm{position:relative;width:140px;height:140px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 34% 30%,rgba(125,211,252,.6),rgba(109,40,217,.4) 55%,rgba(12,31,74,.15) 100%);box-shadow:0 0 60px rgba(56,189,248,.3),inset 0 0 36px rgba(255,255,255,.14)}
.hero-orb-sm::before{content:'';position:absolute;inset:-14px;border-radius:50%;border:1.5px solid rgba(249,115,22,.32)}
.hero-orb-sm img{width:66px;height:66px;object-fit:contain;filter:brightness(0) invert(1)}
.hero-mobile-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.hero-mobile-pills li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:.82rem;font-weight:600;padding:.35rem .9rem;border-radius:2rem}

/* ── Stats: tighter spacing, clickable proof points ── */
.stats-section.stats-compact{padding:2.25rem 0}
.stats-compact .stat-card{padding:.5rem 1rem}
.stats-compact .stat-num{font-size:2.6rem}
a.stat-link{display:block;color:#fff;border-radius:var(--radius);transition:transform var(--trans),background var(--trans)}
a.stat-link:hover,a.stat-link:focus-visible{color:#fff;background:rgba(255,255,255,.08);transform:translateY(-3px)}
.stat-more{display:inline-block;margin-top:.4rem;font-size:.75rem;font-weight:600;color:rgba(255,255,255,.9);border-bottom:1px solid rgba(255,255,255,.4)}
a.stat-link:hover .stat-more{border-bottom-color:var(--orange)}

/* ── Who We Are: 6 compact cards, one icon colour (brand blue) ── */
.feature-card-sm{padding:1.25rem;border-top:3px solid var(--blue)}
.feature-icon-sm{width:42px;height:42px;border-radius:10px;background:#eff6ff;color:var(--blue);display:flex;align-items:center;justify-content:center}
.feature-card-sm h6{font-size:.9rem}
.feature-card-sm p{font-size:.8rem;line-height:1.5}

/* ── Technology Partners & Platforms: compact section, larger logos ── */
.partners-section{padding:3.25rem 0}
.partners-section .section-header{max-width:760px} /* keeps "Technology Partners & Platforms" on one line */
.partners-section .logo-item{min-width:170px;max-width:220px;height:96px;padding:.6rem 1.5rem}
.partners-section .logo-item img{height:68px;max-width:180px}
@media(max-width:991.98px){
  .partners-section{padding:2.5rem 0}
  .partners-section .logo-item{min-width:120px;height:78px;padding:.5rem 1rem}
  .partners-section .logo-item img{height:52px;max-width:120px}
}

/* ── Why Choose Veegent: less dead space; divider from the (also light-blue) partners band ── */
.why-section{padding:4.5rem 0;border-top:1px solid #dbe5fb}
@media(max-width:991.98px){.why-section{padding:3.25rem 0}}
.why-section .feature-card p{line-height:1.5}

/* ── Compact footer (pages with the sidebar layout: /services, /industries) ──
   Same content, much shorter: tighter padding, smaller type, logo and name on one
   line, Services links in two columns. Enabled via <body class="footer-compact">. */
.footer-compact .footer-top{padding:1.4rem 0 .6rem}
.footer-compact .footer-top .row{--bs-gutter-y:1rem}
.footer-compact .footer-brand-wrap{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem!important}
.footer-compact .footer-brand-wrap img{height:34px!important;width:34px!important;margin:0!important}
.footer-compact .footer-brand{font-size:1.25rem}
.footer-compact .footer-desc{font-size:.76rem;line-height:1.5;margin-bottom:0;max-width:340px}
.footer-compact .footer-top .d-flex.gap-2.mt-4{margin-top:.6rem!important}
.footer-compact .footer-social{width:28px;height:28px;font-size:.72rem}
.footer-compact .footer-heading{font-size:.64rem;margin-bottom:.55rem;letter-spacing:1.5px}
.footer-compact .footer-links li{margin-bottom:.22rem}
.footer-compact .footer-links a{font-size:.76rem}
.footer-compact .footer-links{margin-bottom:0}
@media(min-width:768px){.footer-compact .footer-links.footer-links-2col{column-count:2;column-gap:1.4rem}.footer-compact .footer-links.footer-links-2col li{break-inside:avoid}}
.footer-compact .footer-contact-list li{font-size:.76rem;margin-bottom:.4rem}
.footer-compact .footer-contact-list{margin-bottom:0}
.footer-compact .footer-cta-btn{margin-top:.4rem!important;padding:.35rem .9rem;font-size:.76rem}
.footer-compact .footer-bottom{padding:.55rem 0}
.footer-compact .footer-copy,.footer-compact .footer-copy-link{font-size:.72rem}
@media(min-width:992px){
  .footer-compact .footer-top .row>.col-lg-4{flex:0 0 auto;width:26%}
  .footer-compact .footer-top .row>.col-lg-2{flex:0 0 auto;width:14%}
  .footer-compact .footer-top .row>.col-lg-3:nth-child(3){flex:0 0 auto;width:36%}
  .footer-compact .footer-top .row>.col-lg-3:nth-child(4){flex:0 0 auto;width:24%}
}
.footer-compact .footer-links.footer-links-2col li{white-space:normal}

/* ══ Clickable hero cards (home + services) ═══════════════════════════ */
a.hero-card{text-decoration:none;color:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}
a.hero-card:hover,a.hero-card:focus-visible{color:#fff;border-color:rgba(255,255,255,.85);box-shadow:0 0 0 2px rgba(255,255,255,.35),0 22px 34px -10px rgba(0,0,0,.55);filter:brightness(1.25);outline:none}

/* ══ Services sidebar: white line at its bottom edge (above the footer) ═ */
/* white line at the bottom edge of the sidebar (above the footer) */
.svc-tree::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:#fff}
/* same white line across the hero: identical thickness and bottom position as the sidebar's */
.svc-hero-bg::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:#fff;z-index:3}
/* hero fills the remaining height so it ends flush at the footer */
.svc-detail{display:flex;flex-direction:column}
#svcEmpty{flex:1 1 auto;flex-direction:column}
#svcEmpty:not([style*="none"]){display:flex}
#svcEmpty>.svc-hero-default{flex:1 1 auto;display:flex;flex-direction:column}
#svcEmpty>.svc-hero-default>.svc-hero-bg{flex:1 1 auto}

/* ══ Header "Services" click hides the sidebar (see services.html) ══════ */
.svc-page.tree-hidden .svc-tree{display:none}

/* ══ Service intro row: text on the left, 3D visual on the right ═════════ */
.svc-intro-row{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-bottom:1.6rem}
.svc-intro-text{flex:1 1 auto;min-width:0}
.svc-intro-text .panel-desc{max-width:640px;margin-bottom:1rem}
.svc-intro-tag{font-size:.95rem;font-weight:600;margin:0}

.svc-3d{position:relative;flex:0 0 340px;width:340px;height:300px;border-radius:24px;overflow:hidden;
  background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c) 30%,#0c1f4a) 0%,#0c1f4a 55%,#060f1e 100%);
  box-shadow:0 18px 40px -16px rgba(12,31,74,.55),inset 0 0 0 1px rgba(255,255,255,.08)}
.svc-3d-stage{position:absolute;inset:0;perspective:900px}
.svc-3d-world{position:absolute;inset:0;transform-style:preserve-3d;animation:svc3dSway 9s ease-in-out infinite}
@keyframes svc3dSway{0%,100%{transform:rotateX(8deg) rotateY(-10deg)}50%{transform:rotateX(8deg) rotateY(10deg)}}

.svc-3d-floor{position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-115px 0 0 -115px;border-radius:50%;
  transform:translateY(92px) rotateX(78deg);
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 55%,transparent) 0%,transparent 68%);
  border:1.5px solid color-mix(in srgb,var(--c) 70%,#fff)}
.svc-3d-floor.f2{width:290px;height:290px;margin:-145px 0 0 -145px;border-color:rgba(255,255,255,.22);background:none}
.svc-3d-floor.f3{width:170px;height:170px;margin:-85px 0 0 -85px;border-color:rgba(255,255,255,.35);background:none}

.svc-3d-cube{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-62px 0 0 -52px;transform-style:preserve-3d;animation:svc3dCube 16s linear infinite}
@keyframes svc3dCube{from{transform:rotateX(-20deg) rotateY(0deg)}to{transform:rotateX(-20deg) rotateY(360deg)}}
.svc-3d-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:#fff;border-radius:12px;
  border:1px solid rgba(255,255,255,.4);
  background:linear-gradient(145deg,rgba(255,255,255,.34),rgba(0,0,0,.3)),var(--c);
  box-shadow:inset 0 0 22px rgba(255,255,255,.18)}
.svc-3d-face.ft{transform:translateZ(52px)}
.svc-3d-face.bk{transform:rotateY(180deg) translateZ(52px)}
.svc-3d-face.rt{transform:rotateY(90deg) translateZ(52px)}
.svc-3d-face.lf{transform:rotateY(-90deg) translateZ(52px)}
.svc-3d-face.tp{transform:rotateX(90deg) translateZ(52px);background:linear-gradient(145deg,rgba(255,255,255,.5),rgba(255,255,255,.1)),var(--c)}
.svc-3d-face.bt{transform:rotateX(-90deg) translateZ(52px)}

.svc-3d-chip{position:absolute;width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:#fff;
  background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);
  box-shadow:0 14px 24px -10px rgba(0,0,0,.55),0 0 18px color-mix(in srgb,var(--c) 45%,transparent)}
.svc-3d-chip.c1{top:34px;left:34px;transform:translateZ(60px);animation:svc3dFloat 3.4s ease-in-out infinite}
.svc-3d-chip.c2{top:52px;right:30px;transform:translateZ(80px);animation:svc3dFloat 3.9s ease-in-out infinite .6s}
.svc-3d-chip.c3{bottom:44px;left:52px;transform:translateZ(70px);animation:svc3dFloat 3.6s ease-in-out infinite 1.1s}
@keyframes svc3dFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}

@media (max-width:992px){
  .svc-intro-row{flex-direction:column;align-items:flex-start}
  .svc-3d{flex:0 0 auto;width:100%;max-width:340px;height:260px}
}
@media (prefers-reduced-motion:reduce){
  .svc-3d-world,.svc-3d-cube,.svc-3d-chip{animation:none}
  .svc-3d-cube{transform:rotateX(-20deg) rotateY(-30deg)}
}

/* ══ Service image beside the intro (shown in full, never cropped) ═══ */
.svc-img{flex:0 0 400px;width:400px;align-self:center;border-radius:22px;overflow:hidden;background:#0c1f4a;line-height:0;
  box-shadow:0 18px 40px -16px rgba(12,31,74,.5),0 0 0 3px color-mix(in srgb,var(--c) 40%,#fff)}
.svc-img img{display:block;width:100%;height:auto;transition:transform .6s ease}
.svc-img:hover img{transform:scale(1.04)}
@media (max-width:992px){.svc-img{flex:0 0 auto;width:100%;max-width:400px}}