:root {
      /* Palette: Primary */
      --color-primary-green-1: #99e65f;
      --color-primary-green-2: #6cb23d;
      --color-lime-accent: #c9f2a6;
      --color-green-gradient-start: #aeeb7d;
      --color-green-gradient-end: #e5f9d2;

      /* Palette: Neutral */
      --color-neutral-ink: #11331f;
      --color-neutral-body: #3f4d46;
      --color-neutral-subtext: #67756f;
      --color-neutral-line: #e5e7eb;
      --color-neutral-bg: #ffffff;
      --color-neutral-soft-bg: #f7fbf4;
      
      /* UI Variables */
      --max-width: 1200px;
      --header-height: 60px;
      --radius-sm: 12px;
      --radius-md: 20px;
      --radius-lg: 32px;
      --font-main: "Outfit", "M PLUS 1p", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, sans-serif;
      --transition-smooth: cubic-bezier(0.23, 1, 0.32, 1);
    }

    /* Reset & Base */
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      padding: 0;
      font-family: var(--font-main);
      color: var(--color-neutral-body);
      background-color: var(--color-neutral-bg);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    img { max-width: 100%; display: block; height: auto; }
    a { text-decoration: none; color: inherit; }
    button { border: none; background: none; cursor: pointer; font-family: inherit; }

    /* Layout Utilities */
    .container {
      width: 100%;
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 24px;
    }
    @media (max-width: 768px) { .container { padding: 0 18px; } }
    @media (max-width: 480px) { .container { padding: 0 12px; } }

    .section-padding { padding: 100px 0; }
    @media (max-width: 768px) { .section-padding { padding: 60px 0; } }

    /* Section layout helpers */
    .section-heading-center { text-align: center; margin-bottom: 60px; }
    .section-heading-center.section-heading-sm { margin-bottom: 40px; }
    .section-intro { text-align: center; max-width: 600px; margin: 0 auto 40px; }
    .section-intro.section-intro-wide { max-width: 700px; margin-bottom: 50px; }

    /* Section Backgrounds */
    #gallery-section {
      background: var(--color-neutral-soft-bg);
    }
    #steps-section {
      background: var(--color-neutral-bg);
    }
    #usecase-section {
      background: var(--color-neutral-soft-bg);
    }
    #faq-section {
      background: var(--color-neutral-bg);
    }
    #cta-section {
      background: var(--color-neutral-soft-bg);
    }

    /* Typography */
    .text-gradient {
      background: linear-gradient(135deg, var(--color-neutral-ink), var(--color-primary-green-2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    h1, h2, h3 { margin: 0; color: var(--color-neutral-ink); font-weight: 800; letter-spacing: -0.03em; }
    p { margin: 0; line-height: 1.8; }
    .mobile-break { display: none; }
    .desktop-break { display: inline; }

    /* Typographic scale */
    .display-hero { font-size: clamp(40px, 6.5vw, 78px); line-height: 1.02; letter-spacing: -0.04em; }
    .display-sub { font-size: clamp(30px, 4.5vw, 48px); line-height: 1.08; }
    .section-title { font-size: clamp(30px, 4.5vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; }
    .headline-lg { font-size: clamp(22px, 3vw, 32px); line-height: 1.2; }
    .eyebrow {
      display: inline-block;
      font-size: 13px;
      letter-spacing: 0.12em;
      font-weight: 800;
      text-transform: uppercase;
      color: var(--color-primary-green-2);
      margin-bottom: 12px;
    }
    .note-text {
      font-size: 13px;
      line-height: 1.6;
      margin-top: 12px;
      color: var(--color-neutral-subtext);
    }
    .lead-strong { font-size: 18px; font-weight: 700; color: var(--color-neutral-body); }
    @media (max-width: 768px) { .lead-strong { font-size: 16px; } }

    /* Scroll reveal */
    .reveal-on-scroll {
      opacity: 0;
      transform: translateY(24px);
      transition: all 0.7s var(--transition-smooth);
    }
    .reveal-on-scroll.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .delay-01 { transition-delay: 0.1s; }
    .delay-02 { transition-delay: 0.2s; }
    .delay-03 { transition-delay: 0.3s; }
    .delay-04 { transition-delay: 0.4s; }

    /* Header */
    .site-header {
      position: fixed;
      top: 0; left: 0; width: 100%;
      height: var(--header-height);
      z-index: 100;
      background: var(--color-primary-green-2);
      border-bottom: 1px solid rgba(0,0,0,0.05);
      box-shadow: none;
      transition: all 0.3s ease;
    }
    
    .site-header.is-scrolled {
      background: var(--color-primary-green-2);
      box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    }

    .header-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
    }

    /* Brand Logo Styles */
    .brand {
      display: flex;
      align-items: center;
      height: 100%;
      gap: 8px;
      text-decoration: none;
    }
    .brand-icon,
    .brand-name {
      display: flex;
      align-items: center;
      line-height: 1;
    }
    .brand-icon svg {
      display: block;
    }
    .brand-icon img {
      display: block;
      width: 44px;
      height: 44px;
    }
    .brand-icon svg .cls-1 { fill: none; }
    .brand-icon svg .cls-2 { fill: #fff; }
    .brand-icon svg .cls-3 { fill: #99e65f; }
    .brand-icon svg .cls-4 { clip-path: url(#clippath); }
    .brand-name {
      font-weight: 800;
      font-size: 1.5rem;
      font-family: var(--font-main);
      color: #fff;
      letter-spacing: -0.02em;
    }
    @media (max-width: 480px) {
      .header-inner { gap: 8px; }
      .brand { gap: 6px; }
      .brand-name { font-size: 1.2rem; }
    }
    @media (max-width: 360px) {
      .brand-name { font-size: 1rem; }
      .btn-nav { padding: 4px 10px; }
    }

    .btn-nav {
      padding: 8px 20px;
      border-radius: 100px;
      border: 1px solid #fff;
      background: #fff;
      color: var(--color-primary-green-2);
      font-weight: 700;
      font-size: 13px;
      transition: all 0.3s ease;
    }
    .btn-nav:hover {
      background: var(--color-neutral-bg);
      color: var(--color-primary-green-2);
    }
    .btn-youware {
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 22px -12px rgba(17, 51, 31, 0.35);
      transition: transform 0.3s var(--transition-smooth), box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
    }
    .btn-youware::after {
      content: '';
      position: absolute;
      top: 0;
      left: -120%;
      width: 80%;
      height: 100%;
      background: linear-gradient(to right, transparent, rgba(153, 230, 95, 0.35), transparent);
      transform: skewX(-20deg);
      transition: left 0.5s ease;
    }
    .btn-youware:hover {
      background: linear-gradient(135deg, var(--color-green-gradient-start), var(--color-primary-green-2));
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 12px 26px -12px rgba(17, 51, 31, 0.45);
    }
    .btn-youware:hover::after {
      left: 140%;
    }
    @media (max-width: 640px) {
      .btn-nav {
        padding: 5px 12px;
        font-size: 9px;
      }
      .btn-youware {
        text-align: center;
      }
      .btn-youware .btn-line {
        display: block;
        line-height: 1.3;
      }
      .mobile-break { display: block; }
      .desktop-break { display: none; }
    }

    /* Footer */
    .site-footer {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-primary-green-2);
      color: #fff;
      font-size: 0.85rem;
      border-top: 1px solid rgba(0,0,0,0.05);
    }

    /* --- HERO SECTION --- */
    .hero {
      padding-top: calc(var(--header-height) + 60px);
      padding-bottom: 80px;
      position: relative;
      overflow: hidden;
    }
    
    /* Ambient Background */
    .ambient-bg {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      z-index: -1;
      pointer-events: none;
    }
    .ambient-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.4;
      animation: float 10s infinite ease-in-out alternate;
    }
    .blob-1 { width: 50vw; height: 50vw; background: var(--color-green-gradient-start); top: -20%; left: -10%; }
    .blob-2 { width: 40vw; height: 40vw; background: var(--color-green-gradient-end); top: 30%; right: -10%; animation-delay: -5s; }
    
    @keyframes float {
      0% { transform: translate(0, 0); }
      100% { transform: translate(20px, 40px); }
    }

    .hero-content {
      text-align: center;
      max-width: 900px;
      margin: 0 auto 24px;
    }
    @media (max-width: 480px) { 
      .hero-content { margin: 0 auto 28px; } 
      .hero-title.display-hero { font-size: 32px; } 
    }

    .hero-tag {
      display: inline-block;
      padding: 6px 16px;
      background: rgba(255,255,255,0.6);
      border: 1px solid var(--color-lime-accent);
      border-radius: 100px;
      font-size: 12px;
      font-weight: 700;
      color: var(--color-primary-green-2);
      margin-bottom: 20px;
      backdrop-filter: blur(5px);
    }

    .hero-title { margin-bottom: 24px; }
    .hero-title-em { display: inline-block; font-size: 1.08em; letter-spacing: -0.04em; white-space: nowrap; }
    @media (max-width: 480px) { .hero-title-em { white-space: normal; } }

    .hero-lead {
      font-size: 20px;
      color: var(--color-neutral-subtext);
      margin-bottom: 32px;
    }
    .hero-lead.hero-lead-strong {
      margin-bottom: 10px;
      font-weight: 800;
      color: var(--color-neutral-ink);
    }
    @media (max-width: 768px) { .hero-lead { font-size: 16px; } }

    /* Buttons */
    .btn-group {
      display: flex;
      gap: 16px;
      justify-content: center;
    }
    @media (max-width: 640px) {
      .btn-group {
        flex-direction: column;
        align-items: center;
      }
    }
    
    .btn-primary {
      padding: 16px 32px;
      background: linear-gradient(135deg, var(--color-green-gradient-start), var(--color-primary-green-2));
      color: var(--color-neutral-ink);
      border-radius: 100px;
      font-weight: 700;
      font-size: 15px;
      box-shadow: 0 10px 30px -10px rgba(108, 178, 61, 0.5);
      transition: transform 0.3s var(--transition-smooth), box-shadow 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    .btn-primary:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 20px 40px -10px rgba(108, 178, 61, 0.6);
    }
    .btn-primary::after {
      content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
      background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
      transform: skewX(-20deg);
      transition: 0.5s;
    }
    .btn-primary:hover::after { left: 150%; transition: 0.7s ease-in-out; }

    .btn-secondary {
      padding: 16px 32px;
      background: #fff;
      border: 1px solid var(--color-neutral-line);
      color: var(--color-neutral-body);
      border-radius: 100px;
      font-weight: 700;
      font-size: 15px;
      transition: all 0.3s ease;
    }
    .btn-secondary:hover {
      border-color: var(--color-primary-green-2);
      color: var(--color-primary-green-2);
    }
    /* Hero secondary button: green text and border */
    .hero .btn-secondary {
      border-color: var(--color-primary-green-2);
      color: var(--color-primary-green-2);
      position: relative;
      overflow: hidden;
      transition: transform 0.3s var(--transition-smooth), box-shadow 0.3s ease;
      box-shadow: 0 10px 30px -10px rgba(108,178,61,0.25);
    }
    .hero .btn-secondary::after {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 50%; height: 100%;
      background: linear-gradient(to right, transparent, rgba(255,255,255,0.35), transparent);
      transform: skewX(-20deg);
      transition: 0.5s;
    }
    .hero .btn-secondary:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 20px 40px -10px rgba(108,178,61,0.35);
    }
    .hero .btn-secondary:hover::after {
      left: 150%;
      transition: 0.7s ease-in-out;
    }
    /* Hero primary button matches CTA secondary motion, but with green bg and white text */
    .hero .btn-primary {
      background: var(--color-primary-green-2);
      border: 1px solid var(--color-primary-green-2);
      color: #fff;
      box-shadow: 0 10px 30px -10px rgba(108,178,61,0.45);
      position: relative;
      overflow: hidden;
      transition: transform 0.3s var(--transition-smooth), box-shadow 0.3s ease;
    }
    .hero .btn-primary::after {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 50%; height: 100%;
      background: linear-gradient(to right, transparent, rgba(255,255,255,0.35), transparent);
      transform: skewX(-20deg);
      transition: 0.5s;
    }
    .hero .btn-primary:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 20px 40px -10px rgba(108,178,61,0.55);
    }
    .hero .btn-primary:hover::after {
      left: 150%;
      transition: 0.7s ease-in-out;
    }

    /* --- HERO CAROUSEL (Updated for larger center / shorter sides) --- */
    .hero-carousel-container {
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
      /* Increased container height for larger center image */
      height: 560px; 
      position: relative;
      perspective: 1000px;
      overflow: visible; 
    }
    @media (max-width: 768px) { .hero-carousel-container { height: 320px; overflow: hidden; } }

    .carousel-slide {
      position: absolute;
      top: 50%;
      left: 50%;
      /* Defaults */
      width: 200px; 
      height: 300px;
      transform: translate(-50%, -50%);
      transition: all 0.6s var(--transition-smooth);
      border-radius: var(--radius-md);
      overflow: hidden;
      background: #fff;
      box-shadow: 0 15px 40px rgba(0,0,0,0.1);
      cursor: pointer;
    }

    .carousel-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: transform 0.4s ease;
    }
    
    .carousel-slide:hover img {
      transform: scale(1.1);
    }

    /* Carousel States (5 positions) 
       Adjusted dimensions for emphasizing center image 
    */

    /* Center: Very Large Square */
    .slide-center {
      width: 500px;
      height: 500px;
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      z-index: 30;
      box-shadow: 0 30px 70px rgba(0,0,0,0.25);
    }
    /* Mobile: Center is smaller but dominant */
    @media (max-width: 768px) { 
      .slide-center { width: 260px; height: 260px; } 
    }
    
    /* Left: Narrow Strip & Shorter than center */
    .slide-left {
      width: 120px;
      height: 380px; /* Shorter than 500px */
      transform: translate(calc(-50% - 320px), -50%);
      opacity: 0.8;
      z-index: 20;
      filter: brightness(0.9);
    }
    /* Mobile: Extremely narrow and clearly shorter */
    @media (max-width: 768px) { 
        .slide-left { 
            width: 50px; 
            height: 180px; /* Shorter than 260px */
            transform: translate(calc(-50% - 145px), -50%); 
        } 
    }

    /* Right: Narrow Strip & Shorter than center */
    .slide-right {
      width: 120px;
      height: 380px;
      transform: translate(calc(-50% + 320px), -50%);
      opacity: 0.8;
      z-index: 20;
      filter: brightness(0.9);
    }
    @media (max-width: 768px) { 
        .slide-right { 
            width: 50px; 
            height: 180px; 
            transform: translate(calc(-50% + 145px), -50%); 
        }
    }

    /* Far Left: Even Narrower & Shorter */
    .slide-far-left {
      width: 80px;
      height: 300px;
      transform: translate(calc(-50% - 420px), -50%);
      opacity: 0.4;
      z-index: 10;
      filter: brightness(0.8);
    }
    @media (max-width: 768px) { .slide-far-left { display: none; } }

    /* Far Right: Even Narrower & Shorter */
    .slide-far-right {
      width: 80px;
      height: 300px;
      transform: translate(calc(-50% + 420px), -50%);
      opacity: 0.4;
      z-index: 10;
      filter: brightness(0.8);
    }
    @media (max-width: 768px) { .slide-far-right { display: none; } }

    /* Hidden */
    .slide-hidden {
      width: 50px;
      height: 200px;
      transform: translate(-50%, -50%) scale(0.4);
      opacity: 0;
      z-index: 0;
      pointer-events: none;
    }

    .carousel-controls {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
      z-index: 40;
    }
    .carousel-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: rgba(0,0,0,0.2);
      cursor: pointer;
      transition: all 0.3s;
    }
    .carousel-dot.active {
      background: var(--color-primary-green-2);
      transform: scale(1.5);
    }

    /* --- INFINITE MARQUEE --- */
    .marquee-section {
      padding: 22px 0;
      background: linear-gradient(90deg, var(--color-primary-green-2), var(--color-green-gradient-end));
      border-top: 1px solid var(--color-neutral-line);
      border-bottom: 1px solid var(--color-neutral-line);
      overflow: hidden;
    }
    .marquee-track {
      display: flex;
      white-space: nowrap;
      gap: 60px;
      animation: marquee 12s linear infinite;
    }
    .marquee-item {
      font-size: 28px;
      font-weight: 800;
      color: rgba(0,0,0,0.05);
      text-transform: uppercase;
      -webkit-text-stroke: 1px rgba(17, 51, 31, 0.1);
    }
    @keyframes marquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* --- GALLERY (Square Grid + Lightbox2 Animation) --- */
    .gallery-container {
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
    }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    @media (max-width: 768px) { .gallery-grid { gap: 8px; } }

    .gallery-item {
      display: block;
      position: relative;
      aspect-ratio: 1 / 1;
      border-radius: var(--radius-sm);
      overflow: hidden;
      cursor: pointer;
      box-shadow: var(--shadow-light);
      transition: transform 0.3s ease;
      background: #eee;
    }
    .gallery-item:hover {
      transform: scale(1.03);
      z-index: 2;
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .gallery-item img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
      position: relative;
      z-index: 1;
    }
    .gallery-item:hover img {
      transform: scale(1.1);
    }
    .gallery-badges {
      position: absolute;
      bottom: 8px;
      left: 8px;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      z-index: 2;
      pointer-events: none;
    }
    .gallery-badge {
      position: relative;
      padding: 5px 8px;
      background: rgba(17, 51, 31, 0.85);
      color: #fff;
      font-size: 9px;
      font-weight: 800;
      border-radius: 999px;
      letter-spacing: 0.04em;
      box-shadow: 0 6px 18px rgba(0,0,0,0.18);
      backdrop-filter: blur(4px);
      z-index: 1;
      pointer-events: none;
    }
    @media (max-width: 640px) {
      .gallery-badges {
        bottom: 3px;
        left: 3px;
        gap: 4px;
      }
      .gallery-badge {
        font-size: 7px;
        padding: 4px 6px;
      }
    }

    /* Lightbox Overlay */
    .lightbox-overlay {
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.85);
      z-index: 2000;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
    }
    .lightbox-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }
    
    .lightbox-content {
      position: relative;
      background: transparent;
      border-radius: 4px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
      max-width: 90%;
      max-height: 90vh;
      transform: scale(0.8);
      transition: transform 0.4s var(--transition-smooth);
      padding: 10px;
      background: #fff;
    }
    .lightbox-overlay.active .lightbox-content {
      transform: scale(1);
    }

    .lightbox-img {
      display: block;
      max-width: 100%;
      max-height: 85vh;
      object-fit: contain;
    }

    .lightbox-close {
      position: absolute;
      top: 12px; right: 12px;
      width: 52px; height: 52px;
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      background: rgba(12,12,12,0.86);
      border: 2px solid rgba(255,255,255,0.25);
      border-radius: 50%;
      font-size: 34px;
      font-weight: 700;
      cursor: pointer;
      opacity: 0.95;
      transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
      box-shadow: 0 12px 26px rgba(0,0,0,0.4);
    }
    .lightbox-close:hover { 
      opacity: 1; 
      transform: scale(1.07); 
      box-shadow: 0 14px 32px rgba(0,0,0,0.48); 
    }

    /* PhotoSwipe caption */
    .pswp__custom-caption {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 14px 18px 18px;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.7) 100%);
      box-sizing: border-box;
      pointer-events: none;
    }
    .pswp__custom-caption.is-hidden {
      opacity: 0;
    }

    .lightbox-nav {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      width: 72px;
      height: 72px;
      border: none;
      border-radius: 50%;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(12,12,12,0.8);
      color: #fff;
      font-size: 42px;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
      box-shadow: 0 12px 28px rgba(0,0,0,0.35);
      border: 2px solid rgba(255,255,255,0.2);
      z-index: 2100;
    }
    .lightbox-nav:hover {
      background: rgba(12,12,12,0.92);
      transform: translateY(-50%) scale(1.05);
      box-shadow: 0 14px 32px rgba(0,0,0,0.45);
    }
    .lightbox-prev { left: 20px; }
    .lightbox-next { right: 20px; }
    .lightbox-overlay.is-gallery .lightbox-nav { display: flex; }

    /* --- STEPS (Animated Individually) --- */
    .steps-container {
      display: flex;
      flex-direction: column;
      gap: 40px;
      max-width: 800px;
      margin: 0 auto;
      position: relative;
    }
    
    /* Vertical Line */
    .steps-line {
      position: absolute;
      top: 0; 
      left: 40px; 
      bottom: 100px;
      width: 2px;
      background: var(--color-neutral-line);
      z-index: 0;
    }
    @media (max-width: 600px) { .steps-line { left: 20px; bottom: 80px; } }

    .step-item {
      display: flex;
      gap: 32px;
      position: relative;
      z-index: 1;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.6s var(--transition-smooth);
    }
    .step-item:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 40px;
      top: 80px;
      width: 2px;
      height: calc(100% + 40px);
      background: var(--color-neutral-line);
      z-index: 0;
    }
    .step-item.is-visible { opacity: 1; transform: translateY(0); }

    .step-number {
      flex-shrink: 0;
      width: 80px; height: 80px;
      background: #fff;
      border: 2px solid var(--color-primary-green-2);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 28px;
      font-weight: 800;
      color: var(--color-primary-green-2);
      box-shadow: 0 10px 20px rgba(0,0,0,0.05);
      position: relative;
      z-index: 2;
    }
    @media (max-width: 600px) { 
      .step-number { width: 40px; height: 40px; font-size: 18px; } 
      .step-item { gap: 16px; }
      .step-item:not(:last-child)::after {
        left: 20px;
        top: 40px;
        height: calc(100% + 20px);
      }
    }

    .step-content {
      background: #fff;
      padding: 32px;
      border-radius: var(--radius-md);
      border: 1px solid var(--color-neutral-line);
      flex-grow: 1;
      box-shadow: var(--shadow-light);
      position: relative;
      display: flex;
      flex-direction: column;
    }
    @media (max-width: 768px) { .step-content { padding: 24px; } }
    @media (max-width: 600px) { .step-content { padding: 18px; } }
    .step-content h3 { margin-bottom: 10px; font-size: 20px; font-weight: 800; }
    .step-content p { margin-bottom: 20px; }
    .step-content::before {
      content: ''; position: absolute; top: 30px; left: -10px;
      width: 20px; height: 20px; background: #fff;
      transform: rotate(45deg);
      border-left: 1px solid var(--color-neutral-line);
      border-bottom: 1px solid var(--color-neutral-line);
    }
    @media (max-width: 768px) {
      .step-content::before { left: -8px; width: 16px; height: 16px; top: 24px; }
    }
    @media (max-width: 600px) {
      .step-content::before { left: -6px; width: 12px; height: 12px; top: 18px; }
    }

    /* Step Images & UI Mocks */
    .step-img-preview {
      width: 120px;
      height: 120px;
      border-radius: 12px;
      object-fit: cover;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      border: 4px solid #f7fbf4;
    }
    .step-pswp-link {
      display: inline-block;
      line-height: 0;
    }
    
    /* Interactive Step Images */
    .step-lightbox-trigger {
      cursor: pointer;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .step-lightbox-trigger:hover {
      transform: scale(1.1);
      box-shadow: 0 20px 40px rgba(0,0,0,0.2);
      z-index: 10;
      position: relative;
    }
    
    /* --- Updated UI Mock Styling (Step 2) --- */
    .mock-ui-panel {
      background: linear-gradient(135deg, #f0fce0 0%, #f7fbf4 100%);
      border: 1px solid var(--color-neutral-line);
      border-radius: 16px;
      padding: 20px;
      max-width: 360px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    }
    .mock-ui-title {
      font-size: 16px;
      font-weight: 800;
      color: var(--color-neutral-ink);
      margin: 0 0 16px;
    }
    .mock-ui-section-title {
      font-size: 11px;
      font-weight: 700;
      color: var(--color-neutral-body);
      margin-bottom: 8px;
      opacity: 0.8;
    }
    .mock-ui-group {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    @media (max-width: 640px) {
      .mock-ui-title { font-size: 13px; }
      .mock-ui-section-title { font-size: 9px; }
    }
    
    /* Mock Buttons */
    .mock-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 16px;
      background: #fff;
      border-radius: 999px; /* Pill shape */
      font-size: 12px;
      font-weight: 700;
      color: var(--color-neutral-subtext);
      border: none;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
      cursor: default;
    }
    
    /* Active State (Green) */
    .mock-btn.active {
      background: linear-gradient(135deg, #7acb48 0%, #6cb23d 100%);
      color: #fff;
      box-shadow: 0 4px 10px rgba(108, 178, 61, 0.3);
    }
    
    /* Small buttons for styles */
    .mock-btn.sm {
      padding: 6px 14px;
      font-size: 12px;
    }

    @media (max-width: 640px) {
      .mock-btn,
      .mock-btn.sm { font-size: 8px; }
    }
    
    /* Tabs Group styling (Connected look) */
    .mock-ui-group.tabs {
      background: #fff;
      border-radius: 999px;
      padding: 4px;
      display: inline-flex;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      gap: 0;
    }
    .mock-ui-group.tabs .mock-btn {
      box-shadow: none;
      background: transparent;
      color: var(--color-neutral-subtext);
    }
    .mock-ui-group.tabs .mock-btn.active {
      background: linear-gradient(135deg, #7acb48 0%, #6cb23d 100%);
      color: #fff;
      box-shadow: 0 2px 8px rgba(108, 178, 61, 0.2);
    }

    /* --- USE CASES (Grid) --- */
    .usecase-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-top: 40px;
    }
    @media (max-width: 600px) { .usecase-grid { grid-template-columns: 1fr; } }

    .usecase-card {
      padding: 30px;
      background: #fff;
      border: 1px solid var(--color-neutral-line);
      border-radius: var(--radius-md);
      transition: transform 0.3s ease;
    }
    .usecase-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-light);
      border-color: var(--color-lime-accent);
    }
    .usecase-tag {
      display: inline-block;
      font-size: 12px;
      font-weight: 700;
      color: var(--color-primary-green-2);
      background: var(--color-neutral-soft-bg);
      padding: 4px 12px;
      border-radius: 100px;
      margin-bottom: 12px;
    }
    .usecase-title {
      font-size: 20px;
      font-weight: 800;
      margin-bottom: 8px;
    }

    /* --- FAQ --- */
    .faq-list {
      max-width: 800px;
      margin: 0 auto;
    }
    .faq-item {
      border-bottom: 1px solid var(--color-neutral-line);
      padding: 24px 0;
    }
    .faq-q { 
      font-weight: 800; 
      font-size: 18px;
      cursor: pointer; 
      display: flex; 
      justify-content: space-between; 
      align-items: center;
      color: var(--color-neutral-ink);
    }
    .faq-q span {
      font-weight: 400;
      font-size: 20px;
      color: var(--color-primary-green-2);
    }
    .faq-a { 
      margin-top: 12px; 
      font-size: 14px; 
      color: var(--color-neutral-subtext); 
      display: none; 
      line-height: 1.8;
    }
    .faq-item.open .faq-a { display: block; animation: fadeIn 0.3s; }

    /* --- Final CTA --- */
    .cta-final {
      background: linear-gradient(135deg, var(--color-neutral-ink), var(--color-primary-green-2));
      color: #fff;
      border-radius: var(--radius-lg);
      padding: 80px 24px;
      text-align: center;
      position: relative;
      overflow: hidden;
      margin-bottom: 0;
    }
    .cta-final h2 { color: #fff; font-size: clamp(26px, 4vw, 42px); margin-bottom: 40px; }
    .cta-final p { color: rgba(255,255,255,0.9); max-width: 700px; margin: 0 auto 32px; font-size: 16px; line-height: 1.9; }
    .cta-final .btn-group { margin-bottom: 24px; }
    /* CTA buttons share the same hover motion; colors vary per button */
    .cta-final .btn-primary {
      background: #fff;
      border-color: #fff;
      color: var(--color-primary-green-2);
      box-shadow: 0 10px 30px -10px rgba(255,255,255,0.35);
      position: relative;
      overflow: hidden;
      transition: transform 0.3s var(--transition-smooth), box-shadow 0.3s ease;
    }
    .cta-final .btn-secondary {
      background: rgba(255,255,255,0.2);
      border-color: #fff;
      color: #fff;
      box-shadow: 0 10px 30px -10px rgba(255,255,255,0.35);
      position: relative;
      overflow: hidden;
      transition: transform 0.3s var(--transition-smooth), box-shadow 0.3s ease;
    }
    .cta-final .btn-primary::after,
    .cta-final .btn-secondary::after {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 50%; height: 100%;
      background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
      transform: skewX(-20deg);
      transition: 0.5s;
    }
    .cta-final .btn-primary:hover,
    .cta-final .btn-secondary:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 20px 40px -10px rgba(255,255,255,0.45);
    }
    .cta-final .btn-primary:hover::after,
    .cta-final .btn-secondary:hover::after {
      left: 150%;
      transition: 0.7s ease-in-out;
    }
    p.cta-note {
      font-size: 0.8rem;
      color: rgba(255,255,255,0.6);
      margin-top: 4rem;
      margin-bottom: 0;
    }

    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }