/* ==========================================================================

   TANTRAFINO — VISUAL ENHANCEMENT LAYER (enhance.css)
   --------------------------------------------------------------------------
   Premium fintech polish applied as an additive override layer.
   Loaded AFTER responsive.css so it wins the cascade. Remove this one
   <link> to return to the base template at any time.

   TABLE OF CONTENTS
   01. Design Tokens
   02. Typography & Base Refinements
   03. Texture, Selection, Scrollbar, Focus
   04. Eyebrow Badges
   05. Buttons
   06. Header Refinements
   07. Hero — Glass Payment Card Composition
   08. Hero — Floating Chips & Notification
   09. Hero — Trust Marquee
   10. Service Cards (Glass)
   11. About Section
   12. Counters / Funfacts
   13. Testimonials (Glass)
   14. Brand Marquee
   15. Blog Cards
   16. Footer
   17. Page Title (Inner Pages)
   18. Forms
   19. Scroll Progress Bar
   20. Reveal Animations (driven by enhance.js)
   21. Tilt & Pointer Glow
   22. Contrast & A11y Fixes
   23. Reduced Motion
   24. Responsive Adjustments

   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
    /* Brand palette */
    --tf-bg:              #00061A;
    --tf-surface:         #060E26;
    --tf-surface-2:       #0A1230;
    --tf-surface-3:       #101A3E;
    --tf-magenta:         #FF0E75;
    --tf-violet:          #910694;
    --tf-purple:          #800599;
    --tf-yellow:          #F6EC4F;
    --tf-text:            #FFFFFF;
    --tf-text-soft:       #C3CBE0;
    --tf-text-muted:      #8B94AD;
    --tf-line:            rgba(255, 255, 255, 0.10);
    --tf-line-strong:     rgba(255, 255, 255, 0.18);

    /* Gradients */
    --tf-grad-brand:      linear-gradient(135deg, #FF0E75 0%, #910694 100%);
    --tf-grad-brand-soft: linear-gradient(135deg, rgba(255,14,117,.16) 0%, rgba(145,6,148,.16) 100%);
    --tf-grad-accent:     linear-gradient(192deg, rgba(246,236,79,.32) 0%, rgba(150,6,147,.60) 100%);
    --tf-grad-text:       linear-gradient(100deg, #FF5C9E 0%, #FF0E75 35%, #B44BFF 100%);

    /* Typography */
    --tf-font-display:    'Space Grotesk', 'Rubik', sans-serif;
    --tf-font-body:       'Inter', 'Archivo', sans-serif;

    /* Motion */
    --tf-ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
    --tf-ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
    --tf-dur:             0.45s;

    /* Radii & shadows */
    --tf-radius-sm:       10px;
    --tf-radius:          18px;
    --tf-radius-lg:       26px;
    --tf-glow-pink:       0 0 44px rgba(255, 14, 117, 0.28);
    --tf-glow-violet:     0 0 60px rgba(145, 6, 148, 0.35);
    --tf-shadow-card:     0 18px 50px rgba(0, 3, 20, 0.55);
    --tf-shadow-lift:     0 28px 70px rgba(0, 3, 20, 0.65), 0 0 60px rgba(255,14,117,.14);

    /* Glass recipe */
    --tf-glass-bg:        rgba(255, 255, 255, 0.045);
    --tf-glass-bg-hover:  rgba(255, 255, 255, 0.075);
    --tf-glass-border:    rgba(255, 255, 255, 0.12);
    --tf-glass-blur:      18px;
}


/* ==========================================================================
   02. TYPOGRAPHY & BASE REFINEMENTS
   ========================================================================== */

body {
    font-family: var(--tf-font-body);
    background: var(--tf-bg);
    letter-spacing: 0.006em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tf-font-display);
    letter-spacing: -0.021em;
}

.banner__title h1 {
    font-family: var(--tf-font-display);
    font-size: 78px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.032em;
}

/* Gradient keyword inside headings */
.banner__title h1 span,
.title h2 span,
.title.two h2 span {
    font-weight: 700;
    background: var(--tf-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.title h2 {
    letter-spacing: -0.024em;
}

/* Softer, more readable body copy */
.texts p,
.normaol__text p,
.service__text p,
.testimonials__text p,
.footer-widget .text p {
    color: var(--tf-text-soft);
}

/* Smooth anchor scrolling */
html { scroll-behavior: smooth; }


/* ==========================================================================
   03. TEXTURE, SELECTION, SCROLLBAR, FOCUS
   ========================================================================== */

/* Fine film grain for premium depth (inline SVG, ~1.2 KB) */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
}

::selection {
    background: var(--tf-magenta);
    color: #fff;
}

/* Slim branded scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--tf-bg); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7A0A78, #FF0E75);
    border-radius: 8px;
    border: 2px solid var(--tf-bg);
}

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--tf-magenta);
    outline-offset: 3px;
    border-radius: 4px;
}


/* ==========================================================================
   04. EYEBROW BADGES  (.sub__title h4)
   ========================================================================== */

.sub__title h4 {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--tf-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--tf-yellow);
    padding: 10px 22px 10px 18px;
    border-radius: 999px;
    background: rgba(246, 236, 79, 0.07);
    border: 1px solid rgba(246, 236, 79, 0.22);
    margin-bottom: 14px;
}

.sub__title h4::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tf-magenta);
    box-shadow: 0 0 12px 2px rgba(255, 14, 117, 0.8);
    flex: none;
    animation: tf-pulse-dot 2.4s ease-in-out infinite;
}

@keyframes tf-pulse-dot {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.35); opacity: 0.65; }
}


/* ==========================================================================
   05. BUTTONS
   ========================================================================== */

/* Primary — crisper shape, glow lift, shine sweep */
.theme-btn.theme-btn-one {
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(255, 14, 117, 0.25);
    overflow: hidden;
    transition: transform var(--tf-dur) var(--tf-ease-out),
                box-shadow var(--tf-dur) var(--tf-ease-out);
}

.theme-btn.theme-btn-one:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 44px rgba(255, 14, 117, 0.45);
}

/* Diagonal shine that sweeps across on hover */
.theme-btn.theme-btn-one::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 45%;
    height: 100%;
    background: linear-gradient(105deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.35) 50%,
        rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    transition: left 0.7s var(--tf-ease-in-out);
    pointer-events: none;
}

.theme-btn.theme-btn-one:hover::after {
    left: 130%;
}

/* Secondary — quiet outline pill */
.theme-btn.theme-btn-two,
.theme-btn.theme-btn-three {
    border-radius: 999px;
    border: 1px solid var(--tf-line-strong);
    background: var(--tf-glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color var(--tf-dur) var(--tf-ease-out),
                background var(--tf-dur) var(--tf-ease-out),
                transform var(--tf-dur) var(--tf-ease-out);
}

.theme-btn.theme-btn-two:hover,
.theme-btn.theme-btn-three:hover {
    border-color: rgba(246, 236, 79, 0.55);
    background: rgba(246, 236, 79, 0.08);
    transform: translateY(-3px);
}

/* Hero CTA row — ghost secondary button */
.banner__left .btn-box {
    gap: 16px;
    flex-wrap: wrap;
}

.tf-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 999px;
    border: 1px solid var(--tf-line-strong);
    background: var(--tf-glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--tf-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    transition: border-color var(--tf-dur) var(--tf-ease-out),
                background var(--tf-dur) var(--tf-ease-out),
                transform var(--tf-dur) var(--tf-ease-out),
                box-shadow var(--tf-dur) var(--tf-ease-out);
}

.tf-btn-ghost:hover {
    border-color: rgba(246, 236, 79, 0.55);
    background: rgba(246, 236, 79, 0.08);
    transform: translateY(-3px);
    box-shadow: 0 12px 34px rgba(0, 3, 20, 0.5);
    color: var(--tf-yellow);
}

.tf-btn-ghost .tf-arrow {
    transition: transform 0.35s var(--tf-ease-out);
}

.tf-btn-ghost:hover .tf-arrow {
    transform: translateX(5px);
}


/* ==========================================================================
   06. HEADER REINFORCEMENTS
   ========================================================================== */

/* —— Brand lockup (.tf-brand) ——
   Compact 46px mark + Space Grotesk wordmark ("Fino" in brand gradient)
   replaces the oversized 100x80 circular logo that crowded the menu. */
.tf-brand {
    display: flex;
    align-items: center;
    flex: none;
}

.tf-brand__link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.tf-brand__mark {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 3, 20, 0.5);
    transition: transform 0.4s var(--tf-ease-out);
}

.tf-brand__link:hover .tf-brand__mark {
    transform: scale(1.06);
}

.tf-brand__name {
    font-family: var(--tf-font-display);
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
}

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

/* —— HEADER v2 — slim glass command bar ——
   The template gave every nav link padding:50px 0 (~200px total header
   height). Rebuilt as a frosted command bar: 38px utility strip + a
   fixed 72px nav row (62px sticky), all items vertically centered,
   links ride the row height so dropdowns and hover states stay glued. */
.header-top-one .top__inner { padding: 7px 0; }
.header-top-one .top__hrader__left li,
.header-top-one .top__hrader__left span { font-size: 12px; }

.header-lower {
    background: rgba(0, 6, 26, 0.15);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    border-bottom: 1px solid var(--tf-line);
}

.header-lower .outer-box {
    flex-wrap: nowrap;
    align-items: center;
    min-height: 72px;
    padding: 0;
    border-bottom: none;
}

