/* ==========================================================================
   Global Value Web — Premium Landing Page
   Author: GVW Web Team
   Structure:
     1. Design tokens (custom properties)
     2. Resets & base
     3. Layout primitives (container, section)
     4. Typography
     5. Buttons & utilities
     6. Header & navigation
     7. Hero
     8. Logos / marquee
     9. About
    10. Services
    11. Why Choose Us
    12. Stats counters
    13. Process
    14. Features
    15. Testimonials carousel
    16. CTA banner
    17. FAQ accordion
    18. Contact form
    19. Footer
    20. Scroll-to-top + reveal animations
    21. Responsive breakpoints
   ========================================================================== */

/* 1. Design Tokens
   ------------------------------------------------------------------ */
:root {
    /* Brand palette */
    --gvw-navy-900: #06122e;
    --gvw-navy-800: #0a1f44;
    --gvw-navy-700: #11295a;
    --gvw-blue-600: #1d4ed8;
    --gvw-blue-500: #3b82f6;
    --gvw-blue-400: #60a5fa;
    --gvw-blue-100: #eaf1ff;
    --gvw-blue-50:  #f3f7ff;
    --gvw-orange-500: #f97316;
    --gvw-orange-400: #fb923c;
    --gvw-violet-500: #6366f1;     /* premium tertiary accent */
    --gvw-violet-400: #818cf8;
    --gvw-violet-100: #eef0ff;
    --gvw-gold-500:   #d4a857;     /* warm metallic accent */

    /* Neutrals */
    --gvw-ink: #0b1424;
    --gvw-ink-2: #1f2a44;
    --gvw-mute: #5b6b85;
    --gvw-mute-2: #8794ad;
    --gvw-line: #e6ebf3;
    --gvw-line-2: #eef2f8;
    --gvw-bg: #ffffff;
    --gvw-bg-soft: #f4f6fb;        /* slightly more tinted */
    --gvw-bg-tint: #eef3fc;
    --gvw-bg-cream: #fbf8f4;       /* warm subtle background */

    /* Effects */
    --gvw-radius-sm: 10px;
    --gvw-radius-md: 16px;
    --gvw-radius-lg: 24px;
    --gvw-radius-xl: 32px;
    --gvw-shadow-sm: 0 4px 14px rgba(10,31,68,.06);
    --gvw-shadow-md: 0 12px 30px rgba(10,31,68,.08);
    --gvw-shadow-lg: 0 30px 60px rgba(10,31,68,.12);
    --gvw-shadow-glow: 0 20px 60px rgba(59,130,246,.25);
    --gvw-shadow-elev: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 28px rgba(10,31,68,.08), 0 30px 60px rgba(10,31,68,.06);

    /* Gradients */
    --gvw-grad-primary: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --gvw-grad-accent: linear-gradient(135deg, #3b82f6 0%, #f97316 100%);
    --gvw-grad-soft: linear-gradient(180deg, #f4f6fb 0%, #ffffff 100%);
    --gvw-grad-dark: linear-gradient(135deg, #06122e 0%, #11295a 100%);
    --gvw-grad-cta: linear-gradient(135deg, #0a1f44 0%, #1d4ed8 60%, #3b82f6 100%);
    --gvw-grad-violet: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
    --gvw-grad-mesh:
        radial-gradient(at 8% 12%,  rgba(59,130,246,.10) 0px, transparent 45%),
        radial-gradient(at 92% 8%,  rgba(99,102,241,.08) 0px, transparent 50%),
        radial-gradient(at 92% 92%, rgba(249,115,22,.07) 0px, transparent 45%),
        radial-gradient(at 8% 92%,  rgba(59,130,246,.07) 0px, transparent 45%);

    /* Type */
    --gvw-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --gvw-font-head: 'Sora', 'Inter', system-ui, sans-serif;

    /* Motion */
    --gvw-ease: cubic-bezier(.22,.61,.36,1);
    --gvw-dur: .35s;

    /* Header */
    --gvw-header-h: 76px;
}

/* 2. Reset / Base
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--gvw-font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--gvw-ink);
    background: var(--gvw-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; color: var(--gvw-mute); }
::selection { background: var(--gvw-blue-500); color: #fff; }

/* 3. Layout primitives
   ------------------------------------------------------------------ */
.gvw-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}
.gvw-section {
    padding: clamp(64px, 9vw, 128px) 0;
    position: relative;
}
.gvw-section__head {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}
.gvw-section__lede { font-size: 1.05rem; color: var(--gvw-mute); }

/* 4. Typography
   ------------------------------------------------------------------ */
h1, h2, h3, h4, h5 {
    font-family: var(--gvw-font-head);
    color: var(--gvw-ink);
    margin: 0 0 .6em;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 700;
}
.gvw-h2 {
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    margin-bottom: .5em;
}
.gvw-eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gvw-blue-500);
    margin-bottom: 14px;
    padding: 6px 14px;
    background: var(--gvw-blue-100);
    border-radius: 999px;
}
.gvw-gradient-text {
    background: var(--gvw-grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 5. Buttons
   ------------------------------------------------------------------ */
.gvw-btn {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    font-weight: 600;
    font-size: .96rem;
    line-height: 1;
    border-radius: 999px;
    cursor: pointer;
    transition: transform var(--gvw-dur) var(--gvw-ease),
                box-shadow var(--gvw-dur) var(--gvw-ease),
                background var(--gvw-dur) var(--gvw-ease),
                color var(--gvw-dur) var(--gvw-ease);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    vertical-align: middle;
}
/* Lock children to a single row — overrides the global svg{display:block} reset
   and protects the icon from being shrunk by long button text. */
.gvw-btn > * { flex-shrink: 0; }
.gvw-btn > svg { display: inline-block; vertical-align: middle; }
.gvw-btn > span { display: inline-block; line-height: 1; }
.gvw-btn--sm { padding: 10px 18px; font-size: .9rem; }
.gvw-btn--block { width: 100%; }
.gvw-btn--primary {
    background: var(--gvw-grad-primary);
    color: #fff !important;
    box-shadow: var(--gvw-shadow-glow);
}
.gvw-btn--primary::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(135deg, #f97316 0%, #1d4ed8 100%);
    opacity: 0; transition: opacity .4s var(--gvw-ease);
}
.gvw-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 24px 50px rgba(59,130,246,.35); }
.gvw-btn--primary:hover::before { opacity: 1; }
.gvw-btn--ghost {
    background: rgba(10,31,68,.06);
    color: var(--gvw-ink);
}
.gvw-btn--ghost:hover { background: rgba(10,31,68,.12); transform: translateY(-2px); }
.gvw-btn--outline {
    background: transparent;
    color: var(--gvw-ink);
    border: 1.5px solid var(--gvw-line);
}
.gvw-btn--outline:hover { border-color: var(--gvw-blue-500); color: var(--gvw-blue-500); transform: translateY(-2px); }
.gvw-btn--white { background: #fff; color: var(--gvw-navy-800); }
.gvw-btn--white:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(0,0,0,.18); }
.gvw-btn--white-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.gvw-btn--white-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* 6. Header & Navigation
   ------------------------------------------------------------------ */
.gvw-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 14px 0;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid transparent;
    transition: background .3s var(--gvw-ease), border-color .3s var(--gvw-ease), box-shadow .3s var(--gvw-ease);
}
.gvw-header.is-scrolled {
    background: rgba(255,255,255,.92);
    border-bottom-color: var(--gvw-line);
    box-shadow: 0 4px 30px rgba(10,31,68,.06);
}
.gvw-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.gvw-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.gvw-logo__mark {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--gvw-blue-100);
}
.gvw-logo__text { display: flex; flex-direction: column; line-height: 1; }
.gvw-logo__text strong {
    font-family: var(--gvw-font-head);
    font-size: 1.15rem;
    color: var(--gvw-navy-800);
    letter-spacing: .02em;
}
.gvw-logo__text small {
    font-size: .65rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gvw-mute);
    margin-top: 4px;
    font-weight: 600;
}
.gvw-logo--light .gvw-logo__mark { background: rgba(255,255,255,.1); }
.gvw-logo--light .gvw-logo__text strong { color: #fff; }
.gvw-logo--light .gvw-logo__text small { color: rgba(255,255,255,.6); }

.gvw-nav ul {
    display: flex;
    gap: 8px;
}
.gvw-nav a {
    display: inline-block;
    padding: 10px 16px;
    font-weight: 500;
    font-size: .95rem;
    color: var(--gvw-ink-2);
    border-radius: 10px;
    position: relative;
    transition: color .25s var(--gvw-ease), background .25s var(--gvw-ease);
}
.gvw-nav a:hover, .gvw-nav a.is-active {
    color: var(--gvw-blue-500);
    background: var(--gvw-blue-100);
}

.gvw-header__cta { display: flex; align-items: center; gap: 12px; }
.gvw-burger {
    display: none;
    width: 42px; height: 42px;
    border-radius: 10px;
    background: var(--gvw-blue-100);
    place-items: center;
    position: relative;
}
.gvw-burger span {
    position: absolute;
    left: 11px; right: 11px; height: 2px;
    background: var(--gvw-navy-800);
    border-radius: 2px;
    transition: transform .3s var(--gvw-ease), opacity .25s var(--gvw-ease);
}
.gvw-burger span:nth-child(1) { top: 14px; }
.gvw-burger span:nth-child(2) { top: 20px; }
.gvw-burger span:nth-child(3) { top: 26px; }
.gvw-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.gvw-burger.is-open span:nth-child(2) { opacity: 0; }
.gvw-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 7. Hero
   ------------------------------------------------------------------ */
.gvw-hero {
    position: relative;
    padding: calc(var(--gvw-header-h) + 56px) 0 96px;
    overflow: hidden;
    background: var(--gvw-bg-soft);
}
.gvw-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.gvw-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
    animation: gvwFloat 14s ease-in-out infinite;
}
.gvw-orb--1 { width: 460px; height: 460px; background: #3b82f6; top: -120px; left: -120px; }
.gvw-orb--2 { width: 360px; height: 360px; background: #f97316; bottom: -140px; right: -80px; animation-delay: -4s; opacity: .35; }
.gvw-orb--3 { width: 300px; height: 300px; background: #60a5fa; top: 30%; right: 30%; animation-delay: -8s; opacity: .25; }
.gvw-grid-overlay {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(10,31,68,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10,31,68,.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
@keyframes gvwFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, -30px) scale(1.08); }
}

.gvw-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.gvw-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 12px;
    background: rgba(255,255,255,.7);
    border: 1px solid var(--gvw-line);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--gvw-ink-2);
    margin-bottom: 22px;
}
.gvw-pill__dot {
    width: 8px; height: 8px;
    background: var(--gvw-orange-500);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(249,115,22,.18);
    animation: gvwPulse 2s infinite;
}
@keyframes gvwPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(249,115,22,.18); }
    50%      { box-shadow: 0 0 0 9px rgba(249,115,22,0); }
}

