/* ==========================================================================
   NIVORA SYSTEM: site-wide design layer
   Loaded LAST in the layout (after every page's own markup), so it wins over
   the older template rules in style.min.css at equal specificity.
   Covers every page that uses the shared components: inner-page heroes,
   section headers, cards, icon tiles, pricing tables, FAQ accordions,
   buttons and forms. The home page has its own scoped refinements
   (nivora-home.css) that build on these tokens.
   Palette: violet (primary) + cyan (accent). Blue and orange are not used.
   ========================================================================== */

:root {
    --nv-ink: #0F172A;
    --nv-body: #334155;
    --nv-muted: #64748B;
    --nv-violet: #4F46E5;
    --nv-violet-2: #6366F1;
    --nv-violet-3: #8B5CF6;
    --nv-cyan: #0891B2;
    --nv-cyan-2: #06B6D4;
    --nv-tint: #F8FAFF;
    --nv-line: #E2E8F0;
    --nv-radius: 20px;
    --nv-grad: linear-gradient(135deg, #4F46E5 0%, #8B5CF6 55%, #06B6D4 100%);
    --nv-grad-soft: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(6, 182, 212, 0.12));
    --nv-shadow: 0 18px 40px -22px rgba(79, 70, 229, 0.3);
}

/* ---------- Base typography ---------- */

body {
    color: var(--nv-body);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--nv-ink);
    letter-spacing: -0.02em;
}