.header-lower .menu-area {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header-lower .menu-area .main-menu {
    display: flex;
    justify-content: flex-end;
}

.header-lower .main-menu .navigation {
    display: flex;
    align-items: center;
}

.header-lower .main-menu .navigation > li {
    float: none;
    margin: 0 5px;
}

.header-lower .main-menu .navigation > li > a {
    padding: 0 10px;
    font-size: 15px;
    line-height: 72px;
    letter-spacing: 0.01em;
}

.header-lower .btn-box .theme-btn {
    padding: 11px 22px;
    font-size: 11px;
}

/* Sticky row — 62px, same language */
.sticky-header .outer-box {
    flex-wrap: nowrap;
    align-items: center;
    min-height: 62px;
}

.sticky-header .menu-area {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.sticky-header .menu-area .main-menu { display: flex; justify-content: flex-end; }
.sticky-header .main-menu .navigation { display: flex; align-items: center; }
.sticky-header .main-menu .navigation > li { float: none; margin: 0 4px; }
.sticky-header .main-menu .navigation > li > a { padding: 0 9px; font-size: 14.5px; line-height: 62px; }
.sticky-header .main-menu .navigation > li > a::after { bottom: 12px; }

/* Hamburger alignment inside the slim bar */
.menu-area .mobile-nav-toggler { line-height: 64px; font-size: 26px; }

/* Retire template's own purple underline/border — the gradient
   ::after underline above replaces them in the slim bar */
.header-lower .main-menu .navigation > li:before,
.sticky-header .main-menu .navigation > li:before { display: none; }

.header-lower .main-menu .navigation > li.current,
.sticky-header .main-menu .navigation > li.current {
    border-bottom: none;
}

/* —— HEADER v2b — floating header over the video (inner pages) ——
   On every page except the homepage, the header is lifted out of the
   document flow and floats over the page-title video: the cinematic
   background runs edge-to-edge BEHIND the frosted glass bar. */
body.tf-inner .main-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 60;
}

/* Utility strip becomes part of the glass stack over the video */
body.tf-inner .header-top-one .top__inner {
    background: rgba(0, 6, 26, 0.10);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border-radius: 0 0 0 0;
}

/* Kill the template's 30px gap so the video touches the viewport top;
   rebalance section padding for the floating header (~110px) above */
body.tf-inner .page__title {
    margin-top: 0;
    padding: 176px 0 96px;
}

body.tf-inner .page__title.error__page {
    padding-top: 176px;
}

/* Nav row reads as pure glass over motion — 85% transparent,
   light frost only so the video truly shows through */
body.tf-inner .header-lower {
    background: rgba(0, 6, 26, 0.15);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
}


/* ==========================================================================

   ADDRESS BAR — AUTO-HIDE + PEEK SWEEP (driven by enhance.js)
   --------------------------------------------------------------------------
   The utility strip slides away after 10s of cursor rest and glides back
   with a light gradient sweep on any movement. The sound chip replays
   the theme motif.

   ========================================================================== */

.header-top-one.tf-topbar-auto {
    overflow: hidden;
    max-height: 80px;
    opacity: 1;
    transform: translateY(0);
    transition:
        max-height 0.55s var(--tf-ease-out),
        opacity 0.4s ease,
        transform 0.55s var(--tf-ease-out);
}

.header-top-one.tf-topbar-auto.is-hidden {
    max-height: 0;
    opacity: 0;
    transform: translateY(-100%);
}

/* Creative peek: a brand-gradient light sweeps across the strip as it
   returns, like a signal passing through */
.header-top-one.tf-topbar-auto .top__inner {
    position: relative;
    overflow: hidden;
}

.header-top-one.tf-topbar-auto.is-peek .top__inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        transparent 20%,
        rgba(255, 14, 117, 0.16) 42%,
        rgba(246, 236, 79, 0.20) 52%,
        rgba(180, 75, 255, 0.16) 62%,
        transparent 80%);
    transform: translateX(-120%);
    animation: tf-topbar-sweep 0.75s var(--tf-ease-out);
    pointer-events: none;
}

@keyframes tf-topbar-sweep {
    from { transform: translateX(-120%); }
    to   { transform: translateX(120%); }
}

/* —— Theme sound chip (in the utility strip socials) —— */
#tf-sound-chip {
    width: 26px;
    height: 26px;
    margin-left: 6px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
    background: var(--tf-grad-brand-soft);
    border: 1px solid rgba(255, 14, 117, 0.35);
    cursor: pointer;
    transition: color 0.3s var(--tf-ease-out), border-color 0.3s var(--tf-ease-out), transform 0.3s var(--tf-ease-out);
}

#tf-sound-chip:hover {
    color: #fff;
    border-color: rgba(246, 236, 79, 0.55);
    transform: scale(1.1);
}

#tf-sound-chip.is-playing {
    color: var(--tf-yellow);
    border-color: rgba(246, 236, 79, 0.7);
    animation: tf-chip-pulse 0.8s ease-in-out 3;
}

@keyframes tf-chip-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(246, 236, 79, 0.45); }
    50%      { box-shadow: 0 0 0 9px rgba(246, 236, 79, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .header-top-one.tf-topbar-auto,
    .header-top-one.tf-topbar-auto.is-hidden {
        max-height: none;
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ==========================================================================

   SERVICE DETAILS PAGE (.service__details family)
   --------------------------------------------------------------------------
   Brings the service-details content family — main column, sidebar
   widgets, feature lists, contact block — into the site design system.
   Template shipped Archivo/Rubik type, flat magenta headers and 120px
   paddings here; these rules restore Space Grotesk/Inter + glass.

   ========================================================================== */

/* —— Main column typography —— */
.service__details { padding: 110px 0 0; }

.service__right h2 {
    font-family: var(--tf-font-display);
    font-size: clamp(30px, 3.6vw, 42px);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.18;
    padding: 8px 0 18px;
}

.service__right h2 span {
    background: var(--tf-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service__right h3,
.service__right h4 {
    font-family: var(--tf-font-display);
    letter-spacing: -0.012em;
}

.service__right p {
    font-family: var(--tf-font-body);
    color: var(--tf-text-soft);
    line-height: 1.8;
}

/* Hero figure of the details column */
.service__right > figure img {
    border-radius: var(--tf-radius);
    box-shadow: var(--tf-shadow-card);
}

/* —— Feature list (template shipped bare <li> chips in Rubik 22px) —— */
.service__right .row li a,
.service__right li a {
    font-family: var(--tf-font-body);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--tf-text-soft);
    background: var(--tf-glass-bg);
    border: 1px solid var(--tf-glass-border);
    border-radius: 12px;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    gap: 11px;
    transition: border-color 0.35s var(--tf-ease-out), transform 0.35s var(--tf-ease-out), color 0.35s var(--tf-ease-out);
}

.service__right li a:hover {
    border-color: rgba(255, 14, 117, 0.4);
    transform: translateX(5px);
    color: #fff;
}

.service__right li a i {
    color: var(--tf-magenta);
    font-size: 13px;
}

/* —— Sidebar —— */
.sidebar__widget {
    background: var(--tf-glass-bg);
    border: 1px solid var(--tf-glass-border);
    border-radius: var(--tf-radius);
    backdrop-filter: blur(var(--tf-glass-blur));
    -webkit-backdrop-filter: blur(var(--tf-glass-blur));
    box-shadow: var(--tf-shadow-card);
    overflow: hidden;
}

/* "All Services" header — was flat magenta block */
.all__service h3,
.all__service h4 {
    background: none;
    padding: 22px 26px 14px;
    margin: 0;
    font-family: var(--tf-font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    position: relative;
}

.all__service h3::after,
.all__service h4::after {
    content: "";
    position: absolute;
    left: 26px;
    bottom: 6px;
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: var(--tf-grad-brand);
}

.service__details__1__cat { padding: 12px 15px 20px; }

.service__details__1__cat a {
    font-family: var(--tf-font-body);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--tf-text-soft);
    padding: 11px 16px;
    border-radius: 11px;
    margin-bottom: 6px;
    background: transparent;
    transition: background 0.3s var(--tf-ease-out), color 0.3s var(--tf-ease-out), transform 0.3s var(--tf-ease-out);
}

/* Kill template's per-item gradient border skeleton */
.service__details__1__cat a:before { display: none; }

.service__details__1__cat a:hover {
    background: var(--tf-grad-brand-soft);
    color: #fff;
    transform: translateX(4px);
}

.service__details__1__cat li.active a {
    background: var(--tf-grad-brand-soft);
    border: 1px solid rgba(255, 14, 117, 0.35);
    color: #fff;
}

.service__details__1__cat a i { color: var(--tf-yellow); font-size: 12px; }

/* Contact network widget — was 120px/60px padded stock panel */
.sidebar__widget_network {
    margin-top: 26px;
    padding: 44px 28px;
    border-radius: var(--tf-radius);
    border: 1px solid var(--tf-glass-border);
    background:
        radial-gradient(80% 120% at 50% 0%, rgba(145, 6, 148, 0.18) 0%, transparent 60%),
        rgba(6, 14, 38, 0.75) !important;
    text-align: center;
}

.sidebar__widget_network h3 {
    font-family: var(--tf-font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.sidebar__widget_network .services__icon i {
    color: var(--tf-yellow);
}

.sidebar__widget_network p {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tf-text-muted);
}

.sidebar__widget_network h4 {
    font-family: var(--tf-font-display);
    background: var(--tf-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 22px;
}

/* —— Contact block at the foot of the page —— */
.service__contact__block {
    background: var(--tf-glass-bg);
    border: 1px solid var(--tf-glass-border);
    border-radius: var(--tf-radius-lg);
    backdrop-filter: blur(var(--tf-glass-blur));
    -webkit-backdrop-filter: blur(var(--tf-glass-blur));
    box-shadow: var(--tf-shadow-card);
    padding: 46px 42px;
    overflow: hidden;
}

.service__contact__img figure img {
    border-radius: var(--tf-radius);
    box-shadow: var(--tf-shadow-card), var(--tf-glow-violet);
}

@media (max-width: 767px) {
    .service__details { padding: 80px 0 0; }
    .service__contact__block { padding: 28px 18px; }
    .sidebar__widget_network { padding: 34px 20px; }
}

@media (max-width: 1199px) {
    .header-lower .main-menu .navigation > li { margin: 0 2px; }
    .header-lower .main-menu .navigation > li > a { font-size: 14px; padding: 0 7px; }
}

@media (max-width: 991px) {
    .header-top-one { display: none; } /* utility strip drops on mobile */
}

/* Sticky header — slightly smaller lockup */
.sticky-header .tf-brand { padding: 10px 0; }
.sticky-header .tf-brand__mark { width: 38px; height: 38px; }
.sticky-header .tf-brand__name { font-size: 19px; }

/* Mobile drawer brand */
.mobile-menu .tf-brand { padding: 4px 0 16px; }
.mobile-menu .tf-brand__mark { width: 42px; height: 42px; }
.mobile-menu .tf-brand__name { font-size: 21px; }

/* Footer brand */
.footer-widget .tf-brand { margin-bottom: 18px; }

/* Frosted sticky header */
.sticky-header,
.main-header .header-lower {
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.sticky-header {
    background: rgba(0, 6, 26, 0.15);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    border-bottom: 1px solid var(--tf-line);
}

/* Menu link underline grow */
.main-menu .navigation > li > a {
    position: relative;
    transition: color 0.3s var(--tf-ease-out);
}

.main-menu .navigation > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 15px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--tf-grad-brand);
    transform: translateX(-50%);
    transition: width 0.35s var(--tf-ease-out);
}

.main-menu .navigation > li > a:hover::after,
.main-menu .navigation > li.current > a::after {
    width: 58%;
}

.main-menu .navigation > li > a:hover {
    color: var(--tf-yellow);
}

/* Dropdown panels */
.main-menu .navigation > li > ul {
    background: rgba(10, 18, 48, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--tf-glass-border);
    border-radius: 14px;
    box-shadow: var(--tf-shadow-card);
    overflow: hidden;
}

.main-menu .navigation > li > ul li a {
    transition: background 0.25s var(--tf-ease-out),
                padding-left 0.25s var(--tf-ease-out);
}

.main-menu .navigation > li > ul li a:hover {
    background: rgba(255, 14, 117, 0.10);
    padding-left: 20px;
}


/* ==========================================================================
   07. HERO — GLASS PAYMENT CARD COMPOSITION
   (structure injected in index.html: .tf-hero-visual)
   ========================================================================== */

.tf-hero-visual {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

/* Animated mesh + faint blueprint grid behind everything */
.tf-hero-mesh {
    position: absolute;
    inset: -12% -18%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(38% 44% at 24% 30%, rgba(255, 14, 117, 0.20) 0%, transparent 70%),
        radial-gradient(34% 40% at 78% 22%, rgba(145, 6, 148, 0.24) 0%, transparent 72%),
        radial-gradient(40% 46% at 62% 84%, rgba(246, 236, 79, 0.10) 0%, transparent 70%);
    filter: blur(6px);
    animation: tf-mesh-drift 16s var(--tf-ease-in-out) infinite alternate;
}

@keyframes tf-mesh-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}

.tf-hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(58% 62% at 50% 46%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(58% 62% at 50% 46%, #000 30%, transparent 78%);
}

/* ——— The glass payment card ——— */
.tf-paycard {
    position: relative;
    z-index: 2;
    width: min(430px, 100%);
    aspect-ratio: 1.586 / 1;
    border-radius: 24px;
    padding: 28px 30px;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(145, 6, 148, 0.14) 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        var(--tf-shadow-card),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 80px rgba(255, 14, 117, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform-style: preserve-3d;
    transform: rotateX(7deg) rotateY(-11deg) rotateZ(1.5deg);
    transition: transform 0.9s var(--tf-ease-out), box-shadow 0.9s var(--tf-ease-out);
    animation: tf-card-float 7s ease-in-out infinite;
    overflow: hidden;
}

.tf-paycard:hover {
    transform: rotateX(2deg) rotateY(-4deg) rotateZ(0deg) translateY(-8px);
    box-shadow:
        var(--tf-shadow-lift),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0 110px rgba(255, 14, 117, 0.22);
}

@keyframes tf-card-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -14px; }
}

/* Glossy sweep on the card face */
.tf-paycard::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.09) 45%, transparent 60%);
    pointer-events: none;
}

.tf-paycard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tf-paycard-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--tf-font-display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.02em;
}

.tf-paycard-brand img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
}

