text-left llg:text-center bg-white lg:mx-auto w-fit h-fit text-textColor translate-y-[-50%] lg:px-[40px]

pages.LANDING

<p>&nbsp;</p>
<link href="https://fonts.googleapis.com" rel="preconnect" /><link href="https://fonts.gstatic.com" rel="preconnect" /><link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&amp;family=Playfair+Display:wght@700;900&amp;display=swap" rel="stylesheet" />
<style>
        :root {
            /* Outzip Brand Colors */
            --color-sunset: #F56A00;
            --color-tide: #0F2A38;
            --color-willow: #E2E71B;
            
            /* Extended palette for depth */
            --color-sunset-light: #FF8533;
            --color-sunset-dark: #D95800;
            --color-tide-light: #1a4158;
            --color-tide-dark: #0a1a24;
            --color-willow-light: #EBEF4D;
            --color-willow-muted: #c9cd19;
            
            /* Neutrals */
            --color-white: #ffffff;
            --color-off-white: #f8f9fa;
            --color-light-gray: #e9ecef;
            --color-mid-gray: #6c757d;
            --color-charcoal: #2d2d2d;
            
            /* Typography */
            --font-display: 'Playfair Display', serif;
            --font-body: 'DM Sans', sans-serif;
            
            /* Spacing */
            --space-xs: 0.5rem;
            --space-sm: 1rem;
            --space-md: 2rem;
            --space-lg: 4rem;
            --space-xl: 6rem;
            --space-2xl: 8rem;
            
            /* Animation */
            --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: var(--font-body);
            color: var(--color-charcoal);
            background-color: var(--color-off-white);
            line-height: 1.7;
            overflow-x: hidden;
        }
        
        /* Hero Section */
        .hero {
            min-height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--space-lg) var(--space-md);
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, var(--color-tide-dark) 0%, var(--color-tide) 100%);
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 50%, rgba(242, 231, 27, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(245, 106, 0, 0.06) 0%, transparent 50%);
            animation: breathe 8s ease-in-out infinite;
        }
        
        @keyframes breathe {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.7; }
        }
        
        .hero-content {
            max-width: 900px;
            text-align: center;
            position: relative;
            z-index: 1;
            animation: fadeInUp 1s var(--ease-smooth);
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .hero h1 {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 8vw, 5rem);
            font-weight: 900;
            color: var(--color-white);
            line-height: 1.1;
            margin-bottom: var(--space-md);
            letter-spacing: -0.02em;
        }
        
        .hero-subtitle {
            font-size: clamp(1rem, 2vw, 1.25rem);
            color: var(--color-willow);
            max-width: 600px;
            margin: 0 auto;
            font-weight: 400;
        }
        
        /* Container */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--space-md);
        }
        
        /* Section */
        section {
            padding: var(--space-xl) 0;
            position: relative;
        }
        
        section:not(.hero):not(.heritage-section)::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, var(--color-sunset) 0%, var(--color-willow) 50%, var(--color-tide) 100%);
            border-radius: 2px;
            opacity: 0.6;
        }
        
        .section-title {
            font-family: var(--font-display);
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 700;
            color: var(--color-tide);
            margin-bottom: var(--space-md);
            letter-spacing: -0.01em;
        }
        
        .section-subtitle {
            font-size: clamp(0.875rem, 1.5vw, 1rem);
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--color-sunset);
            font-weight: 500;
            margin-bottom: var(--space-sm);
        }
        
        /* Vision & Mission Grid */
        .vm-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--space-lg);
            margin-top: var(--space-lg);
        }
        
        .vm-card {
            background: var(--color-white);
            padding: var(--space-lg);
            border-radius: 4px;
            position: relative;
            transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
        }
        
        .vm-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, var(--color-sunset) 0%, var(--color-sunset-light) 100%);
            border-radius: 4px 0 0 4px;
        }
        
        .vm-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(245, 106, 0, 0.15);
        }
        
        .vm-card h3 {
            font-family: var(--font-display);
            font-size: 1.75rem;
            color: var(--color-tide);
            margin-bottom: var(--space-md);
        }
        
        .vm-card p {
            font-size: 1rem;
            line-height: 1.8;
            color: var(--color-charcoal);
        }
        
        /* Team Section */
        .team-section {
            background: var(--color-white);
        }
        
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--space-lg);
            margin-top: var(--space-lg);
        }
        
        .team-member {
            text-align: center;
            animation: fadeIn 0.8s var(--ease-smooth);
            animation-fill-mode: both;
        }
        
        .team-member:nth-child(1) { animation-delay: 0.1s; }
        .team-member:nth-child(2) { animation-delay: 0.2s; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }
        
        .team-image-wrapper {
            width: 200px;
            height: 200px;
            margin: 0 auto var(--space-md);
            border-radius: 50%;
            overflow: hidden;
            border: 4px solid var(--color-light-gray);
            transition: border-color 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
        }
        
        .team-member:hover .team-image-wrapper {
            border-color: var(--color-willow);
            box-shadow: 0 0 0 2px var(--color-willow-light);
        }
        
        .team-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .team-member h3 {
            font-family: var(--font-display);
            font-size: 1.5rem;
            color: var(--color-tide);
            margin-bottom: var(--space-xs);
        }
        
        .team-role {
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--color-sunset);
            margin-bottom: var(--space-md);
            font-weight: 500;
        }
        
        .team-bio {
            font-size: 0.95rem;
            line-height: 1.7;
            color: var(--color-charcoal);
            text-align: left;
            max-width: 500px;
            margin: 0 auto;
        }
        
        /* Heritage Section */
        .heritage-section {
            background: var(--color-tide);
            color: var(--color-white);
            position: relative;
            overflow: hidden;
        }
        
        .heritage-section::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent 0%, rgba(245, 106, 0, 0.08) 100%);
            pointer-events: none;
        }
        
        .heritage-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-xl);
            align-items: center;
        }
        
        .heritage-text {
            position: relative;
            z-index: 1;
        }
        
        .heritage-text .section-title {
            color: var(--color-white);
        }
        
        .heritage-text .section-subtitle {
            color: var(--color-sunset-light);
        }
        
        .heritage-quote {
            font-family: var(--font-display);
            font-size: clamp(1.25rem, 3vw, 1.75rem);
            font-style: italic;
            line-height: 1.5;
            color: var(--color-willow);
            margin-top: var(--space-md);
            padding-left: var(--space-md);
            border-left: 3px solid var(--color-willow);
        }
        
        .heritage-story {
            margin-top: var(--space-md);
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.85);
        }
        
        .heritage-image {
            position: relative;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }
        
        .heritage-image img {
            width: 100%;
            height: auto;
            display: block;
            filter: sepia(0.2) contrast(1.1);
        }
        
        /* Values Section */
        .values-section {
            background: var(--color-light-gray);
        }
        
        .values-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-md);
            margin-top: var(--space-lg);
        }
        
        .value-item {
            text-align: center;
            padding: var(--space-lg) var(--space-md);
            background: var(--color-white);
            border-radius: 4px;
            transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
            border-top: 3px solid transparent;
        }
        
        .value-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 40px rgba(15, 42, 56, 0.12);
            border-top-color: var(--color-sunset);
        }
        
        .value-icon {
            font-size: 2.5rem;
            margin-bottom: var(--space-md);
            filter: grayscale(0.3);
        }
        
        .value-item h3 {
            font-family: var(--font-display);
            font-size: 1.25rem;
            color: var(--color-tide);
            margin-bottom: var(--space-sm);
        }
        
        .value-item p {
            font-size: 0.9rem;
            color: var(--color-charcoal);
            line-height: 1.6;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .heritage-content {
                grid-template-columns: 1fr;
            }
            
            .heritage-image {
                order: -1;
            }
            
            .values-grid {
                grid-template-columns: 1fr;
            }
            
            .vm-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* Scroll animations */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);
        }
        
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
    </style>