.text-shimmer,
.banner-highlight {
    background: linear-gradient(90deg, #4F46E5, #06B6D4, #8B5CF6, #4F46E5);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-shimmer {
    animation: nv-sys-shimmer 6s linear infinite;
}

@keyframes nv-sys-shimmer {
    to { background-position: 220% center; }
}

/* ---------- Section rhythm and headers ---------- */

section.section {
    padding-top: clamp(64px, 8vw, 104px);
    padding-bottom: clamp(64px, 8vw, 104px);
    position: relative;
}

section.bg-light,
section.bg-light-gray {
    background-color: var(--nv-tint);
}

.section-header {
    max-width: 760px;
    margin: 0 auto 56px;
}

.section-title {
    font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.section-subtitle {
    color: var(--nv-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

.hero-pill-badge,
.pkg-section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.38rem 0.95rem;
    border-radius: 999px;
    background: rgba(79, 70, 229, 0.08);
    border: 1px solid rgba(79, 70, 229, 0.18);
    color: var(--nv-violet);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ---------- Inner-page heroes (banner-section on ~37 pages) ---------- */

.banner-section,
.s2proj-hero-sec,
.sms-hero-section {
    position: relative;
    overflow: hidden;
    padding: clamp(96px, 11vw, 150px) 0 clamp(72px, 8vw, 110px);
    background:
        radial-gradient(900px 500px at 8% -10%, rgba(99, 102, 241, 0.18), transparent 60%),
        radial-gradient(800px 500px at 100% 0%, rgba(6, 182, 212, 0.16), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

.banner-section::after,
.s2proj-hero-sec::after,
.sms-hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 25% 30%, #000 20%, transparent 70%);
    mask-image: radial-gradient(ellipse at 25% 30%, #000 20%, transparent 70%);
}

.banner-section .title {
    font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--nv-ink);
}

.banner-sub-text {
    font-size: 1.12rem;
    line-height: 1.75;
    color: var(--nv-muted);
    max-width: 640px;
}

.banner-section .container,
.s2proj-hero-sec .container,
.sms-hero-section .container {
    position: relative;
    z-index: 1;
}

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

.btn-primary-gradient {
    background: var(--nv-grad);
    border: 0;
    color: #FFFFFF;
    box-shadow: 0 14px 28px -12px rgba(79, 70, 229, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary-gradient:hover {
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 20px 36px -14px rgba(79, 70, 229, 0.7);
}

.btn-secondary {
    background: #FFFFFF;
    color: var(--nv-violet);
    border: 1px solid rgba(79, 70, 229, 0.25);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.btn-secondary:hover {
    background: var(--nv-violet);
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* ---------- Cards ---------- */

.sco-card,
.sp-item,
.wc-card,
.tech-item {
    background: #FFFFFF;
    border: 1px solid var(--nv-line);
    border-radius: var(--nv-radius);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}

.sco-card,
.sp-item,
.wc-card {
    padding: 28px;
}

.tech-item {
    padding: 18px;
}

.sco-card:hover,
.sp-item:hover,
.wc-card:hover,
.tech-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--nv-shadow);
    border-color: rgba(79, 70, 229, 0.3);
}

.sco-card h4,
.sp-item h4,
.wc-card h4,
.wc-card h3,
.wc-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
}

/* Icon tiles: one gradient style everywhere so no icon colour clashes */
.sco-icon,
.wc-icon,
.icon-box {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--nv-grad);
    color: #FFFFFF;
    font-size: 1.35rem;
    box-shadow: 0 12px 26px -10px rgba(79, 70, 229, 0.55);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sco-card:hover .sco-icon,
.wc-card:hover .wc-icon,
.wc-card:hover .icon-box {
    transform: rotate(-6deg) scale(1.08);
}

.sp-icon-box,
.tech-icon-wrap {
    background: var(--nv-grad-soft);
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sp-icon-box {
    width: 72px;
    height: 72px;
    padding: 14px;
}

.tech-icon-wrap {
    width: 56px;
    height: 56px;
}

.sp-item:hover .sp-icon-box,
.tech-item:hover .tech-icon-wrap {
    transform: scale(1.08);
}

.tech-item span {
    font-weight: 600;
    color: var(--nv-ink);
}

/* ---------- Pricing tables ---------- */

.pkg-row {
    border-bottom: 1px solid var(--nv-line);
    transition: background-color 0.25s ease;
}

.pkg-row:hover {
    background-color: var(--nv-tint);
}

.pkg-feat {
    font-weight: 600;
    color: var(--nv-ink);
}

.pkg-val {
    color: var(--nv-body);
}

.pkg-col-platinum {
    background: var(--nv-grad-soft);
    color: var(--nv-violet);
    font-weight: 700;
}

.pkg-yes {
    color: var(--nv-cyan-2);
}

.pkg-no {
    color: #CBD5E1;
}

/* ---------- FAQ accordions ---------- */

.accordion-item {
    border: 1px solid var(--nv-line);
    border-radius: 16px !important;
    margin-bottom: 14px;
    background: #FFFFFF;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.accordion-item:hover {
    border-color: rgba(79, 70, 229, 0.3);
    box-shadow: 0 10px 24px -18px rgba(79, 70, 229, 0.4);
}

.accordion-button {
    font-weight: 700;
    color: var(--nv-ink);
    padding: 20px 24px;
    text-decoration: none;
}

.accordion-button:not(.collapsed) {
    color: var(--nv-violet);
    background: var(--nv-grad-soft);
}

.accordion-body,
.accordion-content {
    color: var(--nv-muted);
    line-height: 1.75;
}

/* ---------- Forms ---------- */

.form-control,
.form-select {
    border-radius: 12px;
    border-color: var(--nv-line);
    padding: 0.75rem 1rem;
}

/* ---------- Scroll reveal ----------
   Hidden only when JS has run (html.nv-js), so content never disappears
   without JavaScript or for users who prefer reduced motion. */

html.nv-js .nv-reveal:not(.nv-in) {
    opacity: 0;
    transform: translateY(24px);
}

html.nv-js .nv-reveal {
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Reduced motion ---------- */

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

    .sco-card,
    .sp-item,
    .wc-card,
    .tech-item,
    .sco-icon,
    .wc-icon,
    .icon-box,
    .sp-icon-box,
    .tech-icon-wrap,
    .btn-primary-gradient,
    .btn-secondary,
    .accordion-item {
        transition: none;
    }

    .sco-card:hover,
    .sp-item:hover,
    .wc-card:hover,
    .tech-item:hover,
    .btn-primary-gradient:hover,
    .btn-secondary:hover {
        transform: none;
    }
}