.tf-paycard-brand .tf-brand-tag {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tf-text-muted);
    display: block;
    margin-top: 1px;
}

.tf-contactless {
    color: rgba(255, 255, 255, 0.75);
    animation: tf-contactless-ping 3.2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes tf-contactless-ping {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.12); }
}

.tf-paycard-chip {
    width: 52px;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg, #F6EC4F 0%, #D9B84A 48%, #F6EC4F 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 6, 26, 0.35), inset 0 6px 10px rgba(255,255,255,0.4);
    position: relative;
    margin-top: 4px;
}

.tf-paycard-chip::before,
.tf-paycard-chip::after {
    content: "";
    position: absolute;
    border-color: rgba(0, 6, 26, 0.28);
    border-style: solid;
}

.tf-paycard-chip::before {
    inset: 7px 9px;
    border-width: 1px;
    border-radius: 4px;
}

.tf-paycard-chip::after {
    left: 50%;
    top: 4px;
    bottom: 4px;
    border-left-width: 1px;
}

.tf-paycard-number {
    font-family: 'Space Grotesk', monospace;
    font-size: clamp(19px, 2.2vw, 23px);
    font-weight: 500;
    letter-spacing: 0.24em;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 2px 12px rgba(0, 6, 26, 0.5);
    white-space: nowrap;
}

.tf-paycard-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.tf-paycard-bottom .tf-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tf-paycard-bottom .tf-field span {
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.tf-paycard-bottom .tf-field strong {
    font-family: var(--tf-font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tf-paycard-network {
    flex: none;
    width: 52px;
    height: 32px;
    border-radius: 999px;
    background: var(--tf-grad-brand);
    box-shadow: 0 4px 16px rgba(255, 14, 117, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tf-font-display);
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    letter-spacing: 0.02em;
}


/* ==========================================================================
   08. HERO — FLOATING CHIPS & NOTIFICATION
   ========================================================================== */

.tf-chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(10, 18, 48, 0.66);
    border: 1px solid var(--tf-glass-border);
    box-shadow: var(--tf-shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(var(--tf-glass-blur));
    -webkit-backdrop-filter: blur(var(--tf-glass-blur));
    font-family: var(--tf-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--tf-text-soft);
    white-space: nowrap;
    animation: tf-chip-float 6s ease-in-out infinite;
}

.tf-chip svg { flex: none; }
.tf-chip .tf-chip-label { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tf-text-muted); }
.tf-chip strong { font-family: var(--tf-font-display); font-size: 14px; color: #fff; letter-spacing: 0.01em; }

.tf-chip-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tf-grad-brand-soft);
    border: 1px solid rgba(255, 14, 117, 0.35);
    box-shadow: 0 0 18px rgba(255, 14, 117, 0.25);
}

.tf-chip-icon.is-yellow {
    background: rgba(246, 236, 79, 0.10);
    border-color: rgba(246, 236, 79, 0.35);
    box-shadow: 0 0 18px rgba(246, 236, 79, 0.18);
}

.tf-chip-icon.is-violet {
    background: rgba(145, 6, 148, 0.14);
    border-color: rgba(180, 75, 255, 0.35);
    box-shadow: 0 0 18px rgba(145, 6, 148, 0.3);
}

@keyframes tf-chip-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-13px); }
}

/* Chip placement (desktop; collapses to a wrap row on mobile) */
.tf-chip--lock    { top: 6%;    left: -7%;  animation-delay: 0.0s; }
.tf-chip--qr      { top: 13%;   right: -9%; animation-delay: 1.1s; }
.tf-chip--bolt    { bottom: 14%; left: -11%; animation-delay: 2.0s; }
.tf-chip--wallet  { bottom: 3%;  right: -4%; animation-delay: 0.6s; }

/* Payment-received toast sliding over the card */
.tf-notify {
    position: absolute;
    z-index: 4;
    top: -7%;
    right: 2%;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-radius: 14px;
    background: rgba(10, 18, 48, 0.72);
    border: 1px solid rgba(110, 231, 183, 0.30);
    box-shadow: 0 18px 50px rgba(0, 3, 20, 0.6), 0 0 34px rgba(110, 231, 183, 0.12);
    backdrop-filter: blur(var(--tf-glass-blur));
    -webkit-backdrop-filter: blur(var(--tf-glass-blur));
    font-size: 13px;
    color: var(--tf-text-soft);
    animation: tf-notify-in 5.5s var(--tf-ease-out) infinite;
}

.tf-notify .tf-notify-check {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0FBF87, #0A8F66);
    box-shadow: 0 0 20px rgba(15, 191, 135, 0.45);
}

.tf-notify strong {
    font-family: var(--tf-font-display);
    color: #6EE7B7;
    font-size: 15px;
}

.tf-notify .tf-chip-label { display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tf-text-muted); }

@keyframes tf-notify-in {
    0%       { opacity: 0; transform: translateY(16px) scale(0.94); }
    8%, 82%  { opacity: 1; transform: translateY(0) scale(1); }
    94%,100% { opacity: 0; transform: translateY(-10px) scale(0.97); }
}

/* Scroll cue */
.tf-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--tf-text-muted);
}

.tf-scroll-cue .tf-cue-track {
    width: 26px;
    height: 42px;
    border-radius: 999px;
    border: 1.5px solid var(--tf-line-strong);
    position: relative;
}

.tf-scroll-cue .tf-cue-track::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 7px;
    width: 4px;
    height: 9px;
    border-radius: 4px;
    background: var(--tf-magenta);
    transform: translateX(-50%);
    animation: tf-cue-drop 1.8s var(--tf-ease-in-out) infinite;
}

@keyframes tf-cue-drop {
    0%   { top: 7px;  opacity: 1; }
    70%  { top: 24px; opacity: 0; }
    100% { top: 7px;  opacity: 0; }
}


/* ==========================================================================
   09. HERO — TRUST MARQUEE
   ========================================================================== */

.tf-trust {
    border-top: 1px solid var(--tf-line);
    border-bottom: 1px solid var(--tf-line);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    padding: 20px 0;
    position: relative;
}

.tf-trust::before,
.tf-trust::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 130px;
    z-index: 2;
    pointer-events: none;
}

