:root {
    --brand-primary: #00A5A5;
    --brand-secondary: #0891b2;
    --brand-accent: #FF7B3D;
    --brand-navy: #0A2342;
    --logo: #495057;
    --bg: #f6f8fb;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #475569;
    --line: #E5EAF2;
    --radius: 14px;
    --shadow-1: 0 6px 18px rgba(0,0,0,.06);
    --shadow-2: 0 10px 30px rgba(2,132,199,.08);
    --ink-blue: 37,99,235; /* vivid blue */
    --ink-red: 220,38,38; /* intense red */
    --ink-teal: 20,184,166; /* punchy teal */
    --text: 17,24,39; /* neutral-900 */
    --muted: 75,85,99; /* neutral-600 */
    --border: 229,231,235; /* neutral-200 */
    --panel: 255,255,255; /* white */
    --shadow: 0 8px 30px rgba(0,0,0,.06);
    --radius: 16px;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: linear-gradient(180deg, #f8fafc 0%, var(--bg) 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.header {
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,.75);
    border-bottom: 1px solid rgba(15,23,42,.06);
    transition: box-shadow .2s ease, background-color .2s ease;
}

    .header.scrolled {
        box-shadow: var(--shadow-1);
        background: rgba(255,255,255,.85);
    }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
}

.nav a {
    margin-left: 24px;
    color: #334155;
    text-decoration: none;
    position: relative;
}

    .nav a:hover {
        color: var(--text);
    }

    .nav a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -8px;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg,var(--brand-primary),var(--brand-secondary));
        transition: width .2s;
    }

    .nav a:hover::after {
        width: 100%;
    }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    user-select: none;
}

    .btn:active {
        transform: translateY(1px);
    }

.btn-primary {
    color: #fff;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
    box-shadow: var(--shadow-2);
}

    .btn-primary:hover {
        filter: saturate(1.05) brightness(1.02);
    }

.btn-outline {
    border: 1px solid #dbe4ef;
    color: var(--text);
    background: #fff;
}

    .btn-outline:hover {
        background: #f8fafc;
    }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fffbeb;
    color: #92400e;
    font-size: 12px;
    box-shadow: 0 1px 0 rgba(0,0,0,.04) inset;
}

.logo {
    height: 28px;
    width: auto;
}

.hero {
    padding: 72px 0;
}

.grid {
    display: grid;
    gap: 24px;
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    transform: translateZ(0);
}

    .card:hover {
        box-shadow: 0 12px 36px rgba(0,0,0,.08);
    }

.p {
    padding: 18px;
}

.stat {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.02em;
}

.stat-sub {
    color: #64748b;
    font-size: 12px;
    margin-top: 6px;
}

.section {
    padding: 64px 0;
}

.section-muted {
    background: #f1f5f9;
}

.footer {
    padding: 40px 0;
    background: #fff;
    border-top: 1px solid var(--line);
}

.table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
}

    .table th, .table td {
        text-align: left;
        padding: 12px 16px;
        border-bottom: 1px solid var(--line);
    }

    .table tr:hover td {
        background: #f8fafc;
    }

.gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

    .gallery img {
        width: 100%;
        height: 110px;
        object-fit: cover;
        border-radius: 12px;
        border: 1px solid var(--line);
        transition: transform .25s ease, box-shadow .25s ease;
    }

        .gallery img:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-1);
        }

/* Reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s ease, transform .6s ease;
}

    .reveal.in {
        opacity: 1;
        transform: none;
    }

/* Form validation styles */
.error-message {
    transition: all 0.2s ease-in-out;
}

input.border-red-500,
textarea.border-red-500,
select.border-red-500 {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

    input.border-red-500:focus,
    textarea.border-red-500:focus,
    select.border-red-500:focus {
        outline: none;
        ring-color: #ef4444;
        border-color: #ef4444;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
    }

/* Valid field styling */
input:valid:not(:placeholder-shown),
textarea:valid:not(:placeholder-shown),
select:valid {
    border-color: #10b981;
}

/* Focus styling for form fields */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

/* Form button states */
button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Minimal prefers-reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        transition: none;
        transform: none;
        opacity: 1;
    }

    .btn {
        transition: none;
    }

    .error-message {
        transition: none;
    }
}