.gvw-hero__title {
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.08;
    margin-bottom: 22px;
    letter-spacing: -.025em;
}
.gvw-hero__lede {
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    max-width: 560px;
    margin-bottom: 36px;
    color: var(--gvw-ink-2);
}
.gvw-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 48px;
}
.gvw-hero__meta {
    display: flex; gap: 36px; flex-wrap: wrap;
    padding-top: 28px;
    border-top: 1px solid var(--gvw-line);
}
.gvw-hero__meta > div { display: flex; flex-direction: column; }
.gvw-hero__meta strong {
    font-family: var(--gvw-font-head);
    font-size: 1.45rem;
    color: var(--gvw-navy-800);
    line-height: 1;
}
.gvw-hero__meta span { font-size: .82rem; color: var(--gvw-mute); margin-top: 4px; }

/* Hero visual */
.gvw-hero__visual { position: relative; min-height: 480px; }
.gvw-card-stack { position: relative; height: 100%; }
.gvw-glass {
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: var(--gvw-shadow-lg);
    border-radius: var(--gvw-radius-lg);
    padding: 22px;
}
.gvw-glass--lg {
    width: 88%;
    margin-left: 6%;
    margin-top: 20px;
}
.gvw-glass--sm {
    position: absolute;
    top: 14px; right: -10px;
    padding: 14px 18px;
    border-radius: var(--gvw-radius-md);
    z-index: 2;
}
.gvw-glass--xs {
    position: absolute;
    bottom: 12px; left: -16px;
    padding: 14px 18px;
    border-radius: var(--gvw-radius-md);
    z-index: 2;
}
.gvw-glass__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-weight: 600;
    color: var(--gvw-navy-800);
    font-size: .95rem;
}
.gvw-glass__head em {
    font-style: normal;
    margin-left: auto;
    font-size: .72rem;
    font-weight: 700;
    color: #16a34a;
    background: rgba(22,163,74,.1);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: .06em;
}
.gvw-dot { width: 8px; height: 8px; border-radius: 50%; }
.gvw-dot--green { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.2); }

.gvw-chart {
    background: linear-gradient(180deg, rgba(59,130,246,.05) 0%, rgba(255,255,255,0) 100%);
    border-radius: var(--gvw-radius-md);
    padding: 6px;
}
.gvw-glass__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 16px;
}
.gvw-glass__stats > div {
    background: rgba(10,31,68,.04);
    border-radius: var(--gvw-radius-sm);
    padding: 12px 10px;
    text-align: center;
}
.gvw-glass__stats strong {
    display: block;
    font-family: var(--gvw-font-head);
    font-size: 1.1rem;
    color: var(--gvw-navy-800);
}
.gvw-glass__stats span { font-size: .75rem; color: var(--gvw-mute); }

