/* ============================================================
   Mofid Landing Page — Pure CSS (no Tailwind)
   ============================================================ */

/* ---------- CSS Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:root {
  --current-font-family: 'Montserrat', system-ui, sans-serif;
  --color-primary: #0A0A0A;
  --color-primary-100: #E8E8E8;
  --color-primary-600: #8C8C8C;
  --color-primary-800: #0A0A0A;
  --color-bg: #FFFFFF;
  --color-page-bg: #F5F5F5;
  --color-text: #0A0A0A;
  --color-text-muted: #757575;
  --color-border: #E5E5E5;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --radius: 0.5rem;
  --container-padding: 16px;
  --header-height: 72px;
}
@media (min-width: 768px) { :root { --container-padding: 32px; } }
@media (min-width: 1024px) { :root { --container-padding: 48px; } }
@media (min-width: 1280px) { :root { --container-padding: 64px; } }

body {
  font-family: var(--current-font-family);
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
  line-height: 1.5;
}
[dir="rtl"] { direction: rtl; text-align: right; }
img { max-width: 100%; height: auto; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
a { text-decoration: none; color: inherit; }
input, textarea { font-family: inherit; }
ul { list-style: none; }

/* ---------- Font Faces ---------- */
@font-face { font-family:'Montserrat'; src:url('../assets/fonts/Montserrat-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../assets/fonts/Montserrat-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../assets/fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../assets/fonts/Montserrat-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('../assets/fonts/Montserrat-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Almarai'; src:url('../assets/fonts/Almarai-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Almarai'; src:url('../assets/fonts/Almarai-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

/* ---------- Container ---------- */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: var(--container-padding); padding-right: var(--container-padding); }

/* ---------- Utility ---------- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.hidden { display: none !important; }
.text-center { text-align: center; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Animations ---------- */
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideInLeft { from { transform:translateX(-100%); } to { transform:translateX(0); } }
@keyframes slideInRight { from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes pulse { 0%{opacity:1} 50%{opacity:.5} 100%{opacity:1} }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes tickerRTL { 0% { transform: translateX(0); } 100% { transform: translateX(50%); } }
@keyframes typewriterCursor { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.animate-fade-in-up { animation: fadeInUp .6s ease-out forwards; }
.animate-fade-in { animation: fadeIn .5s ease-out forwards; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-bounce { animation: bounce .6s ease-in-out infinite; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .6s ease-out, transform .6s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 50; transition: all .3s; }
.header-inner { transition: all .3s; padding: 1rem 0; }
.header-scrolled .header-inner {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,.2);
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.05);
  margin: 0.75rem 1rem;
  padding: .75rem 0;
}
.header-content { display: flex; align-items: center; justify-content: space-between; padding: 0 .5rem; }
.header-logo { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.header-logo svg { height: 24px; width: auto; }
@media(min-width:768px) { .header-logo svg { height: 28px; } }

/* Nav */
.header-nav { display: none; gap: 1rem; align-items: center; }
@media(min-width:768px) { .header-nav { display: flex; } }
.nav-dropdown-trigger { position: relative; padding: .375rem .75rem; border-radius: .75rem; font-size: .875rem; font-weight: 500; color: var(--color-primary); display: flex; align-items: center; gap: .25rem; transition: all .2s; }
.nav-dropdown-trigger:hover { background: rgba(255,255,255,.2); }
.nav-link { padding: .375rem .75rem; border-radius: .75rem; font-size: .875rem; font-weight: 500; color: var(--color-primary); transition: all .2s; }
.nav-link:hover { background: rgba(255,255,255,.2); }

/* Dropdown Panel */
.dropdown-panel { position: absolute; top: 100%; left: 0; min-width: 380px; background: rgba(255,255,255,.95); backdrop-filter: blur(20px); border-radius: 1rem; border: 1px solid rgba(255,255,255,.4); box-shadow: 0 20px 50px -12px rgba(0,0,0,.15); padding: .75rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .2s ease; z-index: 100; }
.dropdown-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
[dir="rtl"] .dropdown-panel { left: auto; right: 0; }
.dropdown-item { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem; border-radius: .75rem; transition: background .15s; }
.dropdown-item:hover { background: rgba(0,0,0,.03); }
.dropdown-item.highlighted { background: linear-gradient(135deg, #eff6ff, #f5f3ff); border: 1px solid rgba(0,0,0,.05); }
.dropdown-icon { width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--color-gray-100); color: var(--color-gray-600); }
.dropdown-item.highlighted .dropdown-icon { background: linear-gradient(135deg, #3b82f6, #7c3aed); color: #fff; }
.dropdown-item-text h4 { font-size: .875rem; font-weight: 600; color: var(--color-gray-900); margin-bottom: .125rem; }
.dropdown-item-text p { font-size: .75rem; color: var(--color-gray-500); line-height: 1.4; }
.badge-best { font-size: .625rem; background: var(--color-primary); color: #fff; padding: .125rem .5rem; border-radius: 9999px; margin-left: .5rem; }
.badge-soon { font-size: .625rem; background: #dbeafe; color: #1d4ed8; padding: .125rem .5rem; border-radius: 9999px; margin-left: .5rem; }

/* Header right */
.header-right { display: flex; align-items: center; gap: .5rem; }
.lang-dropdown { position: relative; }
.lang-btn { display: flex; align-items: center; gap: .25rem; padding: .375rem .5rem; border-radius: 9999px; font-size: .875rem; font-weight: 500; color: var(--color-gray-600); transition: all .2s; }
.lang-btn:hover { color: var(--color-gray-900); background: rgba(255,255,255,.2); }
.lang-btn img { width: 16px; height: 12px; border-radius: 2px; }
.lang-menu { position: absolute; top: calc(100% + .25rem); right: 0; min-width: 7rem; background: rgba(255,255,255,.9); backdrop-filter: blur(20px); border-radius: .75rem; border: 1px solid rgba(255,255,255,.4); box-shadow: 0 10px 25px rgba(0,0,0,.1); padding: .25rem 0; opacity: 0; visibility: hidden; transform: translateY(4px); transition: all .2s; z-index: 100; }
.lang-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
[dir="rtl"] .lang-menu { right: auto; left: 0; }
.lang-option { display: flex; align-items: center; gap: .5rem; padding: .375rem .75rem; font-size: .875rem; width: 100%; transition: background .15s; color: var(--color-gray-600); }
.lang-option:hover, .lang-option.active { background: rgba(255,255,255,.6); color: var(--color-gray-900); }
.lang-option img { width: 16px; height: 12px; border-radius: 2px; }

.header-btns { display: none; gap: .25rem; align-items: center; }
@media(min-width:768px) { .header-btns { display: flex; } }
.btn-signin { background: var(--color-gray-200); color: var(--color-gray-700); padding: .375rem 1rem; border-radius: 9999px; font-weight: 500; font-size: .875rem; transition: all .2s; white-space: nowrap; }
.btn-signin:hover { background: rgba(255,255,255,.4); }
.btn-getstarted { background: var(--color-primary); color: #fff; padding: .375rem 1rem; border-radius: 9999px; font-weight: 500; font-size: .875rem; transition: all .2s; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.btn-getstarted:hover { opacity: .9; }

/* Mobile menu toggle */
.mobile-menu-btn { display: flex; padding: .375rem; border-radius: .75rem; transition: background .2s; }
.mobile-menu-btn:hover { background: rgba(255,255,255,.2); }
.mobile-menu-btn svg { width: 1.25rem; height: 1.25rem; color: var(--color-gray-600); }
@media(min-width:768px) { .mobile-menu-btn { display: none; } }

/* Mobile Sidebar */
.mobile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 40; opacity: 0; visibility: hidden; transition: all .3s; }
.mobile-overlay.open { opacity: 1; visibility: visible; }
.mobile-sidebar { position: fixed; top: 0; left: 0; width: 100%; max-width: 24rem; height: 100%; background: #fff; box-shadow: 0 25px 50px rgba(0,0,0,.25); z-index: 50; transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1); overflow-y: auto; }
.mobile-sidebar.open { transform: translateX(0); }
[dir="rtl"] .mobile-sidebar { left: auto; right: 0; transform: translateX(100%); }
[dir="rtl"] .mobile-sidebar.open { transform: translateX(0); }
@media(min-width:768px) { .mobile-sidebar, .mobile-overlay { display: none !important; } }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; border-bottom: 1px solid var(--color-gray-100); }
.sidebar-close { padding: .5rem; border-radius: 9999px; transition: background .2s; }
.sidebar-close:hover { background: var(--color-gray-100); }
.sidebar-close svg { width: 1.5rem; height: 1.5rem; color: var(--color-gray-600); }
.sidebar-body { padding: 1.5rem 1.25rem; }
.sidebar-section-title { font-size: .75rem; font-weight: 600; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1.25rem; }
.sidebar-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border-radius: 1rem; transition: background .2s; width: 100%; text-align: left; margin-bottom: .75rem; }
.sidebar-item:hover { background: var(--color-gray-50); }
[dir="rtl"] .sidebar-item { text-align: right; }
.sidebar-item-icon { width: 3rem; height: 3rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--color-gray-100); }
.sidebar-item-name { font-weight: 600; color: var(--color-gray-900); font-size: .875rem; }
.sidebar-item-desc { font-size: .8125rem; color: var(--color-gray-600); margin-top: .25rem; line-height: 1.4; }
.sidebar-footer { padding: 1.25rem; border-top: 1px solid var(--color-gray-100); }
.sidebar-langs { display: grid; gap: .75rem; margin-bottom: 1rem; }
.sidebar-lang-btn { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: .75rem; transition: all .2s; font-weight: 500; }
.sidebar-lang-btn.active { background: var(--color-primary); color: #fff; box-shadow: 0 4px 6px rgba(0,0,0,.1); }
.sidebar-lang-btn:not(.active) { background: var(--color-gray-50); color: var(--color-gray-700); }
.sidebar-lang-btn img { width: 24px; height: 18px; border-radius: 2px; }
.sidebar-cta { display: flex; flex-direction: column; gap: .75rem; }
.sidebar-cta .btn-outline { padding: 1rem; border-radius: 1rem; border: 1px solid var(--color-gray-300); color: var(--color-gray-700); font-weight: 500; text-align: center; transition: background .2s; }
.sidebar-cta .btn-outline:hover { background: var(--color-gray-50); }
.sidebar-cta .btn-primary { padding: 1rem; border-radius: 1rem; background: var(--color-primary); color: #fff; font-weight: 500; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,.1); }

/* ============================================================
   HERO
   ============================================================ */
.hero-section { position: relative; min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); }
.hero-content { width: 100%; padding-top: 5rem; display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 10; position: relative; }
@media(min-width:1024px) { .hero-content { padding-top: 8rem; } }
.hero-bg-blob { position: absolute; border-radius: 9999px; filter: blur(48px); opacity: .1; animation: breathe 4s ease-in-out infinite; }
.hero-bg-blob-1 { top: 25%; left: 25%; width: 12rem; height: 12rem; background: #bfdbfe; }
.hero-bg-blob-2 { bottom: 25%; right: 25%; width: 16rem; height: 16rem; background: #e9d5ff; animation-delay: 2s; }
@media(min-width:640px) { .hero-bg-blob-1 { width: 18rem; height: 18rem; } .hero-bg-blob-2 { width: 24rem; height: 24rem; } }

.hero-inner { text-align: center; max-width: 56rem; margin: 0 auto; padding: 2rem 1rem; }
@media(min-width:1024px) { .hero-inner { padding: 4rem 1rem; } }
.hero-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 9999px; background: rgba(255,255,255,.8); backdrop-filter: blur(4px); border: 1px solid var(--color-gray-200); color: var(--color-gray-700); font-size: .8125rem; font-weight: 500; margin-bottom: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
@media(min-width:640px) { .hero-badge { font-size: .875rem; margin-bottom: 2rem; } }
.hero-badge svg { width: 1rem; height: 1rem; }
@media(min-width:640px) { .hero-badge svg { width: 1.25rem; height: 1.25rem; } }

.hero-title { font-size: 1.5rem; font-weight: 600; color: var(--color-gray-900); margin-bottom: 1rem; line-height: 1.2; }
@media(min-width:640px) { .hero-title { font-size: 2.25rem; margin-bottom: 1.5rem; } }
@media(min-width:1024px) { .hero-title { font-size: 3.75rem; } }
.typewriter-wrapper { display: block; margin-top: .5rem; min-height: 1.2em; }
.typewriter-text { background: linear-gradient(to left, #2563eb, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 600; }
.typewriter-cursor { display: inline-block; width: 2px; height: 1em; background: #7c3aed; vertical-align: text-bottom; animation: typewriterCursor .8s infinite; margin-left: 2px; }

.hero-desc { font-size: 1rem; color: var(--color-gray-600); margin-bottom: 1.5rem; max-width: 42rem; margin-left: auto; margin-right: auto; line-height: 1.6; }
@media(min-width:640px) { .hero-desc { font-size: 1.125rem; margin-bottom: 2rem; } }
@media(min-width:1024px) { .hero-desc { font-size: 1.25rem; } }

.hero-buttons { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; }
@media(min-width:768px) { .hero-buttons { flex-direction: row; gap: 1rem; } }
.btn-hero-primary { width: 100%; background: var(--color-gray-900); color: #fff; padding: .75rem 2rem; border-radius: 9999px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: .75rem; transition: all .2s; box-shadow: 0 4px 6px rgba(0,0,0,.1); }
@media(min-width:640px) { .btn-hero-primary { width: auto; } }
.btn-hero-primary:hover { box-shadow: 0 10px 25px rgba(59,130,246,.25); }
.btn-hero-secondary { width: 100%; background: var(--color-primary-100); color: var(--color-gray-900); padding: .75rem 2rem; border-radius: 9999px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: .75rem; transition: all .2s; }
@media(min-width:640px) { .btn-hero-secondary { width: auto; } }
.btn-hero-secondary:hover { color: #000; }
.btn-hero-secondary svg { width: 1rem; height: 1rem; }

/* ============================================================
   CHAT SECTION
   ============================================================ */
.chat-wrapper { position: relative; z-index: 10; width: 100%; flex: 1; background: var(--color-bg); }
.chat-outer { padding: .25rem; background: linear-gradient(to bottom, #fff, var(--color-gray-100), var(--color-gray-200)); border-radius: .75rem; box-shadow: 0 10px 25px rgba(0,0,0,.1); outline: 1px solid rgba(255,255,255,.2); }
@media(min-width:640px) { .chat-outer { padding: .5rem; border-radius: 1rem; } }
@media(min-width:1024px) { .chat-outer { padding: 1rem; border-radius: 2.5rem; } }
.chat-inner { padding: .5rem; background: linear-gradient(to bottom, var(--color-gray-100), var(--color-gray-200)); border-radius: .75rem; backdrop-filter: blur(8px); }
@media(min-width:1024px) { .chat-inner { padding: 1.5rem; border-radius: 2rem; } }

.chat-header { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.btn-new-chat { padding: .25rem .75rem; font-size: .75rem; background: #fff; border: 1px solid var(--color-gray-300); border-radius: 9999px; transition: background .15s; }
.btn-new-chat:hover { background: var(--color-gray-50); }

.chat-layout { display: flex; flex-direction: column; gap: .5rem; }
@media(min-width:1024px) { .chat-layout { flex-direction: row; gap: 1.5rem; } }

.chat-main { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; }
.chat-messages { width: 100%; display: flex; flex-direction: column; gap: .5rem; min-height: 200px; max-height: 300px; overflow-y: auto; overflow-x: hidden; padding: .5rem; scrollbar-width: thin; }
@media(min-width:1024px) { .chat-messages { max-height: 400px; gap: .75rem; } }

/* Message Bubbles */
.msg { display: flex; gap: .75rem; align-items: flex-start; max-width: 100%; }
.msg.user { flex-direction: row-reverse; }
[dir="rtl"] .msg.user { flex-direction: row; }
[dir="rtl"] .msg:not(.user) { flex-direction: row-reverse; }
.msg-avatar { width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: var(--color-gray-200); flex-shrink: 0; overflow: hidden; }
.msg-avatar img { width: 100%; height: 100%; object-fit: contain; }
.msg-bubble { padding: .5rem .75rem; border-radius: .75rem; font-size: .875rem; line-height: 1.5; max-width: 80%; word-break: break-word; }
.msg:not(.user) .msg-bubble { background: #fff; border: 1px solid var(--color-gray-200); color: var(--color-gray-800); }
.msg.user .msg-bubble { background: var(--color-primary); color: #fff; }
.msg-voice { display: flex; align-items: center; gap: .5rem; min-width: 180px; width: 180px; }
.msg-voice.playable { cursor: pointer; }
.msg-voice.playable:hover { opacity: .85; }
.msg-voice.playing .msg-voice-play { color: var(--color-primary-600, #4f46e5); }
.msg-voice-play { flex-shrink: 0; }
.msg-voice-bars { display: flex; align-items: center; gap: 1px; height: 24px; flex: 1; min-width: 0; }
.msg-voice-bar { width: 2px; background: currentColor; border-radius: 1px; opacity: .5; transition: height .08s ease; }
.msg-voice-time { font-size: .75rem; opacity: .7; font-variant-numeric: tabular-nums; font-family: 'Montserrat', monospace; min-width: 3.2em; text-align: right; flex-shrink: 0; }

/* Loading dots */
.loading-dots { display: flex; gap: .25rem; padding: .5rem .75rem; background: #fff; border: 1px solid var(--color-gray-200); border-radius: .75rem; }
.loading-dot { width: .5rem; height: .5rem; background: var(--color-primary-600); border-radius: 9999px; animation: bounce .6s ease-in-out infinite; }
.loading-dot:nth-child(2) { animation-delay: .15s; }
.loading-dot:nth-child(3) { animation-delay: .3s; }

/* Industries Sidebar */
.industries-sidebar { display: none; width: 20rem; flex-shrink: 0; }
@media(min-width:1024px) { .industries-sidebar { display: block; } }
.industry-card { padding: .75rem; border-radius: 1rem; transition: all .2s; cursor: pointer; margin-bottom: .5rem; border: 1px solid transparent; }
.industry-card:hover { background: rgba(255,255,255,.5); }
.industry-card.active { background: rgba(255,255,255,.8); border-color: var(--color-gray-200); box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.industry-card-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .25rem; }
.industry-avatar { width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--color-gray-100); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.industry-avatar img { width: 100%; height: 100%; object-fit: contain; }
.industry-name { font-weight: 600; font-size: .875rem; color: var(--color-gray-900); }
.industry-desc { font-size: .75rem; color: var(--color-gray-500); margin-top: .25rem; }
.industry-tone { display: inline-block; font-size: .625rem; padding: .125rem .5rem; border-radius: 9999px; margin-top: .375rem; font-weight: 500; }

/* Mobile Industries */
.mobile-industries { display: block; margin: .5rem 0; }
@media(min-width:1024px) { .mobile-industries { display: none; } }
.mobile-industries-scroll { display: flex; gap: .375rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.mobile-industries-scroll::-webkit-scrollbar { display: none; }
.industry-pill { flex-shrink: 0; padding: .375rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 500; white-space: nowrap; transition: all .2s; background: rgba(255,255,255,.6); color: var(--color-gray-700); border: 1px solid var(--color-gray-300); }
.industry-pill.active { background: var(--color-primary-800); color: #fff; border-color: var(--color-primary-800); box-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* Input Area */
.chat-input-area { width: 100%; margin-top: .5rem; }
.chat-input-row { display: flex; align-items: flex-end; gap: .375rem; }
.chat-input-field { flex: 1; min-width: 0; }
.chat-input { width: 100%; padding: .5rem .75rem; border: 1px solid var(--color-gray-200); border-radius: .75rem; font-size: .875rem; background: #fff; outline: none; transition: border-color .2s; resize: none; }
.chat-input:focus { border-color: var(--color-primary); }
.chat-action-btns { display: flex; gap: .25rem; flex-shrink: 0; }
.btn-action { width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; }
@media(min-width:640px) { .btn-action { width: 2.25rem; height: 2.25rem; } }
.btn-action.dark { background: var(--color-primary-800); color: #fff; }
.btn-action.red { background: #dc2626; color: #fff; }
.btn-action svg { width: .875rem; height: .875rem; }

/* Voice Input */
.voice-input { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; background: #fff; border: 1px solid var(--color-gray-200); border-radius: .75rem; flex: 1; }
.voice-waveform { flex: 1; display: flex; align-items: center; gap: 1px; height: 32px; }
.voice-bar { width: 2px; background: var(--color-primary); border-radius: 1px; transition: height .1s; }
.voice-timer { font-size: .875rem; font-weight: 500; color: var(--color-gray-700); font-variant-numeric: tabular-nums; }
.btn-voice-cancel { color: var(--color-gray-500); font-size: .75rem; font-weight: 500; }
.btn-voice-send { background: #16a34a; color: #fff; padding: .375rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; }

/* Call View */
.call-view { position: relative; background: linear-gradient(135deg, #f8f9fc 0%, #eef1f8 50%, #f0f0f6 100%); border-radius: 1rem; padding: 1.5rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-height: 300px; overflow: hidden; }
@media(min-width:640px) { .call-view { min-height: 360px; padding: 2rem; border-radius: 1.25rem; } }
@media(min-width:1024px) { .call-view { min-height: 420px; } }
.call-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
.call-status { position: relative; z-index: 1; display: flex; align-items: center; gap: .5rem; padding: .375rem 1rem; background: rgba(255,255,255,.7); border-radius: 9999px; border: 1px solid rgba(0,0,0,.06); backdrop-filter: blur(20px); box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.call-status-dot { width: .5rem; height: .5rem; border-radius: 9999px; transition: background .3s, box-shadow .3s; }
.call-status-dot.connecting { background: #eab308; animation: pulse 1.5s infinite; }
.call-status-dot.connected { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.5); }
.call-status-dot.listening { background: #6366f1; box-shadow: 0 0 6px rgba(99,102,241,.4); animation: pulse 2s infinite; }
.call-status-dot.user-speaking { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.6); }
.call-status-dot.thinking { background: #a855f7; box-shadow: 0 0 6px rgba(168,85,247,.4); animation: pulse 1s infinite; }
.call-status-dot.agent-speaking { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,.5); }
.call-status-text { font-size: .875rem; font-weight: 500; color: var(--color-gray-700); letter-spacing: .01em; }
.call-timer { font-size: .875rem; font-weight: 500; color: var(--color-gray-400); font-variant-numeric: tabular-nums; }
.call-controls { position: relative; z-index: 1; display: flex; gap: .75rem; margin-top: 1.5rem; }
.btn-call-mute { display: flex; align-items: center; gap: .625rem; padding: .75rem 1.5rem; background: rgba(255,255,255,.7); border-radius: 9999px; border: 1px solid rgba(0,0,0,.08); backdrop-filter: blur(20px); color: var(--color-gray-700); font-weight: 500; transition: all .2s; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.btn-call-mute:hover { background: rgba(255,255,255,.9); }
.btn-call-mute svg { stroke: var(--color-gray-600); }
.btn-call-end { display: flex; align-items: center; gap: .625rem; padding: .75rem 1.5rem; background: #dc2626; color: #fff; border-radius: 9999px; font-weight: 500; box-shadow: 0 4px 6px rgba(0,0,0,.1); transition: background .15s; }
.btn-call-end:hover { background: #b91c1c; }

@media(min-width:768px) { }
.btn-bottom-action { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; background: #fff; color: var(--color-gray-900); padding: .5rem 1rem; border-radius: 9999px; font-weight: 500; font-size: .875rem; transition: all .2s; }
.btn-bottom-action:hover { color: #000; }
.btn-bottom-action svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ============================================================
   COMPLIANCE TICKER
   ============================================================ */
.compliance-section { position: relative; padding: 4rem 0; background: var(--color-bg); overflow: hidden; }
.compliance-header { text-align: center; margin-bottom: 3rem; }
.compliance-title { font-size: 1.875rem; font-weight: 700; color: var(--color-gray-900); margin-bottom: 1rem; background: linear-gradient(to right, var(--color-gray-900), #334155); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
@media(min-width:1024px) { .compliance-title { font-size: 2.25rem; } }
.compliance-subtitle { font-size: 1.125rem; color: var(--color-gray-600); max-width: 48rem; margin: 0 auto; line-height: 1.6; }
@media(min-width:1024px) { .compliance-subtitle { font-size: 1.25rem; } }
.ticker-container { position: relative; display: flex; width: 100%; overflow: hidden; mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); }
.ticker-track { display: flex; gap: 1.5rem; padding: 1rem 2rem; flex-shrink: 0; animation: ticker 25s linear infinite; }
[dir="rtl"] .ticker-track { animation-name: tickerRTL; }
@media(min-width:1024px) { .ticker-track { gap: 2rem; padding: 1rem 3rem; } }
.compliance-card { flex-shrink: 0; width: 12rem; height: 8rem; background: #fff; border-radius: .75rem; box-shadow: 0 4px 6px rgba(0,0,0,.05); padding: 1.5rem; padding-bottom: .75rem; display: flex; flex-direction: column; gap: .75rem; transition: all .3s; border: 1px solid rgba(0,0,0,.03); }
@media(min-width:1024px) { .compliance-card { width: 14rem; height: 9rem; } }
.compliance-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,.1); transform: scale(1.05); }
.compliance-icon { width: 3rem; height: 3rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 4px 6px rgba(0,0,0,.1); }
.compliance-icon svg { width: 1.5rem; height: 1.5rem; }
.compliance-card-title { font-size: .875rem; font-weight: 700; color: var(--color-gray-900); }
@media(min-width:1024px) { .compliance-card-title { font-size: 1rem; } }
.compliance-card-sub { font-size: .75rem; color: var(--color-gray-600); font-weight: 500; }

/* ============================================================
   KNOWLEDGE SOURCES
   ============================================================ */
.knowledge-section { background: var(--color-bg); padding: 0 0 4rem; }
.knowledge-badge { font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #a855f7; }
.knowledge-title { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin: .5rem 0 1rem; }
@media(min-width:768px) { .knowledge-title { font-size: 2.25rem; margin: 1rem 0 1.5rem; } }
@media(min-width:1024px) { .knowledge-title { font-size: 3rem; } }
.knowledge-subtitle { font-size: 1rem; color: var(--color-gray-600); max-width: 48rem; margin: 0 auto; line-height: 1.6; }
@media(min-width:768px) { .knowledge-subtitle { font-size: 1.25rem; } }
.knowledge-grid { display: grid; gap: 1.5rem; align-items: center; margin-top: 2rem; }
@media(min-width:1024px) { .knowledge-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.knowledge-sources-list { display: flex; flex-direction: row; gap: 1rem; overflow-x: auto; scrollbar-width: none; }
.knowledge-sources-list::-webkit-scrollbar { display: none; }
@media(min-width:1024px) { .knowledge-sources-list { flex-direction: column; overflow-x: visible; } }
.source-card { cursor: pointer; flex-shrink: 0; min-width: 280px; padding: 1rem 1.5rem; border-radius: .75rem; transition: all .3s; }
@media(min-width:1024px) { .source-card { min-width: 0; width: 100%; max-width: 42rem; } }
.source-card.active { background: #fff; box-shadow: 0 10px 25px rgba(0,0,0,.1); border: 1px solid var(--color-gray-200); }
.source-card:not(.active):hover { background: rgba(255,255,255,.5); }
.source-card-inner { display: flex; flex-direction: column; gap: .75rem; }
@media(min-width:1024px) { .source-card-inner { flex-direction: row; align-items: flex-start; gap: 1rem; } }
.source-icon { display: none; width: 3.5rem; height: 3.5rem; border-radius: .75rem; align-items: center; justify-content: center; flex-shrink: 0; transition: all .3s; }
@media(min-width:768px) { .source-icon { display: flex; } }
.source-icon svg { width: 1.5rem; height: 1.5rem; }
@media(min-width:640px) { .source-icon svg { width: 2rem; height: 2rem; } }
.source-title { font-size: 1.125rem; font-weight: 600; color: var(--color-gray-900); transition: color .3s; }
.source-card:not(.active) .source-title { color: var(--color-gray-700); }
.source-desc { font-size: .875rem; color: var(--color-gray-600); line-height: 1.5; transition: color .3s; }
.source-card:not(.active) .source-desc { color: var(--color-gray-500); }
.source-progress { margin-top: 1rem; height: .25rem; background: var(--color-gray-200); border-radius: 9999px; overflow: hidden; }
.source-progress-bar { height: 100%; background: linear-gradient(to right, #a855f7, #7c3aed); border-radius: 9999px; transition: width .1s linear; width: 0; }
.knowledge-video { position: relative; order: -1; max-width: 42rem; margin: 0 auto; width: 100%; }
@media(min-width:1024px) { .knowledge-video { order: 0; } }
.knowledge-video video { width: 100%; border-radius: 1rem; box-shadow: 0 20px 50px rgba(0,0,0,.1); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-section { padding: 3rem 0; background: var(--color-bg); background-image: url('../assets/common-pattern.svg'); background-position: 50%; background-repeat: no-repeat; background-size: contain; }
@media(min-width:768px) { .how-section { padding: 4rem 0; } }
@media(min-width:1024px) { .how-section { padding: 5rem 0; } }
.how-header { text-align: center; margin-bottom: 2rem; }
@media(min-width:768px) { .how-header { margin-bottom: 3rem; } }
.how-title { font-size: 1.875rem; font-weight: 700; color: var(--color-gray-900); margin-bottom: 1rem; line-height: 1.2; }
@media(min-width:768px) { .how-title { font-size: 2.25rem; } }
@media(min-width:1024px) { .how-title { font-size: 3rem; } }
.how-subtitle { font-size: 1rem; color: var(--color-gray-600); max-width: 48rem; margin: 0 auto; line-height: 1.6; }
@media(min-width:768px) { .how-subtitle { font-size: 1.125rem; } }

.how-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 2rem; }
@media(min-width:1024px) { .how-tabs { grid-template-columns: repeat(5, 1fr); gap: 1rem; } }
.how-tab { text-align: center; padding: 1rem; border-radius: .75rem; transition: all .3s; cursor: pointer; display: flex; flex-direction: column; align-items: center; background: var(--color-gray-50); }
.how-tab.active { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.1); transform: scale(1.05); border: 1px solid var(--color-gray-200); }
.how-tab:hover:not(.active) { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.how-tab-icon { width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; margin-bottom: .75rem; transition: all .3s; }
@media(min-width:640px) { .how-tab-icon { width: 3rem; height: 3rem; } }
.how-tab-icon svg { width: 1.25rem; height: 1.25rem; }
@media(min-width:640px) { .how-tab-icon svg { width: 1.5rem; height: 1.5rem; } }
.how-tab-title { font-size: .8125rem; font-weight: 600; color: var(--color-gray-700); }
@media(min-width:640px) { .how-tab-title { font-size: .875rem; } }
.how-tab.active .how-tab-title { color: var(--color-gray-900); }
.how-tab-desc { font-size: .6875rem; color: var(--color-gray-500); margin-top: .25rem; line-height: 1.3; }
@media(min-width:640px) { .how-tab-desc { font-size: .75rem; } }
.how-tab-bar { width: 4rem; height: .25rem; border-radius: 9999px; margin-top: .5rem; transition: all .3s; opacity: 0; }
.how-tab.active .how-tab-bar { opacity: 1; }

.how-content { border-radius: 1rem; overflow: hidden; }
.how-content video { width: 100%; border-radius: 1rem; box-shadow: 0 20px 50px rgba(0,0,0,.1); }

.how-cta { margin-top: 3rem; text-align: center; }
.how-cta-inner { display: inline-flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: center; background: linear-gradient(to right, #eff6ff, #f5f3ff); border-radius: 1rem; padding: 1.5rem 2rem; }
@media(min-width:640px) { .how-cta-inner { flex-direction: row; padding: 2rem; } }
.how-cta-title { font-size: 1.25rem; font-weight: 700; color: var(--color-gray-900); margin-bottom: .5rem; }
.how-cta-desc { color: var(--color-gray-600); font-size: .875rem; }
.btn-primary { background: var(--color-primary); color: #fff; padding: .75rem 2rem; border-radius: 9999px; font-weight: 500; transition: all .2s; white-space: nowrap; }
.btn-primary:hover { opacity: .9; }

/* ============================================================
   WHY CHOOSE
   ============================================================ */
.why-section { padding: .5rem 0 4rem; background: var(--color-bg); }
.why-header { text-align: center; margin-bottom: 4rem; max-width: 42rem; margin-left: auto; margin-right: auto; }
.why-title { font-size: 1.875rem; font-weight: 700; color: var(--color-gray-900); margin-bottom: 1rem; line-height: 1.2; }
@media(min-width:768px) { .why-title { font-size: 2.25rem; } }
.why-subtitle { font-size: 1.25rem; color: var(--color-gray-600); line-height: 1.75; }
.why-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media(min-width:768px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:1024px) { .why-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.feature-card { flex: 1; min-width: 280px; max-width: 24rem; padding: 1.5rem; background: linear-gradient(to bottom, #fff, var(--color-gray-50), var(--color-gray-100)); border-radius: 1.5rem; border: 1px solid var(--color-gray-200); box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: all .3s; display: flex; flex-direction: column; gap: 1.5rem; margin: 0 auto; width: 100%; }
.feature-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-5px); }
.feature-icon { width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; }
.feature-card:hover .feature-icon { background: #fff; border: 1px solid var(--color-gray-200); }
.feature-icon svg { width: 1.25rem; height: 1.25rem; color: #fff; }
.feature-card:hover .feature-icon svg { color: var(--color-primary); }
.feature-title { font-size: 1.25rem; font-weight: 500; color: var(--color-gray-900); }
.feature-desc { font-size: 1rem; color: var(--color-gray-600); line-height: 1.6; }

/* ============================================================
   SERVICES
   ============================================================ */
.services-section { padding: 6rem 0; background: var(--color-bg); }
.services-header { text-align: center; margin-bottom: 4rem; max-width: 48rem; margin-left: auto; margin-right: auto; }
.services-title { font-size: 1.875rem; font-weight: 700; color: var(--color-gray-900); margin-bottom: 1rem; }
@media(min-width:768px) { .services-title { font-size: 2.25rem; } }
.services-subtitle { font-size: 1.125rem; color: var(--color-gray-600); line-height: 1.75; }
.services-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media(min-width:1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card { padding: .75rem; background: linear-gradient(to bottom, #fff, var(--color-gray-50), var(--color-gray-200)); border-radius: 2.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.service-card-inner { padding: 1rem; background: linear-gradient(to bottom, #fff, var(--color-gray-50), var(--color-gray-100)); border-radius: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,.05); display: flex; flex-direction: column; gap: .75rem; }
.service-icon { width: 2.75rem; height: 2.75rem; background: rgba(255,255,255,.2); border-radius: .75rem; border: 1px solid rgba(229,231,235,.5); display: flex; align-items: center; justify-content: center; }
.service-icon svg { width: 1.25rem; height: 1.25rem; color: rgba(0,0,0,.8); }
.service-title { font-size: 1.25rem; font-weight: 600; color: var(--color-gray-900); text-align: start; }
.service-features { display: flex; flex-direction: column; gap: 1rem; }
.service-feature { display: flex; align-items: center; gap: .5rem; }
.service-check { width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: #16a34a; }
.service-feature span { font-size: 1rem; color: var(--color-gray-800); }

/* ============================================================
   PROCESS
   ============================================================ */
.process-section { padding: 6rem 0; background: var(--color-bg); }
.process-header { text-align: center; margin-bottom: 4rem; max-width: 48rem; margin-left: auto; margin-right: auto; }
.process-title { font-size: 1.875rem; font-weight: 700; color: var(--color-gray-900); margin-bottom: 1rem; }
@media(min-width:768px) { .process-title { font-size: 2.25rem; } }
.process-subtitle { font-size: 1.125rem; color: var(--color-gray-600); line-height: 1.75; }
.process-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; place-items: center; }
@media(min-width:768px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:1024px) { .process-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.process-step { width: 16rem; display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
.process-circle { width: 9rem; height: 9rem; position: relative; }
.process-circle-bg { width: 100%; height: 100%; background: linear-gradient(to bottom, #fff, var(--color-gray-50), var(--color-gray-200)); border-radius: 9999px; box-shadow: 0 1px 3px rgba(0,0,0,.05); display: flex; align-items: center; justify-content: center; }
.process-circle svg { width: 2.5rem; height: 2.5rem; color: var(--color-gray-700); }
.process-step-title { font-size: 1.25rem; font-weight: 600; color: var(--color-gray-900); }
.process-step-desc { font-size: 1rem; color: var(--color-gray-600); line-height: 1.5; }

/* ============================================================
   INSIGHTS
   ============================================================ */
.insights-section { background: var(--color-bg); padding: 0 0 2rem; }
.insights-header { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2rem; }
@media(min-width:1024px) { .insights-header { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: 3rem; } }
.insights-title { font-size: 1.5rem; font-weight: 700; color: var(--color-gray-900); margin-bottom: .75rem; }
@media(min-width:768px) { .insights-title { font-size: 2.25rem; margin-bottom: 1rem; } }
.insights-subtitle { font-size: 1rem; color: var(--color-gray-600); line-height: 1.6; max-width: 42rem; }
@media(min-width:640px) { .insights-subtitle { font-size: 1.125rem; } }
.btn-outline { padding: .75rem 1.5rem; border-radius: 9999px; border: 1px solid var(--color-primary); color: var(--color-primary); font-weight: 500; transition: background .2s; white-space: nowrap; }
.btn-outline:hover { background: rgba(10,10,10,.05); }
.insights-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media(min-width:768px) { .insights-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:1024px) { .insights-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.article-card { border-radius: 1rem; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: all .3s; border: 1px solid var(--color-gray-100); }
.article-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,.1); transform: translateY(-4px); }
.article-img { width: 100%; height: 12rem; object-fit: cover; background: var(--color-gray-100); }
.article-body { padding: 1.5rem; }
.article-category { display: inline-block; font-size: .75rem; font-weight: 600; color: #7c3aed; margin-bottom: .75rem; }
.article-title { font-size: 1.125rem; font-weight: 600; color: var(--color-gray-900); margin-bottom: .5rem; line-height: 1.4; }
.article-desc { font-size: .875rem; color: var(--color-gray-600); line-height: 1.5; margin-bottom: 1rem; }
.article-meta { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--color-gray-500); }
.article-meta-avatar { width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: var(--color-gray-200); }
.article-meta-dot { width: 3px; height: 3px; border-radius: 9999px; background: var(--color-gray-400); }

/* ============================================================
   CTA / VISUAL SECTION
   ============================================================ */
.cta-section { padding: 4rem 1rem; background: var(--color-bg); }
@media(min-width:1024px) { .cta-section { padding: 8rem 1.5rem; } }
.cta-wrapper { display: flex; flex-direction: column; gap: 2rem; padding: .5rem; border-radius: .75rem; background: linear-gradient(to bottom, var(--color-gray-100), var(--color-gray-200)); box-shadow: 0 2px 4px rgba(0,0,0,.05); backdrop-filter: blur(8px); }
@media(min-width:1024px) { .cta-wrapper { flex-direction: row; gap: 4rem; padding: 1.5rem; border-radius: 2rem; } }
.cta-text { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2rem; }
.cta-title { font-size: 1.875rem; font-weight: 700; color: var(--color-gray-900); line-height: 1.2; }
@media(min-width:1024px) { .cta-title { font-size: 2.25rem; } }
.cta-desc { font-size: 1.25rem; color: var(--color-gray-600); line-height: 1.6; }
.cta-buttons { display: flex; flex-direction: column; gap: 1rem; }
@media(min-width:640px) { .cta-buttons { flex-direction: row; } }
.btn-cta-primary { padding: 1rem 2rem; background: var(--color-gray-900); color: #fff; border-radius: 9999px; font-weight: 500; font-size: 1.125rem; transition: background .2s; box-shadow: 0 4px 6px rgba(0,0,0,.1); }
.btn-cta-primary:hover { background: var(--color-gray-800); }
.btn-cta-secondary { padding: 1rem 2rem; background: #fff; color: var(--color-gray-900); border: 1px solid var(--color-gray-300); border-radius: 9999px; font-weight: 500; font-size: 1.125rem; display: flex; align-items: center; gap: .5rem; transition: background .2s; }
.btn-cta-secondary:hover { background: var(--color-gray-50); }
.cta-footer-text { font-size: 1rem; color: var(--color-gray-500); }
.cta-visual { flex: 1; display: flex; align-items: center; justify-content: center; }
.cta-visual-inner { width: 100%; max-width: 32rem; background: linear-gradient(to top, rgba(10,10,10,.05), rgba(220,38,38,.05), transparent); border-radius: 1.5rem; overflow: hidden; padding: 1.5rem 1.5rem 0; box-shadow: 0 10px 25px rgba(0,0,0,.1); }
.cta-rings { position: relative; height: 8rem; margin-bottom: 4rem; display: flex; justify-content: center; }
.cta-ring { position: absolute; border-radius: 9999px; border: 2px solid rgba(0,0,0,.08); display: flex; align-items: flex-start; justify-content: center; }
.cta-ring:nth-child(1) { width: 16rem; height: 8rem; top: 2rem; }
.cta-ring:nth-child(2) { width: 12rem; height: 6rem; top: 3rem; }
.cta-ring:nth-child(3) { width: 8rem; height: 4rem; top: 4rem; }
.cta-ring-avatar { width: 2rem; height: 2rem; border-radius: 9999px; border: 2px solid #fff; overflow: hidden; margin-top: -.75rem; }
.cta-ring-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cta-cards { display: flex; justify-content: center; margin-top: -3rem; perspective: 600px; }
.cta-card { width: 10rem; background: #fff; border-radius: 1rem; padding: .75rem; box-shadow: 0 4px 12px rgba(0,0,0,.1); flex-shrink: 0; margin: 0 -.75rem; transition: transform .3s; }
.cta-card:nth-child(1) { transform: rotate(8deg); }
.cta-card:nth-child(2) { transform: rotate(-6deg); z-index: 1; }
.cta-card:nth-child(3) { transform: rotate(4deg); }
.cta-card:hover { transform: rotate(0) scale(1.05); z-index: 2; }
.cta-card-icon { font-size: 1.5rem; margin-bottom: .5rem; }
.cta-card-name { font-size: .875rem; font-weight: 600; color: var(--color-gray-900); }
.cta-card-leads { font-size: .75rem; color: var(--color-gray-500); margin-top: .25rem; }
.cta-card-status { display: flex; align-items: center; gap: .25rem; font-size: .625rem; margin-top: .5rem; }
.cta-card-status-dot { width: .375rem; height: .375rem; border-radius: 9999px; }
.cta-card-status-dot.online { background: #22c55e; }
.cta-card-status-dot.offline { background: var(--color-gray-400); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { width: 100%; padding: 3rem 0 2rem; background: var(--color-bg); color: var(--color-primary); }
.footer-top { display: flex; flex-direction: column; gap: 2rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.1); }
@media(min-width:1024px) { .footer-top { flex-direction: row; gap: 3rem; } }
.footer-brand { width: 100%; max-width: 16rem; display: flex; flex-direction: column; gap: 1.5rem; }
.footer-logo svg { height: 24px; width: auto; }
.footer-legal { font-size: .875rem; color: var(--color-primary); line-height: 1.6; }
.footer-links { flex: 1; display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media(min-width:768px) { .footer-links { grid-template-columns: repeat(2, 1fr); } }
@media(min-width:1024px) { .footer-links { grid-template-columns: repeat(5, 1fr); gap: 3rem; } }
.footer-col h3 { font-size: 1rem; font-weight: 600; color: var(--color-primary); margin-bottom: 1.5rem; letter-spacing: -.025em; }
.footer-col ul { display: flex; flex-direction: column; gap: .75rem; }
.footer-col a, .footer-col button { font-size: .875rem; color: var(--color-primary); transition: all .2s; display: inline-block; text-align: start; }
.footer-col a:hover, .footer-col button:hover { text-decoration: underline; text-underline-offset: 4px; }

.footer-newsletter { grid-column: span 1; }
@media(min-width:1024px) { .footer-newsletter { grid-column: span 2; } }
.newsletter-form { display: flex; flex-direction: column; gap: .75rem; }
@media(min-width:640px) { .newsletter-form { flex-direction: row; } }
.newsletter-input { flex: 1; height: 3rem; padding: 0 1rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 9999px; color: var(--color-primary); font-size: .875rem; outline: none; transition: all .2s; }
.newsletter-input::placeholder { color: var(--color-primary-600); }
.newsletter-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.3); }
.newsletter-btn { height: 3rem; padding: 0 1.5rem; background: var(--color-primary); color: #fff; border-radius: 9999px; font-weight: 600; font-size: .875rem; transition: all .2s; display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.newsletter-btn:hover { opacity: .9; }
.online-indicator { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.online-dot { width: 1.25rem; height: 1.25rem; background: linear-gradient(to right, #10b981, #0d9488); border-radius: 9999px; box-shadow: 0 2px 4px rgba(0,0,0,.1); animation: spin 2s linear infinite; }
.online-text { font-size: .875rem; color: var(--color-primary); }

.footer-contact { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); }
.footer-contact h3 { font-size: 1rem; font-weight: 600; margin-bottom: 1.5rem; }
.footer-contact-list { display: flex; flex-direction: column; gap: 1rem; }
.footer-contact-item { display: flex; align-items: center; gap: .75rem; transition: all .2s; }
.footer-contact-icon { width: 2.5rem; height: 2.5rem; background: rgba(255,255,255,.1); border-radius: .75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.footer-contact-icon svg { width: 1.25rem; height: 1.25rem; color: var(--color-gray-400); }
.footer-contact-item:hover .footer-contact-icon svg { color: var(--color-primary); }
.footer-contact-item span { font-size: .875rem; font-weight: 500; }
.footer-contact-item:hover span { text-decoration: underline; text-underline-offset: 4px; }

.footer-bottom { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); }
@media(min-width:640px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-copyright { font-size: .875rem; color: var(--color-gray-400); }
.footer-socials { display: flex; gap: 1rem; }
.footer-social { width: 2.5rem; height: 2.5rem; border-radius: .75rem; overflow: hidden; transition: transform .2s; box-shadow: 0 2px 4px rgba(0,0,0,.1); }
.footer-social:hover { transform: scale(1.1); }
.footer-social-inner { width: 100%; height: 100%; border-radius: .75rem; }
.footer-social-inner.fb { background: #2563eb; }
.footer-social-inner.ig { background: linear-gradient(to right, #fb923c, #ef4444); }
.footer-social-inner.li { background: #16a34a; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); padding: 1rem; opacity: 0; visibility: hidden; transition: all .3s; }
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-content { position: relative; width: 100%; max-width: 28rem; background: #fff; border-radius: 1.5rem; box-shadow: 0 25px 50px rgba(0,0,0,.25); overflow: hidden; transform: scale(.9) translateY(20px); opacity: 0; transition: all .3s; }
.modal-overlay.open .modal-content { transform: scale(1) translateY(0); opacity: 1; }
.modal-close { position: absolute; top: 1rem; right: 1rem; z-index: 10; padding: .5rem; border-radius: 9999px; background: var(--color-gray-100); transition: background .2s; }
.modal-close:hover { background: var(--color-gray-200); }
.modal-close svg { width: 1.25rem; height: 1.25rem; color: var(--color-gray-600); }
.modal-body { padding: 2rem; padding-top: 3rem; text-align: center; }
.modal-title { font-size: 1.5rem; font-weight: 700; color: var(--color-gray-900); }
@media(min-width:768px) { .modal-title { font-size: 1.875rem; } }
.modal-subtitle { margin-top: .5rem; font-size: .875rem; color: var(--color-gray-600); }
.modal-form { margin-top: 2rem; display: flex; flex-direction: column; gap: .75rem; }
.modal-input { width: 100%; padding: 1rem 1.25rem; border: 1px solid var(--color-gray-300); border-radius: 1rem; font-size: 1rem; outline: none; transition: all .2s; }
.modal-input:focus { border-color: #7c3aed; box-shadow: 0 0 0 4px rgba(124,58,237,.1); }
.modal-textarea { width: 100%; padding: 1rem 1.25rem; border: 1px solid var(--color-gray-300); border-radius: 1rem; font-size: 1rem; outline: none; resize: none; transition: all .2s; min-height: 5rem; }
.modal-textarea:focus { border-color: #7c3aed; box-shadow: 0 0 0 4px rgba(124,58,237,.1); }
.modal-submit { width: 100%; padding: 1rem; border-radius: 1rem; font-weight: 700; font-size: 1rem; color: #fff; background: #7c3aed; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.modal-submit:hover { background: #6d28d9; }
.modal-submit.success { background: #16a34a; }
.modal-submit:disabled { opacity: .8; cursor: wait; }
.modal-error { color: #dc2626; font-size: .875rem; font-weight: 500; margin-top: .5rem; }

/* ============================================================
   LOADING SPINNER
   ============================================================ */
.loading-screen { position: fixed; inset: 0; z-index: 100; background: #fff; display: flex; align-items: center; justify-content: center; transition: opacity .5s, visibility .5s; }
.loading-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-logo { width: 120px; height: auto; animation: breathe 2s ease-in-out infinite; }

/* Touch optimizations */
@media (hover: none) and (pointer: coarse) {
  button, a, [role="button"] { min-height: 44px; min-width: 44px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}