@media (max-width: 900px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }

    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* --- Top background spanning header + hero --- */
.top-ink {
    position: absolute;
    inset: 0 0 auto 0;
    height: 52rem;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(60% 60% at 20% 20%, rgba(var(--ink-blue),0.90) 0%, rgba(var(--ink-blue),0) 56%), radial-gradient(60% 60% at 80% 12%, rgba(var(--ink-red),0.70) 0%, rgba(var(--ink-red),0) 58%), radial-gradient(70% 70% at 42% 32%, rgba(var(--ink-teal),0.65) 0%, rgba(var(--ink-teal),0) 60%);
}

.top-ink-wipe {
    position: absolute;
    left: -40px;
    right: 0;
    bottom: -96px;
    height: 14rem;
    transform: rotate(-8deg);
    transform-origin: left;
    background: #fff;
    opacity: 0.5;
}

.reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s ease,transform .6s ease
}

    .reveal.in {
        opacity: 1;
        transform: none
    }





details > summary::-webkit-details-marker {
    display: none;
}

details > summary::marker {
    content: '';
}

.hero-general {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1422 800' opacity='0.05'><g stroke-width='3.5' stroke='hsl(243,83%25,54%25)' fill='none' stroke-linecap='butt'><line x1='0' y1='0' x2='122' y2='122' opacity='0.40'/><line x1='244' y1='0' x2='122' y2='122' opacity='0.99'/><line x1='366' y1='0' x2='244' y2='122' opacity='0.96'/><line x1='366' y1='0' x2='488' y2='122' opacity='0.63'/><line x1='488' y1='0' x2='610' y2='122' opacity='0.38'/><line x1='732' y1='0' x2='610' y2='122' opacity='0.22'/><line x1='732' y1='0' x2='854' y2='122' opacity='0.80'/><line x1='854' y1='0' x2='976' y2='122' opacity='0.56'/><line x1='1098' y1='0' x2='976' y2='122' opacity='0.88'/><line x1='1098' y1='0' x2='1220' y2='122' opacity='0.90'/><line x1='1342' y1='0' x2='1220' y2='122' opacity='0.53'/><line x1='1464' y1='0' x2='1342' y2='122' opacity='0.43'/><line x1='122' y1='122' x2='0' y2='244' opacity='0.37'/><line x1='244' y1='122' x2='122' y2='244' opacity='0.12'/><line x1='366' y1='122' x2='244' y2='244' opacity='0.17'/><line x1='366' y1='122' x2='488' y2='244' opacity='0.14'/><line x1='488' y1='122' x2='610' y2='244' opacity='0.20'/><line x1='610' y1='122' x2='732' y2='244' opacity='0.44'/><line x1='854' y1='122' x2='732' y2='244' opacity='0.72'/><line x1='854' y1='122' x2='976' y2='244' opacity='0.83'/><line x1='976' y1='122' x2='1098' y2='244' opacity='0.26'/><line x1='1220' y1='122' x2='1098' y2='244' opacity='0.28'/><line x1='1342' y1='122' x2='1220' y2='244' opacity='0.90'/><line x1='1464' y1='122' x2='1342' y2='244' opacity='0.43'/><line x1='0' y1='244' x2='122' y2='366' opacity='0.33'/><line x1='122' y1='244' x2='244' y2='366' opacity='0.48'/><line x1='244' y1='244' x2='366' y2='366' opacity='0.65'/><line x1='366' y1='244' x2='488' y2='366' opacity='0.32'/><line x1='488' y1='244' x2='610' y2='366' opacity='0.87'/><line x1='610' y1='244' x2='732' y2='366' opacity='0.38'/><line x1='854' y1='244' x2='732' y2='366' opacity='0.95'/><line x1='976' y1='244' x2='854' y2='366' opacity='0.33'/><line x1='976' y1='244' x2='1098' y2='366' opacity='0.28'/><line x1='1098' y1='244' x2='1220' y2='366' opacity='0.78'/><line x1='1342' y1='244' x2='1220' y2='366' opacity='0.99'/><line x1='1464' y1='244' x2='1342' y2='366' opacity='0.52'/><line x1='122' y1='366' x2='0' y2='488' opacity='0.98'/><line x1='244' y1='366' x2='122' y2='488' opacity='0.08'/><line x1='244' y1='366' x2='366' y2='488' opacity='0.99'/><line x1='488' y1='366' x2='366' y2='488' opacity='0.25'/><line x1='488' y1='366' x2='610' y2='488' opacity='0.49'/><line x1='732' y1='366' x2='610' y2='488' opacity='0.90'/><line x1='854' y1='366' x2='732' y2='488' opacity='0.12'/><line x1='976' y1='366' x2='854' y2='488' opacity='0.24'/><line x1='976' y1='366' x2='1098' y2='488' opacity='0.78'/><line x1='1220' y1='366' x2='1098' y2='488' opacity='0.61'/><line x1='1342' y1='366' x2='1220' y2='488' opacity='0.29'/><line x1='1342' y1='366' x2='1464' y2='488' opacity='0.26'/><line x1='0' y1='488' x2='122' y2='610' opacity='0.16'/><line x1='244' y1='488' x2='122' y2='610' opacity='0.26'/><line x1='244' y1='488' x2='366' y2='610' opacity='0.57'/><line x1='366' y1='488' x2='488' y2='610' opacity='0.67'/><line x1='488' y1='488' x2='610' y2='610' opacity='0.30'/><line x1='732' y1='488' x2='610' y2='610' opacity='0.88'/><line x1='854' y1='488' x2='732' y2='610' opacity='0.84'/><line x1='976' y1='488' x2='854' y2='610' opacity='0.30'/><line x1='1098' y1='488' x2='976' y2='610' opacity='1.00'/><line x1='1220' y1='488' x2='1098' y2='610' opacity='0.90'/><line x1='1342' y1='488' x2='1220' y2='610' opacity='0.91'/><line x1='1342' y1='488' x2='1464' y2='610' opacity='0.45'/><line x1='0' y1='610' x2='122' y2='732' opacity='0.18'/><line x1='122' y1='610' x2='244' y2='732' opacity='0.78'/><line x1='366' y1='610' x2='244' y2='732' opacity='0.65'/><line x1='488' y1='610' x2='366' y2='732' opacity='0.90'/><line x1='488' y1='610' x2='610' y2='732' opacity='0.28'/><line x1='732' y1='610' x2='610' y2='732' opacity='0.51'/><line x1='854' y1='610' x2='732' y2='732' opacity='0.26'/><line x1='976' y1='610' x2='854' y2='732' opacity='0.62'/><line x1='1098' y1='610' x2='976' y2='732' opacity='0.37'/><line x1='1098' y1='610' x2='1220' y2='732' opacity='0.18'/><line x1='1220' y1='610' x2='1342' y2='732' opacity='0.30'/><line x1='1464' y1='610' x2='1342' y2='732' opacity='0.24'/><line x1='0' y1='732' x2='122' y2='854' opacity='0.42'/><line x1='244' y1='732' x2='122' y2='854' opacity='0.55'/><line x1='366' y1='732' x2='244' y2='854' opacity='0.74'/><line x1='488' y1='732' x2='366' y2='854' opacity='0.90'/><line x1='488' y1='732' x2='610' y2='854' opacity='0.32'/><line x1='732' y1='732' x2='610' y2='854' opacity='0.49'/><line x1='732' y1='732' x2='854' y2='854' opacity='0.41'/><line x1='976' y1='732' x2='854' y2='854' opacity='0.29'/><line x1='1098' y1='732' x2='976' y2='854' opacity='0.20'/><line x1='1098' y1='732' x2='1220' y2='854' opacity='0.93'/><line x1='1342' y1='732' x2='1220' y2='854' opacity='0.97'/><line x1='1342' y1='732' x2='1464' y2='854' opacity='0.95'/></g></svg>");
}

