/* =========================================================
   OutTroll  -  Premium Digital Marketing Theme
   Mobile-first, modern, modular CSS.
   --------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=Manrope:wght@300..800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ---------- 1. Design tokens ---------- */
:root {
    /* Brand palette */
    --c-primary:        #eb3f43;
    --c-primary-dark:   #c8323a;
    --c-primary-light:  #ff6b6f;
    --c-primary-soft:   #ffc7cc;
    --c-primary-50:     #fff1f2;

    /* Neutrals */
    --c-ink:            #1a1a2e;
    --c-ink-soft:       #4a4a5e;
    --c-muted:          #8a8a9c;
    --c-line:           #e9e7ef;
    --c-bg:             #ffffff;
    --c-bg-soft:        #faf9fc;
    --c-bg-tint:        #f4f2fa;

    /* Accents (per-card flavors) */
    --c-coral:    #ff6b6f;
    --c-amber:    #f6a93e;
    --c-violet:   #7c5cff;
    --c-sky:      #2bb8ff;
    --c-rose:     #f25e9c;
    --c-mint:     #28c8a6;
    --c-indigo:   #4956e6;

    /* Typography */
    --font-display: 'Manrope', 'Baloo 2', system-ui, sans-serif;
    --font-body:    'Manrope', 'Baloo 2', system-ui, sans-serif;
    --font-mono:    'Space Grotesk', ui-monospace, monospace;

    /* Spacing */
    --radius-sm: 10px;
    --radius:    16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    /* Shadows */
    --shadow-sm:  0 4px 12px rgba(26, 26, 46, 0.06);
    --shadow:     0 12px 30px rgba(26, 26, 46, 0.08);
    --shadow-lg:  0 24px 60px rgba(26, 26, 46, 0.12);
    --shadow-glow:0 18px 40px rgba(235, 63, 67, 0.25);

    /* Motion */
    --ease:    cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:cubic-bezier(0.16, 1, 0.3, 1);

    /* Layout */
    --shell-max: 1200px;
    --shell-pad: 20px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    color: var(--c-ink);
    background: var(--c-bg);
    line-height: 1.55;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; vertical-align: middle; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol, li { list-style: none; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    color: var(--c-ink);
    line-height: 1.15;
    letter-spacing: -0.015em;
    font-weight: 700;
}

::selection { background: var(--c-primary); color: #fff; }

/* ---------- 3. Utility ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--c-primary-50);
    color: var(--c-primary);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.gradient-text {
    background: linear-gradient(120deg, var(--c-primary) 0%, #f6a93e 60%, var(--c-primary) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientShift 6s ease-in-out infinite;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    border-radius: 999px;
    transition: all 280ms var(--ease-out);
    position: relative;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.btn-sm  { padding: 10px 18px; font-size: 13px; }
.btn-lg  { padding: 16px 28px; font-size: 16px; }

.btn-primary {
    background: linear-gradient(135deg, var(--c-primary) 0%, #ff7a5e 100%);
    color: #fff;
    box-shadow: var(--shadow-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px rgba(235, 63, 67, 0.38); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
    background: rgba(255,255,255,0.05);
    color: var(--c-ink);
    border: 1.5px solid var(--c-line);
}
.btn-ghost:hover { background: var(--c-ink); color: #fff; border-color: var(--c-ink); transform: translateY(-2px); }

/* CTA pulse */
.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(235,63,67,0.55);
    animation: ctaPulse 2.6s ease-out infinite;
    pointer-events: none;
}
@keyframes ctaPulse {
    0%   { box-shadow: 0 0 0 0   rgba(235,63,67,0.45); }
    70%  { box-shadow: 0 0 0 18px rgba(235,63,67,0); }
    100% { box-shadow: 0 0 0 0   rgba(235,63,67,0); }
}

/* Reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Section shells */
.section-shell, .hero-shell, .contact-shell, .stats-shell {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 0 var(--shell-pad);
    width: 100%;
}
.section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.section-title {
    font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3rem);
    margin: 16px 0 14px;
    letter-spacing: -0.02em;
}
.section-sub { font-size: 1.05rem; color: var(--c-ink-soft); }

/* ---------- 4. Header / Nav ---------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background: rgba(255,255,255,0.0);
    backdrop-filter: blur(0);
    transition: background 320ms var(--ease), backdrop-filter 320ms var(--ease), box-shadow 320ms var(--ease);
}
.site-header.is-scrolled,
.site-header.is-drawer-open {
    background: rgba(255,255,255,0.85);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    box-shadow: 0 1px 0 rgba(26,26,46,0.06), 0 12px 32px rgba(26,26,46,0.06);
}
.site-header.is-scrolled .nav-link,
.site-header.is-drawer-open .nav-link { color: var(--c-ink); }
.site-header.is-scrolled .hamburger,
.site-header.is-drawer-open .hamburger { background: var(--c-bg-tint); border-color: var(--c-line); }
.site-header.is-scrolled .hamburger span,
.site-header.is-drawer-open .hamburger span { background: var(--c-ink); }

.nav-shell {
    max-width: 1320px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* Reserve breathing room in the middle so the inbound logo never collides with menu items */
    --nav-center-gap: 180px;
}

.primary-nav { display: none; }
.nav-list { display: flex; align-items: center; gap: 6px; }
.nav-item { position: relative; }
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    color: #fff;
    font-weight: 500;
    font-size: 14.5px;
    letter-spacing: 0.01em;
    border-radius: 999px;
    transition: color 200ms var(--ease), background 200ms var(--ease);
}
.nav-link:hover { color: var(--c-primary); background: rgba(235,63,67,0.08); }
.nav-caret { font-size: 10px; transition: transform 240ms var(--ease); }
.has-dropdown:hover .nav-caret,
.has-dropdown.is-open .nav-caret { transform: rotate(180deg); }

