/*
Theme Name: SHUMICO B2G Dark X
Theme URI: https://shumico.com.ua/
Author: SHUMICO Tech
Description: Dark X — warm purple-black, indigo-violet-rose gradients. Framer template inspired.
Version: 2.0.0
*/

/* ==========================================================================
   DESIGN TOKENS — Warm purple-dark / indigo-violet-rose accent system
   ========================================================================== */
:root {
  /* Backgrounds — warm purple-black, NOT cold blue-black */
  --bg-color: #13111a;
  --bg-secondary: #1d1a27;
  --bg-tertiary: #252131;
  --bg-card: rgb(29, 26, 39);

  /* Text — purple-tinted whites, not neutral greys */
  --text-main: #b7b4c7;
  --text-muted: #6d758f;
  --text-heading: #f5f4fa;

  /* Accent — indigo · violet · rose system */
  --accent-primary: #8869e6;
  --accent-pink: #ff6795;
  --accent-indigo: #696afc;
  --accent-hover: #a48cff;

  /* Signature gradients */
  --gradient-accent: linear-gradient(90deg, #6f86ff 0%, #b372ce 52%, #ff7586 100%);
  --gradient-cta: linear-gradient(90deg, #ff3868 0%, #714dff 100%);
  --gradient-cta-alt: linear-gradient(110deg, #ff4b81 0%, #4f56ff 100%);
  --gradient-text: linear-gradient(90deg, #6f86ff 0%, #b372ce 52%, #ff7586 100%);
  --gradient-border: linear-gradient(90deg, rgba(111,134,255,0.55) 0%, rgba(179,114,206,0.55) 52%, rgba(255,117,134,0.55) 100%);

  /* Glass / surfaces */
  --glass-bg: rgba(19, 17, 26, 0.88);
  --glass-border: rgba(255, 255, 255, 0.06);
  --card-border: rgba(48, 44, 63, 0.55);

  /* Shadows — clean, no heavy glow */
  --shadow-card: 0px 5px 14px 0px rgba(0, 0, 0, 0.18);
  --shadow-btn: 0px 3px 7px 0px rgba(19, 17, 26, 0.3);
  --shadow-deep: 0 24px 64px rgba(0, 0, 0, 0.5);
  --glow-shadow: 0 12px 48px -8px color-mix(in srgb, var(--accent-primary) 28.000000000000004%, transparent);
  --inset-ring: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  --inset-ring-hover: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.06);

  /* Border radii — generous roundness, Framer-style */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Easing */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* ==========================================================================
   BASE RESET & BODY
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-color);
    /* Warm violet radial glows — Framer warmth, not cold blue */
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--accent-primary) 16%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 55% 40% at 8% 115%,  rgba(105, 106, 252, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 92% 90%,  rgba(255, 103, 149, 0.06) 0%, transparent 55%);
    background-attachment: fixed;
    color: var(--text-main);
    line-height: 1.7;
    display: flex; flex-direction: column; min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body::after { display: none; }

.site-main { flex: 1; display: flex; flex-direction: column; }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-heading);
    font-family: 'Onest', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    line-height: 1.1;
}

/* Gradient text — the signature Framer accent */
.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

a { color: var(--text-heading); text-decoration: none; transition: color 0.25s var(--ease-smooth); }
a:hover { color: var(--accent-hover); }

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */
.container { padding: 0 6%; margin: 0 auto; max-width: 1200px; width: 100%; }
.section { padding: 120px 0; }
.section-title { text-align: center; font-size: 3.5rem; margin-bottom: 60px; font-weight: 700; letter-spacing: -0.01em; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    padding: max(20px, env(safe-area-inset-top)) 0 20px 0;
    transition: background-color 0.35s var(--ease-smooth), border-color 0.35s var(--ease-smooth),
                backdrop-filter 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth);
}

.site-header.scrolled {
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    background-color: var(--glass-bg);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 24px rgba(0, 0, 0, 0.3);
}

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

/* Logo — plain white wordmark */
.site-logo {
    font-size: 1.6rem;
    font-weight: 700;
    font-family: 'Onest', 'Inter', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-heading);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
}

.site-logo img { -webkit-text-fill-color: initial; }



.main-nav ul { display: flex; gap: 40px; list-style: none; }
.main-nav a { color: var(--text-main); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.01em; }
.main-nav a:hover { color: var(--text-heading); }

/* ==========================================================================
   BUTTONS — pill-shaped, rose→indigo gradient for primary
   ========================================================================== */
.btn {
    display: inline-flex; justify-content: center; align-items: center;
    padding: 13px 28px;
    background-color: var(--bg-tertiary);
    color: var(--text-heading);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-family: 'Onest', 'Inter', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    border: 1px solid var(--card-border);
    cursor: pointer;
    transition: all 0.28s var(--ease-spring);
    position: relative;
    box-shadow: var(--shadow-btn);
}

.btn:hover {
    background-color: var(--bg-card);
    border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
    transform: translateY(-1px);
    color: var(--text-heading);
}

/* Primary — gradient-border pill (Framer "Get started" style) */
.btn-primary {
    background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                var(--gradient-accent) border-box;
    color: var(--text-heading);
    border: 1px solid transparent;
    box-shadow: var(--shadow-btn);
}

.btn-primary::before { display: none; }

.btn-primary:hover {
    background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
                var(--gradient-accent) border-box;
    border: 1px solid transparent;
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn), 0 8px 24px color-mix(in srgb, var(--accent-primary) 22%, transparent);
    color: var(--text-heading);
    filter: none;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-heading);
}

.btn-outline::before { display: none; }

.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: color-mix(in srgb, var(--accent-primary) 25%, transparent);
    transform: none; box-shadow: none; color: #fff;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
    text-align: center;
    padding: 170px 0 110px;
    background:
        radial-gradient(ellipse 90% 65% at 50% -5%,  color-mix(in srgb, var(--accent-primary) 14.000000000000002%, transparent) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 15% 105%, rgba(105, 106, 252, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse 40% 35% at 85% 100%, rgba(255, 103, 149, 0.06) 0%, transparent 50%);
}

/* Badge — gradient-bordered pill */
.hero-badge {
    display: inline-flex;
    align-items: center; gap: 8px;
    padding: 5px 16px 5px 8px;
    border-radius: var(--radius-full);
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
    color: var(--accent-hover);
    margin-bottom: 28px;
    /* Gradient border technique */
    background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
                var(--gradient-accent) border-box;
    border: 1px solid transparent;
}

