<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dtail — See it. Plan it. Before you build it.</title>
  <style>
    @font-face {
      font-family: 'Sofia Pro';
      src: url('assets/fonts/SofiaPro-Light.otf') format('opentype');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Sofia Pro';
      src: url('assets/fonts/SofiaPro-Regular.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Sofia Pro';
      src: url('assets/fonts/SofiaPro-Medium.otf') format('opentype');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Sofia Pro';
      src: url('assets/fonts/SofiaPro-SemiBold.otf') format('opentype');
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Sofia Pro';
      src: url('assets/fonts/SofiaPro-Bold.otf') format('opentype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Sofia Pro';
      src: url('assets/fonts/SofiaPro-Black.otf') format('opentype');
      font-weight: 900;
      font-style: normal;
      font-display: swap;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --yellow: #F0E040;
      --black: #0A0A0A;
      --dark: #111111;
      --mid: #1A1A1A;
      --grey: #252525;
      --text-muted: #888;
      --text-light: #C0C0C0;
      --radius: 16px;
      --radius-sm: 10px;
      --max: 1080px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Sofia Pro', sans-serif;
      background: var(--black);
      color: #fff;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* ─── NAV ──────────────────────────────────────── */
    nav {
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 32px;
      height: 64px;
      background: rgba(10,10,10,0.9);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }

    .nav-logo img {
      height: 22px;
      filter: invert(1);
      display: block;
    }

    .nav-cta {
      background: var(--yellow);
      color: var(--black);
      font-family: 'Sofia Pro', sans-serif;
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.02em;
      padding: 10px 20px;
      border-radius: 100px;
      text-decoration: none;
      transition: opacity 0.2s, transform 0.15s;
    }
    .nav-cta:hover { opacity: 0.85; transform: translateY(-1px); }

    /* ─── HERO ─────────────────────────────────────── */
    .hero {
      min-height: 100svh;
      display: grid;
      grid-template-rows: 1fr auto;
      position: relative;
      overflow: hidden;
    }

    .hero-image {
      position: absolute;
      inset: 0;
      background: url('assets/store-yoga.png') center center / cover no-repeat;
      opacity: 0.35;
      transform: scale(1.04);
      transition: transform 8s ease-out;
    }

    .hero-image.loaded { transform: scale(1); }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(10,10,10,0.5) 0%,
        rgba(10,10,10,0.2) 40%,
        rgba(10,10,10,0.75) 80%,
        rgba(10,10,10,1) 100%
      );
    }

    .hero-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 0 32px 72px;
      max-width: var(--max);
      width: 100%;
      margin: 0 auto;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--yellow);
      margin-bottom: 24px;
    }

    .hero-eyebrow::before {
      content: '';
      width: 24px;
      height: 2px;
      background: var(--yellow);
      border-radius: 2px;
    }

    .hero h1 {
      font-size: clamp(44px, 9vw, 96px);
      font-weight: 900;
      line-height: 1.0;
      letter-spacing: -0.03em;
      margin-bottom: 28px;
      max-width: 780px;
    }

    .hero h1 em {
      font-style: normal;
      color: var(--yellow);
    }

    .hero-sub {
      font-size: clamp(15px, 2vw, 19px);
      font-weight: 400;
      color: var(--text-light);
      max-width: 520px;
      margin-bottom: 44px;
      line-height: 1.65;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 56px;
    }

    .btn-primary {
      background: var(--yellow);
      color: var(--black);
      font-family: 'Sofia Pro', sans-serif;
      font-weight: 700;
      font-size: 15px;
      padding: 15px 32px;
      border-radius: 100px;
      text-decoration: none;
      transition: opacity 0.2s, transform 0.15s;
    }
    .btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }

    .btn-ghost {
      background: transparent;
      color: #fff;
      font-family: 'Sofia Pro', sans-serif;
      font-weight: 600;
      font-size: 15px;
      padding: 15px 32px;
      border-radius: 100px;
      border: 1px solid rgba(255,255,255,0.25);
      text-decoration: none;
      transition: border-color 0.2s, background 0.2s;
    }
    .btn-ghost:hover {
      border-color: rgba(255,255,255,0.55);
      background: rgba(255,255,255,0.06);
    }

    .hero-trust {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .trust-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    .trust-sep {
      width: 1px;
      height: 16px;
      background: rgba(255,255,255,0.15);
    }

    .trust-brands {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }

    .trust-brand {
      font-size: 13px;
      font-weight: 700;
      color: rgba(255,255,255,0.3);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* ─── SHARED ────────────────────────────────────── */
    .container {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 32px;
    }

    .section-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--yellow);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .section-label::before {
      content: '';
      width: 20px;
      height: 2px;
      background: var(--yellow);
      border-radius: 2px;
    }

    .section-title {
      font-size: clamp(30px, 5.5vw, 52px);
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: 1.05;
      margin-bottom: 20px;
    }

    .section-sub {
      font-size: 17px;
      font-weight: 400;
      color: var(--text-light);
      max-width: 560px;
      line-height: 1.65;
    }

    /* ─── PROBLEM ───────────────────────────────────── */
    .problem-section {
      padding: 100px 32px;
      background: var(--dark);
    }

    .problem-grid {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }

    .pain-list {
      list-style: none;
      margin-top: 40px;
      display: grid;
      gap: 12px;
    }

    .pain-list li {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 18px 20px;
      background: var(--mid);
      border-radius: var(--radius-sm);
      border: 1px solid rgba(255,255,255,0.05);
      font-size: 15px;
      color: var(--text-light);
      line-height: 1.5;
      transition: border-color 0.2s;
    }

    .pain-list li:hover { border-color: rgba(240,224,64,0.2); }

    .pain-dot {
      flex-shrink: 0;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--yellow);
      margin-top: 6px;
    }

    .problem-right {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    blockquote {
      padding: 28px 32px;
      border-left: 3px solid var(--yellow);
      background: rgba(240,224,64,0.05);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }

    blockquote p {
      font-size: 17px;
      font-weight: 400;
      font-style: italic;
      color: #ddd;
      line-height: 1.7;
      margin-bottom: 14px;
    }

    blockquote cite {
      font-size: 13px;
      font-weight: 600;
      color: var(--yellow);
      font-style: normal;
      letter-spacing: 0.03em;
    }

    /* ─── WHAT IS DTAIL ─────────────────────────────── */
    .what-section { padding: 100px 32px; }

    .what-inner {
      max-width: var(--max);
      margin: 0 auto;
    }

    .what-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
      margin-top: 56px;
    }

    .what-image {
      border-radius: 20px;
      overflow: hidden;
      aspect-ratio: 4/3;
      position: relative;
    }

    .what-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.6s ease;
    }

    .what-image:hover img { transform: scale(1.03); }

    .diff-list {
      display: grid;
      gap: 24px;
      margin-top: 40px;
    }

    .diff-item {
      display: flex;
      gap: 16px;
      align-items: flex-start;
    }

    .diff-num {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      background: rgba(240,224,64,0.12);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      color: var(--yellow);
    }

    .diff-item h3 {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .diff-item p {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.55;
    }

    /* ─── PLATFORM ──────────────────────────────────── */
    .platform-section {
      padding: 100px 32px;
      background: var(--dark);
    }

    .platform-inner {
      max-width: var(--max);
      margin: 0 auto;
    }

    .platform-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: end;
      margin-bottom: 64px;
    }

    .modules {
      display: grid;
      gap: 2px;
      border-radius: 20px;
      overflow: hidden;
    }

    .module-card {
      background: var(--mid);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      overflow: hidden;
      transition: background 0.2s;
    }

    .module-card:hover { background: #202020; }

    .module-content {
      padding: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .module-tag {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--yellow);
      background: rgba(240,224,64,0.1);
      padding: 5px 12px;
      border-radius: 100px;
      margin-bottom: 20px;
      width: fit-content;
    }

    .module-content h3 {
      font-size: 20px;
      font-weight: 800;
      margin-bottom: 10px;
      letter-spacing: -0.02em;
      line-height: 1.2;
    }

    .module-content > p {
      font-size: 14px;
      color: var(--text-muted);
      margin-bottom: 20px;
      line-height: 1.6;
    }

    .module-features {
      list-style: none;
      display: grid;
      gap: 8px;
    }

    .module-features li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-light);
    }

    .module-features li::before {
      content: '';
      flex-shrink: 0;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--yellow);
    }

    .module-visual {
      overflow: hidden;
      background: #0f0f0f;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 240px;
    }

    .module-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: left top;
      display: block;
      opacity: 0.9;
    }

    /* ─── RESULTS ───────────────────────────────────── */
    .results-section { padding: 100px 32px; }

    .results-inner {
      max-width: var(--max);
      margin: 0 auto;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin: 56px 0 0;
    }

    .stat-card {
      padding: 40px 32px;
      background: var(--mid);
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,0.06);
      text-align: center;
      transition: border-color 0.25s, transform 0.25s;
    }

    .stat-card:hover {
      border-color: rgba(240,224,64,0.3);
      transform: translateY(-2px);
    }

    .stat-number {
      font-size: clamp(48px, 8vw, 72px);
      font-weight: 900;
      color: var(--yellow);
      letter-spacing: -0.04em;
      line-height: 1;
      margin-bottom: 10px;
    }

    .stat-label {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-muted);
    }

    /* ─── CUSTOMER STORIES ──────────────────────────── */
    .stories-section {
      padding: 100px 32px;
      background: var(--dark);
    }

    .stories-inner {
      max-width: var(--max);
      margin: 0 auto;
    }

    .stories-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: end;
      margin-bottom: 56px;
    }

    .story-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 16px;
    }

    .story-card {
      background: var(--mid);
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.06);
      transition: border-color 0.25s, transform 0.25s;
    }

    .story-card:hover {
      border-color: rgba(240,224,64,0.2);
      transform: translateY(-2px);
    }

    .story-image {
      aspect-ratio: 16/10;
      overflow: hidden;
    }

    .story-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }

    .story-card:hover .story-image img { transform: scale(1.04); }

    .story-body { padding: 24px; }

    .story-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      flex-wrap: wrap;
      gap: 8px;
    }

    .story-brand {
      font-size: 17px;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .story-type {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--yellow);
      background: rgba(240,224,64,0.1);
      padding: 4px 10px;
      border-radius: 100px;
    }

    .story-card p {
      font-size: 13px;
      font-weight: 400;
      color: var(--text-muted);
      line-height: 1.65;
    }

    .hunkemoller-quote { margin-top: 16px; }

    /* ─── ABOUT ─────────────────────────────────────── */
    .about-section { padding: 100px 32px; }

    .about-inner {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .about-text p {
      font-size: 16px;
      font-weight: 400;
      color: var(--text-light);
      line-height: 1.75;
      margin-top: 24px;
    }

    .about-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .about-stat {
      padding: 28px;
      background: var(--mid);
      border-radius: var(--radius-sm);
      border: 1px solid rgba(255,255,255,0.06);
    }

    .about-stat-number {
      font-size: 36px;
      font-weight: 900;
      color: var(--yellow);
      letter-spacing: -0.03em;
      line-height: 1;
      margin-bottom: 6px;
    }

    .about-stat-label {
      font-size: 13px;
      font-weight: 400;
      color: var(--text-muted);
    }

    .iso-badge {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 18px 20px;
      background: rgba(240,224,64,0.06);
      border-radius: var(--radius-sm);
      border: 1px solid rgba(240,224,64,0.15);
      font-size: 13px;
      font-weight: 600;
      color: var(--yellow);
    }

    /* ─── CTA ───────────────────────────────────────── */
    .cta-section {
      padding: 120px 32px;
      text-align: center;
      background: var(--dark);
      position: relative;
      overflow: hidden;
    }

    .cta-bg {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(240,224,64,0.1) 0%, transparent 70%);
      pointer-events: none;
    }

    .cta-inner {
      position: relative;
      z-index: 1;
      max-width: 640px;
      margin: 0 auto;
    }

    .cta-section h2 {
      font-size: clamp(34px, 6vw, 64px);
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: 1.05;
      margin-bottom: 20px;
    }

    .cta-section h2 span { color: var(--yellow); }

    .cta-section p {
      font-size: 17px;
      color: var(--text-muted);
      margin-bottom: 44px;
    }

    .cta-actions {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 44px;
    }

    .people-cards {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 16px;
      margin-bottom: 44px;
    }

    .person-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 18px 24px;
      background: var(--mid);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--radius);
      text-decoration: none;
      color: #fff;
      min-width: 260px;
      transition: border-color 0.2s, transform 0.2s, background 0.2s;
    }

    .person-card:hover {
      border-color: rgba(240,224,64,0.4);
      background: #202020;
      transform: translateY(-2px);
    }

    .person-avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: rgba(240,224,64,0.15);
      color: var(--yellow);
      font-size: 13px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      letter-spacing: 0.02em;
      overflow: hidden;
      border: 2px solid rgba(255,255,255,0.08);
    }

    .person-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }

    .person-info {
      display: flex;
      flex-direction: column;
      gap: 3px;
      flex: 1;
      text-align: left;
    }

    .person-name {
      font-size: 15px;
      font-weight: 700;
    }

    .person-role {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
      letter-spacing: 0.04em;
    }

    .person-li {
      flex-shrink: 0;
      color: #0A66C2;
      opacity: 0.8;
    }

    .person-card:hover .person-li { opacity: 1; }

    .contact-links {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 28px;
    }

    .contact-link {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-muted);
      text-decoration: none;
      transition: color 0.2s;
    }

    .contact-link:hover { color: #fff; }

    /* ─── FOOTER ────────────────────────────────────── */
    footer {
      padding: 28px 32px;
      border-top: 1px solid rgba(255,255,255,0.06);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
    }

    .footer-logo img {
      height: 18px;
      filter: invert(1);
      opacity: 0.7;
      display: block;
    }

    .footer-badges {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .badge {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      border: 1px solid rgba(255,255,255,0.1);
      padding: 4px 10px;
      border-radius: 100px;
      letter-spacing: 0.04em;
    }

    footer p {
      font-size: 12px;
      color: rgba(255,255,255,0.25);
    }

    /* ─── SCROLL ANIMATIONS ─────────────────────────── */
    .fade-up {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.65s ease, transform 0.65s ease;
    }
    .fade-up.visible {
      opacity: 1;
      transform: none;
    }

    /* ─── RESPONSIVE ────────────────────────────────── */
    @media (max-width: 860px) {
      nav { padding: 0 20px; }
      .container,
      .problem-section,
      .what-section,
      .platform-section,
      .results-section,
      .stories-section,
      .about-section,
      .cta-section { padding-left: 20px; padding-right: 20px; }

      .hero-content { padding: 0 20px 60px; }

      .problem-grid { grid-template-columns: 1fr; gap: 48px; }
      .what-grid { grid-template-columns: 1fr; }
      .what-image { order: -1; }

      .platform-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }

      .module-card { grid-template-columns: 1fr; }
      .module-visual { min-height: 200px; }

      .stats-grid { grid-template-columns: 1fr; }

      .story-cards { grid-template-columns: 1fr; }
      .stories-header { grid-template-columns: 1fr; gap: 24px; }

      .about-inner { grid-template-columns: 1fr; gap: 48px; }

      footer { justify-content: center; text-align: center; }
    }

    @media (max-width: 520px) {
      .hero h1 { letter-spacing: -0.02em; }
      .about-stats { grid-template-columns: 1fr 1fr; }
      .hero-actions { gap: 10px; }
      .btn-primary, .btn-ghost { padding: 13px 24px; font-size: 14px; }
    }
  </style>
</head>
<body>

  <!-- NAV -->
  <nav>
    <a href="#" class="nav-logo">
      <img src="assets/logo.png" alt="Dtail" />
    </a>
    <a href="#contact" class="nav-cta">Get in touch</a>
  </nav>

  <!-- HERO -->
  <header class="hero">
    <div class="hero-image" id="heroImg"></div>
    <div class="hero-overlay"></div>
    <div class="hero-content">
      <div class="hero-eyebrow fade-up">Visual operating system for fashion retail</div>
      <h1 class="fade-up">See it.<br><em>Plan it.</em><br>Before you build it.</h1>
      <p class="hero-sub fade-up">Dtail helps fashion brands make better, faster decisions — by seeing the real-world impact of their choices in immersive 3D environments.</p>
      <div class="hero-actions fade-up">
        <a href="#contact" class="btn-primary">Get in touch</a>
        <a href="#platform" class="btn-ghost">Explore the platform</a>
      </div>
      <div class="hero-trust fade-up">
        <span class="trust-label">Trusted by</span>
        <span class="trust-sep"></span>
        <div class="trust-brands">
          <span class="trust-brand">Adidas</span>
          <span class="trust-brand">Nike</span>
          <span class="trust-brand">Hunkemöller</span>
        </div>
      </div>
    </div>
  </header>

  <!-- PROBLEM -->
  <section class="problem-section">
    <div class="problem-grid">
      <div>
        <div class="section-label fade-up">The problem</div>
        <h2 class="section-title fade-up">Still planning<br>in spreadsheets?</h2>
        <ul class="pain-list">
          <li class="fade-up"><span class="pain-dot"></span>Teams in silos — design, buying, VM, and sales all misaligned</li>
          <li class="fade-up"><span class="pain-dot"></span>Decisions made from Excel and PDFs that don't reflect reality</li>
          <li class="fade-up"><span class="pain-dot"></span>Expensive agencies hired to visualise stores — slow, costly, non-iterative</li>
          <li class="fade-up"><span class="pain-dot"></span>Regional teams drift from global brand vision without shared visual context</li>
          <li class="fade-up"><span class="pain-dot"></span>Missed sales from poor space planning and overstock</li>
        </ul>
      </div>
      <div class="problem-right">
        <p class="section-sub fade-up">The cost of deciding in the dark adds up faster than you think. Every team working from their own version of the plan compounds misalignment — and your bottom line pays the price.</p>
        <blockquote class="fade-up">
          <p>"The costs we're saving on briefing local agencies alone provided the ROI we needed to convince senior leadership."</p>
          <cite>— Adidas Visual Merchandising Team</cite>
        </blockquote>
      </div>
    </div>
  </section>

  <!-- WHAT IS DTAIL -->
  <section class="what-section">
    <div class="what-inner">
      <div class="section-label fade-up">What is Dtail?</div>
      <h2 class="section-title fade-up">One platform.<br>Every planning decision.</h2>

      <div class="what-grid">
        <div class="what-image fade-up">
          <img src="assets/store-lvmh.png" alt="High-fidelity 3D store visualisation in Dtail" loading="lazy" />
        </div>
        <div>
          <p class="section-sub fade-up">Dtail helps fashion brands see exactly how their stores, assortments, and product presentations will look and perform — without physical samples, external agencies, or endless email chains.</p>
          <div class="diff-list">
            <div class="diff-item fade-up">
              <div class="diff-num">01</div>
              <div>
                <h3>High-fidelity, real-time 3D</h3>
                <p>Far beyond static renders — changes update instantly so teams can explore and iterate without waiting.</p>
              </div>
            </div>
            <div class="diff-item fade-up">
              <div class="diff-num">02</div>
              <div>
                <h3>Built for fashion</h3>
                <p>Assortments, seasons, fixtures — all native to the platform. No generic tooling adapted for retail.</p>
              </div>
            </div>
            <div class="diff-item fade-up">
              <div class="diff-num">03</div>
              <div>
                <h3>One platform, all teams</h3>
                <p>VM, planning, buying, and sales all work in a single shared view — eliminating silos instantly.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- PLATFORM -->
  <section class="platform-section" id="platform">
    <div class="platform-inner">
      <div class="platform-header">
        <div>
          <div class="section-label fade-up">The platform</div>
          <h2 class="section-title fade-up">Three modules.<br>One connected<br>workflow.</h2>
        </div>
        <p class="section-sub fade-up">Each module solves a different planning challenge — together they give your entire organisation a single source of visual truth.</p>
      </div>

      <div class="modules fade-up">
        <div class="module-card">
          <div class="module-content">
            <span class="module-tag">Catalog</span>
            <h3>Single source of truth for product content</h3>
            <p>Centralise all 3D and 2D product assets across global teams — always accurate, always up to date.</p>
            <ul class="module-features">
              <li>Centralise 3D and 2D assets across global teams</li>
              <li>Always accurate and always up to date</li>
              <li>Accessible from any web browser</li>
            </ul>
          </div>
          <div class="module-visual">
            <img src="assets/catalog.png" alt="Dtail Catalog — product content management" loading="lazy" />
          </div>
        </div>

        <div class="module-card">
          <div class="module-content">
            <span class="module-tag">Canvas</span>
            <h3>Visual assortment planning at a glance</h3>
            <p>Evaluate your full range in one view and align regional and global teams in minutes — not weeks.</p>
            <ul class="module-features">
              <li>Evaluate balance: price, gender, category, segment</li>
              <li>Align regional and global teams faster</li>
              <li>Generate sense-check overviews in minutes</li>
            </ul>
          </div>
          <div class="module-visual">
            <img src="assets/canvas.png" alt="Dtail Canvas — visual assortment planning" loading="lazy" />
          </div>
        </div>

        <div class="module-card">
          <div class="module-content">
            <span class="module-tag">Spaces</span>
            <h3>Immersive, real-time 3D store planning</h3>
            <p>Configure fixtures as you would in a real store, generate planogram documents instantly, and present live to wholesale partners.</p>
            <ul class="module-features">
              <li>Configure fixtures like in a real store</li>
              <li>Generate planogram documents in minutes</li>
              <li>Present to wholesale partners live</li>
            </ul>
          </div>
          <div class="module-visual">
            <img src="assets/spaces.png" alt="Dtail Spaces — 3D store planning" loading="lazy" />
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- RESULTS -->
  <section class="results-section">
    <div class="results-inner">
      <div class="section-label fade-up">Proven results</div>
      <h2 class="section-title fade-up">Real outcomes from brands<br>already using Dtail.</h2>
      <div class="stats-grid">
        <div class="stat-card fade-up">
          <div class="stat-number">10×</div>
          <div class="stat-label">Faster planograms</div>
        </div>
        <div class="stat-card fade-up">
          <div class="stat-number">50%</div>
          <div class="stat-label">Agency cost reduction</div>
        </div>
        <div class="stat-card fade-up">
          <div class="stat-number">20%+</div>
          <div class="stat-label">Wholesale sell-in uplift</div>
        </div>
      </div>
    </div>
  </section>

  <!-- CUSTOMER STORIES -->
  <section class="stories-section">
    <div class="stories-inner">
      <div class="stories-header">
        <div>
          <div class="section-label fade-up">Customer stories</div>
          <h2 class="section-title fade-up">The world's leading<br>fashion brands<br>choose Dtail.</h2>
        </div>
        <blockquote class="fade-up">
          <p>"Dtail allows us to connect teams through state-of-the-art space visualisation and make better assortment and planning decisions."</p>
          <cite>— Hunkemöller</cite>
        </blockquote>
      </div>

      <div class="story-cards">
        <div class="story-card fade-up">
          <div class="story-image">
            <img src="assets/story-adidas.png" alt="Adidas store visualisation in Dtail" loading="lazy" />
          </div>
          <div class="story-body">
            <div class="story-header">
              <span class="story-brand">Adidas</span>
              <span class="story-type">Space planning &amp; VM</span>
            </div>
            <p>Regional teams generate planograms in Dtail — saving up to 50% on local 3D rendering agency costs while maintaining brand consistency across every market.</p>
          </div>
        </div>

        <div class="story-card fade-up">
          <div class="story-image">
            <img src="assets/story-nike.png" alt="Nike store visualisation in Dtail" loading="lazy" />
          </div>
          <div class="story-body">
            <div class="story-header">
              <span class="story-brand">Nike</span>
              <span class="story-type">Key account sell-in</span>
            </div>
            <p>Channel teams present live in Spaces to wholesale partners — achieving a 20% increase in sell-in by letting buyers experience collections in context.</p>
          </div>
        </div>

        <div class="story-card fade-up">
          <div class="story-image">
            <img src="assets/story-hunkemoller.png" alt="Hunkemöller store visualisation in Dtail" loading="lazy" />
          </div>
          <div class="story-body">
            <div class="story-header">
              <span class="story-brand">Hunkemöller</span>
              <span class="story-type">Assortment planning</span>
            </div>
            <p>Canvas replaced manual product overviews — reducing allocation errors and alignment delays across their entire buying and merchandising process.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ABOUT -->
  <section class="about-section">
    <div class="about-inner">
      <div>
        <div class="section-label fade-up">About</div>
        <h2 class="section-title fade-up">A PixelPool product</h2>
        <p class="about-text fade-up">
          <p>PixelPool is a team of 100+ specialists across the Netherlands, United States, and Bulgaria — with over 20 years of experience building 3D solutions for the world's leading fashion brands.</p>
          <p>Dtail is enterprise-ready and designed secure by design, giving large organisations the confidence to adopt it at scale.</p>
        </p>
      </div>
      <div class="about-stats">
        <div class="about-stat fade-up">
          <div class="about-stat-number">100+</div>
          <div class="about-stat-label">Team members</div>
        </div>
        <div class="about-stat fade-up">
          <div class="about-stat-number">20+</div>
          <div class="about-stat-label">Years 3D expertise</div>
        </div>
        <div class="iso-badge fade-up">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1.5"/>
            <path d="M5 8l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          ISO 27001 Certified · Enterprise-ready · Secure by design
        </div>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="cta-section" id="contact">
    <div class="cta-bg"></div>
    <div class="cta-inner">
      <div class="section-label fade-up" style="justify-content: center;">Get started</div>
      <h2 class="fade-up">Ready to <span>see it</span><br>before you build it?</h2>
      <p class="fade-up">Reach out to one of our team members on LinkedIn to book a personalised demo.</p>
      <div class="people-cards fade-up">
        <a href="https://www.linkedin.com/in/maartenvandooren/" class="person-card" target="_blank" rel="noopener">
          <div class="person-avatar"><img src="assets/maarten.jpeg" alt="Maarten van Dooren" /></div>
          <div class="person-info">
            <span class="person-name">Maarten van Dooren</span>
            <span class="person-role">Founder</span>
          </div>
          <svg class="person-li" width="20" height="20" viewBox="0 0 16 16" fill="currentColor"><path d="M13.5 1h-11A1.5 1.5 0 001 2.5v11A1.5 1.5 0 002.5 15h11a1.5 1.5 0 001.5-1.5v-11A1.5 1.5 0 0013.5 1zM5.5 12H3.5V6.5h2V12zm-1-6.3a1.15 1.15 0 110-2.3 1.15 1.15 0 010 2.3zM13 12h-2V9c0-.8-.3-1.3-1-1.3s-1.2.5-1.2 1.3V12H6.7V6.5H8.8v.8h.03c.3-.6 1-1.1 2-.1 1.5.1 2.2 1 2.2 2.9V12z"/></svg>
        </a>
        <a href="https://www.linkedin.com/in/joostalferdinck/" class="person-card" target="_blank" rel="noopener">
          <div class="person-avatar"><img src="assets/joost.jpeg" alt="Joost Alferdinck" /></div>
          <div class="person-info">
            <span class="person-name">Joost Alferdinck</span>
            <span class="person-role">Chief Product Officer</span>
          </div>
          <svg class="person-li" width="20" height="20" viewBox="0 0 16 16" fill="currentColor"><path d="M13.5 1h-11A1.5 1.5 0 001 2.5v11A1.5 1.5 0 002.5 15h11a1.5 1.5 0 001.5-1.5v-11A1.5 1.5 0 0013.5 1zM5.5 12H3.5V6.5h2V12zm-1-6.3a1.15 1.15 0 110-2.3 1.15 1.15 0 010 2.3zM13 12h-2V9c0-.8-.3-1.3-1-1.3s-1.2.5-1.2 1.3V12H6.7V6.5H8.8v.8h.03c.3-.6 1-1.1 2-.1 1.5.1 2.2 1 2.2 2.9V12z"/></svg>
        </a>
      </div>
      <div class="contact-links fade-up">
        <a href="mailto:info@pixelpool.com" class="contact-link">
          <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M1 5l7 5 7-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
          info@pixelpool.com
        </a>
        <span class="contact-link">
          <svg width="15" height="15" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/><path d="M8 4.5V8l2.5 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
          PI Apparel EU &amp; US
        </span>
      </div>
    </div>
  </section>

  <!-- FOOTER -->
  <footer>
    <a href="#" class="footer-logo">
      <img src="assets/logo.png" alt="Dtail" />
    </a>
    <div class="footer-badges">
      <span class="badge">ISO 27001</span>
      <span class="badge">Enterprise-ready</span>
      <span class="badge">Secure by design</span>
    </div>
    <p>© 2025 PixelPool B.V. All rights reserved.</p>
  </footer>

  <script>
    // Subtle hero image parallax/zoom on load
    window.addEventListener('load', () => {
      document.getElementById('heroImg').classList.add('loaded');
    });

    // Scroll-triggered fade-up animations
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });

    document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
  </script>
</body>
</html>