/* Dropdown */
.dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 320px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 260ms;
    border: 1px solid var(--c-line);
}
.dropdown-panel::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-bottom-color: #fff;
}
.has-dropdown:hover .dropdown-panel,
.has-dropdown:focus-within .dropdown-panel,
.has-dropdown.is-open .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.dropdown-panel a {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--c-ink);
    transition: background 200ms var(--ease);
    font-size: 14px;
}
.dropdown-panel a:hover { background: var(--c-bg-tint); }
.dropdown-panel a i {
    color: var(--c-primary);
    font-size: 16px;
    margin-top: 3px;
    width: 22px;
    text-align: center;
}
.dropdown-panel a strong { display: block; font-weight: 600; color: var(--c-ink); }
.dropdown-panel a small { color: var(--c-muted); font-size: 12px; }

.dropdown-simple { min-width: 200px; padding: 8px; }
.dropdown-simple a { display: block; }

/* CTA + Hamburger */
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-cta .btn { display: none; }
.site-header.is-scrolled .nav-cta .btn { display: inline-flex; }

.hamburger {
    width: 44px;
    height: 44px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 12px;
    background: rgba(255,255,255,0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18);
    transition: background 240ms var(--ease), border-color 240ms var(--ease);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.hamburger span {
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 240ms var(--ease), opacity 240ms var(--ease), background 240ms var(--ease);
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
    position: fixed;
    top: var(--header-h, 64px);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h, 64px));
    height: calc(100dvh - var(--header-h, 64px));
    background: #fff;
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform 380ms var(--ease-out), visibility 380ms;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 18px 40px;
    box-shadow: 0 24px 40px rgba(26,26,46,0.1);
    z-index: 90;
}
.mobile-nav.is-open { transform: translateY(0); visibility: visible; }
.mobile-nav-list { display: flex; flex-direction: column; gap: 6px; }
.mobile-nav-list > li { display: flex; flex-direction: column; }
.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 18px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--c-ink);
    border-radius: 12px;
    text-align: left;
    background: var(--c-bg-soft);
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    text-decoration: none;
}
.mobile-nav-link:hover,
.mobile-nav-link:focus-visible { background: var(--c-bg-tint); outline: none; }
.mobile-nav-link i { transition: transform 280ms var(--ease); color: var(--c-primary); font-size: 13px; }
.mobile-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 360ms var(--ease), margin 360ms var(--ease);
    display: flex;
    flex-direction: column;
}
.mobile-submenu.is-open {
    max-height: 480px;
    margin-top: 4px;
}
.mobile-submenu a {
    display: block;
    padding: 12px 18px 12px 36px;
    color: var(--c-ink-soft);
    font-size: 15px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 200ms var(--ease), color 200ms var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.mobile-submenu a:hover,
.mobile-submenu a:focus-visible { color: var(--c-primary); background: var(--c-primary-50); outline: none; }

.mobile-cta {
    background: linear-gradient(135deg, var(--c-primary) 0%, #ff7a5e 100%) !important;
    color: #fff !important;
    margin-top: 12px;
    box-shadow: var(--shadow-glow);
    justify-content: center;
}

/* Body scroll lock when mobile drawer is open */
body.has-drawer-open { overflow: hidden; }

/* ---------- 5. Brand Banner (logo center, animated) ---------- */
.brand-banner {
    position: relative;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    /* Solid brand red — single, confident foundation */
    background: #eb3f43;
    color: #fff;
    isolation: isolate;
}
/* Subtle top/bottom edge shading for premium depth without disturbing the solid color */
.brand-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,0.08), transparent 55%),
        radial-gradient(110% 70% at 50% 100%, rgba(0,0,0,0.16), transparent 60%);
}
.banner-bg { position: absolute; inset: 0; z-index: 0; }
.bg-gradient {
    position: absolute;
    inset: -10%;
    /* Slow-breathing soft highlights — preserve the live "feel" without changing hue */
    background:
        radial-gradient(50% 45% at 30% 35%, rgba(255,255,255,0.10) 0%, transparent 60%),
        radial-gradient(45% 40% at 75% 70%, rgba(255,255,255,0.07) 0%, transparent 60%);
    animation: gradientPan 22s ease-in-out infinite alternate;
    filter: none;
    opacity: 0.9;
}
@keyframes gradientPan {
    0%   { transform: scale(1) rotate(0deg); }
    50%  { transform: scale(1.06) rotate(1.5deg); }
    100% { transform: scale(1.03) rotate(-1deg); }
}