.hero-badge::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    /* Gradient dot */
    background: var(--gradient-cta);
    flex-shrink: 0;
    animation: pulse-dot 2.5s ease infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

.hero-title {
    font-size: clamp(3.5rem, 7vw, 6rem);
    margin-bottom: 28px;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.hero-subtitle {
    font-size: 1.2rem;
    max-width: 560px;
    margin: 0 auto 52px;
    color: var(--text-main);
    font-weight: 400; line-height: 1.76;
}

.hero-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* About section */
.about-section { background-color: var(--bg-secondary); border-top: 1px solid var(--glass-border); }
.about-container { max-width: 800px; text-align: center; }
.about-title { font-size: 2.5rem; margin-bottom: 24px; }
.about-text { font-size: 1.15rem; color: var(--text-main); line-height: 1.8; }

.trust-stats-wrap { margin-top: 60px; }
.trust-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.trust-stat-card {
    padding: 36px 28px 32px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-card);
    text-align: left;
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth);
}

.trust-stat-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent-primary) 28.000000000000004%, transparent);
    box-shadow: var(--shadow-card), 0 14px 40px rgba(0,0,0,0.28);
}

.trust-stat-number {
    font-size: 3.8rem;
    font-weight: 800;
    font-family: 'Onest', sans-serif;
    line-height: 1;
    margin-bottom: 14px;
    color: var(--text-heading);
    letter-spacing: -0.02em;
}

/* The "+" / "%" suffix */
.trust-stat-number .stat-suffix {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    font-weight: 800;
}

.trust-stat-label {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 400;
    line-height: 1.4;
}

/* ==========================================================================
   GRID / CARDS
   ========================================================================== */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }

.card {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 30px;
    transition: transform 0.32s var(--ease-spring), box-shadow 0.32s var(--ease-smooth), border-color 0.32s var(--ease-smooth);
    display: flex; flex-direction: column;
    position: relative;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    border: 1px solid var(--card-border);
}

.card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent-primary) 6%, transparent) 0%, transparent 45%);
    opacity: 0;
    transition: opacity 0.32s var(--ease-smooth);
    pointer-events: none;
    border-radius: inherit;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card), 0 14px 42px rgba(0,0,0,0.32), 0 0 0 1px color-mix(in srgb, var(--accent-primary) 22%, transparent);
    border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

.card:hover::before { opacity: 1; }
.card:hover .card-img { transform: scale(1.05); }

.featured-solutions-section { background-color: var(--bg-secondary); border-top: 1px solid var(--glass-border); }
.featured-solutions-section .grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (max-width: 900px) { .featured-solutions-section .grid { grid-template-columns: 1fr; } }

/* Framer Article Card (Portfolio/Solutions) */
.framer-article-card {
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden; text-decoration: none;
    transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth);
}
.framer-article-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card), 0 14px 42px rgba(0,0,0,0.32);
    border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
}
.framer-card-img {
    height: 250px; background-size: cover; background-position: center;
    position: relative; border-bottom: 1px solid var(--card-border);
    transition: transform 0.55s var(--ease-spring), filter 0.4s var(--ease-smooth);
    filter: saturate(0.9) contrast(1.03);
}
.framer-article-card:hover .framer-card-img { filter: saturate(1.1) contrast(1.05); transform: scale(1.03); }

.framer-card-badge {
    position: absolute; top: 16px; right: 16px;
    background: rgba(10, 10, 15, 0.7);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: var(--text-heading); padding: 6px 14px;
    border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--glass-border);
}
.framer-card-badge svg { width: 14px; height: 14px; color: var(--text-main); }

.framer-card-content { padding: 32px; display: flex; flex-direction: column; flex: 1; }
.framer-card-title {
    font-size: 1.5rem; color: var(--text-heading); margin: 0 0 16px 0;
    letter-spacing: -0.02em; line-height: 1.3;
}
.framer-card-meta {
    display: flex; align-items: center; gap: 20px;
    color: var(--text-muted); font-size: 0.85rem; margin-bottom: 30px;
}
.framer-card-meta span { display: flex; align-items: center; gap: 6px; }
.framer-card-meta svg { width: 14px; height: 14px; color: var(--text-main); }

.framer-read-more {
    margin-top: auto; display: flex; align-items: center; gap: 8px;
    color: var(--text-main); font-weight: 500; font-size: 0.95rem;
    transition: color 0.2s var(--ease-smooth);
}
.framer-read-more .read-more-text { position: relative; padding-bottom: 2px; }
.framer-read-more .read-more-text::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: var(--gradient-accent);
    transform: scaleX(0); transform-origin: right; transition: transform 0.3s var(--ease-smooth);
}
.framer-article-card:hover .framer-read-more { color: var(--text-heading); }
.framer-article-card:hover .framer-read-more .read-more-text::after { transform: scaleX(1); transform-origin: left; }
.framer-read-more svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-spring); }
.framer-article-card:hover .framer-read-more svg { transform: translate(2px, -2px); color: var(--accent-primary); }

.card-content { flex: 1; z-index: 1; position: relative; }
.card-title { font-size: 1.45rem; margin-bottom: 12px; letter-spacing: -0.02em; }

.card-price {
    font-size: 1.7rem; color: var(--text-heading);
    font-weight: 800; font-family: 'Onest', sans-serif;
    display: flex; align-items: baseline; gap: 6px;
}
.card-price span { font-size: 1rem; color: var(--text-main); font-weight: 400; font-family: 'Onest', sans-serif; }

.card-category {
    display: inline-block;
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 16px;
    padding: 3px 10px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    border: 1px solid var(--card-border);
}

/* ==========================================================================
   VALUES / REASONS GRID — Framer card style
   ========================================================================== */
.reasons-section {
    background-color: var(--bg-color);
    border-top: 1px solid var(--glass-border);
}

.reasons-header {
    text-align: center;
    margin-bottom: 64px;
}

.reasons-title {
    font-size: clamp(2.6rem, 4.5vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin-bottom: 20px;
    color: var(--text-heading);
}

.reasons-subtitle {
    font-size: 1.08rem;
    color: var(--text-muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* 2-column card grid */
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.value-card {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 32px 28px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-card);
    transition: transform 0.3s var(--ease-spring), border-color 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

.value-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent-primary) 28.000000000000004%, transparent);
    box-shadow: var(--shadow-card), 0 16px 44px rgba(0, 0, 0, 0.3);
}