<div class="hero">
<div class="hero-content">
<h1>Rethinking Outdoor Gear</h1>
<p class="hero-subtitle">Bringing the circular economy to the heart of adventure</p>
</div>
</div>

<section>
<div class="container">
<div class="vm-grid">
<div class="vm-card reveal">
<h3>Our Vision</h3>
<p>We place the circular economy at the center of outdoor brands' business activities. In doing so, we aim to contribute to a more sustainable world and enhance outdoor experiences through our innovative solution.</p>
<p style="margin-top: 1rem;">To achieve this, we aspire to become the leading outdoor equipment rental company.</p>
</div>
<div class="vm-card reveal">
<h3>Our Mission</h3>
<p>We aim to implement the circular economy in the outdoor industry through our innovative product-as-a-service solution. Our goal is to offer comprehensive services that consider and improve the entire lifecycle of outdoor equipment, from rental to returns, repairs, and upcycling.</p>
<p style="margin-top: 1rem; font-weight: 500; color: var(--color-sunset);">Circular. Simple &amp; Profitable.</p>
</div>
</div>
</div>
</section>

<section class="team-section">
<div class="container">
<p class="section-subtitle reveal">The Founding Team</p>
<h2 class="section-title reveal">Meet the Founders</h2>
<div class="team-grid">
<div class="team-member">
<div class="team-image-wrapper"><img src="https://cdn.mysharefox.com/turtle/uploads/documents/_Kai_round.png" alt="Kai Meier" /></div>
<h3>Kai Meier</h3>
<p class="team-role">Co-Founder / CEO</p>
<p class="team-bio">My passion for adventure began in my childhood. Whether it was traveling along the coasts of Europe in a camper van during summer holidays or cycling along the Weser River at the age of 12, I always felt most at home outdoors in nature. After finishing school, I traveled for a year, explored the world, and learned to surf and dive. However, I often lacked the resources to try new things.</p>
<p class="team-bio" style="margin-top: 1rem;">After graduating, I worked for a cargo bike rental company in Berlin. This experience inspired me to develop a similar concept for outdoor equipment. Together with Eloy, who shared a similar vision, we founded Outzip.</p>
</div>
<div class="team-member">
<div class="team-image-wrapper"><img src="https://cdn.mysharefox.com/turtle/uploads/documents/_Eloy_round.png" alt="Eloy Padilla" /></div>
<h3>Eloy Padilla</h3>
<p class="team-role">Co-Founder / COO</p>
<p class="team-bio">My focus is on outdoor sports such as surfing, snowboarding, climbing, and hiking. With experience in IT and audiovisual projects, I have managed corporate events worldwide. My passion for sustainability is evident in projects such as setting up a sustainable concept shop and supporting circular initiatives.</p>
<p class="team-bio" style="margin-top: 1rem;">Founding my first company, a D2C marketplace for sustainable outdoor brands, marked the beginning of my entrepreneurial journey. At Outzip, I combine my adventurous spirit, IT expertise, and building skills to lead the outdoor industry in circular retail.</p>
</div>
</div>
</div>
</section>