.gvw-mini { display: flex; align-items: center; gap: 12px; }
.gvw-mini__icon {
    width: 38px; height: 38px;
    background: var(--gvw-blue-100);
    border-radius: 12px;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.gvw-mini__icon--orange { background: var(--gvw-grad-accent); }
.gvw-mini strong { display: block; font-size: .9rem; color: var(--gvw-navy-800); font-family: var(--gvw-font-head); }
.gvw-mini span { font-size: .78rem; color: var(--gvw-mute); }

.gvw-float { animation: gvwFloatY 6s ease-in-out infinite; }
.gvw-float--delayed { animation-delay: -2s; }
.gvw-float--slow { animation-duration: 8s; animation-delay: -3s; }
@keyframes gvwFloatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* 8. Logos / marquee
   ------------------------------------------------------------------ */
.gvw-logos {
    padding: 56px 0;
    background: #fff;
    border-top: 1px solid var(--gvw-line-2);
    border-bottom: 1px solid var(--gvw-line-2);
}
.gvw-logos__title {
    text-align: center;
    font-size: .82rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gvw-mute);
    font-weight: 600;
    margin-bottom: 32px;
}
.gvw-marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.gvw-marquee__track {
    display: flex;
    gap: 56px;
    width: max-content;
    animation: gvwMarquee 40s linear infinite;
}
.gvw-marquee:hover .gvw-marquee__track { animation-play-state: paused; }
.gvw-brand {
    font-family: var(--gvw-font-head);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gvw-mute-2);
    letter-spacing: -.01em;
    white-space: nowrap;
    transition: color .25s ease;
}
.gvw-brand:hover { color: var(--gvw-navy-800); }
@keyframes gvwMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 9. About
   ------------------------------------------------------------------ */
.gvw-about { background: #fff; }
.gvw-about__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 72px;
    align-items: center;
}
.gvw-about__media { position: relative; }
.gvw-about__media-inner {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 480px;
    margin: 0 auto;
    background: var(--gvw-grad-dark);
    border-radius: var(--gvw-radius-xl);
    overflow: hidden;
    box-shadow: var(--gvw-shadow-lg);
}
.gvw-about__shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}
.gvw-about__shape--1 { width: 200px; height: 200px; background: #3b82f6; opacity: .5; top: -40px; left: -40px; }
.gvw-about__shape--2 { width: 240px; height: 240px; background: #f97316; opacity: .35; bottom: -60px; right: -60px; }
.gvw-about__visual {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}
.gvw-about__lines {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    stroke: rgba(255,255,255,.18);
    stroke-width: 1;
    fill: none;
}
.gvw-about__node {
    position: absolute;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.2);
    animation: gvwFloatY 7s ease-in-out infinite;
}
.gvw-about__node--center {
    width: 78px; height: 78px;
    background: var(--gvw-grad-accent);
    border-radius: 50%;
    display: grid; place-items: center;
    padding: 0;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(249,115,22,.4);
    animation: gvwPulseScale 3s ease-in-out infinite;
}
@keyframes gvwPulseScale {
    0%, 100% { transform: scale(1); box-shadow: 0 20px 40px rgba(249,115,22,.4); }
    50%      { transform: scale(1.06); box-shadow: 0 26px 50px rgba(249,115,22,.6); }
}
.gvw-about__node--a { top: 14%; left: 8%; animation-delay: -1s; }
.gvw-about__node--b { top: 14%; right: 8%; animation-delay: -2s; }
.gvw-about__node--c { bottom: 26%; left: 4%; animation-delay: -3s; }
.gvw-about__node--d { bottom: 26%; right: 4%; animation-delay: -4s; }
.gvw-about__node--e { bottom: 8%; left: 50%; transform: translateX(-50%); animation-delay: -5s; }

.gvw-about__list { margin: 28px 0 32px; display: grid; gap: 18px; }
.gvw-about__list li { display: flex; gap: 14px; }
.gvw-about__list strong {
    display: block;
    font-family: var(--gvw-font-head);
    color: var(--gvw-navy-800);
    margin-bottom: 4px;
    font-size: 1.05rem;
}
.gvw-about__list p { margin: 0; font-size: .94rem; }
.gvw-about__icon {
    width: 34px; height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--gvw-blue-100);
    color: var(--gvw-blue-500);
    display: grid; place-items: center;
}

/* 10. Services
   ------------------------------------------------------------------ */
.gvw-services { background: var(--gvw-grad-soft); }
.gvw-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.gvw-service {
    position: relative;
    background: #fff;
    border: 1px solid var(--gvw-line);
    border-radius: var(--gvw-radius-lg);
    padding: 32px 28px;
    transition: transform .4s var(--gvw-ease), box-shadow .4s var(--gvw-ease), border-color .4s var(--gvw-ease);
    overflow: hidden;
    isolation: isolate;
}
.gvw-service::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--gvw-grad-primary);
    opacity: 0;
    z-index: -1;
    transition: opacity .4s var(--gvw-ease);
}
.gvw-service::after {
    content: "";
    position: absolute;
    top: -1px; right: -1px;
    width: 80px; height: 80px;
    background: var(--gvw-grad-accent);
    border-radius: 0 var(--gvw-radius-lg) 0 100%;
    opacity: 0;
    transition: opacity .4s var(--gvw-ease);
}
.gvw-service__icon {
    width: 60px; height: 60px;
    border-radius: 16px;
    background: var(--gvw-blue-100);
    color: var(--gvw-blue-500);
    display: grid; place-items: center;
    margin-bottom: 22px;
    transition: background .4s var(--gvw-ease), color .4s var(--gvw-ease), transform .4s var(--gvw-ease);
}
.gvw-service h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    transition: color .4s var(--gvw-ease);
}
.gvw-service p { font-size: .95rem; margin-bottom: 18px; transition: color .4s var(--gvw-ease); }
.gvw-service__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--gvw-blue-500);
    transition: gap .25s var(--gvw-ease), color .4s var(--gvw-ease);
}
.gvw-service__link:hover { gap: 14px; }

.gvw-service:hover {
    transform: translateY(-8px);
    box-shadow: var(--gvw-shadow-lg);
    border-color: transparent;
}
.gvw-service:hover::before { opacity: 1; }
.gvw-service:hover::after { opacity: .25; }
.gvw-service:hover h3,
.gvw-service:hover p,
.gvw-service:hover .gvw-service__link { color: #fff; }
.gvw-service:hover .gvw-service__icon {
    background: rgba(255,255,255,.2);
    color: #fff;
    transform: scale(1.06);
}

/* 11. Why Choose Us
   ------------------------------------------------------------------ */
.gvw-why { background: #fff; }
.gvw-why__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 64px;
    align-items: center;
}
.gvw-why__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.gvw-why__card {
    padding: 28px 24px;
    border-radius: var(--gvw-radius-lg);
    background: var(--gvw-bg-soft);
    border: 1px solid var(--gvw-line);
    transition: transform .35s var(--gvw-ease), box-shadow .35s var(--gvw-ease);
}
.gvw-why__card:nth-child(odd) { transform: translateY(0); }
.gvw-why__card:nth-child(even) { transform: translateY(24px); }
.gvw-why__card:hover { transform: translateY(-8px); box-shadow: var(--gvw-shadow-md); }
.gvw-why__card:nth-child(even):hover { transform: translateY(16px); }
.gvw-why__icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--gvw-grad-accent);
    color: #fff;
    display: grid; place-items: center;
    margin-bottom: 14px;
}
.gvw-why__card h4 { font-size: 1.05rem; margin-bottom: 6px; color: var(--gvw-navy-800); }
.gvw-why__card p { font-size: .9rem; margin: 0; }