.tf-trust::before { left: 0;   background: linear-gradient(90deg, var(--tf-bg), transparent); }
.tf-trust::after  { right: 0;  background: linear-gradient(-90deg, var(--tf-bg), transparent); }

.tf-trust-track {
    display: flex;
    gap: 76px;
    width: max-content;
    animation: tf-marquee 30s linear infinite;
}

.tf-trust:hover .tf-trust-track { animation-play-state: paused; }

.tf-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--tf-font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.46);
    white-space: nowrap;
    transition: color 0.35s var(--tf-ease-out);
}

.tf-trust-item:hover { color: rgba(255, 255, 255, 0.9); }

.tf-trust-item .tf-trust-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tf-grad-brand);
    box-shadow: 0 0 10px rgba(255, 14, 117, 0.6);
}

@keyframes tf-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* ==========================================================================
   10. SERVICE CARDS (GLASS)
   ========================================================================== */

/* Container becomes a soft stage instead of a hard box */
.service__data {
    background:
        radial-gradient(60% 90% at 50% 0%, rgba(145, 6, 148, 0.08) 0%, transparent 70%),
        rgba(255, 255, 255, 0.015);
    border: 1px solid var(--tf-line);
    border-image: none;
    border-radius: var(--tf-radius-lg);
    box-shadow: none;
}

/* Each service becomes a floating glass card */
.service__block {
    background: var(--tf-glass-bg);
    border: 1px solid var(--tf-glass-border);
    border-radius: var(--tf-radius);
    backdrop-filter: blur(var(--tf-glass-blur));
    -webkit-backdrop-filter: blur(var(--tf-glass-blur));
    box-shadow: var(--tf-shadow-card);
    overflow: hidden;
    margin: 14px 6px 26px;
    padding: 44px 34px 84px;
    transition:
        transform 0.55s var(--tf-ease-out),
        border-color 0.55s var(--tf-ease-out),
        box-shadow 0.55s var(--tf-ease-out),
        background 0.55s var(--tf-ease-out);
}

/* Kill old arc top-borders, use clean card edge */
.service__block::before { display: none; }

/* Pointer-follow glow (position set by enhance.js CSS vars) */
.service__block::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.5s var(--tf-ease-out);
    background: radial-gradient(340px circle at var(--tf-mx, 50%) var(--tf-my, 50%),
        rgba(255, 14, 117, 0.13) 0%, transparent 65%);
    pointer-events: none;
}

.service__block:hover {
    transform: translateY(-10px);
    background: var(--tf-glass-bg-hover);
    border-color: rgba(255, 14, 117, 0.38);
    box-shadow: var(--tf-shadow-lift);
}

.service__block:hover::after { opacity: 1; }

/* Icon: keep the hexagon motif, add glow halo */
.service__icon i {
    background: var(--tf-grad-accent);
    box-shadow: 0 0 0 0 rgba(255, 14, 117, 0);
    transition: box-shadow 0.55s var(--tf-ease-out), transform 0.55s var(--tf-ease-out);
}

.service__block:hover .service__icon i {
    box-shadow: 0 0 44px rgba(255, 14, 117, 0.4);
    transform: translateY(-4px);
}

.service__icon:before {
    background: rgba(145, 6, 148, 0.22);
    filter: blur(2px);
}

/* Card titles */
.service__text h4 a {
    transition: color 0.3s var(--tf-ease-out);
}

.service__text h4 a:hover {
    color: var(--tf-yellow);
}


/* ==========================================================================
   11. ABOUT SECTION
   ========================================================================== */

/* Gradient ring + shadow around the arch image */
.about__block figure {
    position: relative;
    border-radius: 24px 24px 200px 200px;
    padding: 0;
    filter: drop-shadow(0 30px 60px rgba(0, 3, 20, 0.6));
}

.about__block figure::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 34px 34px 214px 214px;
    background: var(--tf-grad-accent);
    opacity: 0.35;
    filter: blur(26px);
    z-index: -1;
}

.about__block figure img {
    border-radius: 24px 24px 200px 200px;
}

/* Funfact chip → glass pill */
.funfact__content.about {
    border-radius: var(--tf-radius);
    border: 1px solid var(--tf-glass-border);
    background: rgba(10, 18, 48, 0.78) !important;
    backdrop-filter: blur(var(--tf-glass-blur));
    -webkit-backdrop-filter: blur(var(--tf-glass-blur));
    box-shadow: var(--tf-shadow-card), var(--tf-glow-violet);
    padding: 22px 30px;
}

/* Why-choose-us rows */
.team__data {
    position: relative;
    border-radius: var(--tf-radius-sm);
    transition: background 0.4s var(--tf-ease-out), transform 0.4s var(--tf-ease-out);
}

.team__data:hover {
    background: var(--tf-glass-bg);
    transform: translateX(6px);
}


/* ==========================================================================
   12. COUNTERS / FUNFACTS
   ========================================================================== */

.funfact__content {
    border-radius: var(--tf-radius);
    border: 1px solid var(--tf-glass-border);
    background: var(--tf-glass-bg);
    backdrop-filter: blur(var(--tf-glass-blur));
    -webkit-backdrop-filter: blur(var(--tf-glass-blur));
    transition: transform 0.5s var(--tf-ease-out), border-color 0.5s var(--tf-ease-out), box-shadow 0.5s var(--tf-ease-out);
}

.funfact__content:hover {
    transform: translateY(-6px);
    border-color: rgba(246, 236, 79, 0.4);
    box-shadow: 0 20px 50px rgba(0, 3, 20, 0.55), 0 0 40px rgba(246, 236, 79, 0.08);
}

.count-text,
.count-outer h1 {
    font-family: var(--tf-font-display);
    background: var(--tf-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ==========================================================================
   13. TESTIMONIALS (GLASS)
   ========================================================================== */

.testimonials__block__one {
    border-radius: var(--tf-radius-lg);
}

.test__bg {
    background: var(--tf-glass-bg) !important;
    border: 1px solid var(--tf-glass-border);
    border-radius: var(--tf-radius-lg);
    backdrop-filter: blur(var(--tf-glass-blur));
    -webkit-backdrop-filter: blur(var(--tf-glass-blur));
    box-shadow: var(--tf-shadow-card);
    transition: transform 0.5s var(--tf-ease-out), border-color 0.5s var(--tf-ease-out), box-shadow 0.5s var(--tf-ease-out);
}

.testimonials__block__one:hover .test__bg {
    transform: translateY(-8px);
    border-color: rgba(255, 14, 117, 0.32);
    box-shadow: var(--tf-shadow-lift);
}

/* Avatar ring */
.authore__img figure.image img,
.authore__img figure {
    border-radius: 50% !important;
}

.authore__img figure.image {
    box-shadow: 0 0 0 2px var(--tf-bg), 0 0 0 4px rgba(255, 14, 117, 0.55);
}

/* Slider buttons — gradient pills */
.swiper__button .button_next,
.swiper__button .button_prev {
    background: var(--tf-glass-bg);
    border: 1px solid var(--tf-glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    transition: all 0.4s var(--tf-ease-out);
}

.swiper__button .button_next:hover,
.swiper__button .button_prev:hover {
    background: var(--tf-grad-brand);
    border-color: transparent;
    box-shadow: var(--tf-glow-pink);
    transform: translateY(-3px);
}


/* ==========================================================================
   14. BRAND MARQUEE
   ========================================================================== */

.brand__section {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.brand__name h1 {
    font-family: var(--tf-font-display);
    font-size: 46px !important;
    font-weight: 600;
    letter-spacing: -0.01em;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.34);
    color: transparent;
    transition: all 0.4s var(--tf-ease-out);
}

.brand__content:hover .brand__name h1 {
    -webkit-text-stroke-color: transparent;
    background: var(--tf-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
}


/* ==========================================================================
   15. BLOG CARDS
   ========================================================================== */

.news___block .inner-box {
    border-radius: var(--tf-radius);
    border: 1px solid var(--tf-glass-border);
    background: var(--tf-glass-bg);
    backdrop-filter: blur(var(--tf-glass-blur));
    -webkit-backdrop-filter: blur(var(--tf-glass-blur));
    box-shadow: var(--tf-shadow-card);
    overflow: hidden;
    transition: transform 0.5s var(--tf-ease-out), border-color 0.5s var(--tf-ease-out), box-shadow 0.5s var(--tf-ease-out);
}

.news___block:hover .inner-box {
    transform: translateY(-9px);
    border-color: rgba(246, 236, 79, 0.35);
    box-shadow: var(--tf-shadow-lift);
}

.news___block .image-box figure.image {
    overflow: hidden;
}

.news___block .image-box img {
    transition: transform 0.8s var(--tf-ease-out);
}

.news___block:hover .image-box img {
    transform: scale(1.07);
}

/* Date pill */
.post__date {
    background: rgba(0, 6, 26, 0.72) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--tf-glass-border);
    border-radius: 999px;
    overflow: hidden;
}


/* ==========================================================================
   16. FOOTER
   ========================================================================== */

/* CTA band — glowing gradient panel */
.main__footer .footer-top {
    background:
        radial-gradient(80% 140% at 12% 0%, rgba(255, 14, 117, 0.20) 0%, transparent 55%),
        radial-gradient(70% 130% at 88% 100%, rgba(145, 6, 148, 0.22) 0%, transparent 60%),
        var(--tf-surface-2);
    border-top: 1px solid var(--tf-glass-border);
}

.main__footer .footer-top .left__top h3 {
    font-family: var(--tf-font-display);
    letter-spacing: -0.02em;
    background: linear-gradient(95deg, #fff 30%, #FFD3E8 60%, #E7B3FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hairline above widgets */
.footer-widget-section {
    position: relative;
}

.footer-widget-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1296px, 92%);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 14, 117, 0.45), rgba(246, 236, 79, 0.3), transparent);
}

/* Widget titles */
.footer-widget .widget-title h4 {
    font-family: var(--tf-font-display);
    letter-spacing: 0.02em;
    position: relative;
    padding-bottom: 12px;
}

.footer-widget .widget-title h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: var(--tf-grad-brand);
}