.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.35;
    mix-blend-mode: soft-light;
    animation: orbFloat 14s ease-in-out infinite alternate;
}
.orb-1 { width: 520px; height: 520px; background: #ffffff;     top: -120px;   left: -140px; }
.orb-2 { width: 420px; height: 420px; background: #ffd1d3;     bottom: -100px; right: -90px; animation-delay: -5s; }
.orb-3 { width: 300px; height: 300px; background: #ffffff;     top: 28%;      right: 24%;    animation-delay: -9s; opacity: 0.22; }

@keyframes orbFloat {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(34px,-26px) scale(1.08); }
    100% { transform: translate(-28px, 34px) scale(0.96); }
}

#particleCanvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; mix-blend-mode: screen; }

.bg-grid {
    position: absolute;
    inset: 0;
    /* Brighter lines so the grid reads cleanly over solid red */
    background-image:
        linear-gradient(rgba(255,255,255,0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px);
    background-size: 72px 72px;
    /* Softer feather so the pattern fades into the edges premium-style */
    mask-image: radial-gradient(ellipse 75% 65% at 50% 55%, #000 25%, transparent 88%);
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 55%, #000 25%, transparent 88%);
    opacity: 0.75;
}

/* Kinetic marquee — confident contrast against the solid red */
.kinetic-marquee {
    position: absolute;
    bottom: 7%;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: 2;
    transform: rotate(-2.5deg);
    pointer-events: none;
    /* Soft horizontal fade so the marquee feels endless, not chopped */
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.kinetic-track {
    display: inline-flex;
    align-items: center;
    gap: 44px;
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.2rem, 7.5vw, 6rem);
    letter-spacing: -0.035em;
    text-transform: uppercase;
    /* Outlined wordmark — premium magazine-style display type */
    color: rgba(255,255,255,0.04);
    -webkit-text-stroke: 1.5px rgba(255,255,255,0.55);
    text-shadow: 0 2px 30px rgba(0,0,0,0.10);
    animation: kineticScroll 36s linear infinite;
}
.kinetic-track .dot {
    color: #ffffff;
    -webkit-text-stroke: 0;
    opacity: 0.85;
    font-size: 0.55em;
    transform: translateY(-0.08em);
}
@keyframes kineticScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Center logo stage  -  the .logo is fixed-positioned and animated by JS,
   so this stage is just a marker zone in the banner layout. */
.logo-stage {
    position: relative;
    z-index: 4;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}

/* The signature logo - flies from banner center into the navbar on scroll.
   IMPORTANT: must live OUTSIDE .brand-banner in the HTML, otherwise
   .brand-banner's `isolation: isolate` would trap its z-index below the
   header's stacking context and the docked logo would hide behind the navbar. */
.logo {
    position: fixed;
    top: 50%;
    left: 50%;
    /* Significantly larger — the wordmark is the focal point of the banner */
    width: clamp(280px, 48vw, 560px);
    transform: translate3d(-50%, -50%, 0) scale(1);
    transform-origin: center center;
    z-index: 120;        /* above the header (z-index 100) so the docked logo is never clipped */
    cursor: pointer;
    will-change: transform, opacity;
    transition: opacity 280ms var(--ease);
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    /* Slightly tighter line-height so the SVG doesn't pick up extra anchor whitespace */
    line-height: 0;
}
.logo img {
    width: 200%;
    display: block;
    /* White (over red banner). Same function list as docked state for smooth interpolation.
       Layered shadows lift the mark off the solid background with subtle depth. */
    filter:
        brightness(0) invert(1)
        drop-shadow(0 10px 30px rgba(0,0,0,0.28))
        drop-shadow(0 2px 6px rgba(0,0,0,0.18));
    transition: filter 480ms var(--ease);
    backface-visibility: hidden;
}
/* Docked into the glassmorphic navbar - dark fill, lighter shadow. */
.logo.is-docked img {
    filter: brightness(1) invert(0) drop-shadow(0 2px 6px rgba(26,26,46,0.12));
}

/* Hide the fixed logo when the mobile drawer is open, so menu items aren't covered */
body.has-drawer-open .logo,
body.has-drawer-open .logo-tagline {
    opacity: 0;
    pointer-events: none;
}

/* Tagline: also fixed so it stays anchored to the logo regardless of viewport
   size or banner height. JS fades it out as the user scrolls. The entrance
   animation only animates opacity so the carefully-clamped translate offset
   (which positions the tagline directly below the logo) is never overwritten. */
.logo-tagline {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    /* Pushed further down to balance the now-larger wordmark above it */
    transform: translate3d(-50%, calc(-50% + clamp(92px, 15vw, 180px)), 0);
    font-family: var(--font-display);
    font-size: clamp(11px, 2.4vw, 14px);
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    white-space: nowrap;
    text-align: center;
    z-index: 119;            /* just under the logo, still above the banner */
    pointer-events: none;
    opacity: 0;
    /* Use a transition (not @keyframes animation) for the entrance — animations
       outrank inline styles, which prevented JS from fading the tagline out on scroll. */
    transition: opacity 900ms var(--ease-out);
    will-change: opacity;
    text-shadow: 0 2px 12px rgba(0,0,0,0.22);
}
/* A delicate hairline frames the tagline — cleaner, more editorial typography */
.logo-tagline::before,
.logo-tagline::after {
    content: "";
    display: inline-block;
    width: clamp(22px, 4vw, 44px);
    height: 1px;
    background: rgba(255,255,255,0.55);
    vertical-align: middle;
    margin: 0 14px;
    transform: translateY(-1px);
}
.logo-tagline.is-ready { opacity: 1; }
@media (min-width: 768px) {
    .logo-tagline {
        transform: translate3d(-50%, calc(-50% + clamp(110px, 13vw, 200px)), 0);
        letter-spacing: 0.46em;
    }
}
@media (min-width: 1200px) {
    .logo-tagline {
        transform: translate3d(-50%, calc(-50% + 188px), 0);
    }
}

.scroll-cue {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 48px;
    border-radius: 16px;
    border: 1.5px solid rgba(255,255,255,0.7);
    display: flex;
    justify-content: center;
    padding-top: 8px;
    z-index: 3;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    animation: fadeInUp 1.2s var(--ease-out) 1s both;
}
.scroll-cue span {
    width: 4px;
    height: 8px;
    border-radius: 4px;
    background: #fff;
    animation: scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue {
    0%   { transform: translateY(0); opacity: 1; }
    70%  { transform: translateY(14px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}

/* ---------- 6. Hero ---------- */
.hero-section {
    position: relative;
    padding: 120px 0 80px;
    background:
        radial-gradient(60% 40% at 100% 0%, rgba(235,63,67,0.05) 0%, transparent 60%),
        radial-gradient(50% 40% at 0% 100%, rgba(124,92,255,0.04) 0%, transparent 60%),
        var(--c-bg);
}
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
}
.hero-title {
    font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem);
    line-height: 1.05;
    margin: 22px 0 20px;
    letter-spacing: -0.025em;
}
.hero-sub {
    font-size: 1.1rem;
    color: var(--c-ink-soft);
    max-width: 560px;
    margin-bottom: 32px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    font-size: 13.5px;
    color: var(--c-ink-soft);
    font-weight: 500;
}
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust i { color: var(--c-primary); }

.hero-visual { position: relative; }
.hero-stage {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 520px;
    margin: 0 auto;
}

/* ----- Brand Pulse: a meaningful, layered hero visual -----
   Concept: the brand sits at the luminous center, broadcasts pulses outward
   (reach), and channels orbit around it (touchpoints). Built with pure CSS. */
.hero-orb {
    position: absolute;
    inset: 6% 6% 6% 6%;
    pointer-events: none;
    animation: heroOrbFloat 7s ease-in-out infinite alternate;
    will-change: transform;
    /* Establish a 3D scene right here so the core's rotateX/rotateY tilt reads
       as real depth (perspective on .hero-stage would be flattened by the
       float animation's 2D transform on this element). */
    perspective: 1100px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
}

/* ---- Broadcast pulses (radar-style expanding rings) ---- */
.orb-pulse {
    position: absolute;
    inset: 24%;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 199, 204, 0.55);
    transform: scale(0.6);
    opacity: 0;
    animation: orbPulse 4.8s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) infinite;
    animation-delay: var(--orb-d, 0s);
}
@keyframes orbPulse {
    0%   { transform: scale(0.55); opacity: 0; border-color: rgba(255,199,204,0.95); }
    15%  { opacity: 0.9; }
    100% { transform: scale(1.55); opacity: 0; border-color: rgba(255,199,204,0); }
}

/* ---- Decorative concentric rings (planetary bands) ---- */
.orb-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(255, 199, 204, 0.35);
    pointer-events: none;
    animation: orbRingSpin 60s linear infinite;
}
.orb-ring-outer { inset: 8%; }
.orb-ring-inner { inset: 22%; border-style: dotted; border-color: rgba(255, 199, 204, 0.22); animation-direction: reverse; animation-duration: 90s; }
@keyframes orbRingSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ---- Orbital paths with satellite nodes (channels orbiting the brand) ----
   Each .orb-orbit is a circle whose rotation carries the .orb-satellite around. */
.orb-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: orbRingSpin var(--orb-spin, 18s) linear infinite;
}
.orb-orbit-1 { inset: 4%;  --orb-spin: 16s; }
.orb-orbit-2 { inset: 18%; --orb-spin: 22s; animation-direction: reverse; }
.orb-orbit-3 { inset: 30%; --orb-spin: 11s; }

.orb-satellite {
    position: absolute;
    top: 0;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 14px 3px rgba(255, 255, 255, 0.85),
        0 0 32px 6px rgba(255, 122, 94, 0.55);
}
.orb-satellite-amber {
    width: 11px;
    height: 11px;
    background: var(--c-amber);
    box-shadow:
        0 0 12px 3px rgba(246, 169, 62, 0.85),
        0 0 28px 6px rgba(246, 169, 62, 0.45);
}
.orb-satellite-soft {
    width: 9px;
    height: 9px;
    background: var(--c-primary-soft);
    box-shadow:
        0 0 10px 3px rgba(255, 199, 204, 0.85),
        0 0 22px 6px rgba(235, 63, 67, 0.45);
}

/* ---- The luminous core: brand at the center ----
   Houses the OutTroll mark. Two CSS vars drive its interactivity:
     --tilt-x / --tilt-y : rotation toward cursor (set by JS)
     --cx / --cy         : position (in %) of a cursor-following specular highlight
   Default values give a natural top-front lit sphere even before the user moves. */
.orb-core {
    position: absolute;
    inset: 28%;
    border-radius: 50%;
    background:
        /* Cursor-following highlight (specular) — defaults to top center for a static-gloss look */
        radial-gradient(circle at calc(var(--cx, 50) * 1%) calc(var(--cy, 22) * 1%), rgba(255,255,255,0.55), transparent 32%),
        /* Base sphere gradient */
        radial-gradient(circle at 30% 28%, #ffb09e 0%, #ff7a5e 28%, var(--c-primary) 60%, var(--c-primary-dark) 100%);
    box-shadow:
        0 40px 90px rgba(235, 63, 67, 0.35),
        0 0 60px rgba(255, 122, 94, 0.4),
        inset 0 -18px 40px rgba(0, 0, 0, 0.22),
        inset 0 18px 30px rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transform-style: preserve-3d;
    transition: transform 360ms var(--ease-out), box-shadow 320ms var(--ease);
    /* Box-shadow-only pulse so it doesn't fight the JS-driven rotate transform */
    animation: orbCorePulse 3.6s ease-in-out infinite;
    cursor: pointer;
}
.orb-core-shine {
    position: absolute;
    inset: 8% 12% auto 12%;
    height: 38%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.42), transparent 65%);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}
