/* ==========================================================================
   VV Techsol — Enterprise Homepage Theme
   Clean light UI with dark hero + dark contact band, violet accent system.
   Inspired by modern enterprise IT sites (systemsltd.com reference).
   Self-contained: loaded ONLY on index.html. Does not touch css/style.css.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
    /* Surfaces */
    --bg: #ffffff;
    --bg-soft: #f6f5fb;
    --bg-lav: #f2ecfb;
    --dark: #0c0912;
    --dark-2: #150e22;

    /* Ink */
    --ink: #17131f;
    --ink-soft: #514c60;
    --muted: #7b7688;
    --on-dark: #ffffff;
    --on-dark-soft: #b7b0c6;

    /* Brand */
    --brand: #6d28d9;
    --brand-2: #8b3ff0;
    --brand-deep: #4c1d95;
    --magenta: #c026d3;
    --line: #e9e6f1;
    --line-strong: #ddd8ec;

    /* Gradients */
    --grad: linear-gradient(120deg, #7c3aed 0%, #c026d3 100%);
    --grad-soft: linear-gradient(120deg, #8b5cf6 0%, #d946ef 100%);
    --grad-text: linear-gradient(120deg, #8b5cf6 0%, #d946ef 100%);

    /* Shape + motion */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 30px;
    --r-full: 999px;
    --shadow-sm: 0 4px 14px rgba(23, 19, 31, .06);
    --shadow-md: 0 16px 40px rgba(23, 19, 31, .10);
    --shadow-lg: 0 30px 70px rgba(58, 30, 110, .18);
    --ease: cubic-bezier(.22, 1, .36, 1);
    --dur: .45s;

    --maxw: 1400px;
    --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
}

::selection { background: rgba(124, 58, 237, .18); color: var(--ink); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.gradient-text {
    font-family: var(--font-serif);
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.005em;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* Keep the wordmark/preloader in the sans display face */
.preloader-text .gradient-text { font-family: var(--font-display); font-weight: 800; font-style: normal; }

/* ---------- Section framing ---------- */
.section { padding: 108px 0; position: relative; }
.section-soft { background: var(--bg-soft); }
.section-lav { background: linear-gradient(180deg, #faf7ff 0%, #ffffff 100%); }

.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-body);
    font-size: .78rem; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--brand);
    margin-bottom: 18px;
}
.eyebrow::before {
    content: ''; width: 26px; height: 2px; border-radius: 2px;
    background: var(--grad); display: inline-block;
}
.section-head.center .eyebrow::before { display: none; }

.section-title {
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 700; letter-spacing: -0.03em; color: var(--ink);
}
.section-lead {
    margin-top: 18px; color: var(--ink-soft);
    font-size: 1.08rem; line-height: 1.7; max-width: 560px;
}
.section-head.center .section-lead { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 28px; font-family: var(--font-body);
    font-size: .95rem; font-weight: 600; letter-spacing: .01em;
    border-radius: var(--r-full); border: 1.5px solid transparent;
    cursor: pointer; transition: transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease), background var(--dur) var(--ease),
        color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    white-space: nowrap;
}
.btn i { font-size: .85em; transition: transform var(--dur) var(--ease); }
.btn:hover i { transform: translateX(3px); }
.btn-lg { padding: 16px 34px; font-size: 1rem; }

.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 10px 26px rgba(109, 40, 217, .30); }
.btn-primary:hover { background: var(--brand-deep); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(109, 40, 217, .38); }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; transform: translateY(-2px); }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }

.btn-ghost-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(4px); }
.btn-ghost-light:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }

.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.28); }

.text-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink);
}
.text-link i { transition: transform var(--dur) var(--ease); font-size: .9em; }
.text-link:hover { color: var(--brand); }
.text-link:hover i { transform: translateX(4px); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; }
    html { scroll-behavior: auto; }
}

/* ---------- Preloader ---------- */
#preloader {
    position: fixed; inset: 0; background: var(--bg); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .5s ease, visibility .5s ease;
}
#preloader.hidden { opacity: 0; visibility: hidden; }
.preloader-content { text-align: center; }
.preloader-spinner {
    width: 54px; height: 54px; border: 3px solid rgba(109, 40, 217, .18);
    border-top-color: var(--brand); border-radius: 50%;
    animation: spin 1s linear infinite; margin: 0 auto 18px;
}
/* Preloader sits on a white screen, so it takes the dark logo. */
.preloader-text .logo-on-dark { display: none; }
.preloader-text .logo-on-light { display: block; }
.preloader-text .logo-img { height: 46px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 18px 0;
    background: rgba(14, 10, 22, .3);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
        padding var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
.site-header.scrolled {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(23, 19, 31, .06);
    padding: 12px 0;
}
.nav-container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.logo { display: inline-flex; align-items: center; }
.logo-img { display: block; height: 42px; width: auto; }
/* Both logo variants ship in the markup and CSS picks the one that suits the
   surface behind it, so the swap is instant with no flash on scroll.
   Default surface here is the dark hero; .scrolled flips the bar to white. */
.logo-on-light { display: none; }
.site-header.scrolled .logo-on-dark { display: none; }
.site-header.scrolled .logo-on-light { display: block; }

.main-nav .nav-menu { display: flex; align-items: center; gap: 4px; }
.nav-link {
    display: inline-block; padding: 9px 15px; border-radius: var(--r-full);
    font-size: .93rem; font-weight: 500; color: rgba(255, 255, 255, .82);
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-link:hover, .nav-link.active { color: #fff; background: rgba(255, 255, 255, .12); }
.site-header.scrolled .nav-link { color: var(--ink-soft); }
.site-header.scrolled .nav-link:hover,
.site-header.scrolled .nav-link.active { color: var(--brand); background: rgba(124, 58, 237, .09); }

.nav-cta { display: inline-flex; align-items: center; gap: 18px; }
.header-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 22px; border-radius: var(--r-full);
    font-size: .9rem; font-weight: 600;
    background: #fff; color: var(--ink);
    border: 1.5px solid transparent;
    transition: all var(--dur) var(--ease);
}
.header-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.2); }
.site-header.scrolled .header-btn { background: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(109,40,217,.28); }
.site-header.scrolled .header-btn:hover { background: var(--brand-deep); }