<section class="heritage-section">
<div class="container">
<div class="heritage-content">
<div class="heritage-text reveal">
<p class="section-subtitle">Our Heritage</p>
<h2 class="section-title">Learning from the Past</h2>
<p class="heritage-story">This photo shows my grandfather (Eloy) in 1950, when he expanded his small bicycle rental shop. Renting is not a new concept. In fact, simple and logical practices like renting bicycles, equipment, or tools &ndash; as well as circular approaches such as reusable milk bottles &ndash; have largely been forgotten or fallen into disuse. This shift is the result of a capitalist, linear, and profit-driven mindset that has shaped recent generations, making them among the most polluting and disconnected from nature.</p>
<p class="heritage-quote">"If we return and learn from nature, we can find all the solutions we need today."</p>
</div>
<div class="heritage-image reveal"><img src="https://cdn.mysharefox.com/turtle/uploads/documents/WhatsApp_Image_2024-10-09_at_17.31.32.jpeg" alt="Grandfather's bicycle rental shop in 1950" /></div>
</div>
</div>
</section>

<section class="values-section">
<div class="container">
<p class="section-subtitle reveal">Our Values</p>
<h2 class="section-title reveal">What Drives Us</h2>
<div class="values-grid">
<div class="value-item reveal">
<div class="value-icon">🔄</div>
<h3>Circular</h3>
<p>We believe in closing the loop, ensuring every piece of equipment lives its fullest lifecycle through rental, repair, and upcycling.</p>
</div>
<div class="value-item reveal">
<div class="value-icon">🌿</div>
<h3>Sustainable</h3>
<p>Our commitment to the environment drives every decision, from reducing waste to promoting conscious consumption.</p>
</div>
<div class="value-item reveal">
<div class="value-icon">⛰️</div>
<h3>Adventure</h3>
<p>We're passionate about making outdoor experiences accessible to everyone, removing barriers to exploration.</p>
</div>
</div>
</div>
</section>
<script>
        // Scroll reveal animation
        const revealElements = document.querySelectorAll('.reveal');
        
        const revealOnScroll = () => {
            revealElements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementVisible = 150;
                
                if (elementTop < window.innerHeight - elementVisible) {
                    element.classList.add('active');
                }
            });
        };
        
        window.addEventListener('scroll', revealOnScroll);
        revealOnScroll(); // Initial check
    </script>

