Beauty

Running

App Files Files Community

varunsardesai commited on 24 days ago

Commit

bcfc32d

verified ·

1 Parent(s): 34defb6

Update index.html

Browse files

Files changed (1) hide show

index.html +417 -892

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>SumUp Bookings — Book a Demo</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
@@ -11,16 +11,16 @@
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
-      --black:      #1E1C1C;
-      --fuchsia:    #FF61F2;
-      --fuchsia2:   #cc3fbf;
-      --golden:     #F9C300;
-      --white:      #FFFFFF;
-      --grey1:      #F0F1E7;
-      --grey:       #6B7280;
-      --lightgrey:  #E5E7EB;
-      --darkgrey:   #374151;
-      --radius:     16px;
     }
     html { scroll-behavior: smooth; }
@@ -37,7 +37,7 @@
       position: sticky;
       top: 0;
       z-index: 100;
-      background: rgba(255, 255, 255, 0.97);
       backdrop-filter: blur(10px);
       display: flex;
       align-items: center;
@@ -46,15 +46,6 @@
       height: 64px;
       border-bottom: 1px solid var(--lightgrey);
     }
-    .nav-logo {
-      font-family: 'Montserrat', sans-serif;
-      font-weight: 900;
-      font-size: 1.4rem;
-      color: var(--black);
-      letter-spacing: -0.5px;
-    }
     .nav-cta {
       background: var(--fuchsia);
       color: var(--white);
@@ -65,6 +56,7 @@
       border-radius: 8px;
       text-decoration: none;
       transition: background 0.2s;
     }
     .nav-cta:hover { background: var(--fuchsia2); }
@@ -72,19 +64,18 @@
     .hero {
       background: var(--black);
       color: var(--white);
-      padding: 100px 5% 90px;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 60px;
       align-items: center;
-      min-height: 88vh;
     }
     .hero-eyebrow {
       display: inline-block;
-      background: rgba(255, 97, 242, 0.15);
       color: var(--fuchsia);
-      font-size: 0.78rem;
       font-weight: 600;
       letter-spacing: 1.5px;
       text-transform: uppercase;
@@ -92,36 +83,22 @@
       border-radius: 100px;
       margin-bottom: 24px;
     }
     .hero h1 {
       font-family: 'Montserrat', sans-serif;
       font-weight: 900;
-      font-size: clamp(2.4rem, 4vw, 3.6rem);
-      line-height: 1.1;
-      letter-spacing: -1px;
-      margin-bottom: 24px;
-    }
-    .hero h1 em {
-      font-style: normal;
-      color: var(--fuchsia);
     }
     .hero-sub {
-      font-size: 1.1rem;
-      color: rgba(255,255,255,0.7);
       line-height: 1.7;
-      margin-bottom: 40px;
-      max-width: 500px;
-    }
-    .hero-actions {
-      display: flex;
-      gap: 16px;
-      flex-wrap: wrap;
-      align-items: center;
     }
     .btn-primary {
       background: var(--fuchsia);
       color: var(--white);
@@ -136,460 +113,279 @@
     }
     .btn-primary:hover { background: var(--fuchsia2); transform: translateY(-1px); }
