/* =====================================================================
   Alfa House Software — Futuristic Custom Stylesheet
   Dark glass / neon theme · Navy #0b2240 base · Electric Blue #007bff
   + Cyan #22d3ee glow accents. Mobile-first, ultra-wide ready.
   ===================================================================== */

:root {
    /* Core palette */
    --navy:        #0b2240;
    --bg:          #060b18;
    --bg-2:        #0a1428;
    --bg-3:        #0d1a33;

    --accent:      #2f8bff;   /* electric blue */
    --accent-600:  #007bff;
    --accent-300:  #6fb4ff;
    --cyan:        #22d3ee;   /* neon cyan */
    --violet:      #7c5cff;
    --orange:      #f2822e;   /* brand orange (logo) */
    --orange-300:  #ffb066;

    /* Glass surfaces */
    --panel:        rgba(255, 255, 255, .045);
    --panel-2:      rgba(255, 255, 255, .07);
    --panel-border: rgba(255, 255, 255, .10);
    --panel-glow:   rgba(47, 139, 255, .35);

    /* Text */
    --heading:     #f4f8ff;
    --text:        #aebbd2;
    --muted:       #7e8aa6;

    /* Effects */
    --grad-brand:  linear-gradient(120deg, #2f8bff 0%, #22d3ee 100%);
    --grad-brand-2:linear-gradient(120deg, #7c5cff 0%, #2f8bff 55%, #22d3ee 100%);
    --grad-orange: linear-gradient(120deg, #ff6f2c 0%, #ffb04d 100%);
    --shadow-sm:   0 6px 20px rgba(0, 0, 0, .35);
    --shadow-md:   0 18px 40px rgba(0, 0, 0, .45);
    --shadow-lg:   0 30px 70px rgba(0, 0, 0, .55);
    --glow:        0 0 40px rgba(47, 139, 255, .35);
    --radius:      18px;
    --radius-sm:   13px;
    --ease:        cubic-bezier(.22, .61, .36, 1);

    /* Theming tokens (overridden by the light theme) */
    --grid-line:   rgba(255, 255, 255, .022);
    --section-alt: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0));
    --wave-fill:   #060b18;
    --nav-bg:      rgba(6, 11, 24, .72);
}

/* ---------- Base ---------- */
* { scroll-behavior: smooth; }
html { font-size: 16px; }

body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    background-color: var(--bg);
    background-image:
        radial-gradient(900px 600px at 12% -5%, rgba(47, 139, 255, .18), transparent 55%),
        radial-gradient(1000px 700px at 100% 0%, rgba(34, 211, 238, .12), transparent 55%),
        radial-gradient(1100px 800px at 50% 120%, rgba(124, 92, 255, .12), transparent 55%);
    background-attachment: fixed;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* faint tech grid overlay */
body::before {
    content: "";
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, h4, h5, .display-1, .display-2, .display-3, .display-4 {
    font-family: 'Manrope', system-ui, sans-serif;
    color: var(--heading);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.14;
}

a { color: var(--accent-300); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--cyan); }
p { color: var(--text); }

section[id], article[id] { scroll-margin-top: 92px; }

.section { padding: clamp(3.5rem, 7vw, 7rem) 0; position: relative; }
.section-alt { background: var(--section-alt); }

.skip-link {
    position: absolute; z-index: 2000; top: .5rem; left: .5rem;
    background: var(--accent); color: #fff; padding: .5rem .9rem; border-radius: 8px;
}

.text-gradient {
    background: var(--grad-brand);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Eyebrow + titles ---------- */
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .78rem;
    letter-spacing: .16em; text-transform: uppercase; color: var(--cyan);
    background: rgba(34, 211, 238, .08); border: 1px solid rgba(34, 211, 238, .25);
    padding: .42rem .9rem; border-radius: 999px; margin-bottom: 1.1rem;
    box-shadow: 0 0 20px rgba(34, 211, 238, .15);
}
.eyebrow i { color: var(--orange-300); }
.section-title { font-size: clamp(1.8rem, 3.8vw, 2.9rem); margin-bottom: .8rem; }
.section-lead { color: var(--muted); font-size: 1.08rem; max-width: 640px; }
.title-underline { width: 72px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #2f8bff, #22d3ee 55%, #ff8a3d);
    margin: 1.1rem auto 0; box-shadow: 0 0 16px var(--panel-glow); }

/* ---------- Buttons ---------- */
.btn { font-family: 'Manrope', sans-serif; font-weight: 700; border-radius: 12px;
    padding: .78rem 1.6rem; transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), filter .25s var(--ease);
    position: relative; overflow: hidden; }
.btn:active { transform: translateY(1px); }

