@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');
    body { font-family: 'Inter', sans-serif; background-color: #0b0c0f; color: #e5e7eb; }

    .glass { background: rgba(10, 10, 12, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); }
    .glass-card { background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(0,0,0,0.25)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s ease; }
    .glass-card:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.20); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.65); }

    .gradient-text { background: linear-gradient(to right, #ffffff, #cbd5e1, #ffffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% auto; animation: gradientMove 6s linear infinite; }
    @keyframes gradientMove { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

    section { scroll-margin-top: 120px; }

    .loader { border: 2px solid rgba(255,255,255,0.12); border-radius: 50%; border-top: 2px solid rgba(255,255,255,0.9); width: 16px; height: 16px; animation: spin 1s linear infinite; }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    .hero-parallax { will-change: transform; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform 60ms linear; }

    .hero-silhouette { position: absolute; inset: 0; z-index: -30; pointer-events: none; overflow: hidden; }
    .hero-silhouette::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 52%;
      width: 920px;
      height: 920px;
      transform: translate(calc(-50% + var(--sx, 0px)), calc(-50% + var(--sy, 0px)));
      background: radial-gradient(circle, rgba(255,255,255,0.18), rgba(255,255,255,0.10) 46%, rgba(255,255,255,0.06) 70%, rgba(0,0,0,0) 78%);
      -webkit-mask-image: url("website_icon.png");
      mask-image: url("website_icon.png");
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-size: contain;
      mask-size: contain;
      filter: blur(12px);
      opacity: 0.46;
    }

    .thumb-wall { position: absolute; inset: 0; z-index: -26; pointer-events: none; overflow: hidden; opacity: 0.62; }
    .thumb-wall::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(900px 600px at 50% 45%, rgba(255,255,255,0.12), transparent 60%), linear-gradient(to bottom, rgba(0,0,0,0.20), rgba(0,0,0,0.78));
      z-index: 7;
    }

    .thumb-row {
      position: absolute;
      left: 50%;
      transform: translateX(-50%) rotate(-10deg);
      width: min(1700px, 170vw);
      display: flex;
      gap: 20px;
      mask-image: linear-gradient(to right, transparent, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, transparent);
      filter: drop-shadow(0 0 30px rgba(255,255,255,0.12));
    }

    .thumb-row-inner { display: flex; gap: 20px; will-change: transform; transform: translateX(calc(var(--offset, 0) * 1px)); }
    .thumb-strip { display: flex; gap: 20px; will-change: transform; animation-duration: var(--dur, 70s); animation-timing-function: linear; animation-iteration-count: infinite; animation-play-state: running; transform: translateZ(0); }
    .thumb-row:hover .thumb-strip { animation-play-state: paused; filter: drop-shadow(0 0 38px rgba(255,255,255,0.16)); }

    .thumb-card {
      width: 252px;
      height: 148px;
      border-radius: 18px;
      overflow: hidden;
      position: relative;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.04);
      box-shadow: 0 14px 46px rgba(0,0,0,0.58), 0 0 36px rgba(255,255,255,0.12);
      flex: 0 0 auto;
    }
    .thumb-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(140px 90px at 28% 18%, rgba(255,255,255,0.22), transparent 62%); opacity: 0.62; z-index: 2; pointer-events: none; }
    .thumb-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.0) contrast(1.03); opacity: 0.98; transform: scale(1.03); }

    .thumb-row-pos-1 { top: 16%; }
    .thumb-row-pos-2 { top: 42%; opacity: 0.66; }
    .thumb-row-pos-3 { top: 68%; opacity: 0.58; }

    @keyframes marqueeLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    @keyframes marqueeRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
    .marquee-left { animation-name: marqueeLeft; }
    .marquee-right { animation-name: marqueeRight; }

    .vouches-mask {
      position: relative;
      overflow: hidden;
      border-radius: 24px;
    }

    .vouches-mask::before, .vouches-mask::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 96px;
      z-index: 20;
      pointer-events: none;
    }

    .vouches-mask::before {
      left: 0;
      background: linear-gradient(to right, rgba(11,12,15,1), rgba(11,12,15,0));
    }

    .vouches-mask::after {
      right: 0;
      background: linear-gradient(to left, rgba(11,12,15,1), rgba(11,12,15,0));
    }

    .vouches-viewport {
      overflow: hidden;
      padding: 10px 0;
      border-radius: 24px;
    }

    .vouches-track {
      display: flex;
      gap: 18px;
      will-change: transform;
      transform: translate3d(0,0,0);
    }

    .vouch-card {
      width: 520px;
      max-width: calc(100vw - 72px);
      flex: 0 0 auto;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,0.10);
      background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(0,0,0,0.28));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 16px 54px rgba(0,0,0,0.62), 0 0 38px rgba(255,255,255,0.10);
      transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
      cursor: pointer;
    }

    .vouch-card:hover {
      transform: translateY(-6px) scale(1.01);
      border-color: rgba(255,255,255,0.18);
      box-shadow: 0 22px 72px rgba(0,0,0,0.68), 0 0 48px rgba(255,255,255,0.14);
    }

    .vouch-head {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.35);
      flex: 0 0 auto;
    }

    .vouch-head img { width: 100%; height: 100%; object-fit: cover; }

    .verified-badge {
      width: 16px;
      height: 16px;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8px;
      transform: translateY(-1px);
      opacity: 0.95;
    }

    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 700ms cubic-bezier(.2,.9,.2,1), transform 700ms cubic-bezier(.2,.9,.2,1);
      will-change: opacity, transform;
    }
    .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal.delay-1 { transition-delay: 80ms; }
    .reveal.delay-2 { transition-delay: 140ms; }

    @media (max-width: 640px) {
      .thumb-card { width: 160px; height: 96px; border-radius: 14px; }
      .thumb-row { gap: 14px; }
      .thumb-row-inner { gap: 14px; }
      .thumb-strip { gap: 14px; }
      .vouch-card { width: 430px; }
      .vouches-mask::before, .vouches-mask::after { width: 64px; }
      .verified-badge { width: 15px; height: 15px; margin-left: 7px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .vouch-card { transition: none !important; }
      .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    }