-    .btn-ghost {
-      color: rgba(255,255,255,0.8);
-      font-size: 0.95rem;
-      font-weight: 500;
-      text-decoration: none;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      transition: color 0.2s;
-    }
-    .btn-ghost:hover { color: var(--white); }
-    .btn-ghost svg { transition: transform 0.2s; }
-    .btn-ghost:hover svg { transform: translateX(4px); }
-    /* Hero visual */
-    .hero-visual { position: relative; }
-    .hero-mockup {
-      background: rgba(255,255,255,0.06);
-      border: 1px solid rgba(255,255,255,0.12);
       border-radius: 20px;
-      padding: 28px;
-      position: relative;
-    }
-    .mockup-header {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      margin-bottom: 20px;
-    }
-    .mockup-dot { width: 10px; height: 10px; border-radius: 50%; }
-    .mockup-dot:nth-child(1) { background: #FF5F57; }
-    .mockup-dot:nth-child(2) { background: #FFBD2E; }
-    .mockup-dot:nth-child(3) { background: #28C840; }
-    .mockup-cal {
-      background: rgba(255,255,255,0.04);
-      border-radius: 12px;
-      padding: 20px;
-    }
-    .mockup-month {
-      font-family: 'Montserrat', sans-serif;
-      font-weight: 700;
-      font-size: 0.85rem;
-      color: rgba(255,255,255,0.6);
-      text-align: center;
-      margin-bottom: 16px;
-      letter-spacing: 1px;
-      text-transform: uppercase;
-    }
-    .mockup-grid {
-      display: grid;
-      grid-template-columns: repeat(7, 1fr);
-      gap: 6px;
-      text-align: center;
-    }
-    .mockup-day-label {
-      font-size: 0.65rem;
-      color: rgba(255,255,255,0.35);
-      font-weight: 600;
-      text-transform: uppercase;
-      padding-bottom: 6px;
-    }
-    .mockup-day {
-      font-size: 0.75rem;
-      color: rgba(255,255,255,0.5);
-      padding: 6px 2px;
-      border-radius: 6px;
-    }
-    .mockup-day.available { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.07); }
-    .mockup-day.selected { background: var(--fuchsia); color: var(--white); font-weight: 700; }
-    .mockup-day.empty { visibility: hidden; }
-    .mockup-slot { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
-    .mockup-slot-item {
-      background: rgba(255, 97, 242, 0.12);
-      border: 1px solid rgba(255, 97, 242, 0.3);
-      border-radius: 8px;
-      padding: 10px 14px;
-      font-size: 0.8rem;
-      color: var(--fuchsia);
-      font-weight: 500;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .mockup-slot-item.dim {
-      background: rgba(255,255,255,0.04);
-      border-color: rgba(255,255,255,0.08);
-      color: rgba(255,255,255,0.35);
     }
-    .hero-badge {
-      position: absolute;
-      bottom: -20px;
-      left: -20px;
-      background: var(--white);
-      border-radius: 12px;
-      padding: 14px 18px;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
     }
-    .badge-icon {
-      width: 40px; height: 40px;
-      background: rgba(255, 97, 242, 0.1);
-      border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 1.1rem;
     }
-    .badge-text strong { display: block; font-size: 0.85rem; font-weight: 700; color: var(--black); }
-    .badge-text span { font-size: 0.72rem; color: var(--grey); }
     /* ── TRUST BAR ── */
     .trust-bar {
       background: var(--white);
-      padding: 28px 5%;
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: 48px;
       flex-wrap: wrap;
       border-bottom: 1px solid var(--lightgrey);
     }
     .trust-item {
       display: flex;
       align-items: center;
-      gap: 10px;
       color: var(--grey);
-      font-size: 0.85rem;
       font-weight: 500;
     }
     .trust-item svg { color: var(--fuchsia); flex-shrink: 0; }
-    /* ── SECTION BASE ── */
-    section { padding: 96px 5%; }
     .section-label {
-      font-size: 0.75rem;
       font-weight: 600;
       letter-spacing: 2px;
       text-transform: uppercase;
       color: var(--fuchsia);
-      margin-bottom: 16px;
     }
     .section-title {
       font-family: 'Montserrat', sans-serif;
       font-weight: 800;
-      font-size: clamp(1.8rem, 3vw, 2.6rem);
-      line-height: 1.15;
       letter-spacing: -0.5px;
       color: var(--black);
-      margin-bottom: 16px;
     }
     .section-sub {
-      font-size: 1.05rem;
       color: var(--grey);
       line-height: 1.7;
-      max-width: 580px;
     }
-    /* ── PRODUCT INTRO ── */
-    .product-intro { background: var(--white); }
-    .product-intro-inner {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 80px;
-      align-items: center;
-      max-width: 1200px;
-      margin: 0 auto;
-    }
-    .product-stats {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 24px;
-      margin-top: 40px;
-    }
-    .stat-card {
-      background: var(--grey1);
-      border-radius: 12px;
-      padding: 20px;
-    }
-    .stat-number {
-      font-family: 'Montserrat', sans-serif;
-      font-weight: 900;
-      font-size: 2rem;
-      color: var(--fuchsia);
-      line-height: 1;
-      margin-bottom: 4px;
-    }
-    .stat-label { font-size: 0.8rem; color: var(--grey); line-height: 1.4; }
-    /* ── FEATURES ── */
-    .features { background: var(--grey1); }
-    .features-header { text-align: center; margin-bottom: 60px; }
-    .features-header .section-sub { margin: 0 auto; }
-    .features-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
-      gap: 28px;
-      max-width: 1200px;
-      margin: 0 auto;
     }
-    .feature-card {
-      background: var(--white);
       border-radius: var(--radius);
-      padding: 32px 28px;
       transition: transform 0.2s, box-shadow 0.2s;
     }
-    .feature-card:hover {
-      transform: translateY(-4px);
-      box-shadow: 0 16px 48px rgba(30,28,28,0.08);
     }
-    .feature-icon {
-      width: 52px; height: 52px;
-      background: rgba(255, 97, 242, 0.08);
-      border-radius: 14px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-bottom: 20px;
-      font-size: 1.4rem;
     }
-    .feature-card h3 {
       font-family: 'Montserrat', sans-serif;
       font-weight: 700;
-      font-size: 1.05rem;
       color: var(--black);
-      margin-bottom: 10px;
     }
-    .feature-card p { font-size: 0.9rem; color: var(--grey); line-height: 1.65; }
-    /* ── VIDEO SECTION ── */
-    .video-section { background: var(--black); color: var(--white); text-align: center; }
-    .video-section .section-title { color: var(--white); }
-    .video-section .section-sub { color: rgba(255,255,255,0.6); margin: 0 auto 48px; }
-    .video-placeholder {
-      background: rgba(255,255,255,0.05);
-      border: 2px dashed rgba(255,255,255,0.15);
-      border-radius: 20px;
-      aspect-ratio: 16/9;
-      max-width: 900px;
-      margin: 0 auto;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 16px;
-      cursor: pointer;
-      transition: background 0.2s;
     }
-    .video-placeholder:hover { background: rgba(255,255,255,0.08); }
-    .play-btn {
-      width: 72px; height: 72px;
-      background: var(--fuchsia);
-      border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: transform 0.2s;
     }
-    .video-placeholder:hover .play-btn { transform: scale(1.1); }
-    .video-caption { color: rgba(255,255,255,0.45); font-size: 0.85rem; }
-    /* ── HOW IT WORKS ── */
-    .how-it-works { background: var(--white); }
-    .how-it-works-inner { max-width: 1200px; margin: 0 auto; }
-    .steps {
       display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 32px;
-      margin-top: 60px;
-      position: relative;
-    }
-    .steps::before {
-      content: '';
-      position: absolute;
-      top: 28px;
-      left: calc(12.5% + 14px);
-      right: calc(12.5% + 14px);
-      height: 2px;
-      background: linear-gradient(90deg, var(--fuchsia) 0%, rgba(255,97,242,0.2) 100%);
     }
-    .step { text-align: center; position: relative; }
-    .step-num {
-      width: 56px; height: 56px;
-      border-radius: 50%;
-      background: var(--fuchsia);
-      color: var(--white);
-      font-family: 'Montserrat', sans-serif;
-      font-weight: 800;
-      font-size: 1.1rem;
       display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 0 auto 20px;
-      position: relative;
-      z-index: 1;
-      box-shadow: 0 0 0 6px rgba(255, 97, 242, 0.12);
-    }
-    .step-num.dim {
-      background: var(--lightgrey);
-      color: var(--grey);
-      box-shadow: 0 0 0 6px rgba(107,114,128,0.1);
-    }
-    .step h4 {
-      font-family: 'Montserrat', sans-serif;
-      font-weight: 700;
-      font-size: 0.95rem;
-      color: var(--black);
-      margin-bottom: 8px;
     }
-    .step p { font-size: 0.83rem; color: var(--grey); line-height: 1.6; }
-    /* ── FAQ ── */
-    .faq-section { background: var(--white); }
-    .faq-inner { max-width: 800px; margin: 0 auto; }
-    .faq-header { text-align: center; margin-bottom: 56px; }
-    .faq-header .section-sub { margin: 0 auto; }
-    .faq-list { display: flex; flex-direction: column; gap: 12px; }
-    .faq-item {
-      border: 1px solid var(--lightgrey);
-      border-radius: 12px;
       overflow: hidden;
-      transition: border-color 0.2s;
     }
-    .faq-item.open { border-color: var(--fuchsia); }
-    .faq-question {
-      width: 100%;
-      background: none;
-      border: none;
-      padding: 22px 24px;
-      text-align: left;
-      font-family: 'Inter', sans-serif;
-      font-size: 1rem;
-      font-weight: 600;
-      color: var(--black);
-      cursor: pointer;
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      gap: 16px;
-      transition: background 0.15s;
     }
-    .faq-question:hover { background: var(--grey1); }
-    .faq-item.open .faq-question { background: var(--grey1); }
-    .faq-icon {
-      flex-shrink: 0;
-      width: 28px; height: 28px;
       border-radius: 50%;
-      background: rgba(255, 97, 242, 0.1);
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: background 0.2s, transform 0.3s;
-      color: var(--fuchsia);
     }
-    .faq-item.open .faq-icon {
-      background: var(--fuchsia);
       color: var(--white);
-      transform: rotate(45deg);
     }
-    .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
-    .faq-item.open .faq-answer { max-height: 600px; }
-    .faq-answer-inner {
-      padding: 0 24px 22px;
-      font-size: 0.93rem;
-      color: var(--grey);
-      line-height: 1.75;
-    }
-    .faq-answer-inner ul {
-      margin: 12px 0 0 0;
-      padding-left: 20px;
       display: flex;
       flex-direction: column;
-      gap: 6px;
-    }
-    .faq-answer-inner li { color: var(--grey); }
-    /* ── TESTIMONIALS ── */
-    .testimonials { background: var(--grey1); }
-    .testimonials-header { margin-bottom: 56px; }
-    .testimonials-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 24px;
-      max-width: 1200px;
-      margin: 0 auto;
-    }
-    .testimonial-card { background: var(--white); border-radius: var(--radius); padding: 28px; }
-    .stars { color: var(--golden); font-size: 0.9rem; margin-bottom: 16px; }
-    .testimonial-card blockquote {
-      font-size: 0.92rem;
-      color: var(--darkgrey);
-      line-height: 1.7;
-      font-style: italic;
-      margin-bottom: 20px;
     }
-    .testimonial-author { display: flex; align-items: center; gap: 12px; }
-    .avatar {
-      width: 40px; height: 40px;
       border-radius: 50%;
-      background: linear-gradient(135deg, var(--fuchsia) 0%, #cc3fbf 100%);
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--white);
       font-weight: 700;
       font-size: 0.85rem;
-      flex-shrink: 0;
     }
-    .author-info strong { display: block; font-size: 0.85rem; font-weight: 600; color: var(--black); }
-    .author-info span { font-size: 0.75rem; color: var(--grey); }
-    /* ── BOOKING SECTION ── */
-    .booking-section { background: var(--black); color: var(--white); }
-    .booking-inner { max-width: 900px; margin: 0 auto; text-align: center; }
-    .booking-section .section-title { color: var(--white); margin-bottom: 12px; }
-    .booking-section .section-sub { color: rgba(255,255,255,0.6); margin: 0 auto 48px; }
     .rep-selector {
       background: rgba(255,255,255,0.06);
       border: 1px solid rgba(255,255,255,0.12);
       border-radius: 20px;
       padding: 40px;
-      margin-bottom: 32px;
     }
     .rep-selector-label {
-      font-size: 0.8rem;
       font-weight: 600;
       letter-spacing: 1.5px;
       text-transform: uppercase;
-      color: rgba(255,255,255,0.45);
       margin-bottom: 20px;
     }
     .rep-grid {
-      display: grid;
-      grid-template-columns: repeat(5, 1fr);
       gap: 12px;
       margin-bottom: 32px;
     }
@@ -597,16 +393,16 @@
       background: rgba(255,255,255,0.06);
       border: 1px solid rgba(255,255,255,0.1);
       border-radius: 10px;
-      padding: 12px 8px;
       cursor: pointer;
       text-align: center;
       transition: all 0.2s;
       color: var(--white);
       font-family: 'Inter', sans-serif;
     }
     .rep-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); }
-    .rep-btn.active { background: rgba(255, 97, 242, 0.15); border-color: var(--fuchsia); }
     .rep-avatar {
       width: 44px; height: 44px;
       border-radius: 50%;
@@ -618,7 +414,7 @@
       font-size: 1rem;
       color: var(--white);
     }
-    .rep-name { font-size: 0.72rem; font-weight: 500; line-height: 1.3; }
     .booking-cta-area {
       display: none;
@@ -628,14 +424,13 @@
       animation: fadeUp 0.3s ease;
     }
     .booking-cta-area.visible { display: flex; }
     @keyframes fadeUp {
-      from { opacity: 0; transform: translateY(12px); }
       to   { opacity: 1; transform: translateY(0); }
     }