<div><h1>Terms of Use &ndash; Outzip</h1> <p>These terms govern your use of Outzip.de, operated by Outzip UG, Rollbergstra&szlig;e 28A, Berlin (HRB 264494 B). By using our services, you agree to these terms and conditions.</p> <h2>1. General</h2> <p>Use of the platform implies full agreement with these Terms. If you do not agree, please refrain from using our services.</p> <h2>2. Parties</h2> <ul> <li><strong>Platform:</strong> Outzip UG ("we", "us").</li> <li><strong>Renter:</strong> The individual placing the rental order ("you", "your").</li> </ul> <h2>3. Payment, Deposit Authorization &amp; Pricing</h2> <ul> <li>All bookings are paid in advance online.</li> <li>For certain items, a security deposit is authorized (not charged) on your payment method. This authorization is released within 14 days after a successful return and inspection.</li> <li>All prices include VAT. Pricing errors may be corrected at our discretion, including cancellations of affected orders.</li> </ul> <h2>4. Condition of Rental Items</h2> <p>All items are professionally cleaned, inspected, and maintained before each rental to ensure top quality and functionality.</p> <h2>5. Damage, Misuse &amp; Loss</h2> <ul> <li>You must report any damage, accident, or technical issue immediately to <a href="mailto:orders@outzip.de">orders@outzip.de</a>.</li> <li>Normal wear and tear (e.g., minor scuffs) is acceptable. However, misuse or significant damage will incur a charge of 50% of the item&rsquo;s current market value.</li> <li>In case of total loss or theft, you will be charged 100% of the product's current market value. In theft cases, you must provide proof that the product was in use or secured (e.g., police report, photos).</li> </ul> <h2>6. Cleaning Policy</h2> <p>Standard cleaning is included. Items returned with excessive dirt or improper packaging may incur a &euro;10 extra cleaning fee.</p> <h2>7. Liability Disclaimer</h2> <p>Outzip UG is not liable for personal or third-party damage caused by incorrect use of rental items, unless in cases of gross negligence or willful misconduct by Outzip UG.</p> <h2>8. Data Protection</h2> <p>We treat your data confidentially and in accordance with our <a href="privacy-policy">Privacy Policy</a>.</p> <h2>9. Governing Law &amp; Jurisdiction</h2> <p>German law applies. Jurisdiction for all disputes is Berlin, Germany.</p> <h2>10. Changes to Terms</h2> <p>We may revise these Terms at any time. Updates take effect as soon as they are published on our website.</p> <h2>11. Cancellation &amp; Booking Modifications</h2> <ul> <li><strong>Cancellation more than 7 days prior:</strong> No charge.</li> <li><strong>7&ndash;2 days prior:</strong> 20% cancellation fee.</li> <li><strong>Within 48 hours:</strong> 80% cancellation fee.</li> <li>Item removals follow the same rules. Additions can be made at any time, subject to availability.</li> </ul> <h2>12. Contact</h2> <p>📧 <a href="mailto:orders@outzip.de">orders@outzip.de</a></p></div>