/* Icon wrapper — dark rounded square */
.value-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--card-border);
    color: var(--accent-hover);
}

.value-icon-wrap svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.75;
}

.value-body { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }

.value-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-heading);
    line-height: 1.25;
}

.value-subtitle {
    margin: 0;
    font-size: 0.97rem;
    color: var(--text-muted);
    line-height: 1.65;
}

/* ==========================================================================
   PARTNERS SECTION — Framer table-grid style
   ========================================================================== */
.partners-section {
    background: var(--bg-color);
    border-top: 1px solid var(--glass-border);
}

.partners-header {
    text-align: center;
    margin-bottom: 56px;
}

.partners-title {
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-heading);
    margin-bottom: 16px;
}

.partners-subtitle {
    font-size: 1.06rem;
    color: var(--text-muted);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Single large rounded card with internal grid lines */
.partners-table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    background: var(--card-border); /* Lines color */
    gap: 1px;
    overflow: hidden;
}

.partner-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 40px 24px;
    background: var(--bg-card); /* Cell background */
    transition: background 0.25s var(--ease-smooth);
}

.partner-cell:hover { background: var(--bg-tertiary); }

/* Logo image */
.partner-logo-img {
    height: 32px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.7;
    transition: opacity 0.25s var(--ease-smooth);
}

.partner-cell:hover .partner-logo-img { opacity: 1; }

/* Placeholder icon when no logo uploaded */
.partner-icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: rgba(245, 244, 250, 0.5);
    flex-shrink: 0;
}

.partner-icon-placeholder svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.5;
}

.partner-name {
    font-size: 1.15rem;
    font-weight: 700;
    font-family: 'Onest', sans-serif;
    color: var(--text-heading);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* ==========================================================================
   SECTION KICKERS — gradient-bordered pill
   ========================================================================== */
.industries-kicker,
.solutions-hub-kicker,
.solutions-archive-kicker,
.contact-kicker {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent-hover);
    /* Gradient border */
    background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                var(--gradient-accent) border-box;
    border: 1px solid transparent;
}

.industries-kicker,
.solutions-hub-kicker,
.solutions-archive-kicker {
    display: table;
    margin: 0 auto;
}

/* ==========================================================================
   INDUSTRIES ZIG-ZAG — Framer open-layout style
   ========================================================================== */
.industries-section {
    padding: 100px 0;
    background: var(--bg-color);
    border-top: 1px solid var(--glass-border);
}

.industries-header { text-align: center; margin-bottom: 80px; }
.industries-title { margin: 16px 0 10px; }

.industries-subtitle {
    max-width: 620px; margin: 0 auto;
    color: var(--text-muted); font-size: 1.06rem; line-height: 1.7;
}

.industries-list { display: flex; flex-direction: column; gap: 0; }

.industry-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
    padding: 80px 0;
    border-top: 1px solid var(--glass-border);
}

.industry-row:last-child { border-bottom: 1px solid var(--glass-border); }

.industry-row--reverse .industry-img-container { order: 2; }
.industry-row--reverse .industry-text-container { order: 1; }

.industry-img-container {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background-size: cover; background-position: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.4s var(--ease-smooth), transform 0.4s var(--ease-spring);
}

.industry-img-container::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(19, 17, 26, 0.0) 55%, rgba(19, 17, 26, 0.35) 100%);
}

.industry-row:hover .industry-img-container {
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.6);
    transform: translateY(-4px);
}

.industry-image-shine { display: none; }

/* Text column — plain, no card box */
.industry-text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.industry-text-container::before { display: none; }
.industry-text-container:hover { border: none; box-shadow: none; }

/* Index badge — gradient border pill */
.industry-index {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 52px; height: 28px;
    border-radius: var(--radius-full);
    font-family: 'Onest', sans-serif; font-weight: 700; font-size: 0.85rem;
    letter-spacing: 0.06em; color: var(--accent-hover);
    background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                var(--gradient-accent) border-box;
    border: 1px solid transparent;
    margin-bottom: 28px;
    align-self: flex-start;
}

.industry-title {
    margin: 0 0 24px;
    font-size: clamp(2.5rem, 3.5vw, 3.5rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--text-heading);
}

.industry-description {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.78;
    color: var(--text-muted);
    max-width: 480px;
}

.industry-cta {
    display: inline-flex; align-items: center; gap: 8px;
    align-self: flex-start;
    margin-top: 36px;
    padding: 12px 24px;
    border-radius: var(--radius-full);
    color: var(--text-heading);
    font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em;
    background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
                var(--gradient-accent) border-box;
    border: 1px solid transparent;
    transition: transform 0.26s var(--ease-spring), box-shadow 0.26s var(--ease-smooth),
                background 0.26s var(--ease-smooth), color 0.26s var(--ease-smooth), gap 0.26s var(--ease-spring);
}

.industry-cta::after {
    content: '→'; font-size: 1rem;
    transition: transform 0.26s var(--ease-spring);
    display: inline-block; line-height: 1;
}

.industry-cta:hover {
    color: #fff;
    background-image: var(--gradient-cta), var(--gradient-cta);
    background-clip: padding-box, border-box;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent-primary) 28.000000000000004%, transparent);
    gap: 13px;
}

.industry-cta:hover::after { transform: translateX(3px); }

/* ==========================================================================
   SOLUTIONS HUB
   ========================================================================== */
.solutions-hub-section {
    background:
        radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--accent-primary) 9%, transparent) 0%, transparent 50%),
        var(--bg-color);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}

.solutions-hub-title { margin-top: 16px; margin-bottom: 10px; }

.solutions-hub-subtitle {
    max-width: 760px; margin: 0 auto 34px; text-align: center;
    color: var(--text-muted); font-size: 1.04rem; line-height: 1.7;
}

.solutions-hub-grid {
    display: grid; grid-template-columns: repeat(2, minmax(320px, 1fr)); gap: 22px;
}

.solution-category-card {
    position: relative; display: block; min-height: 270px;
    border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-card), 0 14px 42px rgba(0,0,0,0.32);
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth);
}

.solution-category-media {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transform: scale(1.01);
    transition: transform 0.38s var(--ease-spring);
}

.solution-category-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(19, 17, 26, 0.04) 10%, rgba(19, 17, 26, 0.86) 100%),
        linear-gradient(90deg, rgba(19, 17, 26, 0.56) 0%, rgba(19, 17, 26, 0.08) 60%);
}

