:root{--bg1:#7b5cff;--bg2:#a855f7;--bg3:#6366f1;--text:#0f172a;--white:#ffffff;--animation-duration:0.6s;--transition-duration:0.4s}
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Arial,sans-serif;color:#111827;background:var(--bg1)}
  .container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
  .hero{max-width:1000px;width:100%;text-align:center;background:rgba(255,255,255,0.12);backdrop-filter:blur(6px);border-radius:28px;padding:48px 24px;box-shadow:0 10px 40px rgba(0,0,0,0.15)}
  .logo{width:140px;height:140px;border-radius:50%;box-shadow:0 6px 20px rgba(0,0,0,0.25);background:#fff;margin:0 auto 24px auto;display:flex;align-items:center;justify-content:center}
  .logo img{width:120px;height:120px;object-fit:contain}
  h1{font-size:40px;line-height:1.15;margin:8px 0 8px 0;color:#fff;font-weight:800}
  h2{font-size:40px;line-height:1.15;margin:0 0 12px 0;color:#fff;font-weight:800}
  p.lead{max-width:820px;margin:0 auto;color:#eef2ff;font-size:18px;line-height:1.7}
  .buttons{margin-top:28px;display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
  .btn{display:inline-flex;align-items:center;gap:12px;border-radius:14px;border:1px solid rgba(255,255,255,0.25);padding:12px 18px;background:#fff;color:#111827;text-decoration:none;font-weight:700}
  .btn img,.btn svg{width:22px;height:22px}
  .lang{position:fixed;top:16px;right:16px;background:rgba(255,255,255,0.85);backdrop-filter:blur(6px);padding:8px 12px;border-radius:10px;display:flex;gap:8px;align-items:center;z-index:1000}
  .lang select{border:none;background:transparent;font-weight:600}
  [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] p{direction:rtl;text-align:center}
  .foot{margin-top:18px;color:#e5e7eb;font-size:12px}
  .links{margin-top:8px;display:flex;gap:16px;justify-content:center}
  .links a{color:#e5e7eb;text-decoration:none;font-size:12px}
  .links a:hover{text-decoration:underline}
  /* Responsive adjustments */
  @media (max-width: 1024px){
    .hero{padding:40px 20px}
    h1,h2{font-size:36px}
    p.lead{font-size:17px}
  }
  @media (max-width: 768px){
    .container{padding:16px}
    .hero{padding:32px 18px;border-radius:22px}
    .logo{width:120px;height:120px}
    .logo img{width:100px;height:100px}
    h1,h2{font-size:30px}
    p.lead{font-size:16px;line-height:1.65;padding:0 4px}
    .buttons{gap:12px}
    .btn{width:100%;justify-content:center;padding:12px 16px}
    .lang{top:12px;right:12px;padding:6px 10px}
    .links{gap:12px}
  }
  @media (max-width: 480px){
    .hero{padding:28px 16px;border-radius:18px}
    .logo{width:100px;height:100px}
    .logo img{width:86px;height:86px}
    h1{font-size:24px}
    h2{font-size:24px}
    p.lead{font-size:15px}
    .buttons{gap:10px}
    .btn{padding:12px 14px;border-radius:12px}
    .foot{font-size:11px}
    .links a{font-size:11px}
  }
  @media (max-width: 360px){
    h1,h2{font-size:22px}
    .btn span{font-size:14px}
  }
  /* Improve very large screens */
  @media (min-width: 1440px){
    .hero{max-width:1100px}
    h1,h2{font-size:44px}
    p.lead{font-size:19px}
  }

  /* Onboarding */
  .onboarding{width:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(32px, 5vw, 64px) clamp(20px, 4vw, 80px)}
  .onboarding-header{text-align:center;margin-bottom:clamp(32px, 4vw, 56px);position:relative;z-index:2}
  .onboarding-header h2{font-size:clamp(32px, 5vw, 60px);font-weight:800;color:#ffffff;margin:0 0 clamp(16px, 2.5vw, 28px) 0;text-shadow:0 4px 12px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.2);letter-spacing:-0.02em;line-height:1.2}
  .onboarding-header p{font-size:clamp(16px, 2.2vw, 28px);color:#e2e8f0;margin:0;text-shadow:0 2px 6px rgba(0,0,0,0.3);font-weight:400;opacity:0.9;max-width:min(90vw, 800px);margin:0 auto;line-height:1.6}
  .onboarding .slides{display:grid;grid-template-columns:1fr;gap:clamp(32px, 4vw, 56px);position:relative}
  .onboarding .slides::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:transparent;pointer-events:none;z-index:1}
  .onboarding .slide{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px, 5vw, 64px);position:relative;z-index:2;margin-bottom:clamp(24px, 3vw, 40px)}
  .onboarding .slide.reveal .slide-content{opacity:0;transform:translateY(12px) scale(0.98);transition:opacity var(--transition-duration) ease,transform var(--transition-duration) ease}
  .onboarding .slide.is-visible .slide-content{opacity:1;transform:translateY(0) scale(1)}
  .onboarding .slide-media{width:100%;max-width:min(40vw, 420px);aspect-ratio:9/16;border-radius:clamp(16px, 2vw, 24px);overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,0.2), 0 6px 16px rgba(0,0,0,0.12);background:linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%);justify-self:center;position:relative;transition:all 0.4s ease;border:1px solid rgba(255,255,255,0.2)}
  .onboarding .slide-media:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 25px 60px rgba(0,0,0,0.3), 0 10px 25px rgba(0,0,0,0.2);background:linear-gradient(135deg, #ffffff 0%, #f1f5f9 50%, #e2e8f0 100%)}
  .onboarding .slide-media img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;image-rendering:auto;background:transparent;transition:transform 0.3s ease}
  .onboarding .slide-media:hover img{transform:scale(1.02)}
  /* Ensure gallery images inside onboarding web content fill the frame like onboarding_web */
  .onboarding .slide-media .onboarding-web-content .gallery-image{object-fit:cover;object-position:center;height:100%;width:100%}
  .onboarding .slide-content{position:relative;padding:clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px);background:rgba(255,255,255,0.08);border-radius:clamp(20px, 2.5vw, 32px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.15);transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 20px 60px rgba(0,0,0,0.12), 0 8px 25px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.1);overflow:hidden;background-image:linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 100%)}
  .onboarding .slide-content::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 100%);border-radius:clamp(20px, 2.5vw, 32px);pointer-events:none;opacity:0;transition:opacity 0.5s ease}
  .onboarding .slide-content:hover::before{opacity:1}
  .onboarding .slide-content:hover{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);box-shadow:0 32px 80px rgba(0,0,0,0.18), 0 12px 40px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.2);transform:translateY(-4px) scale(1.02)}
  .onboarding .slide-content h3{margin:0 0 clamp(16px, 2vw, 24px) 0;color:#ffffff;font-size:clamp(28px, 4vw, 52px);font-weight:800;text-shadow:0 4px 12px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.2);letter-spacing:-0.02em;line-height:1.2;text-align:left;position:relative;display:inline-block;z-index:2;transition:all 0.3s ease}
  .onboarding .slide-content:hover h3{text-shadow:0 6px 16px rgba(0,0,0,0.5), 0 3px 8px rgba(0,0,0,0.3);transform:translateY(-1px)}
  .onboarding .slide-content h3::after{content:'';position:absolute;bottom:clamp(-10px, -1.2vw, -14px);left:0;width:clamp(60px, 5vw, 80px);height:clamp(4px, 0.4vw, 6px);background:linear-gradient(90deg, #7b5cff 0%, #a855f7 50%, #6366f1 100%);border-radius:3px;box-shadow:0 4px 12px rgba(123,92,255,0.5), 0 2px 6px rgba(123,92,255,0.3);transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1)}
  .onboarding .slide-content:hover h3::after{width:clamp(75px, 6vw, 95px);height:clamp(5px, 0.5vw, 7px);box-shadow:0 6px 16px rgba(123,92,255,0.6), 0 3px 8px rgba(123,92,255,0.4)}
  .onboarding .slide-content p{margin:0 0 clamp(20px, 2.5vw, 32px) 0;color:#f8fafc;line-height:1.75;max-width:min(65ch, 90vw);font-size:clamp(16px, 2vw, 24px);text-shadow:0 2px 6px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);font-weight:400;opacity:0.95;position:relative;z-index:2;transition:all 0.3s ease;letter-spacing:0.01em}
  .onboarding .slide-content:hover p{opacity:1;text-shadow:0 3px 8px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);transform:translateY(-1px)}
  .onboarding .slide-buttons{margin-top:clamp(20px, 2.5vw, 32px);display:flex;gap:clamp(12px, 2vw, 20px);flex-wrap:wrap;justify-content:flex-start;align-items:center}
  .onboarding .slide-buttons .btn{display:inline-flex;align-items:center;gap:clamp(8px, 1.2vw, 12px);border-radius:clamp(12px, 1.5vw, 16px);border:1px solid rgba(255,255,255,0.25);padding:clamp(12px, 1.5vw, 16px) clamp(16px, 2.2vw, 24px);background:#fff;color:#111827;text-decoration:none;font-weight:600;font-size:clamp(14px, 1.4vw, 16px);transition:all 0.3s ease;min-width:clamp(140px, 18vw, 180px);justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
  .onboarding .slide-buttons .btn:hover{background:#f8f9fa;transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.15);border-color:rgba(255,255,255,0.4)}
  .onboarding .slide-buttons .btn img{width:clamp(18px, 1.8vw, 22px);height:clamp(18px, 1.8vw, 22px)}
  .dots{display:flex;gap:clamp(8px, 1vw, 12px);align-items:center;justify-content:center;margin-top:clamp(6px, 1vw, 10px)}
  .dot{width:clamp(6px, 0.8vw, 10px);height:clamp(6px, 0.8vw, 10px);border-radius:999px;border:1px solid rgba(255,255,255,0.6);background:rgba(255,255,255,0.25);cursor:pointer;transition:all 0.3s ease}
  .dot.is-active{background:#fff;border-color:#fff;width:clamp(18px, 2.5vw, 26px)}
  .cta-row{display:flex;justify-content:center;margin-top:clamp(24px, 3vw, 40px);padding:clamp(16px, 2vw, 24px) 0}
  .btn.cta{background:linear-gradient(135deg, #7b5cff 0%, #a855f7 50%, #6366f1 100%);color:#fff;border-color:transparent;padding:clamp(16px, 2.2vw, 24px) clamp(32px, 4.5vw, 48px);font-size:clamp(18px, 2.2vw, 24px);font-weight:800;border-radius:clamp(18px, 2.5vw, 28px);box-shadow:0 12px 30px rgba(123,92,255,0.4), 0 4px 12px rgba(0,0,0,0.2);transition:all 0.4s ease;text-transform:none;letter-spacing:0.02em;position:relative;overflow:hidden;min-width:clamp(220px, 28vw, 320px);text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:clamp(8px, 1vw, 12px)}
  .btn.cta::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);transition:left 0.5s ease}
  .btn.cta:hover::before{left:100%}
  .btn.cta:hover{opacity:0.95;transform:translateY(-3px) scale(1.05);box-shadow:0 16px 40px rgba(123,92,255,0.5), 0 6px 16px rgba(0,0,0,0.3)}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

  /* Large screens optimization */
  @media (min-width: 1440px) {
    .onboarding{padding:clamp(56px, 6vw, 80px) clamp(80px, 8vw, 120px)}
    .onboarding .slide{gap:clamp(56px, 6vw, 80px)}
    .onboarding .slide-media{max-width:min(35vw, 500px)}
    .onboarding .slides{gap:clamp(40px, 5vw, 64px)}
  }

  /* Tablet landscape */
  @media (max-width: 1200px) and (min-width: 1025px){
    .onboarding .slide{grid-template-columns:1fr;gap:clamp(32px, 4vw, 48px)}
    .onboarding .slide-media{max-width:min(45vw, 420px);aspect-ratio:9/16}
    .onboarding .slides{gap:clamp(28px, 3.5vw, 48px)}
  }

  /* Tablet portrait */
  @media (max-width: 1024px) and (min-width: 769px){
    .onboarding .slide{grid-template-columns:1fr;gap:clamp(28px, 3.5vw, 40px)}
    .onboarding .slide-media{max-width:min(50vw, 400px);aspect-ratio:9/16}
    .onboarding .slide-content{padding:clamp(32px, 4vw, 44px) clamp(28px, 3vw, 36px)}
    .onboarding .slides{gap:clamp(24px, 3vw, 40px)}
  }

  /* Mobile landscape */
  @media (max-width: 768px) and (min-width: 481px){
    .onboarding{padding:clamp(24px, 3.5vw, 32px) clamp(20px, 3.5vw, 28px)}
    .onboarding-header{margin-bottom:clamp(24px, 3vw, 32px)}
    .onboarding .slide{grid-template-columns:1fr;gap:clamp(20px, 2.5vw, 28px)}
    .onboarding .slide-media{max-width:min(55vw, 340px);aspect-ratio:9/16}
    .onboarding .slide-content{padding:clamp(24px, 3vw, 32px) clamp(20px, 2.5vw, 28px)}
    .onboarding .slide-content h3{font-size:clamp(24px, 3.5vw, 32px);margin:0 0 clamp(12px, 1.5vw, 18px) 0}
    .onboarding .slide-content h3::after{width:clamp(45px, 3.5vw, 60px);height:clamp(3px, 0.3vw, 4px);bottom:clamp(-8px, -1vw, -10px)}
    .onboarding .slide-content:hover h3::after{width:clamp(55px, 4.5vw, 70px);height:clamp(4px, 0.4vw, 5px)}
    .onboarding .slides{gap:clamp(20px, 2.5vw, 32px)}
  }

  /* Mobile portrait */
  @media (max-width: 480px) and (min-width: 361px){
    .onboarding{padding:clamp(20px, 3vw, 26px) clamp(16px, 3vw, 22px)}
    .onboarding-header{margin-bottom:clamp(20px, 2.5vw, 28px)}
    .onboarding .slide{grid-template-columns:1fr;gap:clamp(16px, 2vw, 24px)}
    .onboarding .slide-media{max-width:min(65vw, 300px);aspect-ratio:9/16}
    .onboarding .slide-content{padding:clamp(20px, 2.5vw, 28px) clamp(16px, 2vw, 24px)}
    .onboarding .slide-content h3{font-size:clamp(22px, 3vw, 28px);margin:0 0 clamp(10px, 1.2vw, 16px) 0}
    .onboarding .slide-content h3::after{width:clamp(40px, 3vw, 50px);height:clamp(3px, 0.3vw, 4px);bottom:clamp(-6px, -0.8vw, -8px)}
    .onboarding .slide-content:hover h3::after{width:clamp(50px, 4vw, 60px);height:clamp(4px, 0.4vw, 5px)}
    .onboarding .slides{gap:clamp(16px, 2vw, 28px)}
    .btn.cta{min-width:clamp(200px, 35vw, 260px)}
  }

  /* Small mobile */
  @media (max-width: 360px){
    .onboarding{padding:clamp(16px, 2.5vw, 20px) clamp(12px, 2.5vw, 16px)}
    .onboarding-header{margin-bottom:clamp(16px, 2vw, 24px)}
    .onboarding .slide{grid-template-columns:1fr;gap:clamp(12px, 1.5vw, 20px)}
    .onboarding .slide-media{max-width:min(70vw, 260px);aspect-ratio:9/16}
    .onboarding .slide-content{padding:clamp(16px, 2vw, 24px) clamp(12px, 1.5vw, 20px)}
    .onboarding .slide-content h3{font-size:clamp(20px, 2.5vw, 24px);margin:0 0 clamp(8px, 1vw, 12px) 0}
    .onboarding .slide-content h3::after{width:clamp(35px, 2.5vw, 45px);height:clamp(2px, 0.2vw, 3px);bottom:clamp(-5px, -0.6vw, -7px)}
    .onboarding .slide-content:hover h3::after{width:clamp(45px, 3.5vw, 55px);height:clamp(3px, 0.3vw, 4px)}
    .onboarding .slides{gap:clamp(12px, 1.5vw, 24px)}
    .btn.cta{min-width:clamp(180px, 40vw, 220px);padding:clamp(12px, 1.8vw, 16px) clamp(24px, 3.5vw, 28px);font-size:clamp(16px, 2vw, 18px)}
  }

  /* One-time scroll reveal */
  .reveal{opacity:0;transform:translateY(14px) scale(.98);transition:opacity var(--animation-duration) ease,transform var(--animation-duration) ease}
  .reveal.is-visible{opacity:1;transform:translateY(0) scale(1)}
  
  /* Mobile animation optimizations */
  @media (max-width: 768px) {
    .reveal{transition:opacity .4s ease,transform .4s ease}
    .onboarding .slide-content{transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}
    .onboarding .slide-media{transition:all 0.3s ease}
    .btn.cta{transition:all 0.3s ease}
    
    /* Disable hover effects on mobile */
    .onboarding .slide-media:hover{transform:none;box-shadow:0 16px 40px rgba(0,0,0,0.2), 0 6px 16px rgba(0,0,0,0.12);background:linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%)}
    .onboarding .slide-media:hover img{transform:none}
    .onboarding .slide-content:hover{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);box-shadow:0 20px 60px rgba(0,0,0,0.12), 0 8px 25px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.1);transform:none}
    .onboarding .slide-content:hover::before{opacity:0}
    .onboarding .slide-content:hover h3{text-shadow:0 4px 12px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.2);transform:none}
    .onboarding .slide-content:hover h3::after{width:60px;height:4px;box-shadow:0 4px 12px rgba(123,92,255,0.5), 0 2px 6px rgba(123,92,255,0.3)}
    .onboarding .slide-content:hover p{opacity:0.95;text-shadow:0 2px 6px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);transform:none}
    .btn.cta:hover{opacity:1;transform:none;box-shadow:0 12px 30px rgba(123,92,255,0.4), 0 4px 12px rgba(0,0,0,0.2)}
    .btn.cta:hover::before{left:-100%}
    
    /* Disable onboarding web content hover effects on mobile */
    .onboarding-web-content .image-container:hover{transform:none;box-shadow:0 8px 24px rgba(0,0,0,0.15) inset}
    .onboarding-web-content .image-container:hover .gallery-image{transform:none}
    .onboarding-web-content .icon-container:hover{transform:none}
    .onboarding-web-content .btn-permissions:hover{background:#ffffff;transform:none;box-shadow:none}
  }
  
  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    .reveal{transition:none}
    .onboarding .slide-content{transition:none}
    .onboarding .slide-media{transition:none}
    .btn.cta{transition:none}
    .onboarding .slide-media:hover{transform:none}
    .onboarding .slide-content:hover{transform:none}
    .btn.cta:hover{transform:none}
  }
  
  /* Hardware acceleration for better mobile performance */
  .onboarding .slide-media,
  .onboarding .slide-content,
  .btn.cta,
  .reveal,
  .onboarding-web-content .image-container,
  .onboarding-web-content .icon-container{
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
  }

  /* Performance optimizations for images */
  .onboarding .slide-media img,
  .onboarding-web-content .gallery-image{
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform: translateZ(0);
  }

  /* Smooth scrolling for better UX */
  html {
    scroll-behavior: smooth;
  }

  /* Container queries support for future-proofing */
  @container (max-width: 400px) {
    .onboarding .slide-content h3 {
      font-size: clamp(18px, 4cqw, 24px);
    }
  }

  /* Onboarding Web Content Styles */
  .onboarding-web-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: white;
    color: white;
    text-align: center;
  }

  /* Image Gallery */
  .onboarding-web-content .image-gallery {
    display: flex;
    gap: clamp(12px, 1.5vw, 20px);
    margin-bottom: clamp(16px, 2vw, 28px);
    justify-content: center;
    flex-wrap: wrap;
  }

  .onboarding-web-content .image-gallery.single-image {
    justify-content: center;
  }

  .onboarding-web-content .image-container{
    flex: 1;
    max-width: clamp(120px, 12vw, 180px);
    height: clamp(140px, 14vw, 200px);
    border-radius: clamp(8px, 1vw, 14px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    background: rgba(255,255,255,0.05);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) inset;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .onboarding-web-content .image-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.2) inset;
  }

  .onboarding-web-content .gallery-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    animation: none;
    display: block;
  }

  /* Remove per-image animation delays to match onboarding_web */

  .onboarding-web-content .image-container:hover .gallery-image {
    transform: scale(1.05);
  }


  /* Icon Container */
  .onboarding-web-content .icon-container {
    width: clamp(120px, 12vw, 180px);
    height: clamp(120px, 12vw, 180px);
    margin: 0 auto clamp(20px, 2.5vw, 32px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: float 3s ease-in-out infinite;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease;
  }

  .onboarding-web-content .icon-container:hover {
    transform: scale(1.05);
  }

  .onboarding-web-content .app-icon {
    width: clamp(70px, 7vw, 110px);
    height: clamp(70px, 7vw, 110px);
    object-fit: contain;
  }

  .onboarding-web-content .page-icon {
    font-size: clamp(60px, 6vw, 100px);
    color: #ffffff;
  }

  /* Typography */
  .onboarding-web-content .page-title {
    font-size: clamp(18px, 2.2vw, 28px);
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: clamp(8px, 1vw, 16px);
    line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    max-width: min(90vw, 400px);
    margin-left: auto;
    margin-right: auto;
  }

  .onboarding-web-content .page-description {
    font-size: clamp(14px, 1.6vw, 18px);
    color: rgba(26, 26, 26, 0.8);
    line-height: 1.5;
    margin-bottom: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    max-width: min(85vw, 350px);
    margin-left: auto;
    margin-right: auto;
  }


  .onboarding-web-content .btn-permissions {
    background: #ffffff;
    color: #7b5cff;
    border: none;
    padding: clamp(10px, 1.2vw, 14px) clamp(20px, 2.5vw, 28px);
    border-radius: clamp(10px, 1vw, 14px);
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: clamp(16px, 2vw, 24px);
    min-width: clamp(140px, 20vw, 180px);
  }

  .onboarding-web-content .btn-permissions:hover {
    background: #f8f9fa;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  /* Animations */
  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  @keyframes imageFloat {
    0%, 100% {
      transform: translateY(0px) scale(1);
    }
    25% {
      transform: translateY(-3px) scale(1.02);
    }
    50% {
      transform: translateY(-5px) scale(1.05);
    }
    75% {
      transform: translateY(-3px) scale(1.02);
    }
  }

  @keyframes containerPulse {
    0%, 100% {
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      border-color: rgba(255, 255, 255, 0.3);
    }
    50% {
      box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
      border-color: rgba(255, 255, 255, 0.5);
    }
  }

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

  @keyframes fadeInLeft {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fadeInRight {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Page-specific animations */
  .onboarding-page[data-page="1"] .image-gallery .image-container:nth-child(1) {
    animation: fadeInLeft 0.8s ease-out 0.2s both;
  }

  .onboarding-page[data-page="1"] .image-gallery .image-container:nth-child(2) {
    animation: fadeInRight 0.8s ease-out 0.4s both;
  }

  .onboarding-page[data-page="1"] .icon-container {
    animation: fadeInUp 0.8s ease-out 0.6s both, float 3s ease-in-out 1.4s infinite;
  }

  .onboarding-page[data-page="1"] .page-title {
    animation: fadeInUp 0.8s ease-out 0.8s both;
  }

  .onboarding-page[data-page="1"] .page-description {
    animation: fadeInUp 0.8s ease-out 1.0s both;
  }

  .onboarding-page[data-page="2"] .image-gallery .image-container:nth-child(1) {
    animation: fadeInLeft 0.8s ease-out 0.2s both;
  }

  .onboarding-page[data-page="2"] .image-gallery .image-container:nth-child(2) {
    animation: fadeInRight 0.8s ease-out 0.4s both;
  }

  .onboarding-page[data-page="2"] .icon-container {
    animation: fadeInUp 0.8s ease-out 0.6s both, float 3s ease-in-out 1.4s infinite;
  }

  .onboarding-page[data-page="2"] .page-title {
    animation: fadeInUp 0.8s ease-out 0.8s both;
  }

  .onboarding-page[data-page="2"] .page-description {
    animation: fadeInUp 0.8s ease-out 1.0s both;
  }

  .onboarding-page[data-page="3"] .image-gallery .image-container {
    animation: fadeInUp 0.8s ease-out 0.2s both;
  }

  .onboarding-page[data-page="3"] .icon-container {
    animation: fadeInUp 0.8s ease-out 0.4s both, float 3s ease-in-out 1.2s infinite;
  }

  .onboarding-page[data-page="3"] .page-title {
    animation: fadeInUp 0.8s ease-out 0.6s both;
  }

  .onboarding-page[data-page="3"] .page-description {
    animation: fadeInUp 0.8s ease-out 0.8s both;
  }

  /* Responsive Design for Onboarding Web Content */
  @media (max-width: 768px) {
    .onboarding-web-content {
      padding: clamp(16px, 2vw, 24px);
    }
    
    .onboarding-web-content .icon-container {
      width: clamp(100px, 10vw, 140px);
      height: clamp(100px, 10vw, 140px);
      margin-bottom: clamp(16px, 2vw, 24px);
    }
    
    .onboarding-web-content .app-icon {
      width: clamp(60px, 6vw, 80px);
      height: clamp(60px, 6vw, 80px);
    }
    
    .onboarding-web-content .page-icon {
      font-size: clamp(50px, 5vw, 70px);
    }
    
    .onboarding-web-content .page-title {
      font-size: clamp(16px, 2vw, 22px);
    }
    
    .onboarding-web-content .page-description {
      font-size: clamp(13px, 1.4vw, 16px);
    }
    
    .onboarding-web-content .image-container {
      max-width: clamp(100px, 10vw, 130px);
      height: clamp(120px, 12vw, 150px);
    }
  }

  @media (max-width: 480px) {
    .onboarding-web-content {
      padding: clamp(12px, 1.5vw, 18px);
    }
    
    .onboarding-web-content .icon-container {
      width: clamp(80px, 8vw, 110px);
      height: clamp(80px, 8vw, 110px);
      margin-bottom: clamp(12px, 1.5vw, 18px);
    }
    
    .onboarding-web-content .app-icon {
      width: clamp(50px, 5vw, 65px);
      height: clamp(50px, 5vw, 65px);
    }
    
    .onboarding-web-content .page-icon {
      font-size: clamp(40px, 4vw, 55px);
    }
    
    .onboarding-web-content .page-title {
      font-size: clamp(14px, 1.8vw, 18px);
    }
    
    .onboarding-web-content .page-description {
      font-size: clamp(12px, 1.2vw, 14px);
    }
    
    .onboarding-web-content .image-container {
      max-width: clamp(80px, 8vw, 110px);
      height: clamp(100px, 10vw, 130px);
    }
    
    .onboarding-web-content .image-gallery {
      gap: clamp(8px, 1vw, 12px);
    }
  }

  @media (max-width: 360px) {
    .onboarding-web-content {
      padding: clamp(8px, 1vw, 12px);
    }
    
    .onboarding-web-content .icon-container {
      width: clamp(70px, 7vw, 90px);
      height: clamp(70px, 7vw, 90px);
      margin-bottom: clamp(8px, 1vw, 14px);
    }
    
    .onboarding-web-content .app-icon {
      width: clamp(45px, 4.5vw, 55px);
      height: clamp(45px, 4.5vw, 55px);
    }
    
    .onboarding-web-content .page-icon {
      font-size: clamp(35px, 3.5vw, 45px);
    }
    
    .onboarding-web-content .page-title {
      font-size: clamp(12px, 1.5vw, 16px);
    }
    
    .onboarding-web-content .page-description {
      font-size: clamp(11px, 1.1vw, 13px);
    }
    
    .onboarding-web-content .image-container {
      max-width: clamp(70px, 7vw, 90px);
      height: clamp(85px, 8.5vw, 110px);
    }
    
    .onboarding-web-content .image-gallery {
      gap: clamp(6px, 0.8vw, 10px);
    }
  }