.orb-core-glyph {
    position: relative;
    z-index: 2;
    width: 62%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(28px); /* lifts the mark forward in 3D for a parallax-pop */
}
.orb-core-logo {
    width: 100%;
    height: auto;
    /* Force the dark mark to crisp white over the red sphere, with two stacked
       drop-shadows for depth + a soft inner glow */
    filter:
        brightness(0) invert(1)
        drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35))
        drop-shadow(0 0 12px rgba(255, 200, 180, 0.4));
    transition: filter 360ms var(--ease), transform 480ms var(--ease-out);
    animation: orbLogoBreath 4.2s ease-in-out infinite;
    will-change: filter, transform;
    -webkit-user-drag: none;
    user-select: none;
}

/* Hover state: brighten the logo, intensify the orb's outer glow */
.hero-stage:hover .orb-core-logo {
    filter:
        brightness(0) invert(1)
        drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4))
        drop-shadow(0 0 26px rgba(255, 255, 255, 0.7));
}
.hero-stage:hover .orb-core {
    box-shadow:
        0 50px 110px rgba(235, 63, 67, 0.5),
        0 0 100px rgba(255, 122, 94, 0.55),
        inset 0 -18px 40px rgba(0, 0, 0, 0.22),
        inset 0 18px 30px rgba(255, 255, 255, 0.2);
}

