/* ==========================================================================
   Moadaly Modern Design System & CSS Stylesheet
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Outfit:wght@300;400;600;700&display=swap');

   :root {
       /* Color Palette - Premium Emerald Academic Theme */
       --primary: #059669;          /* Emerald Green */
       --primary-hover: #047857;
       --primary-light: rgba(5, 150, 105, 0.1);
       --dark-navy: #0B132B;        /* Deep Navy */
       --navy-gray: #1C2541;        /* Secondary Navy */
       --bg-main: #F8FAFC;          /* Soft light gray-blue background */
       --bg-card: #FFFFFF;          /* Pure white card backgrounds */
       --border-color: #E2E8F0;     /* Slate border color */
       
       /* Text Colors */
       --text-primary: #0F172A;     /* Slate 900 */
       --text-secondary: #475569;   /* Slate 600 */
       --text-muted: #94A3B8;       /* Slate 400 */
       
       /* Functional Colors */
       --success: #10B981;
       --error: #EF4444;
       --warning: #F59E0B;
       --info: #3B82F6;
       
       /* Visual Properties */
       --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.03);
       --shadow-md: 0 10px 15px -3px rgba(15, 23, 42, 0.05), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
       --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
       --shadow-premium: 0 25px 50px -12px rgba(5, 150, 105, 0.08);
       
       --radius-sm: 8px;
       --radius-md: 14px;
       --radius-lg: 20px;
       --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   /* Keyframe Animations */
   @keyframes scroll {
       0% { transform: translateX(0); }
       100% { transform: translateX(calc(250px * 7)); }
   }
   @keyframes fadeIn {
       from { opacity: 0; transform: translateY(12px); }
       to { opacity: 1; transform: translateY(0); }
   }
   @keyframes float {
       0%, 100% { transform: translateY(0); }
       50% { transform: translateY(-6px); }
   }
   
   /* Base Styles */
   html {
       scroll-behavior: smooth;
       box-sizing: border-box;
   }
   *, *:before, *:after {
       box-sizing: inherit;
   }
   
   body {
       font-family: 'IBM Plex Sans Arabic', sans-serif;
       background-color: var(--bg-main);
       color: var(--text-primary);
       margin: 0;
       line-height: 1.7;
       -webkit-font-smoothing: antialiased;
   }
   
   .container {
       width: 100%;
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 1.5rem;
   }
   
   /* Typography Helper */
   .font-outfit {
       font-family: 'IBM Plex Sans Arabic', sans-serif;
   }
   
   /* Sections */
   .section {
       padding: 5rem 0;
   }
   .section-title {
       font-size: clamp(2rem, 4vw, 2.5rem);
       font-weight: 800;
       text-align: center;
       margin-bottom: 0.75rem;
       color: var(--dark-navy);
   }
   .section-subtitle {
       text-align: center;
       color: var(--text-secondary);
       font-size: 1.1rem;
       max-width: 600px;
       margin: 0 auto 3.5rem;
   }
   
   /* Buttons & CTAs */
   .nav-cta {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       padding: 12px 28px;
       font-weight: 700;
       border-radius: 50px;
       text-decoration: none;
       transition: var(--transition);
       background: linear-gradient(135deg, var(--primary), var(--success));
       color: #ffffff;
       border: none;
       box-shadow: 0 10px 20px -5px rgba(5, 150, 105, 0.3);
       cursor: pointer;
   }
   .nav-cta:hover {
       transform: translateY(-3px);
       box-shadow: 0 12px 22px -5px rgba(5, 150, 105, 0.45);
       background: linear-gradient(135deg, var(--primary-hover), var(--primary));
   }
   .nav-cta:active {
       transform: translateY(-1px);
   }
   
   /* Header & Navbar */
   .main-header {
       background-color: rgba(255, 255, 255, 0.85);
       backdrop-filter: blur(12px);
       padding: 1rem 0;
       position: sticky;
       top: 0;
       z-index: 1000;
       border-bottom: 1px solid var(--border-color);
       box-shadow: var(--shadow-sm);
   }
   .navbar {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   .nav-logo {
       font-size: 1.6rem;
       font-weight: 800;
       color: var(--dark-navy);
       text-decoration: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       gap: 8px;
   }
   .nav-logo span {
       color: var(--primary);
   }
   .nav-logo img {
       max-height: 40px;
       width: auto;
       transition: var(--transition);
   }
   .nav-logo:hover img {
       transform: scale(1.08) rotate(-3deg);
   }
   
   .nav-links {
       list-style: none;
       display: flex;
       gap: 2rem;
       margin: 0;
       padding: 0;
   }
   .nav-links a {
       text-decoration: none;
       color: var(--text-secondary);
       font-weight: 600;
       transition: var(--transition);
       padding: 6px 12px;
       border-radius: 8px;
   }
   .nav-links a:hover {
       color: var(--primary);
       background-color: var(--primary-light);
   }
   
   /* Hero Section */
   .hero-section {
       padding: 6.5rem 0;
       text-align: center;
       background: radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.04) 0%, transparent 50%),
                   radial-gradient(circle at 20% 80%, rgba(5, 150, 105, 0.03) 0%, transparent 50%),
                   var(--bg-card);
       border-bottom: 1px solid var(--border-color);
   }
   .hero-content h1 {
       font-size: clamp(2.5rem, 6vw, 3.8rem);
       font-weight: 800;
       line-height: 1.25;
       margin-bottom: 1.2rem;
       color: var(--dark-navy);
       max-width: 850px;
       margin-inline: auto;
   }
   
   /* Dynamic Words */
   .dynamic-word {
       display: inline-block;
       transition: var(--transition);
       font-weight: 800;
   }
   .word-accuracy {
       color: var(--dark-navy);
       border-bottom: 5px solid var(--primary);
   }
   .word-simplicity {
       color: var(--primary);
       animation: float 4s ease-in-out infinite;
   }
   .word-confidence {
       color: var(--primary);
       text-shadow: 0 0 20px rgba(16, 185, 129, 0.35);
       transform: scale(1.05);
   }
   
   .hero-content p {
       font-size: 1.2rem;
       color: var(--text-secondary);
       max-width: 680px;
       margin: 0 auto 2.8rem;
   }
   
   /* Features Grid */
   .features-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 2rem;
   }
   .feature-card {
       background: var(--bg-card);
       padding: 2.8rem 2rem;
       border-radius: var(--radius-md);
       border: 1px solid var(--border-color);
       text-align: center;
       transition: var(--transition);
       box-shadow: var(--shadow-sm);
   }
   .feature-card:hover {
       transform: translateY(-8px);
       box-shadow: var(--shadow-lg), var(--shadow-premium);
       border-color: rgba(5, 150, 105, 0.15);
   }
   .feature-icon {
       display: inline-flex;
       width: 65px;
       height: 65px;
       border-radius: 50%;
       align-items: center;
       justify-content: center;
       background-color: var(--primary-light);
       margin-bottom: 1.5rem;
       transition: var(--transition);
   }
   .feature-card:hover .feature-icon {
       transform: scale(1.1) rotate(5deg);
       background-color: var(--primary);
   }
   .feature-card:hover .feature-icon i {
       color: #ffffff !important;
   }
   .feature-card h3 {
       font-size: 1.4rem;
       font-weight: 700;
       margin: 0 0 0.75rem 0;
       color: var(--dark-navy);
   }
   .feature-card p {
       font-size: 1rem;
       color: var(--text-secondary);
       margin: 0;
       line-height: 1.6;
   }
   
   /* How To Use */
   .how-to-section {
       background-color: var(--bg-main);
   }
   .how-to-grid {
       display: grid;
       grid-template-columns: 1.1fr 0.9fr;
       gap: 4rem;
       align-items: center;
   }
   .steps-container {
       display: flex;
       flex-direction: column;
       gap: 1.5rem;
   }
   .step-item {
       display: flex;
       align-items: flex-start;
       gap: 1.25rem;
       background: var(--bg-card);
       padding: 1.6rem;
       border-radius: var(--radius-md);
       box-shadow: var(--shadow-sm);
       border: 1px solid var(--border-color);
       transition: var(--transition);
   }
   .step-item:hover {
       transform: translateX(-5px);
       border-color: rgba(5, 150, 105, 0.1);
       box-shadow: var(--shadow-md);
   }
   .step-number {
       background: linear-gradient(135deg, var(--primary), var(--success));
       color: #ffffff;
       width: 38px;
       height: 38px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 800;
       font-size: 1.1rem;
       flex-shrink: 0;
       box-shadow: 0 4px 10px rgba(5, 150, 105, 0.2);
   }
   .step-content h4 {
       margin: 0 0 0.4rem 0;
       font-size: 1.15rem;
       color: var(--dark-navy);
       font-weight: 700;
   }
   .step-content p {
       margin: 0;
       font-size: 0.95rem;
       color: var(--text-secondary);
   }
   
   .image-container {
       width: 100%;
       border-radius: var(--radius-lg);
       overflow: hidden;
       box-shadow: var(--shadow-lg);
       border: 1px solid var(--border-color);
       background-color: var(--bg-card);
       padding: 10px;
       transition: var(--transition);
   }
   .image-container:hover {
       transform: scale(1.02);
   }
   .image-container img {
       width: 100%;
       height: auto;
       display: block;
       object-fit: cover;
       border-radius: var(--radius-md);
   }
   
   /* Hub Selector Grid */
   .selectors-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
       gap: 1.5rem;
       margin-bottom: 3rem;
   }
   .selector-card {
       background: var(--bg-card);
       border: 2px solid var(--border-color);
       border-radius: var(--radius-md);
       padding: 2.2rem 1.5rem;
       text-decoration: none;
       color: var(--text-primary);
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       transition: var(--transition);
       box-shadow: var(--shadow-sm);
   }
   .selector-card:hover {
       transform: translateY(-8px);
       box-shadow: var(--shadow-lg);
       border-color: var(--primary);
   }
   .selector-card img {
       width: 140px;
       height: 140px;
       object-fit: contain;
       margin-bottom: 1.25rem;
       transition: var(--transition);
   }
   .selector-card:hover img {
       transform: scale(1.08);
   }
   .selector-card-title {
       font-weight: 800;
       font-size: 1.25rem;
       color: var(--dark-navy);
       margin-bottom: 0.5rem;
   }
   .selector-card-description {
       font-size: 0.95rem;
       color: var(--text-secondary);
       margin: 0;
   }
   
   .selector-card-buttons {
       margin-top: 1.5rem;
       display: flex;
       gap: 10px;
       width: 100%;
   }
   .selector-card-btn {
       flex: 1;
       padding: 10px 12px;
       font-size: 0.85rem;
       border-radius: 50px;
       text-align: center;
       font-weight: 700;
       text-decoration: none;
       transition: var(--transition);
       display: inline-flex;
       align-items: center;
       justify-content: center;
       color: #ffffff;
       cursor: pointer;
       border: none;
   }
   .selector-card-btn-primary {
       background: linear-gradient(135deg, var(--primary), var(--success));
       box-shadow: 0 4px 10px rgba(5, 150, 105, 0.2);
   }
   .selector-card-btn-primary:hover {
       transform: translateY(-2px);
       box-shadow: 0 6px 15px rgba(5, 150, 105, 0.35);
       background: linear-gradient(135deg, var(--primary-hover), var(--primary));
   }
   .selector-card-btn-secondary {
       background: var(--dark-navy);
       box-shadow: 0 4px 10px rgba(11, 19, 43, 0.2);
   }
   .selector-card-btn-secondary:hover {
       transform: translateY(-2px);
       box-shadow: 0 6px 15px rgba(11, 19, 43, 0.35);
       background: var(--navy-gray);
   }
   
   /* Testimonials */
   .testimonials-section {
       background-color: var(--bg-main);
   }
   .testimonial-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
       gap: 2rem;
   }
   .testimonial-card {
       background: var(--bg-card);
       padding: 2.5rem 2rem;
       border-radius: var(--radius-md);
       border: 1px solid var(--border-color);
       box-shadow: var(--shadow-sm);
       position: relative;
   }
   .testimonial-card blockquote {
       margin: 0 0 1.5rem 0;
       font-size: 1.05rem;
       font-style: italic;
       color: var(--text-secondary);
       border-right: 4px solid var(--primary);
       padding-right: 1.25rem;
       line-height: 1.8;
   }
   .testimonial-author {
       display: flex;
       align-items: center;
       gap: 1rem;
   }
   .author-info h4 {
       margin: 0 0 2px 0;
       font-size: 1.1rem;
       color: var(--dark-navy);
       font-weight: 700;
   }
   .author-info p {
       margin: 0;
       font-size: 0.9rem;
       color: var(--text-muted);
   }
   
   /* Logo Scroller */
   .logo-scroller-section {
       padding: 4rem 0;
       border-top: 1px solid var(--border-color);
       background-color: var(--bg-card);
   }
   .scroller-title {
       text-align: center;
       font-size: 1.1rem;
       color: var(--text-secondary);
       margin-bottom: 2.5rem;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 1px;
   }
   .logo-scroller {
       overflow: hidden;
       position: relative;
       max-width: 1000px;
       margin: 0 auto;
       -webkit-mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
       mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
   }
   .logo-scroller__inner {
       display: flex;
       gap: 5rem;
       width: fit-content;
       animation: scroll 35s linear infinite;
   }
   .logo-scroller__inner img {
       height: 100px;
       object-fit: contain;
       transition: var(--transition);
   }
   .logo-scroller:hover .logo-scroller__inner {
       animation-play-state: paused;
   }
   
   /* Helper Classes */
   .hidden { display: none !important; }
   
   /* Calculator Screen Layout */
   .calculator-layout {
       max-width: 850px;
       margin: 0 auto;
       padding: 3rem 1.5rem;
   }
   
   /* Journey Stepper */
   .journey-stepper {
       display: flex;
       justify-content: center;
       align-items: center;
       margin-bottom: 3.5rem;
       position: relative;
       width: 100%;
       max-width: 500px;
       margin-inline: auto;
   }
   .journey-stepper::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 8%;
       right: 8%;
       height: 3px;
       background: var(--border-color);
       z-index: 0;
       transform: translateY(-50%);
   }
   .step-node {
       z-index: 1;
       background: var(--bg-card);
       border: 2.5px solid var(--border-color);
       color: var(--text-muted);
       width: 44px;
       height: 44px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 800;
       font-size: 1.1rem;
       transition: var(--transition);
       position: relative;
   }
   .step-node.active {
       border-color: var(--primary);
       color: var(--primary);
       box-shadow: 0 0 0 5px rgba(5, 150, 105, 0.15);
       transform: scale(1.05);
   }
   .step-node.completed {
       background-color: var(--primary);
       border-color: var(--primary);
       color: #ffffff;
       box-shadow: 0 4px 10px rgba(5, 150, 105, 0.2);
   }
   .step-label {
       position: absolute;
       top: 50px;
       left: 50%;
       transform: translateX(-50%);
       font-size: 0.85rem;
       white-space: nowrap;
       color: var(--text-secondary);
       font-weight: 700;
   }
   .step-node.active .step-label {
       color: var(--primary);
   }
   .step-spacer {
       flex-grow: 1;
   }
   
   /* Calculator Header */
   .calculator-header-group {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-bottom: 1.5rem;
       justify-content: center;
   }
   #calculator-title {
       color: var(--dark-navy);
       font-size: clamp(1.8rem, 4vw, 2.3rem);
       font-weight: 800;
       text-align: center;
       margin: 0;
   }
   .info-btn {
       color: var(--primary);
       cursor: pointer;
       transition: var(--transition);
       display: flex;
       align-items: center;
   }
   .info-btn:hover {
       transform: scale(1.15) rotate(5deg);
       color: var(--primary-hover);
   }
   
   /* Progress Section */
   .progress-container {
       width: 100%;
       max-width: 450px;
       margin: 0 auto 3rem;
       background: var(--bg-card);
       padding: 1.25rem;
       border-radius: var(--radius-md);
       border: 1px solid var(--border-color);
       box-shadow: var(--shadow-sm);
   }
   .progress-label {
       display: flex;
       justify-content: space-between;
       font-size: .9rem;
       color: var(--text-secondary);
       margin-bottom: .6rem;
       font-weight: 700;
   }
   .progress-bar-bg {
       background-color: var(--border-color);
       border-radius: 50px;
       height: 10px;
       overflow: hidden;
   }
   .progress-bar-fill {
       width: 0%;
       height: 100%;
       background: linear-gradient(to left, var(--primary), var(--success));
       border-radius: 50px;
       transition: width .5s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   /* Subjects Grid Layout */
   .subjects-container {
       display: flex;
       flex-direction: column;
       gap: 1.25rem;
       width: 100%;
       margin-bottom: 3rem;
   }
   
   .subject-card {
       background: var(--bg-card);
       border-radius: var(--radius-md);
       box-shadow: var(--shadow-sm);
       overflow: hidden;
       transition: var(--transition);
       border: 1px solid var(--border-color);
   }
   .subject-card:hover {
       border-color: rgba(5, 150, 105, 0.15);
       box-shadow: var(--shadow-md);
   }
   
   .subject-card.missing-data {
       border-right: 5px solid var(--warning);
   }
   .subject-card.missing-data .subject-name {
       color: var(--warning);
   }
   
   .subject-header {
       padding: 1.3rem 2rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
       cursor: pointer;
       user-select: none;
       transition: var(--transition);
   }
   .subject-header:hover {
       background-color: var(--bg-main);
   }
   
   .subject-info-group {
       display: flex;
       align-items: center;
       gap: 15px;
   }
   .subject-name {
       font-weight: 800;
       font-size: 1.15rem;
       color: var(--dark-navy);
   }
   .card-points-preview {
       font-weight: 800;
       color: var(--text-muted);
       font-size: 1.1rem;
       font-family: 'IBM Plex Sans Arabic', sans-serif;
   }
   .chevron-icon {
       transition: var(--transition);
       color: var(--text-muted);
   }
   .subject-card.expanded .chevron-icon {
       transform: rotate(180deg);
       color: var(--primary);
   }
   
   .subject-body {
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       background-color: var(--bg-main);
       border-top: 0px solid var(--border-color);
   }
   .subject-card.expanded .subject-body {
       max-height: 400px;
       border-top-width: 1px;
   }
   
   .subject-inputs-grid {
       padding: 1.8rem 2rem;
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
       gap: 1.5rem;
       align-items: center;
       justify-items: center;
   }
   
   .input-group {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 6px;
       width: 100%;
   }
   .input-group label {
       font-size: .85rem;
       color: var(--text-secondary);
       font-weight: 700;
   }
   .input-group input {
       width: 100%;
       max-width: 80px;
       padding: 10px;
       border: 2px solid var(--border-color);
       border-radius: var(--radius-sm);
       text-align: center;
       font-family: 'IBM Plex Sans Arabic', sans-serif;
       font-size: 1.15rem;
       font-weight: 700;
       background-color: var(--bg-card);
       color: var(--text-primary);
       transition: var(--transition);
   }
   .input-group input:focus {
       outline: none;
       border-color: var(--primary);
       box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
   }
   .input-group input.missing-field {
       border-color: var(--warning);
       background-color: rgba(245, 158, 11, 0.02);
   }
   
   /* Switch TD */
   .td-toggle-group {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 6px;
   }
   .switch {
       position: relative;
       display: inline-block;
       width: 52px;
       height: 28px;
   }
   .switch input {
       opacity: 0;
       width: 0;
       height: 0;
   }
   .slider {
       position: absolute;
       cursor: pointer;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: #CBD5E1;
       transition: .4s;
       border-radius: 34px;
   }
   .slider:before {
       position: absolute;
       content: "";
       height: 20px;
       width: 20px;
       left: 4px;
       bottom: 4px;
       background-color: white;
       transition: .4s;
       border-radius: 50%;
       box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   }
   input:checked + .slider {
       background-color: var(--primary);
   }
   input:checked + .slider:before {
       transform: translateX(24px);
   }
   
   /* Results Box */
   .final-results {
       margin-top: 3.5rem;
       padding: 2.5rem;
       background: var(--bg-card);
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-lg);
       border-top: 6px solid var(--primary);
       text-align: center;
       position: relative;
       overflow: hidden;
   }
   .final-results::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: radial-gradient(circle at 50% -20%, rgba(5, 150, 105, 0.02) 0%, transparent 70%);
       pointer-events: none;
   }
   .final-results h3 {
       font-size: 1.3rem;
       font-weight: 700;
       color: var(--text-secondary);
       margin: 0 0 0.5rem 0;
   }
   .final-average {
       font-size: clamp(3.5rem, 8vw, 4.5rem);
       color: var(--dark-navy);
       font-weight: 800;
       line-height: 1.1;
       font-family: 'IBM Plex Sans Arabic', sans-serif;
       margin-bottom: 0.5rem;
   }
   .result-message {
       font-size: 1.3rem;
       font-weight: 700;
       margin: 0 0 1.5rem 0;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       min-height: 2.2rem;
   }
   .pass { color: var(--success); }
   .fail { color: var(--error); }
   .excellent { color: #D97706; font-weight: 800; }
   
   .silent-brand {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 12px;
       font-size: 0.95rem;
       color: var(--text-secondary);
       border-top: 1px solid var(--border-color);
       padding-top: 1.5rem;
       margin-top: 1rem;
   }
   .silent-brand img {
       height: 32px;
       width: auto;
   }
   
   /* Calculator Controls */
   .calculator-controls {
       margin-top: 3rem;
       display: flex;
       flex-wrap: wrap;
       gap: 1.25rem;
       justify-content: center;
   }
   .calc-btn {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       padding: 12px 24px;
       font-size: 1rem;
       font-weight: 700;
       border-radius: var(--radius-sm);
       cursor: pointer;
       border: none;
       transition: var(--transition);
   }
   .calc-btn:hover {
       transform: translateY(-2px);
       box-shadow: var(--shadow-md);
   }
   .back-btn {
       background: var(--dark-navy);
       color: #ffffff;
   }
   .back-btn:hover {
       background: var(--navy-gray);
   }
   .reset-btn {
       background: rgba(239, 68, 68, 0.08);
       color: var(--error);
       border: 1px solid rgba(239, 68, 68, 0.2);
   }
   .reset-btn:hover {
       background: var(--error);
       color: #ffffff;
       border-color: var(--error);
   }
   .export-btn {
       background: var(--primary);
       color: #ffffff;
   }
   .export-btn:hover {
       background: var(--primary-hover);
   }
   
   /* Modals */
   .modal {
       display: none;
       position: fixed;
       z-index: 2000;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       overflow: auto;
       background-color: rgba(11, 19, 43, 0.45);
       backdrop-filter: blur(6px);
   }
   .modal-content {
       background-color: var(--bg-card);
       margin: 10% auto;
       padding: 2.5rem;
       border: 1px solid var(--border-color);
       width: 90%;
       max-width: 500px;
       border-radius: var(--radius-md);
       box-shadow: var(--shadow-lg);
       position: relative;
       animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) ease-out;
   }
   .close-modal {
       color: var(--text-secondary);
       float: left;
       font-size: 28px;
       font-weight: bold;
       cursor: pointer;
       transition: var(--transition);
       line-height: 1;
   }
   .close-modal:hover {
       color: var(--text-primary);
       transform: scale(1.1);
   }
   .modal-body h3 {
       color: var(--primary);
       margin-top: 0;
       font-weight: 800;
       font-size: 1.4rem;
   }
   .formula-box {
       background: var(--bg-main);
       padding: 18px;
       border-radius: var(--radius-sm);
       margin: 15px 0;
       border: 1.5px dashed var(--border-color);
       font-family: 'IBM Plex Sans Arabic', monospace;
       direction: ltr;
       text-align: center;
       font-size: 1.1rem;
       font-weight: 700;
       color: var(--primary-hover);
   }
   
   /* Toast Notifications */
   #toast {
       visibility: hidden;
       min-width: 280px;
       background-color: var(--dark-navy);
       color: #ffffff;
       text-align: center;
       border-radius: var(--radius-sm);
       padding: 14px 20px;
       position: fixed;
       z-index: 2001;
       bottom: 30px;
       left: 50%;
       transform: translateX(-50%);
       font-size: 0.95rem;
       font-weight: 700;
       box-shadow: var(--shadow-lg);
       opacity: 0;
       transition: opacity 0.3s, bottom 0.3s;
   }
   #toast.show {
       visibility: visible;
       opacity: 1;
       bottom: 50px;
   }
   
   /* Footer Design */
   .site-footer-professional {
       background-color: var(--dark-navy);
       color: #E2E8F0;
       padding: 5rem 0 0 0;
       border-top: 5px solid var(--primary);
   }
   .footer-main-content {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 1.5rem;
   }
   .footer-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
       gap: 3.5rem;
       padding-bottom: 4rem;
   }
   .footer-column {
       display: flex;
       flex-direction: column;
   }
   .footer-logo {
       margin-bottom: 1rem;
   }
   .footer-logo img {
       height: 100px;
       width: auto;
       object-fit: contain;
   }
   .footer-heading {
       font-size: 1.25rem;
       font-weight: 800;
       color: #ffffff;
       margin: 0 0 1.5rem 0;
       position: relative;
       padding-bottom: 8px;
   }
   .footer-heading::after {
       content: '';
       position: absolute;
       bottom: 0;
       right: 0;
       width: 40px;
       height: 3px;
       background-color: var(--primary);
       border-radius: 20px;
   }
   .footer-text {
       font-size: 0.95rem;
       line-height: 1.8;
       color: #94A3B8;
       margin: 0;
   }
   
   /* Feedback Form Link */
   .contact-btn {
       background-color: var(--primary);
       color: #ffffff;
       padding: 12px 24px;
       border-radius: var(--radius-sm);
       text-decoration: none;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       font-weight: 700;
       margin-top: 1.25rem;
       transition: var(--transition);
       width: fit-content;
       border: none;
       box-shadow: 0 4px 10px rgba(5, 150, 105, 0.15);
   }
   .contact-btn:hover {
       background-color: var(--primary-hover);
       transform: translateY(-2px);
       box-shadow: 0 6px 15px rgba(5, 150, 105, 0.25);
       color: #ffffff;
   }
   
   .footer-copyright-area {
       background-color: #050B18;
       text-align: center;
       padding: 1.75rem;
       font-size: 0.9rem;
       border-top: 1px solid #1E293B;
       color: #64748B;
   }
   .footer-copyright-area p {
       margin: 0;
   }
   .disclaimer-text {
       font-size: 0.8rem;
       color: #475569;
       margin-top: 8px !important;
   }
   
   /* Responsive Media Queries */
   @media (max-width: 992px) {
       .how-to-grid {
           grid-template-columns: 1fr;
           gap: 3rem;
       }
       .image-container {
           max-width: 550px;
           margin: 0 auto;
       }
   }
   
   @media (max-width: 768px) {
       .nav-links {
           display: none; /* Mobile menu can be expanded in later phases */
       }
       .hero-content h1 {
           font-size: 2.2rem;
       }
       .section {
           padding: 3.5rem 0;
       }
       .subject-inputs-grid {
           grid-template-columns: 1fr 1fr;
           gap: 1.25rem;
           padding: 1.25rem;
       }
       .input-group input {
           max-width: 100%;
       }
       .subject-header {
           padding: 1rem 1.25rem;
       }
       .journey-stepper {
           max-width: 100%;
           padding: 0 10px;
       }
       .calc-btn {
           width: 100%;
           justify-content: center;
       }
   }