/* Subscribe input */
.subscribe-inner .form-group input {
    border-radius: 999px !important;
    border: 1px solid var(--tf-glass-border) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding-left: 22px !important;
}

.subscribe-inner .form-group input:focus {
    border-color: rgba(255, 14, 117, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(255, 14, 117, 0.12);
}

.subscribe-inner .btn-box .theme-btn-one {
    border-radius: 999px !important;
}

/* Footer links hover */
.footer-widget a:hover {
    color: var(--tf-yellow) !important;
}


/* ==========================================================================
   17. PAGE TITLE (INNER PAGES)
   ========================================================================== */

.page__title .bg-layer {
    position: absolute;
    inset: 0;
}

/* Cinematic video background (Pexels free-license fintech motion).
   Video is the ONLY background in the normal path — before it decodes,
   the header simply shows the page navy under the brand tint/overlay
   gradients (reads as design, not a placeholder). Brand art returns
   only via .tf-bg-art on video failure or reduced motion. */
.page__title .bg-layer video.tf-bgvideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease-out;
}

.page__title .bg-layer video.tf-bgvideo.is-live {
    opacity: 1;
}

/* Fallback still (video error / reduced motion / decode timeout) */
.page__title .bg-layer.tf-bg-art {
    background-image: url(../images/resource/page-title-bg.webp);
    background-size: cover;
    background-position: center;
}


/* ==========================================================================

   PRIDE SECTION — ANIMATED AURORA MANIFESTO (about.html)
   --------------------------------------------------------------------------
   Replaces the template stock backdrop (bg-04.jpg) with the site's aurora
   language: slow-drifting gradient orbs over a masked grid, with the
   statement set in a glass panel. Zero asset weight, no decode flash,
   reduced-motion safe.

   ========================================================================== */

.pride__section { overflow: hidden; }

.pride__layer.tf-pride-aurora {
    background:
        radial-gradient(120% 140% at 50% 120%, rgba(145, 6, 148, 0.16) 0%, transparent 60%),
        #060B1E;
}

.tf-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    will-change: transform;
    animation: tf-orb-drift 22s ease-in-out infinite alternate;
}

.tf-orb--m {
    width: 420px; height: 420px;
    background: rgba(255, 14, 117, 0.32);
    top: -120px; left: 6%;
}

.tf-orb--v {
    width: 520px; height: 520px;
    background: rgba(145, 6, 148, 0.36);
    bottom: -180px; right: 4%;
    animation-duration: 26s;
    animation-direction: alternate-reverse;
}

.tf-orb--y {
    width: 300px; height: 300px;
    background: rgba(246, 236, 79, 0.15);
    top: 30%; left: 52%;
    animation-duration: 19s;
}

@keyframes tf-orb-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(60px, 40px, 0) scale(1.15); }
}

.tf-aurora-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(70% 80% at 50% 50%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000 20%, transparent 75%);
}

/* Glass manifesto panel */
.pride__block {
    position: relative;
    z-index: 2;
    max-width: 920px;
    margin: 0 auto;
    padding: 56px 48px;
    border-radius: var(--tf-radius-lg);
    background: var(--tf-glass-bg);
    border: 1px solid var(--tf-glass-border);
    backdrop-filter: blur(var(--tf-glass-blur));
    -webkit-backdrop-filter: blur(var(--tf-glass-blur));
    box-shadow: var(--tf-shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.pride__block .tf-pride-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    border-radius: 22px;
    background: var(--tf-grad-brand-soft);
    border: 1px solid rgba(255, 14, 117, 0.30);
    box-shadow: 0 0 34px rgba(255, 14, 117, 0.18);
    margin-bottom: 10px;
}

.pride__block h1 {
    font-family: var(--tf-font-display);
    font-size: clamp(32px, 4.6vw, 50px);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.022em;
    padding: 0;
}

.pride__block h1 span {
    background: var(--tf-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 767px) {
    .pride__block { padding: 36px 22px; }
    .tf-orb { filter: blur(48px); }
}

@media (prefers-reduced-motion: reduce) {
    .tf-orb { animation: none; }
}

/* Brand tint keeps video on-palette under the readability overlay */
.page__title .bg-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(120deg, rgba(145, 6, 148, 0.30) 0%, transparent 45%),
        radial-gradient(60% 90% at 18% 30%, rgba(255, 14, 117, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

.page__title .bg-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(0, 6, 26, 0.60) 0%, rgba(0, 6, 26, 0.80) 78%, var(--tf-bg) 100%),
        radial-gradient(50% 90% at 18% 30%, rgba(255, 14, 117, 0.16) 0%, transparent 70%);
}

.page__title .content__box {
    position: relative;
    z-index: 3;
    padding: 46px 0 58px;
}

.page__title h1.title {
    font-family: var(--tf-font-display);
    letter-spacing: -0.03em;
    text-shadow: 0 12px 40px rgba(0, 3, 20, 0.6);
}

.page__title .bread__crumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    border-radius: 999px;
    background: var(--tf-glass-bg);
    border: 1px solid var(--tf-glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-bottom: 16px;
}

.page__title .bread__crumb li a {
    color: var(--tf-text-soft);
    transition: color 0.3s var(--tf-ease-out);
}

.page__title .bread__crumb li a:hover { color: var(--tf-yellow); }
.page__title .bread__crumb li { color: var(--tf-text-muted); }


/* ==========================================================================
   18. FORMS
   ========================================================================== */

.form-inner input,
.form-inner textarea,
.default-form input,
.default-form textarea {
    border-radius: 12px !important;
    border: 1px solid var(--tf-line) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    letter-spacing: 0.04em !important;
    transition: border-color 0.35s var(--tf-ease-out), box-shadow 0.35s var(--tf-ease-out), background 0.35s var(--tf-ease-out);
}

.form-inner input::placeholder,
.form-inner textarea::placeholder,
.default-form input::placeholder,
.default-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
    letter-spacing: 0.05em;
}

.form-inner input:focus,
.form-inner textarea:focus,
.default-form input:focus,
.default-form textarea:focus {
    border-color: rgba(255, 14, 117, 0.6) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 0 0 4px rgba(255, 14, 117, 0.13);
}


/* ==========================================================================
   19. SCROLL PROGRESS BAR (injected by enhance.js)
   ========================================================================== */

.tf-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 9999;
    pointer-events: none;
}

.tf-progress .tf-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #F6EC4F, #FF0E75, #B44BFF);
    box-shadow: 0 0 12px rgba(255, 14, 117, 0.6);
    border-radius: 0 3px 3px 0;
    transition: width 0.12s linear;
}


/* ==========================================================================
   20. REVEAL ANIMATIONS (driven by enhance.js)
   ========================================================================== */

[data-tf-reveal] {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity 0.85s var(--tf-ease-out),
        transform 0.85s var(--tf-ease-out);
    transition-delay: var(--tf-reveal-delay, 0ms);
    will-change: opacity, transform;
}

[data-tf-reveal="left"]  { transform: translateX(-42px); }
[data-tf-reveal="right"] { transform: translateX(42px); }
[data-tf-reveal="zoom"]  { transform: scale(0.92); }

[data-tf-reveal].tf-revealed {
    opacity: 1;
    transform: none;
}


/* ==========================================================================
   21. TILT & POINTER GLOW (driven by enhance.js)
   ========================================================================== */

[data-tf-tilt] {
    transform-style: preserve-3d;
    will-change: transform;
}

.tf-tilting {
    transition: transform 0.18s ease-out;
}


/* ==========================================================================
   22. CONTRAST & A11Y FIXES
   ========================================================================== */

/* Muted meta text lifted from #666 to a readable slate */
.blog__section .post__date li,
.meta-text,
.authore__info p,
.post__date ul li,
.normaol__text p {
    color: var(--tf-text-muted);
}

.authore__info p { color: var(--tf-text-muted); }

/* Logo images render crisp */
.header-lower img,
.sticky-header img,
.footer-logo img,
.mobile-menu .nav-logo img {
    image-rendering: -webkit-optimize-contrast;
}

/* Scroll-to-top refined */
.scroll-to-top .scroll-top-inner {
    border-radius: 999px;
}


/* ==========================================================================
   23. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
        scroll-behavior: auto !important;
    }

    [data-tf-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ==========================================================================
   24. RESPONSIVE ADJUSTMENTS (new elements only)
   ========================================================================== */

@media (max-width: 1231px) {
    .tf-hero-visual { min-height: 480px; }
    .tf-chip--lock   { left: -2%; }
    .tf-chip--bolt   { left: -3%; }
    .tf-chip--qr     { right: -2%; }
}

@media (max-width: 991px) {
    .tf-hero-visual {
        min-height: 0;
        margin-top: 56px;
        padding: 30px 0 46px;
    }

    .tf-paycard { transform: none; width: min(400px, 92%); }
    .tf-paycard:hover { transform: translateY(-6px); }

    /* Chips wrap into a tidy row under the card */
    .tf-chip--lock   { position: relative; top: auto; left: auto; display: none; }
    .tf-chip--bolt   { position: relative; top: auto; left: auto; display: none; }
    .tf-chip--qr     { top: -4%; right: 2%; }
    .tf-chip--wallet { bottom: -5%; right: 2%; }
    .tf-notify       { top: -9%; right: 0; }

    .tf-scroll-cue { display: none; }
}

@media (max-width: 767px) {
    .banner__title h1 { font-size: 46px; line-height: 1.12; }

    .sub__title h4 { font-size: 11px; letter-spacing: 0.24em; padding: 8px 16px 8px 13px; }

    .service__block { padding: 34px 22px 72px; margin: 10px 0 18px; }

    .tf-paycard { padding: 20px; border-radius: 18px; }
    .tf-paycard-number { letter-spacing: 0.16em; }
    .tf-paycard-chip { width: 42px; height: 31px; }

    .tf-chip { padding: 9px 13px; font-size: 12px; }
    .tf-chip .tf-chip-icon { width: 30px; height: 30px; }
    .tf-notify { padding: 10px 14px; font-size: 12px; }

    .brand__name h1 { font-size: 34px !important; }

    .tf-trust-item { font-size: 15px; gap: 10px; }
    .tf-trust-track { gap: 46px; }
}