-    .rep-intro { font-size: 0.95rem; color: rgba(255,255,255,0.65); }
     .rep-intro strong { color: var(--white); }
     .book-btn {
       background: var(--fuchsia);
@@ -652,44 +447,33 @@
       transition: background 0.2s, transform 0.15s;
     }
     .book-btn:hover { background: var(--fuchsia2); transform: translateY(-2px); }
-    .booking-note { font-size: 0.8rem; color: rgba(255,255,255,0.35); }
-    .no-rep-hint { color: rgba(255,255,255,0.45); font-size: 0.9rem; }
     /* ── FOOTER ── */
     footer {
       background: #111111;
-      color: rgba(255,255,255,0.4);
       text-align: center;
-      padding: 36px 5%;
-      font-size: 0.82rem;
       line-height: 1.8;
     }
-    footer a { color: rgba(255,255,255,0.5); text-decoration: none; }
     footer a:hover { color: var(--white); }
     /* ── RESPONSIVE ── */
     @media (max-width: 900px) {
-      .hero { grid-template-columns: 1fr; padding: 64px 5% 60px; min-height: auto; }
-      .hero-visual { display: none; }
-      .product-intro-inner { grid-template-columns: 1fr; gap: 40px; }
-      .features-grid { grid-template-columns: 1fr 1fr; }
-      .steps { grid-template-columns: 1fr 1fr; }
-      .steps::before { display: none; }
-      .testimonials-grid { grid-template-columns: 1fr; }
-      .rep-grid { grid-template-columns: repeat(5, 1fr); }
     }
     @media (max-width: 600px) {
-      .trust-bar { gap: 20px; }
-      .features-grid { grid-template-columns: 1fr; }
-      .steps { grid-template-columns: 1fr 1fr; gap: 24px; }
-      .product-stats { grid-template-columns: 1fr 1fr; }
-      .rep-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
-      .rep-btn { padding: 10px 4px; }
-      .rep-avatar { width: 36px; height: 36px; font-size: 0.85rem; }
-      .rep-name { font-size: 0.65rem; }
       .rep-selector { padding: 24px 16px; }
     }
   </style>
 </head>
@@ -700,94 +484,33 @@
   <div class="nav-logo">
     <img src="logo.png" alt="SumUp" height="32" style="display:block;" />
   </div>
-  <a href="#book" class="nav-cta">Book a Demo →</a>
 </nav>
 <!-- ── HERO ── -->
 <section class="hero">
   <div class="hero-content">
-    <span class="hero-eyebrow">✦ SumUp Bookings</span>
-    <h1>Book clients.<br />Save time.<br /><em>Keep what you earn.</em></h1>
     <p class="hero-sub">
-      SumUp Bookings is the online scheduling system designed for beauty and wellness professionals. No monthly fees. No commissions. No back and forth with clients.
     </p>
-    <div class="hero-actions">
-      <a href="#book" class="btn-primary">Book a free demo</a>
-      <a href="#features" class="btn-ghost">
-        See all features
-        <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
-          <path d="M5 12h14M12 5l7 7-7 7"/>
-        </svg>
-      </a>
-    </div>
   </div>
-  <div class="hero-visual">
-    <div class="hero-mockup">
-      <div class="mockup-header">
-        <div class="mockup-dot"></div>
-        <div class="mockup-dot"></div>
-        <div class="mockup-dot"></div>
-      </div>
-      <div class="mockup-cal">
-        <div class="mockup-month">June 2026</div>
-        <div class="mockup-grid">
-          <div class="mockup-day-label">M</div>
-          <div class="mockup-day-label">T</div>
-          <div class="mockup-day-label">W</div>
-          <div class="mockup-day-label">T</div>
-          <div class="mockup-day-label">F</div>
-          <div class="mockup-day-label">S</div>
-          <div class="mockup-day-label">S</div>
-          <div class="mockup-day empty"></div>
-          <div class="mockup-day empty"></div>
-          <div class="mockup-day empty"></div>
-          <div class="mockup-day empty"></div>
-          <div class="mockup-day available">1</div>
-          <div class="mockup-day available">2</div>
-          <div class="mockup-day">3</div>
-          <div class="mockup-day available">4</div>
-          <div class="mockup-day available">5</div>
-          <div class="mockup-day available">6</div>
-          <div class="mockup-day available">7</div>
-          <div class="mockup-day available">8</div>
-          <div class="mockup-day">9</div>
-          <div class="mockup-day">10</div>
-          <div class="mockup-day available">11</div>
-          <div class="mockup-day available">12</div>
-          <div class="mockup-day available">13</div>
-          <div class="mockup-day available">14</div>
-          <div class="mockup-day selected">15</div>
-          <div class="mockup-day">16</div>
-          <div class="mockup-day">17</div>
-          <div class="mockup-day available">18</div>
-          <div class="mockup-day available">19</div>
-          <div class="mockup-day available">20</div>
-          <div class="mockup-day available">21</div>
-        </div>
-        <div class="mockup-slot">
-          <div class="mockup-slot-item">
-            10:00 AM — 30 min <span>✓ Available</span>
-          </div>
-          <div class="mockup-slot-item dim">11:30 AM — Booked</div>
-          <div class="mockup-slot-item">
-            2:00 PM — 30 min <span>✓ Available</span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="hero-badge">
-      <div class="badge-icon">📅</div>
-      <div class="badge-text">
-        <strong>500K+ appointments booked</strong>
-        <span>across Europe every month</span>
-      </div>
-    </div>
   </div>
 </section>
 <!-- ── TRUST BAR ── -->
 <div class="trust-bar">
   <div class="trust-item">
     <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
     No setup fees
@@ -796,366 +519,135 @@
     <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
     PCI-DSS compliant
   </div>
-  <div class="trust-item">
-    <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
-    Instant payouts
-  </div>
-  <div class="trust-item">
-    <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
-    Live in under 10 minutes
-  </div>
   <div class="trust-item">
     <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
-    24/7 support
   </div>
 </div>
-<!-- ── PRODUCT INTRO ── -->
-<section class="product-intro">
-  <div class="product-intro-inner">
-    <img src="image1.png" alt="SumUp Bookings" style="width:100%; border-radius:16px; display:block;" />
-    <div>
-      <div class="section-label">What is SumUp Bookings?</div>
-      <h2 class="section-title">The free, all‑in‑one booking system for your beauty business.</h2>
-      <p class="section-sub">
-        Simplify your schedule and save time for what you love. Get set up in minutes with a booking page that works as hard as you do. Always-on scheduling software means you'll never miss a new client.
-      </p>
-      <div class="product-stats">
-        <div class="stat-card">
-          <div class="stat-number">3M+</div>
-          <div class="stat-label">Businesses using SumUp worldwide</div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-number">40%</div>
-          <div class="stat-label">Average reduction in no-shows with reminders</div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-number">£0</div>
-          <div class="stat-label">Monthly fee on the free plan</div>
-        </div>
-        <div class="stat-card">
-          <div class="stat-number">&lt;10m</div>
-          <div class="stat-label">Average time to go live with your booking page</div>
-        </div>
-      </div>
     </div>
