/* index.html — styles extracted from inline attributes */
.gen-1 { z-index: 2; }
.gen-2 { bottom: -0.40rem; right: -0.40rem; width: 98%; height: 98%; z-index: 0 !important; }
.gen-3 { bottom: -60%; right: 12%; }
.gen-4 { top: -40%; left: -5%; }
.gen-5 { text-align: justify !important; }

/* ==========================================================================
   HOME HERO — "Orbiting Ecosystem / Aurora" bespoke design
   A signature motif used ONLY on the homepage. Scoped under .tk-hero.
   Aurora mesh background + animated gradient headline + orbital product core.
   ========================================================================== */
.tk-hero {
    --h-ink: #0c2b2a;          /* deep teal-ink */
    --h-primary: #0ca293;      /* brand teal (readable) */
    --h-primary-2: #08aeea;    /* signature cyan */
    --h-cyan: #08aeea;         /* cyan */
    --h-green: #17d29b;        /* brand green */
    --h-muted: #55686a;
    --h-line: rgba(12, 43, 42, .09);
    --h-grad: linear-gradient(100deg, #08aeea 0%, #21ccb2 50%, #2af598 100%);
    position: relative;
    isolation: isolate;
    background: #f1faf7;
    overflow: hidden;
    /* extend the hero's own background (base + aurora + dots) up behind the
       transparent header so header and hero share ONE continuous background */
    margin-top: -120px;
    padding-top: 120px;
}

/* Homepage only: make the header transparent so the hero background shows through
   it — no separate header colour, hence no seam. Kept above the hero via z-index. */
header.wrapper.bg-soft-primary {
    background: transparent !important;
    position: relative;
    z-index: 4;
}

/* --- aurora blobs + dotted grid background --- */
.tk-hero::before {
    content: "";
    position: absolute;
    inset: -20% -10% 0;
    z-index: -2;
    background:
        radial-gradient(42% 55% at 12% 8%, rgba(8, 174, 234, .28) 0%, transparent 60%),
        radial-gradient(38% 50% at 88% 4%, rgba(42, 245, 152, .26) 0%, transparent 62%),
        radial-gradient(45% 55% at 78% 92%, rgba(16, 210, 155, .22) 0%, transparent 60%),
        radial-gradient(40% 50% at 22% 96%, rgba(8, 174, 234, .18) 0%, transparent 62%);
    filter: saturate(1.15);
    animation: tkAurora 18s ease-in-out infinite alternate;
}
.tk-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(12, 43, 42, .07) 1px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
    mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
    opacity: .6;
}
@keyframes tkAurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(0, -1.4%, 0) scale(1.06); }
    100% { transform: translate3d(1.5%, 1%, 0) scale(1.03); }
}

.tk-hero .container { position: relative; z-index: 2; }