/* 12. Stats
   ------------------------------------------------------------------ */
.gvw-stats { padding: 0 0 clamp(64px, 8vw, 100px); }
.gvw-stats__inner {
    background: var(--gvw-grad-cta);
    border-radius: var(--gvw-radius-xl);
    padding: 56px 40px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--gvw-shadow-lg);
}
.gvw-stats__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: .6;
}
.gvw-stats__title {
    text-align: center;
    color: rgba(255,255,255,.85);
    font-size: 1rem;
    margin-bottom: 36px;
    position: relative;
    letter-spacing: .02em;
}
.gvw-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}
.gvw-stat {
    text-align: center;
    color: #fff;
    position: relative;
}
.gvw-stat::after {
    content: "";
    position: absolute;
    right: -12px; top: 14%; bottom: 14%;
    width: 1px;
    background: rgba(255,255,255,.18);
}
.gvw-stat:last-child::after { display: none; }
.gvw-counter {
    font-family: var(--gvw-font-head);
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(180deg, #fff, #cfe2ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gvw-stat__suffix {
    font-family: var(--gvw-font-head);
    font-size: 1.6rem;
    color: var(--gvw-orange-400);
    margin-left: 2px;
    vertical-align: top;
    font-weight: 800;
}
.gvw-stat small {
    display: block;
    margin-top: 10px;
    font-size: .88rem;
    color: rgba(255,255,255,.75);
    letter-spacing: .05em;
}

/* 13. Process
   ------------------------------------------------------------------ */
.gvw-process { background: var(--gvw-bg-soft); }
.gvw-process__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
}
.gvw-process__grid::before {
    content: "";
    position: absolute;
    left: 8%; right: 8%; top: 36px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--gvw-blue-400) 0 8px, transparent 8px 16px);
    opacity: .4;
    z-index: 0;
}
.gvw-process__step {
    background: #fff;
    border-radius: var(--gvw-radius-lg);
    padding: 28px 24px;
    border: 1px solid var(--gvw-line);
    position: relative;
    z-index: 1;
    transition: transform .35s var(--gvw-ease), box-shadow .35s var(--gvw-ease);
}
.gvw-process__step:hover { transform: translateY(-6px); box-shadow: var(--gvw-shadow-md); }
.gvw-process__num {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--gvw-grad-primary);
    color: #fff;
    font-family: var(--gvw-font-head);
    font-size: 1.4rem;
    font-weight: 800;
    display: grid; place-items: center;
    margin-bottom: 18px;
    box-shadow: 0 14px 30px rgba(59,130,246,.3);
}
.gvw-process__step h4 { font-size: 1.15rem; margin-bottom: 8px; color: var(--gvw-navy-800); }
.gvw-process__step p { font-size: .92rem; margin: 0; }

/* 14. Features — asymmetric bento grid with image-overlay cards
   ------------------------------------------------------------------ */
.gvw-features { background: #fff; }

/* Bento grid: 5-column track with span 3 / span 2 alternation between rows */
.gvw-features__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 340px 340px;
    gap: 22px;
}
.gvw-feature:nth-child(1) { grid-column: span 3; }
.gvw-feature:nth-child(2) { grid-column: span 2; }
.gvw-feature:nth-child(3) { grid-column: span 2; }
.gvw-feature:nth-child(4) { grid-column: span 3; }

/* Card: full-bleed image, dark gradient overlay, content anchored bottom */
.gvw-feature {
    position: relative;
    overflow: hidden;
    border-radius: var(--gvw-radius-lg);
    isolation: isolate;
    background: var(--gvw-navy-900);
    box-shadow: var(--gvw-shadow-md);
    transition: transform .5s var(--gvw-ease), box-shadow .5s var(--gvw-ease);
    cursor: pointer;
    min-width: 0;
}
.gvw-feature:hover {
    transform: translateY(-6px);
    box-shadow: var(--gvw-shadow-lg);
}

/* Image fills the card; scales subtly on hover */
.gvw-feature__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--gvw-ease), filter .5s var(--gvw-ease);
    filter: saturate(1.05);
}
.gvw-feature:hover .gvw-feature__image {
    transform: scale(1.07);
    filter: saturate(1.15) brightness(1.05);
}

/* Dark gradient overlay — keeps text legible without flattening the image */
.gvw-feature__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(6,18,46,.10) 0%,
            rgba(6,18,46,.35) 45%,
            rgba(6,18,46,.88) 100%),
        linear-gradient(135deg,
            rgba(59,130,246,.25) 0%,
            rgba(6,18,46,0) 60%);
    transition: opacity .4s var(--gvw-ease);
}

/* Content layer — anchored bottom, animates up on hover */
.gvw-feature__content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: clamp(20px, 2.5vw, 30px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    gap: 8px;
}
.gvw-feature__tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 6px 12px;
    margin-bottom: 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
}
.gvw-feature__title {
    margin: 0;
    color: #fff;
    font-family: var(--gvw-font-head);
    font-size: clamp(1.2rem, 1.7vw, 1.6rem);
    line-height: 1.2;
    letter-spacing: -.01em;
}
.gvw-feature__text {
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: .92rem;
    line-height: 1.55;
    max-width: 46ch;
}
.gvw-feature__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    width: max-content;
    padding-bottom: 2px;
    border-bottom: 1.5px solid rgba(255,255,255,.5);
    transition: gap .25s var(--gvw-ease), border-color .25s var(--gvw-ease);
}
.gvw-feature__link:hover {
    gap: 12px;
    border-bottom-color: var(--gvw-orange-500);
}
.gvw-feature__link svg { flex-shrink: 0; }

/* Larger headings on the bigger bento tiles for visual hierarchy */
.gvw-feature:nth-child(1) .gvw-feature__title,
.gvw-feature:nth-child(4) .gvw-feature__title {
    font-size: clamp(1.4rem, 2.1vw, 1.9rem);
}

/* 15. Testimonials carousel
   ------------------------------------------------------------------ */