<p>&nbsp;</p>
<link href="https://fonts.googleapis.com" rel="preconnect" /><link href="https://fonts.gstatic.com" rel="preconnect" /><link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&amp;family=Playfair+Display:wght@700;900&amp;display=swap" rel="stylesheet" />
<style>
    :root {
      --color-sunset: #f56a00;
      --color-tide: #0f2a38;
      --color-willow: #e2e71b;
      --color-sunset-light: #ff8533;
      --color-sunset-dark: #d95800;
      --color-tide-light: #1a4158;
      --color-tide-dark: #0a1a24;
      --color-willow-light: #ebef4d;
      --color-willow-muted: #c9cd19;
      --color-white: #ffffff;
      --color-off-white: #f8f9fa;
      --color-light-gray: #e9ecef;
      --color-mid-gray: #6c757d;
      --color-charcoal: #2d2d2d;
      --font-display: "Playfair Display", serif;
      --font-body: "DM Sans", sans-serif;
      --space-xs: 0.5rem;
      --space-sm: 1rem;
      --space-md: 2rem;
      --space-lg: 4rem;
      --space-xl: 6rem;
      --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
      --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: var(--font-body);
      color: var(--color-charcoal);
      background-color: var(--color-off-white);
      line-height: 1.7;
      overflow-x: hidden;
    }
    .hero {
      min-height: 85vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--space-lg) var(--space-md);
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, var(--color-tide-dark) 0%, var(--color-tide) 100%);
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 80% 20%, rgba(226, 231, 27, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(245, 106, 0, 0.08) 0%, transparent 50%);
      opacity: 0.55;
    }
    .hero-content {
      max-width: 1100px;
      position: relative;
      z-index: 1;
    }
    .hero-badge {
      display: inline-block;
      background: rgba(226, 231, 27, 0.2);
      color: var(--color-willow);
      padding: 0.5rem 1.25rem;
      border-radius: 50px;
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-bottom: var(--space-md);
      border: 1px solid rgba(226, 231, 27, 0.3);
    }
    .hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 7vw, 4.5rem);
      font-weight: 900;
      color: var(--color-white);
      line-height: 1.1;
      margin-bottom: var(--space-md);
      letter-spacing: -0.02em;
    }
    .hero h1 .highlight {
      color: var(--color-willow);
      position: relative;
      display: inline-block;
    }
    .hero-subtitle {
      font-size: clamp(1.125rem, 2.5vw, 1.5rem);
      color: rgba(255, 255, 255, 0.9);
      max-width: 700px;
      margin-bottom: var(--space-lg);
      line-height: 1.6;
    }
    .hero-stats {
      display: flex;
      gap: var(--space-lg);
      flex-wrap: wrap;
    }
    .stat-item {
      text-align: center;
    }
    .stat-number {
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 5vw, 3.5rem);
      font-weight: 900;
      color: var(--color-sunset);
      line-height: 1;
      margin-bottom: var(--space-xs);
    }
    .stat-label {
      font-size: 0.875rem;
      color: rgba(255, 255, 255, 0.7);
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 var(--space-md);
    }
    section {
      padding: var(--space-xl) 0;
      position: relative;
    }
    .section-header {
      text-align: center;
      max-width: 800px;
      margin: 0 auto var(--space-lg);
    }
    .section-label {
      font-size: 0.875rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--color-sunset);
      font-weight: 600;
      margin-bottom: var(--space-sm);
    }
    .section-title {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 700;
      color: var(--color-tide);
      margin-bottom: var(--space-md);
      letter-spacing: -0.01em;
    }
    .section-description {
      font-size: 1.125rem;
      color: var(--color-mid-gray);
      line-height: 1.7;
    }
    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: var(--space-md);
      margin-top: var(--space-lg);
    }
    .benefit-card {
      background: var(--color-white);
      padding: var(--space-lg);
      border-radius: 8px;
      transition: all 0.4s var(--ease-smooth);
      border: 2px solid transparent;
      position: relative;
      overflow: hidden;
    }
    .benefit-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--color-sunset) 0%, var(--color-willow) 100%);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s var(--ease-smooth);
    }
    .benefit-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 60px rgba(15, 42, 56, 0.12);
      border-color: var(--color-light-gray);
    }
    .benefit-card:hover::before {
      transform: scaleX(1);
    }
    .benefit-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, rgba(245, 106, 0, 0.1) 0%, rgba(226, 231, 27, 0.1) 100%);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.75rem;
      margin-bottom: var(--space-md);
    }
    .benefit-card h3 {
      font-family: var(--font-display);
      font-size: 1.5rem;
      color: var(--color-tide);
      margin-bottom: var(--space-sm);
    }
    .benefit-card p {
      color: var(--color-charcoal);
      line-height: 1.7;
    }
    .who-section {
      background: var(--color-white);
    }
    .who-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: var(--space-md);
      margin-top: var(--space-lg);
    }
    .who-card {
      text-align: center;
      padding: var(--space-lg) var(--space-md);
      background: var(--color-off-white);
      border-radius: 8px;
      transition: all 0.3s var(--ease-smooth);
      cursor: default;
    }
    .who-card:hover {
      background: var(--color-white);
      box-shadow: 0 8px 30px rgba(15, 42, 56, 0.08);
    }
    .who-card .icon {
      font-size: 2.5rem;
      margin-bottom: var(--space-md);
      filter: grayscale(0.2);
    }
    .who-card h3 {
      font-family: var(--font-display);
      font-size: 1.25rem;
      color: var(--color-tide);
      margin-bottom: var(--space-xs);
    }
    .who-card p {
      font-size: 0.9rem;
      color: var(--color-mid-gray);
    }
    .how-section {
      background: linear-gradient(180deg, var(--color-off-white) 0%, var(--color-light-gray) 100%);
    }
    .steps-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: var(--space-lg);
      margin-top: var(--space-lg);
      position: relative;
    }
    .step {
      position: relative;
      text-align: center;
    }
    .step-number {
      width: 60px;
      height: 60px;
      background: var(--color-sunset);
      color: var(--color-white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 700;
      margin: 0 auto var(--space-md);
      box-shadow: 0 4px 20px rgba(245, 106, 0, 0.3);
    }
    .step h3 {
      font-family: var(--font-display);
      font-size: 1.375rem;
      color: var(--color-tide);
      margin-bottom: var(--space-sm);
    }
    .step p {
      color: var(--color-charcoal);
      line-height: 1.7;
    }
    .cta-section {
      background: var(--color-tide);
      color: var(--color-white);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 30% 50%, rgba(226, 231, 27, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 70% 50%, rgba(245, 106, 0, 0.06) 0%, transparent 60%);
    }
    .cta-content {
      position: relative;
      z-index: 1;
      max-width: 700px;
      margin: 0 auto;
    }
    .cta-content h2 {
      font-family: var(--font-display);
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 900;
      margin-bottom: var(--space-md);
      line-height: 1.2;
    }
    .cta-content p {
      font-size: 1.125rem;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: var(--space-lg);
      line-height: 1.7;
    }
    .cta-button {
      display: inline-block;
      background: var(--color-willow);
      color: var(--color-tide);
      padding: 1.125rem 3rem;
      border-radius: 50px;
      font-size: 1rem;
      font-weight: 700;
      text-decoration: none;
      transition: all 0.3s var(--ease-smooth);
      box-shadow: 0 8px 30px rgba(226, 231, 27, 0.3);
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    .cta-button:hover {
      background: var(--color-willow-light);
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(226, 231, 27, 0.4);
    }
    .cta-button:active {
      transform: translateY(-2px);
    }
    .value-section {
      background: var(--color-white);
    }
    .value-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-lg);
      margin-top: var(--space-lg);
    }
    .value-item {
      display: flex;
      gap: var(--space-md);
      padding: var(--space-md);
      background: var(--color-off-white);
      border-radius: 8px;
      transition: transform 0.3s var(--ease-smooth);
    }
    .value-item:hover {
      transform: translateX(8px);
    }
    .value-icon {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, var(--color-sunset) 0%, var(--color-sunset-light) 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-white);
      font-size: 1.25rem;
    }
    .value-content h4 {
      font-family: var(--font-display);
      font-size: 1.125rem;
      color: var(--color-tide);
      margin-bottom: 0.25rem;
    }
    .value-content p {
      font-size: 0.9rem;
      color: var(--color-mid-gray);
      line-height: 1.6;
    }
    @media (max-width: 768px) {
      .hero-stats {
        justify-content: center;
      }
      .value-grid {
        grid-template-columns: 1fr;
      }
      .steps-container {
        gap: var(--space-md);
      }
    }
    /* Visible on first paint — no JS, no staggered animations */
    .reveal {
      opacity: 1;
      transform: translateY(0);
    }
  </style>
