/* ==========================================================================
   Ignisys Technologies — component styles & 21st.dev-inspired effects
   Layer order matches Tailwind v4 so utility classes still win over these.
   ========================================================================== */
@layer theme, base, components, utilities;

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@layer base {
    :root {
        --flame: #f26b1d;
        --flame-2: #ff8a3d;
        --azure: #2f6bff;
        --sky: #38bdf8;
        --ink: #070b1a;
        color-scheme: dark;
    }

    html { -webkit-tap-highlight-color: transparent; }
    body { background-color: var(--ink); overflow-x: clip; }
    h1, h2, h3, h4 { text-wrap: balance; }
    p { text-wrap: pretty; }
    :focus-visible { outline: 2px solid var(--flame-2); outline-offset: 3px; border-radius: 6px; }
    img { user-select: none; }

    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: #050814; }
    ::-webkit-scrollbar-thumb { background: #24304f; border-radius: 10px; border: 2px solid #050814; }
    ::-webkit-scrollbar-thumb:hover { background: var(--flame); }
}

@layer components {

    /* ---------- Reveal-on-scroll initial states (only when JS is running) ---------- */
    .js [data-animate],
    .js [data-stagger] > * { opacity: 0; }
    .js [data-split] { opacity: 0; }
    .js [data-animate].is-revealed,
    .js [data-stagger] > .is-revealed { opacity: 1; }
    .js.no-motion [data-animate],
    .js.no-motion [data-stagger] > *,
    .js.no-motion [data-split] { opacity: 1 !important; transform: none !important; filter: none !important; }
    .split-word { display: inline-block; will-change: transform, opacity, filter; }

    /* ---------- Preloader ---------- */
    .loader-ring {
        background: conic-gradient(from var(--angle), transparent 0 60%, var(--flame) 75%, var(--azure) 100%);
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
                mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
        animation: rotate-angle 1.1s linear infinite;
    }
    #preloader.is-hidden { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }

    /* ---------- Navigation ---------- */
    .nav-shell {
        border: 1px solid transparent;
        transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
    }
    #site-header.is-scrolled .nav-shell {
        background: rgb(13 20 40 / .72);
        border-color: rgb(255 255 255 / .08);
        box-shadow: 0 10px 40px -10px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .04);
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
    }
    .nav-link {
        position: relative;
        border-radius: .75rem;
        padding: .55rem .9rem;
        font-size: .9rem;
        font-weight: 500;
        color: rgb(203 213 225);
        transition: color .25s ease, background-color .25s ease;
        cursor: pointer;
    }
    .nav-link:hover { color: #fff; background: rgb(255 255 255 / .05); }
    .nav-link.is-active { color: #fff; }
    .nav-link.is-active::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -2px;
        width: 22px;
        height: 3px;
        translate: -50% 0;
        border-radius: 9999px;
        background: linear-gradient(90deg, var(--flame), var(--flame-2));
        box-shadow: 0 0 12px 2px rgb(242 107 29 / .7);
    }

    /* ---------- Typography helpers ---------- */
    .text-gradient {
        background: linear-gradient(100deg, var(--flame-2) 0%, var(--flame) 35%, #7aa2ff 70%, var(--sky) 100%);
        background-size: 200% auto;
        -webkit-background-clip: text;
                background-clip: text;
        color: transparent;
        animation: gradient-pan 6s ease-in-out infinite alternate;
    }
    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        border-radius: 9999px;
        border: 1px solid rgb(255 255 255 / .1);
        background: rgb(255 255 255 / .04);
        padding: .35rem .85rem .35rem .6rem;
        font-family: var(--font-mono, monospace);
        font-size: .72rem;
        font-weight: 500;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--flame-2);
    }
    .eyebrow::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 9999px;
        background: var(--flame);
        box-shadow: 0 0 0 3px rgb(242 107 29 / .2), 0 0 12px var(--flame);
        animation: pulse-dot 2s ease-in-out infinite;
    }

    /* ---------- Buttons ---------- */
    .btn-primary, .btn-ghost, .btn-shine {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        border-radius: .9rem;
        padding: .8rem 1.35rem;
        font-size: .92rem;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        cursor: pointer;
        transition: transform .25s ease, box-shadow .3s ease, background-color .3s ease, border-color .3s ease, color .3s ease;
    }
    .btn-primary {
        position: relative;
        overflow: hidden;
        color: #fff;
        background: linear-gradient(135deg, var(--flame-2), var(--flame) 55%, #e2540a);
        box-shadow: 0 8px 30px -8px rgb(242 107 29 / .7), inset 0 1px 0 rgb(255 255 255 / .25);
    }
    .btn-primary::after { /* sheen sweep */
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%);
        translate: -120% 0;
        transition: translate .7s ease;
    }
    .btn-primary:hover { box-shadow: 0 14px 40px -8px rgb(242 107 29 / .85), inset 0 1px 0 rgb(255 255 255 / .3); }
    .btn-primary:hover::after { translate: 120% 0; }
    .btn-primary:active, .btn-ghost:active, .btn-shine:active { transform: scale(.97); }
    .btn-primary:disabled { opacity: .6; cursor: not-allowed; }

    .btn-ghost {
        color: #fff;
        border: 1px solid rgb(255 255 255 / .14);
        background: rgb(255 255 255 / .04);
        backdrop-filter: blur(8px);
    }
    .btn-ghost:hover { background: rgb(255 255 255 / .09); border-color: rgb(255 255 255 / .28); }

    /* Shine border button (21st.dev "shine border") */
    .btn-shine {
        position: relative;
        color: #fff;
        padding: .62rem 1.1rem;
        font-size: .86rem;
        background: linear-gradient(#0d1428, #0d1428) padding-box,
                    conic-gradient(from var(--angle), rgb(255 255 255 / .12) 0 55%, var(--flame) 70%, var(--sky) 85%, rgb(255 255 255 / .12) 100%) border-box;
        border: 1px solid transparent;
        animation: rotate-angle 4s linear infinite;
    }
    .btn-shine:hover { box-shadow: 0 0 24px -4px rgb(242 107 29 / .6); }

    /* ---------- Backgrounds ---------- */
    .bg-dots {
        background-image: radial-gradient(rgb(255 255 255 / .12) 1px, transparent 1px);
        background-size: 22px 22px;
    }
    .noise::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: .05;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    /* Aurora blobs */
    .aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
    .aurora span {
        position: absolute;
        border-radius: 9999px;
        filter: blur(90px);
        opacity: .55;
        mix-blend-mode: screen;
        animation: aurora 18s ease-in-out infinite alternate;
    }
    .aurora span:nth-child(1) { width: 42vw; height: 42vw; left: -10vw; top: -12vw; background: #f26b1d; }
    .aurora span:nth-child(2) { width: 38vw; height: 38vw; right: -8vw; top: 4vw; background: #2f6bff; animation-delay: -6s; }
    .aurora span:nth-child(3) { width: 30vw; height: 30vw; left: 30vw; bottom: -14vw; background: #38bdf8; opacity: .3; animation-delay: -11s; }

    /* ---------- Cards ---------- */
    .glass-card {
        position: relative;
        border-radius: 1.5rem;
        border: 1px solid rgb(255 255 255 / .08);
        background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / .015));
        box-shadow: inset 0 1px 0 rgb(255 255 255 / .05);
    }

    /* Spotlight card (cursor-follow glow) */
    .spotlight { position: relative; isolation: isolate; overflow: hidden; }
    .spotlight::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: 0;
        background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(242 107 29 / .16), transparent 45%);
        transition: opacity .4s ease;
    }
    .spotlight::after { /* glowing border that follows the cursor */
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        opacity: 0;
        background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgb(255 138 61 / .9), rgb(47 107 255 / .5) 45%, transparent 70%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        transition: opacity .4s ease;
        pointer-events: none;
    }
    .spotlight:hover::before, .spotlight:hover::after { opacity: 1; }

    /* Border beam (animated light travelling around the edge) */
    .border-beam::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1.5px;
        background: conic-gradient(from var(--angle), transparent 0 70%, var(--flame) 80%, var(--sky) 90%, transparent 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        animation: rotate-angle 6s linear infinite;
        pointer-events: none;
    }

    .icon-tile {
        display: grid;
        place-items: center;
        width: 3rem;
        height: 3rem;
        border-radius: .9rem;
        color: var(--flame-2);
        background: linear-gradient(135deg, rgb(242 107 29 / .18), rgb(47 107 255 / .14));
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
        transition: transform .4s cubic-bezier(.2,.8,.2,1), color .3s, background .3s;
    }
    .group:hover .icon-tile { transform: rotate(-8deg) scale(1.08); color: #fff; background: linear-gradient(135deg, var(--flame), var(--azure)); }

    /* CTA */
    .cta-card {
        background:
            radial-gradient(ellipse at top, rgb(47 107 255 / .18), transparent 60%),
            linear-gradient(180deg, #0d1428, #070b1a);
    }

    /* ---------- Marquee ---------- */
    .marquee-mask {
        -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; width: max-content; gap: var(--gap, 2rem); }
    .marquee-mask:hover .marquee-track { animation-play-state: paused; }

    /* ---------- Orbit (tech stack) ---------- */
    .orbit {
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 9999px;
        border: 1px dashed rgb(255 255 255 / .1);
        translate: -50% -50%;
    }
    .orbit-item {
        position: absolute;
        left: 50%;
        top: 50%;
        width: var(--size, 3.25rem);
        height: var(--size, 3.25rem);
        margin: calc(var(--size, 3.25rem) / -2);
        animation: orbit var(--duration, 30s) linear infinite;
        animation-delay: calc(var(--duration, 30s) * var(--i) / var(--n) * -1);
    }
    .orbit-item.reverse { animation-direction: reverse; }
    .orbit-item > div {
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        border-radius: 1rem;
        border: 1px solid rgb(255 255 255 / .1);
        background: rgb(13 20 40 / .9);
        box-shadow: 0 10px 30px -10px rgb(0 0 0 / .8);
        backdrop-filter: blur(6px);
    }
    .orbit-item img { width: 58%; height: 58%; object-fit: contain; }

    /* ---------- Hero rotator dots ---------- */
    .rotator-dot { height: 6px; width: 1rem; border-radius: 9999px; background: rgb(255 255 255 / .2); transition: all .5s ease; cursor: pointer; }
    .rotator-dot.is-active { width: 2.5rem; background: var(--flame); box-shadow: 0 0 10px rgb(242 107 29 / .6); }

    /* ---------- Filter pills ---------- */
    .filter-pill { border-radius: 9999px; border: 1px solid rgb(255 255 255 / .1); padding: .55rem 1.1rem; font-size: .85rem; font-weight: 600; color: rgb(203 213 225); transition: all .3s ease; cursor: pointer; }
    .filter-pill:hover { color: #fff; border-color: rgb(255 255 255 / .25); }
    .filter-pill.is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--flame-2), var(--flame)); box-shadow: 0 8px 24px -8px rgb(242 107 29 / .7); }

    /* ---------- Timeline ---------- */
    [data-step] .step-dot { transition: all .5s ease; }
    [data-step].is-lit .step-dot { background: linear-gradient(135deg, var(--flame), var(--azure)); color: #fff; box-shadow: 0 0 0 6px rgb(242 107 29 / .15), 0 0 30px rgb(242 107 29 / .5); border-color: transparent; }
    .timeline-line { transform-origin: top; }

    /* ---------- Team cards ---------- */
    .tilt { transform-style: preserve-3d; transition: transform .2s ease-out; will-change: transform; }
    .tilt-inner { transform: translateZ(40px); }

    /* ---------- Testimonials stack ---------- */
    .t-stack img { transition: all .6s cubic-bezier(.2,.8,.2,1); }

    /* ---------- Forms ---------- */
    .field {
        width: 100%;
        border-radius: .85rem;
        border: 1px solid rgb(255 255 255 / .1);
        background: rgb(255 255 255 / .04);
        padding: .8rem 1rem;
        font-size: .92rem;
        color: #fff;
        transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
    }
    .field::placeholder { color: rgb(148 163 184 / .7); }
    .field:focus { outline: none; border-color: rgb(242 107 29 / .7); background: rgb(255 255 255 / .06); box-shadow: 0 0 0 4px rgb(242 107 29 / .15); }
    .field[aria-invalid="true"] { border-color: #f87171; }
    select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
    select.field option { background: #0d1428; }
    .field-label { display: block; margin-bottom: .45rem; font-size: .8rem; font-weight: 600; color: rgb(203 213 225); }
    .form-status.is-error { color: #fca5a5; }
    .form-status.is-success { color: #86efac; }

    .footer-link { color: rgb(148 163 184); transition: color .2s ease, padding .2s ease; }
    .footer-link:hover { color: #fff; padding-left: 4px; }

    /* FAQ */
    details.faq summary { list-style: none; cursor: pointer; }
    details.faq summary::-webkit-details-marker { display: none; }
    details.faq[open] .faq-icon { transform: rotate(45deg); color: var(--flame-2); }

    /* Prose (blog) */
    .prose-ig p { margin-top: 1.25rem; line-height: 1.85; color: rgb(203 213 225); font-size: 1.05rem; }
    .prose-ig p:first-child { margin-top: 0; font-size: 1.15rem; color: #fff; }

    /* Floating WhatsApp pulse */
    .wa-float::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 9999px;
        background: #25D366;
        z-index: -1;
        animation: ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
    }

}

/* GLightbox overrides — unlayered so they beat the library's own (unlayered) CSS */
.glightbox-clean .gslide-description { background: #0d1428; }
.glightbox-clean .gslide-title { color: #fff; font-family: "Sora", sans-serif; font-weight: 600; margin-bottom: 4px; }
.glightbox-clean .gslide-desc { color: #94a3b8; }
.goverlay { background: rgb(5 8 20 / .94) !important; }

/* ---------- Keyframes ---------- */
@keyframes rotate-angle { to { --angle: 360deg; } }
@keyframes gradient-pan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 6px rgb(242 107 29 / 0), 0 0 12px var(--flame); } }
@keyframes aurora {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(6vw, 4vw) scale(1.15); }
    100% { transform: translate(-4vw, 6vw) scale(.95); }
}
@keyframes orbit {
    from { transform: rotate(0deg) translateX(var(--radius)) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg); }
}
@keyframes ping { 75%, 100% { transform: scale(1.6); opacity: 0; } }
@keyframes scroll-cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .aurora span, .orbit-item, .marquee-track { animation: none !important; }
}