.gvw-testimonials { background: var(--gvw-bg-soft); padding-bottom: clamp(72px, 9vw, 120px); }
.gvw-testi-marquee {
    overflow: hidden;
    padding: 16px 0 24px;
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    cursor: grab;
}
.gvw-testi-marquee.is-dragging { cursor: grabbing; }
.gvw-testi-marquee__track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: gvwTesti 50s linear infinite;
    will-change: transform;
}
.gvw-testi-marquee:hover .gvw-testi-marquee__track,
.gvw-testi-marquee.is-paused .gvw-testi-marquee__track { animation-play-state: paused; }
@keyframes gvwTesti {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.gvw-testi {
    flex: 0 0 380px;
    background: #fff;
    border-radius: var(--gvw-radius-lg);
    padding: 28px;
    border: 1px solid var(--gvw-line);
    box-shadow: var(--gvw-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 18px;
    user-select: none;
}
.gvw-testi__quote { color: var(--gvw-blue-500); opacity: .25; }
.gvw-testi p {
    color: var(--gvw-ink-2);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
    flex: 1;
}
.gvw-testi footer {
    display: flex;
    flex-direction: column;
    padding-top: 16px;
    border-top: 1px solid var(--gvw-line-2);
}
.gvw-testi strong { font-family: var(--gvw-font-head); color: var(--gvw-navy-800); font-size: 1rem; }
.gvw-testi span { font-size: .85rem; color: var(--gvw-mute); }

/* 16. CTA banner
   ------------------------------------------------------------------ */
.gvw-cta { padding: clamp(40px, 6vw, 80px) 0; }
.gvw-cta__box {
    position: relative;
    background: var(--gvw-grad-cta);
    border-radius: var(--gvw-radius-xl);
    overflow: hidden;
    padding: clamp(48px, 6vw, 80px) clamp(24px, 5vw, 64px);
    color: #fff;
    text-align: center;
    box-shadow: var(--gvw-shadow-lg);
}
.gvw-cta__bg { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.gvw-cta__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .5;
}
.gvw-cta__blob--1 { width: 380px; height: 380px; background: #3b82f6; top: -120px; left: -80px; }
.gvw-cta__blob--2 { width: 320px; height: 320px; background: #f97316; bottom: -120px; right: -80px; }

/* Background photo — abstract tech texture, blended with the gradient */
.gvw-cta__photo {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1600&q=80');
    background-size: cover;
    background-position: center;
    opacity: .28;
    mix-blend-mode: screen;
}

/* Tech grid pattern overlay */
.gvw-cta__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
}

/* Constellation / network SVG — data-driven feel */
.gvw-cta__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .22;
    pointer-events: none;
}

/* Floating geometric shapes ---------------------------------------- */
.gvw-cta__shape {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}
.gvw-cta__shape--ring {
    width: 140px; height: 140px;
    border: 1.5px dashed rgba(255,255,255,.3);
    border-radius: 50%;
    top: 24px; right: 6%;
    animation: gvwSpin 40s linear infinite;
}
.gvw-cta__shape--plus {
    width: 22px; height: 22px;
    color: rgba(255,255,255,.55);
}
.gvw-cta__shape--plus::before,
.gvw-cta__shape--plus::after {
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: 2px;
}
.gvw-cta__shape--plus::before {
    left: 50%; top: 0; bottom: 0; width: 2px;
    transform: translateX(-50%);
}
.gvw-cta__shape--plus::after {
    top: 50%; left: 0; right: 0; height: 2px;
    transform: translateY(-50%);
}
.gvw-cta__shape--plus-a { top: 22%; left: 7%; }
.gvw-cta__shape--plus-b { bottom: 26%; right: 11%; }
.gvw-cta__shape--dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    animation: gvwPulse 2.4s ease-in-out infinite;
}
.gvw-cta__shape--dot-a {
    top: 62%; left: 11%;
    background: var(--gvw-orange-500);
    box-shadow: 0 0 0 6px rgba(249,115,22,.18), 0 0 24px rgba(249,115,22,.55);
}
.gvw-cta__shape--dot-b {
    top: 30%; right: 16%;
    background: var(--gvw-blue-400);
    box-shadow: 0 0 0 6px rgba(96,165,250,.18), 0 0 24px rgba(96,165,250,.55);
    animation-delay: -1.2s;
}

/* Make sure all text content sits above every decorative layer */
.gvw-cta__inner { position: relative; z-index: 2; }

/* Tone down decorations on mobile so they don't overwhelm small banners */
@media (max-width: 720px) {
    .gvw-cta__shape--ring { width: 90px; height: 90px; top: 16px; right: 4%; }
    .gvw-cta__shape--plus { width: 16px; height: 16px; }
    .gvw-cta__lines { opacity: .16; }
    .gvw-cta__grid { background-size: 38px 38px; }
}
.gvw-cta__inner h2 {
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    margin-bottom: 14px;
}
.gvw-cta__inner p {
    color: rgba(255,255,255,.85);
    max-width: 620px;
    margin: 0 auto 32px;
    font-size: 1.05rem;
}
.gvw-cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* 17. FAQ
   ------------------------------------------------------------------ */
.gvw-faq { background: #fff; }
.gvw-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
    gap: 64px;
    align-items: start;
}
.gvw-faq__intro h2 { margin-bottom: 16px; }
.gvw-faq__list { display: grid; gap: 14px; }
.gvw-faq__item {
    background: var(--gvw-bg-soft);
    border: 1px solid var(--gvw-line);
    border-radius: var(--gvw-radius-md);
    overflow: hidden;
    transition: border-color .25s var(--gvw-ease), background .25s var(--gvw-ease);
}
.gvw-faq__item[open] { border-color: var(--gvw-blue-500); background: #fff; box-shadow: var(--gvw-shadow-sm); }
.gvw-faq__item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 24px;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--gvw-navy-800);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--gvw-font-head);
}
.gvw-faq__item summary::-webkit-details-marker { display: none; }
.gvw-faq__chev {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--gvw-line);
    color: var(--gvw-blue-500);
    display: grid; place-items: center;
    flex-shrink: 0;
    transition: transform .3s var(--gvw-ease), background .3s var(--gvw-ease), color .3s var(--gvw-ease);
}
.gvw-faq__item[open] .gvw-faq__chev {
    transform: rotate(180deg);
    background: var(--gvw-blue-500);
    color: #fff;
    border-color: var(--gvw-blue-500);
}
.gvw-faq__body {
    padding: 0 24px 22px;
    color: var(--gvw-mute);
}
.gvw-faq__body p { margin: 0; font-size: .95rem; }

/* 18. Contact form
   ------------------------------------------------------------------ */
.gvw-contact { background: var(--gvw-bg-soft); }
.gvw-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: start;
}
.gvw-contact__copy h2 { margin-bottom: 18px; }
.gvw-contact__meta {
    display: grid;
    gap: 18px;
    margin-top: 32px;
}
.gvw-contact__meta li {
    display: flex;
    gap: 14px;
    align-items: center;
}
.gvw-contact__ico {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--gvw-blue-100);
    color: var(--gvw-blue-500);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.gvw-contact__meta strong {
    display: block;
    color: var(--gvw-navy-800);
    font-family: var(--gvw-font-head);
    font-size: .95rem;
    line-height: 1.3;
    margin-bottom: 2px;
}
.gvw-contact__meta span { color: var(--gvw-mute); font-size: .9rem; }