<div class="hero">
<div class="hero-content">
<div class="hero-badge">Partner Program</div>
<h1>Grow Your Revenue,<br />Delight Your <span class="highlight">Customers</span></h1>
<p class="hero-subtitle">Join Outzip's affiliate program and earn 10% commission while providing your customers with premium outdoor gear rentals. No inventory, no risk&mdash;just value.</p>
<div class="hero-stats">
<div class="stat-item">
<div class="stat-number">10%</div>
<div class="stat-label">Commission</div>
</div>
<div class="stat-item">
<div class="stat-number">&infin;</div>
<div class="stat-label">Earning Potential</div>
</div>
<div class="stat-item">
<div class="stat-number">0&euro;</div>
<div class="stat-label">Upfront Cost</div>
</div>
</div>
</div>
</div>
<section>
<div class="container">
<div class="section-header reveal">
<div class="section-label">Why Partner With Us</div>
<h2 class="section-title">Turn Recommendations Into Revenue</h2>
<p class="section-description">Strengthen customer relationships while building a new income stream. We handle the gear, you provide the value.</p>
</div>
<div class="benefits-grid">
<div class="benefit-card reveal">
<div class="benefit-icon">💰</div>
<h3>Earn 10% Commission</h3>
<p>Generate passive income on every rental booked through your referral. Your customers already need gear&mdash;now you can benefit from connecting them.</p>
</div>
<div class="benefit-card reveal">
<div class="benefit-icon">🎯</div>
<h3>Increase Customer Loyalty</h3>
<p>Provide a complete service by offering quality gear alongside your experiences. Customers remember who made their adventure possible.</p>
</div>
<div class="benefit-card reveal">
<div class="benefit-icon">🔄</div>
<h3>Zero Inventory Risk</h3>
<p>No storage, maintenance, or upfront investment required. Focus on what you do best while we handle the equipment logistics.</p>
</div>
<div class="benefit-card reveal">
<div class="benefit-icon">📊</div>
<h3>Customer Insights</h3>
<p>Learn what gear your customers need most. We share data that helps you understand and serve your audience better.</p>
</div>
<div class="benefit-card reveal">
<div class="benefit-icon">🌿</div>
<h3>Sustainability Matters</h3>
<p>Support the circular economy while meeting customer needs. Show your commitment to responsible outdoor practices.</p>
</div>
<div class="benefit-card reveal">
<div class="benefit-icon">🤝</div>
<h3>Partnership Support</h3>
<p>We're invested in your success. Get dedicated support, marketing materials, and insights to maximize your affiliate performance.</p>
</div>
</div>
</div>
</section>
<section class="who-section">
<div class="container">
<div class="section-header reveal">
<div class="section-label">Perfect For</div>
<h2 class="section-title">Who Should Join?</h2>
<p class="section-description">This program is designed for businesses and professionals who connect customers with outdoor experiences.</p>
</div>
<div class="who-grid">
<div class="who-card reveal">
<div class="icon">🗺️</div>
<h3>Tour Operators</h3>
<p>Enhance your tours with quality gear options</p>
</div>
<div class="who-card reveal">
<div class="icon">🏢</div>
<h3>Travel Agencies</h3>
<p>Complete your travel packages with equipment rentals</p>
</div>
<div class="who-card reveal">
<div class="icon">🏔️</div>
<h3>Tourism Offices</h3>
<p>Support visitors with essential outdoor gear access</p>
</div>
<div class="who-card reveal">
<div class="icon">🧭</div>
<h3>Guides &amp; Instructors</h3>
<p>Equip your clients professionally and earn commission</p>
</div>
<div class="who-card reveal">
<div class="icon">🎪</div>
<h3>Experience Providers</h3>
<p>Add value to your activities with gear solutions</p>
</div>
<div class="who-card reveal">
<div class="icon">📍</div>
<h3>Destination Marketers</h3>
<p>Make outdoor adventures more accessible</p>
</div>
</div>
</div>
</section>
<section class="how-section">
<div class="container">
<div class="section-header reveal">
<div class="section-label">Simple Process</div>
<h2 class="section-title">How It Works</h2>
<p class="section-description">Start earning in three straightforward steps. No complicated setup, no hidden requirements.</p>
</div>
<div class="steps-container">
<div class="step">
<div class="step-number">1</div>
<h3>Join the Program</h3>
<p>Fill out our quick application form. We'll review and get you set up with everything you need to start referring customers.</p>
</div>
<div class="step">
<div class="step-number">2</div>
<h3>Refer Customers</h3>
<p>Share your unique affiliate link with clients who need outdoor gear. Integrate it into your booking flow, website, or recommendations.</p>
</div>
<div class="step">
<div class="step-number">3</div>
<h3>Earn Commission</h3>
<p>Receive 10% commission on every rental. Track performance, understand customer preferences, and watch your revenue grow.</p>
</div>
</div>
</div>
</section>
<section class="value-section">
<div class="container">
<div class="section-header reveal">
<div class="section-label">The Outzip Advantage</div>
<h2 class="section-title">Why Your Customers Will Love It</h2>
<p class="section-description">We make it easy for you to recommend us with confidence.</p>
</div>
<div class="value-grid">
<div class="value-item reveal">
<div class="value-icon">✓</div>
<div class="value-content">
<h4>Premium Quality Equipment</h4>
<p>Top outdoor brands, professionally maintained and regularly updated inventory.</p>
</div>
</div>
<div class="value-item reveal">
<div class="value-icon">✓</div>
<div class="value-content">
<h4>Flexible Rental Periods</h4>
<p>From weekend adventures to month-long expeditions, we accommodate all timelines.</p>
</div>
</div>
<div class="value-item reveal">
<div class="value-icon">✓</div>
<div class="value-content">
<h4>Seamless Booking Experience</h4>
<p>Easy online reservation system with transparent pricing and instant confirmation.</p>
</div>
</div>
<div class="value-item reveal">
<div class="value-icon">✓</div>
<div class="value-content">
<h4>Reliable Customer Service</h4>
<p>Dedicated support team ensuring your customers have a smooth rental experience.</p>
</div>
</div>
</div>
</div>
</section>
<section class="cta-section">
<div class="container">
<div class="cta-content">
<h2>Let's Create Value Together</h2>
<p>Join a growing network of partners who are enhancing their services, delighting customers, and generating sustainable revenue. The circular economy starts with collaboration.</p>
<a class="cta-button" href="https://2dgefg.share-eu1.hsforms.com/2pQbAe8vPQLuUSvdVtXb21w" target="_blank" rel="noopener noreferrer">Become a Partner</a></div>
</div>
</section>