-  </div>
-</section>
-<!-- ── FEATURES ── -->
-<section class="features" id="features">
-  <div class="features-header">
-    <div class="section-label">Features</div>
-    <h2 class="section-title">Better for your business.<br/>Better for your clients.</h2>
-    <p class="section-sub">Free to use. No monthly fees or contracts. Everything you need to run a seamless booking experience from first click to payment.</p>
-  </div>
-  <div class="features-grid">
-    <div class="feature-card">
-      <div class="feature-icon">💰</div>
-      <h3>Save money, skip the no-shows</h3>
-      <p>Clients pay a deposit or the full amount when they book — so if they don't show up, you won't be out of pocket. Create a cancellation policy with fees to protect your time.</p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon">🔔</div>
-      <h3>Automated reminders</h3>
-      <p>Reduce no-shows with automated email and SMS reminders. Easily manage appointments and let missed bookings become a thing of the past.</p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon">🌐</div>
-      <h3>Get new clients around the clock</h3>
-      <p>Your booking page is live 24/7. Share it on Instagram, add it to your Google profile or WhatsApp bio and let clients book, reschedule or cancel themselves. No calls to miss. No DMs to chase.</p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon">🗓️</div>
-      <h3>Sync with Google Calendar</h3>
-      <p>Connect your booking page to Google Calendar so you never double-book. Your availability updates automatically as new appointments come in.</p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon">💳</div>
-      <h3>Get paid when they book</h3>
-      <p>Take payments the moment a client books via card, Apple Pay, Google Pay or PayPal. No chasing cash or bank transfers — just money in your account.</p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon">🎨</div>
-      <h3>Customise your booking page</h3>
-      <p>Brand your booking page with your logo and colours. Add a clear service menu with prices and durations. Give clients a professional experience before they even walk in.</p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon">👥</div>
-      <h3>Manage your team</h3>
-      <p>Multiple calendars with one view helps you avoid empty chairs and double bookings. Perfect for hair salons, barbershops and wellness studios managing a team.</p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon">📱</div>
-      <h3>Manage everything in the SumUp app</h3>
-      <p>Oversee appointments, handle payments and manage your calendar and staff all in one place. Available on iOS and Android from the App Store or Google Play.</p>
-    </div>
-    <div class="feature-card">
-      <div class="feature-icon">📋</div>
-      <h3>Client database with history</h3>
-      <p>Keep notes and a full appointment history for every client. Build stronger relationships and deliver a personalised experience every time they visit.</p>
-    </div>
-  </div>
-</section>
-<!-- ── VIDEO ── -->
-<section class="video-section">
-  <div class="section-label">See it in action</div>
-  <h2 class="section-title">Watch how it works</h2>
-  <p class="section-sub">See how businesses like yours use SumUp Bookings to save time and grow revenue — in under 2 minutes.</p>
-  <div class="video-placeholder">
-    <div class="play-btn">
-      <svg width="26" height="26" fill="white" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
-    </div>
-    <div class="video-caption">Product walkthrough video · ~2 min · [Replace with video embed]</div>
-  </div>
-</section>
-<!-- ── HOW IT WORKS ── -->
-<section class="how-it-works">
-  <div class="how-it-works-inner">
-    <div style="text-align:center; margin-bottom: 0;">
-      <div class="section-label">How it works</div>
-      <h2 class="section-title">Up and running in minutes</h2>
-    </div>
-    <div class="steps">
-      <div class="step">
-        <div class="step-num">1</div>
-        <h4>Create your account</h4>
-        <p>Sign up free. Add your business details, services, and team members.</p>
-      </div>
-      <div class="step">
-        <div class="step-num">2</div>
-        <h4>Set your availability</h4>
-        <p>Define your working hours, service duration, and buffer times between appointments.</p>
-      </div>
-      <div class="step">
-        <div class="step-num">3</div>
-        <h4>Share your booking link</h4>
-        <p>Share a personalised link or embed the booking widget directly on your website.</p>
-      </div>
-      <div class="step">
-        <div class="step-num">4</div>
-        <h4>Get booked & paid</h4>
-        <p>Customers book 24/7. Payments and reminders are handled automatically.</p>
       </div>
-    </div>
-  </div>
-</section>
-<!-- ── TESTIMONIALS ── -->
-<section class="testimonials">
-  <div class="testimonials-header">
-    <div class="section-label">What customers say</div>
-    <h2 class="section-title">Businesses love SumUp Bookings</h2>
-  </div>
-  <div class="testimonials-grid">
-    <div class="testimonial-card">
-      <div class="stars">★★★★★</div>
-      <blockquote>"Managing a team means juggling different schedules. SumUp gives me multiple calendars in one view — no more empty chairs or double bookings."</blockquote>
-      <div class="testimonial-author">
-        <div class="avatar">JM</div>
-        <div class="author-info">
-          <strong>Jade M.</strong>
-          <span>Hair Salon Owner, Manchester</span>
-        </div>
-      </div>
-    </div>
-    <div class="testimonial-card">
-      <div class="stars">★★★★★</div>
-      <blockquote>"My booking page is live 24/7. Clients book on Instagram, reschedule themselves, and I get paid upfront. No calls to miss. No DMs to chase."</blockquote>
-      <div class="testimonial-author">
-        <div class="avatar">TL</div>
-        <div class="author-info">
-          <strong>Tanya L.</strong>
-          <span>Lash Technician, Birmingham</span>
-        </div>
-      </div>
-    </div>
-    <div class="testimonial-card">
-      <div class="stars">★★★★★</div>
-      <blockquote>"A branded, professional booking page sets the right tone before clients even walk in. SumUp gave my wellness studio exactly that — and it's free."</blockquote>
-      <div class="testimonial-author">
-        <div class="avatar">NP</div>
-        <div class="author-info">
-          <strong>Nina P.</strong>
-          <span>Spa & Wellness Studio, London</span>
-        </div>
       </div>
-    </div>
-  </div>
-</section>
-<!-- ── FOR BUSINESS / FOR CUSTOMERS ── -->
-<section style="background: var(--grey1); padding: 96px 5%;">
-  <div style="max-width:1200px; margin:0 auto;">
-    <div style="text-align:center; margin-bottom:56px;">
-      <div class="section-label">Who it's built for</div>
-      <h2 class="section-title">You're in control. They're impressed.</h2>
-    </div>
-    <div style="display:grid; grid-template-columns:1fr 1fr; gap:32px;">
-      <div style="background:var(--white); border-radius:var(--radius); padding:40px;">
-        <div class="feature-icon" style="margin-bottom:20px;">🧑‍💼</div>
-        <h3 style="font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.2rem; color:var(--black); margin-bottom:6px;">For your business</h3>
-        <p style="font-size:0.85rem; font-weight:600; color:var(--fuchsia); margin-bottom:24px;">You're in control</p>
-        <ul style="list-style:none; display:flex; flex-direction:column; gap:14px;">
-          <li style="display:flex; gap:12px; align-items:flex-start; font-size:0.9rem; color:var(--darkgrey); line-height:1.5;"><span style="color:var(--fuchsia); flex-shrink:0; font-weight:700;">✓</span> Free to use — no monthly fees or contracts</li>
-          <li style="display:flex; gap:12px; align-items:flex-start; font-size:0.9rem; color:var(--darkgrey); line-height:1.5;"><span style="color:var(--fuchsia); flex-shrink:0; font-weight:700;">✓</span> Customise your booking page to your brand</li>
-          <li style="display:flex; gap:12px; align-items:flex-start; font-size:0.9rem; color:var(--darkgrey); line-height:1.5;"><span style="color:var(--fuchsia); flex-shrink:0; font-weight:700;">✓</span> Collect payments, deposits or no-show fees at booking</li>
-          <li style="display:flex; gap:12px; align-items:flex-start; font-size:0.9rem; color:var(--darkgrey); line-height:1.5;"><span style="color:var(--fuchsia); flex-shrink:0; font-weight:700;">✓</span> Client database with notes and appointment history</li>
-          <li style="display:flex; gap:12px; align-items:flex-start; font-size:0.9rem; color:var(--darkgrey); line-height:1.5;"><span style="color:var(--fuchsia); flex-shrink:0; font-weight:700;">✓</span> Set up automated reminders</li>
-          <li style="display:flex; gap:12px; align-items:flex-start; font-size:0.9rem; color:var(--darkgrey); line-height:1.5;"><span style="color:var(--fuchsia); flex-shrink:0; font-weight:700;">✓</span> Connect to Google Calendar, Instagram & Facebook</li>
-          <li style="display:flex; gap:12px; align-items:flex-start; font-size:0.9rem; color:var(--darkgrey); line-height:1.5;"><span style="color:var(--fuchsia); flex-shrink:0; font-weight:700;">✓</span> Manage everything in the SumUp app</li>
-        </ul>
       </div>