.btn-accent { background: var(--grad-brand); border: none; color: #041022; box-shadow: 0 10px 30px rgba(47, 139, 255, .45); }
.btn-accent:hover { color: #041022; transform: translateY(-3px); box-shadow: 0 16px 40px rgba(47, 139, 255, .6); filter: brightness(1.08); }
.btn-accent::after {
    content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-20deg); transition: left .6s var(--ease);
}
.btn-accent:hover::after { left: 140%; }

.btn-ghost { background: rgba(255, 255, 255, .05); border: 1px solid var(--panel-border); color: var(--heading); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; transform: translateY(-3px); border-color: rgba(47, 139, 255, .5); }

.btn-outline-light-accent { background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: #fff; }
.btn-outline-light-accent:hover { background: rgba(255, 255, 255, .1); color: #fff; transform: translateY(-3px); border-color: var(--cyan); }

.btn-navy { background: #041022; border: 1px solid rgba(255, 255, 255, .12); color: #fff; }
.btn-navy:hover { background: #08182f; color: #fff; transform: translateY(-3px); }

/* ---------- Navbar ---------- */
.ahs-navbar {
    background: var(--nav-bg);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
    padding-top: .55rem; padding-bottom: .55rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.navbar-brand { padding: 0; }
.brand-mark {
    width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 13px; color: #041022; font-size: 1.2rem;
    background: var(--grad-brand);
    box-shadow: 0 6px 18px rgba(47, 139, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.brand-text { line-height: 1; display: flex; flex-direction: column; }
.brand-name { font-family: 'Manrope', sans-serif; font-weight: 800; color: #5aa2ff; font-size: 1.14rem; letter-spacing: -.01em; }
.brand-sub { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .7rem; letter-spacing: .26em; text-transform: uppercase;
    background: var(--grad-orange); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.ahs-navbar .nav-link { color: rgba(233, 240, 251, .78); font-family: 'Manrope', sans-serif; font-weight: 600; font-size: .95rem;
    padding: .5rem .95rem; border-radius: 9px; position: relative; transition: color .2s var(--ease), background .2s var(--ease); }
.ahs-navbar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.ahs-navbar .nav-link.active { color: #fff; }
.ahs-navbar .nav-link.active::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    bottom: .16rem; width: 22px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #2f8bff, #ff8a3d);
    box-shadow: 0 0 12px var(--panel-glow);
}
.navbar-toggler { border-color: rgba(255, 255, 255, .25); }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(47, 139, 255, .4); }

/* Dropdown (Προγράμματα) */
.ahs-navbar .dropdown-menu {
    background: rgba(10, 20, 40, .96);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--panel-border); border-radius: 14px;
    box-shadow: var(--shadow-md); padding: .5rem; margin-top: .6rem; min-width: 260px;
}
.ahs-navbar .dropdown-item {
    color: rgba(233, 240, 251, .82); border-radius: 9px; padding: .6rem .8rem;
    font-family: 'Manrope', sans-serif; font-weight: 600; font-size: .92rem;
    display: flex; align-items: center; gap: .7rem; transition: background .2s var(--ease), color .2s var(--ease);
}
.ahs-navbar .dropdown-item i { width: 20px; text-align: center; color: var(--cyan); }
.ahs-navbar .dropdown-item:hover, .ahs-navbar .dropdown-item:focus { background: rgba(47, 139, 255, .16); color: #fff; }
.ahs-navbar .dropdown-item.active { background: rgba(47, 139, 255, .22); color: #fff; }
.ahs-navbar .dropdown-divider { border-color: rgba(255, 255, 255, .1); }
.ahs-navbar .dropdown-header { color: var(--muted); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Hero ---------- */
.hero {
    position: relative; color: #fff; overflow: hidden;
    padding: clamp(4.5rem, 11vw, 9rem) 0 clamp(4.5rem, 10vw, 8rem);
    background: linear-gradient(180deg, #091a33 0%, #060b18 78%);
}
.hero::before {
    content: ""; position: absolute; inset: -20% -10% auto -10%; height: 120%;
    background:
        radial-gradient(600px 320px at 20% 20%, rgba(47, 139, 255, .35), transparent 60%),
        radial-gradient(560px 320px at 85% 30%, rgba(34, 211, 238, .28), transparent 60%),
        radial-gradient(560px 340px at 60% 90%, rgba(124, 92, 255, .22), transparent 60%);
    filter: blur(6px); animation: heroGlow 14s ease-in-out infinite alternate; pointer-events: none;
}
@keyframes heroGlow {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(0, -18px, 0) scale(1.06); }
}
.hero > .container { position: relative; z-index: 2; }
.hero-badge {
    display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .84rem;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
    padding: .45rem 1rem; border-radius: 999px; color: #eaf2ff; margin-bottom: 1.4rem;
    backdrop-filter: blur(6px); box-shadow: 0 0 24px rgba(34, 211, 238, .18);
}
.hero-badge .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(242, 130, 46, .6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, .6); } 70% { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); } }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 5.6vw, 4rem); margin-bottom: 1.15rem; }
.hero h1 .accent { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-sub { color: rgba(224, 233, 248, .82); font-size: clamp(1.02rem, 2.2vw, 1.22rem); max-width: 640px; margin-bottom: 2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 3rem; }
.hero-stats .num { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 2rem; line-height: 1;
    background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-stats .lbl { color: rgba(224, 233, 248, .7); font-size: .84rem; }

.hero-visual { position: relative; }
.hero-card {
    background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: var(--radius); padding: 1.5rem; backdrop-filter: blur(12px);
    box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
    animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hero-card::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px;
    background: var(--grad-brand-2); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; opacity: .5; pointer-events: none; }
.hero-card .mini {
    display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: 13px;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); margin-bottom: .8rem;
    transition: transform .25s var(--ease), background .25s var(--ease);
}
.hero-card .mini:hover { transform: translateX(4px); background: rgba(255, 255, 255, .08); }
.hero-card .mini:last-child { margin-bottom: 0; }
.hero-card .mini i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px;
    background: var(--grad-brand); color: #041022; font-size: 1.05rem; box-shadow: 0 0 18px rgba(47, 139, 255, .4); }
.hero-card .mini .t { font-family: 'Manrope', sans-serif; font-weight: 700; color: #fff; font-size: .98rem; }
.hero-card .mini .d { color: rgba(224, 233, 248, .65); font-size: .82rem; }

.hero-wave { display: block; width: 100%; height: auto; margin-bottom: -6px; position: relative; z-index: 2; }
.hero-wave path { fill: var(--wave-fill); }

/* ---------- About ---------- */
.about-photo {
    position: relative; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--panel-border); box-shadow: var(--shadow-lg);
}
.about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2;
    transition: transform .8s var(--ease); }
.about-photo:hover img { transform: scale(1.05); }
.about-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 45%, rgba(4,10,22,.72) 100%); }
.about-photo-badge {
    position: absolute; left: 1rem; bottom: 1rem; z-index: 1; display: flex; gap: .8rem; align-items: center;
    padding: .7rem 1rem; border-radius: 13px; color: #fff;
    background: rgba(6, 12, 26, .62); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px);
}
.about-photo-badge i { font-size: 1.5rem; color: var(--orange-300); }
.about-photo-badge strong { display: block; font-family: 'Manrope', sans-serif; font-size: 1rem; line-height: 1.1; }
.about-photo-badge span { font-size: .82rem; color: rgba(224,233,248,.8); }

.about-illustration {
    background: linear-gradient(150deg, rgba(47, 139, 255, .12), rgba(34, 211, 238, .06));
    border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 2rem; color: #fff;
    box-shadow: var(--shadow-md); position: relative; overflow: hidden; backdrop-filter: blur(10px);
}
.about-illustration::before {
    content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 211, 238, .4), transparent 70%); top: -70px; right: -70px; filter: blur(4px);
}
.about-feature {
    display: flex; gap: 1rem; align-items: flex-start; position: relative; z-index: 1;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09);
    padding: 1.1rem 1.2rem; border-radius: 13px; margin-bottom: 1rem;
    transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.about-feature:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .08); border-color: rgba(47, 139, 255, .4); }