.solution-category-content {
    position: absolute; inset: auto 0 0 0;
    display: grid; grid-template-columns: 1fr auto;
    gap: 14px; align-items: end; padding: 18px 20px; z-index: 2;
}

.solution-category-title {
    margin: 0; color: var(--text-heading);
    font-size: clamp(1.9rem, 2.1vw, 2.7rem);
    line-height: 1; letter-spacing: 0.01em;
}

/* Arrow — gradient-fill circle */
.solution-category-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: var(--radius-full);
    color: var(--accent-hover); font-size: 1.3rem;
    background: linear-gradient(var(--bg-tertiary), var(--bg-tertiary)) padding-box,
                var(--gradient-accent) border-box;
    border: 1px solid transparent;
    transition: transform 0.26s var(--ease-spring), background 0.26s var(--ease-smooth), color 0.26s var(--ease-smooth);
}

.solution-category-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent-primary) 35%, transparent);
    box-shadow: var(--shadow-card), 0 20px 52px rgba(0,0,0,0.42), 0 0 28px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

.solution-category-card:hover .solution-category-media { transform: scale(1.07); }

.solution-category-card:hover .solution-category-arrow {
    background-image: var(--gradient-cta), var(--gradient-cta);
    background-clip: padding-box, border-box;
    color: #fff; border-color: transparent;
    transform: translateX(3px);
}

.solutions-hub-footer { text-align: center; margin-top: 40px; }
.solutions-hub-btn { padding: 14px 40px; }

/* ==========================================================================
   SOLUTIONS ARCHIVE
   ========================================================================== */
.solutions-archive { padding-top: 80px; padding-bottom: 120px; }
.solutions-archive-header { margin-bottom: 48px; text-align: center; }
.solutions-archive-title { font-size: clamp(3rem, 5vw, 5rem); margin: 14px 0 10px; }
.solutions-archive-subtitle { color: var(--text-main); font-size: 1.06rem; max-width: 760px; margin: 0 auto; }
.solutions-catalog { display: flex; flex-direction: column; gap: 44px; }
.solutions-category-group { border-top: 1px solid rgba(48, 44, 63, 0.5); padding-top: 18px; }

.solutions-category-heading {
    display: flex; align-items: center;
    justify-content: space-between; gap: 18px; margin-bottom: 20px;
}

.solutions-category-title { margin: 0; font-size: clamp(2rem, 3vw, 2.9rem); }

.solution-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }

.solution-list-card {
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
    transition: transform 0.34s var(--ease-spring), border-color 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
    text-decoration: none; position: relative;
}

.solution-list-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
    box-shadow: var(--shadow-card), 0 18px 46px rgba(0,0,0,0.42), 0 0 0 1px color-mix(in srgb, var(--accent-primary) 14.000000000000002%, transparent);
}

.solution-card-image-wrapper {
    position: relative; width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden; background: var(--bg-tertiary);
}

.solution-card-img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.65s var(--ease-spring);
}

.solution-list-card:hover .solution-card-img { transform: scale(1.06); }

.solution-card-body {
    display: flex; flex-direction: column;
    padding: 22px 22px 20px; flex-grow: 1;
}

.solution-list-title {
    margin: 0 0 10px 0; color: var(--text-heading);
    font-size: 1.4rem; font-weight: 700;
    line-height: 1.2; letter-spacing: -0.01em;
    font-family: 'Onest', sans-serif;
}

.solution-list-desc {
    margin: 0; color: var(--text-main);
    font-size: 1rem; line-height: 1.55; flex-grow: 1;
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
}

.solution-list-footer {
    margin-top: 22px; display: flex; align-items: center;
    justify-content: space-between; padding-top: 14px;
    border-top: 1px solid rgba(48, 44, 63, 0.45);
}

.solution-list-price {
    font-size: 1.75rem; color: var(--text-heading);
    font-weight: 700; font-family: 'Onest', sans-serif; line-height: 1;
}

.solution-list-price span { color: var(--text-muted); font-size: 0.96rem; font-weight: 500; }
.solution-list-price--muted { font-size: 1.2rem; color: var(--text-muted); font-weight: 500; }

.solution-list-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    color: var(--accent-hover);
    background: linear-gradient(var(--bg-tertiary), var(--bg-tertiary)) padding-box,
                var(--gradient-accent) border-box;
    border: 1px solid transparent;
    transition: background 0.28s var(--ease-smooth), color 0.28s var(--ease-smooth),
                transform 0.28s var(--ease-spring), box-shadow 0.28s var(--ease-smooth);
}

.solution-list-card:hover .solution-list-arrow {
    background: var(--gradient-cta);
    color: #fff; border-color: transparent;
    transform: translateX(4px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent-primary) 40%, transparent);
}

.direct-contract-badge {
    position: absolute; top: 11px; right: 11px;
    background: rgba(0, 0, 0, 0.55); color: #fff;
    padding: 5px 12px; border-radius: var(--radius-full);
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12); z-index: 2;
}

.solutions-empty {
    text-align: center; color: var(--text-main);
    grid-column: 1 / -1; padding: 50px 0;
}

/* ==========================================================================
   FORMS
   ========================================================================== */
input, textarea, select {
    width: 100%; padding: 17px 20px;
    background: rgba(48, 44, 63, 0.18);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    color: var(--text-heading); font-family: inherit; font-size: 1rem;
    margin-bottom: 16px;
    transition: border-color 0.22s var(--ease-smooth), box-shadow 0.22s var(--ease-smooth), background 0.22s var(--ease-smooth);
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent-primary) 65%, transparent);
    background: rgba(48, 44, 63, 0.28);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

select {
    appearance: none; -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat; background-position: right 16px center;
    background-size: 22px; padding-right: 48px;
}

select option { background-color: var(--bg-secondary); color: var(--text-heading); }

/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */
.contact-section {
    position: relative; overflow: hidden;
    background:
        radial-gradient(120% 120% at 0% 100%, rgba(105, 106, 252, 0.14) 0%, transparent 52%),
        radial-gradient(120% 120% at 100% 0%, rgba(255, 103, 149, 0.10) 0%, transparent 52%),
        var(--bg-secondary);
}

.contact-container { max-width: 1260px; }

.contact-shell {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(520px, 640px);
    gap: 56px; align-items: start;
}

.contact-copy { padding-top: 18px; }

.contact-kicker {
    display: inline-block; padding: 5px 14px;
    /* gradient border */
    background: linear-gradient(var(--bg-secondary), var(--bg-secondary)) padding-box,
                var(--gradient-accent) border-box;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.13em;
    color: var(--accent-hover);
}