-      <div style="background:var(--black); border-radius:var(--radius); padding:40px;">
-        <div class="feature-icon" style="margin-bottom:20px; background:rgba(255,255,255,0.1);">🧑‍🤝‍🧑</div>
-        <h3 style="font-family:'Montserrat',sans-serif; font-weight:800; font-size:1.2rem; color:var(--white); margin-bottom:6px;">For your customers</h3>
-        <p style="font-size:0.85rem; font-weight:600; color:var(--fuchsia); margin-bottom:24px;">An experience they'll remember</p>
-        <ul style="list-style:none; display:flex; flex-direction:column; gap:14px;">
-          <li style="display:flex; gap:12px; align-items:flex-start; font-size:0.9rem; color:rgba(255,255,255,0.75); line-height:1.5;"><span style="color:var(--fuchsia); flex-shrink:0; font-weight:700;">✓</span> A 24/7 online booking system. No calls, no waiting.</li>
-          <li style="display:flex; gap:12px; align-items:flex-start; font-size:0.9rem; color:rgba(255,255,255,0.75); line-height:1.5;"><span style="color:var(--fuchsia); flex-shrink:0; font-weight:700;">✓</span> Clear service menu with prices and durations</li>
-          <li style="display:flex; gap:12px; align-items:flex-start; font-size:0.9rem; color:rgba(255,255,255,0.75); line-height:1.5;"><span style="color:var(--fuchsia); flex-shrink:0; font-weight:700;">✓</span> Booking confirmation sent immediately</li>
-          <li style="display:flex; gap:12px; align-items:flex-start; font-size:0.9rem; color:rgba(255,255,255,0.75); line-height:1.5;"><span style="color:var(--fuchsia); flex-shrink:0; font-weight:700;">✓</span> Pay securely at the time of booking</li>
-          <li style="display:flex; gap:12px; align-items:flex-start; font-size:0.9rem; color:rgba(255,255,255,0.75); line-height:1.5;"><span style="color:var(--fuchsia); flex-shrink:0; font-weight:700;">✓</span> Automatic reminder before the appointment</li>
-          <li style="display:flex; gap:12px; align-items:flex-start; font-size:0.9rem; color:rgba(255,255,255,0.75); line-height:1.5;"><span style="color:var(--fuchsia); flex-shrink:0; font-weight:700;">✓</span> Easy self-service cancellation and rescheduling</li>
-        </ul>
       </div>
-    </div>
-  </div>
-</section>
-<!-- ── PRICING ── -->
-<section style="background:var(--white); padding:80px 5%;">
-  <div style="max-width:800px; margin:0 auto; text-align:center;">
-    <div class="section-label">Pricing</div>
-    <h2 class="section-title">Start for free. Low fees. No commission.</h2>
-    <p class="section-sub" style="margin:0 auto 48px;">No monthly fees, contracts or surprises. Just a small transaction fee when customers send you money.</p>
-    <div style="display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:560px; margin:0 auto;">
-      <div style="background:var(--fuchsia); border-radius:var(--radius); padding:36px 24px; color:var(--white); text-align:center;">
-        <div style="font-family:'Montserrat',sans-serif; font-weight:900; font-size:3rem; line-height:1;">£0</div>
-        <div style="font-size:0.85rem; margin-top:8px; opacity:0.9;">Monthly fee</div>
-        <div style="font-size:0.75rem; margin-top:6px; opacity:0.8;">No contracts. No surprises.</div>
       </div>
-      <div style="background:var(--black); border-radius:var(--radius); padding:36px 24px; color:var(--white); text-align:center;">
-        <div style="font-family:'Montserrat',sans-serif; font-weight:900; font-size:3rem; line-height:1; color:var(--golden);">2.5%</div>
-        <div style="font-size:0.85rem; margin-top:8px; opacity:0.9;">Transaction fee</div>
-        <div style="font-size:0.75rem; margin-top:6px; opacity:0.6;">Only when you get paid.</div>
       </div>
     </div>
   </div>
 </section>
-<!-- ── FAQ ── -->
-<section class="faq-section">
-  <div class="faq-inner">
-    <div class="faq-header">
-      <div class="section-label">FAQs</div>
-      <h2 class="section-title">Common questions</h2>
-      <p class="section-sub">Everything you need to know about SumUp Bookings.</p>
-    </div>
-    <div class="faq-list">
-      <div class="faq-item">
-        <button class="faq-question">
-          What is SumUp Bookings?
-          <span class="faq-icon">
-            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
-          </span>
-        </button>
-        <div class="faq-answer">
-          <div class="faq-answer-inner">
-            SumUp Bookings is an online booking system with scheduling software. It's designed for beauty professionals to make managing and organising appointments seamless and tackle common pain points like double bookings or costly no-shows, completely for free.
-          </div>
         </div>
-      </div>
-      <div class="faq-item">
-        <button class="faq-question">
-          What is an online booking system?
-          <span class="faq-icon">
-            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
-          </span>
-        </button>
-        <div class="faq-answer">
-          <div class="faq-answer-inner">
-            One of the main uses for an online booking system is to reserve appointments. With SumUp Bookings, your customers can visit your booking page, find the appointment they want and send a request right away. Once you're set up, SumUp Bookings scheduling software is available 24/7, so clients can book and manage their appointments even while you're not working — ensuring an always-full calendar.
           </div>
         </div>
       </div>
-      <div class="faq-item">
-        <button class="faq-question">
-          How do I get started?
-          <span class="faq-icon">
-            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
-          </span>
-        </button>
-        <div class="faq-answer">
-          <div class="faq-answer-inner">
-            Log in to Bookings using your SumUp profile and follow the easy setup guide. After adding your details you'll be ready to start accepting appointments and growing your business — usually in under 10 minutes.
-          </div>
         </div>
-      </div>
-      <div class="faq-item">
-        <button class="faq-question">
-          How do I get paid with Bookings?
-          <span class="faq-icon">
-            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
-          </span>
-        </button>
-        <div class="faq-answer">
-          <div class="faq-answer-inner">
-            With Bookings, you choose when your customers pay: at the time of booking or in-person. You can also set up deposits and cancellation fees to ensure your business is not out of pocket if a client cancels last minute. If you enable payment at booking, customers can pre-pay with a credit/debit card, Apple Pay, Google Pay or PayPal.
           </div>
         </div>
       </div>
-      <div class="faq-item">
-        <button class="faq-question">
-          How can customers make a booking?
-          <span class="faq-icon">
-            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
-          </span>
-        </button>
-        <div class="faq-answer">
-          <div class="faq-answer-inner">
-            Customers select appointments on your online booking page. After opening it, they can see all the services you offer. Then they simply:
-            <ul>
-              <li>Select a date and time</li>
-              <li>Add their personal details</li>
-              <li>Leave you an optional message</li>
-            </ul>
-            After requesting the appointment, you'll either manually or automatically accept it depending on your settings.
-          </div>
         </div>
-      </div>
-      <div class="faq-item">
-        <button class="faq-question">
-          Does SumUp Bookings have a mobile app?
-          <span class="faq-icon">
-            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
-          </span>
-        </button>
-        <div class="faq-answer">
-          <div class="faq-answer-inner">
-            You can access Bookings and all of its scheduling features in the SumUp Business app. All you need to do is download it from the App Store or Google Play. After logging in, you'll find Bookings in the Tools section of your profile. You can oversee appointments, handle payments and manage your calendar and staff all in one place.
-          </div>
-        </div>
-      </div>
-      <div class="faq-item">
-        <button class="faq-question">
-          How much does SumUp Bookings cost?
-          <span class="faq-icon">
-            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
-          </span>
-        </button>
-        <div class="faq-answer">
-          <div class="faq-answer-inner">
-            It's free to sign up and use SumUp Bookings. There are no setup fees or monthly subscription costs — just a small 2.5% transaction fee when customers send you money.
           </div>
         </div>
       </div>
@@ -1164,95 +656,128 @@
   </div>
 </section>
 <!-- ── BOOK A DEMO ── -->
 <section class="booking-section" id="book">
   <div class="booking-inner">
     <div class="section-label">Book a demo</div>
-    <h2 class="section-title">Ready to see it for yourself?</h2>
     <p class="section-sub">
-      Pick your SumUp representative below and book a free 30-minute demo directly in their calendar. No pressure, no commitment.
     </p>
-    <div class="rep-selector">
-      <div class="rep-selector-label">Select your SumUp representative</div>
       <div class="rep-grid" id="repGrid">
         <!-- Populated by JS -->
       </div>
       <div class="booking-cta-area" id="ctaArea">
-        <p class="rep-intro" id="repIntro">Book a call with <strong id="repNameDisplay"></strong></p>
         <a href="#" class="book-btn" id="bookLink" target="_blank" rel="noopener">
           <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
           Book your free 30-min demo
         </a>
-        <p class="booking-note">Opens Google Calendar · No sign-in required · Free cancellation anytime</p>
       </div>
-      <div class="no-rep-hint" id="noRepHint">← Choose a representative to see their availability</div>
     </div>
   </div>
 </section>
 <!-- ── FOOTER ── -->
 <footer>
   <p>© 2026 SumUp. All rights reserved. &nbsp;·&nbsp; <a href="#">Privacy Policy</a> &nbsp;·&nbsp; <a href="#">Terms of Service</a> &nbsp;·&nbsp; <a href="#">Help Centre</a></p>
-  <p style="margin-top:8px;">SumUp Financial Services Limited · Regulated by the FCA</p>
 </footer>
 <script>