/* ==========================================================================
   Google AdSense Placement & Layout Shift (CLS) Prevention
   ========================================================================== */
.adsense-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: var(--radius-sm);
    margin: 2.5rem auto;
    padding: 15px;
    position: relative;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    clear: both;
    box-sizing: border-box;
}
.adsense-placeholder::before {
    content: 'مساحة إعلانية مخصصة (Google AdSense)';
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.adsense-placeholder::after {
    content: 'سيظهر الإعلان هنا تلقائياً دون التأثير على استقرار الصفحة وبما يوافق السياسات.';
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* Safe Zones: Guarantees at least 30px distance from buttons/inputs */
.adsense-safe-margin {
    margin-top: 3.5rem !important;
    margin-bottom: 3.5rem !important;
}

/* Standard dimensions for CLS (Cumulative Layout Shift) prevention */
.ads-top-banner {
    min-height: 90px;
    max-width: 728px;
    width: 100%;
}
.ads-in-feed {
    min-height: 250px;
    max-width: 728px;
    width: 100%;
}

/* Sticky anchor mobile ads wrapper */
.ads-sticky-mobile {
    display: none;
}

@media (max-width: 768px) {
    .ads-sticky-mobile {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1999;
        background-color: rgba(255, 255, 255, 0.98);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -4px 15px rgba(15, 23, 42, 0.08);
        padding: 6px 10px;
        min-height: 60px;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .ads-sticky-mobile-close {
        position: absolute;
        top: -14px;
        left: 14px;
        background-color: var(--dark-navy);
        color: #ffffff;
        border: none;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-sm);
        transition: var(--transition);
        z-index: 2000;
    }
    .ads-sticky-mobile-close:hover {
        background-color: var(--primary);
    }
    /* Add extra padding to body to prevent sticky ad covering footer/buttons on mobile */
    body {
        padding-bottom: 70px;
    }
}