---
import Layout from '../layouts/Layout.astro';
import Footer from '../components/navigation/Footer.astro';
import { getLangFromUrl, useTranslations } from '../lib/i18n/config';

const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);

// App-Daten für den Scroller
const apps = [
  {
    name: 'Memoro',
    descriptionKey: 'app.memoro.description',
    logo: '/logos/Memoro-Logo-V1.png',
    categoryKey: 'app.category.productivity',
    color: 'from-blue-500 to-cyan-500',
    href: '/apps/memoro'
  },
  {
    name: 'Märchenzauber',
    descriptionKey: 'app.maerchenzauber.description',
    logo: '/logos/Märchenzauber-logo.png',
    categoryKey: 'app.category.creative',
    color: 'from-purple-500 to-pink-500',
    href: '/apps/maerchenzauber'
  },
  {
    name: 'Moodlit',
    descriptionKey: 'app.moodlit.description',
    logo: '🌙',
    categoryKey: 'app.category.wellness',
    color: 'from-indigo-500 to-purple-500',
    href: '/apps/moodlit'
  },
  {
    name: 'Zitare',
    descriptionKey: 'app.zitare.description',
    logo: '📚',
    categoryKey: 'app.category.research',
    color: 'from-emerald-500 to-teal-500',
    href: '/apps/zitare'
  },
  {
    name: 'Manadeck',
    descriptionKey: 'app.manadeck.description',
    logo: '⚪',
    categoryKey: 'app.category.productivity',
    color: 'from-blue-500 to-indigo-500',
    href: '/apps/manadeck'
  },
  {
    name: 'Pictus',
    descriptionKey: 'app.pictus.description',
    logo: '🎨',
    categoryKey: 'app.category.creative',
    color: 'from-pink-500 to-rose-500',
    href: '/apps/pictus'
  },
  {
    name: 'Orakel',
    descriptionKey: 'app.orakel.description',
    logo: '🔮',
    categoryKey: 'app.category.productivity',
    color: 'from-violet-500 to-purple-500',
    href: '/apps/orakel'
  },
  {
    name: 'Nutriphi',
    descriptionKey: 'app.nutriphi.description',
    logo: '🥗',
    categoryKey: 'app.category.wellness',
    color: 'from-green-500 to-emerald-500',
    href: '/apps/nutriphi'
  },
  {
    name: 'Traces',
    descriptionKey: 'app.traces.description',
    logo: '🗺️',
    categoryKey: 'app.category.wellness',
    color: 'from-amber-500 to-orange-500',
    href: '/apps/traces'
  }
];
---

