body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background-color: #f5f5f7;
            margin: 0; padding: 0; text-align: center; color: #1d1d1f;
        }

        /* Blue Header matching 1000776923.jpg */
        header {
            background-color: #2962ff;
            padding: 12px 20px;
            display: flex; justify-content: space-between; align-items: center;
            color: white; font-weight: 500;
        }

        .header-left { display: flex; align-items: center; gap: 8px; }
        .apple-logo { width: 20px; filter: brightness(0) invert(1); }
        
        .free-shipping-tag {
            background: white; color: #2962ff; padding: 4px 12px;
            border-radius: 4px; font-size: 11px; font-weight: bold; cursor: pointer;
        }

        .container { max-width: 480px; margin: 0 auto; padding: 0 20px; }

        .hero-img { width: 100%; height: auto; margin: 20px 0; }
        h1 { font-size: 28px; margin: 10px 0; font-weight: 400; color: #333; }
        .sub-text { font-size: 16px; color: #555; margin-bottom: 25px; }

        .btn-claim-main {
            background-color: #2962ff; color: white; padding: 16px 0;
            width: 100%; max-width: 260px; border-radius: 50px;
            font-weight: 600; font-size: 22px; border: none; cursor: pointer;
            box-shadow: 0 4px 12px rgba(41, 98, 255, 0.2);
        }

        .desc-box {
            background: white; padding: 25px; border-radius: 12px;
            margin: 30px 0; text-align: left; line-height: 1.6;
            font-size: 15px; color: #1d1d1f; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        /* FAQ Layout matching 1000776924.jpg */
        .faq-section { margin-top: 40px; border-top: 1px solid #ddd; padding-top: 20px; text-align: center; }
        .faq-title { font-size: 18px; margin-bottom: 20px; color: #444; }
        .faq-item { border-bottom: 1px solid #ddd; padding: 15px 0; font-size: 15px; color: #333; }
        .faq-note { font-size: 14px; color: #666; margin-top: 20px; }

        /* MODAL & STEP STYLES */
        .modal-overlay {
            display: none; position: fixed; top: 0; left: 0;
            width: 100%; height: 100%; background: rgba(0,0,0,0.7);
            z-index: 1000; overflow-y: auto;
        }
        .modal-content {
            background: white; width: 92%; max-width: 440px;
            margin: 30px auto; border-radius: 18px; padding: 20px;
            position: relative; text-align: center;
        }
        .step-content { display: none; }
        .step-active { display: block; }

        /* Multi-Phone Selection Style (Matches 1000776930.jpg) */
        .phone-option {
            padding: 20px 0; border-bottom: 1px solid #eee;
        }
        .phone-option img { width: 130px; margin-bottom: 10px; }
        .btn-select-device {
            background-color: #2962ff; color: white; padding: 10px 30px;
            border-radius: 8px; border: none; font-weight: 500; cursor: pointer;
        }

        /* Color & Storage Grids (1000776937.jpg & 1000776938.jpg) */
        .selection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; }
        .selection-card { 
            border: 1.5px solid #000; border-radius: 10px; padding: 12px 5px; 
            cursor: pointer; font-size: 11px;
        }
        .dot { width: 22px; height: 22px; border-radius: 50%; margin: 0 auto 8px; border: 1px solid #ddd; }

        /* Form (1000776939.jpg) */
        .form-input { 
            width: 100%; padding: 12px; margin: 8px 0; 
            border: 1px solid #d2d2d7; border-radius: 6px; box-sizing: border-box;
        }
        .btn-continue { 
            background-color: #2962ff; color: white; width: 100%; 
            padding: 15px; border: none; border-radius: 6px; 
            font-size: 18px; font-weight: bold; cursor: pointer;
        }