.mobile-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.mobile-toggle span { width: 26px; height: 2px; border-radius: 2px; background: #fff; transition: all var(--dur) var(--ease); }
.site-header.scrolled .mobile-toggle span { background: var(--ink); }
.mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
    position: relative; overflow: hidden;
    background: radial-gradient(115% 125% at 85% 18%, #3d1476 0%, #1b0b36 46%, #0b0810 78%);
    color: var(--on-dark);
    padding: 130px 0 92px;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero .stars-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.hero-glow {
    position: absolute; width: 680px; height: 680px; right: -40px; top: -140px;
    background: radial-gradient(circle, rgba(192, 38, 211, .48) 0%, rgba(124, 58, 237, .2) 42%, transparent 68%);
    filter: blur(30px); border-radius: 50%;
}
.grid-overlay {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 62px 62px; -webkit-mask: radial-gradient(90% 75% at 22% 40%, #000, transparent 80%);
    mask: radial-gradient(90% 75% at 22% 40%, #000, transparent 80%);
}
.hero-inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 40px;
}
.hero-text { max-width: 700px; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px 8px 12px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
    font-size: .84rem; font-weight: 500; color: #efe7fb; margin-bottom: 28px;
    backdrop-filter: blur(4px);
}
.badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .22); }
.hero-title {
    font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 800; line-height: 1.1;
    letter-spacing: -.03em; color: #fff;
}
.hero-title .gradient-text { background: linear-gradient(120deg, #c4b5fd, #f0abfc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-desc { margin-top: 20px; font-size: 1.16rem; line-height: 1.7; color: #dcd5ea; max-width: 560px; }
.hero-buttons { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 14px; }

/* Ask launcher inside the hero banner */
.hero-ask { margin-top: 26px; max-width: 600px; }
.hero-ask .ask-box { margin: 0; max-width: none; }
.hero-ask .ask-chips { justify-content: flex-start; margin-top: 14px; }
.hero-ask .ask-status { justify-content: flex-start; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }

/* Hero CTA row + industry image gallery (right column) */
.hero-cta-row { display: flex; align-items: center; gap: 18px; margin-top: 24px; flex-wrap: wrap; }
.hero-cta-note { color: var(--on-dark-soft); font-size: .92rem; }
.hero-gallery {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: repeat(2, 1fr);
    gap: 14px; height: 470px;
}
.hero-tile { position: relative; display: block; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-tile-lg { grid-row: span 2; }
.hero-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.hero-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 9, 18, .05) 40%, rgba(12, 9, 18, .72) 100%); }
.hero-tile:hover img { transform: scale(1.06); }
.hero-tile-label { position: absolute; left: 16px; bottom: 14px; z-index: 2; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.hero-trust { margin-top: 52px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero-trust-label { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.hero-trust-logos { display: flex; align-items: center; gap: 24px; font-size: 1.7rem; color: rgba(255,255,255,.72); }
.hero-trust-logos i { transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.hero-trust-logos i:hover { color: #fff; transform: translateY(-2px); }

/* Hero tech orb (IT-themed visual) */
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 480px; }
.tech-orb { position: relative; width: 440px; height: 440px; max-width: 92%; aspect-ratio: 1; }
.orb-ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; }
.orb-ring-1 { width: 46%; height: 46%; border: 1px dashed rgba(196, 181, 253, .4); animation: orbspin 24s linear infinite; }
.orb-ring-2 { width: 72%; height: 72%; border: 1px dashed rgba(168, 85, 247, .3); animation: orbspin 42s linear infinite reverse; }
.orb-ring-3 { width: 100%; height: 100%; border: 1px solid rgba(168, 85, 247, .16); }
.orb-glow { position: absolute; inset: 0; margin: auto; width: 58%; height: 58%; border-radius: 50%; background: radial-gradient(circle, rgba(139,92,246,.5), transparent 66%); filter: blur(22px); }
.orb-core {
    position: absolute; inset: 0; margin: auto; width: 120px; height: 120px; border-radius: 50%; z-index: 3;
    display: flex; align-items: center; justify-content: center; font-size: 2.7rem; color: #fff;
    background: radial-gradient(circle at 34% 28%, #bb92ff 0%, #7c3aed 52%, #4c1d95 100%);
    box-shadow: 0 0 60px rgba(139,92,246,.6), inset 0 2px 22px rgba(255,255,255,.35);
    animation: corepulse 4.5s ease-in-out infinite;
}
.orb-chip {
    position: absolute; width: 60px; height: 60px; border-radius: 16px; z-index: 2;
    display: flex; align-items: center; justify-content: center; font-size: 1.9rem;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px);
    box-shadow: 0 14px 32px rgba(6, 2, 16, .45); transform: translate(-50%, -50%);
    animation: chipfloat 5.5s ease-in-out infinite;
}
.chip-1 { left: 50%; top: 3%; }
.chip-2 { left: 85%; top: 18%; animation-delay: .5s; }
.chip-3 { left: 98%; top: 52%; animation-delay: 1s; }
.chip-4 { left: 83%; top: 86%; animation-delay: 1.5s; }
.chip-5 { left: 50%; top: 98%; animation-delay: 2s; }
.chip-6 { left: 15%; top: 85%; animation-delay: 2.5s; }
.chip-7 { left: 2%; top: 50%; animation-delay: 3s; }
.chip-8 { left: 16%; top: 17%; animation-delay: 3.5s; }
@keyframes orbspin { to { transform: rotate(360deg); } }
@keyframes corepulse { 0%,100% { box-shadow: 0 0 55px rgba(139,92,246,.5), inset 0 2px 22px rgba(255,255,255,.35); } 50% { box-shadow: 0 0 88px rgba(192,38,211,.7), inset 0 2px 22px rgba(255,255,255,.42); } }
@keyframes chipfloat { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%,-64%); } }

/* ==========================================================================
   Featured insights
   ========================================================================== */
.insights-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.insights-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.insight-card {
    position: relative; display: block; min-height: 340px; border-radius: var(--r-md);
    overflow: hidden; background: #14101d; isolation: isolate;
    box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.insight-card img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .8s var(--ease); z-index: -2;
}
.insight-card::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(12, 9, 18, .05) 0%, rgba(12, 9, 18, .55) 55%, rgba(12, 9, 18, .92) 100%);
}
.insight-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.insight-card:hover img { transform: scale(1.07); }
.insight-body { position: absolute; inset: auto 0 0 0; padding: 24px; }
.insight-tag { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #d8b4fe; }
.insight-title { margin-top: 10px; color: #fff; font-size: 1.02rem; font-weight: 600; line-height: 1.3; }
.insight-card:nth-child(1) { grid-row: span 2; min-height: 100%; }

/* ==========================================================================
   Stats / intro band
   ========================================================================== */
.intro-band { padding: 104px 0; }
.intro-head { max-width: 680px; margin-bottom: 64px; }
.intro-title { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 700; letter-spacing: -.03em; }
.intro-lead { margin-top: 20px; color: var(--ink-soft); font-size: 1.08rem; max-width: 560px; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.stat-block { padding-top: 26px; border-top: 2px solid var(--line-strong); position: relative; }
.stat-block::before { content: ''; position: absolute; top: -2px; left: 0; width: 64px; height: 2px; background: var(--grad); }
.stat-num {
    font-family: var(--font-display); font-size: clamp(2.6rem, 4.5vw, 3.6rem); font-weight: 700;
    letter-spacing: -.03em; background: var(--grad-text);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1;
}
.stat-caption { margin-top: 14px; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }

/* ==========================================================================
   Services
   ========================================================================== */
.services { background: linear-gradient(180deg, #ffffff 0%, #f7f4fd 100%); overflow: hidden; }
.services-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.services-carousel-outer { position: relative; }
.services-carousel-wrapper { position: relative; }
/* Vertical breathing room so the hover lift + shadow aren't clipped by the
   horizontal overflow the carousel needs; the negative margins cancel the
   extra space in the layout. */
.services-carousel { overflow: hidden; padding: 16px 0 30px; margin: -16px 0 -30px; }
.services-carousel-track { display: flex; gap: 24px; will-change: transform; }
.services-carousel-track.js-controlled { cursor: grab; }
.services-carousel-track.dragging { cursor: grabbing; }

.service-card {
    flex: 0 0 340px; width: 340px; background: #fff; border: 1px solid var(--line);
    position: relative;
    border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column;
    box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
    user-select: none;
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.service-card-content { padding: 32px 28px 22px; display: flex; flex-direction: column; flex: 1; position: relative; z-index: 3; }
.service-icon {
    width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: #fff; background: var(--grad); margin-bottom: 22px;
    box-shadow: 0 10px 22px rgba(124, 58, 237, .28);
}
.service-title { font-size: 1.32rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 12px; }
.service-title a { color: var(--ink); transition: color var(--dur) var(--ease); }
.service-card:hover .service-title a { color: var(--brand); }
.service-desc { color: var(--ink-soft); font-size: .96rem; line-height: 1.65; margin-bottom: 20px; flex: 1; }
.service-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.service-link i { transition: transform var(--dur) var(--ease); }
.service-card:hover .service-link i { transform: translateX(4px); }
.svc-wave {
    position: relative; z-index: 2; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    height: 128px; margin-top: 22px; border-radius: 0 0 var(--r-lg) var(--r-lg);
    background-size: cover; background-position: center;
    background-image:
        radial-gradient(120% 150% at 18% 0%, #c4b5fd 0%, transparent 52%),
        radial-gradient(120% 160% at 88% 15%, #a78bfa 0%, transparent 48%),
        radial-gradient(150% 180% at 55% 120%, #e879f9 0%, transparent 58%),
        linear-gradient(180deg, #ede9fe, #faf5ff);
}
/* Service image sits FADED behind the UPPER text area; the aurora .svc-wave strip
   stays as the card's bottom gradient. JS sets the card's background image + .has-img. */
.service-card.has-img {
    background-size: cover; background-position: center top; background-repeat: no-repeat;
}
.service-card.has-img::after {
    content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .60) 0%, rgba(255, 255, 255, .46) 48%, rgba(255, 255, 255, .4) 100%);
}
/* Per-service inline illustration inside the gradient strip */
.svc-wave svg {
    height: 96px; width: auto; display: block;
    filter: drop-shadow(0 6px 14px rgba(76, 29, 149, .18));
    transition: transform var(--dur) var(--ease);
}
.service-card:hover .svc-wave svg { transform: translateY(-4px); }

.svc-wave.alt {
    background:
        radial-gradient(120% 150% at 22% 0%, #bfdbfe 0%, transparent 52%),
        radial-gradient(120% 160% at 85% 10%, #c4b5fd 0%, transparent 48%),
        radial-gradient(150% 180% at 60% 120%, #a78bfa 0%, transparent 58%),
        linear-gradient(180deg, #eef2ff, #faf5ff);
}
.carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong);
    background: #fff; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm); transition: all var(--dur) var(--ease);
}
.carousel-arrow:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.carousel-prev { left: -10px; }
.carousel-next { right: -10px; }

/* ==========================================================================
   Industries
   ========================================================================== */
.industries { background: #fff; }
.industries-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.ind-list { margin: 30px 0 34px; border-left: 2px solid var(--line); }
.ind-item {
    display: flex; align-items: center; gap: 16px; padding: 13px 8px 13px 22px; margin-left: -2px;
    border-left: 2px solid transparent; cursor: pointer;
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em;
    color: #cfc8dd; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ind-num {
    font-family: var(--font-body); font-size: .74rem; font-weight: 700; letter-spacing: .1em;
    color: #beb5d2; min-width: 24px; transition: color var(--dur) var(--ease);
}
.ind-name { transition: transform var(--dur) var(--ease); }
.ind-item i { margin-left: auto; font-size: 1rem; opacity: 0; transform: translateX(-8px); transition: all var(--dur) var(--ease); color: var(--brand); }
.ind-item.active { color: var(--ink); border-left-color: var(--brand); background: linear-gradient(90deg, rgba(124, 58, 237, .06), transparent 70%); }
.ind-item.active .ind-num { color: var(--brand); }
.ind-item.active .ind-name {
    background: var(--grad-text); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; transform: translateX(4px);
}
.ind-item.active i { opacity: 1; transform: translateX(0); }
.ind-item:hover { color: var(--ink-soft); }
.ind-item:hover .ind-num { color: var(--brand-2); }
.ind-media { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 420px; box-shadow: var(--shadow-md); }
.ind-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease); }
.ind-media img.active { opacity: 1; }
.ind-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(76,29,149,.25), transparent 60%); }

/* Glass info chip that flips with each industry */
.ind-chip {
    position: absolute; left: 18px; bottom: 24px; z-index: 3; max-width: 78%;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-radius: 14px; padding: 13px 18px 14px; box-shadow: var(--shadow-md);
}
.ind-chip-label { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.ind-chip-name { display: block; margin-top: 2px; font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em; color: var(--ink); }
.ind-chip-tag { margin-top: 3px; font-size: .84rem; line-height: 1.45; color: var(--ink-soft); }

/* Auto-rotate progress along the bottom edge */
.ind-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3; background: rgba(255, 255, 255, .35); }
.ind-progress span { display: block; height: 100%; width: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; }

/* ==========================================================================
   AI value band
   ========================================================================== */
.ai-band { background: radial-gradient(120% 120% at 85% 10%, #241041 0%, #140c22 45%, #0c0912 80%); color: #fff; position: relative; overflow: hidden; }
.ai-band .stars-canvas { position: absolute; inset: 0; opacity: .4; }
.ai-band .container { position: relative; z-index: 2; }
.ai-band .section-title, .ai-band .eyebrow { color: #fff; }
.ai-band .eyebrow { color: #d8b4fe; }
.ai-band .section-lead { color: var(--on-dark-soft); }
.ai-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 12px; }
.ai-card {
    padding: 30px 26px; border-radius: var(--r-md);
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09);
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ai-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, .07); border-color: rgba(216, 180, 254, .4); }
.ai-card-icon {
    width: 50px; height: 50px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, rgba(139,92,246,.9), rgba(217,70,239,.7)); margin-bottom: 20px;
}
.ai-card h3 { font-size: 1.14rem; font-weight: 600; margin-bottom: 10px; color: #fff; }
.ai-card p { color: var(--on-dark-soft); font-size: .93rem; line-height: 1.6; }

/* ==========================================================================
   Technology alliances
   ========================================================================== */
.alliances { background: var(--bg-soft); }
.alliances-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.logo-tile {
    aspect-ratio: 16 / 10; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    color: var(--ink-soft); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.logo-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.logo-tile i { font-size: 2.2rem; }
.logo-tile span { font-size: .78rem; font-weight: 600; color: var(--muted); }

/* ==========================================================================
   Portfolio (accordion)
   ========================================================================== */
.portfolio { background: #fff; }
.portfolio-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.portfolio-accordion { display: flex; gap: 16px; height: 500px; }
.portfolio-accordion-item {
    position: relative; flex: 1; border-radius: var(--r-lg); overflow: hidden; cursor: pointer;
    transition: flex var(--dur) var(--ease); min-width: 74px;
}
.portfolio-accordion-item.active { flex: 5; cursor: default; }
.accordion-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s var(--ease); }
.portfolio-accordion-item.active .accordion-bg { transform: scale(1.04); }
.accordion-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,9,18,.15) 0%, rgba(12,9,18,.4) 45%, rgba(12,9,18,.9) 100%); }
.accordion-content { position: absolute; inset: auto 0 0 0; padding: 32px; z-index: 2; opacity: 0; transform: translateY(14px); transition: all .5s var(--ease) .1s; }
.portfolio-accordion-item.active .accordion-content { opacity: 1; transform: none; }
.accordion-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #d8b4fe; margin-bottom: 12px; }
.accordion-content h3 { color: #fff; font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 12px; }
.accordion-content p { color: rgba(255,255,255,.82); font-size: .98rem; line-height: 1.6; max-width: 480px; margin-bottom: 20px; }
.accordion-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; padding: 11px 22px; border: 1.5px solid rgba(255,255,255,.4); border-radius: var(--r-full); transition: all var(--dur) var(--ease); }
.accordion-link:hover { background: #fff; color: var(--ink); }
.accordion-arrow {
    position: absolute; top: 24px; right: 24px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: all var(--dur) var(--ease);
}
.portfolio-accordion-item.active .accordion-arrow { opacity: 0; pointer-events: none; }
.accordion-arrow:hover { background: #fff; color: var(--ink); }
.accordion-collapsed-title {
    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl;
    color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .02em; white-space: nowrap;
    opacity: .9; transition: opacity var(--dur) var(--ease);
}
.portfolio-accordion-item.active .accordion-collapsed-title { opacity: 0; }

/* ==========================================================================
   Engagement models
   ========================================================================== */
.engagement { background: linear-gradient(180deg, #f7f4fd 0%, #ffffff 100%); }
.engagement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.eng-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px 30px;
    display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.eng-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.eng-card.featured { background: linear-gradient(160deg, #2a1250 0%, #140c22 100%); border-color: transparent; color: #fff; box-shadow: var(--shadow-lg); }
.eng-card h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
.eng-card.featured h3 { color: #fff; }
.eng-sub { color: var(--ink-soft); font-size: .96rem; line-height: 1.6; }
.eng-card.featured .eng-sub { color: var(--on-dark-soft); }
.eng-divider { height: 1px; background: var(--line); margin: 24px 0; }
.eng-card.featured .eng-divider { background: rgba(255,255,255,.14); }
.eng-features { display: flex; flex-direction: column; gap: 13px; margin-bottom: 28px; flex: 1; }
.eng-features li { display: flex; align-items: center; gap: 12px; font-size: .95rem; color: var(--ink-soft); }
.eng-card.featured .eng-features li { color: #e5ddf5; }
.eng-features i { color: var(--brand); font-size: .95rem; }
.eng-card.featured .eng-features i { color: #d8b4fe; }
.btn-full { width: 100%; }

/* ==========================================================================
   Team / leadership
   ========================================================================== */
.team-section { background: var(--bg-soft); }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.team-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0 30px 36px; text-align: center;
    box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
    position: relative; overflow: hidden;
}
/* Aurora gradient banner behind the avatar */
.team-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 108px; z-index: 0;
    background:
        radial-gradient(120% 150% at 20% 0%, #c4b5fd 0%, transparent 55%),
        radial-gradient(130% 160% at 85% 8%, #a78bfa 0%, transparent 50%),
        radial-gradient(150% 190% at 60% 130%, #e879f9 0%, transparent 60%),
        linear-gradient(180deg, #ece7fe, #faf7ff);
}
.team-card:nth-child(2)::before {
    background:
        radial-gradient(120% 150% at 22% 0%, #bfdbfe 0%, transparent 55%),
        radial-gradient(130% 160% at 85% 8%, #c4b5fd 0%, transparent 50%),
        radial-gradient(150% 190% at 60% 130%, #a78bfa 0%, transparent 60%),
        linear-gradient(180deg, #eaf0ff, #faf7ff);
}
.team-card > * { position: relative; z-index: 1; }
.team-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.team-avatar { width: 118px; height: 118px; border-radius: 50%; margin: 48px auto 18px; padding: 4px; background: var(--grad); box-shadow: 0 12px 30px rgba(124, 58, 237, .3); }
.team-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #fff; background: #eee; }
.team-name { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; }
.team-role { margin-top: 5px; font-weight: 600; font-size: .98rem; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.team-company { margin-top: 3px; color: var(--muted); font-size: .9rem; }
.team-divider { height: 1px; background: var(--line); margin: 24px 0; }
.team-info { display: flex; flex-direction: column; gap: 15px; text-align: left; }
.team-info-row { display: flex; flex-direction: column; gap: 3px; }
.team-info-label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.team-info-value { font-size: .95rem; color: var(--ink); font-weight: 500; }
@media (max-width: 860px) { .team-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } }

/* ==========================================================================
   Careers / CTA band
   ========================================================================== */
.careers { position: relative; overflow: hidden; padding: 150px 0; color: #fff; text-align: center; background: var(--dark); }
.careers-bg { position: absolute; inset: 0; z-index: -2; }
.careers-bg img { width: 100%; height: 100%; object-fit: cover; }
.careers::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(76,29,149,.86), rgba(12,9,18,.78) 55%, rgba(192,38,211,.55)); }
.careers h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 700; letter-spacing: -.03em; color: #fff; max-width: 760px; margin: 0 auto; }
.careers p { margin: 20px auto 34px; color: rgba(255,255,255,.85); font-size: 1.12rem; max-width: 540px; }

/* ==========================================================================
   Contact (dark band, white form card)
   ========================================================================== */
.contact { position: relative; overflow: hidden; padding: 110px 0; background: radial-gradient(120% 120% at 90% 20%, #3a0f5c 0%, #180b2c 42%, #0c0912 78%); color: #fff; }
.contact-glow { position: absolute; right: -80px; bottom: -120px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(217,70,239,.5), transparent 68%); filter: blur(10px); pointer-events: none; }
.contact-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; position: relative; z-index: 2; }
.contact-intro .eyebrow { color: #d8b4fe; }
.contact-intro h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -.03em; }
.contact-intro > p { margin: 18px 0 32px; color: var(--on-dark-soft); font-size: 1.06rem; max-width: 440px; }
.contact-details { display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px; }
.contact-detail { display: flex; align-items: center; gap: 16px; }
.contact-detail .ci { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 46px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #d8b4fe; font-size: 1.05rem; }
.contact-detail h4 { font-size: .8rem; color: rgba(255,255,255,.55); font-weight: 600; letter-spacing: .04em; margin-bottom: 3px; }
.contact-detail p, .contact-detail a { font-size: 1rem; color: #fff; }
.contact-social { display: flex; gap: 12px; }
.contact-social a { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; transition: all var(--dur) var(--ease); }
.contact-social a:hover { background: var(--grad); border-color: transparent; transform: translateY(-3px); }

.contact-card { background: #fff; border-radius: var(--r-xl); padding: 40px; box-shadow: var(--shadow-lg); color: var(--ink); }
.contact-card h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; }
.contact-card .cc-sub { color: var(--muted); font-size: .95rem; margin-bottom: 26px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-input {
    width: 100%; padding: 14px 16px; font-family: var(--font-body); font-size: .96rem; color: var(--ink);
    background: #faf9fd; border: 1.5px solid var(--line); border-radius: var(--r-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-input::placeholder { color: #a49fb2; }
.form-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(124, 58, 237, .12); background: #fff; }
.form-textarea { resize: vertical; min-height: 120px; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%237b7688' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.math-captcha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #faf9fd; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 12px 16px; }
.math-captcha-question { font-size: .95rem; color: var(--ink-soft); }
.math-captcha-input { flex: 1; min-width: 120px; padding: 10px 14px; background: #fff; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); color: var(--ink-soft); }
.footer-top { padding: 76px 0 54px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; }
/* Footer is a light surface, so it always takes the dark logo. */
.footer-logo .logo-on-dark { display: none; }
.footer-logo .logo-on-light { display: block; }
.footer-logo .logo-img { height: 40px; }
.footer-brand p { margin: 18px 0 22px; font-size: .95rem; line-height: 1.7; max-width: 320px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); color: var(--ink-soft); transition: all var(--dur) var(--ease); }
.footer-social a:hover { background: var(--brand); color: #fff; border-color: var(--brand); transform: translateY(-3px); }
.footer-col h4 { font-family: var(--font-display); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: .93rem; color: var(--ink-soft); transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--brand); }
.footer-subscribe { margin-top: 42px; padding: 40px 0 8px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-subscribe h4 { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.footer-subscribe p { font-size: .9rem; color: var(--muted); margin-top: 2px; }
.subscribe-form { display: flex; gap: 10px; }
.subscribe-form input { padding: 12px 18px; border-radius: var(--r-full); border: 1.5px solid var(--line); background: #fff; font-size: .92rem; min-width: 260px; }
.subscribe-form input:focus { outline: none; border-color: var(--brand); }
.footer-bottom { border-top: 1px solid var(--line); padding: 22px 0; }
.footer-bottom .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-legal { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-legal a { font-size: .85rem; color: var(--muted); }
.footer-legal a:hover { color: var(--brand); }
.footer-copy { font-size: .85rem; color: var(--muted); }

/* ==========================================================================
   Scroll-to-top
   ========================================================================== */
.scroll-top {
    position: fixed; bottom: 100px; right: 28px; z-index: 900; width: 50px; height: 50px; border-radius: 50%;
    background: var(--brand); color: #fff; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(14px); transition: all var(--dur) var(--ease); box-shadow: 0 12px 26px rgba(109,40,217,.36);
}
.scroll-top.visible { opacity: 1; visibility: visible; transform: none; }
.scroll-top:hover { background: var(--brand-deep); transform: translateY(-3px); }

/* ==========================================================================
   Chat widget
   ========================================================================== */
.chat-widget { position: fixed; bottom: 26px; right: 26px; z-index: 950; }
.chat-toggle { position: relative; width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; background: var(--grad); color: #fff; font-size: 1.5rem; box-shadow: 0 14px 30px rgba(124,58,237,.4); transition: transform var(--dur) var(--ease); }
.chat-toggle:hover { transform: scale(1.06); }
.chat-toggle.active i { transform: rotate(90deg); }
.chat-badge { position: absolute; top: 6px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: #34d399; border: 2px solid #fff; }

/* Dimmed backdrop behind the modal */
.chat-backdrop { position: fixed; inset: 0; background: rgba(8,5,14,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease); z-index: -1; }
.chat-widget.chat-open .chat-backdrop { opacity: 1; visibility: visible; }

/* Centered modal panel */
.chat-panel {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%) scale(.98);
    width: min(500px, 92vw); height: min(600px, 78vh);
    background: radial-gradient(120% 100% at 50% 0%, #1b1032 0%, #130c22 55%, #0c0812 100%);
    border: 1px solid rgba(255,255,255,.1); border-radius: 22px;
    box-shadow: 0 40px 100px rgba(0,0,0,.6); color: #fff;
    display: flex; flex-direction: column; overflow: hidden;
    opacity: 0; visibility: hidden; transition: all var(--dur) var(--ease);
}
.chat-panel.open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

.chat-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.chat-header-avatar { width: 38px; height: 38px; border-radius: 11px; background: var(--grad); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; }
.chat-header-info h4 { color: #fff; font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.chat-header-info p { font-size: .78rem; color: rgba(255,255,255,.5); }
.chat-live { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; color: #34d399; }
.chat-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.18); }
.chat-header-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.chat-new, .chat-close { width: 34px; height: 34px; border-radius: 9px; border: 0; background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); cursor: pointer; font-size: .95rem; transition: all var(--dur) var(--ease); }
.chat-new:hover, .chat-close:hover { background: rgba(255,255,255,.14); color: #fff; }

.chat-body { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; }

/* Welcome screen (shown before the conversation starts) */
.chat-welcome { margin: auto; text-align: center; max-width: 440px; padding: 12px 6px; }
.chat-welcome-icon { width: 60px; height: 60px; border-radius: 17px; margin: 0 auto 18px; background: rgba(124,58,237,.16); border: 1px solid rgba(168,85,247,.35); display: flex; align-items: center; justify-content: center; color: #c4b5fd; font-size: 1.6rem; }
.chat-welcome h3 { color: #fff; font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 10px; }
.chat-welcome p { color: rgba(255,255,255,.6); font-size: .94rem; line-height: 1.55; margin: 0 auto 22px; max-width: 380px; }
.chat-welcome-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chat-welcome-chip { padding: 10px 16px; border-radius: var(--r-full); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: rgba(255,255,255,.85); font-family: var(--font-body); font-size: .87rem; cursor: pointer; transition: all var(--dur) var(--ease); }
.chat-welcome-chip:hover { background: rgba(124,58,237,.24); border-color: rgba(168,85,247,.5); color: #fff; transform: translateY(-2px); }
.chat-panel.chatting .chat-welcome { display: none; }

.chat-messages { display: flex; flex-direction: column; gap: 16px; }
.chat-panel:not(.chatting) .chat-messages { display: none; }

.chat-typing { display: none; align-items: center; gap: 10px; padding: 8px 24px 4px; }
.chat-avatar-bot { width: 30px; height: 30px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; }
.chat-typing-dots { display: flex; gap: 4px; }
.chat-typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); animation: chatdot 1.2s infinite; }
.chat-typing-dots span:nth-child(2) { animation-delay: .2s; }
.chat-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes chatdot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

.chat-quick-replies { display: none; }

.chat-input-area { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.08); }
.chat-input { flex: 1; padding: 14px 18px; border-radius: var(--r-full); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; font-size: .96rem; font-family: var(--font-body); }
.chat-input::placeholder { color: rgba(255,255,255,.4); }
.chat-input:focus { outline: none; border-color: rgba(168,85,247,.6); background: rgba(255,255,255,.08); }
.chat-mic, .chat-send { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--dur) var(--ease); }
.chat-mic { background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.14); }
.chat-mic:hover { background: rgba(255,255,255,.12); color: #fff; }
.chat-send { background: var(--grad); color: #fff; }
.chat-send:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(124,58,237,.4); }

/* Message bubbles (dark) */
.chat-message { display: flex; gap: 10px; max-width: 82%; }
.chat-message-user { align-self: flex-end; flex-direction: row-reverse; }
.chat-message-bot { align-self: flex-start; }
.chat-bubble-user { background: var(--grad); color: #fff; padding: 12px 16px; border-radius: 16px; border-bottom-right-radius: 4px; font-size: .95rem; line-height: 1.55; }
.chat-bubble-bot { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #ececf2; padding: 12px 16px; border-radius: 16px; border-bottom-left-radius: 4px; font-size: .95rem; line-height: 1.6; }
.chat-bubble-bot ul { margin: 8px 0 0; padding-left: 18px; }
.chat-bubble-bot li { margin-bottom: 4px; }
.chat-bubble-bot strong { color: #d8b4fe; }

/* Handoff form (dark) */
.chat-handoff { display: none; padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.08); }
.chat-handoff h5 { margin-bottom: 10px; font-size: .95rem; color: #fff; }
.chat-handoff input, .chat-handoff textarea { width: 100%; margin-bottom: 8px; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; font-size: .9rem; font-family: inherit; }
.chat-handoff input::placeholder, .chat-handoff textarea::placeholder { color: rgba(255,255,255,.4); }
.chat-handoff button { width: 100%; padding: 12px; border: 0; border-radius: 10px; background: var(--grad); color: #fff; font-weight: 600; cursor: pointer; }
.chat-handoff-success { text-align: center; color: #fff; }
.chat-handoff-success i { color: #34d399; font-size: 1.7rem; margin-bottom: 8px; display: block; }
.chat-handoff-success p { font-size: .92rem; margin-bottom: 4px; }

/* ==========================================================================
   Ask-AI launcher (inline chat entry, hero-adjacent)
   ========================================================================== */
.ask-ai {
    position: relative; overflow: hidden;
    background: radial-gradient(120% 130% at 50% -10%, #22103f 0%, #140c22 48%, #0b0810 82%);
    padding: 88px 0; border-top: 1px solid rgba(255, 255, 255, .06);
}
.ask-ai::before {
    content: ''; position: absolute; top: -140px; left: 50%; transform: translateX(-50%);
    width: 620px; height: 320px; background: radial-gradient(circle, rgba(168, 85, 247, .28), transparent 70%);
    filter: blur(20px); pointer-events: none;
}
.ask-inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; text-align: center; }
.ask-inner .eyebrow { justify-content: center; color: #d8b4fe; }
.ask-inner .eyebrow::before { display: none; }
.ask-ai h2 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 700; letter-spacing: -.03em; }
.ask-sub { color: var(--on-dark-soft); font-size: 1.08rem; margin: 16px auto 32px; max-width: 560px; }
.ask-box {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r-full); padding: 8px; box-shadow: var(--shadow-lg); backdrop-filter: blur(8px);
    max-width: 680px; margin: 0 auto;
}
.ask-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--grad); color: #fff; font-size: 1.05rem; }
.ask-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; font-family: var(--font-body); font-size: 1.02rem; padding: 12px 6px; }
.ask-input::placeholder { color: rgba(255, 255, 255, .5); }
.ask-typed { flex: 1; min-width: 0; display: flex; align-items: center; padding: 12px 6px; color: rgba(255, 255, 255, .62); font-family: var(--font-body); font-size: 1.02rem; overflow: hidden; white-space: nowrap; }
.ask-cursor { display: inline-block; width: 2px; height: 18px; background: #a855f7; margin-left: 3px; flex-shrink: 0; animation: askblink 1s steps(1) infinite; }
@keyframes askblink { 50% { opacity: 0; } }
.hero-ask .ask-box { cursor: pointer; }
.hero-ask .ask-box:hover { border-color: rgba(168, 85, 247, .45); }
.ask-send {
    display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
    padding: 14px 24px; border: 0; border-radius: var(--r-full); cursor: pointer; white-space: nowrap;
    background: var(--grad); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: .96rem;
    box-shadow: 0 10px 24px rgba(124, 58, 237, .35); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ask-send:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(124, 58, 237, .45); }
.ask-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.ask-chip {
    padding: 10px 18px; border-radius: var(--r-full); cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04);
    color: #e8def8; font-family: var(--font-body); font-size: .9rem;
    transition: all var(--dur) var(--ease);
}
.ask-chip:hover { background: rgba(255, 255, 255, .1); border-color: rgba(216, 180, 254, .55); transform: translateY(-2px); }
.ask-status {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .62); font-size: .9rem;
}
.ask-dot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .2); animation: askpulse 2.2s ease-in-out infinite; }
@keyframes askpulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(52, 211, 153, .2); } 50% { box-shadow: 0 0 0 7px rgba(52, 211, 153, .08); } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
    .insights-grid { grid-template-columns: repeat(2, 1fr); }
    .insight-card:nth-child(1) { grid-row: auto; min-height: 340px; }
    .ai-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-row { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
    .industries-layout, .alliances-layout, .contact-layout { grid-template-columns: 1fr; gap: 44px; }
    .engagement-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; row-gap: 40px; }
    .footer-brand { grid-column: 1 / -1; }
    .hero-inner { grid-template-columns: 1fr; gap: 30px; }
    .hero-text { max-width: 760px; }
    .hero-visual { min-height: 380px; }
    .tech-orb { width: 340px; height: 340px; }
}

@media (max-width: 860px) {
    /* The header sets backdrop-filter, which makes it the containing block for
       its position:fixed children — so `inset: 0 0 0 auto` sized this drawer to
       the header's own height rather than the viewport, and everything below
       the first item spilled out with no background behind it. An explicit
       height is measured against the viewport and fixes that. It scrolls too:
       with the dropdowns expanded the menu is taller than a phone screen. */
    .main-nav {
        position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh;
        width: min(80vw, 340px); background: #fff;
        flex-direction: column; padding: 100px 28px 40px; transform: translateX(100%);
        transition: transform var(--dur) var(--ease); box-shadow: -20px 0 60px rgba(0,0,0,.18); z-index: 999;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .main-nav.active { transform: translateX(0); }
    .main-nav .nav-menu { flex-direction: column; align-items: stretch; gap: 4px; }
    .nav-link { color: var(--ink-soft) !important; padding: 13px 16px; font-size: 1.02rem; }
    .nav-link:hover, .nav-link.active { color: var(--brand) !important; background: rgba(124,58,237,.09) !important; }
    .mobile-toggle { display: flex; z-index: 1001; }
    .nav-cta .header-btn { display: none; }
    .portfolio-accordion { flex-direction: column; height: auto; }
    .portfolio-accordion-item { min-height: 120px; }
    .portfolio-accordion-item.active { min-height: 420px; }
    .accordion-collapsed-title { writing-mode: horizontal-tb; transform: translateX(-50%); bottom: 20px; }
    .section { padding: 78px 0; }
    .hero { padding: 120px 0 76px; }
    .hero-visual { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .chat-widget { right: 16px; bottom: 20px; }
    .scroll-top { bottom: 88px; right: 16px; }
}

@media (max-width: 560px) {
    .container { padding: 0 20px; }
    .insights-grid, .ai-grid, .stats-row, .logo-grid, .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .service-card { flex-basis: 280px; width: 280px; }
    .subscribe-form { width: 100%; }
    .subscribe-form input { min-width: 0; flex: 1; }
    .contact-card { padding: 26px 22px; }
    .footer-subscribe { flex-direction: column; align-items: flex-start; }

    /* Fluid typography so nothing overflows narrow screens */
    .hero { padding: 130px 0 76px; }
    .hero-title { font-size: clamp(2.1rem, 10vw, 2.7rem); }
    .hero-desc { font-size: 1.02rem; }
    .hero-badge { font-size: .72rem; padding: 7px 13px 7px 11px; line-height: 1.35; }
    .hero-buttons { flex-direction: column; align-items: stretch; }
    .hero-buttons .btn { width: 100%; }
    .hero-ask { max-width: 100%; }
    .ask-box { flex-wrap: wrap; }
    .ask-send { width: 100%; justify-content: center; }
    .section-title, .intro-title, .contact-intro h2, .careers h2 { font-size: clamp(1.8rem, 8vw, 2.2rem); }
    .stat-num { font-size: clamp(2.4rem, 12vw, 3rem); }
    .ind-item { font-size: 1.28rem; }
    .insight-title { font-size: .98rem; }
    .insights-head, .services-head, .portfolio-head { gap: 16px; }

    /* Chat modal → fullscreen on phones */
    .chat-panel { width: 100vw; height: 100vh; height: 100dvh; max-width: 100vw; border-radius: 0; top: 0; left: 0; transform: translateY(14px); }
    .chat-panel.open { transform: none; }
    .chat-body { padding: 18px; }
    .chat-welcome h3 { font-size: 1.35rem; }
    .chat-welcome p { font-size: .94rem; }
    .chat-welcome-icon { width: 62px; height: 62px; font-size: 1.6rem; }
    .chat-welcome-chip { font-size: .86rem; padding: 10px 16px; }
    .chat-input-area { padding: 14px 16px; }
}

/* ==========================================================================
   Motion & polish  (scroll progress · staggered reveals · hero entrance ·
   gradient shimmer · hover micro-interactions) — livelier, more attractive UX
   ========================================================================== */

/* Thin scroll-progress indicator across the very top */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1100;
    background: var(--grad); box-shadow: 0 0 12px rgba(192, 38, 211, .55);
    transition: width .12s linear; pointer-events: none;
}

/* Staggered child reveal: containers tagged .stagger receive .visible from the
   IntersectionObserver, then their children animate in one after another. */
.stagger > * {
    opacity: 0; transform: translateY(28px);
    transition: opacity .6s var(--ease), transform .6s var(--ease),
        box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.stagger.visible > * { opacity: 1; transform: none; }
.stagger.visible > *:nth-child(1) { transition-delay: .04s; }
.stagger.visible > *:nth-child(2) { transition-delay: .12s; }
.stagger.visible > *:nth-child(3) { transition-delay: .20s; }
.stagger.visible > *:nth-child(4) { transition-delay: .28s; }
.stagger.visible > *:nth-child(5) { transition-delay: .36s; }
.stagger.visible > *:nth-child(6) { transition-delay: .44s; }
.stagger.visible > *:nth-child(7) { transition-delay: .52s; }
.stagger.visible > *:nth-child(8) { transition-delay: .60s; }
.stagger.visible > *:nth-child(9) { transition-delay: .68s; }
.stagger.visible > *:nth-child(n+10) { transition-delay: .74s; }

/* Hero entrance — plays in as the preloader fades away */
.hero-text > * { opacity: 0; animation: heroUp .8s var(--ease) forwards; }
.hero-text > .hero-badge { animation-delay: 1.20s; }
.hero-text > .hero-title { animation-delay: 1.34s; }
.hero-text > .hero-desc  { animation-delay: 1.50s; }
.hero-text > .hero-ask   { animation-delay: 1.66s; }
.hero-visual { opacity: 0; animation: heroFade 1.1s var(--ease) 1.42s forwards; }
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes heroFade { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* Subtle animated shimmer across gradient headings */
.gradient-text { background-size: 220% auto; animation: gradShimmer 7s ease-in-out infinite; }
.preloader-text .gradient-text { animation: none; }
@keyframes gradShimmer { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } }

/* Hover micro-interactions */
.service-icon { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.service-card:hover .service-icon { transform: translateY(-4px) rotate(-6deg) scale(1.06); box-shadow: 0 16px 30px rgba(124, 58, 237, .42); }
.ai-card-icon { transition: transform var(--dur) var(--ease); }
.ai-card:hover .ai-card-icon { transform: rotate(-6deg) scale(1.08); }
.team-avatar { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.team-card:hover .team-avatar { transform: scale(1.06); box-shadow: 0 16px 36px rgba(124, 58, 237, .4); }
.stat-block { transition: transform var(--dur) var(--ease); }
.stat-block:hover { transform: translateY(-4px); }
.logo-tile i { transition: transform var(--dur) var(--ease); }
.logo-tile:hover i { transform: scale(1.12) translateY(-2px); }
.insight-tag, .accordion-tag { transition: color var(--dur) var(--ease); }

/* Nav underline sweep on hover */
.nav-link { position: relative; }

/* GSAP word-split titles (js/motion.js): words animate in 3D, so the heading
   provides the perspective and each word becomes its own transformable box. */
.section-title, .intro-title, .contact-intro h2 { perspective: 700px; }
.gsap-word { display: inline-block; }

/* Honour reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hero-text > *, .hero-visual { opacity: 1 !important; animation: none !important; }
    .gradient-text { animation: none !important; }
    .scroll-progress { transition: none; }
}

/* Industry rows link through to their detail page. The anchor takes over as
   the flex container the row's layout expects, so .ind-item's own rules
   (active gradient, hover, the arrow's margin-left:auto) keep applying. */
.ind-link { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.ind-chip-link {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 9px;
    font-family: var(--font-body); font-size: .8rem; font-weight: 700;
    color: var(--brand); text-decoration: none; transition: gap var(--dur) var(--ease);
}
.ind-chip-link:hover { gap: 11px; }

/* ==========================================================================
   Nav dropdowns
   --------------------------------------------------------------------------
   Services, Industries and Work each pointed only at a homepage section, so
   there was no route from the menu to any of the 24 detail pages behind them.
   Each now opens a panel listing its pages; the parent link still goes to the
   homepage section for anyone who wants the overview.
   ========================================================================== */
/* The pill wraps the label AND its caret. Left on .nav-link, the background
   ended before the chevron and the chevron sat half outside the rounded edge. */
.has-sub {
    position: relative; display: flex; align-items: center;
    border-radius: var(--r-full); transition: background var(--dur) var(--ease);
}
.has-sub .nav-link { padding-right: 7px; }
/* The link must not paint its own pill inside the wrapper's, or the two
   translucent layers stack into a darker inner capsule. Both the plain and the
   .scrolled rules are overridden: `.site-header.scrolled .nav-link.active`
   carries four classes and would otherwise outrank a two-class selector. */
.has-sub .nav-link:hover,
.has-sub .nav-link.active,
.site-header .has-sub .nav-link:hover,
.site-header .has-sub .nav-link.active,
.site-header.scrolled .has-sub .nav-link:hover,
.site-header.scrolled .has-sub .nav-link.active { background: transparent; }
.has-sub:hover, .has-sub:focus-within, .has-sub.current { background: rgba(255, 255, 255, .12); }
.has-sub:hover .nav-link, .has-sub.current .nav-link { color: #fff; }

.nav-caret {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer;
    padding: 9px 14px 9px 3px; margin: 0;
    color: rgba(255, 255, 255, .55); font-size: .66rem;
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.has-sub:hover .nav-caret, .has-sub.current .nav-caret { color: #fff; }
.has-sub:hover .nav-caret { transform: rotate(180deg); }

/* White bar */
.site-header.scrolled .nav-caret { color: var(--muted); }
.site-header.scrolled .has-sub:hover,
.site-header.scrolled .has-sub:focus-within,
.site-header.scrolled .has-sub.current { background: rgba(124, 58, 237, .09); }
.site-header.scrolled .has-sub:hover .nav-link,
.site-header.scrolled .has-sub.current .nav-link,
.site-header.scrolled .has-sub:hover .nav-caret,
.site-header.scrolled .has-sub.current .nav-caret { color: var(--brand); }

.subnav {
    position: absolute; top: 100%; left: 50%; z-index: 60;
    padding-top: 14px; transform: translateX(-50%) translateY(6px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.has-sub:hover > .subnav,
.has-sub:focus-within > .subnav {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.subnav-panel {
    display: grid; gap: 2px; padding: 14px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); min-width: 250px;
}
.subnav-panel.cols-2 { grid-template-columns: repeat(2, minmax(218px, 1fr)); }
.subnav-link {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 14px; border-radius: var(--r-sm);
    font-size: .92rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap;
    text-decoration: none; transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.subnav-link i {
    flex: 0 0 18px; width: 18px; text-align: center;
    font-size: .88rem; color: var(--brand); opacity: .55;
    transition: opacity var(--dur) var(--ease);
}
.subnav-link:hover { color: var(--brand); background: var(--bg-soft); }
.subnav-link:hover i { opacity: 1; }

/* The page you are already on. Deliberately not the same treatment as hover —
   otherwise it is indistinguishable the moment the cursor moves elsewhere. */
.subnav-link.current {
    color: var(--brand); font-weight: 600;
    background: var(--bg-lav); box-shadow: inset 3px 0 0 var(--brand);
}
.subnav-link.current i { opacity: 1; }
.subnav-all {
    grid-column: 1 / -1; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line);
    display: flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--brand); text-decoration: none; padding-left: 14px;
}
.subnav-all:hover { gap: 12px; }

/* In the mobile drawer the panel is not a hover target — it stacks inline and
   the caret becomes the toggle. */
@media (max-width: 900px) {
    .has-sub { flex-wrap: wrap; background: none !important; }
    .has-sub .nav-link { flex: 1; padding-right: 16px; }
    .has-sub.current .nav-link { color: var(--brand) !important; background: rgba(124,58,237,.09) !important; }
    .nav-caret { color: var(--ink-soft) !important; font-size: .82rem; padding: 12px 14px; margin: 0; }
    .has-sub.open .nav-caret { transform: rotate(180deg); }
    .subnav {
        position: static; width: 100%; padding-top: 0; transform: none;
        opacity: 1; visibility: visible; pointer-events: auto;
        display: none;
    }
    .has-sub.open > .subnav { display: block; }
    .has-sub:hover > .subnav { display: none; }
    .has-sub.open:hover > .subnav { display: block; }
    .subnav-panel {
        grid-template-columns: 1fr !important; border: 0; box-shadow: none;
        padding: 2px 0 10px 14px; min-width: 0; background: none;
    }
    .subnav-link { white-space: normal; padding: 9px 12px; font-size: .95rem; }
    .subnav-all { padding-left: 12px; }
}

/* <picture> wraps every site image so browsers can take the WebP. It must not
   introduce a box of its own, or images inside flex and grid parents would be
   laid out through an extra inline element instead of directly. */
picture { display: contents; }