* {
     margin: 0;
     padding: 0;
     box-sizing: border-box
 }

 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     background: #fff;
     color: #0f172a
 }

 a {
     text-decoration: none;
     color: inherit
 }

 /* ── HERO ── */
 .hero {
     position: relative;
     height: 560px;
     overflow: hidden
 }

 .hero img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to right, rgba(0, 0, 0, .65), rgba(0, 0, 0, .4), transparent)
 }

 .hero-inner {
     position: absolute;
     inset: 0;
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 2rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 2rem
 }

 .hero-text {
     color: #fff;
     max-width: 560px
 }

 .hero-text h1 {
     font-size: clamp(2rem, 5vw, 3.5rem);
     font-weight: 800;
     line-height: 1.15;
     margin-bottom: 1rem
 }

 .hero-text p {
     font-size: 1.1rem;
     color: rgba(255, 255, 255, .8);
     margin-bottom: 2rem;
     line-height: 1.6
 }

 .btn-primary {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: #10b981;
     color: #fff;
     border: none;
     border-radius: 999px;
     padding: .9rem 2rem;
     font-size: 1rem;
     font-weight: 700;
     cursor: pointer;
     box-shadow: 0 8px 24px rgba(16, 185, 129, .35);
     transition: background .2s, transform .15s
 }

 .btn-primary:hover {
     background: #059669;
     transform: translateY(-2px)
 }

 .btn-primary svg {
     width: 18px;
     height: 18px
 }

 /* phone mockup */
 .phone-mockup {
     background: #0f172a;
     border-radius: 28px;
     padding: 1.25rem;
     width: 260px;
     border: 1px solid rgba(255, 255, 255, .1);
     box-shadow: 0 24px 60px rgba(0, 0, 0, .5)
 }

 .phone-handle {
     width: 64px;
     height: 6px;
     background: #334155;
     border-radius: 9px;
     margin: 0 auto 1rem
 }

 .phone-item {
     display: flex;
     align-items: center;
     gap: 10px;
     background: rgba(255, 255, 255, .05);
     border-radius: 14px;
     padding: 10px;
     margin-bottom: 6px
 }

 .phone-op-icon {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: .85rem;
     flex-shrink: 0
 }

 .phone-op-info {
     flex: 1
 }

 .phone-op-info p {
     color: #fff;
     font-size: .75rem;
     font-weight: 600
 }

 .phone-op-info span {
     color: #94a3b8;
     font-size: .65rem
 }

 .phone-amount {
     color: #34d399;
     font-size: .75rem;
     font-weight: 700
 }

 .phone-cta-bar {
     margin-top: .75rem;
     background: #10b981;
     border-radius: 14px;
     padding: .5rem;
     text-align: center;
     color: #fff;
     font-size: .85rem;
     font-weight: 700
 }

 @media(max-width:900px) {
     .phone-mockup {
         display: none
     }
 }

 /* ── COUNTRY SECTION ── */
 .section-country {
     padding: 4rem 2rem;
     max-width: 1280px;
     margin: 0 auto
 }

 .country-card {
     background: linear-gradient(135deg, #fefce8, #fffbeb);
     border-radius: 24px;
     padding: 2rem;
     max-width: 480px;
     margin: 0 auto 3rem;
     box-shadow: 0 2px 12px rgba(0, 0, 0, .06)
 }

 .country-card h2 {
     font-size: 1.35rem;
     font-weight: 700;
     margin-bottom: 1rem
 }

 .country-selector {
     position: relative
 }

 .country-btn {
     display: flex;
     align-items: center;
     gap: 12px;
     width: 100%;
     padding: 1rem 1.25rem;
     background: #fff;
     border: 1px solid #e2e8f0;
     border-radius: 14px;
     cursor: pointer;
     font-size: 1rem;
     font-weight: 600;
     justify-content: space-between;
     box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
     transition: box-shadow .2s
 }

 .country-btn:hover {
     box-shadow: 0 4px 16px rgba(0, 0, 0, .08)
 }

 .country-flag {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: #f1f5f9;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.25rem
 }

 .country-dropdown {
     position: absolute;
     left: 0;
     right: 0;
     top: calc(100% + 8px);
     background: #fff;
     border: 1px solid #e2e8f0;
     border-radius: 16px;
     box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
     z-index: 20;
     max-height: 280px;
     overflow-y: auto;
     display: none
 }

 .country-dropdown.open {
     display: block
 }

 .country-option {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: .75rem 1rem;
     cursor: pointer;
     transition: background .15s
 }

 .country-option:hover {
     background: #f8fafc
 }

 .country-option.selected {
     background: #ecfdf5;
     color: #059669;
     font-weight: 600
 }

 .country-option .flag-sm {
     font-size: 1.1rem;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: #f1f5f9;
     display: flex;
     align-items: center;
     justify-content: center
 }

 .country-option .op-count {
     margin-left: auto;
     font-size: .75rem;
     color: #94a3b8
 }

 /* operators grid */
 .operators-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
     gap: 1rem;
     margin-bottom: 1rem
 }

 .op-card {
     cursor: pointer
 }

 .op-tile {
     border-radius: 16px;
     height: 112px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid #e2e8f0;
     box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
     transition: transform .2s, box-shadow .2s;
     overflow: hidden;
     font-weight: 700;
     font-size: 1.1rem;
     color: #fff
 }

 .op-tile:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, .12)
 }

 .op-label {
     margin-top: .5rem;
     font-size: .85rem;
     font-weight: 600;
     color: #334155
 }

 .op-amounts {
     font-size: .72rem;
     color: #94a3b8;
     margin-top: 2px
 }

 .ops-meta {
     display: flex;
     align-items: center;
     gap: .5rem;
     font-size: .85rem;
     color: #64748b;
     margin-top: .5rem
 }

 /* ── THREE PILLARS ── */
 .section-pillars {
     padding: 5rem 2rem;
     background: #fff
 }

 .section-pillars-inner {
     max-width: 1280px;
     margin: 0 auto
 }

 .section-title {
     text-align: center;
     font-size: clamp(1.75rem, 4vw, 2.75rem);
     font-weight: 800;
     margin-bottom: .75rem
 }

 .section-sub {
     text-align: center;
     color: #64748b;
     font-size: 1.05rem;
     max-width: 600px;
     margin: 0 auto 3.5rem
 }

 .pillars-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 2rem
 }

 .pillar-card {
     background: #f8fafc;
     border-radius: 24px;
     padding: 2rem;
     transition: box-shadow .2s
 }

 .pillar-card:hover {
     box-shadow: 0 12px 40px rgba(0, 0, 0, .1)
 }

 .pillar-icon {
     width: 64px;
     height: 64px;
     background: linear-gradient(135deg, #d1fae5, #a7f3d0);
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.5rem;
     font-size: 2rem;
     transition: transform .2s
 }

 .pillar-card:hover .pillar-icon {
     transform: scale(1.1)
 }

 .pillar-card h3 {
     font-size: 1.35rem;
     font-weight: 800;
     margin-bottom: .75rem
 }

 .pillar-card p {
     color: #64748b;
     line-height: 1.6;
     margin-bottom: 1.25rem
 }

 .pillar-features {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: .5rem
 }

 .pillar-features li {
     display: flex;
     align-items: center;
     gap: .5rem;
     font-size: .875rem;
     color: #334155
 }

 .pillar-features li svg {
     width: 18px;
     height: 18px;
     color: #10b981;
     flex-shrink: 0
 }

 /* ── PREMIUM ── */
 .section-premium {
     padding: 4rem 2rem
 }

 .premium-inner {
     max-width: 1280px;
     margin: 0 auto
 }

 .premium-box {
     background: linear-gradient(135deg, #0f172a, #1e293b, #14532d);
     border-radius: 28px;
     padding: 3rem 2.5rem;
     position: relative;
     overflow: hidden
 }

 .premium-glow-1 {
     position: absolute;
     top: -60px;
     right: -60px;
     width: 300px;
     height: 300px;
     background: #10b981;
     border-radius: 50%;
     filter: blur(80px);
     opacity: .15;
     pointer-events: none
 }

 .premium-glow-2 {
     position: absolute;
     bottom: -60px;
     left: -60px;
     width: 200px;
     height: 200px;
     background: #fff;
     border-radius: 50%;
     filter: blur(80px);
     opacity: .07;
     pointer-events: none
 }

 .premium-badge {
     display: inline-block;
     padding: .35rem 1rem;
     background: rgba(16, 185, 129, .2);
     color: #34d399;
     font-size: .8rem;
     font-weight: 600;
     border-radius: 999px;
     margin-bottom: 1rem
 }

 .premium-box h2 {
     font-size: clamp(1.5rem, 3.5vw, 2rem);
     font-weight: 800;
     color: #fff;
     text-align: center;
     margin-bottom: 2.5rem;
     position: relative;
     z-index: 1
 }

 .benefits-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
     gap: 1rem;
     position: relative;
     z-index: 1
 }

 .benefit-card {
     background: rgba(255, 255, 255, .1);
     backdrop-filter: blur(8px);
     border-radius: 16px;
     padding: 1.25rem;
     text-align: center;
     transition: background .2s;
     cursor: pointer
 }

 .benefit-card:hover {
     background: rgba(255, 255, 255, .15)
 }

 .benefit-icon {
     font-size: 2rem;
     margin-bottom: .5rem
 }

 .benefit-highlight {
     display: inline-block;
     padding: .2rem .65rem;
     background: #10b981;
     color: #fff;
     font-size: .7rem;
     font-weight: 700;
     border-radius: 999px;
     margin-bottom: .5rem
 }

 .benefit-card h3 {
     color: #fff;
     font-size: .875rem;
     font-weight: 600;
     margin-bottom: .25rem
 }

 .benefit-card p {
     color: #94a3b8;
     font-size: .75rem
 }

 .premium-info {
     margin-top: 2rem;
     background: rgba(16, 185, 129, .15);
     border: 1px solid rgba(52, 211, 153, .3);
     border-radius: 16px;
     padding: 2rem;
     text-align: center;
     position: relative;
     z-index: 1
 }

 .premium-info p {
     color: #fff;
     font-size: 1rem;
     font-weight: 600;
     margin-bottom: .5rem
 }

 .premium-info .sub {
     color: #e2e8f0;
     font-size: .9rem;
     line-height: 1.6;
     margin-bottom: .5rem
 }

 .premium-info .price {
     color: #6ee7b7;
     font-size: .875rem
 }

 .premium-info .price strong {
     color: #34d399;
     font-size: 1rem
 }

 .premium-cta {
     margin-top: 2rem;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 1rem;
     position: relative;
     z-index: 1
 }

 .btn-outline-emerald {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     border: 2px solid #34d399;
     color: #34d399;
     background: transparent;
     border-radius: 999px;
     padding: .85rem 2rem;
     font-size: .95rem;
     font-weight: 600;
     cursor: pointer;
     transition: background .2s
 }

 .btn-outline-emerald:hover {
     background: rgba(52, 211, 153, .1)
 }

 /* ── REVIEWS ── */
 .section-reviews {
     padding: 5rem 2rem;
     background: #0f172a
 }

 .section-reviews-inner {
     max-width: 1280px;
     margin: 0 auto
 }

 .reviews-header {
     text-align: center;
     margin-bottom: 3.5rem
 }

 .reviews-header h2 {
     font-size: clamp(1.75rem, 4vw, 2.75rem);
     font-weight: 800;
     color: #fff;
     margin-bottom: .75rem
 }

 .stars-row {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: .75rem;
     margin-bottom: .5rem
 }

 .stars {
     display: flex;
     gap: 3px
 }

 .stars svg {
     width: 24px;
     height: 24px;
     fill: #facc15;
     color: #facc15
 }

 .rating {
     color: #fff;
     font-weight: 600;
     font-size: 1.1rem
 }

 .reviews-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 1.5rem
 }

 .review-card {
     background: rgba(255, 255, 255, .05);
     border: 1px solid rgba(255, 255, 255, .08);
     border-radius: 20px;
     padding: 1.5rem
 }

 .review-top {
     display: flex;
     align-items: center;
     gap: .75rem;
     margin-bottom: 1rem
 }

 .review-avatar {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: linear-gradient(135deg, #10b981, #059669);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-weight: 700;
     font-size: 1rem
 }

 .review-name {
     color: #fff;
     font-weight: 600;
     font-size: .9rem
 }

 .review-date {
     color: #64748b;
     font-size: .75rem
 }

 .review-stars {
     display: flex;
     gap: 2px
 }

 .review-stars svg {
     width: 14px;
     height: 14px;
     fill: #facc15;
     color: #facc15
 }

 .review-text {
     color: #94a3b8;
     font-size: .875rem;
     line-height: 1.6
 }

 .stats-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 2rem;
     margin-top: 4rem;
     padding-top: 4rem;
     border-top: 1px solid rgba(255, 255, 255, .1)
 }

 .stat-item {
     text-align: center
 }

 .stat-item .num {
     font-size: 2.5rem;
     font-weight: 800;
     color: #fff;
     margin-bottom: .25rem
 }

 .stat-item .lbl {
     color: #64748b
 }

 @media(max-width:640px) {
     .stats-grid {
         grid-template-columns: repeat(2, 1fr)
     }
 }


 @media(max-width: 786px) {
     .section-premium {
         padding: 4rem 5px;
     }
 }

 /* ── FAQ ── */
 .section-faq {
     padding: 4rem 2rem;
     max-width: 1280px;
     margin: 0 auto
 }

 .faq-box {
     background: #fff;
     border: 1px solid #e2e8f0;
     border-radius: 24px;
     padding: 3rem
 }

 .faq-box h2 {
     font-size: clamp(1.5rem, 3vw, 2.25rem);
     font-weight: 800;
     margin-bottom: .5rem
 }

 .faq-box .faq-sub {
     color: #64748b;
     margin-bottom: 2.5rem
 }

 .faq-list {
     max-width: 720px;
     display: flex;
     flex-direction: column;
     gap: .75rem
 }

 .faq-item {
     border: 1px solid #e2e8f0;
     border-radius: 12px;
     overflow: hidden
 }

 .faq-question {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1rem 1.25rem;
     background: none;
     border: none;
     cursor: pointer;
     font-size: .95rem;
     font-weight: 600;
     color: #0f172a;
     text-align: left;
     transition: background .15s
 }

 .faq-question:hover {
     background: #f8fafc
 }

 .faq-question svg {
     width: 20px;
     height: 20px;
     color: #94a3b8;
     flex-shrink: 0;
     transition: transform .25s
 }

 .faq-question.open svg {
     transform: rotate(180deg)
 }

 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height .3s ease, padding .3s ease;
     padding: 0 1.25rem;
     background: #f8fafc
 }

 .faq-answer.open {
     max-height: 300px;
     padding: .75rem 1.25rem 1rem
 }

 .faq-answer p {
     color: #64748b;
     font-size: .875rem;
     line-height: 1.7
 }

 /* ── FINAL CTA ── */
 .section-final {
     padding: 5rem 2rem;
     background: linear-gradient(135deg, #0f172a, #14532d, #0f172a)
 }

 .final-inner {
     max-width: 800px;
     margin: 0 auto;
     text-align: center
 }

 .final-inner h2 {
     font-size: clamp(1.75rem, 4vw, 2.75rem);
     font-weight: 800;
     color: #fff;
     margin-bottom: 1.25rem
 }

 .final-inner p {
     color: #cbd5e1;
     font-size: 1.1rem;
     margin-bottom: 2.5rem
 }

 .final-buttons {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 1rem
 }

 .final-note {
     color: #64748b;
     font-size: .8rem;
     margin-top: 1.25rem
 }