<Layout title="Manacore - Intelligente KI-Plattform mit flexiblem Creditsystem">
  <!-- Hero Section -->
  <section class="hero">
    <div class="hero-overlay"></div>

    <div class="hero-content">
      <div class="hero-text">
        <h1 class="hero-title">
          {t('home.hero.title')} <span class="gradient-text">{t('home.hero.titleHighlight')}</span>
        </h1>

        <p class="hero-subtitle">
          {t('home.hero.subtitle')}
        </p>

        <div class="hero-cta">
          <a href="/start" class="btn-primary">
            {t('button.startFree')}
          </a>
          <a href="#mehr" class="btn-secondary">
            {t('button.learnMore')}
          </a>
        </div>
      </div>

      <div class="hero-image">
        <img
          src="/images/Mana_Landscape_Manacore_AI_Credits_16x9.jpg"
          alt={t('home.hero.imageAlt')}
          loading="eager"
        />
      </div>
    </div>
  </section>

  <!-- App Scroller Section -->
  <section class="apps-section">
    <div class="apps-container">
      <div class="apps-header">
        <h2 class="apps-title">{t('home.apps.title')} <span class="gradient-text">{t('home.apps.titleHighlight')}</span></h2>
        <p class="apps-subtitle">
          {t('home.apps.subtitle')}
        </p>
      </div>

      <div class="apps-scroller">
        <div class="apps-track">
          {apps.map((app) => (
            <a href={app.href} class="app-card">
              <div class="app-card-inner">
                <div class="app-icon-wrapper">
                  <div class={`app-icon-bg bg-gradient-to-br ${app.color}`}></div>
                  {app.logo.startsWith('/') ? (
                    <img src={app.logo} alt={app.name} class="app-logo" />
                  ) : (
                    <span class="app-emoji">{app.logo}</span>
                  )}
                </div>

                <div class="app-content">
                  <div class="app-category">{t(app.categoryKey)}</div>
                  <h3 class="app-name">{app.name}</h3>
                  <p class="app-description">{t(app.descriptionKey)}</p>
                </div>

                <div class="app-footer">
                  <span class="app-button">
                    {t('button.learnMore')}
                    <svg class="app-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                  </span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>

      <!-- Scroll Hint -->
      <div class="scroll-hint">
        <span>{t('home.apps.scrollHint')}</span>
        <svg class="scroll-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
        </svg>
      </div>
    </div>
  </section>

  <!-- Principles Section -->
  <section class="principles-section">
    <div class="principles-overlay"></div>

    <div class="principles-container">
      <div class="principles-grid">
        <!-- Card 1: Skalierbar -->
        <div class="principle-card">
          <div class="principle-card-inner">
            <div class="principle-icon-wrapper">
              <svg class="principle-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
              </svg>
            </div>
            <div class="principle-content">
              <h3 class="principle-title">Skalierbar mit KI</h3>
              <p class="principle-description">
                Wir bauen unsere Apps skalierbar mit modernster KI-Technologie und einem möglichst unabhängigen Tech-Stack. So bleiben wir flexibel und zukunftssicher.
              </p>
            </div>
          </div>
        </div>

        <!-- Card 2: Feedback Loop -->
        <div class="principle-card">
          <div class="principle-card-inner">
            <div class="principle-icon-wrapper">
              <svg class="principle-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
              </svg>
            </div>
            <div class="principle-content">
              <h3 class="principle-title">Enger Feedback-Loop</h3>
              <p class="principle-description">
                Alle Apps sammeln direktes Feedback und bieten verschiedene Personalisierungsmöglichkeiten. Wir entwickeln eng mit unseren Kunden zusammen.
              </p>
            </div>
          </div>
        </div>

        <!-- Card 3: Inklusiv -->
        <div class="principle-card">
          <div class="principle-card-inner">
            <div class="principle-icon-wrapper">
              <svg class="principle-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </div>
            <div class="principle-content">
              <h3 class="principle-title">Inklusiv & Barrierefrei</h3>
              <p class="principle-description">
                Alle Apps werden möglichst barrierefrei gestaltet und in vielen Sprachen verfügbar sein. Technologie sollte für alle zugänglich sein.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Why Section -->
  <section class="why-section">
    <div class="why-overlay"></div>

    <div class="why-container">
      <!-- Section Header -->
      <div class="why-header">
        <h2 class="why-main-title">Warum wir das machen</h2>
        <p class="why-main-subtitle">Unsere Leitprinzipien und Werte, die uns antreiben</p>
      </div>

      <!-- Masonry Grid -->
      <div class="masonry-grid">
        <div class="masonry-item masonry-large">
          <div class="masonry-content">
            <span class="masonry-number">01</span>
            <h4 class="masonry-title">Technologie für alle</h4>
            <p class="masonry-text">Wir glauben, dass jeder Zugang zu modernster Technologie haben sollte. Deshalb machen wir KI erschwinglich und einfach zugänglich.</p>
          </div>
        </div>

        <div class="masonry-item masonry-medium">
          <div class="masonry-content">
            <span class="masonry-number">02</span>
            <h4 class="masonry-title">Transparent & Fair</h4>
            <p class="masonry-text">Keine versteckten Kosten, keine Lock-ins. Was du siehst, ist was du bekommst.</p>
          </div>
        </div>

        <div class="masonry-item masonry-medium">
          <div class="masonry-content">
            <span class="masonry-number">03</span>
            <h4 class="masonry-title">Community-getrieben</h4>
            <p class="masonry-text">Unsere Nutzer gestalten aktiv mit. Feedback wird gehört und umgesetzt.</p>
          </div>
        </div>

        <div class="masonry-item masonry-large">
          <div class="masonry-content">
            <span class="masonry-number">04</span>
            <h4 class="masonry-title">Nachhaltig & Verantwortungsvoll</h4>
            <p class="masonry-text">KI soll die Welt besser machen. Wir entwickeln mit Bedacht und denken an die Auswirkungen unserer Technologie.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Journey Section - Timeline -->
  <section class="journey-section">
    <div class="journey-overlay"></div>

    <div class="journey-container">
      <!-- Section Header -->
      <div class="journey-header">
        <h2 class="journey-main-title">Unsere Reise</h2>
        <p class="journey-main-subtitle">Von der Vision zur Realität - wie wir Schritt für Schritt die Zukunft gestalten</p>
      </div>

      <!-- Timeline -->
      <div class="timeline-grid">
        <div class="timeline-item timeline-left">
          <div class="timeline-dot"></div>
          <div class="timeline-content">
            <span class="timeline-badge">Mission</span>
            <h4 class="timeline-title">Demokratisierung von KI</h4>
            <p class="timeline-text">Wir brechen die Barrieren ab, die Menschen von modernster KI-Technologie trennen. Jeder sollte die Möglichkeit haben, die Kraft der KI zu nutzen.</p>
          </div>
        </div>

        <div class="timeline-item timeline-right">
          <div class="timeline-dot"></div>
          <div class="timeline-content">
            <span class="timeline-badge">Vision</span>
            <h4 class="timeline-title">Eine vernetzte Zukunft</h4>
            <p class="timeline-text">Eine Welt, in der jeder die Werkzeuge hat, um seine Ideen zu verwirklichen. Technologie als Wegbereiter für Kreativität und Innovation.</p>
          </div>
        </div>

        <div class="timeline-item timeline-left">
          <div class="timeline-dot"></div>
          <div class="timeline-content">
            <span class="timeline-badge">Werte</span>
            <h4 class="timeline-title">Ethik & Verantwortung</h4>
            <p class="timeline-text">Bei jedem Feature fragen wir: Macht das die Welt besser? Technologie mit Verantwortungsbewusstsein zu entwickeln ist unser Anspruch.</p>
          </div>
        </div>

        <div class="timeline-item timeline-right">
          <div class="timeline-dot"></div>
          <div class="timeline-content">
            <span class="timeline-badge">Commitment</span>
            <h4 class="timeline-title">Open & Transparent</h4>
            <p class="timeline-text">Wir teilen unser Wissen und lernen von der Community. Gemeinsam schaffen wir mehr als alleine.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <Footer />
</Layout>

<style>
  .hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  }

  .hero-overlay {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
      radial-gradient(circle at 80% 50%, rgba(37, 99, 235, 0.1) 0%, transparent 50%);
    pointer-events: none;
  }

  .hero-content {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-unit);
    max-width: 1400px;
    width: 100%;
    padding: 0 calc(var(--grid-unit) * 2);
    align-items: center;
  }

  .hero-text {
    grid-column: 1 / 7;
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-unit) * 0.75);
  }

  .hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    color: #f8fafc;
    margin: 0;
    letter-spacing: -0.02em;
  }

  .gradient-text {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
  }

  .hero-subtitle {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0;
    max-width: 540px;
  }

  .hero-cta {
    display: flex;
    gap: calc(var(--grid-unit) * 0.5);
    margin-top: calc(var(--grid-unit) * 0.5);
    flex-wrap: wrap;
  }

  .btn-primary,
  .btn-secondary {
    padding: 0 calc(var(--grid-unit) * 0.75);
    height: calc(var(--grid-unit) * 1.25);
    font-size: 1.125rem;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  .btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow:
      0 4px 20px rgba(59, 130, 246, 0.4),
      0 0 0 0 rgba(59, 130, 246, 0.5);
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
      0 8px 30px rgba(59, 130, 246, 0.5),
      0 0 0 4px rgba(59, 130, 246, 0.2);
  }

  .btn-primary:active {
    transform: translateY(0);
  }

  .btn-secondary {
    background: rgba(248, 250, 252, 0.1);
    color: #f8fafc;
    border: 2px solid rgba(248, 250, 252, 0.2);
    backdrop-filter: blur(10px);
  }

  .btn-secondary:hover {
    background: rgba(248, 250, 252, 0.15);
    border-color: rgba(248, 250, 252, 0.3);
    transform: translateY(-2px);
  }

  .btn-secondary:active {
    transform: translateY(0);
  }

  .hero-image {
    grid-column: 7 / 13;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
      0 25px 50px -12px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(248, 250, 252, 0.1);
    transform: perspective(1000px) rotateY(-5deg);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hero-image:hover {
    transform: perspective(1000px) rotateY(0deg) scale(1.02);
  }

  .hero-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  /* Large Tablet/Small Desktop Layout */
  @media (max-width: 1200px) {
    .hero-content {
      max-width: 1100px;
      gap: calc(var(--grid-unit) * 0.75);
    }

    .hero-text {
      grid-column: 1 / 6;
    }

    .hero-image {
      grid-column: 6 / 13;
    }
  }

  /* Tablet Layout */
  @media (max-width: 1024px) {
    .hero-content {
      grid-template-columns: 1fr;
      gap: calc(var(--grid-unit) * 2);
      padding: calc(var(--grid-unit) * 1.5);
    }

    .hero-text {
      grid-column: 1 / -1;
      text-align: center;
      align-items: center;
      order: 2;
    }

    .hero-title {
      font-size: clamp(2rem, 6vw, 3rem);
    }

    .hero-subtitle {
      max-width: 600px;
      font-size: clamp(1rem, 2.5vw, 1.25rem);
    }

    .hero-cta {
      justify-content: center;
      margin-top: calc(var(--grid-unit) * 0.75);
    }

    .hero-image {
      grid-column: 1 / -1;
      max-width: 650px;
      width: 100%;
      margin: 0 auto;
      order: 1;
      transform: perspective(1000px) rotateY(0deg);
    }
  }

  /* Small Tablet Layout */
  @media (max-width: 768px) {
    .hero {
      min-height: auto;
      padding: calc(var(--grid-unit) * 1.5) 0;
    }

    .hero-content {
      gap: calc(var(--grid-unit) * 1.5);
      padding: calc(var(--grid-unit) * 1);
    }

    .hero-text {
      gap: calc(var(--grid-unit) * 0.6);
    }

    .hero-title {
      font-size: clamp(1.75rem, 5.5vw, 2.5rem);
    }

    .hero-subtitle {
      font-size: clamp(0.95rem, 2.2vw, 1.125rem);
      max-width: 500px;
    }

    .hero-image {
      max-width: 550px;
      border-radius: 16px;
    }

    .btn-primary,
    .btn-secondary {
      height: calc(var(--grid-unit) * 1.15);
      font-size: 1.0625rem;
      padding: 0 calc(var(--grid-unit) * 0.6);
    }
  }

  /* Mobile Layout */
  @media (max-width: 640px) {
    .hero {
      min-height: auto;
      padding: calc(var(--grid-unit) * 1.25) 0;
    }

    .hero-content {
      padding: 0 calc(var(--grid-unit) * 0.6);
      gap: calc(var(--grid-unit) * 1.25);
    }

    .hero-text {
      gap: calc(var(--grid-unit) * 0.5);
    }

    .hero-title {
      font-size: 1.75rem;
      line-height: 1.15;
    }

    .hero-subtitle {
      font-size: 0.9375rem;
      line-height: 1.5;
      max-width: 100%;
    }

    .hero-cta {
      flex-direction: column;
      width: 100%;
      gap: calc(var(--grid-unit) * 0.35);
      margin-top: calc(var(--grid-unit) * 0.6);
    }

    .btn-primary,
    .btn-secondary {
      width: 100%;
      height: calc(var(--grid-unit) * 1.15);
      font-size: 1rem;
    }

    .hero-image {
      border-radius: 12px;
      max-width: 100%;
    }
  }

  /* Extra Small Mobile */
  @media (max-width: 400px) {
    .hero {
      padding: calc(var(--grid-unit) * 1) 0;
    }

    .hero-content {
      padding: 0 calc(var(--grid-unit) * 0.5);
      gap: var(--grid-unit);
    }

    .hero-title {
      font-size: 1.5rem;
    }

    .hero-subtitle {
      font-size: 0.875rem;
    }

    .btn-primary,
    .btn-secondary {
      height: var(--grid-unit);
      font-size: 0.9375rem;
    }
  }

  /* Animation für Page Load */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .hero-text > * {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) backwards;
  }

  .hero-title {
    animation-delay: 0.1s;
  }

  .hero-subtitle {
    animation-delay: 0.2s;
  }

  .hero-cta {
    animation-delay: 0.3s;
  }

  .hero-image {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
  }

  /* ========================
     APP SCROLLER SECTION
     ======================== */

  .apps-section {
    position: relative;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    padding: calc(var(--grid-unit) * 3) 0;
    overflow: hidden;
  }

  .apps-container {
    max-width: 100%;
    margin: 0 auto;
  }

  .apps-header {
    text-align: center;
    margin-bottom: calc(var(--grid-unit) * 2);
    padding: 0 calc(var(--grid-unit) * 2);
  }

  .apps-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: #f8fafc;
    margin: 0 0 calc(var(--grid-unit) * 0.5) 0;
    line-height: 1.2;
  }

  .apps-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #cbd5e1;
    margin: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  .apps-scroller {
    position: relative;
    padding: calc(var(--grid-unit) * 0.5) calc(var(--grid-unit) * 2);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.3) rgba(30, 41, 59, 0.3);
  }

  .apps-scroller::-webkit-scrollbar {
    height: 8px;
  }

  .apps-scroller::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.3);
    border-radius: 4px;
  }

  .apps-scroller::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.5);
    border-radius: 4px;
    transition: background 0.3s ease;
  }

  .apps-scroller::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.7);
  }

  .apps-track {
    display: flex;
    gap: calc(var(--grid-unit) * 0.75);
    padding-bottom: calc(var(--grid-unit) * 0.5);
  }

  .apps-track::after {
    content: '';
    display: block;
    flex-shrink: 0;
    width: calc(var(--grid-unit) * 2);
  }

  .app-card {
    flex: 0 0 auto;
    width: 320px;
    height: 380px;
    text-decoration: none;
    display: block;
    cursor: pointer;
  }

  .app-card-inner {
    height: 100%;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(248, 250, 252, 0.1);
    border-radius: 20px;
    padding: calc(var(--grid-unit) * 0.75);
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
  }

  .app-card-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(59, 130, 246, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  .app-card:hover .app-card-inner {
    transform: translateY(-8px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow:
      0 20px 40px -15px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(59, 130, 246, 0.2);
  }

  .app-card:hover .app-card-inner::before {
    opacity: 1;
  }

  .app-icon-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: calc(var(--grid-unit) * 0.25);
  }

  .app-icon-bg {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    opacity: 0.15;
    transition: all 0.4s ease;
  }

  .app-card:hover .app-icon-bg {
    opacity: 0.25;
    transform: scale(1.1);
  }

  .app-logo {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    z-index: 1;
  }

  .app-emoji {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 3rem;
    z-index: 1;
  }

  .app-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-unit) * 0.25);
    min-height: 0;
  }

  .app-category {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #3b82f6;
    margin-bottom: calc(var(--grid-unit) * 0.125);
  }

  .app-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0;
    line-height: 1.3;
  }

  .app-description {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #cbd5e1;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .app-footer {
    padding-top: calc(var(--grid-unit) * 0.25);
    margin-top: auto;
  }

  .app-button {
    width: 100%;
    padding: 0;
    height: auto;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94a3b8;
    background: transparent;
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--grid-unit) * 0.15);
    pointer-events: none;
  }

  .app-card:hover .app-button {
    color: #cbd5e1;
  }

  .app-arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
  }

  .app-card:hover .app-arrow {
    transform: translateX(3px);
  }

  .scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--grid-unit) * 0.25);
    margin-top: calc(var(--grid-unit) * 1.5);
    padding: 0 calc(var(--grid-unit) * 2);
    font-size: 0.875rem;
    color: #94a3b8;
    animation: pulse 2s ease-in-out infinite;
  }

  .scroll-arrow {
    width: 20px;
    height: 20px;
  }

  @keyframes pulse {
    0%, 100% {
      opacity: 0.5;
    }
    50% {
      opacity: 1;
    }
  }

  /* Responsive App Scroller */
  @media (max-width: 1024px) {
    .apps-section {
      padding: calc(var(--grid-unit) * 2.5) 0;
    }

    .app-card {
      width: 300px;
      height: 360px;
    }
  }

  @media (max-width: 768px) {
    .apps-section {
      padding: calc(var(--grid-unit) * 2) 0;
    }

    .apps-header {
      margin-bottom: calc(var(--grid-unit) * 1.5);
      padding: 0 calc(var(--grid-unit) * 1);
    }

    .app-card {
      width: 280px;
      height: 350px;
    }

    .apps-scroller {
      padding: calc(var(--grid-unit) * 0.5) calc(var(--grid-unit) * 1);
    }

    .scroll-hint {
      padding: 0 calc(var(--grid-unit) * 1);
    }
  }

  @media (max-width: 640px) {
    .apps-section {
      padding: calc(var(--grid-unit) * 1.5) 0;
    }

    .apps-header {
      padding: 0 calc(var(--grid-unit) * 0.75);
    }

    .app-card {
      width: 260px;
      height: 340px;
    }

    .app-card-inner {
      padding: calc(var(--grid-unit) * 0.6);
    }

    .apps-scroller {
      padding: calc(var(--grid-unit) * 0.5) calc(var(--grid-unit) * 0.75);
    }

    .scroll-hint {
      margin-top: var(--grid-unit);
      padding: 0 calc(var(--grid-unit) * 0.75);
      font-size: 0.8125rem;
    }
  }

  @media (max-width: 400px) {
    .app-card {
      width: 240px;
      height: 330px;
    }

    .app-icon-wrapper {
      width: 70px;
      height: 70px;
    }

    .app-emoji {
      font-size: 2.5rem;
    }

    .app-name {
      font-size: 1.25rem;
    }

    .app-description {
      font-size: 0.875rem;
    }
  }

  /* ========================
     PRINCIPLES SECTION
     ======================== */

  .principles-section {
    position: relative;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    padding: calc(var(--grid-unit) * 4) 0;
    overflow: hidden;
  }

  .principles-overlay {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 30% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 70% 50%, rgba(37, 99, 235, 0.06) 0%, transparent 50%);
    pointer-events: none;
  }

  .principles-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 calc(var(--grid-unit) * 2);
    z-index: 10;
  }

  .principles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--grid-unit) * 0.75);
    max-width: 1200px;
    margin: 0 auto;
  }

  .principle-card {
    position: relative;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .principle-card:hover {
    transform: translateY(-8px);
  }

  .principle-card-inner {
    height: 100%;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(248, 250, 252, 0.1);
    border-radius: 24px;
    padding: calc(var(--grid-unit) * 1.25);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: calc(var(--grid-unit) * 1);
    align-items: center;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .principle-card-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(59, 130, 246, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  .principle-card:hover .principle-card-inner {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow:
      0 20px 40px -15px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(59, 130, 246, 0.2);
  }

  .principle-card:hover .principle-card-inner::before {
    opacity: 1;
  }

  .principle-icon-wrapper {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.15) 100%);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
  }

  .principle-card:hover .principle-icon-wrapper {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.25) 100%);
    transform: scale(1.1) rotate(-5deg);
  }

  .principle-icon {
    width: 48px;
    height: 48px;
    color: #3b82f6;
    transition: all 0.4s ease;
  }

  .principle-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: calc(var(--grid-unit) * 1);
    align-items: center;
    z-index: 1;
  }

  @media (max-width: 1200px) {
    .principle-content {
      grid-template-columns: 1fr;
      gap: calc(var(--grid-unit) * 0.375);
    }
  }

  .principle-card:hover .principle-icon {
    color: #60a5fa;
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.5));
  }

  .principle-title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    color: #f8fafc;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .principle-description {
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.7;
    color: #cbd5e1;
    margin: 0;
  }

  /* Tablet */
  @media (max-width: 1024px) {
    .principles-section {
      padding: calc(var(--grid-unit) * 3) 0;
    }
  }

  /* Mobile */
  @media (max-width: 640px) {
    .principles-section {
      padding: calc(var(--grid-unit) * 2) 0;
    }

    .principles-container {
      padding: 0 calc(var(--grid-unit) * 1);
    }

    .principle-card-inner {
      grid-template-columns: 1fr;
      text-align: center;
      padding: calc(var(--grid-unit) * 1);
    }

    .principle-icon-wrapper {
      width: 80px;
      height: 80px;
      margin: 0 auto;
    }

    .principle-icon {
      width: 40px;
      height: 40px;
    }

    .principle-content {
      align-items: center;
    }
  }

  /* ========================
     WHY SECTION
     ======================== */

  .why-section {
    position: relative;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    padding: calc(var(--grid-unit) * 4) 0;
    overflow: hidden;
  }

  .why-overlay {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(37, 99, 235, 0.04) 0%, transparent 50%);
    pointer-events: none;
  }

  .why-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 calc(var(--grid-unit) * 2);
    z-index: 10;
  }

  .why-header {
    text-align: center;
    margin-bottom: calc(var(--grid-unit) * 3);
  }

  .why-main-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #f8fafc;
    margin: 0 0 calc(var(--grid-unit) * 0.5) 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .why-main-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #94a3b8;
    margin: 0;
  }

  /* ===== LAYOUT 1: MASONRY GRID ===== */

  .masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: calc(var(--grid-unit) * 0.75);
    grid-auto-flow: dense;
  }

  .masonry-item {
    position: relative;
    transition: transform 0.3s ease;
  }

  .masonry-item:hover {
    transform: translateY(-4px);
  }

  .masonry-large {
    grid-column: span 2;
  }

  .masonry-medium {
    grid-column: span 1;
  }

  .masonry-content {
    height: 100%;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 20px;
    padding: calc(var(--grid-unit) * 1);
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-unit) * 0.5);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
  }

  .masonry-item:hover .masonry-content {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2);
  }

  .masonry-number {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    opacity: 0.3;
  }

  .masonry-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0;
    line-height: 1.3;
  }

  .masonry-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0;
  }

  @media (max-width: 768px) {
    .masonry-large,
    .masonry-medium {
      grid-column: span 1;
    }
  }

  /* ========================
     JOURNEY SECTION - TIMELINE
     ======================== */

  .journey-section {
    position: relative;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    padding: calc(var(--grid-unit) * 4) 0;
    overflow: hidden;
  }

  .journey-overlay {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 30% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 70% 50%, rgba(37, 99, 235, 0.06) 0%, transparent 50%);
    pointer-events: none;
  }

  .journey-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 calc(var(--grid-unit) * 2);
    z-index: 10;
  }

  .journey-header {
    text-align: center;
    margin-bottom: calc(var(--grid-unit) * 3);
  }

  .journey-main-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #f8fafc;
    margin: 0 0 calc(var(--grid-unit) * 0.5) 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .journey-main-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #94a3b8;
    margin: 0;
  }

  .timeline-grid {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-unit) * 1.5);
    max-width: 1000px;
    margin: 0 auto;
  }

  .timeline-grid::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(59, 130, 246, 0.5) 10%,
      rgba(59, 130, 246, 0.5) 90%,
      transparent 100%
    );
    transform: translateX(-50%);
  }

  .timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: calc(var(--grid-unit) * 1);
    align-items: center;
  }

  .timeline-left .timeline-content {
    grid-column: 1;
    text-align: right;
  }

  .timeline-right .timeline-content {
    grid-column: 3;
    text-align: left;
  }

  .timeline-dot {
    grid-column: 2;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2), 0 0 20px rgba(59, 130, 246, 0.4);
    z-index: 2;
    transition: all 0.3s ease;
  }

  .timeline-item:hover .timeline-dot {
    box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.3), 0 0 30px rgba(59, 130, 246, 0.6);
    transform: scale(1.2);
  }

  .timeline-content {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(248, 250, 252, 0.1);
    border-radius: 16px;
    padding: calc(var(--grid-unit) * 0.75);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .timeline-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(59, 130, 246, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .timeline-item:hover .timeline-content {
    border-color: rgba(59, 130, 246, 0.3);
    transform: scale(1.02);
    box-shadow:
      0 10px 30px -10px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(59, 130, 246, 0.2);
  }

  .timeline-item:hover .timeline-content::before {
    opacity: 1;
  }

  .timeline-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: calc(var(--grid-unit) * 0.25);
  }

  .timeline-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 calc(var(--grid-unit) * 0.25) 0;
    line-height: 1.3;
  }

  .timeline-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0;
  }

  @media (max-width: 768px) {
    .journey-section {
      padding: calc(var(--grid-unit) * 3) 0;
    }

    .timeline-grid::before {
      left: 20px;
    }

    .timeline-item {
      grid-template-columns: auto 1fr;
      gap: calc(var(--grid-unit) * 0.5);
    }

    .timeline-dot {
      grid-column: 1;
      grid-row: 1;
    }

    .timeline-left .timeline-content,
    .timeline-right .timeline-content {
      grid-column: 2;
      grid-row: 1;
      text-align: left;
    }
  }

  /* Responsive */
  @media (max-width: 640px) {
    .journey-section {
      padding: calc(var(--grid-unit) * 2) 0;
    }

    .journey-container {
      padding: 0 calc(var(--grid-unit) * 1);
    }

    .masonry-grid {
      grid-template-columns: 1fr;
    }
  }
</style>
