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

 :root {
     --ink: #0b0f1a;
     --ink2: #1a2035;
     --paper: #f5f3ee;
     --cream: #faf8f3;
     --gold: #c9a84c;
     --gold-light: #e8c96a;
     --gold-pale: #f5e9c4;
     --teal: #1a6b6b;
     --teal-light: #2a9595;
     --teal-pale: #d0eded;
     --accent: #d44b2f;
     --text: #2c3345;
     --muted: #6b7280;
     --radius: 16px;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Cairo', sans-serif;
     background: var(--cream);
     color: var(--text);
     overflow-x: hidden;
 }

 /* ── NOISE TEXTURE OVERLAY ── */
 body::before {
     content: '';
     position: fixed;
     inset: 0;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
     pointer-events: none;
     z-index: 0;
 }

 /* ── NAV ── */

 nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 100;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 18px 5%;
     background: rgba(245, 243, 238, 0.85);
     backdrop-filter: blur(14px);
     border-bottom: 1px solid rgba(201, 168, 76, 0.2);
 }

 .nav-logo {
     font-family: 'Tajawal', sans-serif;
     font-weight: 900;
     font-size: 1.6rem;
     color: var(--ink);
     letter-spacing: -0.5px;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .nav-logo span {
     color: var(--gold);
 }

 .nav-logo .dot {
     width: 8px;
     height: 8px;
     background: var(--teal);
     border-radius: 50%;
     display: inline-block;
     animation: pulse 2s infinite;
 }

 button.mobile-menu-btn {
     display: none;
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
         opacity: 1;
     }

     50% {
         transform: scale(1.4);
         opacity: 0.7;
     }
 }

 nav ul {
     list-style: none;
     display: flex;
     gap: 32px;
 }

 nav ul a {
     text-decoration: none;
     color: var(--text);
     font-size: 0.95rem;
     font-weight: 500;
     transition: color 0.2s;
 }

 nav ul a:hover {
     color: var(--teal);
 }

 .nav-cta {
     background: var(--ink);
     color: #fff !important;
     padding: 10px 24px;
     border-radius: 50px;
     font-weight: 700 !important;
     transition: background 0.2s, transform 0.2s !important;
 }

 .nav-cta:hover {
     background: var(--teal) !important;
     transform: translateY(-1px);
 }

 /* ── HERO ── */
 .hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     padding: 120px 5% 80px;
     position: relative;
     overflow: hidden;
 }

 .hero-bg {
     position: absolute;
     inset: 0;
     z-index: 0;
     background:
         radial-gradient(ellipse 70% 60% at 10% 50%, rgba(26, 107, 107, 0.12) 0%, transparent 70%),
         radial-gradient(ellipse 50% 50% at 90% 20%, rgba(201, 168, 76, 0.15) 0%, transparent 60%),
         radial-gradient(ellipse 40% 40% at 50% 100%, rgba(26, 107, 107, 0.08) 0%, transparent 70%);
 }

 /* Decorative circles */
 .hero-bg::before {
     content: '';
     position: absolute;
     width: 500px;
     height: 500px;
     border: 1px solid rgba(201, 168, 76, 0.15);
     border-radius: 50%;
     top: -100px;
     left: -100px;
     animation: rotate 40s linear infinite;
 }

 .hero-bg::after {
     content: '';
     position: absolute;
     width: 300px;
     height: 300px;
     border: 1px solid rgba(26, 107, 107, 0.2);
     border-radius: 50%;
     bottom: 10%;
     right: 5%;
     animation: rotate 30s linear infinite reverse;
 }

 @keyframes rotate {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 .hero-inner {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     align-items: center;
     max-width: 1200px;
     margin: 0 auto;
     width: 100%;
 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--gold-pale);
     border: 1px solid rgba(201, 168, 76, 0.4);
     border-radius: 50px;
     padding: 6px 16px;
     font-size: 0.82rem;
     font-weight: 600;
     color: #8a6220;
     margin-bottom: 24px;
     animation: fadeUp 0.6s ease both;
 }

 .hero-badge .live {
     width: 7px;
     height: 7px;
     background: #22c55e;
     border-radius: 50%;
     animation: pulse 1.5s infinite;
 }

 .hero-title {
     font-family: 'Tajawal', sans-serif;
     font-weight: 900;
     font-size: clamp(2.2rem, 4vw, 3.6rem);
     line-height: 1.2;
     color: var(--ink);
     margin-bottom: 24px;
     animation: fadeUp 0.6s 0.1s ease both;
 }

 .hero-title .highlight {
     color: var(--teal);
     position: relative;
     display: inline-block;
 }

 .hero-title .highlight::after {
     content: '';
     position: absolute;
     bottom: 4px;
     left: 0;
     right: 0;
     height: 6px;
     background: var(--gold-pale);
     z-index: -1;
     border-radius: 4px;
 }

 .hero-desc {
     font-size: 1.1rem;
     line-height: 1.9;
     color: var(--muted);
     margin-bottom: 40px;
     max-width: 520px;
     animation: fadeUp 0.6s 0.2s ease both;
 }

 .hero-actions {
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
     animation: fadeUp 0.6s 0.3s ease both;
 }

 .btn-primary {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: var(--teal);
     color: #fff;
     padding: 16px 32px;
     border-radius: 50px;
     font-size: 1rem;
     font-weight: 700;
     text-decoration: none;
     transition: all 0.3s;
     box-shadow: 0 8px 32px rgba(26, 107, 107, 0.3);
 }

 .btn-primary:hover {
     background: var(--ink);
     transform: translateY(-2px);
     box-shadow: 0 12px 40px rgba(11, 15, 26, 0.25);
 }

 .btn-secondary {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: transparent;
     color: var(--text);
     padding: 16px 32px;
     border-radius: 50px;
     font-size: 1rem;
     font-weight: 600;
     text-decoration: none;
     border: 1.5px solid rgba(44, 51, 69, 0.2);
     transition: all 0.3s;
 }

 .btn-secondary:hover {
     border-color: var(--teal);
     color: var(--teal);
     transform: translateY(-2px);
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(24px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* ── PHONE MOCKUP ── */
 .hero-visual {
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     animation: fadeUp 0.8s 0.2s ease both;
 }

 .phone-wrap {
     position: relative;
 }

 .phone-glow {
     position: absolute;
     inset: -40px;
     background: radial-gradient(ellipse at 50% 60%, rgba(26, 107, 107, 0.25) 0%, transparent 70%);
     border-radius: 50%;
     filter: blur(20px);
 }

 .phone {
     width: 220px;
     height: 440px;
     background: var(--ink);
     border-radius: 36px;
     padding: 12px;
     box-shadow:
         0 40px 80px rgba(11, 15, 26, 0.35),
         0 0 0 1px rgba(255, 255, 255, 0.08),
         inset 0 1px 0 rgba(255, 255, 255, 0.12);
     position: relative;
     z-index: 1;
 }

 .phone-screen {
     background: #0f1929;
     border-radius: 26px;
     height: 100%;
     overflow: hidden;
     position: relative;
     display: flex;
     flex-direction: column;
 }

 .phone-statusbar {
     padding: 12px 16px 8px;
     display: flex;
     justify-content: space-between;
     font-size: 0.6rem;
     color: rgba(255, 255, 255, 0.5);
 }

 .phone-header {
     background: var(--teal);
     padding: 16px;
     color: #fff;
     text-align: center;
 }

 .phone-header h4 {
     font-size: 0.75rem;
     font-weight: 700;
     margin-bottom: 4px;
 }

 .phone-header .time-big {
     font-family: 'Tajawal', sans-serif;
     font-size: 1.8rem;
     font-weight: 900;
     letter-spacing: 1px;
 }

 .phone-body {
     padding: 16px;
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .phone-location {
     background: rgba(201, 168, 76, 0.15);
     border: 1px solid rgba(201, 168, 76, 0.3);
     border-radius: 10px;
     padding: 10px 12px;
     display: flex;
     align-items: center;
     gap: 8px;
     color: var(--gold-light);
     font-size: 0.65rem;
 }

 .phone-location svg {
     flex-shrink: 0;
 }

 .phone-checkin-btn {
     background: var(--teal);
     border-radius: 12px;
     padding: 14px;
     color: #fff;
     text-align: center;
     font-weight: 700;
     font-size: 0.8rem;
     cursor: pointer;
     box-shadow: 0 4px 20px rgba(26, 107, 107, 0.4);
     animation: phonePulse 2s infinite;
 }

 @keyframes phonePulse {

     0%,
     100% {
         box-shadow: 0 4px 20px rgba(26, 107, 107, 0.4);
     }

     50% {
         box-shadow: 0 4px 32px rgba(26, 107, 107, 0.7);
     }
 }

 .phone-stats {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 8px;
 }

 .phone-stat {
     background: rgba(255, 255, 255, 0.05);
     border-radius: 10px;
     padding: 10px;
     text-align: center;
     border: 1px solid rgba(255, 255, 255, 0.06);
 }

 .phone-stat .val {
     font-family: 'Tajawal', sans-serif;
     font-size: 1.1rem;
     font-weight: 900;
     color: var(--gold-light);
 }

 .phone-stat .lbl {
     font-size: 0.58rem;
     color: rgba(255, 255, 255, 0.4);
     margin-top: 2px;
 }

 /* Floating badges around phone */
 .float-badge {
     position: absolute;
     background: #fff;
     border-radius: 12px;
     padding: 10px 14px;
     display: flex;
     align-items: center;
     gap: 8px;
     box-shadow: 0 8px 32px rgba(11, 15, 26, 0.12);
     font-size: 0.78rem;
     font-weight: 600;
     color: var(--text);
     white-space: nowrap;
     z-index: 2;
 }

 .float-badge .icon {
     width: 28px;
     height: 28px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
 }

 .float1 {
     top: 20px;
     left: -80px;
     animation: float 3s ease-in-out infinite;
 }

 .float2 {
     bottom: 80px;
     left: -90px;
     animation: float 3s ease-in-out infinite 1s;
 }

 .float3 {
     top: 60px;
     right: -80px;
     animation: float 3s ease-in-out infinite 0.5s;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-8px);
     }
 }

 /* ── STATS BAR ── */
 .stats-bar {
     background: var(--ink);
     padding: 32px 5%;
     position: relative;
     overflow: hidden;
 }

 .stats-bar::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(26, 107, 107, 0.3) 0%, transparent 50%, rgba(201, 168, 76, 0.1) 100%);
 }

 .stats-inner {
     position: relative;
     max-width: 1000px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 32px;
     text-align: center;
 }

 .stat-item .number {
     font-family: 'Tajawal', sans-serif;
     font-size: 2.4rem;
     font-weight: 900;
     color: var(--gold);
     line-height: 1;
 }

 .stat-item .label {
     font-size: 0.85rem;
     color: rgba(255, 255, 255, 0.5);
     margin-top: 6px;
 }

 /* ── SECTION COMMON ── */
 section {
     padding: 96px 5%;
 }

 .section-tag {
     display: inline-block;
     font-size: 0.78rem;
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--teal);
     background: var(--teal-pale);
     padding: 5px 14px;
     border-radius: 50px;
     margin-bottom: 16px;
 }

 .section-title {
     font-family: 'Tajawal', sans-serif;
     font-weight: 900;
     font-size: clamp(1.8rem, 3vw, 2.8rem);
     color: var(--ink);
     line-height: 1.25;
     margin-bottom: 16px;
 }

 .section-sub {
     font-size: 1.05rem;
     color: var(--muted);
     line-height: 1.8;
     max-width: 560px;
 }

 /* ── FEATURES ── */
 .features {
     background: var(--cream);
 }

 .features-header {
     text-align: center;
     margin-bottom: 64px;
 }

 .features-header .section-sub {
     margin: 0 auto;
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
     max-width: 1100px;
     margin: 0 auto;
 }

 .feature-card {
     background: #fff;
     border-radius: var(--radius);
     padding: 36px 28px;
     border: 1px solid rgba(201, 168, 76, 0.12);
     transition: all 0.3s;
     position: relative;
     overflow: hidden;
 }

 .feature-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--teal), var(--gold));
     transform: scaleX(0);
     transition: transform 0.3s;
     transform-origin: right;
 }

 .feature-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 20px 60px rgba(11, 15, 26, 0.1);
     border-color: rgba(26, 107, 107, 0.2);
 }

 .feature-card:hover::before {
     transform: scaleX(1);
 }

 .feature-icon {
     width: 56px;
     height: 56px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.6rem;
     margin-bottom: 20px;
 }

 .ic-teal {
     background: var(--teal-pale);
 }

 .ic-gold {
     background: var(--gold-pale);
 }

 .ic-red {
     background: rgba(212, 75, 47, 0.1);
 }

 .feature-title {
     font-family: 'Tajawal', sans-serif;
     font-size: 1.15rem;
     font-weight: 800;
     color: var(--ink);
     margin-bottom: 10px;
 }

 .feature-desc {
     font-size: 0.9rem;
     color: var(--muted);
     line-height: 1.8;
 }

 /* ── HOW IT WORKS ── */
 .how {
     background: var(--ink);
     position: relative;
     overflow: hidden;
 }

 .how::before {
     content: '';
     position: absolute;
     width: 600px;
     height: 600px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(26, 107, 107, 0.2) 0%, transparent 70%);
     top: -200px;
     right: -100px;
 }

 .how-header {
     text-align: center;
     margin-bottom: 64px;
     position: relative;
 }

 .how-header .section-title {
     color: #fff;
 }

 .how-header .section-sub {
     color: rgba(255, 255, 255, 0.5);
     margin: 0 auto;
 }

 .how-header .section-tag {
     background: rgba(26, 107, 107, 0.3);
     color: var(--teal-light);
 }

 .steps {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 32px;
     max-width: 1100px;
     margin: 0 auto;
     position: relative;
 }

 .steps::before {
     content: '';
     position: absolute;
     top: 28px;
     right: 10%;
     left: 10%;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--teal), var(--gold), transparent);
 }

 .step {
     text-align: center;
     position: relative;
 }

 .step-num {
     width: 56px;
     height: 56px;
     background: var(--teal);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: 'Tajawal', sans-serif;
     font-weight: 900;
     font-size: 1.2rem;
     color: #fff;
     margin: 0 auto 20px;
     border: 3px solid var(--ink);
     box-shadow: 0 0 0 1px var(--teal);
     transition: all 0.3s;
 }

 .step:hover .step-num {
     background: var(--gold);
     transform: scale(1.1);
 }

 .step-icon {
     font-size: 1.6rem;
     margin-bottom: 8px;
 }

 .step-title {
     font-family: 'Tajawal', sans-serif;
     font-size: 1rem;
     font-weight: 800;
     color: #fff;
     margin-bottom: 8px;
 }

 .step-desc {
     font-size: 0.82rem;
     color: rgba(255, 255, 255, 0.45);
     line-height: 1.7;
 }

 /* ── REPORTS ── */
 .reports {
     background: var(--paper);
 }

 .reports-inner {
     max-width: 1100px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1.1fr;
     gap: 64px;
     align-items: center;
 }

 .reports-text {}

 .reports-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 16px;
     margin-top: 36px;
 }

 .reports-list li {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     font-size: 0.95rem;
     color: var(--text);
     line-height: 1.6;
 }

 .check {
     width: 22px;
     height: 22px;
     background: var(--teal);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     color: #fff;
     font-size: 0.7rem;
     margin-top: 2px;
 }

 /* Report Card */
 .report-card {
     background: #fff;
     border-radius: 20px;
     padding: 28px;
     box-shadow: 0 20px 60px rgba(11, 15, 26, 0.1);
     border: 1px solid rgba(201, 168, 76, 0.15);
 }

 .report-card-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 24px;
 }

 .report-card-header h4 {
     font-family: 'Tajawal', sans-serif;
     font-size: 1rem;
     font-weight: 800;
     color: var(--ink);
 }

 .report-month {
     font-size: 0.75rem;
     color: var(--muted);
     background: var(--paper);
     padding: 4px 12px;
     border-radius: 50px;
 }

 .report-table {
     width: 100%;
     border-collapse: collapse;
 }

 .report-table th {
     font-size: 0.7rem;
     color: var(--muted);
     font-weight: 600;
     padding: 6px 0;
     text-align: right;
     border-bottom: 1px solid rgba(0, 0, 0, 0.06);
 }

 .report-table td {
     font-size: 0.82rem;
     padding: 10px 0;
     color: var(--text);
     border-bottom: 1px solid rgba(0, 0, 0, 0.04);
 }

 .badge-green {
     color: #16a34a;
     background: #dcfce7;
     padding: 2px 10px;
     border-radius: 50px;
     font-size: 0.7rem;
     font-weight: 600;
 }

 .badge-yellow {
     color: #d97706;
     background: #fef3c7;
     padding: 2px 10px;
     border-radius: 50px;
     font-size: 0.7rem;
     font-weight: 600;
 }

 .badge-red {
     color: #dc2626;
     background: #fee2e2;
     padding: 2px 10px;
     border-radius: 50px;
     font-size: 0.7rem;
     font-weight: 600;
 }

 .report-summary {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
     margin-top: 20px;
 }

 .sum-box {
     background: var(--paper);
     border-radius: 10px;
     padding: 12px;
     text-align: center;
 }

 .sum-box .val {
     font-family: 'Tajawal', sans-serif;
     font-size: 1.4rem;
     font-weight: 900;
 }

 .sum-box .lbl {
     font-size: 0.68rem;
     color: var(--muted);
     margin-top: 2px;
 }

 .sum-box.green .val {
     color: #16a34a;
 }

 .sum-box.yellow .val {
     color: #d97706;
 }

 .sum-box.red .val {
     color: #dc2626;
 }

 /* ── PRICING ── */
 .pricing {
     background: var(--cream);
     text-align: center;
 }

 .pricing-header {
     margin-bottom: 56px;
 }

 .pricing-header .section-sub {
     margin: 0 auto;
 }

 .pricing-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
     max-width: 960px;
     margin: 0 auto;
 }

 .price-card {
     background: #fff;
     border-radius: 20px;
     padding: 36px 28px;
     border: 1.5px solid rgba(0, 0, 0, 0.08);
     transition: all 0.3s;
     text-align: right;
 }

 .price-card.featured {
     background: var(--ink);
     border-color: var(--teal);
     transform: translateY(-12px);
     box-shadow: 0 24px 60px rgba(11, 15, 26, 0.25);
 }

 .price-card:hover:not(.featured) {
     transform: translateY(-6px);
     box-shadow: 0 16px 48px rgba(11, 15, 26, 0.1);
 }

 .price-tier {
     font-size: 0.78rem;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--teal);
     margin-bottom: 12px;
 }

 .price-card.featured .price-tier {
     color: var(--gold);
 }

 .price-amount {
     font-family: 'Tajawal', sans-serif;
     font-size: 2.6rem;
     font-weight: 900;
     color: var(--ink);
     line-height: 1;
 }

 .price-card.featured .price-amount {
     color: #fff;
 }

 .price-currency {
     font-size: 1rem;
     vertical-align: super;
     font-weight: 700;
     color: var(--muted);
 }

 .price-card.featured .price-currency {
     color: rgba(255, 255, 255, 0.6);
 }

 .price-period {
     font-size: 0.8rem;
     color: var(--muted);
     margin-bottom: 28px;
     margin-top: 4px;
 }

 .price-card.featured .price-period {
     color: rgba(255, 255, 255, 0.4);
 }

 .price-features {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin-bottom: 32px;
 }

 .price-features li {
     font-size: 0.87rem;
     color: var(--text);
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .price-card.featured .price-features li {
     color: rgba(255, 255, 255, 0.7);
 }

 .price-features .chk {
     color: var(--teal);
     font-size: 0.9rem;
 }

 .price-card.featured .price-features .chk {
     color: var(--gold);
 }

 .price-btn {
     display: block;
     text-align: center;
     padding: 14px;
     border-radius: 50px;
     font-weight: 700;
     font-size: 0.9rem;
     text-decoration: none;
     transition: all 0.3s;
     background: var(--paper);
     color: var(--ink);
     border: none;
     cursor: pointer;
     width: 100%;
     font-family: 'Cairo', sans-serif;
 }

 .price-btn:hover {
     background: var(--teal);
     color: #fff;
 }

 .price-card.featured .price-btn {
     background: var(--teal);
     color: #fff;
     box-shadow: 0 8px 24px rgba(26, 107, 107, 0.4);
 }

 .price-card.featured .price-btn:hover {
     background: var(--gold);
     color: var(--ink);
 }

 .featured-tag {
     background: var(--gold);
     color: var(--ink);
     font-size: 0.7rem;
     font-weight: 800;
     padding: 3px 12px;
     border-radius: 50px;
     display: inline-block;
     margin-bottom: 12px;
 }

 /* ── CTA ── */
 .cta-section {
     background: var(--teal);
     padding: 96px 5%;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .cta-section::before {
     content: '';
     position: absolute;
     width: 400px;
     height: 400px;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
     top: -100px;
     right: -100px;
 }

 .cta-section::after {
     content: '';
     position: absolute;
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, rgba(201, 168, 76, 0.15) 0%, transparent 70%);
     bottom: -80px;
     left: -80px;
 }

 .cta-inner {
     position: relative;
     z-index: 1;
 }

 .cta-title {
     font-family: 'Tajawal', sans-serif;
     font-size: clamp(1.8rem, 3vw, 2.8rem);
     font-weight: 900;
     color: #fff;
     margin-bottom: 16px;
 }

 .cta-sub {
     font-size: 1.05rem;
     color: rgba(255, 255, 255, 0.75);
     margin-bottom: 40px;
     max-width: 500px;
     margin-left: auto;
     margin-right: auto;
     line-height: 1.8;
 }

 .cta-btns {
     display: flex;
     gap: 16px;
     justify-content: center;
     flex-wrap: wrap;
 }

 .btn-white {
     background: #fff;
     color: var(--teal);
     padding: 16px 36px;
     border-radius: 50px;
     font-weight: 800;
     font-size: 1rem;
     text-decoration: none;
     transition: all 0.3s;
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

 .btn-white:hover {
     background: var(--gold);
     color: var(--ink);
     transform: translateY(-2px);
 }

 .btn-outline-white {
     background: transparent;
     color: #fff;
     padding: 16px 36px;
     border-radius: 50px;
     font-weight: 600;
     font-size: 1rem;
     text-decoration: none;
     border: 1.5px solid rgba(255, 255, 255, 0.4);
     transition: all 0.3s;
     display: inline-flex;
     align-items: center;
     gap: 8px;
 }

 .btn-outline-white:hover {
     border-color: #fff;
     background: rgba(255, 255, 255, 0.1);
     transform: translateY(-2px);
 }

 /* ── FOOTER ── */
 footer {
     background: var(--ink2);
     color: rgba(255, 255, 255, 0.5);
     padding: 40px 5%;
     text-align: center;
 }

 .footer-logo {
     font-family: 'Tajawal', sans-serif;
     font-weight: 900;
     font-size: 1.4rem;
     color: #fff;
     margin-bottom: 12px;
 }

 .footer-logo span {
     color: var(--gold);
 }

 footer p {
     font-size: 0.85rem;
     line-height: 1.8;
 }

 footer a {
     color: var(--teal-light);
     text-decoration: none;
 }

 /* ── SCROLL REVEAL ── */
 .reveal {
     opacity: 0;
     transform: translateY(32px);
     transition: all 0.7s ease;
 }

 .reveal.visible {
     opacity: 1;
     transform: none;
 }

 /* ── RESPONSIVE ── */
 @media (max-width: 900px) {
     .hero-inner {
         grid-template-columns: 1fr;
     }

     .hero-visual {
         display: none;
     }

     .features-grid {
         grid-template-columns: 1fr 1fr;
     }

     .steps {
         grid-template-columns: 1fr 1fr;
     }

     .steps::before {
         display: none;
     }

     .reports-inner {
         grid-template-columns: 1fr;
     }

     .pricing-grid {
         grid-template-columns: 1fr;
     }

     .price-card.featured {
         transform: none;
     }

     .stats-inner {
         grid-template-columns: 1fr 1fr;
         gap: 24px;
     }

     nav ul {
         display: none;
     }
 }

 @media (max-width: 600px) {
     .features-grid {
         grid-template-columns: 1fr;
     }

     .steps {
         grid-template-columns: 1fr;
     }
 }

 .nav-back {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--muted);
     text-decoration: none;
     transition: color 0.2s;
 }

 .nav-back:hover {
     color: var(--teal);
 }

 .highlight-metric-card {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: linear-gradient(135deg, #0f766e, #14b8a6);
     color: white;
     padding: 24px;
     border-radius: 22px;
     margin-bottom: 24px;
 }

 .highlight-metric-card span {
     font-size: 14px;
     opacity: .9;
 }

 .highlight-metric-card strong {
     display: block;
     font-size: 42px;
     margin: 8px 0;
 }

 .highlight-metric-card p {
     margin: 0;
     opacity: .9;
 }

 .metric-ring {
     width: 96px;
     height: 96px;
     border-radius: 50%;
     border: 8px solid rgba(255, 255, 255, .35);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
 }

 .report-charts-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 20px;
     margin-bottom: 24px;
 }

 .chart-card {
     padding: 24px;
 }

 .chart-card canvas {
     max-height: 280px;
 }

 @media (max-width: 768px) {
     .report-charts-grid {
         grid-template-columns: 1fr;
     }
 }

 .dashboard-insights-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr;
     gap: 18px;
     margin: 24px 0;
 }

 .insight-hero-card {
     background: linear-gradient(135deg, #0f766e, #14b8a6);
     color: #fff;
     border-radius: 24px;
     padding: 26px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .insight-label {
     font-size: 14px;
     opacity: .9;
 }

 .insight-hero-card strong {
     display: block;
     font-size: 44px;
     margin: 8px 0;
 }

 .insight-hero-card p {
     margin: 0;
     opacity: .9;
 }

 .insight-circle {
     width: 105px;
     height: 105px;
     border-radius: 50%;
     border: 8px solid rgba(255, 255, 255, .35);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     font-size: 22px;
 }

 .insight-mini-card {
     background: #fff;
     border-radius: 22px;
     padding: 24px;
     box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
 }

 .insight-mini-card span {
     font-size: 30px;
 }

 .insight-mini-card small {
     display: block;
     margin-top: 12px;
     color: #64748b;
 }

 .insight-mini-card strong {
     display: block;
     font-size: 34px;
     margin-top: 6px;
     color: #0f766e;
 }

 .insight-mini-card.warning strong {
     color: #dc2626;
 }

 .dashboard-report-actions {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px;
     margin-bottom: 24px;
 }

 .dashboard-report-card {
     background: #fff;
     border-radius: 22px;
     padding: 22px;
     text-decoration: none;
     color: #0f172a;
     box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
     transition: .2s ease;
 }

 .dashboard-report-card:hover {
     transform: translateY(-4px);
 }

 .dashboard-report-card span {
     font-size: 30px;
 }

 .dashboard-report-card strong {
     display: block;
     margin-top: 12px;
     font-size: 18px;
 }

 .dashboard-report-card small {
     display: block;
     margin-top: 6px;
     color: #64748b;
 }

 @media (max-width: 900px) {

     .dashboard-insights-grid,
     .dashboard-report-actions {
         grid-template-columns: 1fr;
     }
 }

 .dashboard-charts-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 20px;
     margin-bottom: 24px;
 }

 .chart-card {
     padding: 24px;
 }

 .chart-card canvas {
     max-height: 280px;
 }

 @media (max-width: 900px) {
     .dashboard-charts-grid {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 768px) {
     nav {
         position: fixed;
         top: 0;
         right: 0;
         left: 0;
         z-index: 9999;
         height: 72px;
         background: #fff;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 14px 20px;
         border-bottom: 1px solid #eee;
     }

     body {
         padding-top: 72px;
     }

     .mobile-menu-btn {
         display: flex !important;
         align-items: center;
         justify-content: center;
         width: 42px;
         height: 42px;
         border: 1px solid #222;
         border-radius: 10px;
         background: #fff;
         font-size: 1.5rem;
         cursor: pointer;
     }

     nav .nav-menu {
         display: none !important;
         position: fixed;
         top: 72px;
         right: 0;
         left: 0;
         z-index: 9998;

         background: #fff;
         padding: 20px;

         flex-direction: column;
         gap: 18px;

         box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
         border-bottom: 1px solid #eee;
     }

     nav .nav-menu.active {
         display: flex !important;
     }

     nav .nav-menu li {
         width: 100%;
         list-style: none;
     }

     nav .nav-menu a {
         display: block;
         width: 100%;
         padding: 8px 0;
         text-align: right;
     }

     nav .nav-cta {
         text-align: center !important;
         width: 100%;
     }
 }