Account settings

My orders

Products

Blog

Affiliates

Help 

About Us

Local Shops

<em>News:</em>&nbsp;&nbsp;<span class='text-normal'>Discounts to all members of <Partner name></span>

See our selection of guides for activities and equipment

Book quality-checked tents, sleeping bags, and essentials. Delivered ready to use.

Here on the help pages you will find answers to some of the most common questions - use the menu to navigate.

Do not find what you are wondering, want to give us suggestions for new products or give us feedback so we can get better?

<h1>Contact us</h1>

Find the product you want or browse for the activity you want and find our suggestions for products for the job.

<h3>1. Browse &amp; Book</h3>
<p>Explore our curated selection of high-quality outdoor gear. Create your own bundles and add any extras you need &mdash; all in a few easy steps.</p>
<h3>2. Flexible Pricing</h3>
<p>Our pricing adjusts automatically: the longer you rent, the less you pay per day. Great gear, even better value.</p>
<h3>3. Timely Shipping</h3>
<p>Once your booking is confirmed, we&rsquo;ll ship your gear in time to ensure it arrives before your adventure begins.</p>
<h3>4. Easy Returns &amp; Extensions</h3>
<p>Before your rental period ends, we'll remind you. You can easily extend the rental or use the return label we&rsquo;ll provide to send it back hassle-free.</p>
<h3>5. Outzip-Care</h3>
<p style="font-family: inherit; color: inherit;">Every item is professionally cleaned and quality-checked.</p>
<p style="font-family: inherit; color: inherit;">Normal signs of use are acceptable. Outzip Care does <span class="s1"><strong>not cover abuse, loss, or significant damage</strong></span>. Customers are responsible for returning items in reasonable condition.&nbsp;</p>
<h3>6. Subscriptions Available</h3>
<p>Need gear longer term? Ask us about our flexible subscription plans (up to 12 months). Just reach out &mdash; we&rsquo;re happy to help.</p>