-  // ── FAQ ACCORDION ──
-  document.querySelectorAll('.faq-question').forEach(btn => {
-    btn.addEventListener('click', () => {
-      const item = btn.closest('.faq-item');
-      const isOpen = item.classList.contains('open');
-      document.querySelectorAll('.faq-item').forEach(i => i.classList.remove('open'));
-      if (!isOpen) item.classList.add('open');
-    });
-  });
-  // ── SALES REPS DATA ──
   const reps = [
-    { name: "Sahana", initials: "AM", color: "#FF61F2", link: "https://calendar.app.google/Ger8Z5Er4BqLXprx9" },
-    { name: "Caro",   initials: "JL", color: "#F9C300", link: "https://calendar.app.google/cV8c2hZzMfsTuM86A" },
   ];
-  const grid      = document.getElementById('repGrid');
-  const ctaArea   = document.getElementById('ctaArea');
-  const noRepHint = document.getElementById('noRepHint');
-  const bookLink  = document.getElementById('bookLink');
-  const repName   = document.getElementById('repNameDisplay');
-  let activeIdx = null;
-  reps.forEach((rep, i) => {
-    const btn = document.createElement('button');
-    btn.className = 'rep-btn';
-    btn.dataset.idx = i;
-    btn.innerHTML = `
-      <div class="rep-avatar" style="background: linear-gradient(135deg, ${rep.color} 0%, ${rep.color}99 100%)">${rep.initials}</div>
-      <div class="rep-name">${rep.name}</div>
-    `;
-    btn.addEventListener('click', () => selectRep(i, btn));
-    grid.appendChild(btn);
-  });
-  function selectRep(idx, btn) {
-    grid.querySelectorAll('.rep-btn').forEach(b => b.classList.remove('active'));
-    btn.classList.add('active');
-    activeIdx = idx;
-    const rep = reps[idx];
-    repName.textContent = rep.name;
-    bookLink.href = rep.link;
-    ctaArea.classList.add('visible');
-    noRepHint.style.display = 'none';
-  }
-  const params = new URLSearchParams(window.location.search);
-  const repParam = params.get('rep');
-  if (repParam !== null) {
-    const idx = parseInt(repParam, 10);
-    if (!isNaN(idx) && idx >= 0 && idx < reps.length) {
-      const btn = grid.querySelectorAll('.rep-btn')[idx];
-      if (btn) selectRep(idx, btn);
-    }
   }
 </script>
 </body>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>SumUp — Run Your Beauty Business Beautifully</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
+      --black:     #1E1C1C;
+      --fuchsia:   #FF61F2;
+      --fuchsia2:  #cc3fbf;
+      --golden:    #F9C300;
+      --white:     #FFFFFF;
+      --grey1:     #F0F1E7;
+      --grey:      #6B7280;
+      --lightgrey: #E5E7EB;
+      --darkgrey:  #374151;
+      --radius:    16px;
     }
     html { scroll-behavior: smooth; }
       position: sticky;
       top: 0;
       z-index: 100;
+      background: rgba(255,255,255,0.97);
       backdrop-filter: blur(10px);
       display: flex;
       align-items: center;
       height: 64px;
       border-bottom: 1px solid var(--lightgrey);
     }
     .nav-cta {
       background: var(--fuchsia);
       color: var(--white);
       border-radius: 8px;
       text-decoration: none;
       transition: background 0.2s;
+      white-space: nowrap;
     }
     .nav-cta:hover { background: var(--fuchsia2); }
     .hero {
       background: var(--black);
       color: var(--white);
+      padding: 80px 5%;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 60px;
       align-items: center;
+      min-height: 80vh;
     }
     .hero-eyebrow {
       display: inline-block;
+      background: rgba(255,97,242,0.15);
       color: var(--fuchsia);
+      font-size: 0.75rem;
       font-weight: 600;
       letter-spacing: 1.5px;
       text-transform: uppercase;
       border-radius: 100px;
       margin-bottom: 24px;
     }
     .hero h1 {
       font-family: 'Montserrat', sans-serif;
       font-weight: 900;
+      font-size: clamp(2.4rem, 4vw, 3.8rem);
+      line-height: 1.08;
+      letter-spacing: -1.5px;
+      margin-bottom: 20px;
     }
+    .hero h1 em { font-style: normal; color: var(--fuchsia); }
     .hero-sub {
+      font-size: 1.05rem;
+      color: rgba(255,255,255,0.65);
       line-height: 1.7;
+      margin-bottom: 36px;
+      max-width: 480px;
     }
     .btn-primary {
       background: var(--fuchsia);
       color: var(--white);
     }
     .btn-primary:hover { background: var(--fuchsia2); transform: translateY(-1px); }
+    /* Hero image */
+    .hero-image {
       border-radius: 20px;
+      overflow: hidden;
+      aspect-ratio: 4/3;
+      background: rgba(255,255,255,0.06);
+      border: 1px solid rgba(255,255,255,0.1);
     }
+    .hero-image img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
     }
+    /* placeholder shown when image2 not yet uploaded */
+    .img-placeholder {
+      width: 100%; height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
+      color: rgba(255,255,255,0.2);
+      font-size: 0.85rem;
+      font-weight: 500;
     }
     /* ── TRUST BAR ── */
     .trust-bar {
       background: var(--white);
+      padding: 22px 5%;
       display: flex;
       align-items: center;
       justify-content: center;
+      gap: 40px;
       flex-wrap: wrap;
       border-bottom: 1px solid var(--lightgrey);
     }
     .trust-item {
       display: flex;
       align-items: center;
+      gap: 9px;
       color: var(--grey);
+      font-size: 0.83rem;
       font-weight: 500;
     }
     .trust-item svg { color: var(--fuchsia); flex-shrink: 0; }
+    .trust-item.featured {
+      font-weight: 700;
+      color: var(--black);
+      font-size: 0.88rem;
+    }
+    .trust-item.featured svg { color: var(--golden); }
+    /* ── SHARED SECTION ── */
+    section { padding: 80px 5%; }
     .section-label {
+      font-size: 0.72rem;
       font-weight: 600;
       letter-spacing: 2px;
       text-transform: uppercase;
       color: var(--fuchsia);
+      margin-bottom: 14px;
     }
     .section-title {
       font-family: 'Montserrat', sans-serif;
       font-weight: 800;
+      font-size: clamp(1.8rem, 3vw, 2.5rem);
+      line-height: 1.12;
       letter-spacing: -0.5px;
       color: var(--black);
+      margin-bottom: 14px;
     }
     .section-sub {
+      font-size: 1rem;
       color: var(--grey);
       line-height: 1.7;
+      max-width: 560px;
     }
+    .section-center { text-align: center; }
+    .section-center .section-sub { margin: 0 auto; }
+    /* ── ECOSYSTEM ── */
+    .ecosystem { background: var(--white); }
+    .ecosystem-inner { max-width: 1200px; margin: 0 auto; }
+    .ecosystem-header { margin-bottom: 48px; }
+    .ecosystem-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
+      gap: 20px;
     }
+    .eco-card {
+      background: var(--grey1);
       border-radius: var(--radius);
+      padding: 28px 24px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
       transition: transform 0.2s, box-shadow 0.2s;
     }
+    .eco-card:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 12px 40px rgba(30,28,28,0.08);
     }
+    .eco-icon {
+      font-size: 1.6rem;
+      margin-bottom: 4px;
     }
+    .eco-card h3 {
       font-family: 'Montserrat', sans-serif;
       font-weight: 700;
+      font-size: 1rem;
       color: var(--black);
     }
+    .eco-card p {
+      font-size: 0.875rem;
+      color: var(--grey);
+      line-height: 1.6;
     }
+    /* ── IMAGE BREAK ── */
+    .image-break {
+      padding: 0;
+      height: 420px;
+      overflow: hidden;
+      background: var(--black);
+    }
+    .image-break img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      opacity: 0.75;
+      display: block;
+    }
+    .image-break-placeholder {
+      width: 100%; height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
+      color: rgba(255,255,255,0.2);
+      font-size: 0.85rem;
     }
+    /* ── TESTIMONIALS ── */
+    .testimonials { background: var(--grey1); }
+    .testimonials-inner { max-width: 1200px; margin: 0 auto; }
+    .testimonials-header { margin-bottom: 48px; }
+    .testi-grid {
       display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 20px;
     }
+    .testi-card {
+      background: var(--white);
+      border-radius: var(--radius);
+      overflow: hidden;
       display: flex;
+      flex-direction: column;
     }
+    .testi-img {
+      aspect-ratio: 3/2;
       overflow: hidden;
+      background: var(--lightgrey);
+      flex-shrink: 0;
     }
+    .testi-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
+    .testi-img-placeholder {
+      width: 100%; height: 100%;
       display: flex;
       align-items: center;
+      justify-content: center;
+      color: var(--grey);
+      font-size: 0.78rem;
+      min-height: 160px;
     }