/* Form card --------------------------------------------------------- */
.gvw-form {
    --gvw-input-h: 52px;
    --gvw-field-gap: 8px;
    --gvw-stack-gap: 20px;

    position: relative;
    background: #fff;
    border: 1px solid var(--gvw-line);
    border-radius: var(--gvw-radius-xl);
    padding: clamp(22px, 3.5vw, 40px);
    box-shadow: var(--gvw-shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--gvw-stack-gap);
    overflow: hidden;
}
.gvw-form::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--gvw-grad-accent);
}

/* A row is just a 2-column grid; vertical rhythm comes from the form's gap */
.gvw-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gvw-stack-gap);
}

/* Each label is its own stacked column — gap replaces every margin */
.gvw-form label {
    display: flex;
    flex-direction: column;
    gap: var(--gvw-field-gap);
    margin: 0;
    min-width: 0;
}
.gvw-form label > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--gvw-ink-2);
    letter-spacing: .01em;
    line-height: 1.2;
}
.gvw-form label > span sup {
    color: var(--gvw-orange-500);
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
    top: 0;
}

/* Shared input styling — a single height keeps text + select aligned.
   IMPORTANT: use background-color (not the `background` shorthand) so the
   select's chevron image/repeat/position survive across hover and focus. */
.gvw-form input,
.gvw-form select,
.gvw-form textarea {
    width: 100%;
    height: var(--gvw-input-h);
    padding: 0 18px;
    border-radius: 14px !important;
    border: 1.5px solid var(--gvw-line) !important;
    background-color: var(--gvw-bg-soft);
    font-family: inherit;
    font-size: .95rem;
    color: var(--gvw-ink);
    line-height: 1.4;
    transition: border-color .25s var(--gvw-ease),
                background-color .25s var(--gvw-ease),
                box-shadow .25s var(--gvw-ease);
    -webkit-appearance: none;
    appearance: none;
}
.gvw-form input::placeholder,
.gvw-form textarea::placeholder {
    color: var(--gvw-mute-2);
    opacity: 1;
}
.gvw-form input:hover,
.gvw-form select:hover,
.gvw-form textarea:hover { border-color: #cbd6e8; }
.gvw-form input:focus,
.gvw-form select:focus,
.gvw-form textarea:focus {
    outline: none;
    border-color: var(--gvw-blue-500);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}

/* Custom select chevron — replaces the platform-native arrow.
   Each property is declared individually (no shorthand) and re-asserted on
   :focus so the chevron stays a single 14px glyph at the right edge. */
.gvw-form select {
    cursor: pointer;
    padding-right: 44px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6b85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 14px 14px;
}
.gvw-form select:focus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 14px 14px;
}
/* Hide the native IE/Edge legacy dropdown arrow so it doesn't double up */
.gvw-form select::-ms-expand { display: none; }

/* Tighter chevron offset + slightly smaller glyph on tiny screens */
@media (max-width: 520px) {
    .gvw-form select {
        padding-right: 38px;
        background-position: right 14px center;
        background-size: 12px 12px;
    }
    .gvw-form select:focus {
        background-position: right 14px center;
        background-size: 12px 12px;
    }
}

/* Textarea overrides the single-line height */
.gvw-form textarea {
    height: auto;
    min-height: 140px;
    padding: 14px 18px;
    resize: vertical;
    line-height: 1.6;
}

/* Full-width label sits at the form's top level — just stack it */
.gvw-form__full {
    display: flex;
    flex-direction: column;
    gap: var(--gvw-field-gap);
    margin: 0;
}

.gvw-form button[type="submit"] {
    margin-top: 4px;
    min-height: 54px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.gvw-form button[type="submit"] > svg,
.gvw-form button[type="submit"] > span {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.gvw-form__hint {
    margin: 0;
    font-size: .8rem;
    color: var(--gvw-mute);
    text-align: center;
    line-height: 1.55;
}
.gvw-form__hint a {
    color: var(--gvw-blue-500);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 19. Footer
   ------------------------------------------------------------------ */
.gvw-footer {
    background: var(--gvw-grad-dark);
    color: rgba(255,255,255,.75);
    padding: 80px 0 0;
    position: relative;
    overflow: hidden;
}
.gvw-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: .5;
}
.gvw-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: 48px;
    position: relative;
    padding-bottom: 56px;
}
.gvw-footer__brand p { color: rgba(255,255,255,.7); margin: 18px 0 22px; font-size: .92rem; }
.gvw-footer__social { display: flex; gap: 10px; }
.gvw-footer__social a {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.8);
    display: grid; place-items: center;
    transition: background .25s var(--gvw-ease), color .25s var(--gvw-ease), transform .25s var(--gvw-ease);
}
.gvw-footer__social a:hover {
    background: var(--gvw-orange-500);
    color: #fff;
    transform: translateY(-3px);
    border-color: transparent;
}
.gvw-footer h5 {
    color: #fff;
    font-size: .98rem;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-family: var(--gvw-font-head);
}
.gvw-footer__col ul { display: grid; gap: 10px; }
.gvw-footer__col a {
    color: rgba(255,255,255,.7);
    font-size: .92rem;
    transition: color .2s ease, padding-left .2s ease;
}
.gvw-footer__col a:hover { color: #fff; padding-left: 4px; }
.gvw-newsletter {
    --gvw-newsletter-h: 48px;
    display: flex;
    align-items: stretch;
    height: var(--gvw-newsletter-h);
    margin-top: 14px;
    padding: 4px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.gvw-newsletter:focus-within {
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.10);
    box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}
.gvw-newsletter input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 14px 0 18px;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-family: inherit;
    font-size: .88rem;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
}
.gvw-newsletter input::placeholder { color: rgba(255,255,255,.5); }
.gvw-newsletter input:focus { outline: 0; box-shadow: none; }
.gvw-newsletter input:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    transition: background-color 9999s ease-in-out 0s;
}
.gvw-newsletter button {
    flex-shrink: 0;
    height: 100%;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gvw-orange-500);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 600;
    font-size: .85rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}
.gvw-newsletter button:hover {
    background: var(--gvw-orange-400);
    transform: translateY(-1px);
}
.gvw-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 24px 0;
    position: relative;
}
.gvw-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: .85rem;
    color: rgba(255,255,255,.55);
}
.gvw-footer__bottom-inner ul { display: flex; gap: 20px; }
.gvw-footer__bottom-inner a:hover { color: #fff; }

/* 20. Scroll-to-top + Reveal animations
   ------------------------------------------------------------------ */
.gvw-totop {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--gvw-grad-primary);
    color: #fff;
    box-shadow: var(--gvw-shadow-glow);
    display: grid; place-items: center;
    opacity: 0; pointer-events: none;
    transform: translateY(10px);
    transition: opacity .3s var(--gvw-ease), transform .3s var(--gvw-ease);
    z-index: 90;
}
.gvw-totop.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.gvw-totop:hover { transform: translateY(-3px); }

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--gvw-ease), transform .8s var(--gvw-ease);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

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