.bg-texture {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%2300A5A5' fill-opacity='0.5'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E");
}

.hero-wave {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%2300A5A5' fill-opacity='0.5'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E");
}

.section-with-waves {
    background-image: url("data:image/svg+xml;utf8,\
        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800' fill='none'>\
        <path d='M0 0 C180 120 340 60 500 200 C680 360 800 80 1000 300 C1200 520 1320 180 1480 460 C1550 600 1580 720 1600 800' stroke='%23C0C0C0' stroke-width='16' stroke-linecap='round' opacity='0.1'/>\
        <path d='M0 0 C200 160 380 20 540 180 C720 360 860 100 1060 320 C1240 540 1380 220 1520 520 C1560 640 1580 720 1600 800' stroke='%23E8E8E8' stroke-width='4' stroke-linecap='round' opacity='0.3'/>\
        </svg>");
    background-repeat: no-repeat;
    background-position: center;
}

.hero-bg-about {
    background: radial-gradient( 900px 500px at 10% 0%, rgba(37,99,235,0.4) 0%, rgba(37,99,235,0.0) 40% ), radial-gradient(700px 400px at 90% 15%, #a34beb, transparent), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.hero-bg-career {
    background: radial-gradient( 900px 500px at 30% 0%, rgba(79,70,229,0.4) 0%, rgba(79,70,229,0.0) 40% ), radial-gradient(700px 400px at 90% 10%, rgba(220,38,38,0.6), transparent), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.hero-bg-case-studies {
    background: radial-gradient( 900px 500px at 30% 0%, rgba(79,70,229,0.4) 0%, rgba(79,70,229,0.0) 40% ), radial-gradient(700px 400px at 90% 10%, #a34beb, transparent), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.hero-bg-case-study {
    background: radial-gradient( 900px 500px at 30% 0%, rgba(79,70,229,0.4) 0%, rgba(79,70,229,0.0) 40% ), radial-gradient(700px 400px at 90% 10%, #a34beb, transparent), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.hero-bg-contact-demo {
    background: radial-gradient( 900px 500px at 30% 0%, rgba(79,70,229,0.4) 0%, rgba(79,70,229,0.0) 40% ), radial-gradient(700px 400px at 90% 10%, #00d4ff, transparent), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.hero-bg-contact-support {
    background: radial-gradient( 900px 500px at 30% 0%, rgba(79,70,229,0.4) 0%, rgba(79,70,229,0.0) 40% ), radial-gradient(700px 400px at 90% 10%, #00d4ff, transparent), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.hero-bg-faq {
    background: radial-gradient( 900px 500px at 30% 0%, rgba(20,184,166,0.4) 0%, rgba(20,184,166,0.0) 40% ), radial-gradient(700px 400px at 90% 10%, #00d4ff, transparent), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.hero-bg-features {
    background: radial-gradient( 900px 500px at 10% 0%, rgba(220, 38, 38,0.4) 0%, rgba(220, 38, 38,0.0) 40% ), radial-gradient(700px 400px at 90% 20%, #00d4ff, transparent), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.hero-bg-pricing {
    background: radial-gradient( 900px 500px at 30% 0%, rgba(79,70,229,0.4) 0%, rgba(79,70,229,0.0) 40% ), radial-gradient(700px 400px at 90% 10%, #00d4ff, transparent), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.hero-bg-solutions {
    background: radial-gradient( 900px 500px at 10% 0%, rgba(79,70,229,0.4) 0%, rgba(79,70,229,0.0) 40% ), radial-gradient(700px 400px at 90% 20%, #00d4ff, transparent), linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}