/*
Theme Name: SaudiVATExpert Theme
Theme URI: https://saudivatexpert.com/
Author: SaudiVATExpert
Author URI: https://saudivatexpert.com/
Description: A premium, bilingual (English & Arabic) B2B tax consultancy theme for SaudiVATExpert.
Version: 1.0.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saudivatexpert
Domain Path: /languages
Tags: translation-ready, right-to-left-language-support, custom-menu, featured-images
*/

    /* -------------------------------------------------------------
       1. DESIGN SYSTEM VARIABLES & UTILITIES
       ------------------------------------------------------------- */
    :root {
      /* Brand Colors (HSL for opacity controls and color functions) */
      --primary-hsl: 143, 46%, 17%;      /* Dark Green (#173F26) */
      --secondary-hsl: 198, 67%, 65%;    /* Light Blue (#6BBEE2) */
      --whatsapp-hsl: 142, 70%, 49%;     /* WhatsApp Green (#25D366) */
      --gold-hsl: 38, 92%, 50%;          /* Warm Amber Gold */
      
      --primary: hsl(var(--primary-hsl));
      --primary-light: hsl(143, 40%, 25%);
      --primary-dark: hsl(143, 50%, 10%);
      --secondary: hsl(var(--secondary-hsl));
      --secondary-light: hsl(198, 67%, 75%);
      --whatsapp-green: hsl(var(--whatsapp-hsl));
      
      --bg-white: #FFFFFF;
      --bg-gray: #F8FAFC;                /* Slate 50 */
      --bg-slate-900: #0B0F19;           /* Custom Deep Navy/Slate for Dark theme */
      
      --text-dark: #0F172A;              /* Slate 900 */
      --text-muted: #475569;             /* Slate 600 */
      --border-color: #E2E8F0;           /* Slate 200 */
      
      --font-en: 'Inter', sans-serif;
      --font-ar: 'Cairo', sans-serif;
      
      --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      --transition-fast: all 0.2s ease;
      --canvas-zoom: 1;
      
      /* Glassmorphism Styles */
      --glass-bg: rgba(255, 255, 255, 0.75);
      --glass-border: rgba(255, 255, 255, 0.5);
      --glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.04);
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--font-en);
      background-color: var(--bg-white);
      color: var(--text-dark);
      overflow-x: hidden;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    body.lang-ar {
      font-family: var(--font-ar);
    }

    /* KEYFRAME ANIMATIONS */
    @keyframes float-y {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-12px); }
    }

    @keyframes pulse-ring {
      0% { transform: scale(0.95); opacity: 0.8; }
      50% { transform: scale(1.1); opacity: 0.4; }
      100% { transform: scale(0.95); opacity: 0.8; }
    }

    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes border-glow {
      0%, 100% { border-color: hsla(var(--secondary-hsl), 0.2); }
      50% { border-color: hsla(var(--secondary-hsl), 0.6); }
    }

    .animate-float {
      animation: float-y 6s ease-in-out infinite;
    }

    /* -------------------------------------------------------------
       2. FIGMA CANVAS CONTROLLER & TOOLBAR (PREVIEW EXCLUSIVE)
       ------------------------------------------------------------- */
    #canvas-controller {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 64px;
      background: var(--bg-slate-900);
      color: #F1F5F9;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 28px;
      z-index: 10000;
      border-bottom: 1px solid #1E293B;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    }

    .brand-meta {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .brand-meta strong {
      font-weight: 700;
      letter-spacing: -0.2px;
      background: linear-gradient(135deg, #FFFFFF 0%, #CBD5E1 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .brand-meta .badge {
      background: rgba(14, 165, 233, 0.15);
      color: #38BDF8;
      border: 1px solid rgba(14, 165, 233, 0.3);
      font-size: 11px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 99px;
      letter-spacing: 0.2px;
    }

    .view-modes {
      display: flex;
      background: #1E293B;
      border-radius: 99px;
      padding: 4px;
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .mode-btn {
      background: transparent;
      border: none;
      color: #94A3B8;
      padding: 8px 20px;
      border-radius: 99px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: var(--transition-smooth);
    }

    .mode-btn.active {
      background: #0F172A;
      color: #FFFFFF;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .canvas-actions {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .zoom-control {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #94A3B8;
      font-size: 13px;
    }

    .zoom-slider {
      width: 110px;
      height: 4px;
      border-radius: 2px;
      accent-color: var(--secondary);
      cursor: pointer;
    }

    .lang-toggle-btn {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #F1F5F9;
      padding: 7px 14px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
      font-size: 13px;
      transition: var(--transition-smooth);
    }

    .lang-toggle-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: var(--secondary);
      color: #FFFFFF;
    }

    /* -------------------------------------------------------------
       3. FIGMA CANVAS VIEW LAYOUT
       ------------------------------------------------------------- */
    #canvas-container {
      margin-top: 64px;
      background-color: #0B0F19; /* Figma Dark Mode Canvas Color */
      background-image: 
        radial-gradient(rgba(30, 41, 59, 0.5) 1.5px, transparent 1.5px),
        radial-gradient(rgba(30, 41, 59, 0.3) 1px, transparent 1px);
      background-size: 40px 40px, 20px 20px;
      background-position: 0 0, 10px 10px;
      min-height: calc(100vh - 64px);
      overflow: auto;
      padding: 80px 40px;
      display: flex;
      gap: 80px;
      justify-content: center;
      align-items: flex-start;
      transition: var(--transition-smooth);
    }

    /* Desktop Browser Frame simulation */
    .figma-frame {
      background: #FFFFFF;
      border-radius: 16px;
      width: 1280px;
      min-width: 1280px;
      box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.6);
      border: 1px solid #1E293B;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transform: scale(var(--canvas-zoom));
      transform-origin: top center;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .page-group {
      display: flex;
      flex-direction: column;
      gap: 24px;
      align-items: center;
    }

    .page-group-title {
      color: #94A3B8;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      background: #1E293B;
      padding: 6px 16px;
      border-radius: 99px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    .page-group-frames {
      display: flex;
      gap: 60px;
      align-items: flex-start;
    }

    /* Mobile Browser Frame simulation */
    .figma-frame.mobile-frame {
      width: 390px;
      min-width: 390px;
    }

    .frame-header {
      background: #1E293B;
      height: 48px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      gap: 20px;
      border-bottom: 1px solid #334155;
    }

    .window-dots {
      display: flex;
      gap: 8px;
    }

    .window-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
    }

    .window-dot.red { background: #EF4444; }
    .window-dot.yellow { background: #F59E0B; }
    .window-dot.green { background: #10B981; }

    .address-bar {
      background: #0F172A;
      color: #94A3B8;
      font-size: 11px;
      padding: 6px 32px;
      border-radius: 6px;
      flex-grow: 1;
      max-width: 600px;
      text-align: center;
      font-family: monospace;
      letter-spacing: 0.5px;
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .frame-tag {
      background: rgba(14, 165, 233, 0.1);
      color: var(--secondary-light);
      border: 1px solid rgba(14, 165, 233, 0.2);
      font-size: 11px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .frame-content {
      overflow-y: auto;
      max-height: 850px;
      position: relative;
    }

    /* -------------------------------------------------------------
       4. INTERACTIVE LIVE VIEW LAYOUT
       ------------------------------------------------------------- */
    #live-container {
      display: none;
      margin-top: 60px;
      min-height: calc(100vh - 60px);
    }

    /* -------------------------------------------------------------
       5. CORE BRANDED WEBSITE LAYOUT (SHARED BETWEEN VIEWS)
       ------------------------------------------------------------- */
    
    /* UNIVERSAL STYLES */
    /* UNIVERSAL NAVBAR */
    .sve-navbar {
      background: var(--glass-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 6%;
      border-bottom: 1px solid rgba(226, 232, 240, 0.8);
      box-shadow: var(--glass-shadow);
      position: sticky;
      top: 0;
      z-index: 1000;
      width: 100%;
      transition: var(--transition-smooth);
    }

    #live-container .sve-navbar {
      top: 60px;
    }

    .sve-nav-logo-img,
    .custom-logo,
    .custom-logo-link img {
      height: 60px !important;
      width: auto !important;
      max-width: 200px !important;
      object-fit: contain !important;
      display: block !important;
      transition: var(--transition-smooth);
    }

    .custom-logo-link {
      display: inline-block !important;
      height: 60px !important;
      max-width: 200px !important;
      overflow: hidden !important;
    }

    .sve-nav-logo-img:hover,
    .custom-logo:hover,
    .custom-logo-link img:hover {
      transform: scale(1.03);
    }

    .navbar-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      list-style: none;
    }

    .nav-links a {
      color: var(--text-dark);
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      transition: var(--transition-fast);
      position: relative;
      padding: 8px 0;
    }

    .nav-links a:hover,
    .nav-links a.active {
      color: var(--secondary);
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--secondary);
      transition: var(--transition-smooth);
    }

    .nav-links a:hover::after,
    .nav-links a.active::after {
      width: 100%;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    /* WhatsApp Button Component */
    .whatsapp-btn {
      background: var(--whatsapp-green);
      color: #FFFFFF;
      border: none;
      padding: 12px 24px;
      border-radius: 10px;
      font-weight: 700;
      font-size: 13.5px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      text-decoration: none;
      transition: var(--transition-smooth);
      box-shadow: 0 4px 14px rgba(21, 176, 85, 0.25);
    }

    .whatsapp-btn:hover {
      background: #119446;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(21, 176, 85, 0.35);
    }

    .inline-lang-toggle {
      background: transparent;
      border: 1px solid var(--border-color);
      color: var(--text-dark);
      padding: 7px 14px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      transition: var(--transition-smooth);
    }

    .inline-lang-toggle:hover {
      background: rgba(14, 165, 233, 0.05);
      border-color: var(--secondary);
      color: var(--secondary);
    }

    /* RTL NAV ALIGNMENT - browser handles naturally with dir=rtl on html */
    body.lang-ar .nav-links,
    body.lang-ar .nav-actions {
      /* flex-direction: row-reverse removed to prevent double-reversal */
    }

    /* PREMIUM HERO & HERO SECTION SPECIFICATION */
    .sve-hero {
      position: relative;
      height: 300px;
      min-height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden;
    }

    .sve-hero-split {
      position: relative;
      background-image: url('assets/images/hero-bg.png') !important;
      background-size: cover !important;
      background-position: center !important;
      padding: 30px 6% 30px 6%;
      height: 400px;
      max-height: 400px;
      min-height: 350px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #173F26;
      overflow: hidden;
      text-align: center;
    }

    .sve-hero-split::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.85) !important;
      z-index: 1;
    }

    body.lang-ar .sve-hero-split::before {
      background: rgba(255, 255, 255, 0.85) !important;
    }

    .sve-hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.85) !important; /* Bright white overlay to match homepage split hero readability */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px;
      z-index: 2;
    }

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

    .hero-content-left {
      max-width: 850px;
      margin: 0 auto;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .hero-tag {
      display: inline-block;
      padding: 6px 16px;
      background: rgba(23, 63, 38, 0.08);
      border: 1px solid rgba(23, 63, 38, 0.2);
      color: #173F26;
      border-radius: 99px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 24px;
    }

    .hero-content-left h1,
    .hero-content h1 {
      font-size: 46px;
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 24px;
      letter-spacing: -1px;
      color: #173F26;
    }

    body.lang-ar .hero-content-left h1,
    body.lang-ar .hero-content h1 {
      font-size: 42px;
      line-height: 1.45;
      letter-spacing: 0;
      color: #173F26;
    }

    .hero-content-left p,
    .hero-content p {
      font-size: 18px;
      line-height: 1.8;
      color: #173F26;
      margin-bottom: 36px;
      font-weight: 600; /* Semi-bold to make it extremely clear and easy to read */
    }

    .hero-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
    }

    .hero-secondary-btn {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: #FFFFFF;
      padding: 13px 26px;
      border-radius: 10px;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
      transition: var(--transition-smooth);
    }

    .hero-secondary-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: #FFFFFF;
      transform: translateY(-2px);
    }

    /* FLOATING COMPLIANCE WIDGET */
    .hero-content-right {
      display: flex;
      justify-content: flex-end;
    }

    .dashboard-widget {
      background: rgba(15, 23, 42, 0.55);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      padding: 32px;
      width: 440px;
      box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5);
      animation: float-y 6s ease-in-out infinite;
    }

    .widget-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .widget-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      font-weight: 700;
      color: #F8FAFC;
    }

    .pulse-indicator {
      width: 8px;
      height: 8px;
      background: #10B981;
      border-radius: 50%;
      position: relative;
    }

    .pulse-indicator::after {
      content: '';
      position: absolute;
      top: -4px;
      left: -4px;
      width: 16px;
      height: 16px;
      border: 2px solid #10B981;
      border-radius: 50%;
      animation: pulse-ring 2s infinite ease-in-out;
    }

    .widget-badge {
      font-size: 10px;
      font-weight: 800;
      color: #10B981;
      background: rgba(16, 185, 129, 0.1);
      padding: 3px 10px;
      border-radius: 99px;
      letter-spacing: 0.5px;
    }

    .widget-metric {
      margin-bottom: 24px;
    }

    .metric-label {
      font-size: 12px;
      color: #94A3B8;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }

    .metric-value {
      font-size: 22px;
      font-weight: 700;
      color: #F8FAFC;
    }

    /* STEP PROGRESS BAR */
    .widget-progress {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 24px;
    }

    .progress-steps {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      margin-bottom: 10px;
    }

    .step-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #334155;
      z-index: 2;
    }

    .step-dot.active {
      background: var(--secondary);
      box-shadow: 0 0 8px var(--secondary);
    }

    .step-line {
      height: 2px;
      background: #334155;
      flex-grow: 1;
      margin: 0 -2px;
      z-index: 1;
    }

    .step-line.active {
      background: var(--secondary);
    }

    .progress-labels {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: #94A3B8;
      font-weight: 600;
    }

    .widget-data-rows {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .data-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
    }

    .row-label {
      color: #CBD5E1;
    }

    .row-value {
      padding: 3px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
    }

    .badge-green { color: #10B981; background: rgba(16, 185, 129, 0.1); }
    .badge-blue { color: #38BDF8; background: rgba(56, 189, 248, 0.1); }
    .badge-gold { color: #F59E0B; background: rgba(245, 158, 11, 0.1); }

    /* SECTION LAYOUTS */
    .sve-section {
      padding: 24px 6% !important;
      width: 100%;
    }

    .sve-section.gray-bg {
      background: var(--bg-gray);
    }

    .section-header {
      max-width: 700px;
      margin: 0 auto 20px auto;
      text-align: center;
    }

    .section-header h2 {
      color: var(--primary);
      font-size: 36px;
      font-weight: 800;
      margin-bottom: 18px;
      letter-spacing: -0.5px;
    }

    body.lang-ar .section-header h2 {
      font-size: 32px;
      line-height: 1.45;
    }

    .section-header p {
      color: var(--text-muted);
      font-size: 16.5px;
      line-height: 1.6;
    }

    /* SERVICES GRID CARD DESIGNS */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 36px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .service-card {
      background: var(--bg-white);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 24px 24px;
      transition: var(--transition-smooth);
      box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.02);
      position: relative;
      overflow: hidden;
    }

    .service-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
      opacity: 0;
      transition: var(--transition-smooth);
    }

    .service-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 36px -4px rgba(15, 23, 42, 0.08);
      border-color: rgba(14, 165, 233, 0.3);
      animation: border-glow 4s infinite ease-in-out;
    }

    .service-card:hover::before {
      opacity: 1;
    }

    .card-icon {
      width: 52px;
      height: 52px;
      border-radius: 12px;
      background: rgba(14, 165, 233, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--secondary);
      margin-bottom: 28px;
      transition: var(--transition-smooth);
    }

    .service-card:hover .card-icon {
      background: var(--secondary);
      color: #FFFFFF;
      transform: rotate(5deg) scale(1.05);
    }

    .service-card h3 {
      color: var(--primary);
      font-size: 21px;
      font-weight: 700;
      margin-bottom: 14px;
      letter-spacing: -0.2px;
    }

    .service-card p {
      color: var(--text-muted);
      font-size: 14px;
      line-height: 1.7;
    }

    /* WHY CHOOSE US GRID CARD DESIGNS */
    .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .why-card {
      background: var(--bg-white);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 16px;
      display: flex;
      gap: 20px;
      transition: var(--transition-smooth);
    }

    .why-card:hover {
      border-color: rgba(14, 165, 233, 0.3);
      transform: translateY(-4px);
      box-shadow: 0 12px 20px -2px rgba(15, 23, 42, 0.04);
    }

    .why-card .card-icon {
      margin-bottom: 0;
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border-radius: 10px;
    }

    .why-card-content h4 {
      color: var(--primary);
      font-size: 16.5px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .why-card-content p {
      color: var(--text-muted);
      font-size: 13.5px;
      line-height: 1.6;
    }

    /* CLOSING BANNER SECTION */
    .closing-cta {
      position: relative;
      text-align: center;
      padding: 24px 5% !important;
      border-top: 1px solid var(--border-color);
      color: #FFFFFF;
      overflow: hidden;
    }

    .closing-cta::before {
      content: '';
      position: absolute;
      top: -15px;
      left: -15px;
      right: -15px;
      bottom: -15px;
      background-image: url('assets/images/hero-bg.png');
      background-size: cover;
      background-position: center;
      filter: blur(4px); /* Soft blur to blend background logo text */
      z-index: 1;
    }

    .closing-cta::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(23, 63, 38, 0.85); /* Rich Dark Green overlay */
      z-index: 2;
    }

    .closing-cta-content {
      position: relative;
      z-index: 3;
      max-width: 800px;
      margin: 0 auto;
    }

    .closing-cta h2 {
      color: #FFFFFF !important;
      font-size: 32px;
      font-weight: 800;
      margin-bottom: 16px;
      letter-spacing: -0.5px;
    }

    body.lang-ar .closing-cta h2 {
      font-size: 34px;
      line-height: 1.4;
    }

    .closing-cta p {
      color: #CBD5E1;
      font-size: 17px;
      margin-bottom: 36px;
      max-width: 680px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.7;
    }

    .closing-cta .whatsapp-btn {
      padding: 15px 32px;
      font-size: 15px;
    }

    /* ABOUT US SPECIFIC ELEMENTS */
    .founders-section {
      max-width: 900px;
      margin: 0 auto;
    }

    .founders-profile {
      background: var(--bg-white);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      padding: 52px;
      display: flex;
      gap: 48px;
      align-items: center;
      box-shadow: 0 15px 30px -5px rgba(15, 23, 42, 0.03);
      position: relative;
    }

    .founders-profile::after {
      content: '';
      position: absolute;
      width: 80px;
      height: 80px;
      background: radial-gradient(circle, rgba(14, 165, 233, 0.1) 0%, transparent 70%);
      top: -20px;
      right: -20px;
      pointer-events: none;
    }

    .profile-img-container {
      flex-shrink: 0;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      font-size: 76px;
      font-weight: 800;
      border: 6px solid var(--bg-gray);
      box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
      position: relative;
    }

    .profile-img-container::before {
      content: '';
      position: absolute;
      top: -8px;
      left: -8px;
      right: -8px;
      bottom: -8px;
      border-radius: 50%;
      border: 2px dashed rgba(14, 165, 233, 0.3);
    }

    .profile-details h3 {
      color: var(--primary);
      font-size: 26px;
      font-weight: 800;
      margin-bottom: 8px;
      letter-spacing: -0.2px;
    }

    .profile-details .title {
      color: var(--secondary);
      font-weight: 700;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 24px;
      display: inline-block;
      padding: 3px 12px;
      background: rgba(14, 165, 233, 0.08);
      border-radius: 6px;
    }

    .profile-details p {
      color: var(--text-dark);
      font-size: 15.5px;
      line-height: 1.8;
    }

    .core-values-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      max-width: 1000px;
      margin: 60px auto 0 auto;
    }

    .value-block {
      background: var(--bg-white);
      border-left: 5px solid var(--secondary);
      padding: 28px;
      border-radius: 0 12px 12px 0;
      box-shadow: 0 6px 15px -3px rgba(15, 23, 42, 0.02);
      transition: var(--transition-smooth);
    }

    .value-block:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 24px -5px rgba(15, 23, 42, 0.05);
      border-left-color: var(--primary);
    }

    body.lang-ar .value-block {
      border-left: none;
      border-right: 5px solid var(--secondary);
      border-radius: 12px 0 0 12px;
    }

    body.lang-ar .value-block:hover {
      border-right-color: var(--primary);
    }

    .value-block h4 {
      color: var(--primary);
      font-size: 19px;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .value-block p {
      color: var(--text-muted);
      font-size: 14px;
      line-height: 1.7;
    }

    /* REGISTER ONBOARDING TIMELINE & PORTAL */
    .register-portal {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 80px 24px;
      background: var(--bg-gray);
    }

    /* ONBOARDING TIMELINE CONTAINER */
    .onboarding-timeline {
      width: 100%;
      max-width: 800px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 48px;
      position: relative;
      padding: 0 10px;
    }

    .onboarding-timeline::before {
      content: '';
      position: absolute;
      top: 22px;
      left: 30px;
      right: 30px;
      height: 3px;
      background: #E2E8F0;
      z-index: 1;
    }

    .timeline-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 2;
      flex: 1;
    }

    .step-number {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #FFFFFF;
      border: 3px solid #E2E8F0;
      color: #94A3B8;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 15px;
      margin-bottom: 12px;
      transition: var(--transition-smooth);
    }

    .timeline-step.active .step-number {
      border-color: var(--primary);
      background: var(--primary);
      color: #FFFFFF;
      box-shadow: 0 0 0 4px rgba(17, 56, 33, 0.15);
    }

    .timeline-step.completed .step-number {
      border-color: var(--secondary);
      background: var(--secondary);
      color: #FFFFFF;
    }

    .step-text {
      font-size: 13px;
      font-weight: 700;
      color: #94A3B8;
      text-align: center;
      transition: var(--transition-smooth);
    }

    .timeline-step.active .step-text {
      color: var(--primary);
    }

    .timeline-step.completed .step-text {
      color: var(--text-dark);
    }

    .portal-container {
      width: 100%;
      max-width: 800px;
      background: var(--bg-white);
      border-radius: 20px;
      box-shadow: 0 30px 60px -10px rgba(15, 23, 42, 0.08);
      border: 1px solid var(--border-color);
      overflow: hidden;
    }

    .portal-header {
      background: var(--primary);
      color: #FFFFFF;
      padding: 32px 40px;
      border-bottom: 4px solid var(--secondary);
      position: relative;
    }

    .portal-header h3 {
      font-size: 22px;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .portal-header p {
      color: #CBD5E1;
      font-size: 14px;
      line-height: 1.5;
    }

    .portal-body {
      padding: 0; /* Full frame overlay */
      height: 800px; /* Perfect form height */
      position: relative;
      overflow: hidden;
    }

    .portal-body iframe {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* UNIVERSAL FOOTER */
    .sve-footer {
      background: var(--primary);
      color: #FFFFFF;
      padding: 60px 5% 30px 5%;
      border-top: 3px solid var(--secondary);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.5fr;
      gap: 48px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .footer-col h5 {
      color: var(--secondary);
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 24px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .footer-col p {
      color: #CBD5E1;
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .footer-links {
      list-style: none;
    }

    .footer-links li {
      margin-bottom: 12px;
    }

    .footer-links a {
      color: #CBD5E1;
      text-decoration: none;
      font-size: 14px;
      transition: var(--transition-smooth);
    }

    .footer-links a:hover {
      color: #FFFFFF;
      padding-left: 4px;
    }

    body.lang-ar .footer-links a:hover {
      padding-left: 0;
      padding-right: 4px;
    }

    .contact-info li {
      color: #CBD5E1;
      font-size: 13px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .contact-info svg {
      color: var(--secondary);
      flex-shrink: 0;
    }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 30px;
      margin-top: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: #94A3B8;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
    }

    /* RTL OVERRIDES FOR FOOTER */
    body.lang-ar .footer-grid {
      direction: rtl;
    }

    /* -------------------------------------------------------------
       6. UTILITY RESPONSIVE CLASSES (STANDARD BROWSER RENDER)
       ------------------------------------------------------------- */
    /* -------------------------------------------------------------
       6. MOBILE MENU DRAWERS & BUTTONS (GLOBAL DEFINITIONS)
       ------------------------------------------------------------- */
    .mobile-toggle-btn {
      display: none;
      flex-direction: column;
      justify-content: space-between;
      width: 26px;
      height: 18px;
      background: transparent;
      border: none;
      cursor: pointer;
      z-index: 1100;
      padding: 0;
    }

    .mobile-toggle-btn .bar {
      width: 100%;
      height: 2.5px;
      background-color: var(--primary);
      border-radius: 2px;
      transition: var(--transition-smooth);
    }

    /* Hamburger Animation to 'X' */
    .mobile-menu-open .mobile-toggle-btn .bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }
    .mobile-menu-open .mobile-toggle-btn .bar:nth-child(2) {
      opacity: 0;
    }
    .mobile-menu-open .mobile-toggle-btn .bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }

    .mobile-nav-drawer {
      position: fixed;
      top: 140px; /* 80px sticky navbar + 60px developer bar */
      left: 0;
      width: 100%;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 2px solid var(--secondary);
      padding: 32px 6%;
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
      display: flex;
      flex-direction: column;
      gap: 24px;
      transform: translateY(-120%);
      opacity: 0;
      pointer-events: none;
      transition: var(--transition-smooth);
      z-index: 9999;
    }

    .mobile-nav-drawer.open {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .mobile-menu-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(15, 23, 42, 0.4);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      opacity: 0;
      pointer-events: none;
      transition: var(--transition-smooth);
      z-index: 9998;
    }

    .mobile-menu-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

    .mobile-nav-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .mobile-nav-links a {
      color: var(--text-dark);
      text-decoration: none;
      font-size: 16px;
      font-weight: 700;
      transition: var(--transition-fast);
      display: block;
      padding: 10px 0;
      border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    }

    .mobile-nav-links a:hover,
    .mobile-nav-links a.active {
      color: var(--secondary);
      border-bottom-color: var(--secondary);
    }

    .mobile-nav-actions {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 10px;
    }

    .mobile-nav-actions .whatsapp-btn {
      width: 100%;
      justify-content: center;
      padding: 14px;
    }

    .mobile-nav-actions .inline-lang-toggle {
      width: 100%;
      padding: 12px;
      font-size: 14px;
      border-color: var(--border-color);
    }

    /* RTL overrides for mobile menu */
    body.lang-ar .sve-navbar {
      direction: rtl;
    }
    body.lang-ar .mobile-nav-drawer {
      direction: rtl;
    }
    body.lang-ar .mobile-nav-links a {
      text-align: right;
    }
    .mobile-nav-drawer .whatsapp-btn {
      width: 100%;
      justify-content: center;
      margin-top: auto;
    }

    .mobile-menu-toggle {
      display: none;
    }

    /* Hamburger icon animated */
    .hamburger-icon {
      width: 24px;
      height: 18px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .hamburger-line {
      width: 100%;
      height: 2px;
      background-color: var(--text-dark);
      border-radius: 2px;
      transition: var(--transition-fast);
    }

    .mobile-menu-toggle.open .hamburger-line:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }

    .mobile-menu-toggle.open .hamburger-line:nth-child(2) {
      opacity: 0;
    }

    .mobile-menu-toggle.open .hamburger-line:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }

    @media (max-width: 1024px) {
      .services-grid, .why-grid, .core-values-container {
        grid-template-columns: repeat(2, 1fr);
      }
      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .services-grid, .why-grid, .core-values-container, .footer-grid {
        grid-template-columns: 1fr;
      }
      .founders-profile {
        flex-direction: column;
        text-align: center;
      }
      .nav-links {
        display: none !important;
      }
      .mobile-menu-toggle {
        display: flex;
      }
      .inline-lang-toggle {
        display: none;
      }
      .sve-hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
      }
      .hero-actions {
        justify-content: center;
      }
      .dashboard-widget {
        width: 100%;
        max-width: 440px;
      }
      .hero-content-right {
        justify-content: center;
      }
      .sve-nav-logo-img,
      .custom-logo,
      .custom-logo-link img {
        height: 45px !important;
        width: auto !important;
        max-width: 160px !important;
      }

      .custom-logo-link {
        height: 45px !important;
        max-width: 160px !important;
      }
    }

    /* -------------------------------------------------------------
       8. FIGMA CANVAS MOBILE SPECIFIC OVERRIDES (.mobile-view)
       ------------------------------------------------------------- */
    .mobile-view .nav-links,
    .mobile-view .nav-actions {
      display: none !important;
    }
    .mobile-view .mobile-toggle-btn {
      display: flex;
    }
    .mobile-view .sve-navbar {
      padding: 0 16px;
      height: 64px;
    }
    .mobile-view .mobile-nav-drawer {
      position: absolute;
      top: 64px;
    }
    .mobile-view .sve-nav-logo-img,
    .mobile-view .custom-logo,
    .mobile-view .custom-logo-link img {
      height: 36px !important;
      width: auto !important;
      max-width: 140px !important;
    }

    .mobile-view .custom-logo-link {
      height: 36px !important;
      max-width: 140px !important;
    }

    /* Grid Stacking in mobile frames */
    .mobile-view .services-grid, 
    .mobile-view .why-grid, 
    .mobile-view .core-values-container, 
    .mobile-view .footer-grid {
      grid-template-columns: 1fr !important;
      gap: 20px;
    }

    .mobile-view .sve-section {
      padding: 40px 16px;
    }

    /* Hero section styling in mobile frames */
    .mobile-view .sve-hero-container {
      grid-template-columns: 1fr;
      gap: 32px;
      text-align: center;
    }
    .mobile-view .sve-hero-split {
      padding: 40px 16px 56px 16px;
      min-height: auto;
    }
    .mobile-view .sve-hero {
      min-height: auto;
      padding: 40px 16px;
    }
    .mobile-view .hero-content-left h1,
    .mobile-view .hero-content h1 {
      font-size: 24px !important;
      line-height: 1.3;
    }
    body.lang-ar .mobile-view .hero-content-left h1,
    body.lang-ar .mobile-view .hero-content h1 {
      font-size: 22px !important;
      line-height: 1.4;
    }
    .mobile-view .hero-content-left p,
    .mobile-view .hero-content p {
      font-size: 13.5px;
      margin-bottom: 20px;
      line-height: 1.6;
    }
    .mobile-view .hero-actions {
      flex-direction: column;
      gap: 10px;
      width: 100%;
    }
    .mobile-view .hero-actions .whatsapp-btn,
    .mobile-view .hero-actions .hero-secondary-btn {
      width: 100%;
      justify-content: center;
      padding: 12px;
      font-size: 13px;
    }

    /* Compliance Dashboard widget in mobile frames */
    .mobile-view .dashboard-widget {
      width: 100%;
      max-width: 100%;
      padding: 20px 16px;
    }
    .mobile-view .metric-value {
      font-size: 18px;
    }
    .mobile-view .progress-labels {
      font-size: 10px;
    }

    /* Founders in mobile frames */
    .mobile-view .founders-profile {
      flex-direction: column;
      text-align: center;
      padding: 28px 16px;
      gap: 20px;
    }
    .mobile-view .profile-img-container {
      width: 100px;
      height: 100px;
      font-size: 44px;
      border-width: 3px;
    }
    .mobile-view .profile-details h3 {
      font-size: 18px;
    }
    .mobile-view .profile-details p {
      font-size: 14px;
      line-height: 1.6;
    }

    /* Core Values in mobile frames */
    .mobile-view .core-values-container {
      margin-top: 24px;
      gap: 16px;
    }
    .mobile-view .value-block {
      padding: 16px;
    }

    /* Register Timeline vertical stepper in mobile frames */
    .mobile-view .onboarding-timeline {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      padding-left: 16px;
      margin-bottom: 24px;
    }
    .mobile-view .onboarding-timeline::before {
      top: 16px;
      left: 31px;
      width: 3px;
      height: calc(100% - 32px);
    }
    body.lang-ar .mobile-view .onboarding-timeline {
      padding-left: 0;
      padding-right: 16px;
      align-items: flex-end;
    }
    body.lang-ar .mobile-view .onboarding-timeline::before {
      left: auto;
      right: 31px;
    }
    .mobile-view .timeline-step {
      flex-direction: row;
      gap: 12px;
      align-items: center;
      text-align: left;
      width: 100%;
    }
    body.lang-ar .mobile-view .timeline-step {
      flex-direction: row-reverse;
      text-align: right;
    }
    .mobile-view .step-number {
      margin-bottom: 0;
      width: 30px;
      height: 30px;
      font-size: 11px;
      flex-shrink: 0;
    }
    .mobile-view .step-text {
      font-size: 12px;
    }

    /* Portal Container Form styling in mobile frames */
    .mobile-view .register-portal {
      padding: 32px 12px;
    }
    .mobile-view .portal-header {
      padding: 20px 16px;
    }
    .mobile-view .portal-header h3 {
      font-size: 18px;
    }
    .mobile-view .portal-body {
      padding: 0;
      height: 800px;
      position: relative;
      overflow: hidden;
    }
    .mobile-view .portal-body iframe {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* Closing CTA in mobile frames */
    .mobile-view .closing-cta {
      padding: 48px 16px;
    }
    .mobile-view .closing-cta h2 {
      font-size: 24px !important;
    }
    .mobile-view .closing-cta p {
      font-size: 13.5px;
      margin-bottom: 20px;
    }

    /* Footer Bottom in mobile frames */
    .mobile-view .footer-bottom {
      flex-direction: column;
      gap: 12px;
      text-align: center;
      padding-top: 20px;
      margin-top: 24px;
    }