@media (max-width: 499px) {
    .tf-notify { display: none; }
    .tf-chip--wallet { display: none; }
    .tf-chip--qr { display: none; }
}


/* ==========================================================================

   CONSULTANCY MODULE (.tf-con*)
   --------------------------------------------------------------------------
   Styles for the Software Development Consultancy page + integrations.
   Scope tags, engagement cards, process timeline, FAQ, dual-tab code
   editor hero, homepage teaser, services highlight. All tokens from :root.

   ========================================================================== */

/* —— 1. Hero stage (shared layout with homepage hero visual) —— */
.tf-con-stage {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1100px;
}

.tf-con-stage .tf-hero-mesh,
.tf-con-stage .tf-hero-grid { inset: -10% -16%; }

.tf-con-hero {
    padding: 70px 0 30px;
}

.tf-con-hero .tf-con-lede {
    max-width: 560px;
    color: var(--tf-text-soft);
    padding: 0 20px 26px 0;
}

.tf-con-hero h2.tf-con-headline {
    font-family: var(--tf-font-display);
    font-size: 54px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.028em;
    color: #fff;
    padding: 18px 0 6px;
}

/* —— 2. Code editor visual —— */
.tf-con-editor {
    position: relative;
    z-index: 2;
    width: min(520px, 100%);
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(16, 26, 62, 0.92) 0%, rgba(6, 14, 38, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--tf-shadow-card), 0 0 70px rgba(145, 6, 148, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    transform: rotateX(6deg) rotateY(-9deg) rotateZ(1deg);
    transition: transform 0.9s var(--tf-ease-out), box-shadow 0.9s var(--tf-ease-out);
    animation: tf-card-float 7.5s ease-in-out infinite;
}

.tf-con-editor:hover {
    transform: rotateX(1deg) rotateY(-3deg) translateY(-6px);
    box-shadow: var(--tf-shadow-lift), 0 0 100px rgba(255, 14, 117, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.tf-con-titlebar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.tf-con-dots { display: flex; gap: 7px; }
.tf-con-dots span { width: 11px; height: 11px; border-radius: 50%; }
.tf-con-dots span:nth-child(1) { background: #FF5F57; }
.tf-con-dots span:nth-child(2) { background: #FEBC2E; }
.tf-con-dots span:nth-child(3) { background: #28C840; }

.tf-con-filename {
    font-family: var(--tf-font-body);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--tf-text-muted);
}

.tf-con-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tf-con-tab {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    font-family: 'Space Grotesk', monospace;
    font-size: 12.5px;
    color: var(--tf-text-muted);
    border-bottom: 2px solid transparent;
    position: relative;
}

/* Tabs pulse active in sync with code panels (16s cycle) */
.tf-con-tab:first-child { animation: tf-tab-a 16s step-end infinite; }
.tf-con-tab:last-child  { animation: tf-tab-b 16s step-end infinite; }

@keyframes tf-tab-a {
    0%, 49.9%   { color: #fff; border-bottom-color: var(--tf-magenta); }
    50%, 100%   { color: var(--tf-text-muted); border-bottom-color: transparent; }
}

@keyframes tf-tab-b {
    0%, 49.9%   { color: var(--tf-text-muted); border-bottom-color: transparent; }
    50%, 100%   { color: #fff; border-bottom-color: var(--tf-yellow); }
}

.tf-con-codearea {
    padding: 18px 20px 22px;
    font-family: 'Space Grotesk', 'Consolas', monospace;
    font-size: 13.5px;
    line-height: 2.0;
    min-height: 218px;
    position: relative;
}

/* Code panels alternate visibility in the same 16s cycle */
.tf-con-panel { display: none; }
.tf-con-panel.is-a { display: block; animation: tf-panel-a 16s step-end infinite; }
.tf-con-panel.is-b { display: block; animation: tf-panel-b 16s step-end infinite; }

@keyframes tf-panel-a {
    0%, 49.9%  { visibility: visible; }
    50%, 100%  { visibility: hidden; }
}

@keyframes tf-panel-b {
    0%, 49.9%  { visibility: hidden; }
    50%, 100%  { visibility: visible; }
}

.tf-con-ln { color: rgba(139, 148, 173, 0.5); display: inline-block; width: 22px; user-select: none; }
.tf-con-kw  { color: #FF7DB1; }   /* keywords   */
.tf-con-fn  { color: #F6EC4F; }   /* functions  */
.tf-con-str { color: #7EE7B7; }   /* strings    */
.tf-con-num { color: #B48CFF; }   /* numbers    */
.tf-con-cm  { color: #6b7490; font-style: italic; } /* comments */

/* Typing line: plain-text reveal via width steps */
.tf-con-typing {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    max-width: 100%;
}

.tf-con-panel.is-a .tf-con-typing { animation: tf-type-a 3.6s steps(28, end) infinite; }
.tf-con-panel.is-b .tf-con-typing { animation: tf-type-b 3.6s steps(26, end) infinite; }

@keyframes tf-type-a { 0% { width: 0; } 55%, 100% { width: 28ch; } }
@keyframes tf-type-b { 0% { width: 0; } 55%, 100% { width: 26ch; } }

.tf-con-caret {
    display: inline-block;
    width: 8px;
    height: 16px;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--tf-magenta);
    animation: tf-caret-blink 1s step-end infinite;
}

@keyframes tf-caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Editor statusbar */
.tf-con-status {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--tf-text-muted);
}

.tf-con-status .tf-live {
    color: #7EE7B7;
}

.tf-con-status .tf-live::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0FBF87;
    box-shadow: 0 0 8px rgba(15, 191, 135, 0.8);
    margin-right: 7px;
    animation: tf-pulse-dot 2s ease-in-out infinite;
}

/* Floating chips around the editor */
.tf-con-stage .tf-chip--pay   { top: 7%;    left: -8%;  animation-delay: 0.0s; }
.tf-con-stage .tf-chip--algo  { top: 12%;   right: -9%; animation-delay: 1.2s; }
.tf-con-stage .tf-chip--edge  { bottom: 12%; left: -10%; animation-delay: 2.1s; }
.tf-con-stage .tf-chip--rt    { bottom: 4%;  right: -5%; animation-delay: 0.6s; }

/* —— 3. Scope tag pills (flagship cards) —— */
.tf-con-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--tf-font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #FFC1DA;
    background: var(--tf-grad-brand-soft);
    border: 1px solid rgba(255, 14, 117, 0.35);
    margin-bottom: 16px;
}

.tf-con-tag::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tf-magenta);
}

/* Card tag slot sits above the hexagon icon */
.service__block .tf-con-tag { position: relative; z-index: 2; }

/* —— 4. Risk disclaimer —— */
.tf-con-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 10px 14px;
    border-left: 2px solid rgba(246, 236, 79, 0.45);
    background: rgba(246, 236, 79, 0.05);
    border-radius: 0 10px 10px 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--tf-text-muted);
}

/* —— 5. Engagement model cards —— */
.tf-con-engage {
    position: relative;
    background: var(--tf-glass-bg);
    border: 1px solid var(--tf-glass-border);
    border-radius: var(--tf-radius);
    backdrop-filter: blur(var(--tf-glass-blur));
    -webkit-backdrop-filter: blur(var(--tf-glass-blur));
    box-shadow: var(--tf-shadow-card);
    padding: 36px 30px;
    height: 100%;
    transition: transform 0.5s var(--tf-ease-out), border-color 0.5s var(--tf-ease-out), box-shadow 0.5s var(--tf-ease-out);
}

.tf-con-engage:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 14, 117, 0.35);
    box-shadow: var(--tf-shadow-lift);
}

.tf-con-engage .tf-con-engage-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tf-grad-brand-soft);
    border: 1px solid rgba(255, 14, 117, 0.3);
    margin-bottom: 20px;
}

.tf-con-engage h3 {
    font-family: var(--tf-font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}

.tf-con-engage .tf-con-best {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tf-yellow);
    margin-bottom: 16px;
}

.tf-con-engage ul {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.tf-con-engage ul li {
    position: relative;
    padding: 6px 0 6px 26px;
    color: var(--tf-text-soft);
    font-size: 14.5px;
    line-height: 1.7;
}

.tf-con-engage ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237EE7B7' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat,
        rgba(110, 231, 183, 0.1);
}

.tf-con-engage .tf-con-engage-link {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--tf-yellow);
    transition: color 0.3s var(--tf-ease-out);
}

.tf-con-engage .tf-con-engage-link:hover { color: #fff; }

/* Featured middle card — gradient border + badge */
.tf-con-engage.is-featured { border-color: transparent; }

.tf-con-engage.is-featured::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--tf-grad-brand);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.tf-con-engage.is-featured::after {
    content: "Most Popular";
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 16px;
    border-radius: 999px;
    background: var(--tf-grad-brand);
    box-shadow: 0 6px 18px rgba(255, 14, 117, 0.4);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
}

/* —— 6. Process timeline —— */
.tf-con-steps {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding-left: 8px;
}

.tf-con-steps::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(255, 14, 117, 0.55) 0%,
        rgba(145, 6, 148, 0.45) 55%,
        rgba(246, 236, 79, 0.35) 100%);
}

.tf-con-step {
    position: relative;
    display: flex;
    gap: 26px;
    padding: 0 0 38px 0;
}

.tf-con-step:last-child { padding-bottom: 0; }

.tf-con-stepnum {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tf-font-display);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(160deg, #0A1230 0%, #060E26 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 1.5px rgba(255, 14, 117, 0.55), 0 0 26px rgba(255, 14, 117, 0.18);
    transition: box-shadow 0.4s var(--tf-ease-out), transform 0.4s var(--tf-ease-out);
}

.tf-con-step:hover .tf-con-stepnum {
    box-shadow: 0 0 0 1.5px rgba(246, 236, 79, 0.7), 0 0 30px rgba(246, 236, 79, 0.2);
    transform: scale(1.08);
}