.contact-title {
    text-align: left; margin: 20px 0 14px;
    font-size: clamp(3rem, 5.5vw, 6rem);
    line-height: 0.94; letter-spacing: -0.02em;
}

.contact-lead {
    color: var(--text-muted); font-size: 1.12rem;
    max-width: 520px; margin-bottom: 30px; line-height: 1.72;
}

.contact-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.contact-benefits li {
    position: relative; padding-left: 26px;
    color: rgba(245, 244, 250, 0.84); font-size: 0.97rem;
}

/* Accent dot bullet */
.contact-benefits li::before {
    content: '';
    position: absolute; left: 0; top: 0.54em;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-primary);
}

/* Form panel */
.contact-form-panel {
    position: relative; padding: 32px 32px 28px;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-card), 0 28px 64px rgba(0,0,0,0.48);
}



.contact-form-panel .wpcf7 { position: relative; z-index: 2; }
.contact-form-panel .wpcf7 form > p { margin-bottom: 14px; }
.contact-form-panel .wpcf7 form > p:last-of-type { margin-bottom: 0; }
.contact-form-panel .wpcf7-spinner { margin: 8px 0 0 6px; }
.contact-form-panel .wpcf7-not-valid-tip { margin-top: 6px; font-size: 0.82rem; }
.contact-form-panel .wpcf7-response-output { margin: 14px 0 0 !important; border-radius: var(--radius-sm); font-size: 0.88rem; }

.contact-form-panel input,
.contact-form-panel textarea,
.contact-form-panel select {
    margin-bottom: 0; padding: 15px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
    background: rgba(48, 44, 63, 0.18);
    color: var(--text-heading);
}

.contact-form-panel input::placeholder,
.contact-form-panel textarea::placeholder { color: var(--text-muted); opacity: 0.6; }

.contact-form-panel input:focus,
.contact-form-panel textarea:focus,
.contact-form-panel select:focus {
    border-color: color-mix(in srgb, var(--accent-primary) 65%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 12%, transparent);
    background: rgba(48, 44, 63, 0.28);
}

.contact-form-panel .wpcf7-form-control-wrap { position: relative; display: block; }
.contact-form-panel input[maxlength],
.contact-form-panel textarea[maxlength] { padding-right: 70px; }
.contact-form-panel textarea[maxlength] { padding-bottom: 44px; }

.input-char-counter {
    position: absolute; right: 18px; bottom: 18px;
    font-size: 0.72rem; color: rgba(255, 255, 255, 0.22);
    font-family: 'Onest', sans-serif; font-weight: 600;
    pointer-events: none; z-index: 5; letter-spacing: 0.06em;
    transition: color 0.2s var(--ease-smooth);
}

.contact-form-panel input:focus ~ .input-char-counter,
.contact-form-panel textarea:focus ~ .input-char-counter { color: color-mix(in srgb, var(--accent-hover) 75%, transparent); }

.contact-form-panel textarea { min-height: 176px; resize: vertical; }

/* Submit — rose→indigo gradient pill */
.contact-form-panel input[type="submit"],
.contact-form-panel .wpcf7-submit {
    width: 100%; margin-top: 8px; padding: 15px 24px;
    border: none; border-radius: var(--radius-full);
    font-weight: 700; font-size: 1rem; color: #fff;
    letter-spacing: 0.01em; cursor: pointer;
    background: var(--gradient-cta);
    box-shadow: var(--shadow-btn), 0 8px 22px color-mix(in srgb, var(--accent-primary) 32%, transparent);
    transition: transform 0.24s var(--ease-spring), box-shadow 0.24s var(--ease-smooth), filter 0.24s var(--ease-smooth);
}

.contact-form-panel input[type="submit"]:hover,
.contact-form-panel .wpcf7-submit:hover {
    transform: translateY(-2px); filter: brightness(1.08);
    box-shadow: var(--shadow-btn), 0 14px 32px color-mix(in srgb, var(--accent-primary) 45%, transparent), 0 0 28px rgba(255, 56, 104, 0.2);
}

.contact-form-panel input[type="submit"]:active,
.contact-form-panel .wpcf7-submit:active { transform: translateY(0); }

.contact-section--compact {
    background:
        radial-gradient(110% 100% at 50% 0%, color-mix(in srgb, var(--accent-primary) 10%, transparent) 0%, transparent 52%),
        var(--bg-color);
}

.contact-compact-container { max-width: 860px; }
.contact-compact-title { margin-bottom: 20px; }
.contact-form-panel--compact { max-width: 760px; margin: 0 auto; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
    padding: 80px 0 40px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--glass-border);
    font-size: 0.88rem; color: var(--text-main);
    position: relative;
}

/* Gradient luminous top line */
.site-footer::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: var(--gradient-accent);
    opacity: 0.45;
}

.site-footer a { color: rgba(245, 244, 250, 0.84); font-weight: 500; transition: color 0.22s var(--ease-smooth); }
.site-footer a:hover { color: var(--accent-hover); }

.footer-row {
    display: flex; justify-content: space-between;
    align-items: flex-start; flex-wrap: wrap;
    gap: 40px; margin-bottom: 56px;
}

.footer-brand { max-width: 300px; }

.footer-brand h2 {
    font-size: 1.45rem; letter-spacing: 0.04em;
    margin-bottom: 12px; font-weight: 700;
    font-family: 'Onest', 'Inter', sans-serif;
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-brand h2::after { display: none; }
.footer-brand h2::before { display: none; }

.footer-meta {
    font-size: 0.82rem;
    border-top: 1px solid rgba(48, 44, 63, 0.5);
    padding-top: 28px;
    display: flex; justify-content: space-between;
    color: var(--text-muted);
}

/* ==========================================================================
   PROCESS TIMELINE
   ========================================================================== */
.timeline-section-title { margin-bottom: 10px; }

.timeline-section-subtitle {
    text-align: center; max-width: 640px; margin: 0 auto 46px;
    color: var(--text-muted); font-size: 1.04rem; letter-spacing: 0.01em; line-height: 1.7;
}

.timeline { position: relative; max-width: 860px; margin: 0 auto; padding-left: 72px; }

.timeline::before {
    content: '';
    position: absolute; left: 25px; top: 34px; bottom: 34px; width: 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 90%, transparent) 0%, color-mix(in srgb, var(--accent-primary) 6%, transparent) 100%);
}