/* --- kicker pill --- */
.tk-hero-kicker {
    display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: .3rem .55rem; max-width: 100%;
    font-size: .8rem; font-weight: 700; letter-spacing: .04em;
    color: var(--h-ink);
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(8, 174, 234, .22);
    padding: .5rem .95rem; border-radius: 2rem;
    box-shadow: 0 .5rem 1.4rem rgba(8, 174, 234, .12);
}
.tk-hero-kicker .dot {
    width: .5rem; height: .5rem; border-radius: 50%;
    background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
    animation: tkPulse 2.4s ease-out infinite;
}
@keyframes tkPulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); }
    70%  { box-shadow: 0 0 0 .5rem rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.tk-hero-kicker .sep { color: var(--h-line); font-weight: 400; }
.tk-hero-kicker .cred { white-space: nowrap; }

/* --- headline --- */
.tk-hero-title {
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.16;
    color: var(--h-ink);
    font-size: clamp(2.1rem, 4vw, 3.35rem);
    margin: 1.4rem 0 0;
    padding-bottom: .08em;
}
.tk-hero-grad {
    display: inline-block;
    padding-bottom: .06em;
    background: var(--h-grad);
    background-size: 220% 220%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: tkShimmer 6s ease infinite;
}
@keyframes tkShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.tk-hero-lead {
    color: var(--h-muted);
    font-size: 1.12rem; line-height: 1.7;
    max-width: 34rem; margin: 1.15rem 0 0;
}

/* --- CTAs --- */
.tk-hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.9rem; }
.tk-hero-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 700; font-size: 1rem; padding: .9rem 1.65rem;
    border-radius: .85rem; border: 0; cursor: pointer; text-decoration: none;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, color .2s;
}
.tk-hero-btn i { font-size: 1.05rem; transition: transform .28s ease; }
.tk-hero-btn-primary { background: var(--h-grad); color: #fff; }
.tk-hero-btn-primary:hover { color: #fff; transform: translateY(-3px); }
.tk-hero-btn-primary:hover i { transform: translateX(3px); }
.tk-hero-btn-ghost { background: rgba(255, 255, 255, .75); color: var(--h-ink); border: 1.5px solid rgba(12, 43, 42, .1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tk-hero-btn-ghost:hover { color: var(--h-primary); transform: translateY(-3px); border-color: rgba(8, 174, 234, .4); box-shadow: 0 1rem 2rem rgba(8, 174, 234, .16); }
.tk-hero-btn-ghost i { color: var(--h-primary); }

/* --- trust stats row --- */
.tk-hero-stats {
    display: flex; flex-wrap: wrap; gap: 2.1rem;
    margin-top: 2.5rem; padding-top: 1.6rem;
    border-top: 1px solid var(--h-line);
}
.tk-hero-stat .num {
    font-weight: 800; font-size: 1.75rem; line-height: 1;
    color: var(--h-ink); letter-spacing: -.02em;
}
.tk-hero-stat .num span { background: var(--h-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.tk-hero-stat .lbl { display: block; margin-top: .35rem; font-size: .82rem; font-weight: 600; color: var(--h-muted); text-transform: uppercase; letter-spacing: .05em; }

/* ==========================================================================
   ORBITAL VISUAL — the product ecosystem
   ========================================================================== */
.tk-orbit {
    position: relative;
    width: min(27rem, 84vw);
    aspect-ratio: 1;
    margin-inline: auto;
}
/* rotating dashed rings */
.tk-orbit-ring {
    position: absolute; inset: 0; margin: auto;
    border-radius: 50%; border: 1.5px dashed rgba(8, 174, 234, .28);
}
.tk-orbit-ring.r1 { width: 100%; height: 100%; animation: tkSpin 40s linear infinite; }
.tk-orbit-ring.r2 { width: 66%; height: 66%; border-color: rgba(34, 211, 238, .3); animation: tkSpin 28s linear infinite reverse; }
.tk-orbit-ring.r3 { width: 38%; height: 38%; border-style: solid; border-color: rgba(23, 210, 155, .22); }
@keyframes tkSpin { to { transform: rotate(360deg); } }

/* glowing core */
.tk-orbit-core {
    position: absolute; inset: 0; margin: auto;
    width: 34%; height: 34%; border-radius: 50%;
    display: grid; place-items: center;
    background: radial-gradient(circle at 30% 25%, #fff 0%, #e6fbf4 40%, #c9efe4 100%);
    box-shadow: 0 1.4rem 3rem rgba(8, 174, 234, .35), inset 0 0 0 1px rgba(255,255,255,.7);
    z-index: 3;
    animation: tkFloat 6s ease-in-out infinite;
}
.tk-orbit-core::before {
    content: ""; position: absolute; inset: 6%;
    border-radius: 50%; z-index: -1;
    background: var(--h-grad); opacity: .28; filter: blur(22px);
    animation: tkFloat 6s ease-in-out infinite reverse;
}
.tk-orbit-core img { width: 68%; height: auto; }
@keyframes tkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* service chips — static upright "nodes" pinned around the orbit; motion comes from
   the spinning rings + floating core/cards. Each node floats gently in place. */
.tk-orbit-nodes { position: absolute; inset: 0; }
.tk-chip {
    position: absolute;
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .82rem; font-weight: 700; white-space: nowrap;
    color: var(--h-ink);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    padding: .5rem .85rem; border-radius: .8rem;
    border: 1px solid rgba(12, 43, 42, .07);
    box-shadow: 0 .7rem 1.5rem rgba(12, 43, 42, .12);
    animation: tkNode 6s ease-in-out infinite;
}
.tk-chip i { font-size: 1rem; }
@keyframes tkNode { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* pinned by a corner so they always stay fully inside the box (no centering transform to clash) */
.tk-chip.c1 { top: 5%; left: 46%; animation-delay: 0s; }        /* ERP — top */
.tk-chip.c2 { top: 20%; right: 4%; animation-delay: .8s; }      /* AI — upper right */
.tk-chip.c3 { top: 48%; right: 0; animation-delay: 1.6s; }      /* API — right */
.tk-chip.c4 { bottom: 12%; left: 40%; animation-delay: 1.2s; }  /* Mobile Apps — bottom */
.tk-chip.c5 { top: 52%; left: 0; animation-delay: 2s; }         /* E-Commerce — left */

/* floating glass stat cards */
.tk-orbit-card {
    position: absolute; z-index: 4;
    display: flex; align-items: center; gap: .7rem;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .7);
    padding: .7rem .9rem; border-radius: 1rem;
    box-shadow: 0 1.1rem 2.4rem rgba(12, 43, 42, .16);
}
.tk-orbit-card .ic { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: .7rem; color: #fff; flex: none; }
.tk-orbit-card .ic i { font-size: 1.15rem; }
.tk-orbit-card .t { font-weight: 800; font-size: .98rem; line-height: 1.1; color: var(--h-ink); }
.tk-orbit-card .s { font-size: .72rem; color: var(--h-muted); font-weight: 600; }
.tk-orbit-card.top { top: 0; left: -9%; animation: tkFloat 7s ease-in-out infinite; }
.tk-orbit-card.bottom { bottom: 1%; right: -9%; animation: tkFloat 8s ease-in-out .6s infinite; }
.tk-orbit-card.top .ic { background: linear-gradient(135deg, #08aeea, #13c1c9); }
.tk-orbit-card.bottom .ic { background: linear-gradient(135deg, #17d29b, #08c47f); }

/* --- responsive --- */
@media (max-width: 991.98px) {
    .tk-hero-lead { margin-inline: auto; }
    .tk-hero-cta, .tk-hero-stats { justify-content: center; }

    /* Stacked layout: the orbit is centred and smaller. The floating glass
       stat-cards are designed to sit in the outer corners of the desktop
       two-column layout — when the orbit centres, they collide with the
       service chips ("98% Uptime" over "ERP", "Odoo Certified" over "Mobile
       Apps"). Hide them and show the clean ring + glowing core + chip
       ecosystem, which is self-contained at any width. */
    .tk-orbit { margin-top: 2.5rem; width: min(22rem, 80vw); }
    .tk-orbit-card { display: none; }

    /* Fan the five chips to the corners so none sits on the core's midline and
       hides behind the logo. Pinned by an offset (no centring transform) so the
       translateY float animation stays intact. */
    .tk-chip { font-size: .78rem; padding: .45rem .78rem; gap: .38rem; }
    .tk-chip i { font-size: .95rem; }
    .tk-chip.c1 { top: 1%; left: 40%; }                 /* ERP — top */
    .tk-chip.c2 { top: 20%; right: 0; }                 /* AI — upper right */
    .tk-chip.c3 { top: auto; bottom: 22%; right: 0; }   /* API — lower right */
    .tk-chip.c4 { bottom: 1%; left: 28%; }              /* Mobile Apps — bottom */
    .tk-chip.c5 { top: 20%; left: 0; }                  /* E-Commerce — upper left */
}
@media (max-width: 575.98px) {
    /* Keep the • separators visible: without them the three credentials read as
       one ambiguous run-on ("Official Odoo Partner OCA Member 55+ Countries"). */
    .tk-hero-kicker { font-size: .72rem; padding: .5rem .9rem; gap: .25rem .5rem; }
    .tk-hero-stats { gap: 1.4rem 1.9rem; }
    .tk-hero-stat .num { font-size: 1.45rem; }
    .tk-chip { font-size: .74rem; padding: .42rem .72rem; }
}

/* ==========================================================================
   TECHNOLOGY COMMAND DECK — "Cutting-Edge Technologies We Master"
   A dramatic DARK band that contrasts the light homepage. Aurora + grid
   backdrop, a KPI stat strip, and three auto-scrolling rails of glass
   tech chips (logo on a white tile + name). Pauses on hover. Scoped .tk-stack.
   ========================================================================== */
.tk-stack {
    --s-cyan: #34c8ff;
    --s-teal: #21ccb2;
    --s-green: #2af598;
    --s-grad: linear-gradient(100deg, #34c8ff 0%, #21ccb2 50%, #2af598 100%);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% -10%, #103c46 0%, transparent 55%),
        linear-gradient(180deg, #071c22 0%, #06181d 55%, #05141a 100%) !important;
    color: #cfe6e6;
}
/* aurora blobs */
.tk-stack::before {
    content: "";
    position: absolute; inset: -25% -10% 0;
    z-index: -2;
    background:
        radial-gradient(40% 60% at 12% 0%, rgba(52, 200, 255, .28) 0%, transparent 62%),
        radial-gradient(42% 55% at 88% 4%, rgba(42, 245, 152, .24) 0%, transparent 64%),
        radial-gradient(45% 60% at 62% 108%, rgba(33, 204, 178, .2) 0%, transparent 60%);
    filter: saturate(1.15);
    animation: tkAurora 20s ease-in-out infinite alternate;
}
/* fine grid lines */
.tk-stack::after {
    content: "";
    position: absolute; inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(120, 220, 220, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 220, 220, .06) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(120% 80% at 50% 30%, #000 0%, transparent 78%);
    mask-image: radial-gradient(120% 80% at 50% 30%, #000 0%, transparent 78%);
}
.tk-stack .container { position: relative; z-index: 2; }

/* --- heading block --- */
.tk-stack-head { max-width: 48rem; margin: 0 auto; text-align: center; }
.tk-stack-kicker {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #bff3e6;
    background: rgba(52, 200, 255, .08);
    border: 1px solid rgba(52, 200, 255, .28);
    padding: .45rem .95rem; border-radius: 2rem;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tk-stack-kicker .dot {
    width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--s-green); box-shadow: 0 0 0 0 rgba(42, 245, 152, .55);
    animation: tkPulse 2.4s ease-out infinite;
}
.tk-stack-title {
    font-weight: 800; letter-spacing: -.025em; line-height: 1.16;
    color: #fff;
    font-size: clamp(1.9rem, 3.7vw, 3rem);
    margin: 1.15rem 0 0;
}
.tk-stack-grad {
    display: inline-block; padding-bottom: .06em;
    background: var(--s-grad); background-size: 220% 220%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: tkShimmer 6s ease infinite;
}
.tk-stack-lead {
    color: #9fc0c2; font-size: 1.08rem; line-height: 1.7;
    margin: 1.1rem auto 0; max-width: 40rem;
}

/* --- KPI stat strip --- */
.tk-stack-stats {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 1rem 2.4rem;
    margin: 1.8rem auto 2.2rem;
    padding: 1.2rem 1.6rem;
    max-width: 44rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(120, 220, 220, .14);
    border-radius: 1.1rem;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tk-stat { text-align: center; flex: 1 1 auto; min-width: 6.5rem; }
.tk-stat .n {
    display: block; font-weight: 800; font-size: 2rem; line-height: 1; letter-spacing: -.02em;
    background: var(--s-grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.tk-stat .n .plus { -webkit-text-fill-color: currentColor; }
.tk-stat .l {
    display: block; margin-top: .4rem;
    font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: #8fb0b2;
}

/* --- rails --- */
.tk-rails {
    display: flex; flex-direction: column; gap: 1rem;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.tk-rail { display: flex; width: max-content; }
.tk-track {
    display: flex; gap: 1rem; padding-right: 1rem;
    flex: none;
    will-change: transform;
}
.tk-rail[data-dir="ltr"] .tk-track { animation: tkMarqueeL 42s linear infinite; }
.tk-rail[data-dir="rtl"] .tk-track { animation: tkMarqueeR 38s linear infinite; }
.tk-rail:hover .tk-track { animation-play-state: paused; }
@keyframes tkMarqueeL { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes tkMarqueeR { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* --- chip (scoped name to avoid clashing with the hero orbit's .tk-chip) --- */
.tk-stack-chip {
    display: inline-flex; align-items: center; gap: .7rem; flex: none;
    position: relative;
    padding: .55rem .95rem .55rem .55rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(120, 220, 220, .16);
    border-radius: .85rem;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    /* no resting drop shadow — on the dark surface it rendered as a hard dark
       box behind each chip. Depth comes from the border + hover glow instead. */
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.tk-stack-chip .ic {
    display: grid; place-items: center; flex: none;
    width: 2.5rem; height: 2.5rem; border-radius: .6rem;
    background: #fff;
    /* crisp seat: 1px contact line + a short soft drop, no wide black blur */
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 .2rem .5rem -.15rem rgba(2, 12, 14, .55);
}
.tk-stack-chip .ic img { max-width: 1.8rem; max-height: 1.5rem; width: auto; height: auto; }
.tk-stack-chip b {
    font-size: .92rem; font-weight: 700; color: #eafcff; white-space: nowrap; letter-spacing: -.01em;
}
.tk-stack-chip:hover {
    transform: translateY(-4px);
    background: rgba(52, 200, 255, .1);
    border-color: rgba(52, 200, 255, .5);
    /* lift = soft ambient + a clean cyan glow rather than a heavy black blur */
    box-shadow: 0 1rem 1.8rem -.5rem rgba(2, 12, 14, .6), 0 0 1.4rem rgba(52, 200, 255, .3);
}

/* --- responsive --- */
@media (max-width: 575.98px) {
    .tk-stack-stats { gap: 1rem 1.4rem; padding: 1.1rem; }
    .tk-stat .n { font-size: 1.6rem; }
    .tk-stack-chip b { font-size: .85rem; }
    .tk-stack-chip .ic { width: 2.2rem; height: 2.2rem; }
}

/* respect reduced motion — freeze marquee & let chips wrap into static rows */
@media (prefers-reduced-motion: reduce) {
    .tk-hero::before, .tk-hero-grad, .tk-hero-kicker .dot,
    .tk-orbit-ring, .tk-chip,
    .tk-orbit-core, .tk-orbit-core::before, .tk-orbit-card,
    .tk-stack::before, .tk-stack-grad, .tk-stack-kicker .dot { animation: none !important; }
    .tk-rails { -webkit-mask-image: none; mask-image: none; }
    .tk-rail { width: auto; flex-wrap: wrap; }
    .tk-rail[data-dir] .tk-track { animation: none !important; flex-wrap: wrap; }
    .tk-rail .tk-track[aria-hidden="true"] { display: none; }
}