/* ==========================================================================
   2S Technologies — brand refresh layer
   Loaded after Tailwind so it can refine the existing utility classes without
   requiring every page to be rewritten.
   ========================================================================== */

:root {
    --brand-indigo: #4C4CC8;
    --brand-indigo-dark: #35359B;
    --brand-indigo-light: #7A7AEA;
    --brand-navy: #1B2350;
    --brand-navy-deep: #121838;
    --brand-gold: #FFD700;
    --brand-gold-deep: #C79100;
    --ink: #101223;
    --ink-muted: #4A4F63;
    --surface: #F7F8FC;
    --hairline: #E4E7F2;

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 22px;
    --shadow-card: 0 1px 2px rgba(16, 18, 35, .04), 0 12px 28px -18px rgba(16, 18, 35, .28);
    --shadow-card-hover: 0 2px 4px rgba(16, 18, 35, .05), 0 26px 50px -24px rgba(27, 35, 80, .38);
    --shadow-gold: 0 10px 26px -12px rgba(199, 145, 0, .65);
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Typography -------------------------------------------------- */

body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .font-display {
    font-family: 'Satoshi', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
    letter-spacing: -.022em;
    line-height: 1.12;
}

h1 { letter-spacing: -.032em; }

p, li { letter-spacing: -.005em; }

.text-gray-600 { color: var(--ink-muted) !important; }
.text-gray-500 { color: #6B7185 !important; }

/* Numbers read better with tabular figures */
.text-3xl, .text-4xl, .text-5xl, .text-6xl {
    font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Shape language --------------------------------------------- */

.rounded-md { border-radius: var(--radius-sm) !important; }
.rounded-lg { border-radius: var(--radius) !important; }
.rounded-xl, .rounded-2xl { border-radius: var(--radius-lg) !important; }

/* ---------- Surfaces & cards ------------------------------------------- */

.bg-gray-50 { background-color: var(--surface) !important; }
.border-gray-200 { border-color: var(--hairline) !important; }

.border.border-gray-200.rounded-lg,
.border.border-gray-200.rounded-md {
    box-shadow: var(--shadow-card);
    background-clip: padding-box;
}

/* Any card that opted into a hover shadow now lifts as well */
[class*="hover:shadow-lg"] {
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease) !important;
}
[class*="hover:shadow-lg"]:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover) !important;
    border-color: rgba(76, 76, 200, .35) !important;
}

/* Icon tiles */
.bg-primary\/10 { background-color: rgba(76, 76, 200, .1) !important; }
.bg-coral\/10 {
    background-image: linear-gradient(140deg, rgba(255, 215, 0, .28), rgba(255, 215, 0, .08)) !important;
    background-color: transparent !important;
}
.bg-coral\/10 svg, .text-coral { color: var(--brand-gold-deep) !important; }

/* Gold text on dark backgrounds stays bright */
.bg-navy .text-coral,
[class*="from-navy"] .text-coral,
footer .text-coral,
.text-white ~ * .text-coral { color: var(--brand-gold) !important; }

/* ---------- Buttons ---------------------------------------------------- */

a[class*="bg-coral"], button[class*="bg-coral"] {
    background-image: linear-gradient(135deg, #FFE45C 0%, var(--brand-gold) 55%, #F1C400 100%) !important;
    color: var(--brand-navy-deep) !important;
    box-shadow: var(--shadow-gold);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease) !important;
}
a[class*="bg-coral"]:hover, button[class*="bg-coral"]:hover {
    transform: translateY(-2px);
    filter: saturate(1.06) brightness(1.03);
    box-shadow: 0 16px 34px -14px rgba(199, 145, 0, .8);
}

a[class*="bg-primary"]:not(.no-fx), button[class*="bg-primary"]:not(.no-fx) {
    background-image: linear-gradient(135deg, var(--brand-indigo-light) 0%, var(--brand-indigo) 55%, var(--brand-indigo-dark) 100%) !important;
    box-shadow: 0 10px 26px -14px rgba(76, 76, 200, .8);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease) !important;
}
a[class*="bg-primary"]:not(.no-fx):hover, button[class*="bg-primary"]:not(.no-fx):hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -16px rgba(76, 76, 200, .9);
}