Bring your booking code to your chosen location. Pick up the tool, and you are ready for your project. Deliver the product at the same place when you are done.

Choose the product station closest to you. Book and pay online. Done.

If you have chosen home delivery, you will have the equipment delivered before your rental period begins and picked up after your rental period has ended.

Home delivery

Delivery and return

The Hilleberg one-person tent was excellent, with plenty of room for a tall person like me, rain and windproof, and easy to set up and take down. Thanks again for the hassle-free rental process!

We took a trip to Saxon Switzerland and were impressed with the high-quality gear. Everything worked perfectly and made our experience even better. We'll definitely use Outzip again and would recommend it to friends. 

If it hadn't been with outzip, i would not have gone camping! High quality equipment, nice founders, and great service. Recommended!

Frequent users can save with special<br> membership pricing and benefits

For many products and activities

A Yourcompany.no membership gives access to high quality products at membership prices so you can take on more and larger projects without worrying about buying expensive products. Pick up and  return at your chosen location.

A Yourcompany.no membership gives ccess to high quality products at membership prices so you can take on more and larger projects without worrying about buying expensive products. Pick up and  return at your chosen location.

Yourcompany.no JustClick is for everybody that needs a product once in a while. Convenient booking online, pick up and return at your chosen location. Get access to high quality products and save your money for something fun instead

The deposit works just like when you use a hotel or rental car. When ordering, an extra amount is reserved on your card for a small security against damage or late return. Once you have returned, we will check the equipment and release the amount on your card. Everything happens automatically and you do not have to do anything. For more information, see the help pages.

Yourcompany.no membership is for you who need a few more produts, or expect to use them more often.

Member prices on wide product selection

Additional discounts for longer term rental

Other membership benefits soon...

Enter the email address associated with your account, and we’ll email you a link to reset your password.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci autem consectetur consequuntur earum error et id, laboriosam minus mollitia nam quasi quia quibusdam rem sequi similique sunt tempora. Corporis, dolor.

Always Ready.

Pick up the gear at a
your destination.

Find your activity

How it works

Find gear from local retailers

Pick up the gear at ayour destination.

Find your activity

How it works

Find gear from local retailers

Pick up the gear at a
your destination.