/* CanSpeech unified visual identity
   Purpose: presentation only. All ASP.NET MVC endpoints, forms, scripts and prices are preserved.
   Load AFTER legacy CSS. Scoped classes prevent touching unrelated libraries.
*/
:root {
  --cs-royal:#0b3ea4;
  --cs-deep:#092a70;
  --cs-ink:#142957;
  --cs-muted:#617699;
  --cs-pale:#edf7ff;
  --cs-lavender:#aa97f5;
  --cs-line:#dce8f8;
  --cs-surface:#fff;
  --cs-shadow:0 17px 45px rgba(16,57,120,.09);
  --cs-round:22px;
}
.cs-site, .cs-auth, .cs-dashboard {
  font-family:'Tajawal','Cairo',Tahoma,Arial,sans-serif;
  color:var(--cs-ink);
  direction:rtl;
  background:#f5faff;
  line-height:1.75;
}
.cs-site {margin-bottom:0!important;min-height:100vh}
.cs-site h1,.cs-site h2,.cs-site h3,.cs-site h4,.cs-auth h1,.cs-auth h2,.cs-auth h3,.cs-dashboard h1,.cs-dashboard h2,.cs-dashboard h3 {
  color:var(--cs-ink);font-weight:800;line-height:1.35;
}
.cs-site h1,.cs-site h2,.cs-site h3,.cs-site h4 {padding:0;}
.cs-site p,.cs-auth p {margin:0 0 1rem;font-size:inherit;line-height:1.9;}
.cs-site-content{padding-top:84px;flex:1 0 auto;background:#f5faff;}
.cs-site a:focus-visible,.cs-auth a:focus-visible,.cs-dashboard a:focus-visible,
.cs-site button:focus-visible,.cs-auth button:focus-visible,.cs-dashboard button:focus-visible,
.cs-site :is(input,textarea,select):focus-visible,.cs-auth :is(input,textarea,select):focus-visible {
  outline:3px solid #9680ef!important;outline-offset:3px;
}
/* Header and footer */
.cs-site .cs-header-shell {padding:0 clamp(12px,3vw,40px)}
.cs-site .cs-header-nav {min-height:72px;max-width:1250px;margin-inline:auto;
 border:1px solid rgba(192,212,244,.7)!important;border-top:0!important;
 background:rgba(255,255,255,.96)!important;border-radius:0 0 22px 22px!important;
 box-shadow:0 7px 30px rgba(21,52,109,.09);backdrop-filter:blur(16px);padding:8px 20px}
.cs-site .cs-navbar-brand,.cs-auth .cs-auth-brand {display:flex;align-items:center;gap:9px;color:var(--cs-royal)!important;
 font-weight:900;font-size:1.3rem;letter-spacing:.25px;text-decoration:none!important}
.cs-site .cs-navbar-brand img,.cs-auth .cs-auth-brand img {width:35px;height:35px;object-fit:contain}
.cs-site .cs-header-nav .navbar-nav {align-items:center}
.cs-site .cs-header-nav .navbar-nav .nav-link {color:var(--cs-ink)!important;padding:9px 12px!important;margin:0 2px!important;
 border-radius:12px;white-space:nowrap;font-weight:750}
.cs-site .cs-header-nav .navbar-nav .nav-link:hover {color:var(--cs-royal)!important;background:var(--cs-pale);transform:none;border:0}
.cs-site .cs-header-nav .navbar-nav .nav-link.text-primary {color:var(--cs-royal)!important}
.cs-site .cs-header-nav .logout-btn {display:inline-block;margin:0 8px;border-radius:11px;padding:8px 12px;background:#fff8f8}
.cs-site .cs-header-nav .navbar-toggler {margin-inline-start:auto;border:1px solid var(--cs-line);border-radius:12px;padding:7px 11px}
.cs-site .cs-site-footer {background:linear-gradient(115deg,#081f55,#0b3ea4)!important;margin-top:auto}
.cs-site .cs-site-footer a {color:#eaf1ff!important}
.cs-site .cs-site-footer a:hover {color:white!important;text-decoration:underline!important}
.cs-site .cs-footer-label {color:#b9d7ff}.cs-site .cs-footer-rule {border-color:#94b7ed;opacity:.3}
/* Hero */
.cs-home-hero {position:relative;overflow:hidden;background:linear-gradient(130deg,#f9fdff 9%,#dfefff 65%,#e9dfff 100%);
 padding:clamp(54px,7vw,92px) 0 65px;isolation:isolate}
.cs-home-hero::before,.cs-home-hero::after,.cs-page-hero::after {content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1}
.cs-home-hero::before {width:370px;height:370px;right:-150px;top:-180px;background:rgba(166,204,255,.56)}
.cs-home-hero::after {width:300px;height:300px;left:-100px;bottom:-180px;background:rgba(174,146,248,.34)}
.cs-eyebrow,.cs-section-kicker {display:inline-block;font-size:.85rem;font-weight:900;letter-spacing:.3px;color:var(--cs-royal);
 background:#e7efff;border-radius:50px;padding:6px 14px;margin-bottom:17px}
.cs-home-hero .cs-hero-title {font-size:clamp(2.35rem,4.7vw,4.25rem);line-height:1.24;font-weight:900;max-width:640px;margin:0 0 22px}
.cs-home-hero .cs-hero-title span,.cs-page-hero h1 span {display:block;color:var(--cs-royal)}
.cs-home-hero .cs-hero-lead {color:#455c81;font-size:clamp(1.02rem,1.5vw,1.22rem);max-width:540px;margin-bottom:24px}
.cs-hero-actions {display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:15px 0}
.cs-site .cs-btn-primary,.cs-auth .btn-primary,.cs-dashboard .btn-primary {color:white!important;background:var(--cs-royal)!important;border:1px solid var(--cs-royal)!important;
 border-radius:14px;padding:11px 24px;font-weight:850;box-shadow:0 10px 20px rgba(11,62,164,.17)}
.cs-site .cs-btn-primary:hover,.cs-auth .btn-primary:hover,.cs-dashboard .btn-primary:hover {background:var(--cs-deep)!important;transform:translateY(-1px)}
.cs-site .cs-btn-soft {background:white;color:var(--cs-royal)!important;border:1px solid #c7daf5!important;border-radius:14px;padding:11px 23px;font-weight:850}
.cs-site .cs-btn-soft:hover {background:#ecf4ff}
.cs-home-hero .cs-hero-points {display:flex;flex-wrap:wrap;gap:15px;margin-top:22px;color:#426190;font-size:.92rem;font-weight:750}
.cs-hero-visual-wrap {display:flex;justify-content:center}
.cs-hero-art {width:min(100%,390px);position:relative;border-radius:32px;padding:11px;background:rgba(255,255,255,.5);
 box-shadow:0 26px 65px rgba(29,66,143,.18);border:1px solid rgba(255,255,255,.95)}
.cs-hero-product-image {width:100%;height:auto;max-height:560px;object-fit:contain;border-radius:22px;display:block;margin:auto}
/* Features */
.cs-features-section {background:#fff}
.cs-section-heading {max-width:675px;margin-bottom:35px}
.cs-section-heading h2,.cs-video-section h2,.cs-pricing-section h2 {font-size:clamp(1.85rem,3vw,2.55rem);margin-bottom:11px}
.cs-section-heading p {color:var(--cs-muted);font-size:1.03rem}
.cs-feature-card {background:#fff;border:1px solid var(--cs-line);border-radius:var(--cs-round);
 padding:26px 24px;box-shadow:var(--cs-shadow);transition:transform .2s,box-shadow .2s}
.cs-feature-card:hover {transform:translateY(-4px);box-shadow:0 20px 50px rgba(27,62,139,.13)}
.cs-feature-card .cs-feature-icon {display:grid;place-items:center;width:57px;height:57px;margin-bottom:16px;background:#e9f2ff;border-radius:17px;font-size:27px}
.cs-feature-card h3 {font-size:1.12rem;margin:0 0 9px}.cs-feature-card p {color:var(--cs-muted);font-size:.95rem;margin:0}
.cs-video-section {background:linear-gradient(140deg,#f3f9ff,#f0ebff)}
.cs-video-section p {color:var(--cs-muted)}
.cs-video-frame {border-radius:var(--cs-round);overflow:hidden;background:#0b2359;box-shadow:var(--cs-shadow);border:6px solid white}
.cs-pricing-section {background:#f6faff!important;scroll-margin-top:85px}
.cs-pricing-section .card {background:#fff!important;border:1px solid var(--cs-line)!important;
 border-radius:var(--cs-round)!important;overflow:hidden;box-shadow:var(--cs-shadow)!important}
.cs-pricing-section .card.border-warning {border:2px solid var(--cs-lavender)!important}
.cs-pricing-section .card h3 {font-size:1.35rem}
.cs-pricing-section .card .text-primary {color:var(--cs-royal)!important}
.cs-pricing-section .card .btn-outline-primary {border:1px solid var(--cs-royal);border-radius:12px;color:var(--cs-royal);font-weight:850}
.cs-pricing-section .card .btn-outline-primary:hover {background:var(--cs-royal);color:#fff}
.cs-pricing-section .card .btn-warning {border-radius:12px;background:#e7e0ff;border-color:#cec0ff;color:var(--cs-deep)}
.cs-pricing-section .card p,.cs-pricing-section .text-muted {color:#64758f!important}
/* Content, about, legal, contact */
.cs-page-hero {position:relative;overflow:hidden;background:linear-gradient(140deg,#e5f3ff,#f1eaff);padding:64px 0 70px;isolation:isolate}
.cs-page-hero::after {width:310px;height:310px;background:rgba(144,187,247,.27);left:-80px;top:-150px}
.cs-page-hero-content {max-width:740px}
.cs-page-hero h1 {font-size:clamp(2.25rem,4vw,3.4rem);margin:0 0 18px}
.cs-page-hero p {color:#50698f;font-size:1.08rem}
.cs-page-sections {padding-top:55px;padding-bottom:75px}
.cs-panel {background:#fff;border:1px solid var(--cs-line);border-radius:26px;box-shadow:var(--cs-shadow);padding:clamp(25px,4vw,48px)}
.cs-about-intro,.cs-about-method,.cs-values {margin-bottom:48px}
.cs-about h2 {font-size:clamp(1.55rem,2.6vw,2.1rem);margin-bottom:12px}
.cs-about .cs-panel p {color:var(--cs-muted)}
.cs-about .cs-step {display:inline-grid;place-items:center;min-width:45px;height:45px;color:var(--cs-royal);font-weight:900;border-radius:12px;background:#eaf2ff;margin-bottom:14px}
.cs-about .cs-values h3 {font-size:1.06rem;color:var(--cs-royal)}
.cs-about-cta {background:linear-gradient(135deg,#dfefff,#ede9ff);padding:40px 25px;border-radius:26px}
.cs-about-cta p {max-width:570px;margin:0 auto 20px;color:#50698f}
.cs-legal {max-width:1030px;margin:0 auto!important;padding:42px 22px!important;background:transparent!important;color:var(--cs-ink)!important}
.cs-legal>header h1 {font-weight:900!important;font-size:clamp(1.8rem,3vw,2.5rem)!important;color:var(--cs-royal)!important}
.cs-legal>main>section,.cs-legal>section {background:#fff!important;border:1px solid var(--cs-line)!important;border-radius:20px!important;
 padding:clamp(20px,3vw,32px)!important;box-shadow:var(--cs-shadow)!important}
.cs-legal h2 {font-size:1.12rem!important;color:var(--cs-royal)!important;border-bottom:1px solid var(--cs-line)!important;padding-bottom:12px!important;margin-bottom:15px!important}
.cs-legal p {font-size:.98rem!important;color:#415777!important;margin:8px 0 12px!important}
.cs-legal ul {padding:0 22px!important;list-style:disc!important}
.cs-legal li {list-style:disc!important;padding:0 0 4px!important;color:#415777}
.cs-contact {background:transparent}
.cs-contact .container {max-width:860px;background:white;padding:clamp(25px,4vw,50px);border:1px solid var(--cs-line);border-radius:26px;box-shadow:var(--cs-shadow)}
.cs-contact h1 {color:var(--cs-royal)!important;font-size:clamp(1.8rem,3vw,2.3rem)}
.cs-site .form-control,.cs-auth .form-control,.cs-dashboard .form-control,.cs-dashboard .form-select {border:1px solid #d6e4f6;border-radius:12px;padding:11px 14px;background:#fff;color:var(--cs-ink)}
.cs-site .form-control:focus,.cs-auth .form-control:focus,.cs-dashboard .form-control:focus {box-shadow:0 0 0 3px rgba(137,169,236,.18);border-color:#8ca9e9!important}
.cs-contact .btn-primary {color:#fff;background:var(--cs-royal);border-radius:12px;padding:10px 35px;font-weight:800}
.cs-contact .btn-primary:hover {background:var(--cs-deep)}
/* Auth and checkout: both use the existing _Layoutlogin with unchanged Bootstrap 4 forms */
.cs-auth {min-height:100vh;background:linear-gradient(135deg,#ecf6ff,#eef0ff);margin:0}
.cs-auth-header {max-width:1120px;margin:0 auto;padding:20px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.cs-auth-home {color:var(--cs-royal)!important;font-size:.96rem;font-weight:750}
.cs-auth-content {padding-bottom:60px}
.cs-auth .card,.cs-auth .checkout-container {background:#fff;border:1px solid var(--cs-line);border-radius:22px!important;
 box-shadow:0 22px 60px rgba(20,65,132,.11)!important;overflow:hidden}
.cs-auth .card-header {background:linear-gradient(125deg,#0b3ea4,#536bdd)!important;color:#fff!important;padding:22px 20px!important}
.cs-auth .card-header h1,.cs-auth .card-header h2,.cs-auth .card-header h3,.cs-auth .card-header h4 {color:white!important}
.cs-auth .card-body {padding:clamp(20px,3vw,34px)}
.cs-auth .form-label,.cs-auth label {color:#30466f;font-weight:750}
.cs-auth .btn {border-radius:12px;font-weight:800;padding:10px 18px}
.cs-auth .btn-outline-secondary {border-color:#bacceb;color:#34568d}
.cs-auth .checkout-container {max-width:720px;flex:0 0 100%;margin:10px auto 60px;padding:clamp(24px,4vw,40px)}
.cs-auth .checkout-header h2 {color:var(--cs-royal)!important}
.cs-auth #applyCoupon {background:var(--cs-royal);border-color:var(--cs-royal)}
.cs-auth a {color:var(--cs-royal)}
/* User and admin dashboard: CSS changes only, dynamic loading and JavaScript untouched */
.cs-dashboard {min-height:100vh;background:#f4f8ff}
.cs-dashboard .navbar {background:linear-gradient(120deg,#092c75,#0b3ea4)!important;box-shadow:0 6px 20px rgba(7,36,96,.13)}
.cs-dashboard .navbar-brand {font-weight:900}
.cs-dashboard .offcanvas-start {background:linear-gradient(160deg,#102f77,#263f90)!important;color:#fff!important}
.cs-dashboard .offcanvas-title {font-weight:850;color:#fff}
.cs-dashboard .offcanvas-body a.nav-link {border-radius:13px!important;padding:12px 14px!important;color:#ecf3ff!important}
.cs-dashboard .offcanvas-body a.nav-link:hover,.cs-dashboard .offcanvas-body a.nav-link.active {background:rgba(255,255,255,.17)!important}
.cs-dashboard .container.my-4 {max-width:1240px}
.cs-dashboard .card,.cs-dashboard .modal-content {border:1px solid var(--cs-line);border-radius:19px;box-shadow:var(--cs-shadow);background:#fff}
.cs-dashboard .card-header,.cs-dashboard .modal-header {border-bottom:1px solid var(--cs-line);background:#f0f6ff;border-radius:19px 19px 0 0}
.cs-dashboard .table {color:var(--cs-ink);--bs-table-striped-bg:#f5f9ff}
.cs-dashboard .table th {color:#254781;font-weight:800;background:#edf4ff}
.cs-dashboard .btn {border-radius:10px}
.cs-dashboard .nav-pills .nav-link.active {background:var(--cs-royal)}
.cs-dashboard .progress {border-radius:25px;background:#e4edfa;overflow:hidden}
.cs-dashboard .progress-bar {background:linear-gradient(90deg,#078e83,#18bc81)}
/* Small screens and accessibility */
@media(max-width:991.98px) {
 .cs-site .cs-header-nav .navbar-collapse {padding:14px 4px}
 .cs-site .cs-header-nav .navbar-nav {align-items:stretch!important}
 .cs-site .cs-header-nav .navbar-nav .nav-link {display:block;text-align:right;padding:11px 15px!important}
 .cs-site .cs-header-nav .navbar-nav .nav-link:hover {transform:none}
 .cs-home-hero {padding:55px 0 40px}
 .cs-home-hero .cs-hero-title {max-width:none}
 .cs-hero-visual-wrap {margin-top:10px}
 .cs-hero-art {width:min(100%,325px)}
}
@media(max-width:575.98px) {
 .cs-site-content {padding-top:72px}
 .cs-site .cs-header-shell {padding:0 6px}
 .cs-site .cs-header-nav {border-radius:0 0 17px 17px!important;min-height:66px;padding:6px 13px}
 .cs-home-hero .cs-hero-title {font-size:2.35rem}
 .cs-hero-actions .btn {flex:1 1 150px;text-align:center}
 .cs-hero-art {width:min(100%,265px)}
 .cs-hero-product-image {max-height:435px}
 .cs-feature-card {padding:21px}
 .cs-auth-header {padding:16px}
 .cs-auth .checkout-container {padding:22px;margin:10px 0 45px}
 .cs-legal {padding:25px 12px!important}
 .cs-contact .container {padding:24px 18px}
}
@media(prefers-reduced-motion:reduce) {
 .cs-site .cs-feature-card,.cs-site .btn,.cs-dashboard .btn {transition:none!important;transform:none!important}
 .cs-site {scroll-behavior:auto}
}

/* Mission + TCF brand alignment: scoped to home-page explanatory sections */
.cs-core-pillar{background:#fff;border:1px solid var(--cs-line);border-radius:26px;padding:clamp(24px,3vw,34px);box-shadow:var(--cs-shadow);display:flex;flex-direction:column;gap:12px}
.cs-core-pillar-tcf{background:linear-gradient(135deg,#fff,#eff2ff);border-color:#dcd6fa}
.cs-core-label{font-size:.8rem;font-weight:900;letter-spacing:.2px;color:var(--cs-royal)}
.cs-core-pillar h3{font-size:clamp(1.3rem,2vw,1.6rem);margin:0;color:var(--cs-deep)}
.cs-core-pillar p{color:var(--cs-muted);margin:0}
.cs-core-list{list-style:none;padding:0;margin:4px 0;display:grid;gap:8px}
.cs-core-list li{padding:9px 14px;background:#fff;border:1px solid #dbe5fb;border-radius:12px;text-align:left;color:var(--cs-royal);font-weight:750}
.cs-stat-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.cs-stat-row span{display:flex;align-items:baseline;gap:5px;background:#e9f4ff;border-radius:12px;padding:10px 12px;color:#274e85;font-size:.88rem}
.cs-stat-row strong{font-size:1.3rem;color:var(--cs-royal)}
.cs-inline-link{color:var(--cs-royal);font-weight:850;display:inline-block;margin-top:auto;padding-top:8px}
.cs-mission-section{background:linear-gradient(135deg,#edf8ff,#f2edff)}
.cs-rounds-track{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0;padding:0}
.cs-rounds-track li{display:grid;justify-items:center;gap:8px;text-align:center;border-radius:19px;padding:20px 8px;background:white;border:1px solid var(--cs-line);box-shadow:0 9px 20px rgba(16,57,120,.05)}
.cs-rounds-track li span{display:grid;place-items:center;background:#e7efff;color:#0b3ea4;border-radius:50%;width:51px;height:51px;font-size:1.04rem;font-weight:900;direction:ltr}
.cs-rounds-track li strong{font-size:.95rem;color:#244b87}
.cs-tcf-section{background:white}
.cs-tcf-section .cs-feature-card h3[lang=fr]{direction:ltr;text-align:left;font-size:1.02rem;overflow-wrap:anywhere}
.cs-tcf-note{color:#64758f;font-size:.9rem}
#csDailyMission,#csTcfSections{scroll-margin-top:95px}
@media(max-width:767.98px){.cs-rounds-track{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cs-rounds-track li{padding:15px 5px}.cs-rounds-track li strong{font-size:.82rem}}
@media(max-width:420px){.cs-rounds-track{grid-template-columns:repeat(2,minmax(0,1fr))}}