+    .testi-body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
+    .stars { color: var(--golden); font-size: 0.85rem; }
+    .testi-card blockquote {
+      font-size: 0.9rem;
+      color: var(--darkgrey);
+      line-height: 1.7;
+      font-style: italic;
+      flex: 1;
+    }
+    .testi-author { display: flex; align-items: center; gap: 10px; }
+    .avatar {
+      width: 36px; height: 36px;
       border-radius: 50%;
+      background: linear-gradient(135deg, var(--fuchsia) 0%, var(--fuchsia2) 100%);
       display: flex;
       align-items: center;
       justify-content: center;
+      color: var(--white);
+      font-weight: 700;
+      font-size: 0.78rem;
+      flex-shrink: 0;
     }
+    .author-info strong { display: block; font-size: 0.82rem; font-weight: 600; color: var(--black); }
+    .author-info span { font-size: 0.72rem; color: var(--grey); }
+    /* trusted stat */
+    .trusted-banner {
+      background: var(--black);
       color: var(--white);
+      text-align: center;
+      padding: 48px 5%;
+    }
+    .trusted-banner p {
+      font-family: 'Montserrat', sans-serif;
+      font-weight: 800;
+      font-size: clamp(1.4rem, 3vw, 2rem);
+      letter-spacing: -0.5px;
     }
+    .trusted-banner p span { color: var(--fuchsia); }
+    /* ── BOOKING SECTION ── */
+    .booking-section { background: var(--black); color: var(--white); }
+    .booking-inner { max-width: 760px; margin: 0 auto; text-align: center; }
+    .booking-section .section-title { color: var(--white); margin-bottom: 12px; }
+    .booking-section .section-sub { color: rgba(255,255,255,0.55); margin: 0 auto 48px; }
+    /* Direct rep mode (URL param) */
+    .direct-rep-box {
+      background: rgba(255,255,255,0.06);
+      border: 1px solid rgba(255,255,255,0.12);
+      border-radius: 20px;
+      padding: 48px 40px;
       display: flex;
       flex-direction: column;
+      align-items: center;
+      gap: 20px;
     }
+    .direct-rep-avatar {
+      width: 72px; height: 72px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
+      font-weight: 800;
+      font-size: 1.4rem;
       color: var(--white);
+      margin-bottom: 4px;
+    }
+    .direct-rep-name {
+      font-family: 'Montserrat', sans-serif;
       font-weight: 700;
+      font-size: 1.1rem;
+      color: var(--white);
+    }
+    .direct-rep-role {
       font-size: 0.85rem;
+      color: rgba(255,255,255,0.45);
     }
+    /* Rep selector (default mode) */
     .rep-selector {
       background: rgba(255,255,255,0.06);
       border: 1px solid rgba(255,255,255,0.12);
       border-radius: 20px;
       padding: 40px;
     }
     .rep-selector-label {
+      font-size: 0.75rem;
       font-weight: 600;
       letter-spacing: 1.5px;
       text-transform: uppercase;
+      color: rgba(255,255,255,0.4);
       margin-bottom: 20px;
     }
     .rep-grid {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
       gap: 12px;
       margin-bottom: 32px;
     }
       background: rgba(255,255,255,0.06);
       border: 1px solid rgba(255,255,255,0.1);
       border-radius: 10px;
+      padding: 14px 20px;
       cursor: pointer;
       text-align: center;
       transition: all 0.2s;
       color: var(--white);
       font-family: 'Inter', sans-serif;
+      min-width: 100px;
     }
     .rep-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); }
+    .rep-btn.active { background: rgba(255,97,242,0.15); border-color: var(--fuchsia); }
     .rep-avatar {
       width: 44px; height: 44px;
       border-radius: 50%;
       font-size: 1rem;
       color: var(--white);
     }
+    .rep-name { font-size: 0.78rem; font-weight: 500; }
     .booking-cta-area {
       display: none;
       animation: fadeUp 0.3s ease;
     }
     .booking-cta-area.visible { display: flex; }
     @keyframes fadeUp {
+      from { opacity: 0; transform: translateY(10px); }
       to   { opacity: 1; transform: translateY(0); }
     }
+    .rep-intro { font-size: 0.9rem; color: rgba(255,255,255,0.55); }
     .rep-intro strong { color: var(--white); }
+    .no-rep-hint { color: rgba(255,255,255,0.35); font-size: 0.85rem; }
     .book-btn {
       background: var(--fuchsia);
       transition: background 0.2s, transform 0.15s;
     }
     .book-btn:hover { background: var(--fuchsia2); transform: translateY(-2px); }
+    .booking-note { font-size: 0.78rem; color: rgba(255,255,255,0.3); }
     /* ── FOOTER ── */
     footer {
       background: #111111;
+      color: rgba(255,255,255,0.35);
       text-align: center;
+      padding: 28px 5%;
+      font-size: 0.8rem;
       line-height: 1.8;
     }
+    footer a { color: rgba(255,255,255,0.45); text-decoration: none; }
     footer a:hover { color: var(--white); }
     /* ── RESPONSIVE ── */
     @media (max-width: 900px) {
+      .hero { grid-template-columns: 1fr; padding: 60px 5%; min-height: auto; }
+      .hero-image { display: none; }
+      .ecosystem-grid { grid-template-columns: 1fr 1fr; }
+      .testi-grid { grid-template-columns: 1fr; }
+      .image-break { height: 260px; }
     }
     @media (max-width: 600px) {
+      .trust-bar { gap: 16px; }
+      .ecosystem-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
       .rep-selector { padding: 24px 16px; }
+      .direct-rep-box { padding: 32px 20px; }
     }
   </style>
 </head>
   <div class="nav-logo">
     <img src="logo.png" alt="SumUp" height="32" style="display:block;" />
   </div>
+  <a href="#book" class="nav-cta">Book a free demo →</a>
 </nav>
 <!-- ── HERO ── -->
 <section class="hero">
   <div class="hero-content">
+    <span class="hero-eyebrow">✦ For Beauty &amp; Wellness Businesses</span>
+    <h1>Run your business<br /><em>beautifully.</em></h1>
     <p class="hero-sub">
+      One connected platform for bookings, payments, loyalty and growth. Built for beauty professionals. Backed by SumUp.
     </p>
+    <a href="#book" class="btn-primary">Book a free demo</a>
   </div>
+  <div class="hero-image">
+    <!-- Replace image2.png with your hero image file -->
+    <img src="image2.png" alt="Beauty business owner using SumUp"
+      onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" />
+    <div class="img-placeholder" style="display:none;">image2.png</div>
   </div>
 </section>
 <!-- ── TRUST BAR ── -->
 <div class="trust-bar">
+  <div class="trust-item featured">
+    <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+    Trusted by 4 million businesses
+  </div>
   <div class="trust-item">
     <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
     No setup fees
     <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
     PCI-DSS compliant
   </div>
   <div class="trust-item">
     <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+    24/7 priority support
   </div>
 </div>
+<!-- ── ECOSYSTEM ── -->
+<section class="ecosystem">
+  <div class="ecosystem-inner">
+    <div class="ecosystem-header">
+      <div class="section-label">One connected ecosystem</div>
+      <h2 class="section-title">Everything your beauty business needs.<br/>In one place.</h2>
+      <p class="section-sub">Stop juggling different tools. SumUp brings together everything you need to run, grow and get paid — all under one roof.</p>
     </div>
+    <div class="ecosystem-grid">
+      <div class="eco-card">
+        <div class="eco-icon">🗓️</div>
+        <h3>Bookings</h3>
+        <p>24/7 online scheduling with automated reminders, deposits and no-show fees. Clients book themselves. You stay in control.</p>
       </div>
+      <div class="eco-card">
+        <div class="eco-icon">💳</div>
+        <h3>POS &amp; Payments</h3>
+        <p>Fast, reliable in-person payments. Card, Apple Pay, Google Pay — all at competitive rates with instant payouts.</p>
       </div>
+      <div class="eco-card">
+        <div class="eco-icon">🛍️</div>
+        <h3>Online Store</h3>
+        <p>Sell products and gift vouchers online. Easy to set up, easy to integrate — a new revenue stream without the hassle.</p>
       </div>
+      <div class="eco-card">
+        <div class="eco-icon">⭐</div>
+        <h3>Loyalty</h3>
+        <p>Turn one-time visitors into regulars. Set up a points or stamp reward programme in minutes from your dashboard.</p>
       </div>