@keyframes orbCorePulse {
    0%, 100% { box-shadow:
        0 40px 90px rgba(235, 63, 67, 0.35),
        0 0 60px rgba(255, 122, 94, 0.40),
        inset 0 -18px 40px rgba(0, 0, 0, 0.22),
        inset 0 18px 30px rgba(255, 255, 255, 0.15); }
    50%      { box-shadow:
        0 50px 110px rgba(235, 63, 67, 0.48),
        0 0 80px rgba(255, 122, 94, 0.55),
        inset 0 -18px 40px rgba(0, 0, 0, 0.22),
        inset 0 18px 30px rgba(255, 255, 255, 0.18); }
}
@keyframes orbLogoBreath {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

@keyframes heroOrbFloat {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(-18px) scale(1.03); }
}

/* Reduce visual noise on small screens for a cleaner mobile hero */
@media (max-width: 600px) {
    .orb-ring-inner,
    .orb-orbit-3 { display: none; }
}

/* Floating cards (kept class names for back-compat with aboutus) */
.floating-card {
    position: absolute;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,1);
    border-radius: 16px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-ink);
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 18px 40px rgba(26,26,46,0.12);
    animation: float 4s ease-in-out infinite;
}
.floating-card div { display: flex; flex-direction: column; line-height: 1.2; }
.floating-card strong { font-size: 15px; font-weight: 700; color: var(--c-ink); }
.floating-card span { font-size: 12px; color: var(--c-muted); }
.floating-card i { font-size: 18px; color: var(--c-primary); }
.floating-card-1 { top: 8%;  left: -4%;   animation-delay: 0s; }
.floating-card-2 { top: 14%; right: -2%;  animation-delay: 1s; }
.floating-card-3 { bottom: 18%; left: -6%;  animation-delay: 2s; }
.floating-card-4 { bottom: 6%;  right: 0%;   animation-delay: 1.5s; }

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

/* ---------- 7. Stats strip ---------- */
.stats-strip {
    padding: 48px 0;
    background: linear-gradient(135deg, var(--c-ink) 0%, #2a1f3d 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.stats-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 60% at 50% 100%, rgba(235,63,67,0.18) 0%, transparent 70%);
    pointer-events: none;
}
.stats-shell {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    position: relative;
}
.stat-card { text-align: center; padding: 18px 8px; }
.stat-number {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 1rem + 3vw, 3rem);
    font-weight: 700;
    background: linear-gradient(120deg, #ffffff 0%, var(--c-primary-soft) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
}
.stat-label {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}

/* ---------- 8. Services ---------- */
.services-section {
    padding: 100px 0;
    background:
        radial-gradient(50% 60% at 100% 0%, rgba(235,63,67,0.05) 0%, transparent 60%),
        var(--c-bg);
}
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
.service-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    overflow: hidden;
    transition: transform 360ms var(--ease-out), box-shadow 360ms var(--ease-out), border-color 360ms var(--ease-out);
    isolation: isolate;
}
.service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent, var(--c-primary)) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 360ms var(--ease);
    z-index: -1;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.service-card:hover::before { opacity: 0.07; }

.service-card[data-accent="coral"]  { --accent: var(--c-coral); }
.service-card[data-accent="amber"]  { --accent: var(--c-amber); }
.service-card[data-accent="violet"] { --accent: var(--c-violet); }
.service-card[data-accent="sky"]    { --accent: var(--c-sky); }
.service-card[data-accent="rose"]   { --accent: var(--c-rose); }
.service-card[data-accent="mint"]   { --accent: var(--c-mint); }
.service-card[data-accent="indigo"] { --accent: var(--c-indigo); }

.service-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent, var(--c-primary)) 12%, white);
    color: var(--accent, var(--c-primary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 22px;
    transition: transform 360ms var(--ease-out), background 360ms var(--ease);
}
.service-card:hover .service-icon {
    transform: rotate(-6deg) scale(1.08);
    background: var(--accent, var(--c-primary));
    color: #fff;
}
.service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.service-card p {
    color: var(--c-ink-soft);
    font-size: 15px;
    margin-bottom: 18px;
}
.service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent, var(--c-primary));
    font-weight: 600;
    font-size: 14px;
}
.service-link i { transition: transform 240ms var(--ease); }
.service-card:hover .service-link i { transform: translateX(4px); }