.timeline-item { position: relative; margin-bottom: 20px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item:nth-child(even) .timeline-content { transform: translateX(12px); }

/* Timeline dot — gradient fill */
.timeline-dot {
    position: absolute; left: -56px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--gradient-cta);
    box-shadow: 0 0 16px color-mix(in srgb, var(--accent-primary) 70%, transparent), 0 0 0 5px color-mix(in srgb, var(--accent-primary) 12%, transparent);
    transition: transform 0.26s var(--ease-spring), box-shadow 0.26s var(--ease-smooth);
    z-index: 2;
}

.timeline-content {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card), 0 10px 30px rgba(0,0,0,0.38);
    padding: 22px 26px; min-height: 100px;
    display: flex; align-items: center; gap: 18px;
    overflow: hidden;
    transition: transform 0.26s var(--ease-spring), border-color 0.26s var(--ease-smooth), box-shadow 0.26s var(--ease-smooth);
}

.timeline-content::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(105deg, color-mix(in srgb, var(--accent-primary) 10%, transparent) 0%, transparent 38%);
    opacity: 0; transition: opacity 0.26s var(--ease-smooth);
    pointer-events: none;
}

/* Step index — gradient border pill */
.timeline-step-index {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 68px; height: 44px;
    border-radius: var(--radius-full);
    font-family: 'Onest', sans-serif; font-size: 1.6rem; font-weight: 700;
    color: var(--accent-hover); letter-spacing: -0.03em;
    background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
                var(--gradient-accent) border-box;
    border: 1px solid transparent;
}

.timeline-step-title {
    margin: 0; font-size: 1.95rem; line-height: 1.05;
    letter-spacing: 0.01em; color: var(--text-heading);
}

.timeline-item:hover .timeline-content {
    transform: translateX(8px);
    border-color: color-mix(in srgb, var(--accent-primary) 35%, transparent);
    box-shadow: var(--shadow-card), 0 14px 38px rgba(0,0,0,0.44), 0 0 24px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

.timeline-item:hover .timeline-content::before { opacity: 1; }

.timeline-item:hover .timeline-dot {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 22px color-mix(in srgb, var(--accent-primary) 90%, transparent), 0 0 0 7px color-mix(in srgb, var(--accent-primary) 16%, transparent);
}

/* ==========================================================================
   FULLSCREEN OVERLAY / MEGA-MENU
   ========================================================================== */
.fullscreen-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(13, 11, 18, 0.96);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    display: flex; flex-direction: column;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s var(--ease-smooth);
    overflow-y: auto;
}

.fullscreen-overlay.is-active { opacity: 1; pointer-events: auto; }

.overlay-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: 20px;
}

.close-btn {
    background: none; border: none; color: var(--text-heading); cursor: pointer;
    transition: transform 0.3s var(--ease-spring), color 0.22s var(--ease-smooth);
    display: flex; align-items: center; justify-content: center;
    padding: 6px; border-radius: var(--radius-xs);
}

.close-btn:hover { transform: rotate(90deg); color: var(--accent-hover); }

.overlay-content {
    flex: 1; display: grid; grid-template-columns: 3fr 2fr;
    gap: 60px; align-items: center; padding-bottom: 60px;
}

.massive-nav ul { list-style: none; padding: 0; margin: 0; }

.massive-nav li {
    margin-bottom: 22px;
    transform: translateY(20px); opacity: 0;
    transition: transform 0.5s var(--ease-spring), opacity 0.5s var(--ease-smooth);
}

.fullscreen-overlay.is-active .massive-nav li { transform: translateY(0); opacity: 1; }
.fullscreen-overlay.is-active .massive-nav li:nth-child(1) { transition-delay: 0.08s; }
.fullscreen-overlay.is-active .massive-nav li:nth-child(2) { transition-delay: 0.13s; }
.fullscreen-overlay.is-active .massive-nav li:nth-child(3) { transition-delay: 0.18s; }
.fullscreen-overlay.is-active .massive-nav li:nth-child(4) { transition-delay: 0.23s; }
.fullscreen-overlay.is-active .massive-nav li:nth-child(5) { transition-delay: 0.28s; }

.massive-nav a {
    font-family: 'Onest', 'Inter', sans-serif;
    font-size: 4rem; font-weight: 700;
    color: var(--text-heading);
    letter-spacing: 0.01em; text-transform: uppercase;
    position: relative; display: inline-block;
    transition: color 0.28s var(--ease-smooth), transform 0.28s var(--ease-spring);
}

.massive-nav a:hover {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: translateX(14px);
}

.contact-card {
    background: var(--bg-card); padding: 46px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-card);
    transform: translateY(30px); opacity: 0;
    transition: transform 0.6s var(--ease-spring) 0.28s, opacity 0.6s var(--ease-smooth) 0.28s;
}

.fullscreen-overlay.is-active .contact-card { transform: translateY(0); opacity: 1; }

.contact-label {
    font-size: 0.82rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.12em;
    font-weight: 600; margin-bottom: 8px;
}

.contact-link {
    font-size: 1.45rem; color: var(--text-heading);
    font-weight: 700; font-family: 'Onest', sans-serif;
    transition: color 0.22s var(--ease-smooth);
}

.contact-link:hover { color: var(--accent-hover); }

/* ==========================================================================
   SINGLE PAGE
   ========================================================================== */
.single-header { padding: 80px 0 40px; border-bottom: 1px solid var(--glass-border); margin-bottom: 40px; }
.single-body { max-width: 800px; margin: 0 auto; padding-bottom: 120px; }
.content-area p { margin-bottom: 24px; color: var(--text-main); font-size: 1.1rem; line-height: 1.82; }
.content-area h2 { margin-top: 48px; font-size: 2rem; color: var(--text-heading); }
.content-area ul { margin-bottom: 24px; padding-left: 20px; color: var(--text-main); font-size: 1.1rem; }
.content-area li { margin-bottom: 10px; }

/* ==========================================================================
   PORTFOLIO
   ========================================================================== */
.portfolio-archive-header { margin-bottom: 50px; text-align: center; position: relative; }

.portfolio-archive-header h1 {
    font-size: 4rem; letter-spacing: -0.04em;
    font-family: 'Onest', sans-serif; margin-bottom: 24px;
    background: var(--gradient-text);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

.portfolio-archive-header p {
    color: var(--text-main); font-size: 1.2rem;
    max-width: 650px; margin: 0 auto; line-height: 1.65;
}

.portfolio-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 36px; }