/* 21. Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1080px) {
    .gvw-hero__inner,
    .gvw-about__grid,
    .gvw-why__grid,
    .gvw-faq__grid,
    .gvw-contact__grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }
    .gvw-hero__visual { min-height: 420px; max-width: 520px; margin: 0 auto; }
    .gvw-services__grid { grid-template-columns: repeat(2, 1fr); }
    .gvw-process__grid { grid-template-columns: repeat(2, 1fr); }
    .gvw-process__grid::before { display: none; }
    .gvw-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .gvw-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; }
    .gvw-stat::after { display: none; }
}

@media (max-width: 860px) {
    .gvw-nav {
        position: fixed;
        top: var(--gvw-header-h);
        left: 0; right: 0;
        background: rgba(255,255,255,.98);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--gvw-line);
        padding: 16px 24px 22px;
        transform: translateY(-120%);
        transition: transform .35s var(--gvw-ease);
        box-shadow: var(--gvw-shadow-md);
    }
    .gvw-nav.is-open { transform: translateY(0); }
    .gvw-nav ul { flex-direction: column; gap: 4px; }
    .gvw-nav a { display: block; padding: 14px 16px; }
    .gvw-burger { display: grid; }
    .gvw-header__cta .gvw-btn { display: none; }

    .gvw-hero { padding-top: calc(var(--gvw-header-h) + 36px); padding-bottom: 64px; }
    .gvw-hero__meta { gap: 22px; }
    .gvw-hero__meta strong { font-size: 1.2rem; }

    /* Features bento → equal 2×2 grid on tablet */
    .gvw-features__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 320px 320px;
    }
    .gvw-feature:nth-child(1),
    .gvw-feature:nth-child(2),
    .gvw-feature:nth-child(3),
    .gvw-feature:nth-child(4) { grid-column: span 1; }
    .gvw-why__cards { grid-template-columns: 1fr; }
    .gvw-why__card:nth-child(even) { transform: none; }
    .gvw-why__card:nth-child(even):hover { transform: translateY(-8px); }

    .gvw-stats__grid { grid-template-columns: 1fr 1fr; }
    .gvw-stats__inner { padding: 40px 24px; }

    /* Form: collapse to single column, keep the same vertical rhythm */
    .gvw-form { --gvw-stack-gap: 18px; }
    .gvw-form__row { grid-template-columns: 1fr; }

    .gvw-footer { padding-top: 56px; }
    .gvw-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 520px) {
    .gvw-section { padding: 64px 0; }
    .gvw-section__head { margin-bottom: 36px; }
    .gvw-services__grid { grid-template-columns: 1fr; }
    .gvw-process__grid { grid-template-columns: 1fr; }
    .gvw-testi { flex: 0 0 280px; padding: 22px; }
    .gvw-stats__grid { grid-template-columns: 1fr; gap: 28px; }
    .gvw-hero__actions { width: 100%; }
    .gvw-hero__actions .gvw-btn { flex: 1; }
    .gvw-logo__text small { display: none; }
    .gvw-glass--lg { width: 100%; margin-left: 0; }
    .gvw-glass--sm, .gvw-glass--xs { position: static; margin-top: 14px; }
    .gvw-cta__actions .gvw-btn { width: 100%; }

    /* Features bento → single column on mobile */
    .gvw-features__grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 16px;
    }
    .gvw-feature { min-height: 280px; }

    /* Form: tighter inputs on tiny screens, full-width submit */
    .gvw-form { --gvw-input-h: 48px; --gvw-stack-gap: 16px; }
    .gvw-form button[type="submit"] { min-height: 50px; }
    .gvw-form textarea { min-height: 120px; }
}

/* ==========================================================================
   22. Decorative Layers — premium visual accents reusable across sections
   ==========================================================================
   Drop a `<span class="gvw-deco gvw-deco--<kind> gvw-deco--<position>"></span>`
   anywhere inside a positioned parent and it floats behind the content.
   Sections automatically clip overflow so decorations only show inside.
   ------------------------------------------------------------------ */

/* Ensure every major section is the positioning context + clips decorations */
.gvw-section { overflow: hidden; }
.gvw-section > .gvw-container { position: relative; z-index: 2; }

/* Base for any decorative element */
.gvw-deco {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    display: block;
}

/* ---- Dot pattern ---- */
.gvw-deco--dots {
    width: 220px;
    height: 220px;
    background-image: radial-gradient(currentColor 1.4px, transparent 1.6px);
    background-size: 18px 18px;
    color: var(--gvw-blue-500);
    opacity: .22;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
}
.gvw-deco--dots-lg { width: 340px; height: 340px; }
.gvw-deco--dots-sm { width: 140px; height: 140px; }
.gvw-deco--dots-orange { color: var(--gvw-orange-500); }
.gvw-deco--dots-violet { color: var(--gvw-violet-500); }
.gvw-deco--dots-navy   { color: var(--gvw-navy-800); opacity: .14; }

/* ---- Gradient blob (soft colour wash) ---- */
.gvw-deco--blob {
    width: 360px; height: 360px;
    border-radius: 50%;
    filter: blur(110px);
    opacity: .35;
}
.gvw-deco--blob-blue   { background: var(--gvw-blue-500); }
.gvw-deco--blob-orange { background: var(--gvw-orange-500); opacity: .25; }
.gvw-deco--blob-violet { background: var(--gvw-violet-500); opacity: .25; }
.gvw-deco--blob-lg { width: 520px; height: 520px; }
.gvw-deco--blob-sm { width: 240px; height: 240px; }

/* ---- Big watermark numeral or word ---- */
.gvw-deco--text {
    font-family: var(--gvw-font-head);
    font-weight: 800;
    line-height: .82;
    font-size: clamp(8rem, 16vw, 16rem);
    letter-spacing: -.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(10,31,68,.07);
    user-select: none;
}