.tf-con-step h3 {
    font-family: var(--tf-font-display);
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    padding-top: 4px;
    margin-bottom: 4px;
}

.tf-con-step p {
    color: var(--tf-text-soft);
    font-size: 14.5px;
    line-height: 1.75;
    margin: 0;
}

/* —— 7. FAQ accordion —— */
.tf-con-faq {
    max-width: 860px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.tf-con-faq details {
    background: var(--tf-glass-bg);
    border: 1px solid var(--tf-glass-border);
    border-radius: 14px;
    backdrop-filter: blur(var(--tf-glass-blur));
    -webkit-backdrop-filter: blur(var(--tf-glass-blur));
    overflow: hidden;
    transition: border-color 0.4s var(--tf-ease-out);
}

.tf-con-faq details[open] { border-color: rgba(255, 14, 117, 0.35); }

.tf-con-faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    font-family: var(--tf-font-display);
    font-size: 16.5px;
    font-weight: 600;
    color: #fff;
    user-select: none;
}

.tf-con-faq summary::-webkit-details-marker { display: none; }

.tf-con-faq summary .tf-con-plus {
    flex: none;
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--tf-grad-brand-soft);
    border: 1px solid rgba(255, 14, 117, 0.3);
    transition: transform 0.4s var(--tf-ease-out);
}

.tf-con-faq summary .tf-con-plus::before,
.tf-con-faq summary .tf-con-plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--tf-magenta);
    transform: translate(-50%, -50%);
}

.tf-con-faq summary .tf-con-plus::before { width: 11px; height: 2px; border-radius: 2px; }
.tf-con-faq summary .tf-con-plus::after  { width: 2px; height: 11px; border-radius: 2px; }

.tf-con-faq details[open] summary .tf-con-plus { transform: rotate(135deg); }

.tf-con-faq .tf-con-answer {
    padding: 0 24px 22px;
    color: var(--tf-text-soft);
    font-size: 14.5px;
    line-height: 1.8;
}

/* —— 8. Homepage teaser —— */
.tf-con-teaser {
    position: relative;
    padding: 90px 0;
}

.tf-con-schips {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 34px 0 44px;
}

.tf-con-schip {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 14px 22px;
    border-radius: 14px;
    background: var(--tf-glass-bg);
    border: 1px solid var(--tf-glass-border);
    backdrop-filter: blur(var(--tf-glass-blur));
    -webkit-backdrop-filter: blur(var(--tf-glass-blur));
    box-shadow: var(--tf-shadow-card);
    font-family: var(--tf-font-display);
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    transition: transform 0.45s var(--tf-ease-out), border-color 0.45s var(--tf-ease-out), box-shadow 0.45s var(--tf-ease-out);
}

.tf-con-schip:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 14, 117, 0.4);
    box-shadow: var(--tf-shadow-lift);
}

.tf-con-schip .tf-con-sdot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tf-grad-brand);
    box-shadow: 0 0 10px rgba(255, 14, 117, 0.6);
}

.tf-con-ctapanel {
    position: relative;
    border-radius: var(--tf-radius-lg);
    padding: 46px 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    background:
        radial-gradient(70% 140% at 8% 0%, rgba(255, 14, 117, 0.18) 0%, transparent 55%),
        radial-gradient(60% 130% at 92% 100%, rgba(145, 6, 148, 0.2) 0%, transparent 60%),
        var(--tf-surface-2);
    border: 1px solid var(--tf-glass-border);
    overflow: hidden;
}

.tf-con-ctapanel h3 {
    font-family: var(--tf-font-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(95deg, #fff 35%, #FFD3E8 65%, #E7B3FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 6px;
}

.tf-con-ctapanel p {
    color: var(--tf-text-soft);
    margin: 0;
    max-width: 560px;
}

/* —— 8b. Consultancy supporting-enabler strip (below flagship grid) —— */
.tf-con-supportstrip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 34px 6px 10px;
    padding: 26px 30px;
    border-radius: var(--tf-radius-lg);
    background:
        radial-gradient(60% 130% at 88% 0%, rgba(145, 6, 148, 0.14) 0%, transparent 55%),
        var(--tf-glass-bg);
    border: 1px solid var(--tf-glass-border);
    backdrop-filter: blur(var(--tf-glass-blur));
    -webkit-backdrop-filter: blur(var(--tf-glass-blur));
    box-shadow: var(--tf-shadow-card);
    overflow: hidden;
    transition: transform 0.5s var(--tf-ease-out), box-shadow 0.5s var(--tf-ease-out);
}

.tf-con-supportstrip:hover {
    transform: translateY(-4px);
    box-shadow: var(--tf-shadow-lift);
}

.tf-con-supportstrip__art {
    flex: none;
    width: 190px;
    height: 110px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--tf-shadow-card);
}

.tf-con-supportstrip__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tf-con-supportstrip__body {
    flex: 1;
    min-width: 0;
}

.tf-con-supportstrip__body .tf-con-tag { margin-bottom: 8px; }

.tf-con-supportstrip__body h3 {
    font-family: var(--tf-font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: #fff;
    margin-bottom: 6px;
}

.tf-con-supportstrip__body p {
    color: var(--tf-text-soft);
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
}

.tf-con-supportstrip__cta {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: 999px;
    background: var(--tf-grad-brand);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(255, 14, 117, 0.28);
    transition: transform 0.4s var(--tf-ease-out), box-shadow 0.4s var(--tf-ease-out);
}

.tf-con-supportstrip__cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(255, 14, 117, 0.42);
    color: #fff;
}

@media (max-width: 991px) {
    .tf-con-supportstrip { flex-wrap: wrap; }
    .tf-con-supportstrip__art { width: 100%; height: 150px; }
}

@media (max-width: 767px) {
    .tf-con-supportstrip { padding: 20px; gap: 18px; }
    .tf-con-supportstrip__body h3 { font-size: 20px; }
    .tf-con-supportstrip__cta { width: 100%; justify-content: center; }
}

/* —— 9. Services page highlight card —— */
.tf-con-highlight {
    position: relative;
    margin-top: 46px;
    padding: 44px 48px;
    border-radius: var(--tf-radius-lg);
    background:
        radial-gradient(60% 120% at 12% 0%, rgba(255, 14, 117, 0.14) 0%, transparent 55%),
        var(--tf-glass-bg);
    border: 1px solid var(--tf-glass-border);
    backdrop-filter: blur(var(--tf-glass-blur));
    -webkit-backdrop-filter: blur(var(--tf-glass-blur));
    box-shadow: var(--tf-shadow-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    flex-wrap: wrap;
    overflow: hidden;
    transition: transform 0.5s var(--tf-ease-out), box-shadow 0.5s var(--tf-ease-out), border-color 0.5s var(--tf-ease-out);
}

.tf-con-highlight::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(120deg, rgba(255,14,117,.6), rgba(246,236,79,.35), rgba(145,6,148,.55));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.tf-con-highlight:hover {
    transform: translateY(-6px);
    box-shadow: var(--tf-shadow-lift);
}

.tf-con-newbadge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 7px 20px 8px 24px;
    background: var(--tf-grad-brand);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-radius: 0 0 0 14px;
    box-shadow: -6px 6px 20px rgba(255, 14, 117, 0.35);
}

.tf-con-highlight h3 {
    font-family: var(--tf-font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 8px;
}

.tf-con-highlight p {
    color: var(--tf-text-soft);
    max-width: 640px;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.75;
}

.tf-con-explore {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 15px 30px;
    border-radius: 999px;
    background: var(--tf-grad-brand);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(255, 14, 117, 0.3);
    transition: transform 0.4s var(--tf-ease-out), box-shadow 0.4s var(--tf-ease-out);
}

.tf-con-explore:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(255, 14, 117, 0.45);
    color: #fff;
}

/* —— 10. Consultancy module responsive —— */
@media (max-width: 1231px) {
    .tf-con-stage .tf-chip--pay  { left: -3%; }
    .tf-con-stage .tf-chip--edge { left: -3%; }
    .tf-con-stage .tf-chip--algo { right: -3%; }
}

@media (max-width: 991px) {
    .tf-con-stage { min-height: 0; margin-top: 46px; padding: 26px 0 40px; }
    .tf-con-editor { transform: none; width: min(480px, 94%); }
    .tf-con-editor:hover { transform: translateY(-5px); }
    .tf-con-hero h2.tf-con-headline { font-size: 42px; }
    .tf-con-stage .tf-chip--pay, .tf-con-stage .tf-chip--edge { display: none; }
    .tf-con-stage .tf-chip--algo { top: -4%; right: 2%; }
    .tf-con-stage .tf-chip--rt   { bottom: -5%; right: 2%; }
    .tf-con-ctapanel { padding: 36px 32px; }
}

@media (max-width: 767px) {
    .tf-con-hero h2.tf-con-headline { font-size: 34px; }
    .tf-con-hero { padding-top: 50px; }
    .tf-con-codearea { font-size: 11.5px; line-height: 1.9; min-height: 190px; }
    .tf-con-stage .tf-chip--algo, .tf-con-stage .tf-chip--rt { display: none; }
    .tf-con-steps::before { left: 27px; }
    .tf-con-step { gap: 18px; }
    .tf-con-stepnum { width: 44px; height: 44px; font-size: 15px; }
    .tf-con-ctapanel { padding: 30px 24px; }
    .tf-con-ctapanel h3 { font-size: 24px; }
    .tf-con-highlight { padding: 34px 26px; }
    .tf-con-highlight h3 { font-size: 22px; }
    .tf-con-engage { padding: 30px 24px; }
}

@media (max-width: 499px) {
    .tf-con-schips { gap: 10px; }
    .tf-con-schip { padding: 11px 16px; font-size: 13px; }
    .tf-con-codearea { min-height: 210px; }
}