.about-feature:last-child { margin-bottom: 0; }
.about-feature i { color: var(--cyan); font-size: 1.5rem; margin-top: .15rem; }
.about-feature h4 { color: #fff; font-size: 1.02rem; margin-bottom: .15rem; }
.about-feature p { color: rgba(224, 233, 248, .72); font-size: .9rem; margin: 0; }

.about-list { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.about-list li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .8rem; color: var(--text); }
.about-list li i { color: var(--cyan); margin-top: .28rem; }

.stat-badges { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.9rem; }
.stat-badge { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-sm);
    padding: 1rem 1.3rem; box-shadow: var(--shadow-sm); flex: 1 1 140px; backdrop-filter: blur(8px); }
.stat-badge .num { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.75rem; line-height: 1;
    background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-badge .lbl { color: var(--muted); font-size: .84rem; }

/* ---------- Cards (products) ---------- */
.product-card {
    height: 100%; background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: var(--radius); padding: 2rem 1.7rem; box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
    position: relative; overflow: hidden; backdrop-filter: blur(8px);
}
.product-card::after {
    content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px; opacity: 0;
    background: var(--grad-brand-2); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .35s var(--ease); pointer-events: none;
}
.product-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg), var(--glow); background: rgba(255, 255, 255, .06); }
.product-card:hover::after { opacity: 1; }
.product-icon {
    width: 64px; height: 64px; border-radius: 17px; display: grid; place-items: center; font-size: 1.65rem;
    color: var(--cyan); background: rgba(47, 139, 255, .12); border: 1px solid rgba(47, 139, 255, .25); margin-bottom: 1.3rem;
    transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.product-card:hover .product-icon { background: var(--grad-brand); color: #041022; transform: rotate(-6deg) scale(1.08); box-shadow: 0 0 26px rgba(47, 139, 255, .5); }
.product-card h3 { font-size: 1.22rem; margin-bottom: .55rem; }
.product-card p { font-size: .94rem; color: var(--text); margin-bottom: 1rem; }
.product-card .product-link { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .9rem; color: var(--accent-300);
    display: inline-flex; align-items: center; gap: .4rem; }
.product-card .product-link i { color: var(--orange-300); transition: transform .25s var(--ease); }
.product-card:hover .product-link { color: var(--cyan); }
.product-card:hover .product-link i { transform: translateX(5px); }

/* ---------- Contact ---------- */
.contact-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.contact-item:last-of-type { border-bottom: none; }
.contact-item .ci-icon { width: 48px; height: 48px; border-radius: 13px; flex: 0 0 48px; display: grid; place-items: center;
    background: rgba(47, 139, 255, .12); border: 1px solid rgba(47, 139, 255, .25); color: var(--cyan); font-size: 1.05rem; }
.contact-item h4 { font-size: 1rem; margin-bottom: .1rem; }
.contact-item a, .contact-item span { color: var(--text); }
.contact-item a:hover { color: var(--cyan); }

.support-badge {
    display: flex; gap: 1rem; align-items: center; margin-top: 1.5rem; padding: 1.15rem 1.25rem; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(47, 139, 255, .18), rgba(34, 211, 238, .1)); border: 1px solid rgba(47, 139, 255, .3);
    color: #fff; box-shadow: var(--shadow-md); backdrop-filter: blur(8px);
}
.support-badge i.lead-icon { font-size: 1.8rem; color: var(--cyan); }
.support-badge h4 { color: #fff; font-size: 1rem; margin-bottom: .15rem; }
.support-badge p { color: rgba(224, 233, 248, .78); font-size: .86rem; margin: 0; }
.support-badge .tools { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.support-badge .tools span { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
    padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }

.contact-form-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius);
    padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow-md); height: 100%; backdrop-filter: blur(10px); position: relative; overflow: hidden; }
.contact-form-card::before { content: ""; position: absolute; top: -60px; left: -60px; width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 139, 255, .3), transparent 70%); pointer-events: none; }
.form-label { font-family: 'Manrope', sans-serif; font-weight: 600; color: var(--heading); font-size: .9rem; }
.form-control { border-radius: 11px; border: 1px solid var(--panel-border); padding: .82rem 1rem; background: rgba(255, 255, 255, .03); color: var(--heading); }
.form-control::placeholder { color: var(--muted); }
.form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(47, 139, 255, .25); background: rgba(255, 255, 255, .06); color: #fff; }
.form-note { font-size: .82rem; color: var(--muted); }
.alert-sent { border-radius: 11px; }

/* ---------- Page hero (inner) ---------- */
.page-hero {
    position: relative; color: #fff; overflow: hidden; padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem);
    background: linear-gradient(180deg, #091a33 0%, #060b18 100%);
}
.page-hero::before {
    content: ""; position: absolute; inset: -30% -10% auto -10%; height: 140%;
    background:
        radial-gradient(520px 300px at 20% 20%, rgba(47, 139, 255, .35), transparent 60%),
        radial-gradient(520px 300px at 90% 10%, rgba(34, 211, 238, .28), transparent 60%);
    pointer-events: none; animation: heroGlow 14s ease-in-out infinite alternate;
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.2rem); }
.page-hero h1 .accent { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.page-hero p { color: rgba(224, 233, 248, .85); max-width: 660px; }
.breadcrumb-ahs { --bs-breadcrumb-divider-color: rgba(255,255,255,.45); margin-bottom: 1rem; }
.breadcrumb-ahs .breadcrumb-item, .breadcrumb-ahs a { color: rgba(255, 255, 255, .8); font-size: .88rem; }
.breadcrumb-ahs a:hover { color: var(--cyan); }
.breadcrumb-ahs .breadcrumb-item.active { color: #fff; }

/* ---------- Feature tiles (inner) ---------- */
.feature-tile { height: 100%; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius);
    padding: 1.8rem 1.6rem; box-shadow: var(--shadow-sm); backdrop-filter: blur(8px);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); position: relative; overflow: hidden; }