+      <div class="eco-card">
+        <div class="eco-icon">🎁</div>
+        <h3>Gift Cards</h3>
+        <p>Let clients gift your services. Digital gift cards grow your revenue and bring in new customers at zero extra cost.</p>
       </div>
+      <div class="eco-card">
+        <div class="eco-icon">💰</div>
+        <h3>Cash Advance</h3>
+        <p>Need to invest in equipment or stock? Get funding based on your sales — repaid automatically as you trade.</p>
       </div>
     </div>
   </div>
 </section>
+<!-- ── IMAGE BREAK 1 ── -->
+<!-- Replace image3.png with a lifestyle photo of a beauty business -->
+<div class="image-break">
+  <img src="image3.png" alt="Beauty salon"
+    onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" />
+  <div class="image-break-placeholder" style="display:none;">image3.png</div>
+</div>
+<!-- ── TESTIMONIALS ── -->
+<section class="testimonials">
+  <div class="testimonials-inner">
+    <div class="testimonials-header">
+      <div class="section-label">What businesses say</div>
+      <h2 class="section-title">Trusted by 4 million businesses like yours.</h2>
+    </div>
+    <div class="testi-grid">
+      <div class="testi-card">
+        <!-- Replace image4.png — photo of or for this testimonial -->
+        <div class="testi-img">
+          <img src="image4.png" alt="Faye from Mirror Mirror"
+            onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" />
+          <div class="testi-img-placeholder" style="display:none;">image4.png</div>
         </div>
+        <div class="testi-body">
+          <div class="stars">★★★★★</div>
+          <blockquote>"The SumUp Cash Advance really helped me upgrade my salon furniture and start my own lash kits — which increased our profitability."</blockquote>
+          <div class="testi-author">
+            <div class="avatar">FF</div>
+            <div class="author-info">
+              <strong>Faye</strong>
+              <span>Mirror Mirror, Salon Owner</span>
+            </div>
           </div>
         </div>
       </div>
+      <div class="testi-card">
+        <!-- Replace image5.png — photo of or for this testimonial -->
+        <div class="testi-img">
+          <img src="image5.png" alt="Curators Love Yourself"
+            onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" />
+          <div class="testi-img-placeholder" style="display:none;">image5.png</div>
         </div>
+        <div class="testi-body">
+          <div class="stars">★★★★★</div>
+          <blockquote>"The Online Store is an invaluable asset to my small business's ability to trade online — it's been vital from day one."</blockquote>
+          <div class="testi-author">
+            <div class="avatar">CL</div>
+            <div class="author-info">
+              <strong>Curators Love Yourself</strong>
+              <span>Beauty Products</span>
+            </div>
           </div>
         </div>
       </div>
+      <div class="testi-card">
+        <!-- Replace image6.png — photo of or for this testimonial -->
+        <div class="testi-img">
+          <img src="image6.png" alt="Beauty business owner"
+            onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" />
+          <div class="testi-img-placeholder" style="display:none;">image6.png</div>
         </div>
+        <div class="testi-body">
+          <div class="stars">★★★★★</div>
+          <blockquote>"My booking page is live 24/7. Clients book on Instagram, reschedule themselves, and I get paid upfront. No calls to miss. No DMs to chase."</blockquote>
+          <div class="testi-author">
+            <div class="avatar">TL</div>
+            <div class="author-info">
+              <strong>Tanya L.</strong>
+              <span>Lash Technician, Birmingham</span>
+            </div>
           </div>
         </div>
       </div>
   </div>
 </section>
+<!-- ── IMAGE BREAK 2 ── -->
+<!-- Replace image7.png with another lifestyle / product image -->
+<div class="image-break">
+  <img src="image7.png" alt="SumUp in action"
+    onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" />
+  <div class="image-break-placeholder" style="display:none;">image7.png</div>
+</div>
 <!-- ── BOOK A DEMO ── -->
 <section class="booking-section" id="book">
   <div class="booking-inner">
     <div class="section-label">Book a demo</div>
+    <h2 class="section-title">See it for yourself.</h2>
     <p class="section-sub">
+      Talk to a SumUp expert about your business. Free, 30 minutes, no commitment.
     </p>
+    <!-- DIRECT REP MODE: shown when ?rep=name in URL -->
+    <div class="direct-rep-box" id="directRepBox" style="display:none;">
+      <div class="direct-rep-avatar" id="directRepAvatar"></div>
+      <div class="direct-rep-name" id="directRepName"></div>
+      <div class="direct-rep-role">SumUp Beauty Specialist</div>
+      <a href="#" class="book-btn" id="directBookLink" target="_blank" rel="noopener">
+        <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+        Book your free 30-min demo
+      </a>
+      <p class="booking-note">Free cancellation anytime · No sign-in required</p>
+    </div>
+    <!-- DEFAULT MODE: shown when no ?rep= param -->
+    <div class="rep-selector" id="repSelector">
+      <div class="rep-selector-label">Choose your SumUp representative</div>
       <div class="rep-grid" id="repGrid">
         <!-- Populated by JS -->
       </div>
       <div class="booking-cta-area" id="ctaArea">
+        <p class="rep-intro">Book a call with <strong id="repNameDisplay"></strong></p>
         <a href="#" class="book-btn" id="bookLink" target="_blank" rel="noopener">
           <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
           Book your free 30-min demo
         </a>
+        <p class="booking-note">Free cancellation anytime · No sign-in required</p>
       </div>
+      <div class="no-rep-hint" id="noRepHint">Select a representative above to book</div>
     </div>
   </div>
 </section>
 <!-- ── FOOTER ── -->
 <footer>
   <p>© 2026 SumUp. All rights reserved. &nbsp;·&nbsp; <a href="#">Privacy Policy</a> &nbsp;·&nbsp; <a href="#">Terms of Service</a> &nbsp;·&nbsp; <a href="#">Help Centre</a></p>
+  <p style="margin-top:6px;">SumUp Financial Services Limited · Regulated by the FCA</p>
 </footer>
 <script>
+  // ── REPS DATA ──
+  // Add or edit reps here. 'slug' is what goes in the URL: ?rep=sahana
   const reps = [
+    {
+      name:     "Sahana",
+      slug:     "sahana",
+      initials: "SB",
+      color:    "#FF61F2",
+      link:     "https://calendar.app.google/Ger8Z5Er4BqLXprx9"
+    },
+    {
+      name:     "Caro",
+      slug:     "caro",
+      initials: "CG",
+      color:    "#F9C300",
+      link:     "https://calendar.app.google/cV8c2hZzMfsTuM86A"
+    },
+    // Add more reps here following the same format:
+    // { name: "Alex", slug: "alex", initials: "AK", color: "#FF61F2", link: "https://..." },
   ];
+  // ── URL PARAM CHECK ──
+  const params   = new URLSearchParams(window.location.search);
+  const repSlug  = (params.get('rep') || '').toLowerCase().trim();
+  const matchRep = reps.find(r => r.slug === repSlug);
+  if (matchRep) {
+    // DIRECT MODE — hide selector, show personal booking box
+    document.getElementById('repSelector').style.display  = 'none';
+    document.getElementById('directRepBox').style.display = 'flex';
+    const avatarEl = document.getElementById('directRepAvatar');
+    avatarEl.textContent = matchRep.initials;
+    avatarEl.style.background = `linear-gradient(135deg, ${matchRep.color} 0%, ${matchRep.color}99 100%)`;
+    document.getElementById('directRepName').textContent   = `Book with ${matchRep.name}`;
+    document.getElementById('directBookLink').href         = matchRep.link;
+    // Update page heading too
+    document.querySelector('.booking-section .section-title').textContent = `Book with ${matchRep.name}.`;
+  } else {
+    // DEFAULT MODE — build rep selector
+    const grid      = document.getElementById('repGrid');
+    const ctaArea   = document.getElementById('ctaArea');
+    const noRepHint = document.getElementById('noRepHint');
+    const bookLink  = document.getElementById('bookLink');
+    const repName   = document.getElementById('repNameDisplay');
+    reps.forEach((rep, i) => {
+      const btn = document.createElement('button');
+      btn.className = 'rep-btn';
+      btn.innerHTML = `
+        <div class="rep-avatar" style="background:linear-gradient(135deg,${rep.color} 0%,${rep.color}99 100%)">${rep.initials}</div>
+        <div class="rep-name">${rep.name}</div>
+      `;
+      btn.addEventListener('click', () => {
+        grid.querySelectorAll('.rep-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        repName.textContent = rep.name;
+        bookLink.href = rep.link;
+        ctaArea.classList.add('visible');
+        noRepHint.style.display = 'none';
+      });
+      grid.appendChild(btn);
+    });
   }
 </script>
 </body>