.portfolio-item {
    position: relative; border-radius: var(--radius-lg);
    overflow: hidden; display: block; text-decoration: none;
    transform: translateZ(0); grid-column: span 6;
    transition: box-shadow 0.35s var(--ease-smooth);
}

.portfolio-item:hover {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 25%, transparent), 0 24px 56px rgba(0, 0, 0, 0.5);
}

@media (max-width: 992px) {
    .portfolio-item { grid-column: span 12 !important; }
}

.portfolio-item-img {
    position: relative; width: 100%; padding-top: 55%;
    overflow: hidden; background-color: var(--bg-tertiary);
    border-radius: var(--radius-lg);
}

.portfolio-item-img img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform 0.9s var(--ease-spring);
}

.portfolio-item:hover .portfolio-item-img img { transform: scale(1.05); }

.portfolio-item-overlay {
    position: absolute; inset: 0;
    background-image: linear-gradient(to top, rgba(19, 17, 26, 0.96) 0%, rgba(19, 17, 26, 0.48) 58%, rgba(19, 17, 26, 0) 100%);
    opacity: 0.82;
    transition: opacity 0.4s var(--ease-smooth);
}

.portfolio-item:hover .portfolio-item-overlay { opacity: 1; }

.portfolio-item-content {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 38px;
    display: flex; flex-direction: column; justify-content: flex-end;
    transform: translateY(18px); transition: transform 0.5s var(--ease-spring);
}

.portfolio-item:hover .portfolio-item-content { transform: translateY(0); }

.portfolio-item-title {
    color: #ffffff; font-size: 1.55rem; font-weight: 600;
    font-family: 'Onest', sans-serif; margin-bottom: 8px; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
}

.portfolio-item-excerpt {
    color: rgba(255, 255, 255, 0.68); font-size: 1rem; line-height: 1.5;
    margin-bottom: 18px; max-width: 90%;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.4s var(--ease-smooth) 0.08s, transform 0.4s var(--ease-spring) 0.08s;
}

.portfolio-item:hover .portfolio-item-excerpt { opacity: 1; transform: translateY(0); }

.portfolio-item-link {
    display: inline-flex; align-items: center;
    color: var(--accent-hover); font-weight: 600; font-size: 0.88rem;
    text-transform: uppercase; letter-spacing: 0.06em;
}

.portfolio-item-link svg {
    margin-left: 8px; width: 16px; height: 16px;
    transition: transform 0.28s var(--ease-spring);
}

.portfolio-item:hover .portfolio-item-link svg { transform: translateX(5px); }

/* Portfolio Single */
.portfolio-single-header {
    margin-bottom: 60px; text-align: center;
    max-width: 900px; margin-left: auto; margin-right: auto;
}

.portfolio-single-title {
    font-size: 4rem; letter-spacing: -0.04em;
    font-family: 'Onest', sans-serif; margin-bottom: 24px; line-height: 1.1;
    background: var(--gradient-text);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

.portfolio-single-hero {
    border-radius: var(--radius-xl); overflow: hidden;
    margin-bottom: 80px;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.44);
    position: relative; border: 1px solid var(--card-border);
}

.portfolio-single-hero img { width: 100%; height: auto; display: block; max-height: 70vh; object-fit: cover; }

.portfolio-single-content {
    font-size: 1.2rem; line-height: 1.82;
    color: var(--text-main); max-width: 800px; margin: 0 auto;
}

.portfolio-single-content h2, .portfolio-single-content h3 {
    color: var(--text-heading); font-family: 'Onest', sans-serif;
    margin-top: 50px; margin-bottom: 24px;
}

.portfolio-single-content p { margin-bottom: 24px; }
.portfolio-single-content ul { margin-bottom: 28px; padding-left: 20px; }
.portfolio-single-content li { margin-bottom: 10px; }
.portfolio-single-content li::marker { color: var(--accent-primary); }

.portfolio-cta-box {
    margin-top: 100px; padding: 60px;
    background: var(--bg-card);
    border-radius: var(--radius-xl); text-align: center;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-card), 0 22px 48px rgba(0,0,0,0.28);
    position: relative; overflow: hidden;
}

.portfolio-cta-box::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: var(--gradient-accent); opacity: 0.5;
}

.portfolio-cta-box h3 { font-size: 2.2rem; margin-bottom: 18px; font-family: 'Onest', sans-serif; color: var(--text-heading); }

.portfolio-cta-box p {
    margin-bottom: 34px; color: var(--text-main);
    font-size: 1.12rem; max-width: 600px;
    margin-left: auto; margin-right: auto;
}

/* ==========================================================================
   RESPONSIVE — 992px
   ========================================================================== */
@media (max-width: 992px) {
    .overlay-content { grid-template-columns: 1fr; align-items: flex-start; padding-top: 40px; }
    .massive-nav a { font-size: 2.5rem; }
    .nav-contact-btn { display: none; }

    .industries-section { padding: 68px 0; }
    .industries-header { margin-bottom: 48px; }
    .industries-subtitle { font-size: 0.98rem; max-width: 620px; }

    .industry-row, .industry-row--reverse {
        grid-template-columns: 1fr; gap: 36px; padding: 48px 0;
    }
    .industry-row--reverse .industry-img-container,
    .industry-row--reverse .industry-text-container { order: initial; }
    .industry-img-container { aspect-ratio: 16 / 10; border-radius: var(--radius-xl); }
    .industry-text-container { padding: 0; }
    .industry-index { margin-bottom: 20px; }
    .industry-title { font-size: 2.4rem; }
    .industry-description { font-size: 1.02rem; max-width: 100%; }
    .industry-cta { margin-top: 24px; }

    .solutions-hub-grid { grid-template-columns: 1fr; gap: 18px; }
    .solution-category-card { min-height: 240px; }
    .solution-category-title { font-size: 2.2rem; }

    .solutions-archive { padding-top: 62px; padding-bottom: 96px; }
    .solutions-archive-title { font-size: 3.6rem; }
    .solutions-archive-subtitle { font-size: 0.98rem; }
    .solutions-category-heading { margin-bottom: 16px; }
    .solution-list-grid { grid-template-columns: 1fr; gap: 16px; }
    .solution-list-title { font-size: 1.95rem; }

    .timeline { max-width: 100%; padding-left: 56px; }
    .timeline::before { left: 23px; }
    .timeline-dot { left: -43px; }
    .timeline-item:nth-child(even) .timeline-content { transform: none; }
    .timeline-step-title { font-size: 1.6rem; }

    .contact-shell { grid-template-columns: 1fr; gap: 28px; }
    .contact-copy { padding-top: 0; display: flex; flex-direction: column; }
    .contact-kicker { margin: 0 auto; }
    .contact-title { text-align: center; }
    .contact-lead { text-align: center; margin-left: auto; margin-right: auto; }
    .contact-benefits { max-width: 420px; margin: 0 auto; }
    .contact-form-panel { max-width: 760px; margin: 0 auto; }
    .contact-compact-container { max-width: 760px; }
}

