/*
Theme Name: Vinyl Direct
Theme URI: https://vinyl-direct.com
Author: Vinyl Direct
Description: Защитные и архитектурные плёнки Llumar, XPEL, SunTek
Version: 1.0.0
Text Domain: vinyl-direct
*/

    :root {
      --bg-main: #F5F7FB;
      --bg-main-dark: #0F172A;
      --text-main: #0F172A;
      --text-secondary: #4B5563;
      --text-muted: #9CA3AF;
      --accent-blue: #2563EB;
      --accent-blue-dark: #1D4ED8;
      --accent-orange: #F97316;
      --radius-lg: 18px;
      --radius-md: 12px;
      --shadow-soft: 0 18px 45px rgba(15,23,42,0.08);
      --shadow-card: 0 10px 30px rgba(15,23,42,0.06);
      --transition-fast: 0.18s ease-out;
      --transition-med: 0.25s ease-out;
      --max-width: 1200px;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "Inter", system-ui, sans-serif;
      color: var(--text-main);
      background: #070B14;
      -webkit-font-smoothing: antialiased;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }

    .vd-page { min-height: 100vh; }
    .vd-section { padding: 80px 16px; }
    @media (min-width: 992px) { .vd-section { padding: 110px 24px; } }
    .vd-container { max-width: var(--max-width); margin: 0 auto; }
    .bg-main { background: radial-gradient(circle at top right, #D9E4FF 0, var(--bg-main) 40%, #E4ECFF 100%); }
    .bg-main-light { background: linear-gradient(180deg, rgba(229,234,255,0.65), #F9FAFB); }
    .bg-white { background: #FFF; }
    .bg-main-dark { background: radial-gradient(circle at top left, #1F2937, #020617); color: #E5E7EB; }

    /* Typography */
    .vd-section-title {
      font-family: "Oswald", sans-serif; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase;
      font-size: 14px; color: var(--accent-blue); margin-bottom: 10px;
    }
    .vd-section-heading {
      font-family: "Anton", sans-serif; font-weight: 400;
      font-size: 24px; letter-spacing: 0.06em; text-transform: uppercase;
      margin: 0 0 24px; color: var(--text-main);
    }
    @media (min-width: 992px) { .vd-section-heading { font-size: 30px; } }
    .vd-section-lead { max-width: 640px; font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 32px; }

    /* ====== SHIMMER SILVER TITLE ====== */
    .hero-title {
      font-family: "Anton", sans-serif;
      font-size: 28px; line-height: 1.1;
      letter-spacing: 0.1em; text-transform: uppercase;
      margin: 0 0 16px;
      background: linear-gradient(
        105deg,
        #E5E7EB 0%, #E5E7EB 35%,
        #FFFFFF 42%, #F0F0F0 44%, #FFFFFF 46%, #C0C0C0 48%,
        #E5E7EB 55%, #E5E7EB 100%
      );
      background-size: 300% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: silverShimmer 4s ease-in-out infinite;
    }
    @keyframes silverShimmer {
      0%, 70% { background-position: 100% 0; }
      85% { background-position: -100% 0; }
      100% { background-position: -100% 0; }
    }
    @media (min-width: 768px) { .hero-title { font-size: 38px; } }
    @media (min-width: 1200px) { .hero-title { font-size: 44px; } }

    /* ====== GLASS SHIMMER BUTTONS ====== */
    .vd-btn {
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 999px; padding: 12px 26px;
      font-size: 13px; font-weight: 600;
      letter-spacing: 0.06em; text-transform: uppercase;
      border: 1px solid rgba(148,163,184,0.5);
      cursor: pointer; white-space: nowrap;
      position: relative; overflow: hidden;
      background: rgba(255,255,255,0.12);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      color: var(--accent-blue-dark);
      transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    }
    .vd-btn::before {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.5) 45%, transparent 55%);
      background-size: 250% 100%;
      animation: btnShimmer 3s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes btnShimmer {
      0%, 65% { background-position: 200% 0; }
      100% { background-position: -100% 0; }
    }
    .vd-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 40px rgba(37,99,235,0.25);
      border-color: var(--accent-blue);
    }
    .vd-btn-primary {
      background: rgba(37,99,235,0.15);
      border-color: rgba(37,99,235,0.4);
      color: var(--accent-blue-dark);
    }
    .vd-btn-primary:hover {
      background: rgba(37,99,235,0.25);
      box-shadow: 0 14px 40px rgba(37,99,235,0.35);
    }
    /* Dark section buttons */
    .bg-main-dark .vd-btn {
      background: rgba(255,255,255,0.08);
      border-color: rgba(148,163,184,0.5);
      color: #E5E7EB;
    }
    .bg-main-dark .vd-btn:hover {
      background: rgba(255,255,255,0.15);
      border-color: rgba(148,163,184,0.8);
    }

    .vd-link {
      display: inline-flex; align-items: center;
      font-size: 13px; font-weight: 500;
      color: var(--accent-blue-dark);
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .vd-link::after { content: "\2192"; margin-left: 8px; font-size: 12px; transition: transform var(--transition-fast); }
    .vd-link:hover::after { transform: translateX(3px); }

    /* Grid */
    .vd-grid { display: grid; gap: 20px; }
    .vd-grid-3 { grid-template-columns: 1fr; }
    @media (min-width: 768px) { .vd-grid-3 { grid-template-columns: repeat(3, 1fr); } }
    .vd-grid-2 { grid-template-columns: 1fr; }
    @media (min-width: 768px) { .vd-grid-2 { grid-template-columns: repeat(2, 1fr); } }

    /* ====== DARK HERO WITH PARALLAX ====== */
    .vd-hero {
      position: relative; overflow: hidden;
      padding-top: 60px; padding-bottom: 90px;
      background: #070B14;
    }
    @media (min-width: 992px) { .vd-hero { padding-top: 100px; padding-bottom: 120px; } }

    /* Parallax background — BMW hero car (composed with car on right) */
    .hero-bg-parallax {
      position: absolute; inset: 0; z-index: 0;
      background: url('assets/img/hero-car.png') center center / cover no-repeat;
      will-change: transform;
      transform: scale(1.1);
    }
    @media (min-width: 992px) {
      .hero-bg-parallax { background-position: 60% center; }
    }
    /* Subtle overlay — reinforce dark on left, keep right clear */
    .hero-bg-overlay {
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(180deg, rgba(7,11,20,0.6) 0%, rgba(7,11,20,0.3) 40%, transparent 70%);
    }
    @media (min-width: 768px) {
      .hero-bg-overlay {
        background: linear-gradient(90deg, rgba(7,11,20,0.65) 0%, rgba(7,11,20,0.35) 25%, rgba(7,11,20,0.08) 42%, transparent 58%);
      }
    }
    /* Moving light streaks */
    .hero-light-streak {
      position: absolute; z-index: 2; pointer-events: none;
      height: 2px; border-radius: 999px;
      opacity: 0;
    }
    .hero-light-streak--1 {
      width: 300px; bottom: 32%; left: -300px;
      background: linear-gradient(90deg, transparent, rgba(59,130,246,0.7), transparent);
      animation: lightStreak1 6s 1s ease-in-out infinite;
    }
    .hero-light-streak--2 {
      width: 200px; bottom: 28%; left: -200px;
      background: linear-gradient(90deg, transparent, rgba(239,68,68,0.6), transparent);
      animation: lightStreak2 6s 2.5s ease-in-out infinite;
    }
    .hero-light-streak--3 {
      width: 260px; bottom: 38%; left: -260px;
      background: linear-gradient(90deg, transparent, rgba(148,163,184,0.5), transparent);
      animation: lightStreak3 5s 0.5s ease-in-out infinite;
    }
    @keyframes lightStreak1 {
      0% { left: -300px; opacity: 0; }
      10% { opacity: 0.8; }
      90% { opacity: 0.8; }
      100% { left: 110%; opacity: 0; }
    }
    @keyframes lightStreak2 {
      0% { left: -200px; opacity: 0; }
      10% { opacity: 0.6; }
      90% { opacity: 0.6; }
      100% { left: 110%; opacity: 0; }
    }
    @keyframes lightStreak3 {
      0% { left: -260px; opacity: 0; }
      10% { opacity: 0.5; }
      90% { opacity: 0.5; }
      100% { left: 110%; opacity: 0; }
    }

    .hero-inner { display: grid; gap: 40px; position: relative; z-index: 3; }
    @media (min-width: 992px) { .hero-inner { grid-template-columns: 1.2fr 1fr; align-items: center; } }
    .hero-content { max-width: 640px; }
    /* Hero text-left layout (car in bg on right) */
    .hero-inner--left {
      display: flex; flex-direction: column; justify-content: center;
      align-items: flex-start;
      min-height: 60vh; max-width: none; padding-left: 24px; padding-right: 24px;
    }
    .hero-content--left { max-width: 380px; }

    /* ====== MOBILE HERO: text top, car middle, buttons bottom ====== */
    @media (max-width: 767px) {
      .vd-hero { padding-top: 105px; padding-bottom: 32px; }
      .hero-inner--left { min-height: 85vh; justify-content: flex-start; }
      .hero-content--left {
        display: flex; flex-direction: column;
        flex: 1; width: 100%; max-width: 100%;
      }
      .hero-content--left .hero-title {
        margin-bottom: 0;
      }
      .hero-content--left .hero-actions {
        margin-top: auto;
        padding-bottom: 80px;
      }
      /* Car bg centered for mobile */
      .hero-bg-parallax {
        background-position: 55% 60%;
      }
      /* Overlay: dark top + dark bottom, clear middle for car */
      .hero-bg-overlay {
        background: linear-gradient(180deg,
          rgba(7,11,20,0.85) 0%,
          rgba(7,11,20,0.5) 20%,
          rgba(7,11,20,0.08) 36%,
          transparent 46%,
          transparent 58%,
          rgba(7,11,20,0.12) 68%,
          rgba(7,11,20,0.6) 80%,
          rgba(7,11,20,0.9) 100%
        );
      }
    }
    @media (min-width: 768px) {
      .hero-inner--left { padding-left: 48px; }
      .hero-content--left { max-width: 440px; }
    }
    @media (min-width: 1200px) {
      .hero-inner--left { padding-left: 80px; }
      .hero-content--left { max-width: 480px; }
    }
    @media (min-width: 1600px) {
      .hero-inner--left { padding-left: calc((100vw - 1200px) / 2); }
    }
    .hero-content--left .hero-title {
      font-size: 24px; line-height: 1.15; text-transform: uppercase;
      font-family: "Anton", sans-serif; font-weight: 400;
      letter-spacing: 0.06em;
      margin: 0 0 20px;
      /* Silver shimmer on entire title */
      background: linear-gradient(
        105deg, #C8CCD4 0%, #C8CCD4 30%,
        #FFFFFF 40%, #F8F8F8 42%, #FFFFFF 44%, #B0B8C4 47%,
        #C8CCD4 55%, #C8CCD4 100%
      );
      background-size: 300% 100%;
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: silverShimmer 4s ease-in-out infinite;
    }
    .hero-content--left .hero-title .hero-title-brand {
      display: block;
      font-size: 1.2em;
      letter-spacing: 0.08em;
      margin-bottom: 4px;
    }
    .hero-content--left .hero-title .hero-title-line {
      display: block;
      font-family: "Inter", system-ui, sans-serif;
      font-weight: 700;
      font-size: 0.85em;
      letter-spacing: 0.01em;
      text-transform: none;
      white-space: nowrap;
    }
    @media (min-width: 768px) { .hero-content--left .hero-title { font-size: 34px; } }
    @media (min-width: 1200px) { .hero-content--left .hero-title { font-size: 44px; }
      .hero-inner--left { min-height: 70vh; } }
    .vd-badge {
      display: inline-flex; padding: 4px 10px; border-radius: 999px;
      background: rgba(255,255,255,0.08); border: 1px solid rgba(148,163,184,0.35);
      font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
      color: rgba(203,213,225,0.9); margin-bottom: 12px;
      backdrop-filter: blur(8px);
    }
    .hero-subtitle { font-size: 15px; line-height: 1.7; color: rgba(203,213,225,0.85); max-width: 560px; margin-bottom: 18px; }
    .hero-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
    .trust-item {
      font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 4px 10px; border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.3); background: rgba(255,255,255,0.06);
      color: rgba(203,213,225,0.8); backdrop-filter: blur(6px);
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    /* Hero buttons on dark bg */
    .vd-hero .vd-btn {
      background: rgba(255,255,255,0.08); border-color: rgba(148,163,184,0.4); color: #E5E7EB;
    }
    .vd-hero .vd-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(148,163,184,0.7); }
    .vd-hero .vd-btn-primary {
      background: rgba(37,99,235,0.2); border-color: rgba(37,99,235,0.5); color: #93C5FD;
    }
    .vd-hero .vd-btn-primary:hover { background: rgba(37,99,235,0.35); }

    .hero-visual {
      position: relative; border-radius: 24px; overflow: hidden;
      box-shadow: 0 0 60px rgba(59,130,246,0.15), 0 20px 50px rgba(0,0,0,0.4);
      min-height: 260px;
    }
    .hero-visual img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; transition: transform 0.5s ease-out; }
    @media (min-width: 992px) { .hero-visual img { min-height: 380px; } }
    /* Glow border on hero visual */
    .hero-visual::after {
      content: ''; position: absolute; inset: -2px; border-radius: 26px;
      background: linear-gradient(135deg, rgba(59,130,246,0.4), transparent 40%, rgba(59,130,246,0.2));
      z-index: -1;
    }

    /* Cards */
    .brand-card, .category-card, .benefit-card, .usecase-card, .film-card {
      border-radius: var(--radius-lg);
      background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(243,244,246,0.95));
      border: 1px solid rgba(148,163,184,0.35);
      box-shadow: var(--shadow-card); padding: 20px 18px;
      position: relative; overflow: hidden;
      transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
    }
    .brand-card:hover, .category-card:hover, .film-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 22px 50px rgba(15,23,42,0.12);
      border-color: rgba(37,99,235,0.5);
    }

    .brand-title, .category-title, .benefit-title, .usecase-title, .film-title {
      font-family: "Oswald", sans-serif; font-weight: 600;
      font-size: 16px; margin: 0 0 8px;
      letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-main);
    }
    .brand-text, .category-text, .benefit-text, .usecase-text, .film-text, .film-meta {
      font-size: 14px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 8px;
    }
    .brand-types, .film-meta {
      font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted);
    }
    .film-badge {
      position: absolute; top: 14px; right: 14px; padding: 4px 10px;
      border-radius: 999px; font-size: 10px; letter-spacing: 0.14em;
      text-transform: uppercase; background: var(--accent-orange); color: #111827;
    }

    /* ====== IMAGE GLOW + HOVER MOVEMENT ====== */
    .img-glow-wrap {
      position: relative; overflow: hidden;
      border-radius: 12px; margin-bottom: 14px;
    }
    .img-glow-wrap img {
      width: 100%; height: 180px; object-fit: cover;
      transition: transform 0.45s ease-out, filter 0.45s ease-out;
      will-change: transform;
    }
    /* Blue/white glow behind image */
    .img-glow-wrap::before {
      content: ''; position: absolute; inset: -4px; z-index: -1;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(59,130,246,0.3), rgba(148,163,184,0.15), rgba(59,130,246,0.2));
      opacity: 0; transition: opacity 0.4s ease-out;
    }
    /* Light sweep overlay */
    .img-glow-wrap::after {
      content: ''; position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
      background-size: 250% 100%; background-position: 200% 0;
      transition: background-position 0.6s ease-out;
      pointer-events: none; border-radius: 12px;
    }
    .img-glow-wrap:hover::before { opacity: 1; }
    .img-glow-wrap:hover::after { background-position: -100% 0; }
    .img-glow-wrap:hover img {
      transform: scale(1.06) translateY(-3px);
      filter: brightness(1.08);
    }
    /* JS-driven tilt on mousemove */
    .category-card img, .hero-visual img {
      transition: transform 0.45s ease-out, filter 0.45s ease-out;
    }

    /* ====== BRAND CATALOG SECTION ====== */
    .brand-catalog-section { padding: 60px 16px; }
    @media (min-width: 992px) { .brand-catalog-section { padding: 80px 24px; } }

    .brand-catalog-header {
      display: flex; align-items: center; gap: 16px;
      margin-bottom: 28px; flex-wrap: wrap;
    }
    .brand-catalog-header h2 {
      font-family: "Anton", sans-serif; font-size: 28px;
      letter-spacing: 0.06em; text-transform: uppercase; margin: 0;
    }
    @media (min-width: 992px) { .brand-catalog-header h2 { font-size: 34px; } }

    .brand-catalog-badge {
      padding: 4px 12px; border-radius: 999px;
      font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
      background: rgba(37,99,235,0.1); color: var(--accent-blue); border: 1px solid rgba(37,99,235,0.3);
    }
    .brand-catalog-desc {
      font-size: 15px; line-height: 1.7; color: var(--text-secondary);
      max-width: 800px; margin-bottom: 32px;
    }

    /* Product cards */
    .product-card {
      border-radius: var(--radius-lg);
      background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(243,244,246,0.95));
      border: 1px solid rgba(148,163,184,0.35);
      box-shadow: var(--shadow-card); padding: 22px 20px;
      transition: transform var(--transition-med), box-shadow var(--transition-med);
    }
    .product-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 40px rgba(15,23,42,0.1);
    }
    .product-card-name {
      font-family: "Oswald", sans-serif; font-weight: 600;
      font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--text-main); margin: 0 0 6px;
    }
    .product-card-desc {
      font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 12px;
    }
    .product-specs {
      display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
      font-size: 12px; color: var(--text-secondary); margin-bottom: 12px;
    }
    .product-specs dt { color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
    .product-specs dd { margin: 0 0 6px; font-weight: 500; }
    .product-application {
      font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--accent-blue); padding: 4px 10px;
      background: rgba(37,99,235,0.06); border-radius: 999px;
      display: inline-block; margin-bottom: 10px;
    }
    .product-cta {
      display: block; text-align: center; margin-top: 10px;
      padding: 10px 0; border-radius: 999px;
      font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
      background: rgba(37,99,235,0.08); color: var(--accent-blue-dark);
      border: 1px solid rgba(37,99,235,0.2);
      position: relative; overflow: hidden;
      transition: all var(--transition-fast);
    }
    .product-cta::before {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.4) 45%, transparent 55%);
      background-size: 250% 100%;
      animation: btnShimmer 3.5s ease-in-out infinite;
      pointer-events: none;
    }
    .product-cta:hover {
      background: rgba(37,99,235,0.15);
      border-color: rgba(37,99,235,0.4);
      transform: translateY(-1px);
    }

    /* Divider between brand sections */
    .brand-divider {
      border: none; border-top: 1px solid rgba(148,163,184,0.3);
      margin: 0;
    }

    /* Why section */
    .vd-list { list-style: none; padding: 0; margin: 0; }
    .vd-list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.9; color: var(--text-secondary); }
    .vd-list li::before {
      content: ""; position: absolute; left: 0; top: 0.8em;
      width: 6px; height: 6px; border-radius: 999px;
      background: radial-gradient(circle, #FFF, var(--accent-blue));
      box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
    }

    /* FAQ */
    .faq-list {
      max-width: 720px; margin: 0 auto; border-radius: var(--radius-lg);
      border: 1px solid rgba(148,163,184,0.5);
      background: linear-gradient(135deg, rgba(249,250,251,0.96), rgba(229,231,235,0.9));
      overflow: hidden;
    }
    .faq-item + .faq-item { border-top: 1px solid rgba(148,163,184,0.4); }
    .faq-question {
      width: 100%; text-align: left; background: transparent; border: 0;
      padding: 14px 18px; font-size: 14px; font-weight: 500; color: var(--text-main);
      display: flex; justify-content: space-between; align-items: center; cursor: pointer;
    }
    .faq-question span { font-family: "Oswald", sans-serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
    .faq-icon { font-size: 16px; color: var(--text-muted); transition: transform var(--transition-fast); }
    .faq-item.open .faq-icon { transform: rotate(90deg); }
    .faq-answer {
      max-height: 0; overflow: hidden; padding: 0 18px;
      font-size: 13px; line-height: 1.7; color: var(--text-secondary);
      transition: max-height 0.22s ease-out, padding-bottom 0.22s ease-out;
    }
    .faq-item.open .faq-answer { max-height: 200px; padding-bottom: 12px; }

    /* Contact */
    .contact-inner { display: grid; gap: 24px; }
    @media (min-width: 992px) { .contact-inner { grid-template-columns: 0.9fr 1.1fr; align-items: center; } }
    .vd-section-title-light { color: #E5E7EB; }
    .contact-subtitle { font-size: 14px; line-height: 1.8; color: #CBD5F5; max-width: 480px; }
    .contact-form {
      background: radial-gradient(circle at top left, rgba(15,23,42,0.6), rgba(15,23,42,0.95));
      border-radius: var(--radius-lg); padding: 18px 18px 20px;
      border: 1px solid rgba(148,163,184,0.6); box-shadow: 0 18px 40px rgba(0,0,0,0.55);
    }
    .form-row { display: grid; gap: 14px; }
    @media (min-width: 768px) { .form-row { grid-template-columns: 1fr 1fr; } }
    .form-field { margin-bottom: 12px; }
    .form-field label { display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #9CA3AF; margin-bottom: 6px; }
    .form-field input, .form-field select, .form-field textarea {
      width: 100%; border-radius: 10px; border: 1px solid rgba(148,163,184,0.7);
      background: rgba(15,23,42,0.85); color: #E5E7EB; padding: 8px 10px;
      font-size: 13px; font-family: inherit; outline: none;
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }
    .form-field input:focus, .form-field select:focus, .form-field textarea:focus {
      border-color: var(--accent-blue); box-shadow: 0 0 0 1px rgba(37,99,235,0.6);
      background: rgba(15,23,42,0.95);
    }
    .contact-form .vd-btn { width: 100%; margin-top: 6px; justify-content: center; }

    /* Scroll animation */
    .vd-section, .brand-catalog-section {
      opacity: 0; transform: translateY(20px);
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    .vd-section.visible, .brand-catalog-section.visible { opacity: 1; transform: translateY(0); }

    /* ====== GRADIENT FLOW: DARK → LAVENDER ====== */
    /* Brand marquee bar */
    .brand-marquee {
      overflow: hidden;
      background: linear-gradient(180deg, #0D1220, #131B30);
      padding: 20px 0;
      position: relative;
      border-top: 1px solid rgba(148,163,184,0.15);
      border-bottom: 1px solid rgba(148,163,184,0.15);
    }
    .marquee-track {
      display: flex;
      width: max-content;
      animation: marqueeScroll 20s linear infinite;
    }
    .marquee-track:hover { animation-play-state: paused; }
    @keyframes marqueeScroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .marquee-item {
      font-family: "Anton", sans-serif;
      font-size: 28px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 0 48px;
      white-space: nowrap;
      background: linear-gradient(
        105deg,
        #C0C0C0 0%, #C0C0C0 35%,
        #FFFFFF 42%, #F8F8F8 44%, #FFFFFF 46%, #A0A0A0 48%,
        #C0C0C0 55%, #C0C0C0 100%
      );
      background-size: 300% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: silverShimmer 4s ease-in-out infinite;
    }
    .marquee-sep {
      font-size: 24px; padding: 0 8px;
      color: rgba(148,163,184,0.3);
    }
    @media (min-width: 768px) { .marquee-item { font-size: 36px; padding: 0 64px; } }
    @media (min-width: 1200px) { .marquee-item { font-size: 44px; padding: 0 80px; } }

    /* Step 2: Categories — dark navy-purple */
    #catalog {
      background: linear-gradient(180deg, #111827, #1A1F3A) !important;
      color: #E5E7EB;
    }
    #catalog .vd-section-title { color: #818CF8; }
    #catalog .vd-section-heading { color: #E5E7EB; }
    #catalog .category-text { color: #B0B8CC; }
    #catalog .category-title { color: #F1F5F9; }
    #catalog .vd-link { color: #818CF8; }
    #catalog .category-card {
      background: linear-gradient(135deg, rgba(30,35,60,0.95), rgba(25,28,50,0.9));
      border-color: rgba(129,140,248,0.2);
    }
    #catalog .category-card:hover { border-color: rgba(129,140,248,0.5); }

    /* Step 3: Llumar — deep indigo-purple */
    #llumar-catalog {
      background: linear-gradient(180deg, #1A1F3A, #231F45) !important;
      color: #E5E7EB;
    }
    #llumar-catalog .brand-catalog-header h2 { color: #E5E7EB; }
    #llumar-catalog .brand-catalog-desc { color: #B0B8CC; }
    #llumar-catalog .brand-catalog-badge { background: rgba(129,140,248,0.15); color: #818CF8; border-color: rgba(129,140,248,0.35); }
    #llumar-catalog .product-card {
      background: linear-gradient(135deg, rgba(35,31,69,0.95), rgba(28,25,55,0.9));
      border-color: rgba(129,140,248,0.2);
    }
    #llumar-catalog .product-card:hover { border-color: rgba(129,140,248,0.4); }
    #llumar-catalog .product-card-name { color: #F1F5F9; }
    #llumar-catalog .product-card-desc { color: #B0B8CC; }
    #llumar-catalog .product-specs dt { color: #8B8FA8; }
    #llumar-catalog .product-specs dd { color: #C8CDE0; }
    #llumar-catalog .product-application { background: rgba(129,140,248,0.1); color: #818CF8; }
    #llumar-catalog .product-cta { background: rgba(129,140,248,0.1); color: #A5B4FC; border-color: rgba(129,140,248,0.25); }
    #llumar-catalog .product-cta:hover { background: rgba(129,140,248,0.2); border-color: rgba(129,140,248,0.45); }

    /* Step 4: XPEL — medium purple */
    #xpel-catalog {
      background: linear-gradient(180deg, #231F45, #2D2550) !important;
      color: #E5E7EB;
    }
    #xpel-catalog .brand-catalog-header h2 { color: #E5E7EB; }
    #xpel-catalog .brand-catalog-desc { color: #B8BBCF; }
    #xpel-catalog .brand-catalog-badge { background: rgba(167,139,250,0.15); color: #A78BFA; border-color: rgba(167,139,250,0.35); }
    #xpel-catalog .product-card {
      background: linear-gradient(135deg, rgba(45,37,80,0.95), rgba(38,32,70,0.9));
      border-color: rgba(167,139,250,0.2);
    }
    #xpel-catalog .product-card:hover { border-color: rgba(167,139,250,0.4); }
    #xpel-catalog .product-card-name { color: #F1F5F9; }
    #xpel-catalog .product-card-desc { color: #B8BBCF; }
    #xpel-catalog .product-specs dt { color: #9090A8; }
    #xpel-catalog .product-specs dd { color: #CDD0E0; }
    #xpel-catalog .product-application { background: rgba(167,139,250,0.1); color: #A78BFA; }
    #xpel-catalog .product-cta { background: rgba(167,139,250,0.1); color: #C4B5FD; border-color: rgba(167,139,250,0.25); }
    #xpel-catalog .product-cta:hover { background: rgba(167,139,250,0.2); border-color: rgba(167,139,250,0.45); }

    /* Step 5: SunTek — warm purple */
    #suntek-catalog {
      background: linear-gradient(180deg, #2D2550, #3A2D5C) !important;
      color: #E5E7EB;
    }
    #suntek-catalog .brand-catalog-header h2 { color: #E5E7EB; }
    #suntek-catalog .brand-catalog-desc { color: #C0BCDA; }
    #suntek-catalog .brand-catalog-badge { background: rgba(192,132,252,0.15); color: #C084FC; border-color: rgba(192,132,252,0.35); }
    #suntek-catalog .product-card {
      background: linear-gradient(135deg, rgba(58,45,92,0.95), rgba(48,38,78,0.9));
      border-color: rgba(192,132,252,0.2);
    }
    #suntek-catalog .product-card:hover { border-color: rgba(192,132,252,0.4); }
    #suntek-catalog .product-card-name { color: #F1F5F9; }
    #suntek-catalog .product-card-desc { color: #C0BCDA; }
    #suntek-catalog .product-specs dt { color: #9898B0; }
    #suntek-catalog .product-specs dd { color: #D0D0E5; }
    #suntek-catalog .product-application { background: rgba(192,132,252,0.1); color: #C084FC; }
    #suntek-catalog .product-cta { background: rgba(192,132,252,0.1); color: #D8B4FE; border-color: rgba(192,132,252,0.25); }
    #suntek-catalog .product-cta:hover { background: rgba(192,132,252,0.2); border-color: rgba(192,132,252,0.45); }

    /* Step 6: Benefits — lighter purple */
    #benefits {
      background: linear-gradient(180deg, #3A2D5C, #4A3870) !important;
      color: #E5E7EB;
      position: relative; overflow: hidden;
    }
    #benefits .vd-section-title { color: #C084FC; }
    #benefits .vd-section-heading { color: #E5E7EB; }
    #benefits .benefit-card {
      background: linear-gradient(135deg, rgba(74,56,112,0.8), rgba(60,45,95,0.7));
      border-color: rgba(192,132,252,0.2);
    }
    #benefits .benefit-title { color: #F1F5F9; }
    #benefits .benefit-text { color: #C5C0DD; }

    /* Parallax bg photo on benefits */
    .parallax-bg-section {
      position: relative; overflow: hidden;
    }
    .parallax-bg-layer {
      position: absolute; inset: -60px; z-index: 0;
      background-size: cover; background-position: center;
      opacity: 0.08; will-change: transform;
    }
    .parallax-bg-section > .vd-container {
      position: relative; z-index: 1;
    }

    /* Step 7: Use cases — mid-lavender purple */
    #use-cases {
      background: linear-gradient(180deg, #4A3870, #5C4585) !important;
      color: #E5E7EB;
      position: relative; overflow: hidden;
    }
    #use-cases .vd-section-title { color: #D8B4FE; }
    #use-cases .vd-section-heading { color: #E5E7EB; }
    #use-cases .category-card {
      background: linear-gradient(135deg, rgba(92,69,133,0.8), rgba(76,56,115,0.7));
      border-color: rgba(216,180,254,0.2);
    }
    #use-cases .category-card:hover { border-color: rgba(216,180,254,0.45); }
    #use-cases .category-title { color: #F1F5F9; }
    #use-cases .category-text { color: #CCC5E0; }

    /* Step 8: Why — lighter lavender */
    #why {
      background: linear-gradient(180deg, #5C4585, #70559E) !important;
      color: #E5E7EB;
      position: relative; overflow: hidden;
    }
    #why .vd-section-title { color: #D8B4FE; }
    #why .vd-section-heading { color: #F1F5F9; }
    #why .vd-list li { color: #D5D0E8; }
    #why .vd-list li::before { background: radial-gradient(circle, #FFF, #C084FC); box-shadow: 0 0 0 3px rgba(192,132,252,0.25); }

    /* Step 9: FAQ — light lavender */
    #faq {
      background: linear-gradient(180deg, #70559E, #8B6DB5) !important;
      color: #E5E7EB;
      position: relative; overflow: hidden;
    }
    #faq .vd-section-title { color: #E9D5FF; }
    #faq .vd-section-heading { color: #F5F3FF; }
    #faq .faq-list {
      background: linear-gradient(135deg, rgba(139,109,181,0.5), rgba(115,85,158,0.5));
      border-color: rgba(233,213,255,0.25);
    }
    #faq .faq-item + .faq-item { border-color: rgba(233,213,255,0.2); }
    #faq .faq-question { color: #F5F3FF; }
    #faq .faq-question span { color: #E2D8F0; }
    #faq .faq-icon { color: #D8B4FE; }
    #faq .faq-answer { color: #DDD5EE; }

    /* Step 10: Contact — lavender-tinted dark */
    #contact {
      background: linear-gradient(180deg, #8B6DB5, #B59DD4) !important;
      color: #1E1040;
    }
    #contact .vd-section-title-light { color: #4A2080; }
    #contact .vd-section-heading { color: #1E1040 !important; }
    #contact .contact-subtitle { color: #3A2060; }
    #contact .contact-form {
      background: rgba(255,255,255,0.2);
      border-color: rgba(255,255,255,0.35);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    }
    #contact .form-field label { color: #4A2080; }
    #contact .form-field input,
    #contact .form-field select,
    #contact .form-field textarea {
      background: rgba(255,255,255,0.3);
      border-color: rgba(100,70,150,0.4);
      color: #1E1040;
    }
    #contact .form-field input::placeholder,
    #contact .form-field textarea::placeholder { color: rgba(30,16,64,0.5); }
    #contact .form-field input:focus,
    #contact .form-field select:focus,
    #contact .form-field textarea:focus {
      border-color: #7C3AED;
      box-shadow: 0 0 0 1px rgba(124,58,237,0.5);
      background: rgba(255,255,255,0.45);
    }
    #contact .vd-btn {
      background: rgba(124,58,237,0.15);
      border-color: rgba(124,58,237,0.4);
      color: #4A1D96;
    }
    #contact .vd-btn:hover {
      background: rgba(124,58,237,0.25);
      border-color: rgba(124,58,237,0.6);
    }

    /* Brand dividers match flow */
    .brand-divider {
      border-top: 1px solid rgba(148,163,184,0.12) !important;
      margin: 0 !important;
    }

    /* Footer area after contact */
    .vd-footer {
      background: #C8B0E0;
      padding: 20px 16px;
      text-align: center;
      font-size: 12px; color: #5A3D80;
    }
    .vd-footer a { color: #6D28D9; }

    /* ====== TELEGRAM WIDGETS ====== */
    .vd-telegram-widget { margin: 16px 0; }
    .vd-telegram-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 20px; border-radius: 999px;
      background: #0088cc; color: #fff;
      font-size: 14px; font-weight: 600;
      transition: background 0.2s;
    }
    .vd-telegram-btn:hover { background: #006da3; color: #fff; }
    .vd-telegram-float {
      position: fixed; bottom: 24px; right: 24px; z-index: 9999;
      width: 56px; height: 56px; border-radius: 50%;
      background: #0088cc; display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px rgba(0,136,204,0.4);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .vd-telegram-float:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 24px rgba(0,136,204,0.6);
    }

    /* ── Custom Shimmer Cursor ────────────────────────────── */
    @media (pointer: fine) {
      * { cursor: none !important; }
      .vd-cursor {
        position: fixed;
        top: 0; left: 0;
        width: 28px; height: 28px;
        border-radius: 50%;
        pointer-events: none;
        z-index: 99999;
        border: 2px solid rgba(255,255,255,0.6);
        background: radial-gradient(circle, rgba(181,157,212,0.25) 0%, transparent 70%);
        transform: translate(-50%, -50%);
        transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background 0.25s ease;
        mix-blend-mode: screen;
      }
      .vd-cursor::before {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: 50%;
        border: 1.5px solid transparent;
        background: conic-gradient(from var(--cursor-angle, 0deg), #C0C0C0, #FFFFFF, #B59DD4, #FFFFFF, #C0C0C0) border-box;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        animation: cursorSpin 3s linear infinite;
      }
      .vd-cursor.cursor-hover {
        width: 48px; height: 48px;
        border-color: rgba(181,157,212,0.8);
        background: radial-gradient(circle, rgba(181,157,212,0.15) 0%, transparent 70%);
      }
      .vd-cursor-dot {
        position: fixed;
        top: 0; left: 0;
        width: 5px; height: 5px;
        border-radius: 50%;
        pointer-events: none;
        z-index: 100000;
        background: #fff;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 6px 2px rgba(181,157,212,0.6);
        transition: opacity 0.2s;
      }
      @keyframes cursorSpin {
        to { --cursor-angle: 360deg; }
      }
      @property --cursor-angle {
        syntax: '<angle>';
        initial-value: 0deg;
        inherits: false;
      }
    }