/* ---------- 9. Approach (find-customers / find-shop) ---------- */
.approach-section { padding: 80px 0; }
.shop-app { padding: 20px; }
.shop-app .sec-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 0;
    text-align: center;
}
.shop-app .sec-text h2,
.eyebrow-line {
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-primary);
    margin-bottom: 10px;
}
.shop-app .sec-text h1 {
    font-weight: 700;
    text-shadow: none;
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--c-ink);
}
.rich {
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem);
    font-weight: 700;
    text-shadow: none;
    letter-spacing: -0.02em;
}
.shop-app .sec-text .start-body {
    font-size: 16px;
    font-weight: 400;
    padding-top: 14px;
    color: var(--c-ink-soft);
    line-height: 1.7;
}
.approach-cta, .shop-app .sec-text a {
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border: 1.5px solid var(--c-ink);
    color: var(--c-ink);
    width: 100%;
    border-radius: 999px;
    text-align: center;
    font-weight: 600;
    transition: all 240ms var(--ease);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
}
.approach-cta:hover, .shop-app .sec-text a:hover {
    background: var(--c-ink);
    color: #fff;
    transform: translateY(-2px);
}
.approach-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transform: perspective(1200px) rotateY(-2deg) rotateX(2deg);
    transition: transform 600ms var(--ease-out);
}
.approach-image:hover { transform: perspective(1200px) rotateY(0) rotateX(0); }
.approach-image img { width: 100%; display: block; }