/* ==========================================================================
   RESPONSIVE — 768px
   ========================================================================== */
@media (max-width: 768px) {
    .hero-title { font-size: 3.2rem; }
    .section-title { font-size: 2.4rem; }
    .main-nav ul { flex-wrap: wrap; justify-content: center; gap: 14px; }

    .industries-title { margin-top: 12px; margin-bottom: 8px; }
    .industries-subtitle { font-size: 0.92rem; }
    .industry-row, .industry-row--reverse { padding: 32px 0; gap: 24px; }
    .industry-img-container { border-radius: var(--radius-md); }
    .industry-text-container { padding: 0; }
    .industry-index { width: 44px; height: 26px; margin-bottom: 14px; font-size: 0.85rem; }
    .industry-title { font-size: 1.95rem; margin-bottom: 10px; }
    .industry-description { font-size: 0.96rem; line-height: 1.64; }
    .industry-cta { margin-top: 18px; width: 100%; padding: 11px 14px; font-size: 0.9rem; }

    .solutions-hub-subtitle { margin-bottom: 22px; font-size: 0.92rem; }
    .solution-category-card { min-height: 190px; border-radius: var(--radius-md); }
    .solution-category-content { padding: 12px; gap: 8px; }
    .solution-category-title { font-size: 1.65rem; }
    .solution-category-arrow { width: 32px; height: 32px; font-size: 1rem; }
    .solutions-hub-btn { width: 100%; max-width: 340px; }

    .solutions-archive { padding-top: 44px; padding-bottom: 72px; }
    .solutions-archive-title { font-size: 2.8rem; margin-top: 10px; }
    .solutions-archive-subtitle { font-size: 0.92rem; }
    .solutions-category-title { font-size: 1.9rem; }
    .solution-list-card { border-radius: var(--radius-md); }
    .solution-card-body { padding: 18px 16px 14px; }
    .solution-list-title { font-size: 1.6rem; }
    .solution-list-desc { font-size: 0.92rem; }
    .solution-list-price { font-size: 1.7rem; }
    .solution-list-arrow { width: 34px; height: 34px; }

    .timeline-section-subtitle { font-size: 0.93rem; margin-bottom: 28px; }
    .timeline { padding-left: 36px; }
    .timeline::before { left: 17px; top: 24px; bottom: 24px; }
    .timeline-dot { left: -27px; width: 14px; height: 14px; }
    .timeline-content { min-height: 80px; border-radius: var(--radius-sm); padding: 14px; gap: 10px; }
    .timeline-step-index { min-width: 48px; height: 30px; font-size: 1.15rem; }
    .timeline-step-title { font-size: 1.18rem; }

    .contact-title { font-size: 3rem; margin-top: 14px; }
    .contact-lead { font-size: 0.98rem; margin-bottom: 20px; }
    .contact-form-panel { padding: 20px 18px; border-radius: var(--radius-md); }
    .contact-form-panel input, .contact-form-panel textarea { border-radius: var(--radius-xs); padding: 13px 14px; }
    .contact-form-panel textarea { min-height: 148px; }
    .contact-form-panel--compact { max-width: 100%; }

    .portfolio-archive-header h1 { font-size: 2.4rem; }
    .portfolio-archive-header p { font-size: 1.05rem; }
    .portfolio-grid { gap: 18px; }
    .portfolio-item-img { padding-top: 65%; }
    .portfolio-item-content { padding: 24px; }
    .portfolio-item-title { font-size: 1.4rem; }
    .portfolio-item-excerpt { font-size: 0.96rem; margin-bottom: 14px; }
    .portfolio-single-title { font-size: 2.4rem; }
    .portfolio-cta-box { padding: 28px 18px; }
    .portfolio-cta-box h3 { font-size: 1.75rem; }

    .trust-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .trust-stat-number { font-size: 2.8rem; }

    .values-grid { grid-template-columns: 1fr; gap: 12px; }
    .value-card { padding: 24px 20px; gap: 16px; }
    .value-icon-wrap { width: 46px; height: 46px; }

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

    .partner-cell { padding: 28px 16px; gap: 10px; }
    .partner-name { font-size: 1rem; }

    .footer-row { gap: 32px; }
    .footer-meta { flex-direction: column; gap: 8px; }
}

/* ==========================================================================
   CUSTOM SELECT
   ========================================================================== */
.custom-select-container { position: relative; width: 100%; margin-bottom: 16px; user-select: none; }
.custom-select-container select { display: none !important; }

.custom-select-trigger {
    outline: none;
    padding: 15px 18px; border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
    background: rgba(48, 44, 63, 0.18);
    color: var(--text-heading); cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    transition: all 0.22s var(--ease-smooth); font-size: 1rem;
}

.custom-select-container.open .custom-select-trigger,
.custom-select-trigger:focus {
    border-color: color-mix(in srgb, var(--accent-primary) 65%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 12%, transparent);
}

.custom-select-trigger svg {
    transition: transform 0.3s var(--ease-spring);
    color: rgba(255, 255, 255, 0.45);
}

.custom-select-container.open .custom-select-trigger svg { transform: rotate(180deg); }

.custom-select-options {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--bg-card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.52); z-index: 100;
    margin: 0; padding: 8px 0; list-style: none;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: all 0.3s var(--ease-spring);
    max-height: 280px; overflow-y: auto;
}

.custom-select-container.open .custom-select-options {
    opacity: 1; visibility: visible; transform: translateY(0);
}

.custom-select-option {
    padding: 12px 18px; color: var(--text-main);
    cursor: pointer; transition: all 0.18s var(--ease-smooth); font-size: 0.95rem;
}

.custom-select-option:hover { background: color-mix(in srgb, var(--accent-primary) 12%, transparent); color: var(--text-heading); }

.custom-select-option.selected {
    color: var(--accent-hover); font-weight: 600; background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}