/* ==========================================================================
   Aarveta – creative layer
   Loaded AFTER style.css on every page. Purely additive: animated graphics,
   depth, motion and tighter responsive behaviour. Uses the existing theme
   tokens so light/dark mode keep working.
   ========================================================================== */

:root {
    --grad-brand: linear-gradient(135deg, #6366f1, #8b5cf6 50%, #ec4899);
    --glow: rgba(99, 102, 241, 0.35);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Responsive foundation ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
img, svg, video { max-width: 100%; }

.container { max-width: 1280px; }
.navbar .container { max-width: 1400px; }

/* Tablet: 7 nav items don't fit between 769px and ~1000px, so tighten them. */
@media (min-width: 769px) and (max-width: 1040px) {
    .nav-links { gap: 0.1rem; }
    .nav-links a,
    .nav-dropdown-toggle { font-size: 0.86rem; padding: 0.4rem 0.55rem; }
    .nav-links a.btn-primary { padding: 0.55rem 0.9rem; }
    .logo-text { font-size: 1.15rem; }
}

/* Very large screens: scale type up a touch instead of floating in space. */
@media (min-width: 1600px) {
    html { font-size: 17.5px; }
}

/* ---------- Scroll progress (injected by creative.js) ---------- */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    background: var(--grad-brand);
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: 1200;
    pointer-events: none;
}

/* ---------- Navbar polish ---------- */
.nav-links > a:not(.btn-primary),
.nav-dropdown-toggle { position: relative; }
.nav-links > a:not(.btn-primary)::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0.15rem;
    width: 0; height: 2px;
    border-radius: 2px;
    background: var(--grad-brand);
    transform: translateX(-50%);
    transition: width 0.3s var(--ease-out);
}
.nav-links > a:not(.btn-primary):hover::after { width: 55%; }
@media (max-width: 768px) {
    .nav-links > a:not(.btn-primary)::after { display: none; }
}

.btn-primary {
    /* A static gradient reads calmer and more premium than a perpetually
       shifting one — especially since this button repeats on every page
       (nav "Request Demo") and would otherwise never stop moving. */
    background-image: linear-gradient(135deg, #6366f1, #8b5cf6 45%, #ec4899 100%);
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s var(--ease-out);
}
.btn-primary:hover::after { left: 130%; }

/* ---------- Hero ---------- */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem); }

/* The original style.css hero has its own drifting blob pair
   (.hero::before/::after, heroDrift). .hero-orbs below replaces it with a
   richer set, so the old pair is retired to avoid two layers of blobs
   fighting for attention. */
.hero::before, .hero::after { display: none; }

.hero-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-orbs span {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
}
.hero-orbs span:nth-child(1) {
    width: 26rem; height: 26rem;
    top: -8rem; left: 30%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.55), transparent 70%);
    animation: orbA 16s ease-in-out infinite;
}
.hero-orbs span:nth-child(2) {
    width: 22rem; height: 22rem;
    bottom: -8rem; right: 8%;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.45), transparent 70%);
    animation: orbB 19s ease-in-out infinite;
}
.hero-orbs span:nth-child(3) {
    width: 16rem; height: 16rem;
    top: 30%; left: -5rem;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.4), transparent 70%);
}
@keyframes orbA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, 30px) scale(1.15); }
}
@keyframes orbB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-50px, -25px) scale(1.1); }
}