/* ---------- 10. Trusted-by marquee (preserved) ---------- */
.client-section {
    position: relative;
    padding: 80px 0;
    background-color: var(--c-bg-tint);
    z-index: 3;
}
.client-section .outer-box {
    position: relative;
    border: 1px solid var(--c-line);
    background: #fff;
    padding: 28px 32px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-sm);
}
.client-section .outer-box .title-box {
    position: relative;
    max-width: 216px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-right: 40px;
    margin-right: 25px;
}
.client-section .outer-box .title-box::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 1px;
    height: 100%;
    background: var(--c-line);
}
.client-section .outer-box .title-box .title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-ink);
    text-shadow: none;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.client-section .outer-box .title-box .icon {
    margin-left: 16px;
    color: var(--c-primary);
    font-size: 14px;
}
.client-section .outer-box .marquee-box { position: relative; width: 100%; overflow: hidden; }
.client-section .outer-box .marquee-box .marquee {
    display: flex;
    align-items: center;
    gap: 90px;
    animation: marquee 22s linear infinite;
}
.client-block { flex-shrink: 0; opacity: 0.65; transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
.client-block:hover { opacity: 1; transform: scale(1.05); }
.client-block img { max-height: 50px; object-fit: contain; }

@keyframes marquee {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

/* ---------- 11. CTA (preserved) ---------- */
.call-to-action.pull-down { margin-bottom: -150px; }
.call-to-action { position: relative; z-index: 3; }
.call-to-action .outer-box {
    position: relative;
    border-radius: 100px 100px 0 0;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.call-to-action .outer-box::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 661px;
    height: 100%;
    border-top-right-radius: 100px;
    background-image: url(../img/cta/cta1-2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.call-to-action .outer-box::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 100px 100px 0 0;
    background: linear-gradient(to right, var(--c-primary) 68% 33%, rgba(87, 30, 136, 0) 100%);
}
.call-to-action .outer-box .icon-32 {
    position: absolute;
    top: -60px;
    left: 100px;
    z-index: 1;
    animation: fa-spin 10s infinite linear;
}
.icon-32 {
    width: 42px;
    height: 43px;
    background-image: url(../img/icon/star.svg);
    opacity: 0.7;
}
.icon-14 {
    width: 497px;
    height: 391px;
    background-image: url(../img/icon/icon-14.png);
    opacity: 0.2;
}
.call-to-action .outer-box .icon-14 { position: absolute; top: 0; left: 0; z-index: 1; }
@keyframes fa-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.call-to-action .outer-box .content-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 135px 0 102px;
    z-index: 3;
}
.call-to-action .outer-box .content-box .image-box .image {
    position: relative;
    margin-bottom: 0;
    margin-top: -78px;
}
figure { margin: 0; }
.call-to-action .outer-box .content-box .title-box {
    position: relative;
    margin-left: -100px;
    margin-top: 5px;
}
.call-to-action .outer-box .content-box .title-box .title {
    color: #fff;
    margin-bottom: 0;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
}
.call-to-action .outer-box .content-box .btn-box {
    display: flex;
    align-items: center;
    gap: 13px;
}
.btn-style-one.light-bg { color: var(--c-ink); background: #fff; }
.theme-btn {
    background: #fff;
    color: var(--c-ink);
    font-weight: 600;
    font-size: 15px;
    padding: 14.89px 26px;
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
    border-radius: 100px;
    text-transform: uppercase;
    transition: 0.4s;
    text-decoration: none;
}
.theme-btn:hover { background: var(--c-ink); color: #fff; }
.theme-btn-arrow-right {
    color: var(--c-ink);
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    transition: 0.4s;
    text-decoration: none;
}
.call-to-action .outer-box .content-box .btn-box .readmore {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-ink);
    background: #fff;
    transition: all 300ms ease;
    text-decoration: none;
}
.call-to-action .outer-box .content-box .btn-box .readmore::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scale(0);
    opacity: 0;
    border-radius: 50%;
    background: var(--c-primary);
    transition: all 300ms ease;
}
.call-to-action .outer-box .content-box .btn-box .readmore:hover::before { opacity: 1; transform: scale(1); }
.call-to-action .outer-box .content-box .btn-box .readmore:hover { color: #fff; }
.call-to-action .outer-box .content-box .btn-box .readmore i { position: relative; z-index: 3; }

/* ---------- 12. Contact ---------- */
.contact-section {
    padding: 100px 0;
    background:
        radial-gradient(50% 60% at 0% 100%, rgba(235,63,67,0.06) 0%, transparent 60%),
        var(--c-bg-soft);
}
.contact-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 32px;
    box-shadow: var(--shadow);
    border: 1px solid var(--c-line);
}
.contact-aside {
    background: linear-gradient(160deg, var(--c-ink) 0%, #2a1f3d 100%);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
}
.contact-aside::before {
    content: "";
    position: absolute;
    top: -40%; right: -20%;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(235,63,67,0.4) 0%, transparent 70%);
    filter: blur(20px);
}
.contact-info-block {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.contact-info-block:last-of-type { border-bottom: none; }
.ci-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(235,63,67,0.15);
    color: var(--c-primary-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.contact-info-block h4 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.contact-info-block p { color: rgba(255,255,255,0.78); font-size: 15px; }
.contact-perks {
    position: relative;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13.5px;
    color: rgba(255,255,255,0.85);
}
.contact-perks i { color: var(--c-primary-soft); margin-right: 8px; }

.contact-form { display: grid; grid-template-columns: 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; }
.field-wide { grid-column: 1 / -1; }
.field label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-ink);
    margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--c-ink);
    background: var(--c-bg-soft);
    border: 1.5px solid var(--c-line);
    border-radius: 12px;
    transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(235,63,67,0.10);
}
.field textarea { resize: vertical; min-height: 130px; }
.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1a2e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}
.field-error {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--c-primary);
    min-height: 16px;
    font-weight: 500;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
    border-color: var(--c-primary);
    background: var(--c-primary-50);
}
.field-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.form-status {
    font-size: 14px;
    font-weight: 500;
    color: var(--c-ink-soft);
}
.form-status.is-success { color: #1a8a4a; }
.form-status.is-error   { color: var(--c-primary); }

/* ---------- 13. Footer (preserved + tweaks) ---------- */
.footer-style-one { background: transparent; border-radius: 0; overflow: hidden; }
.main-footer { position: relative; }
.footer-style-one .outer-box {
    position: relative;
    padding-top: 140px;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    background-color: #f0d2d0;
}
.bg-pattern-7 { background-image: url(../img/icon/pattern-7.png); opacity: 0.3; }
.bg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.main-footer .widgets-section { position: relative; padding: 100px 0 50px; }
.auto-container {
    position: static;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
}
.main-footer .footer-column { position: relative; margin-bottom: 45px; width: 25%; }
.footer-style-one .about-widget { margin-right: -10px; }
.main-footer .footer-widget { position: relative; }
.footer-style-one .about-widget .text {
    font-weight: 500;
    line-height: 1.65;
    color: var(--c-ink);
    margin: 14px 0 22px;
    font-size: 16px;
}
.about-widget a { padding: 0; }
.social-icon-two { display: flex; gap: 10px; }
.social-icon-two li a {
    position: relative;
    height: 42px;
    width: 42px;
    border-radius: 50%;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--c-ink);
    transition: all 300ms ease;
    overflow: hidden;
}
.social-icon-two li a::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scale(0);
    border-radius: 50%;
    background: var(--c-primary);
    transition: transform 300ms ease;
}
.social-icon-two li a:hover::before { transform: scale(1); }
.social-icon-two li a:hover { color: #fff; }
.social-icon-two li a i { position: relative; z-index: 1; }

.footer-style-one .links-widget { padding-left: 60px; }
.main-footer .widget-title {
    color: var(--c-ink);
    margin-bottom: 18px;
    padding-bottom: 5px;
    font-size: 18px;
    font-weight: 700;
    position: relative;
}
.main-footer .widget-title::before {
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 28px;
    height: 2px;
    background: linear-gradient(to right, #f0848d 0%, #e34e43 100%);
    content: "";
    border-radius: 2px;
}
.user-links li { line-height: 32px; color: var(--c-ink-soft); font-weight: 500; }
.user-links li a {
    position: relative;
    color: inherit;
    transition: color 280ms var(--ease);
    padding: 0;
    font-size: 15px;
}
.user-links li a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 0;
    height: 1px;
    background: var(--c-primary);
    transition: width 280ms var(--ease);
}
.user-links li a:hover { color: var(--c-ink); }
.user-links li a:hover::before { width: 100%; }

.footer-style-one .newsletter-widget { margin-left: -20px; }
.newsletter-form .form-group { position: relative; }
.newsletter-form .form-group input[type=email],
.newsletter-form .form-group input[type=text] {
    display: block;
    height: 52px;
    width: 100%;
    font-size: 14px;
    color: var(--c-ink);
    padding: 16px 56px 16px 18px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 280ms var(--ease);
}
.newsletter-form .form-group input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 4px rgba(235,63,67,0.12);
}
.newsletter-form .form-group .form-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    transition: background 240ms var(--ease);
}
.newsletter-form .form-group .form-btn:hover { background: var(--c-primary-dark); }
.newsletter-form .form-group.checkbox { margin-top: 16px; }
.custom-checkbox {
    display: flex;
    align-items: center;
    color: var(--c-ink-soft);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.custom-checkbox input { display: none; }
.custom-checkbox .checkmark {
    position: relative;
    height: 16px;
    width: 16px;
    min-width: 16px;
    border-radius: 4px;
    border: 2px solid var(--c-muted);
    margin-right: 10px;
    transition: all 240ms var(--ease);
}
.custom-checkbox input:checked + .checkmark {
    background: var(--c-primary);
    border-color: var(--c-primary);
}
.custom-checkbox input:checked + .checkmark::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.footer-bottom { position: relative; z-index: 3; }
.footer-style-one .footer-bottom .inner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer-bottom .inner-container { position: relative; }
.footer-style-one .footer-bottom .inner-container::before {
    content: "";
    position: absolute;
    right: 146px;
    top: 0;
    width: 1000%;
    height: 100%;
    background: var(--c-primary);
}
.footer-bottom .copyright-text { font-size: 14.5px; font-weight: 500; color: #fff; }
.footer-style-one .footer-bottom .footer-nav { margin-left: auto; padding-right: 39px; }
.footer-bottom .footer-nav { display: flex; align-items: center; }
.footer-bottom .footer-nav li { font-size: 13.5px; font-weight: 500; color: #fff; margin-left: 30px; cursor: pointer; transition: opacity 240ms var(--ease); }
.footer-bottom .footer-nav li:hover { opacity: 0.8; }
.scroll-to-top {
    position: relative;
    width: 146px;
    height: 70px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background-color: #ed8a33;
    z-index: 100;
    border-bottom-right-radius: 20px;
    transition: all 300ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    gap: 6px;
}
.scroll-to-top:hover { background: var(--c-primary); }

/* ---------- 14. Backwards-compat (rules used by aboutus.html / others) ---------- */

/* legacy nav fallback (about page topnav) */
.topnav {
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border-bottom: 1px solid #f6f6f6;
    position: sticky;
    top: 0; left: 0;
    z-index: 1000;
    display: block;
}
.topnav a {
    float: left;
    display: block;
    color: var(--c-ink);
    text-align: center;
    padding: 10px 16px;
    text-decoration: none;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 500;
}
.topnav a i { vertical-align: middle; }
.topnav .icon { display: none; }
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) { display: none; }
    .topnav a.icon { float: right; display: block; }
    .topnav.responsive { position: relative; }
    .topnav.responsive .icon { position: absolute; right: 0; top: 0; }
    .topnav.responsive a { float: none; display: block; text-align: left; }
}

/* legacy banner classes (used by index.html-old + may still be referenced) */
.head-component { display: none; }
.breaker { width: 100%; height: 0; background: var(--c-primary); }
.content { width: 100%; }

/* Animated helpers used by aboutus */
.animated { animation-duration: 1s; animation-fill-mode: both; }
.fadeInUp { animation-name: fadeInUp; }
@keyframes fadeInUp {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* hero-image floating cards (preserve names so aboutus stays intact) */
.hero-image {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- 15. Responsive ---------- */
@media (min-width: 600px) {
    .stats-shell { grid-template-columns: repeat(4, 1fr); }
    .contact-form { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
    .approach-cta, .shop-app .sec-text a { width: auto; min-width: 220px; }
    .sec-text { text-align: left !important; padding: 30px 0; }
    .shop-app { padding: 40px 5em; }
    .d-flex { display: flex; }
}

@media (min-width: 992px) {
    .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 60px; }
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .service-card-wide { grid-column: span 3; }
    .service-card-wide .service-icon { float: left; margin-right: 22px; }
    .contact-grid { grid-template-columns: 0.85fr 1.15fr; padding: 40px; }
    .nav-shell { padding: 18px 32px; }
    .primary-nav { display: flex; align-items: center; justify-content: flex-start; }
    .nav-cta .btn { display: inline-flex; }
    .hamburger { display: none; }
    .mobile-nav { display: none; }
    .stats-shell { gap: 40px; }
    .section-head { margin-bottom: 64px; }
    .services-section { padding: 120px 0; }
    .approach-section { padding: 110px 0; }
    .contact-section { padding: 120px 0; }

    .call-to-action .outer-box .content-box .title-box { margin-top: 0; margin-left: -40px; }
    .call-to-action .outer-box .content-box { padding-left: 60px; padding-right: 80px; }
    .call-to-action .outer-box { margin: 0 35px; max-width: 100%; width: auto; }
}

/* Mobile-only fallback for the old CTA gradient */
@media (max-width: 991.98px) {
    .main-footer .footer-column { width: 100%; }
    .call-to-action.pull-down { margin-bottom: 0; }
    .call-to-action .outer-box { border-radius: 0; margin: 0; }
    .call-to-action .outer-box .icon-32,
    .call-to-action .outer-box .icon-14 { display: none; }
    .call-to-action .outer-box .content-box {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 30px;
        padding: 60px 20px;
    }
    .call-to-action .outer-box .content-box .image-box { display: none; }
    .call-to-action .outer-box .content-box .title-box { margin-left: 0; max-width: 500px; }
    .call-to-action .outer-box .content-box .title-box .title { font-size: 26px; }
    .call-to-action .outer-box::after { border-radius: 0; background: var(--c-primary); }
    .call-to-action .outer-box::before { border-top-right-radius: 0; background-image: none; }
    .footer-style-one .outer-box { padding: 40px 20px; border-radius: 0; }
    .main-footer .widgets-section { padding: 0; }
    .footer-style-one .newsletter-widget { margin-left: 0; }
    .footer-style-one .links-widget { padding-left: 0; }
    .footer-style-one .footer-bottom .inner-container::before { right: 0; }
    .scroll-to-top {
        width: 80px;
        border-bottom-right-radius: 0;
    }
    .footer-style-one .footer-bottom .footer-nav { display: none; }
    .footer-bottom .copyright-text { font-size: 14px; padding: 0 20px; }
    .client-section { padding: 50px 16px; }
    .client-section .outer-box { padding: 16px; border-radius: 20px; display: block; }
    .client-section .outer-box .title-box {
        max-width: 100%;
        display: block;
        padding-right: 0;
        margin-right: 0;
        margin-bottom: 12px;
    }
    .client-section .outer-box .title-box::before { display: none; }
    .client-section .outer-box .title-box .icon { display: none; }
    .client-section .outer-box .marquee-box { margin-top: 16px; }
    .client-section .outer-box .marquee-box .marquee { gap: 50px; }
    .floating-card { padding: 10px 14px; font-size: 13px; }
    .floating-card-1 { left: 0; }
    .floating-card-3 { left: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
}