/* ---- Diagonal lines pattern ---- */
.gvw-deco--lines {
    width: 280px; height: 280px;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(10,31,68,.045) 0,
        rgba(10,31,68,.045) 1px,
        transparent 1px,
        transparent 12px
    );
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* ---- Soft grid pattern ---- */
.gvw-deco--grid {
    width: 100%; height: 100%; inset: 0;
    background-image:
        linear-gradient(rgba(10,31,68,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10,31,68,.04) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
}

/* ---- Subtle SVG glyph (quotes, plus signs etc) — set via background-image inline ---- */
.gvw-deco--ring {
    width: 200px; height: 200px;
    border-radius: 50%;
    border: 1.5px dashed rgba(59,130,246,.25);
    animation: gvwSpin 60s linear infinite;
}
@keyframes gvwSpin { to { transform: rotate(360deg); } }

/* ---- Position helpers ---- */
.gvw-deco--tl { top: -60px;  left: -60px;  }
.gvw-deco--tr { top: -60px;  right: -60px; }
.gvw-deco--bl { bottom: -60px; left: -60px;  }
.gvw-deco--br { bottom: -60px; right: -60px; }
.gvw-deco--cl { top: 50%; left: -100px; transform: translateY(-50%); }
.gvw-deco--cr { top: 50%; right: -100px; transform: translateY(-50%); }
.gvw-deco--tc { top: -60px; left: 50%; transform: translateX(-50%); }
.gvw-deco--bc { bottom: -60px; left: 50%; transform: translateX(-50%); }

/* ---- Section mesh-gradient overlay (used as a section background) ---- */
.gvw-bg-mesh      { background: var(--gvw-grad-mesh), var(--gvw-bg); }
.gvw-bg-mesh-soft { background: var(--gvw-grad-mesh), var(--gvw-bg-soft); }
.gvw-bg-cream     { background: var(--gvw-bg-cream); }

/* ---- Refined eyebrow with leading line accent ---- */
.gvw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.gvw-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gvw-blue-500), var(--gvw-orange-500));
}
.gvw-section__head .gvw-eyebrow {
    display: inline-flex;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Service card: premium corner accent ---- */
.gvw-service {
    background-image:
        radial-gradient(at 100% 0%, rgba(59,130,246,.06) 0px, transparent 60%);
}
.gvw-service__icon {
    position: relative;
    box-shadow: inset 0 -2px 0 rgba(59,130,246,.08), 0 8px 22px rgba(59,130,246,.10);
}
.gvw-service__icon::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 20px;
    border: 1px dashed rgba(59,130,246,.25);
    opacity: 0;
    transform: scale(.9);
    transition: opacity .4s var(--gvw-ease), transform .4s var(--gvw-ease);
}
.gvw-service:hover .gvw-service__icon::after {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(255,255,255,.45);
}

/* ---- Why-Choose-Us cards: gradient border on hover ---- */
.gvw-why__card {
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, rgba(59,130,246,.0), rgba(99,102,241,.0)) border-box;
    border: 1px solid var(--gvw-line);
    transition: transform .35s var(--gvw-ease), box-shadow .35s var(--gvw-ease), border-color .35s var(--gvw-ease), background .35s var(--gvw-ease);
}
.gvw-why__card:hover {
    background:
        linear-gradient(var(--gvw-bg-soft), var(--gvw-bg-soft)) padding-box,
        linear-gradient(135deg, rgba(59,130,246,.4), rgba(249,115,22,.4)) border-box;
    border-color: transparent;
}

/* ---- Process steps: connector glow + numbered watermark ---- */
.gvw-process__step {
    background:
        linear-gradient(180deg, #fff, var(--gvw-bg-soft)) padding-box;
    box-shadow: var(--gvw-shadow-sm);
    overflow: hidden;
    position: relative;
}
.gvw-process__step::before {
    content: attr(data-step);
    position: absolute;
    bottom: -30px;
    right: -8px;
    font-family: var(--gvw-font-head);
    font-weight: 800;
    font-size: 8rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(10,31,68,.05);
    pointer-events: none;
    z-index: 0;
}
.gvw-process__step > * { position: relative; z-index: 1; }

/* ---- Feature cards: subtle border ring on hover (image cards) ---- */
.gvw-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,.08);
    pointer-events: none;
    z-index: 3;
    transition: border-color .4s var(--gvw-ease);
}
.gvw-feature:hover::after { border-color: rgba(255,255,255,.25); }

/* ---- Testimonials: oversized background quote ---- */
.gvw-testimonials { position: relative; }
.gvw-testimonials .gvw-section__head { position: relative; z-index: 2; }
.gvw-testimonials::before {
    content: "“";
    position: absolute;
    top: -40px; left: 4%;
    font-family: var(--gvw-font-head);
    font-weight: 800;
    font-size: 22rem;
    line-height: 1;
    color: var(--gvw-blue-500);
    opacity: .07;
    pointer-events: none;
    z-index: 0;
}
.gvw-testi {
    background:
        linear-gradient(180deg, #fff 0%, var(--gvw-bg-soft) 100%);
    box-shadow: var(--gvw-shadow-elev);
}
.gvw-testi__quote { color: var(--gvw-orange-500); opacity: .35; }

/* ---- FAQ items: gradient hover state ---- */
.gvw-faq__item[open] {
    box-shadow: 0 10px 28px rgba(59,130,246,.1);
    border-color: var(--gvw-blue-500);
    background:
        linear-gradient(180deg, #ffffff, var(--gvw-blue-50));
}
.gvw-faq__item summary:hover { color: var(--gvw-blue-500); }

/* ---- Form section: premium framed background ---- */
.gvw-contact { position: relative; }
.gvw-form {
    background:
        radial-gradient(at 100% 0%, rgba(59,130,246,.05) 0px, transparent 40%),
        radial-gradient(at 0% 100%, rgba(249,115,22,.04) 0px, transparent 40%),
        #fff;
}

/* ---- About visual: extra orbital glow ---- */
.gvw-about__media-inner {
    box-shadow:
        var(--gvw-shadow-lg),
        0 0 0 1px rgba(255,255,255,.06) inset;
}

/* ---- Hero refinement: starfield dots over the grid ---- */
.gvw-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(10,31,68,.10) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 60%);
            mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 60%);
    opacity: .55;
}

/* ---- Section dividers — subtle gradient line at section starts ---- */
.gvw-section + .gvw-section { border-top: 1px solid transparent; }
.gvw-about::before,
.gvw-services::before,
.gvw-why::before,
.gvw-process::before,
.gvw-features::before,
.gvw-faq::before,
.gvw-contact::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    width: 120px; height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(59,130,246,.4), transparent);
    z-index: 1;
}

/* ---- Tighter responsive: scale watermark text on mobile ---- */
@media (max-width: 860px) {
    .gvw-deco--blob { filter: blur(80px); }
    .gvw-deco--blob, .gvw-deco--blob-lg { width: 300px; height: 300px; }
    .gvw-deco--dots, .gvw-deco--dots-lg { width: 180px; height: 180px; }
    .gvw-testimonials::before { font-size: 14rem; top: -20px; }
    .gvw-process__step::before { font-size: 6rem; bottom: -20px; }
}
@media (max-width: 520px) {
    .gvw-deco--blob, .gvw-deco--blob-lg { width: 220px; height: 220px; filter: blur(60px); }
    .gvw-testimonials::before { font-size: 10rem; }
}



input[type=email]{
 border: none !important;
}