/* Dotted grid fading out toward the bottom */
.hero .container::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(99, 102, 241, 0.22) 1.2px, transparent 1.2px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 75%);
    pointer-events: none;
    z-index: -1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.95rem;
    margin-bottom: 1.3rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--icon-color);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 6px 20px var(--card-shadow);
}
.hero-badge i {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
    70% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.hero-content h1 {
    background-size: 220% 220%;
    animation: gradientFlow 9s ease-in-out infinite;
}
@keyframes gradientFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Two-column layout only on wide screens so style.css's mobile stacking stays intact */
@media (min-width: 901px) {
    .hero .container {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 2.5rem 3rem;
    }
    .hero-stats {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.4rem;
        margin-top: 1rem;
    }
}
@media (min-width: 601px) and (max-width: 900px) {
    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .stat p { font-size: 0.88rem; }
}

/* Hero dashboard mock-up */
.hero-visual {
    --rx: 0deg; --ry: 0deg;
    position: relative;
    width: 100%;
    max-width: 540px;
    margin-inline: auto;
    padding: 2.2rem 0 2.6rem;
}
.hv-glow {
    position: absolute;
    inset: 10% 5%;
    border-radius: 50%;
    background: var(--grad-brand);
    filter: blur(70px);
    opacity: 0.35;
    animation: gradientPulse 6s ease-in-out infinite;
}
@keyframes gradientPulse {
    0%, 100% { opacity: 0.28; transform: scale(0.95); }
    50% { opacity: 0.45; transform: scale(1.05); }
}

.hv-window {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 22px;
    box-shadow: 0 30px 70px var(--card-shadow), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow: hidden;
    transform: perspective(1000px) rotateX(var(--ry)) rotateY(var(--rx));
    transition: transform 0.25s ease-out;
    animation: floatY 7s ease-in-out infinite;
}
@keyframes floatY {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

.hv-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border-color);
}
.hv-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.hv-bar i:nth-child(2) { background: #febc2e; }
.hv-bar i:nth-child(3) { background: #28c840; }
.hv-bar span {
    margin-left: 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-light);
}

.hv-body { padding: 1.2rem 1.2rem 1.3rem; }

.hv-chart {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.55rem;
    height: 128px;
    margin-bottom: 1.1rem;
    padding: 0.3rem 0.2rem 0;
    border-radius: 14px;
    background:
        repeating-linear-gradient(to top, transparent 0 31px, var(--border-color) 31px 32px);
}
.hv-chart > div {
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    height: 100%;
}
.hv-chart b {
    align-self: end;
    width: 100%;
    max-width: 28px;
    height: var(--h);
    border-radius: 8px 8px 4px 4px;
    background: linear-gradient(180deg, #8b5cf6, #6366f1);
    transform-origin: bottom;
    animation: barGrow 1.1s var(--ease-out) both;
}
.hv-chart > div:nth-child(2) b { animation-delay: 0.08s; }
.hv-chart > div:nth-child(3) b { animation-delay: 0.16s; }
.hv-chart > div:nth-child(4) b { animation-delay: 0.24s; background: linear-gradient(180deg, #ec4899, #8b5cf6); }
.hv-chart > div:nth-child(5) b { animation-delay: 0.32s; }
.hv-chart > div:nth-child(6) b { animation-delay: 0.4s; }
.hv-chart > div:nth-child(7) b { animation-delay: 0.48s; }
.hv-chart b.dim { opacity: 0.35; }
.hv-chart small { font-size: 0.68rem; color: var(--text-light); padding-top: 4px; }
@keyframes barGrow { from { transform: scaleY(0); } }

.hv-rows { display: grid; gap: 0.55rem; }
.hv-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.8rem;
    border-radius: 12px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    font-size: 0.82rem;
    opacity: 0;
    animation: rowIn 0.6s var(--ease-out) forwards;
}
.hv-row:nth-child(1) { animation-delay: 0.7s; }
.hv-row:nth-child(2) { animation-delay: 0.85s; }
.hv-row:nth-child(3) { animation-delay: 1s; }
@keyframes rowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hv-row em { font-style: normal; font-weight: 500; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-row strong { color: var(--text-dark); font-variant-numeric: tabular-nums; }
.hv-dot { width: 9px; height: 9px; border-radius: 50%; }
.hv-dot.d1 { background: #6366f1; }
.hv-dot.d2 { background: #ec4899; }
.hv-dot.d3 { background: #22d3ee; }
.hv-row u {
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}
.hv-row u.ok { color: #059669; background: rgba(16, 185, 129, 0.15); }
.hv-row u.pending { color: #d97706; background: rgba(245, 158, 11, 0.16); }

/* Floating chips */
.hv-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem 0.6rem 0.7rem;
    border-radius: 16px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 16px 40px var(--card-shadow);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 2;
}
.hv-chip span { display: flex; flex-direction: column; line-height: 1.2; }
.hv-chip strong { font-size: 0.85rem; color: var(--text-dark); }
.hv-chip small { font-size: 0.7rem; color: var(--text-light); }
.hv-chip > svg { width: 34px; height: 34px; padding: 7px; border-radius: 11px; }

.hv-chip-1 { top: 0; left: -1.2rem; animation: floatY 6s ease-in-out infinite; }
.hv-chip-2 { top: 42%; right: -1.6rem; animation: floatY 7.5s ease-in-out -2s infinite; }
.hv-chip-2 > svg { color: #059669; background: rgba(16, 185, 129, 0.16); }
.hv-chip-3 { bottom: 0; left: 8%; animation: floatY 8s ease-in-out -4s infinite; }
.hv-chip-3 > svg { color: #7c3aed; background: rgba(139, 92, 246, 0.16); }

.hv-ring { width: 38px; height: 38px; }
.hv-ring circle { fill: none; stroke-width: 4; }
.hv-ring-bg { stroke: var(--border-color); }
.hv-ring-fg {
    stroke: #8b5cf6;
    stroke-linecap: round;
    stroke-dasharray: 88;
    stroke-dashoffset: 88;
    transform: rotate(-90deg);
    transform-box: fill-box;
    transform-origin: center;
    animation: ringFill 1.8s 0.4s var(--ease-out) forwards;
}
@keyframes ringFill { to { stroke-dashoffset: 22; } }

@media (max-width: 1100px) and (min-width: 901px) {
    .hv-chip-1 { left: -0.3rem; }
    .hv-chip-2 { right: -0.4rem; }
}
@media (max-width: 900px) {
    .hero-visual { max-width: 460px; }
    .hv-chip-1 { left: 0; }
    .hv-chip-2 { right: 0; }
}
@media (max-width: 480px) {
    .hero-visual { padding: 1.8rem 0 2.2rem; }
    .hv-body { padding: 0.9rem; }
    .hv-chart { height: 104px; gap: 0.4rem; }
    .hv-row { font-size: 0.74rem; gap: 0.45rem; padding: 0.5rem 0.6rem; }
    .hv-row u { display: none; }
    .hv-row { grid-template-columns: auto 1fr auto; }
    .hv-chip { padding: 0.45rem 0.7rem 0.45rem 0.5rem; }
    .hv-chip strong { font-size: 0.76rem; }
    .hv-chip small { font-size: 0.64rem; }
    .hv-chip-3 { left: 2%; }
}

/* ---------- Ticker ---------- */
.ticker {
    position: relative;
    overflow: hidden;
    padding: 0.95rem 0;
    background: linear-gradient(90deg, #4f46e5, #7c3aed 50%, #db2777);
    color: #fff;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track {
    display: flex;
    width: max-content;
    animation: tick 32s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span {
    display: inline-flex;
    align-items: center;
    gap: 1.4rem;
    padding-right: 1.4rem;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.ticker span::after {
    content: '✦';
    opacity: 0.7;
    font-size: 0.8rem;
}
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- Sections: depth + decoration ---------- */
.who-we-help, .features, .benefits, .implementation-process, .contact-section,
.our-story, .mission-vision, .why-we-built, .what-makes-different, .industries-served {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.features::before, .benefits::before, .who-we-help::before, .contact-section::before,
.mission-vision::before, .industries-served::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 28rem; height: 28rem;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.35;
    pointer-events: none;
}
.features::before { top: -10rem; right: -8rem; background: radial-gradient(circle, rgba(139, 92, 246, 0.5), transparent 70%); }
.benefits::before { bottom: -10rem; left: -8rem; background: radial-gradient(circle, rgba(236, 72, 153, 0.4), transparent 70%); }
.who-we-help::before { top: -8rem; left: -6rem; background: radial-gradient(circle, rgba(34, 211, 238, 0.4), transparent 70%); }
.contact-section::before { top: -8rem; left: 50%; margin-left: -14rem; background: radial-gradient(circle, rgba(99, 102, 241, 0.55), transparent 70%); }
.mission-vision::before, .industries-served::before { top: -8rem; right: -8rem; background: radial-gradient(circle, rgba(139, 92, 246, 0.45), transparent 70%); }

.section-title { position: relative; padding-bottom: 0.9rem; }
.section-title::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0;
    width: 64px; height: 4px;
    border-radius: 4px;
    background: var(--grad-brand);
    transform: translateX(-50%);
}

/* ---------- Cards: spotlight + lift ---------- */
.stat, .feature-card, .industry-card, .benefit-item, .process-item,
.mission-card, .vision-card, .values-card, .why-item, .difference-card, .industry,
.service-main-card, .deployment-card, .package, .pricing-card, .expertise-card, .reason,
.case-section, .industry-section, .industry-challenges, .industry-solutions, .industry-result {
    position: relative;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.35s ease;
}
.stat::before, .feature-card::before, .industry-card::before, .benefit-item::before,
.mission-card::before, .vision-card::before, .values-card::before, .why-item::before,
.difference-card::before, .industry::before, .service-main-card::before, .deployment-card::before,
.package::before, .pricing-card::before, .expertise-card::before, .reason::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(139, 92, 246, 0.16), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.stat:hover::before, .feature-card:hover::before, .industry-card:hover::before, .benefit-item:hover::before,
.mission-card:hover::before, .vision-card:hover::before, .values-card:hover::before, .why-item:hover::before,
.difference-card:hover::before, .industry:hover::before, .service-main-card:hover::before,
.deployment-card:hover::before, .package:hover::before, .pricing-card:hover::before,
.expertise-card:hover::before, .reason:hover::before { opacity: 1; }

.feature-card:hover, .industry-card:hover, .benefit-item:hover, .stat:hover {
    border-color: rgba(139, 92, 246, 0.5);
}

.feature-icon, .industry-icon {
    transition: transform 0.4s var(--ease-out), background 0.3s ease, color 0.3s ease;
}
.feature-card:hover .feature-icon,
.industry-card:hover .industry-icon {
    transform: rotate(-8deg) scale(1.12);
    background: var(--grad-brand);
    color: #fff;
}

.industry-card { border-top: 0; overflow: hidden; }
.industry-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad-brand);
    transform: scaleX(0.25);
    transform-origin: left;
    transition: transform 0.5s var(--ease-out);
}
.industry-card:hover::after { transform: scaleX(1); }

.benefit-number, .process-number {
    background: var(--grad-brand);
    box-shadow: 0 10px 24px var(--glow);
}

/* ---------- How it works: connected timeline ---------- */
.process-timeline { position: relative; }
@media (min-width: 601px) {
    .process-timeline::before {
        content: '';
        position: absolute;
        top: 3rem; bottom: 3rem;
        left: 40px;
        width: 3px;
        border-radius: 3px;
        background: linear-gradient(180deg, #6366f1, #8b5cf6, #ec4899);
        opacity: 0.35;
    }
    .process-item { position: relative; }
}
.process-number { position: relative; z-index: 1; }
.process-item:hover { transform: translateX(6px); }

/* ---------- Inner-page headers ---------- */
.page-header {
    background:
        radial-gradient(circle at 15% 20%, rgba(236, 72, 153, 0.45), transparent 22rem),
        radial-gradient(circle at 85% 80%, rgba(34, 211, 238, 0.32), transparent 22rem),
        linear-gradient(135deg, #4338ca, #7c3aed 60%, #a855f7);
    isolation: isolate;
}
.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 20%, transparent 75%);
}
.page-header::after {
    content: '';
    position: absolute;
    right: 8%; top: 18%;
    width: 130px; height: 130px;
    z-index: -1;
    border-radius: 34% 66% 58% 42% / 42% 40% 60% 58%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: morph 12s ease-in-out infinite, floatY 8s ease-in-out infinite;
}
@keyframes morph {
    0%, 100% { border-radius: 34% 66% 58% 42% / 42% 40% 60% 58%; }
    50% { border-radius: 62% 38% 40% 60% / 58% 62% 38% 42%; }
}
.page-header h1 { text-shadow: 0 6px 30px rgba(0, 0, 0, 0.25); }
.page-header .container > * { animation: riseIn 0.9s var(--ease-out) both; }
.page-header .container > *:nth-child(2) { animation-delay: 0.12s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(24px); } }
@media (max-width: 600px) {
    .page-header::after { width: 80px; height: 80px; right: 4%; top: 12%; }
}

/* ---------- CTA band ---------- */
.contact-section .cta-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ---------- Footer ---------- */
.footer { position: relative; }
.footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #ec4899, #22d3ee, #6366f1);
}

/* ---------- Reveal-on-scroll (used by creative.js) ---------- */
:where(.cr-reveal) {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    transition-delay: var(--d, 0s);
}
/* :where() keeps this at zero specificity so card :hover lifts still win */
:where(.cr-reveal.cr-in) {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s var(--ease-out), transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.35s ease;
    transition-delay: 0s;
}

/* ---------- Small-screen safety net ---------- */
@media (max-width: 600px) {
    .hero-buttons .btn-large { width: 100%; }
    .ticker span { font-size: 0.85rem; }
    .section-title { padding-bottom: 0.7rem; }
}
@media (max-width: 360px) {
    .logo-text { font-size: 0.95rem; }
    .hero-badge { font-size: 0.75rem; }
}

/* Anything wide inside a card should scroll rather than blow out the page */
table { display: block; max-width: 100%; overflow-x: auto; }

/* ---------- Hero secondary text link ---------- */
.hero-textlink {
    color: var(--icon-color);
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 0.25rem;
    border-bottom: 2px solid transparent;
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.hero-textlink:hover { border-color: currentColor; transform: translateX(3px); }

/* ---------- Custom software section (always dark for contrast) ---------- */
.custom-software {
    padding: clamp(3.5rem, 8vw, 6rem) 0;
    background:
        radial-gradient(circle at 85% 15%, rgba(236, 72, 153, 0.35), transparent 26rem),
        radial-gradient(circle at 10% 90%, rgba(34, 211, 238, 0.22), transparent 24rem),
        linear-gradient(135deg, #1e1b4b, #312e81 55%, #4c1d95);
    color: #e9e7ff;
    position: relative;
    overflow: hidden;
}
.cs-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.cs-eyebrow {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    margin-bottom: 1.1rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c4b5fd;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.cs-copy h2 {
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: #fff;
    margin-bottom: 1rem;
}
.cs-copy h2 span {
    background: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientFlow 8s ease-in-out infinite;
}
.cs-copy p { color: #c7c4ee; font-size: 1.05rem; max-width: 34rem; margin-bottom: 1.4rem; }
.cs-list { list-style: none; display: grid; gap: 0.65rem; margin-bottom: 2rem; }
.cs-list li { position: relative; padding-left: 2rem; color: #ece9ff; }
.cs-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.2rem;
    width: 1.2rem; height: 1.2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #22d3ee, #8b5cf6);
}
.cs-list li::after {
    content: '';
    position: absolute;
    left: 0.4rem; top: 0.42rem;
    width: 0.3rem; height: 0.55rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.cs-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.cs-ghost {
    color: #fff;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
    padding: 0.7rem 1.6rem;
}
.cs-ghost:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }

.cs-visual { position: relative; padding: 2rem 0; max-width: 520px; width: 100%; margin-inline: auto; }
.cs-code {
    position: relative;
    border-radius: 20px;
    background: rgba(10, 8, 34, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    animation: floatY 8s ease-in-out infinite;
}
.cs-code-bar { display: flex; align-items: center; gap: 6px; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.cs-code-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.cs-code-bar i:nth-child(2) { background: #febc2e; }
.cs-code-bar i:nth-child(3) { background: #28c840; }
.cs-code-bar span { margin-left: 0.6rem; font-size: 0.75rem; color: #9a96c9; }
.cs-code-body { padding: 1.3rem 1.3rem 1.6rem; font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 0.88rem; line-height: 1.9; color: #d9d6ff; overflow: hidden; }
.cs-code-body p { white-space: nowrap; opacity: 0; animation: rowIn 0.6s var(--ease-out) forwards; }
.cs-code-body p:nth-child(1) { animation-delay: 0.2s; }
.cs-code-body p:nth-child(2) { animation-delay: 0.6s; }
.cs-code-body p:nth-child(3) { animation-delay: 1s; }
.cs-code-body p:nth-child(4) { animation-delay: 1.4s; }
.cs-code-body p:nth-child(5) { animation-delay: 1.8s; }
.cs-code-body p:nth-child(6) { animation-delay: 2.2s; }
.cs-code-body .in { padding-left: 1.6rem; }
.cs-code-body b { font-weight: 500; }
.cs-code-body .k { color: #f472b6; }
.cs-code-body .s { color: #86efac; }
.cs-code-body .f { color: #67e8f9; }
.cs-caret { display: inline-block; width: 8px; height: 1.1em; margin-left: 4px; vertical-align: text-bottom; background: #a78bfa; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.cs-tile {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.24);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}
.cs-tile svg { width: 18px; height: 18px; color: #67e8f9; }
.cs-tile-1 { top: 0; right: 4%; animation: floatY 6s ease-in-out infinite; }
.cs-tile-2 { bottom: 0; left: 4%; }
.cs-tile-3 { bottom: 0; right: 10%; animation: floatY 6.5s ease-in-out -3s infinite; }
.cs-tile-4 { top: 0; left: 4%; }

@media (max-width: 900px) {
    .cs-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .cs-code-body { font-size: 0.72rem; padding: 1rem; }
    .cs-actions .btn-large { width: 100%; }
    .cs-tile { font-size: 0.72rem; padding: 0.4rem 0.65rem; }
}

/* ---------- Services page: how we build ---------- */
.build-process { padding: 4rem 0; position: relative; }
.build-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.4rem;
}
.build-step {
    position: relative;
    padding: 1.6rem;
    border-radius: 22px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 28px var(--card-shadow);
    transition: transform 0.35s var(--ease-out), border-color 0.35s ease;
}
.build-step:hover { transform: translateY(-6px); border-color: rgba(139, 92, 246, 0.5); }
.build-num {
    display: block;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.8rem;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.build-step h3 { color: var(--text-dark); margin-bottom: 0.4rem; }
.build-step p { color: var(--text-light); line-height: 1.7; }
@media (min-width: 1000px) {
    .build-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 2.2rem; right: -1.45rem;
        width: 1.5rem; height: 3px;
        border-radius: 2px;
        background: var(--grad-brand);
        box-shadow: 0 0 10px var(--glow);
        opacity: 0.85;
    }
}
.build-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-top: 2.2rem; }
.build-chips span {
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--icon-color);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.build-chips span:hover { transform: translateY(-3px); background: var(--grad-brand); color: #fff; }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .cr-reveal { opacity: 1; transform: none; }
    .ticker-track { animation: none; }
}

/* ---------- Services page card polish (cards had no inner padding, bullets spilled out) ---------- */
.service-main-card { padding: 1.9rem; }
.service-main-card h3 { color: var(--text-dark); margin-bottom: 0.5rem; font-size: 1.25rem; }
.service-main-card > p { color: var(--text-light); line-height: 1.7; margin-bottom: 1rem; }
.service-features { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.service-features li { color: var(--text-dark); font-size: 0.95rem; }
.service-main-card:hover .service-icon { transform: rotate(-8deg) scale(1.1); background: var(--grad-brand); color: #fff; }
.service-icon { transition: transform 0.4s var(--ease-out), background 0.3s ease; }

/* ---------- Products mega-menu ---------- */
.nav-mega { min-width: 310px; padding: 0.6rem; background: var(--bg-white); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.nav-dropdown-menu.nav-mega a {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    white-space: normal;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
}
.nav-mega a strong { font-size: 0.95rem; font-weight: 600; }
.nav-mega a small { font-size: 0.78rem; font-weight: 400; color: var(--text-light); }
.nav-mega a:hover small { color: inherit; opacity: 0.8; }
.nav-mega a:hover { transform: translateX(3px); }
.nav-mega a { transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
@media (min-width: 769px) {
    /* Bridge the gap between button and menu so hover doesn't drop */
    .nav-item-dropdown::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 0.8rem; }
    .nav-dropdown-menu.nav-mega { animation: riseIn 0.25s var(--ease-out); }
}
@media (max-width: 768px) {
    .nav-mega { min-width: 0; }
    .nav-mega a small { display: none; }
}

/* ---------- Who We Help: six audience cards ---------- */
@media (min-width: 901px) {
    .industries-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 601px) and (max-width: 900px) {
    .industries-grid { grid-template-columns: repeat(2, 1fr); }
}
.industries-grid .cr-reveal:nth-child(n+5), .industries-grid .reveal-on-scroll:nth-child(5),
.industries-grid .reveal-on-scroll:nth-child(6) { transition-delay: 0.3s; }

/* ---------- Timesheet App buttons (nav + floating) ---------- */
.nav-app-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.55rem 1.1rem !important;
    border-radius: 999px !important;
    font-weight: 600;
    color: var(--icon-color) !important;
    border: 2px solid var(--primary-color);
    background: transparent;
    white-space: nowrap;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.nav-app-btn svg { width: 1.05rem; height: 1.05rem; }
.nav-app-btn:hover {
    background: var(--grad-brand) !important;
    color: #fff !important;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px var(--glow);
}
@media (min-width: 769px) and (max-width: 1040px) {
    .nav-app-btn { padding: 0.4rem 0.75rem !important; font-size: 0.86rem; min-height: 40px; }
    .nav-app-btn svg { display: none; }
}
@media (max-width: 768px) {
    .nav-app-btn { width: 100%; justify-content: center; margin-top: 0.3rem; }
}

@keyframes fabIn { from { opacity: 0; transform: translateY(24px) scale(0.9); } }

.nav-links a, .nav-dropdown-toggle, .logo-text { white-space: nowrap; }
@media (min-width: 769px) and (max-width: 880px) {
    /* No floating fallback exists for "open the app" at this width any more,
       so this shrinks the nav further rather than hiding the button outright. */
    .nav-links { gap: 0.35rem; }
    .nav-app-btn { padding: 0.35rem 0.6rem !important; }
    .nav-links a.btn-primary { padding: 0.5rem 0.9rem; }
}

/* Phone menu: opaque panel, keep the Open App outline */
@media (max-width: 768px) {
    .nav-links { background: var(--bg-white); max-height: calc(100vh - 88px); overflow-y: auto; }
    .nav-links a.nav-app-btn {
        border: 2px solid var(--primary-color) !important;
        justify-content: center;
        text-align: center;
        padding: 0.7rem 1rem !important;
    }
}

/* ---------- Dropdown refinement (desktop) ---------- */
.nav-dropdown-toggle { transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
.nav-item-dropdown:hover .nav-dropdown-toggle,
.nav-item-dropdown.open .nav-dropdown-toggle {
    background: rgba(99, 102, 241, 0.12);
    color: var(--icon-color);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.25);
}

.nav-dropdown-menu.nav-mega {
    min-width: 250px;
    width: max-content;
    max-width: 290px;
    margin-top: 0.7rem;
    padding: 0.45rem;
    border-radius: 16px;
    border: 1px solid var(--card-border);
    background: var(--bg-white);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.nav-dropdown-menu.nav-mega a {
    position: relative;
    padding: 0.7rem 2.2rem 0.7rem 0.95rem;
    border-radius: 11px;
    margin: 0;
}
.nav-dropdown-menu.nav-mega a + a { margin-top: 0.15rem; }
.nav-mega a::after {
    content: '\2192';
    position: absolute;
    right: 0.95rem;
    top: 50%;
    transform: translate(-6px, -50%);
    opacity: 0;
    font-size: 1rem;
    color: var(--primary-color);
    transition: opacity 0.2s ease, transform 0.25s var(--ease-out);
}
.nav-mega a:hover::after { opacity: 1; transform: translate(0, -50%); }
.nav-dropdown-menu.nav-mega a:hover { transform: none; background: rgba(99, 102, 241, 0.1); }
.nav-mega a strong { color: var(--text-dark); }
.nav-mega a:hover strong { color: var(--icon-color); }

@media (min-width: 769px) {
    /* pointer notch joining the menu to its button */
    .nav-dropdown-menu.nav-mega::before {
        content: '';
        position: absolute;
        top: -7px;
        left: 1.4rem;
        width: 12px; height: 12px;
        background: var(--bg-white);
        border-left: 1px solid var(--card-border);
        border-top: 1px solid var(--card-border);
        transform: rotate(45deg);
        border-top-left-radius: 3px;
    }
    /* Sits fairly far right in the nav (after Home/Services), so keep it
       right-aligned to its button rather than risk overflowing the viewport. */
    .nav-item-dropdown .nav-dropdown-menu.nav-mega { left: auto; right: -0.5rem; }
    .nav-item-dropdown .nav-dropdown-menu.nav-mega::before { left: auto; right: 1.6rem; }
}
@media (max-width: 768px) {
    .nav-dropdown-menu.nav-mega { width: 100%; max-width: none; padding: 0.3rem; }
    .nav-dropdown-menu.nav-mega a { padding: 0.8rem 1rem; }
    .nav-mega a::after { display: none; }
}

/* ---------- FAQ ---------- */
.faq { padding: clamp(3rem, 7vw, 5rem) 0; position: relative; }
.faq-list { max-width: 860px; margin: 0 auto; display: grid; gap: 0.85rem; }
.faq-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    box-shadow: 0 8px 22px var(--card-shadow);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq-item[open] { border-color: rgba(139, 92, 246, 0.5); }
.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-dark);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    width: 1.9rem; height: 1.9rem;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 1.25rem; line-height: 1;
    color: var(--icon-color);
    background: linear-gradient(135deg, var(--icon-bg-1), var(--icon-bg-2));
    transition: transform 0.3s var(--ease-out), background 0.3s ease, color 0.3s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--grad-brand); color: #fff; }
.faq-item summary:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; border-radius: 18px; }
.faq-item p { padding: 0 1.4rem 1.3rem; color: var(--text-light); line-height: 1.75; }
@media (max-width: 480px) {
    .faq-item summary { font-size: 0.98rem; padding: 1rem 1.05rem; }
    .faq-item p { padding: 0 1.05rem 1.1rem; font-size: 0.93rem; }
}

/* ==========================================================================
   Responsive hardening (all breakpoints)
   ========================================================================== */

/* Fluid gutters and vertical rhythm instead of fixed steps */
.container { padding-left: clamp(16px, 4.5vw, 40px); padding-right: clamp(16px, 4.5vw, 40px); }
.navbar .container { padding-left: clamp(14px, 4vw, 40px); padding-right: clamp(14px, 4vw, 40px); }
.who-we-help, .features, .benefits, .implementation-process, .contact-section {
    padding-top: clamp(2.6rem, 6vw, 4.5rem);
    padding-bottom: clamp(2.6rem, 6vw, 4.5rem);
}
.section-subtitle { font-size: clamp(0.95rem, 2.4vw, 1.1rem); margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.hero-content p { font-size: clamp(1rem, 2.6vw, 1.15rem); }
h1, h2, h3 { overflow-wrap: anywhere; }

/* Hero stat cards: 3 across only when there is room, otherwise stacked */
@media (min-width: 601px) and (max-width: 900px) {
    .hero-stats { grid-template-columns: 1fr; }
}
@media (min-width: 701px) and (max-width: 900px) {
    .hero-stats { grid-template-columns: repeat(3, 1fr); }
}

/* "How it works": on phones use a compact row (number + card) with a connecting line */
@media (max-width: 600px) {
    .process-timeline { gap: 1rem; padding: 1rem 0; }
    .process-timeline::before {
        content: '';
        position: absolute;
        top: 1.5rem; bottom: 1.5rem;
        left: 23px;
        width: 2px;
        background: linear-gradient(180deg, #6366f1, #ec4899);
        opacity: 0.35;
    }
    .process-item {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 0.9rem;
        align-items: start;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }
    .process-item:hover { transform: none; }
    .process-number { width: 48px; height: 48px; font-size: 1.2rem; }
    .process-content { padding: 1rem 1.1rem; }
    .process-content h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
    .process-content p { font-size: 0.92rem; line-height: 1.65; }
}

/* Touch devices and narrow screens: comfortable tap targets */
@media (pointer: coarse), (max-width: 768px) {
    .footer-section li { margin-bottom: 0.2rem; }
    .footer-section li a, .footer-section p a { display: inline-block; padding: 0.55rem 0; min-height: 44px; }
    .faq-item summary { min-height: 48px; }
    .nav-links a, .nav-dropdown-toggle { min-height: 44px; }
    .build-chips span { padding: 0.6rem 1.1rem; }
}

/* Very small phones (<= 340px) */
@media (max-width: 340px) {
    .hero-content h1 { font-size: 1.85rem; }
    .btn-large, .btn-primary, .btn-secondary { padding-left: 1rem; padding-right: 1rem; }
    .hv-chart { height: 90px; }
    .hv-chip-1, .hv-chip-3 { display: none; }
    .cs-tile-4, .cs-tile-1 { display: none; }
    .section-title { font-size: 1.4rem; }
}

/* Phones held sideways: short viewport, so trim vertical padding */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .who-we-help, .features, .benefits, .implementation-process, .contact-section, .custom-software, .faq, .build-process {
        padding-top: 2rem; padding-bottom: 2rem;
    }
    .wa-fab { bottom: 0.6rem; }
    .chat-fab { bottom: 0.6rem; }
    .nav-links { max-height: calc(100vh - 76px); overflow-y: auto; }
}

/* Large and ultra-wide screens */
@media (min-width: 2000px) {
    html { font-size: 19px; }
    .container { max-width: 1440px; }
    .navbar .container { max-width: 1600px; }
}

/* iOS: stop inputs zooming the page on focus */
@media (max-width: 768px) {
    input, select, textarea { font-size: 16px !important; }
}

/* ==========================================================================
   Mobile performance
   Phones are GPU/battery constrained: drop blur-based effects and endless
   paint-heavy animations, keep the cheap transform-only motion.
   ========================================================================== */

/* Below-the-fold sections are not rendered until they approach the viewport.
   (.who-we-help/.features/.implementation-process/.benefits used to be
   listed here too, but they now live inside the collapsible #saasDetails
   panel — content-visibility:auto reports a placeholder size for them while
   collapsed, which fights the panel's own height measurement. The panel
   already keeps them from being rendered until opened, so dropping them
   from this list loses nothing.) */
.custom-software, .contact-section, .build-process, .footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
}

@media (max-width: 768px), (pointer: coarse) {
    /* 1. No backdrop blur: it forces a re-blur of everything behind on every scroll frame */
    .navbar, .hv-window, .hv-chip, .cs-tile, .nav-mega, .nav-dropdown-menu, .hero-badge {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .navbar { background: var(--bg-white); }
    .hv-window, .hv-chip, .hero-badge { background: var(--bg-white); }
    .cs-tile { background: rgba(49, 46, 129, 0.92); }

    /* 2. Smaller blobs (cheaper to blur/paint); the two remaining hero orbs
       also stop drifting, since most of the site's other blobs are already
       static by default now. */
    .hero-orbs span { filter: blur(28px); opacity: 0.45; animation: none; }
    .hv-glow { filter: blur(40px); animation: none; opacity: 0.32; }
    .features::before, .benefits::before, .who-we-help::before, .contact-section::before,
    .mission-vision::before, .industries-served::before {
        width: 16rem; height: 16rem; filter: blur(34px);
    }

    /* 3. Stop the two remaining endless background-position gradient loops */
    .hero-content h1, .cs-copy h2 span { animation: none; }
    .page-header::after { animation: floatY 8s ease-in-out infinite; }
    .btn-primary::after { display: none; }

    /* 4. Lighter shadows (large-radius shadows are costly to rasterize) */
    .stat, .feature-card, .industry-card, .benefit-item, .process-item, .process-content,
    .mission-card, .vision-card, .values-card, .why-item, .difference-card, .industry,
    .service-main-card, .deployment-card, .package, .pricing-card, .expertise-card, .reason,
    .case-section, .industry-section, .industry-challenges, .industry-solutions, .industry-result,
    .faq-item, .build-step, .story-content, .contact-form {
        box-shadow: 0 4px 12px var(--card-shadow);
    }
    .hv-window, .cs-code { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32); }
    .hv-chip, .cs-tile, .nav-mega { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); }
}

/* Touch screens have no hover: skip the spotlight layer and lift effects */
@media (hover: none) {
    .stat::before, .feature-card::before, .industry-card::before, .benefit-item::before,
    .mission-card::before, .vision-card::before, .values-card::before, .why-item::before,
    .difference-card::before, .industry::before, .service-main-card::before, .deployment-card::before,
    .package::before, .pricing-card::before, .expertise-card::before, .reason::before { display: none; }
    .industry-card::after { transform: scaleX(1); }
}

/* Save-data / slow connections: no decorative motion at all */
@media (prefers-reduced-data: reduce) {
    *, *::before, *::after { animation: none !important; }
    .hero-orbs, .hv-glow { display: none; }
}

/* ==========================================================================
   Portfolio section
   ========================================================================== */
.portfolio { padding: clamp(3rem, 7vw, 5rem) 0; position: relative; }
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.6rem;
}
.portfolio-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg, 22px);
    box-shadow: 0 10px 28px var(--card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.35s ease;
}
.portfolio-card:hover { transform: translateY(-6px); border-color: rgba(139, 92, 246, 0.45); box-shadow: 0 22px 48px rgba(99, 102, 241, 0.18); }
.portfolio-thumb {
    position: relative;
    height: 190px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #4338ca, #7c3aed 55%, #db2777);
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
}
.portfolio-thumb svg { width: 3rem; height: 3rem; }
.portfolio-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    cursor: zoom-in;
    transition: transform 0.4s var(--ease-out);
}
.portfolio-card:hover .portfolio-thumb img { transform: scale(1.04); }
.portfolio-thumb .portfolio-zoom {
    position: absolute;
    right: 0.7rem; bottom: 0.7rem;
    width: 2rem; height: 2rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(17, 24, 39, 0.55);
    color: #fff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    pointer-events: none;
}
.portfolio-thumb .portfolio-zoom svg { width: 1rem; height: 1rem; }
.portfolio-badge {
    position: absolute;
    top: 0.8rem; left: 0.8rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(16, 185, 129, 0.9);
}
.portfolio-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.portfolio-body h3 { color: var(--text-dark); font-size: 1.2rem; }
.portfolio-body p { color: var(--text-light); line-height: 1.65; font-size: 0.95rem; flex: 1; }
.portfolio-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.portfolio-tags span {
    font-size: 0.75rem; font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    color: var(--icon-color);
    background: linear-gradient(135deg, var(--icon-bg-1), var(--icon-bg-2));
}
.portfolio-link {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin-top: 0.3rem;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}
.portfolio-link svg { width: 1rem; height: 1rem; transition: transform 0.25s ease; }
.portfolio-link:hover svg { transform: translate(2px, -2px); }

.portfolio-card.is-placeholder {
    background: transparent;
    border: 1.5px dashed var(--card-border);
    box-shadow: none;
}
.portfolio-card.is-placeholder:hover { transform: none; box-shadow: none; border-color: rgba(139, 92, 246, 0.4); }
.portfolio-card.is-placeholder .portfolio-thumb { background: var(--bg-light); color: var(--text-light); }
.portfolio-plus { font-size: 2.4rem; font-weight: 300; line-height: 1; color: var(--text-light); }
.portfolio-card.is-placeholder h3 { color: var(--text-light); }
.portfolio-card.is-placeholder p { font-size: 0.88rem; }

/* ==========================================================================
   Profile / service-provider section
   ========================================================================== */
.profile { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.profile-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1.4rem, 4vw, 2.5rem);
    align-items: start;
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(1.6rem, 4vw, 2.5rem);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg, 22px);
    box-shadow: 0 10px 28px var(--card-shadow);
}
.profile-avatar {
    width: 88px; height: 88px;
    border-radius: 50%;
    padding: 3px;
    background: var(--grad-brand);
    flex-shrink: 0;
}
.profile-avatar img { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; background: var(--bg-white); }
.profile-eyebrow {
    display: inline-block;
    font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--icon-color);
    margin-bottom: 0.4rem;
}
.profile-info h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--text-dark); margin-bottom: 0.25rem; }
.profile-title { color: var(--primary-color); font-weight: 600; margin-bottom: 0.7rem; }
.profile-bio { color: var(--text-light); line-height: 1.7; margin-bottom: 1rem; max-width: 60ch; }
.profile-skills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
.profile-skills span {
    font-size: 0.8rem; font-weight: 600;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    color: var(--text-dark);
    background: var(--bg-light);
    border: 1px solid var(--border-color);
}
.profile-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.profile-whatsapp {
    display: inline-flex; align-items: center; gap: 0.55rem;
    background: #25d366; color: #fff; border: none;
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35);
}
.profile-whatsapp:hover { background: #20bd5a; transform: translateY(-2px); }
.profile-whatsapp svg { width: 1.15rem; height: 1.15rem; }

@media (max-width: 560px) {
    .profile-card { grid-template-columns: 1fr; text-align: center; }
    .profile-avatar { margin: 0 auto; }
    .profile-skills, .profile-actions { justify-content: center; }
    .profile-bio { max-width: none; }
}

/* ==========================================================================
   WhatsApp floating button (bottom-left; the chat widget below sits in the
   matching bottom-right spot)
   ========================================================================== */
.wa-fab {
    position: fixed;
    left: 1.2rem;
    bottom: 1.2rem;
    z-index: 900;
    width: 3.4rem; height: 3.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 14px 34px rgba(37, 211, 102, 0.5);
    animation: fabIn 0.7s 1.15s var(--ease-out) both;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wa-fab svg { width: 1.7rem; height: 1.7rem; }
.wa-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 18px 40px rgba(37, 211, 102, 0.6); }
.wa-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 600px) {
    .wa-fab { left: 0.9rem; bottom: 0.9rem; width: 3.1rem; height: 3.1rem; }
    .wa-fab svg { width: 1.5rem; height: 1.5rem; }
}
@media print { .wa-fab { display: none; } }

/* ==========================================================================
   Chat widget (bubble + panel), bottom-right
   ========================================================================== */
.chat-fab {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 901;
    width: 3.4rem; height: 3.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6 50%, #ec4899);
    box-shadow: 0 14px 34px var(--glow);
    animation: fabIn 0.7s 1.3s var(--ease-out) both;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.chat-fab:hover { transform: translateY(-3px) scale(1.05); }
.chat-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.chat-fab svg { width: 1.6rem; height: 1.6rem; position: absolute; transition: opacity 0.2s ease, transform 0.2s ease; }
.chat-fab .ci-close { opacity: 0; transform: rotate(-45deg) scale(0.7); }
.chat-fab[aria-expanded="true"] .ci-chat { opacity: 0; transform: rotate(45deg) scale(0.7); }
.chat-fab[aria-expanded="true"] .ci-close { opacity: 1; transform: none; }
.chat-ping {
    position: absolute;
    top: -2px; right: -2px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #ec4899;
    border: 2px solid var(--bg-white);
    animation: pulseDot 2s infinite;
}
.chat-fab[data-seen="true"] .chat-ping,
.chat-fab[aria-expanded="true"] .chat-ping { display: none; }
@media (max-width: 600px) {
    .chat-fab { right: 0.9rem; bottom: 0.9rem; width: 3.1rem; height: 3.1rem; }
}

.chat-panel {
    position: fixed;
    right: 1.2rem;
    bottom: 5.3rem;
    z-index: 950;
    width: 400px;
    max-width: calc(100vw - 2.4rem);
    height: min(620px, 74vh);
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: chatIn 0.18s ease-out;
}
.chat-panel[hidden] { display: none; }
/* Opacity-only: a transform/scale on this exact box (which also clips its
   children via border-radius + overflow:hidden) triggered a stale-paint bug
   in at least one rendering path, where the box briefly rendered as if its
   own background never painted. Keeping the entrance animation to opacity
   avoids re-deriving the rounded clip during a scale each frame. */
@keyframes chatIn { from { opacity: 0; } }

.chat-head {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.9rem 1rem;
    background: var(--grad-brand);
    color: #fff;
    flex-shrink: 0;
}
.chat-avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #fff; padding: 3px; object-fit: contain; }
.chat-head-text { flex: 1; min-width: 0; }
.chat-head-text strong { display: block; font-size: 0.95rem; }
.chat-head-text small { display: block; font-size: 0.74rem; opacity: 0.9; }
.chat-close {
    background: rgba(255, 255, 255, 0.18);
    border: none; color: #fff;
    width: 1.9rem; height: 1.9rem;
    border-radius: 50%;
    font-size: 1.1rem; line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.chat-close:hover { background: rgba(255, 255, 255, 0.3); }

.chat-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--bg-white);
}
.chat-msg { max-width: 88%; padding: 0.65rem 0.9rem; border-radius: 14px; font-size: 0.88rem; line-height: 1.55; animation: chatMsgIn 0.28s var(--ease-out); }
.chat-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.chat-msg.bot { align-self: flex-start; background: var(--bg-light); border: 1px solid var(--border-color); color: var(--text-dark); border-bottom-left-radius: 4px; }
.chat-msg.user { align-self: flex-end; background: var(--grad-brand); color: #fff; border-bottom-right-radius: 4px; }
@keyframes chatMsgIn { from { opacity: 0; transform: translateY(8px); } }

/* Bullet answers: a checkmark list instead of a dense paragraph */
.chat-list { list-style: none; margin: 0.5rem 0; padding: 0; display: grid; gap: 0.4rem; }
.chat-list li { display: flex; align-items: flex-start; gap: 0.45rem; }
.chat-check { width: 0.95rem; height: 0.95rem; margin-top: 0.15rem; flex-shrink: 0; color: #22c55e; }
[data-theme="dark"] .chat-check, :root:not([data-theme]) .chat-check { color: #34d399; }

/* Mini link cards, e.g. for the portfolio answer */
.chat-cards { display: grid; gap: 0.5rem; margin: 0.55rem 0; }
.chat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    border-radius: 12px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: inherit;
    text-decoration: none !important;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.chat-card:hover { border-color: var(--primary-color); transform: translateX(2px); }
.chat-card strong { font-size: 0.85rem; }
.chat-card span { font-size: 0.74rem; color: var(--text-light); white-space: nowrap; }

.chat-quick {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    padding: 0.7rem 1rem; flex-shrink: 0;
    background: var(--bg-white); border-top: 1px solid var(--border-color);
    max-height: 40%; overflow-y: auto;
}
/* The opening 6-item main menu reads as a proper grid of options; smaller
   follow-up sets (2-3 chips) stay as an inline wrapped row. */
.chat-quick.chat-quick-menu { display: grid; grid-template-columns: 1fr 1fr; }
.chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; font-weight: 600;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--icon-color);
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.chat-quick-menu .chip { border-radius: 12px; padding: 0.55rem 0.7rem; }
.chip-icon { display: inline-flex; flex-shrink: 0; width: 1rem; height: 1rem; }
.chip-icon svg { width: 100%; height: 100%; }
.chip:hover { background: var(--grad-brand); color: #fff; border-color: transparent; transform: translateY(-1px); }
.chat-input-row {
    display: flex; gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-white);
    flex-shrink: 0;
}
.chat-input-row input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-dark);
    font: inherit;
    font-size: 0.88rem;
}
.chat-input-row input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.chat-input-row button {
    width: 2.3rem; height: 2.3rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: var(--grad-brand);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.chat-typing { display: inline-flex; gap: 3px; align-self: flex-start; padding: 0.7rem 0.9rem; background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 14px; border-bottom-left-radius: 4px; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-light); animation: typingDot 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

@media (max-width: 600px) {
    .chat-panel {
        right: 0.6rem; left: 0.6rem; bottom: 4.6rem;
        width: auto; max-width: none;
        height: min(68vh, 560px);
    }
}
@media (max-width: 768px) {
    /* Clears the single row of corner buttons at the foot of the page. */
    .footer-bottom { padding-bottom: 4.8rem; }
}
@media print { .chat-fab, .chat-panel { display: none; } }

/* ==========================================================================
   Portfolio lightbox: click a project screenshot to view it full-size.
   ========================================================================== */
.pf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 2.5rem 1.2rem;
    background: rgba(8, 10, 20, 0.86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    animation: pfFade 0.2s ease forwards;
}
.pf-lightbox[hidden] { display: none; }
@keyframes pfFade { to { opacity: 1; } }
.pf-lightbox img {
    max-width: min(920px, 92vw);
    max-height: 84vh;
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    animation: pfZoom 0.22s var(--ease-out);
}
@keyframes pfZoom { from { transform: scale(0.94); opacity: 0; } }
.pf-lightbox-close {
    position: absolute;
    top: 1.1rem; right: 1.1rem;
    width: 2.6rem; height: 2.6rem;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}
.pf-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.pf-lightbox-caption {
    position: absolute;
    bottom: 1.4rem; left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 0.9rem;
    opacity: 0.85;
    text-align: center;
    max-width: 90vw;
}
@media (max-width: 480px) {
    .pf-lightbox-close { top: 0.7rem; right: 0.7rem; width: 2.3rem; height: 2.3rem; }
}

/* ==========================================================================
   Home page: SaaS product details toggle
   Portfolio + the custom-software pitch lead the page; the full product
   deep-dive (hero, ticker, who-we-help, features, how-it-works, why-aarveta)
   is tucked behind this button so a first-time visitor sees the work first.
   ========================================================================== */
.saas-toggle-wrap {
    display: flex;
    justify-content: center;
    padding: 1rem 1rem 2.5rem;
}
.saas-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1.75rem;
    border-radius: 999px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--icon-color);
    font: inherit;
    font-weight: 600;
    font-size: 0.98rem;
    cursor: pointer;
    box-shadow: 0 10px 26px var(--card-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.saas-toggle:hover {
    transform: translateY(-2px);
    background: var(--grad-brand);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 16px 34px var(--glow);
}
.saas-toggle:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}
.saas-toggle-chevron {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
    transition: transform 0.35s var(--ease-out);
}
.saas-toggle[aria-expanded="true"] .saas-toggle-chevron {
    transform: rotate(180deg);
}

/* Shown/hidden instantly via the [hidden] attribute (zero layout cost while
   closed — nothing between here and the final CTA when collapsed). Both a
   CSS grid 0fr->1fr trick and a JS-measured max-height transition were
   tried and tested here first; transitioning a large computed height turned
   out to be visually unreliable (computed style was correct but the paint
   didn't reliably follow). Fading opacity/transform instead never has that
   problem, since it never asks the browser to animate layout height. */
.saas-details[hidden] { display: none; }
.saas-details-inner {
    padding-bottom: 0.5rem;
    opacity: 0;
    transform: translateY(-14px);
}
.saas-details.is-open .saas-details-inner {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s ease, transform 0.45s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .saas-details-inner { transition: none; }
    .saas-toggle-chevron { transition: none; }
}

@media (max-width: 480px) {
    .saas-toggle { padding: 0.8rem 1.35rem; font-size: 0.9rem; gap: 0.5rem; text-align: left; }
    .saas-toggle-wrap { padding: 0.5rem 1rem 2rem; }
}

/* ==========================================================================
   Industry page icons + case-study result stats: these were plain/static
   (no hover, no entrance motion) — small, purposeful additions only.
   ========================================================================== */
.industry-icon-large {
    transition: transform 0.4s var(--ease-out), background 0.3s ease, color 0.3s ease;
}
.industry-detail:hover .industry-icon-large {
    transform: rotate(-8deg) scale(1.1);
    background: var(--grad-brand);
    color: #fff;
}

.result-item {
    position: relative;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, border-color 0.3s ease;
}
.result-item:hover {
    transform: translateY(-4px);
    border-color: rgba(139, 92, 246, 0.45);
    box-shadow: 0 14px 30px var(--card-shadow);
}
.result-number {
    display: inline-block;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Homepage live examples: guide visitors from a preview to the working site. */
.portfolio-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.portfolio-card { min-width: 0; }
.portfolio-badge { z-index: 1; }
.portfolio-explore { padding: 1rem; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-light); }
.portfolio-explore h4 { color: var(--text-dark); font-size: 0.85rem; margin: 0 0 0.5rem; }
.portfolio-explore ul { margin: 0; padding-left: 1.1rem; color: var(--text-dark); font-size: 0.85rem; line-height: 1.8; }
.portfolio-explore .portfolio-demo-note { margin: 0.65rem 0 0; font-size: 0.8rem; line-height: 1.6; }
.portfolio-link { min-height: 44px; }
.portfolio-link:focus-visible { outline: 3px solid var(--icon-color); outline-offset: 4px; border-radius: 4px; }
.portfolio-next-step { margin-top: 2rem; text-align: center; }
.portfolio-next-step > p { color: var(--text-dark); margin-bottom: 1rem; font-weight: 600; }
.portfolio-demo-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.8rem; }
@media (max-width: 480px) {
    .portfolio-body { padding: 1.2rem; }
    .portfolio-demo-actions { flex-direction: column; }
    .portfolio-demo-actions a { width: 100%; text-align: center; }
}

.portfolio-badge--demo { background: #6d28d9; }
.portfolio-demo-thumb img { cursor: pointer; }
.portfolio-demo-thumb:focus-visible { outline: 3px solid var(--icon-color); outline-offset: -3px; }