/* ---------- Dark sections: richer, deeper gradients -------------------- */

[class*="from-navy"], .bg-navy {
    background-color: var(--brand-navy) !important;
}

section[class*="from-navy"] > .absolute.inset-0[class*="from-navy"],
section > .absolute.inset-0[class*="from-navy"] {
    background-image:
        radial-gradient(120% 90% at 12% 8%, rgba(122, 122, 234, .55) 0%, rgba(122, 122, 234, 0) 55%),
        radial-gradient(90% 80% at 88% 12%, rgba(255, 215, 0, .16) 0%, rgba(255, 215, 0, 0) 58%),
        linear-gradient(155deg, var(--brand-navy-deep) 0%, #1E2758 45%, #34348F 100%) !important;
}

/* Product / solution page heroes and CTA bands */
section.bg-navy,
section[class*="bg-gradient-to-r"][class*="from-navy"],
section[class*="bg-gradient-to-br"][class*="from-navy"] {
    background-image:
        radial-gradient(110% 95% at 8% 4%, rgba(122, 122, 234, .5) 0%, rgba(122, 122, 234, 0) 55%),
        radial-gradient(95% 85% at 92% 8%, rgba(255, 215, 0, .14) 0%, rgba(255, 215, 0, 0) 60%),
        linear-gradient(150deg, var(--brand-navy-deep) 0%, #1E2758 48%, #34348F 100%) !important;
}

.bg-navy .text-gray-400, [class*="from-navy"] .text-gray-400 { color: #C3C8DE !important; }
.bg-navy .text-gray-300, [class*="from-navy"] .text-gray-300 { color: #D7DBEC !important; }

/* ---------- Section eyebrow ------------------------------------------- */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-indigo);
}
.eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand-indigo), var(--brand-gold));
}
.eyebrow-light { color: #C9CCF5; }
.eyebrow-light::before { background: linear-gradient(90deg, var(--brand-gold), rgba(255, 215, 0, .2)); }

/* ---------- Pills, glass, gradient text -------------------------------- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .85rem;
    font-size: .8125rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .1);
    color: #EEF0FF;
    backdrop-filter: blur(6px);
}

.glass {
    background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(14px);
    box-shadow: 0 30px 60px -30px rgba(8, 11, 30, .8);
}

.grad-text {
    background: linear-gradient(100deg, #FFE97A 0%, var(--brand-gold) 42%, #C4C4FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.grad-rule {
    height: 3px;
    border: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--brand-indigo), var(--brand-gold) 60%, transparent);
}

/* Subtle dotted texture for light sections */
.dotted {
    background-image: radial-gradient(rgba(76, 76, 200, .14) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* ---------- Navigation ------------------------------------------------- */

.nav-link {
    position: relative;
    padding: .55rem .9rem;
    border-radius: 999px;
    font-weight: 500;
    color: #2B3050;
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav-link:hover { background: rgba(76, 76, 200, .08); color: var(--brand-indigo-dark); }
.nav-link.is-active { background: rgba(76, 76, 200, .1); color: var(--brand-indigo-dark); font-weight: 600; }

.menu-panel {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px -28px rgba(16, 18, 35, .35);
    overflow: hidden;
}
.menu-item {
    display: flex;
    gap: .75rem;
    padding: .7rem .9rem;
    border-radius: var(--radius-sm);
    transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.menu-item:hover { background: rgba(76, 76, 200, .07); }
.menu-dot {
    margin-top: .35rem;
    width: .5rem;
    height: .5rem;
    flex: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-indigo-light), var(--brand-indigo));
}

/* ---------- Reveal on scroll ------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(14px);
}
.reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
    [class*="hover:shadow-lg"]:hover,
    a[class*="bg-coral"]:hover, a[class*="bg-primary"]:hover { transform: none !important; }
    html { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; }

::selection { background: rgba(76, 76, 200, .18); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--brand-indigo);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Video frames */
video { display: block; width: 100%; }

/* Soften the decorative hero texture so the underlying artwork stays abstract */
section > .absolute.inset-0.bg-cover { filter: blur(3px) saturate(.6); }