.feature-tile:hover { transform: translateY(-8px); box-shadow: var(--shadow-md), var(--glow); border-color: rgba(47, 139, 255, .4); }
.feature-tile .ft-icon { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; font-size: 1.4rem;
    background: rgba(47, 139, 255, .12); border: 1px solid rgba(47, 139, 255, .25); color: var(--cyan); margin-bottom: 1rem;
    transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.feature-tile:hover .ft-icon { background: var(--grad-brand); color: #041022; transform: scale(1.08); }
.feature-tile h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.feature-tile p { font-size: .92rem; margin: 0; }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .9rem; color: var(--text); }
.check-list li i { color: var(--orange-300); margin-top: .3rem; }

.showcase-panel { background: linear-gradient(150deg, rgba(47, 139, 255, .14), rgba(124, 92, 255, .08));
    border: 1px solid var(--panel-border); color: #fff; border-radius: var(--radius);
    padding: clamp(1.6rem, 3vw, 2.6rem); box-shadow: var(--shadow-md); position: relative; overflow: hidden; backdrop-filter: blur(10px); }
.showcase-panel::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 211, 238, .35), transparent 70%); bottom: -90px; left: -70px; filter: blur(4px); }
.showcase-panel h2, .showcase-panel h3 { color: #fff; }
.showcase-panel p { color: rgba(224, 233, 248, .82); }
.showcase-panel .check-list li { color: rgba(224, 233, 248, .9); }
.showcase-panel .check-list li i { color: var(--orange-300); }

/* ---------- CTA strip ---------- */
.cta-strip { position: relative; overflow: hidden; border-radius: var(--radius); text-align: center; color: #fff;
    padding: clamp(2.2rem, 4.5vw, 3.4rem); border: 1px solid rgba(47, 139, 255, .4);
    background: linear-gradient(120deg, #0b2b52, #0f5f74 55%, #2a2178);
    box-shadow: var(--shadow-md), var(--glow); }
.cta-strip::before { content: ""; position: absolute; inset: 0; background:
    radial-gradient(400px 200px at 15% 20%, rgba(34, 211, 238, .3), transparent 60%),
    radial-gradient(400px 200px at 85% 80%, rgba(124, 92, 255, .3), transparent 60%); pointer-events: none; }
.cta-strip > * { position: relative; z-index: 1; }
.cta-strip h2 { color: #fff; }
.cta-strip p { color: rgba(255, 255, 255, .88); }

/* ---------- Footer ---------- */
.ahs-footer { background: linear-gradient(180deg, #0a1730 0%, #04070f 100%); border-top: 1px solid rgba(255, 255, 255, .07);
    color: rgba(224, 233, 248, .74); padding-top: clamp(3rem, 6vw, 4.5rem); }
.footer-brand .brand-name { color: #5aa2ff; }
.footer-text { color: rgba(224, 233, 248, .68); font-size: .94rem; }
.footer-text strong { color: #fff; }
.footer-title { color: #fff; font-size: 1.05rem; font-family: 'Manrope', sans-serif; font-weight: 700; margin-bottom: 1.1rem; position: relative; padding-bottom: .6rem; }
.footer-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; border-radius: 3px; background: var(--grad-brand); }
.footer-links li { margin-bottom: .55rem; }
.footer-links a { color: rgba(224, 233, 248, .68); font-size: .93rem; display: inline-flex; align-items: center; gap: .5rem; }
.footer-links a i { color: var(--cyan); font-size: .75rem; transition: transform .2s var(--ease); }
.footer-links a:hover { color: #fff; }
.footer-links a:hover i { transform: translateX(3px); }
.footer-contact li { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .85rem; font-size: .93rem; }
.footer-contact li i { color: var(--cyan); margin-top: .28rem; width: 18px; text-align: center; }
.footer-contact a { color: rgba(224, 233, 248, .74); }
.footer-contact a:hover { color: #fff; }
.footer-social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #fff; transition: transform .2s var(--ease), background .2s var(--ease); }
.footer-social a:hover { background: var(--grad-brand); color: #041022; transform: translateY(-3px); box-shadow: 0 0 18px rgba(47, 139, 255, .5); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: clamp(2rem, 5vw, 3rem); padding: 1.3rem 0; font-size: .86rem; }
.footer-bottom p { color: rgba(224, 233, 248, .6); }
.footer-bottom .credit i { color: var(--cyan); }

/* ---------- Back to top ---------- */
.back-to-top { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 1030; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 13px; background: var(--grad-brand); color: #041022; box-shadow: 0 10px 26px rgba(47, 139, 255, .5);
    opacity: 0; visibility: hidden; transform: translateY(12px); transition: all .25s var(--ease); }
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-4px); filter: brightness(1.1); }

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

/* ---------- Responsive tweaks ---------- */
@media (max-width: 991.98px) {
    /* Full-screen mobile menu that opens BELOW the navbar (brand stays visible) */
    .ahs-navbar .navbar-collapse {
        position: fixed; left: 0; right: 0; top: var(--nav-h, 62px);
        height: calc(100dvh - var(--nav-h, 62px));
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        background: linear-gradient(180deg, #081326 0%, #050a15 100%);
        border: 0; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0;
        padding: 1.4rem 1.4rem 2.4rem; margin: 0;
    }
    .ahs-navbar .navbar-nav { gap: .25rem !important; }
    .ahs-navbar .nav-item { border-bottom: 1px solid rgba(255,255,255,.06); }
    .ahs-navbar .nav-item:last-child, .ahs-navbar .nav-item.no-rule { border-bottom: 0; }
    .ahs-navbar .nav-link { font-size: 1.12rem; padding: .95rem .4rem; }
    .ahs-navbar .nav-link.active::after { display: none; }
    .ahs-navbar .nav-link.active { color: var(--orange-300); }
    .ahs-navbar .dropdown-toggle::after { float: right; margin-top: .7rem; transition: transform .25s var(--ease); }
    .ahs-navbar .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
    .ahs-navbar .dropdown-menu {
        background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
        box-shadow: none; padding: .4rem .3rem; margin: .1rem 0 .6rem; border-radius: 12px;
        border-left: 3px solid var(--orange);
    }
    .ahs-navbar .dropdown-item { font-size: 1.02rem; padding: .7rem .8rem; border-radius: 9px; white-space: normal; }
    .ahs-navbar .dropdown-header { padding-top: .5rem; }
    .hero-visual { margin-top: 2.5rem; }
}
@media (max-width: 575.98px) {
    .hero-stats { gap: 1.5rem; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .btn { width: 100%; }
}

/* Ultra-wide screens: scale up gracefully */
@media (min-width: 1600px) {
    html { font-size: 17px; }
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1480px; }
}
@media (min-width: 1920px) {
    html { font-size: 18px; }
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1640px; }
}
@media (min-width: 2560px) {
    html { font-size: 19px; }
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1880px; }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero::before, .page-hero::before, .hero-card, .hero-badge .pulse { animation: none !important; }
}

/* =====================================================================
   Smart interfaces: theme toggle · scroll progress · counters · FAQ
   ===================================================================== */

/* Smooth transition when switching theme */
body, .ahs-navbar, .ahs-navbar .nav-link, .ahs-navbar .dropdown-menu,
.product-card, .feature-tile, .stat-badge, .contact-form-card,
.form-control, .theme-toggle, .faq-accordion .accordion-item {
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: .35s;
    transition-timing-function: var(--ease);
}

/* Brand logo image */
.brand-logo { height: 40px; width: auto; display: block; filter: drop-shadow(0 5px 12px rgba(0,0,0,.4)); }
.footer-brand .brand-logo { height: 46px; }

/* Scroll progress bar */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    z-index: 2000; background: var(--grad-brand-2); background-size: 200% 100%;
    box-shadow: 0 0 12px var(--panel-glow); transition: width .1s linear;
    animation: barShift 6s linear infinite;
}
@keyframes barShift { 0% { background-position: 0 0; } 100% { background-position: 200% 0; } }

/* Theme toggle button */
.theme-toggle {
    width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--panel-border);
    color: var(--heading); cursor: pointer; font-size: 1rem; line-height: 1;
    transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.theme-toggle:hover { transform: translateY(-2px); border-color: rgba(47, 139, 255, .55); color: var(--cyan); }
.theme-toggle .fa-sun { display: none; }
html[data-theme="light"] .theme-toggle .fa-moon { display: none; }
html[data-theme="light"] .theme-toggle .fa-sun { display: block; }

/* Animated gradient text accents (a touch more futuristic) */
.hero h1 .accent, .hero-stats .num, .stat-badge .num {
    background-size: 200% auto; animation: hueSlide 8s ease infinite;
}
@keyframes hueSlide { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* FAQ accordion */
.faq-accordion .accordion-item {
    background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm) !important; margin-bottom: .85rem; overflow: hidden;
    backdrop-filter: blur(8px);
}
.faq-accordion .accordion-button {
    background: transparent; color: var(--heading); font-family: 'Manrope', sans-serif;
    font-weight: 700; font-size: 1.04rem; box-shadow: none; padding: 1.15rem 1.3rem;
}
.faq-accordion .accordion-button:not(.collapsed) { color: var(--accent-300); background: rgba(47, 139, 255, .07); box-shadow: inset 3px 0 0 var(--orange); }
.faq-accordion .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(47, 139, 255, .22); }
.faq-accordion .accordion-button::after { filter: invert(1) brightness(1.9); }
.faq-accordion .accordion-body { color: var(--text); padding: 0 1.3rem 1.25rem; }

/* =====================================================================
   LIGHT THEME
   ===================================================================== */
html[data-theme="light"] {
    --bg:          #eef2f9;
    --bg-2:        #ffffff;
    --bg-3:        #ffffff;
    --panel:        #ffffff;
    --panel-2:      #ffffff;
    --panel-border: #e3e9f3;
    --panel-glow:   rgba(47, 139, 255, .22);
    --heading:     #0b2240;
    --text:        #4a566c;
    --muted:       #6c7789;
    --grid-line:   rgba(11, 34, 64, .05);
    --section-alt: linear-gradient(180deg, rgba(11, 34, 64, .035), rgba(11, 34, 64, 0));
    --wave-fill:   #eef2f9;
    --nav-bg:      rgba(255, 255, 255, .82);
    --shadow-sm:   0 6px 18px rgba(11, 34, 64, .08);
    --shadow-md:   0 16px 38px rgba(11, 34, 64, .12);
    --shadow-lg:   0 28px 60px rgba(11, 34, 64, .16);
    --glow:        0 0 36px rgba(47, 139, 255, .14);
}
html[data-theme="light"] body {
    background-color: var(--bg);
    background-image:
        radial-gradient(900px 600px at 12% -5%, rgba(47, 139, 255, .10), transparent 55%),
        radial-gradient(1000px 700px at 100% 0%, rgba(34, 211, 238, .08), transparent 55%),
        radial-gradient(1100px 800px at 50% 120%, rgba(124, 92, 255, .07), transparent 55%);
}
html[data-theme="light"] a { color: #1668d6; }
html[data-theme="light"] a:hover { color: #0e8aa8; }
html[data-theme="light"] .eyebrow { color: #0e7aa0; background: rgba(34, 211, 238, .10); border-color: rgba(34, 211, 238, .35); box-shadow: none; }

/* darker accent icons for contrast on light tiles */
html[data-theme="light"] .product-icon,
html[data-theme="light"] .feature-tile .ft-icon,
html[data-theme="light"] .contact-item .ci-icon,
html[data-theme="light"] .about-list li i,
html[data-theme="light"] .product-card .product-link { color: #1668d6; }
html[data-theme="light"] .product-card:hover .product-link { color: #0e8aa8; }
html[data-theme="light"] .product-card:hover { background: #ffffff; }

/* Navbar */
html[data-theme="light"] .ahs-navbar { border-bottom-color: #e3e9f3; box-shadow: 0 8px 30px rgba(11, 34, 64, .08); }
html[data-theme="light"] .ahs-navbar .nav-link { color: #33415c; }
html[data-theme="light"] .ahs-navbar .nav-link:hover { color: #0b2240; background: rgba(11, 34, 64, .05); }
html[data-theme="light"] .ahs-navbar .nav-link.active { color: #0b2240; }
html[data-theme="light"] .brand-name { color: #0b2240; }
html[data-theme="light"] .navbar-toggler { border-color: rgba(11, 34, 64, .2); }
html[data-theme="light"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(11,34,64,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
html[data-theme="light"] .ahs-navbar .dropdown-menu { background: #ffffff; border-color: #e3e9f3; box-shadow: var(--shadow-md); }
html[data-theme="light"] .ahs-navbar .dropdown-item { color: #33415c; }
html[data-theme="light"] .ahs-navbar .dropdown-item i { color: #1668d6; }
html[data-theme="light"] .ahs-navbar .dropdown-item:hover,
html[data-theme="light"] .ahs-navbar .dropdown-item:focus { background: rgba(47, 139, 255, .10); color: #0b2240; }
html[data-theme="light"] .ahs-navbar .dropdown-item.active { background: rgba(47, 139, 255, .16); color: #0b2240; }
html[data-theme="light"] .ahs-navbar .dropdown-divider { border-color: #e3e9f3; }
@media (max-width: 991.98px) {
    html[data-theme="light"] .ahs-navbar .navbar-collapse { background: #ffffff; border-color: #e3e9f3; }
    html[data-theme="light"] .ahs-navbar .nav-item { border-bottom-color: #eef2f8; }
    html[data-theme="light"] .ahs-navbar .dropdown-menu { background: #f6f9fe; border-color: #e3e9f3; }
}
body.nav-open { overflow: hidden; }

/* Buttons + forms */
html[data-theme="light"] .btn-ghost { background: rgba(11, 34, 64, .04); color: #0b2240; border-color: #e3e9f3; }
html[data-theme="light"] .btn-ghost:hover { background: rgba(11, 34, 64, .08); color: #0b2240; }
html[data-theme="light"] .form-control { background: #ffffff; border-color: #dbe2ee; color: #0b2240; }
html[data-theme="light"] .form-control::placeholder { color: #9aa4b5; }
html[data-theme="light"] .form-control:focus { background: #ffffff; color: #0b2240; }
html[data-theme="light"] .contact-item { border-bottom-color: rgba(11, 34, 64, .10); }
html[data-theme="light"] .theme-toggle { background: rgba(11, 34, 64, .05); color: #0b2240; border-color: #e3e9f3; }
html[data-theme="light"] .theme-toggle:hover { color: #1668d6; border-color: rgba(47, 139, 255, .5); }

/* Dark accent panels stay dark in the light theme (premium contrast) */
html[data-theme="light"] .about-illustration { background: linear-gradient(150deg, #0c2547, #0a1a34); border-color: rgba(255, 255, 255, .08); }
html[data-theme="light"] .showcase-panel { background: linear-gradient(150deg, #0c2547, #12244a); border-color: rgba(255, 255, 255, .08); }
html[data-theme="light"] .support-badge { background: linear-gradient(135deg, #0c2547, #123a70); border-color: rgba(47, 139, 255, .35); }

/* Hero card sits on the always-dark hero, so keep it dark glass in light theme */
html[data-theme="light"] .hero-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }

/* FAQ chevron dark in light theme */
html[data-theme="light"] .faq-accordion .accordion-button::after { filter: none; }
html[data-theme="light"] .faq-accordion .accordion-button:not(.collapsed) { color: #1668d6; background: rgba(47, 139, 255, .06); }

@media (prefers-reduced-motion: reduce) {
    .scroll-progress, .hero h1 .accent, .hero-stats .num, .stat-badge .num { animation: none !important; }
}

/* =====================================================================
   PRO INTERACTIONS v2 — aurora hero · tilt · spotlight · marquee ·
   testimonials · timeline · staggered reveals
   ===================================================================== */

/* ---- Reveal variants (extend existing .reveal) ---- */
.reveal-left  { opacity: 0; transform: translateX(-40px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-right { opacity: 0; transform: translateX(40px);  transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-scale { opacity: 0; transform: scale(.9);         transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-left.in, .reveal-right.in, .reveal-scale.in { opacity: 1; transform: none; }

/* ---- Hero aurora + floating orbs ---- */
.hero-aurora { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-aurora::before, .hero-aurora::after {
    content: ""; position: absolute; width: 60vw; height: 60vw; border-radius: 50%;
    filter: blur(90px); opacity: .55; mix-blend-mode: screen;
}
.hero-aurora::before { top: -20%; left: -10%; background: radial-gradient(circle, #2f8bff, transparent 65%); animation: auroraA 18s ease-in-out infinite alternate; }
.hero-aurora::after  { bottom: -30%; right: -10%; background: radial-gradient(circle, #22d3ee, transparent 65%); animation: auroraB 22s ease-in-out infinite alternate; }
@keyframes auroraA { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(12%, 10%) scale(1.2); } }
@keyframes auroraB { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-14%, -8%) scale(1.25); } }

.hero-orbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-orbs .orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(47,139,255,.25) 45%, transparent 70%);
    box-shadow: 0 0 24px rgba(47,139,255,.5); opacity: .5; animation: floatOrb linear infinite; }
.hero-orbs .orb:nth-child(1) { width: 10px; height: 10px; left: 12%; top: 30%; animation-duration: 15s; }
.hero-orbs .orb:nth-child(2) { width: 6px;  height: 6px;  left: 24%; top: 65%; animation-duration: 19s; animation-delay: -3s; }
.hero-orbs .orb:nth-child(3) { width: 14px; height: 14px; left: 68%; top: 22%; animation-duration: 22s; animation-delay: -6s; }
.hero-orbs .orb:nth-child(4) { width: 8px;  height: 8px;  left: 82%; top: 60%; animation-duration: 17s; animation-delay: -2s; }
.hero-orbs .orb:nth-child(5) { width: 5px;  height: 5px;  left: 46%; top: 80%; animation-duration: 20s; animation-delay: -8s; }
.hero-orbs .orb:nth-child(6) { width: 11px; height: 11px; left: 55%; top: 42%; animation-duration: 24s; animation-delay: -5s; }
@keyframes floatOrb { 0% { transform: translateY(0) translateX(0); opacity: .15; } 50% { opacity: .6; } 100% { transform: translateY(-120px) translateX(24px); opacity: 0; } }
.hero > .container { z-index: 3; }

/* ---- 3D tilt ---- */
.tilt { transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .3s var(--ease); will-change: transform; }
.tilt.is-tilting { transition: transform .06s linear; }

/* ---- Cursor spotlight on cards ---- */
.spotlight { position: relative; }
.spotlight::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
    opacity: 0; transition: opacity .3s var(--ease);
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(47,139,255,.20), transparent 60%);
}
.spotlight:hover::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 1; }

/* ---- Product hero figure ---- */
.hero-figure { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--panel-border); box-shadow: var(--shadow-md), var(--glow); background: var(--panel); }
.hero-figure img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; transition: transform .7s var(--ease); }
.hero-figure:hover img { transform: scale(1.06); }
.hero-figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: linear-gradient(155deg, rgba(47,139,255,.10), transparent 45%, rgba(4,16,34,.42)); }
.hero-figure .figure-badge { position: absolute; left: 14px; bottom: 14px; z-index: 3;
    display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: 999px;
    font-size: .82rem; font-weight: 700; color: #fff; background: rgba(4,16,34,.55); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.16); }
.hero-figure .figure-badge i { color: var(--orange-300); }

/* ---- Media figure (sections) ---- */
.media-figure { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
    border: 1px solid var(--panel-border); box-shadow: var(--shadow-md); background: var(--panel); }
.media-figure img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; transition: transform .7s var(--ease); }
.media-figure:hover img { transform: scale(1.05); }
.media-figure::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(160deg, transparent 50%, rgba(4,16,34,.30)); }

/* ---- Shine sweep on figures (hover) ---- */
.hero-figure::before, .media-figure::before {
    content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; z-index: 3; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent); transform: skewX(-18deg); opacity: 0; }
.hero-figure:hover::before, .media-figure:hover::before { animation: shineSweep 1s var(--ease); }
@keyframes shineSweep { 0% { left: -80%; opacity: 0; } 15% { opacity: 1; } 100% { left: 135%; opacity: 0; } }

/* ---- Animated shimmer on section underlines ---- */
.title-underline { background-size: 220% auto; animation: hueSlide 6s linear infinite; }

/* ---- AI assistant highlight banner ---- */
.ai-highlight { position: relative; display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(47,139,255,.16), rgba(34,211,238,.07) 55%, rgba(255,138,61,.10));
    border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 2rem 2.2rem;
    box-shadow: var(--shadow-md), var(--glow); overflow: hidden; }
.ai-highlight::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(420px circle at 88% 20%, rgba(47,139,255,.20), transparent 60%); }
.ai-highlight > * { position: relative; z-index: 1; }
.ai-highlight .ai-badge { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 22px; display: grid; place-items: center;
    font-size: 2.1rem; color: #041022; background: var(--grad-brand); box-shadow: 0 0 34px rgba(47,139,255,.55);
    animation: floaty 5s ease-in-out infinite; }
.ai-highlight .ai-body { flex: 1 1 320px; }
.ai-highlight .ai-body h2 { margin-bottom: .5rem; }
.ai-highlight .ai-body p { margin: 0; }
html[data-theme="light"] .ai-highlight { background: linear-gradient(135deg, rgba(47,139,255,.10), rgba(34,211,238,.05) 55%, rgba(255,138,61,.08)); }
.ai-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.15rem; }
.ai-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px;
    font-size: .85rem; font-weight: 600; color: var(--heading); background: rgba(47,139,255,.12);
    border: 1px solid var(--panel-border); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.ai-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(47,139,255,.22); }
.ai-chip i { color: var(--orange-300); }
html[data-theme="light"] .ai-chip { background: rgba(47,139,255,.08); }

/* ---- Marquee trust bar ---- */
.marquee { position: relative; overflow: hidden; padding: 1rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 2.6rem; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: .6rem; color: var(--muted); font-family: 'Manrope', sans-serif; font-weight: 700;
    font-size: 1rem; letter-spacing: .01em; white-space: nowrap; }
.marquee-item i { color: var(--cyan); font-size: 1.05rem; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---- Section label centering helper reused ---- */
.section-head { max-width: 720px; margin: 0 auto 3rem; text-align: center; }

/* ---- Why-us cards ---- */
.why-card { height: 100%; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius);
    padding: 1.8rem 1.6rem; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); overflow: hidden; }
.why-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md), var(--glow); border-color: rgba(47,139,255,.4); }
.why-card .wc-icon { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; font-size: 1.35rem;
    background: rgba(47,139,255,.14); color: var(--cyan); margin-bottom: 1.1rem; transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.why-card:hover .wc-icon { background: var(--grad-brand); color: #041022; transform: rotate(-6deg) scale(1.08); }
.why-card h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.why-card p { font-size: .93rem; margin: 0; }

/* ---- Process timeline ---- */
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.timeline::before { content: ""; position: absolute; top: 34px; left: 8%; right: 8%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(47,139,255,.5), rgba(34,211,238,.5), transparent); }
.tl-step { position: relative; text-align: center; padding: 0 .4rem; }
.tl-num { width: 68px; height: 68px; margin: 0 auto 1.1rem; border-radius: 50%; display: grid; place-items: center;
    font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.5rem; color: #041022; background: var(--grad-brand);
    box-shadow: 0 10px 30px rgba(47,139,255,.45), inset 0 0 0 4px rgba(6,11,24,.35); position: relative; z-index: 1; transition: transform .3s var(--ease); }
.tl-step:hover .tl-num { transform: translateY(-6px) scale(1.06); }
.tl-step h3 { font-size: 1.06rem; margin-bottom: .4rem; }
.tl-step p { font-size: .9rem; margin: 0; color: var(--muted); }
@media (max-width: 767.98px) {
    .timeline { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
    .timeline::before { display: none; }
}

/* ---- Testimonials slider ---- */
.testimonials { position: relative; max-width: 900px; margin: 0 auto; }
.t-track { position: relative; min-height: 260px; }
.tcard { position: absolute; inset: 0; opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none;
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius);
    padding: 2.4rem 2.2rem; backdrop-filter: blur(8px); box-shadow: var(--shadow-sm); text-align: center; }
.tcard.active { opacity: 1; transform: none; pointer-events: auto; position: relative; }
.tcard .quote-mark { font-size: 2.4rem; color: var(--accent); opacity: .5; line-height: 1; margin-bottom: .6rem; }
.tcard blockquote { font-size: 1.12rem; line-height: 1.7; color: var(--heading); font-family: 'Manrope', sans-serif; font-weight: 600; margin: 0 0 1.4rem; }
.tcard .t-author { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.tcard .t-avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-family: 'Manrope', sans-serif;
    font-weight: 800; color: #041022; background: var(--grad-brand); font-size: 1.1rem; box-shadow: 0 6px 18px rgba(47,139,255,.4); }
.tcard .t-name { font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--heading); font-size: .98rem; }
.tcard .t-role { color: var(--muted); font-size: .84rem; }
.tcard .t-stars { color: #ffc531; margin-bottom: 1rem; letter-spacing: .12em; }
.t-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.6rem; }
.t-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--panel-border); background: rgba(255,255,255,.05);
    color: var(--heading); cursor: pointer; display: grid; place-items: center; transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.t-btn:hover { transform: translateY(-2px); border-color: rgba(47,139,255,.55); color: var(--cyan); }
.t-dots { display: flex; gap: .5rem; }
.t-dot { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; background: rgba(255,255,255,.22); cursor: pointer; transition: background .25s var(--ease), transform .25s var(--ease); }
.t-dot.active { background: var(--grad-brand); transform: scale(1.35); }

/* ---- Product card tagline ---- */
.pc-tag { display: inline-block; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .04em;
    text-transform: uppercase; color: var(--cyan); background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.22);
    padding: .2rem .6rem; border-radius: 999px; margin-bottom: .7rem; }

/* ---- Animated gradient underline for hero accent (glow sweep) ---- */
.hero h1 .accent { position: relative; }

/* ---- Back-to-top progress ring ---- */
.back-to-top .btt-ring { position: absolute; inset: -1px; border-radius: 50%; pointer-events: none; }
.back-to-top .btt-ring circle { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round;
    transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .1s linear; opacity: .9; }

/* ---- Light theme adjustments for new components ---- */
html[data-theme="light"] .marquee-item { color: #5a6577; }
html[data-theme="light"] .why-card { background: #ffffff; }
html[data-theme="light"] .why-card .wc-icon { color: #1668d6; }
html[data-theme="light"] .tcard { background: #ffffff; }
html[data-theme="light"] .t-btn { background: rgba(11,34,64,.05); color: #0b2240; border-color: #e3e9f3; }
html[data-theme="light"] .t-dot { background: rgba(11,34,64,.2); }
html[data-theme="light"] .tl-num { box-shadow: 0 10px 30px rgba(47,139,255,.35), inset 0 0 0 4px rgba(255,255,255,.6); }
html[data-theme="light"] .hero-aurora::before, html[data-theme="light"] .hero-aurora::after { opacity: .4; }

@media (max-width: 575.98px) {
    .tcard { padding: 1.8rem 1.3rem; }
    .tcard blockquote { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-aurora::before, .hero-aurora::after, .hero-orbs .orb, .marquee-track { animation: none !important; }
    .hero-orbs { display: none; }
    .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
    .tilt { transform: none !important; }
    .title-underline { animation: none !important; }
    .hero-figure:hover::before, .media-figure:hover::before { animation: none !important; }
    .hero-figure:hover img, .media-figure:hover img { transform: none !important; }
    .ai-highlight .ai-badge { animation: none !important; }
}

/* ---- Product page tagline + related products ---- */
.product-tagline { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.35rem);
    background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 1rem; }
.related-products { border-top: 1px solid var(--panel-border); }
.related-card { height: 100%; display: flex; align-items: center; gap: 1rem; background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm); padding: 1.15rem 1.25rem; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.related-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md), var(--glow); border-color: rgba(47,139,255,.4); }
.related-card .rc-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 13px; display: grid; place-items: center; font-size: 1.2rem;
    background: rgba(47,139,255,.14); color: var(--cyan); transition: background .3s var(--ease), color .3s var(--ease); }
.related-card:hover .rc-icon { background: var(--grad-brand); color: #041022; }
.related-card .rc-body { display: flex; flex-direction: column; min-width: 0; }
.related-card .rc-title { font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--heading); font-size: 1rem; line-height: 1.25; }
.related-card .rc-go { color: var(--muted); font-size: .82rem; margin-top: .15rem; }
.related-card .rc-arrow { margin-left: auto; flex: 0 0 auto; color: var(--orange-300); font-size: 1rem; transition: transform .25s var(--ease); }
.related-card:hover .rc-arrow { transform: translateX(5px); }
html[data-theme="light"] .related-card { background: #ffffff; }

/* ---- Parallax CTA band (corporate photo) ---- */
.parallax-band { position: relative; overflow: hidden; padding: clamp(4rem, 10vw, 7rem) 0; color: #fff; isolation: isolate; }
.parallax-bg { position: absolute; inset: -2%; background-size: cover; background-position: center;
    background-attachment: fixed; z-index: -2; }
.parallax-overlay { position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(6,11,24,.78), rgba(6,11,24,.9)),
        radial-gradient(700px 320px at 50% 0%, rgba(47,139,255,.28), transparent 70%); }
.parallax-content { max-width: 780px; position: relative; z-index: 1; margin: 0 auto; }
.parallax-content h2 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 1rem; }
.parallax-content p { color: rgba(224,233,248,.9); font-size: 1.08rem; margin-bottom: 1.8rem; }
@media (max-width: 991.98px) { .parallax-bg { background-attachment: scroll; } }
@media (prefers-reduced-motion: reduce) { .parallax-bg { background-attachment: scroll; } }


.language-switch {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius: 11px;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  text-decoration:none;
  font-size:.85rem;
  font-weight:600;
  transition:.3s ease;
  background:rgba(255,255,255,.05);
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: .35s;
  transition-timing-function: var(--ease);
}
.language-switch:hover { transform: translateY(-2px); border-color: rgba(47, 139, 255, .55); color: var(--cyan); }
.language-switch .flag {
  font-size:1.2rem;
}