/* —— 11. Consultancy module reduced motion —— */
@media (prefers-reduced-motion: reduce) {
    .tf-con-editor, .tf-con-editor:hover { transform: none; animation: none; }
    .tf-con-tab:first-child { color: #fff; border-bottom-color: var(--tf-magenta); animation: none; }
    .tf-con-tab:last-child  { animation: none; }
    .tf-con-panel { display: block; visibility: visible !important; animation: none !important; }
    .tf-con-panel.is-b { display: none; }
    .tf-con-panel .tf-con-typing { animation: none !important; width: auto !important; }
    .tf-con-caret { animation: none; }
}


/* ==========================================================================

   CARD COVER ART (.tf-cardart)
   --------------------------------------------------------------------------
   Branded SVG→WebP illustrations as cover images on service cards.
   Bleeds to card edges; card overflow:hidden clips the corners.

   ========================================================================== */

.service__block .tf-cardart {
    position: relative;
    margin: -44px -34px 0;
}

.service__block .tf-cardart img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Soft fade so the hexagon icon and text below settle naturally */
.service__block .tf-cardart::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 18, 48, 0) 45%, rgba(6, 14, 38, 0.62));
    pointer-events: none;
}

/* First element after the art gets breathing room (icon on template
   cards, scope tag on consultancy cards) */
.service__block .tf-cardart + .service__icon,
.service__block .tf-cardart + .tf-con-tag {
    margin-top: 26px;
}

@media (max-width: 767px) {
    .service__block .tf-cardart { margin: -34px -22px 0; }
    .service__block .tf-cardart img { height: 140px; }
    .service__block .tf-cardart + .service__icon,
    .service__block .tf-cardart + .tf-con-tag { margin-top: 18px; }
}


/* ==========================================================================

   HERO MODULES v2 — CONNECTED-DEVICES COMPOSITION (index.html)
   --------------------------------------------------------------------------
   The payment card shrinks and shares the stage with two new glass
   modules — ANTENNA COMMUNICATION (RF tower + radiating arcs) and
   EMBEDDED SYSTEM (MCU chip + traces + heartbeat LED) — joined to the
   card by animated dotted signal links: data flowing through TantraFino.

   ========================================================================== */

/* Smaller payment card, recentered to make room for the modules */
.tf-hero-visual .tf-paycard {
    width: min(340px, 82%);
    padding: 22px 24px;
    border-radius: 20px;
    transform: rotateX(7deg) rotateY(-9deg) rotateZ(1deg) translateX(-4%);
}

.tf-hero-visual .tf-paycard:hover {
    transform: rotateX(2deg) rotateY(-3deg) rotateZ(0deg) translateY(-6px) translateX(-4%);
}

.tf-hero-visual .tf-paycard-number { font-size: clamp(16px, 1.8vw, 19px); }
.tf-hero-visual .tf-paycard-chip { width: 44px; height: 32px; }

/* —— Shared module chrome —— */
.tf-module {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 13px;
    border-radius: 16px;
    background: rgba(6, 14, 38, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--tf-shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(var(--tf-glass-blur));
    -webkit-backdrop-filter: blur(var(--tf-glass-blur));
    animation: tf-chip-float 7s ease-in-out infinite;
}

.tf-module .tf-module-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.tf-module .tf-module-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.tf-module .tf-module-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7EE7B7;
}

.tf-module .tf-module-live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0FBF87;
    box-shadow: 0 0 8px rgba(15, 191, 135, 0.8);
    animation: tf-pulse-dot 2s ease-in-out infinite;
}

/* —— Antenna communication module —— */
.tf-module--antenna { top: 2%; right: -2%; width: 188px; animation-delay: 0.8s; }

.tf-antenna-waves circle,
.tf-antenna-waves path {
    transform-origin: 96px 74px;
    transform-box: fill-box;
    animation: tf-rf-ping 2.6s ease-out infinite;
}

.tf-antenna-waves .w2 { animation-delay: 0.65s; }
.tf-antenna-waves .w3 { animation-delay: 1.3s; }

@keyframes tf-rf-ping {
    0%   { opacity: 0;    transform: scale(0.55); }
    18%  { opacity: 0.9; }
    100% { opacity: 0;    transform: scale(1.28); }
}

.tf-antenna-bars rect { fill: #7EE7B7; opacity: 0.85; }

/* —— Embedded system module —— */
.tf-module--embed { bottom: 4%; left: -3%; width: 172px; animation-delay: 1.6s; }

.tf-embed-led {
    animation: tf-heartbeat 1.6s ease-in-out infinite;
}

@keyframes tf-heartbeat {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

.tf-embed-trace {
    stroke-dasharray: 4 5;
    animation: tf-trace-flow 1.8s linear infinite;
}

@keyframes tf-trace-flow {
    to { stroke-dashoffset: -18; }
}

/* —— Signal links: dotted arcs joining modules to the card —— */
.tf-signal-link {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.tf-signal-link path {
    fill: none;
    stroke: rgba(255, 14, 117, 0.55);
    stroke-width: 1.6;
    stroke-dasharray: 3 7;
    animation: tf-trace-flow 2.4s linear infinite;
}

.tf-signal-link .tf-pkt {
    fill: #FF0E75;
}

/* Notification toast relocates top-left */
.tf-hero-visual .tf-notify { top: -6%; right: auto; left: -4%; }

/* Remaining single floating chip — PCI Security, upper-left lane:
   below the toast (top -6%), above the card (starts ~26%) — no overlap */
.tf-hero-visual .tf-chip--lock { top: 13%; left: -12%; }

/* Animated PCI shield: check draws in on loop + soft ping ring */
.tf-pci-icon { position: relative; }

.tf-pci-icon::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 14, 117, 0.55);
    animation: tf-pci-ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
    pointer-events: none;
}

@keyframes tf-pci-ping {
    0%   { transform: scale(0.6); opacity: 0.9; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

.tf-pci-check {
    stroke: #7EE7B7;
    stroke-dasharray: 14;
    stroke-dashoffset: 14;
    animation: tf-pci-draw 2.6s ease-in-out infinite;
}

@keyframes tf-pci-draw {
    0%, 15%  { stroke-dashoffset: 14; }
    45%, 80% { stroke-dashoffset: 0; }
    100%     { stroke-dashoffset: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tf-pci-icon::after { animation: none; opacity: 0; }
    .tf-pci-check { animation: none; stroke-dashoffset: 0; }
}


/* ==========================================================================

   RELATED PROJECTS STRIP (index.html, under services)
   ========================================================================== */

.tf-proj-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding-top: 52px;
    margin-bottom: 26px;
    border-top: 1px solid var(--tf-line);
}

.tf-proj-head h3 {
    font-family: var(--tf-font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.tf-proj-all {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #F6EC4F;
    transition: color 0.3s var(--tf-ease-out), transform 0.3s var(--tf-ease-out);
}

.tf-proj-all:hover { color: #fff; }

.tf-proj-card {
    display: block;
    background: var(--tf-glass-bg);
    border: 1px solid var(--tf-glass-border);
    border-radius: var(--tf-radius);
    backdrop-filter: blur(var(--tf-glass-blur));
    -webkit-backdrop-filter: blur(var(--tf-glass-blur));
    box-shadow: var(--tf-shadow-card);
    overflow: hidden;
    margin-bottom: 26px;
    transition: transform 0.5s var(--tf-ease-out), border-color 0.5s var(--tf-ease-out), box-shadow 0.5s var(--tf-ease-out);
}

.tf-proj-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 14, 117, 0.38);
    box-shadow: var(--tf-shadow-lift);
}

.tf-proj-art { position: relative; overflow: hidden; }

.tf-proj-art img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform 0.7s var(--tf-ease-out);
}

.tf-proj-card:hover .tf-proj-art img { transform: scale(1.07); }

.tf-proj-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 14, 38, 0) 45%, rgba(6, 14, 38, 0.55));
    pointer-events: none;
}

.tf-proj-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
}

.tf-proj-tag {
    flex: none;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #F6EC4F;
    background: rgba(246, 236, 79, 0.08);
    border: 1px solid rgba(246, 236, 79, 0.25);
    border-radius: 999px;
    padding: 5px 12px;
}

.tf-proj-body h4 {
    font-family: var(--tf-font-display);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: #fff;
    margin: 0;
    flex: 1;
    transition: color 0.3s var(--tf-ease-out);
}

.tf-proj-card:hover .tf-proj-body h4 { color: #F6EC4F; }

.tf-proj-go {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tf-grad-brand-soft);
    border: 1px solid rgba(255, 14, 117, 0.3);
    color: #FF7DB1;
    font-size: 12px;
    transition: transform 0.4s var(--tf-ease-out), background 0.4s var(--tf-ease-out), color 0.4s var(--tf-ease-out);
}

.tf-proj-card:hover .tf-proj-go {
    transform: rotate(-45deg);
    background: var(--tf-grad-brand);
    color: #fff;
}

@media (max-width: 767px) {
    .tf-proj-head { flex-direction: column; gap: 8px; }
    .tf-proj-body { flex-wrap: wrap; }
}

/* —— Responsive: modules reflow into a tidy stack under the card —— */
@media (max-width: 1231px) {
    .tf-module--antenna { right: 0; }
    .tf-module--embed { left: 0; }
    .tf-signal-link { display: none; }
}

@media (max-width: 991px) {
    .tf-hero-visual { display: flex; flex-direction: column; align-items: center; gap: 18px; }
    .tf-hero-visual .tf-hero-mesh,
    .tf-hero-visual .tf-hero-grid { position: absolute; }
    .tf-hero-visual .tf-paycard { transform: none; width: min(330px, 92%); }
    .tf-hero-visual .tf-paycard:hover { transform: translateY(-6px); }
    .tf-module { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: min(330px, 92%); animation: none; }
    .tf-hero-visual .tf-notify { position: relative; top: auto; left: auto; animation: none; }
    .tf-hero-visual .tf-chip--lock { display: none; }
}

@media (max-width: 499px) {
    .tf-module { padding: 12px 14px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .tf-module { animation: none; }
    .tf-antenna-waves circle, .tf-antenna-waves path { animation: none; opacity: 0.6; }
    .tf-embed-led { animation: none; }
    .tf-signal-link path, .tf-embed-trace { animation: none; }
}