/* Maharatkom — V3 public website stylesheet (task: website-v2-implementation).
   PORTED from design/maharatkom-demo-v3/assets/style.css (Round 8 state) by
   scratchpad/port_v3_css.py — every selector scoped under the .v2 root class
   (body.lang-ar -> .v2.lang-ar, body.nav-open -> .v2.nav-open, :root -> .v2)
   so nothing leaks into admin/exam/old-web. Loaded ONLY by layout/web-v2 via
   template <link>. Dropped vs the demo: .demo-badge (review chrome),
   .demo-modal* (the app uses the shared Material RequestDemoComponent),
   html{scroll-behavior}. Regenerate by re-running the port script. */

/* Maharatkom — Design V3 shared stylesheet
   Palette carried over from the client-approved demo2 (Teal/Gold). */
.v2{--c-teal:#1b7ab3;--c-teal-dp:#0f5a85;--c-teal-mid:#53a9dc;--c-teal-lt:#cce8f4;--c-teal-xlt:#eef6fb;--c-gold:#B45309;--c-gold-viv:#D97706;--c-gold-lt:#FEF3C7;--c-ground:#F9FAFB;--c-white:#FFFFFF;--c-head:#111827;--c-body:#374151;--c-muted:#6B7280;--c-border:#E5E7EB;--r-sm:8px;--r-md:16px;--r-lg:24px;--r-xl:36px;--r-pill:9999px;--sh-sm:0 1px 4px rgba(0,0,0,.06);--sh-md:0 4px 20px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);--sh-lg:0 12px 40px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.05);--ease:200ms cubic-bezier(.4,0,.2,1)}
.v2 *,.v2 *::before,.v2 *::after{box-sizing:border-box;margin:0;padding:0}
.v2 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.v2{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--c-white);color:var(--c-body);line-height:1.6;-webkit-font-smoothing:antialiased}
.v2 a{color:inherit;text-decoration:none}
.v2 img{max-width:100%;display:block}
.v2 .wrap{max-width:1200px;margin:0 auto;padding:0 40px}
.v2 section{padding:88px 0}
.v2 .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-teal-dp);background:var(--c-teal-lt);padding:5px 14px;border-radius:var(--r-pill);margin-bottom:18px}
/* Headings use the old-site title blue (#53a9dc, client request 2026-08-27);
   buttons/CTAs stay on --c-teal. */
.v2 h1{font-size:clamp(2.25rem,5.5vw,3.5rem);font-weight:900;line-height:1.07;letter-spacing:-.04em;color:var(--c-teal-mid);text-wrap:balance}
.v2 h2{font-size:clamp(1.625rem,3.5vw,2.5rem);font-weight:800;line-height:1.12;letter-spacing:-.032em;color:var(--c-teal-mid);text-wrap:balance}
.v2 h3{font-size:1.0625rem;font-weight:700;letter-spacing:-.015em;color:var(--c-teal-mid);margin-bottom:6px}
.v2 p{line-height:1.74}
.v2 ul.checklist{list-style:none;display:flex;flex-direction:column;gap:14px}
.v2 ul.checklist li{display:flex;align-items:flex-start;gap:12px;font-size:.9375rem;color:var(--c-body)}
.v2 ul.checklist li::before{content:'✓';flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--c-teal-lt);color:var(--c-teal);font-size:.7rem;font-weight:900;display:flex;align-items:center;justify-content:center;margin-top:2px}
.v2 .btn{display:inline-flex;align-items:center;gap:7px;font-size:.9375rem;font-weight:700;border-radius:var(--r-sm);padding:14px 28px;cursor:pointer;border:none;transition:var(--ease);white-space:nowrap;text-decoration:none}
.v2 .btn-teal{background:var(--c-teal);color:#fff;box-shadow:0 4px 16px rgba(27,122,179,.28)}
.v2 .btn-teal:hover{background:var(--c-teal-dp);transform:translateY(-1px);box-shadow:0 6px 20px rgba(27,122,179,.35)}
.v2 .btn-gold{background:var(--c-gold);color:#fff;box-shadow:0 4px 16px rgba(180,83,9,.28)}
.v2 .btn-gold:hover{background:var(--c-gold-viv);transform:translateY(-1px)}
.v2 .btn-outline-teal{background:transparent;color:var(--c-teal);border:2px solid var(--c-teal)}
.v2 .btn-outline-teal:hover{background:var(--c-teal);color:#fff}
.v2 .btn-outline-white{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)}
.v2 .btn-outline-white:hover{background:rgba(255,255,255,.12)}
.v2 .btn-sm{font-size:.8125rem;padding:10px 20px}

/* NAV */
.v2 nav{position:sticky;top:0;z-index:100;background:var(--c-white);border-bottom:1px solid var(--c-border);box-shadow:var(--sh-sm)}
.v2 .nav-row{display:flex;align-items:center;justify-content:space-between;height:118px}
.v2 .nav-logo{display:flex;align-items:center;gap:8px;font-size:1.2rem;font-weight:900;letter-spacing:-.04em;color:var(--c-teal);flex-shrink:0}
/* logo.png has transparent padding baked in (37px left / 12px right of 500px,
   ≈15px / 5px at 90px display height) — negative margins pull the VISIBLE
   artwork flush with the page content edge, matching the sections below. */
.v2 .logo-img{height:90px;width:auto;max-width:none;flex-shrink:0;margin-left:-15px}
.v2.lang-ar .logo-img{margin-left:0;margin-right:-5px}
.v2 .nav-links{display:flex;align-items:center;gap:2px}
.v2 .nav-links a{font-size:.85rem;font-weight:600;color:var(--c-body);padding:8px 8px;border-radius:var(--r-sm);transition:var(--ease);white-space:nowrap}
.v2 .nav-links a:hover{color:var(--c-teal);background:var(--c-teal-xlt)}
.v2 .nav-links a.active{color:var(--c-teal);font-weight:700}
/* Request Demo = site-standard teal button, same style everywhere it appears
   (header, mobile panel, footer; outline-white variant on teal sections).
   Selector needs the a.nav-cta specificity — a bare .nav-cta loses font-size/
   weight to `.nav-links a` (0,1,1 vs 0,1,0), which is exactly why the header
   button used to render lighter/smaller than every other button. */
.v2 .nav-links a.nav-cta{background:var(--c-teal);color:#fff;font-size:.9375rem;font-weight:700;padding:9px 20px;border-radius:var(--r-sm);transition:var(--ease);margin-left:8px;box-shadow:0 2px 8px rgba(27,122,179,.35)}
.v2 .nav-links a.nav-cta:hover{background:var(--c-teal-dp);color:#fff}
.v2 .lang-pill{display:flex;align-items:center;gap:2px;background:var(--c-ground);border:1px solid var(--c-border);border-radius:var(--r-pill);padding:3px;margin-left:10px}
.v2 .lang-pill button{background:none;border:none;color:var(--c-muted);font-size:.75rem;font-weight:700;padding:4px 11px;border-radius:var(--r-pill);cursor:pointer;transition:var(--ease);letter-spacing:.04em}
.v2 .lang-pill button.active{background:var(--c-teal);color:#fff}
.v2 .has-dropdown{position:relative;display:inline-flex;align-items:center}
.v2 .dd-toggle{background:none;border:none;cursor:pointer;padding:4px 2px;color:var(--c-body);display:inline-flex;align-items:center;border-radius:var(--r-sm)}
.v2 .dd-toggle:hover{color:var(--c-teal)}
.v2 .has-dropdown>a{display:inline-flex;align-items:center;gap:4px}
.v2 .has-dropdown .chevron{width:10px;height:10px;transition:transform .2s var(--ease)}
.v2 .has-dropdown:hover .chevron,.v2 .has-dropdown:focus-within .chevron{transform:rotate(180deg)}
.v2 .dropdown-panel{display:none;position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md);box-shadow:var(--sh-md);padding:8px;min-width:200px;z-index:50}
.v2 .has-dropdown:hover .dropdown-panel,.v2 .has-dropdown:focus-within .dropdown-panel,.v2 .has-dropdown.open .dropdown-panel{display:block}
.v2 .has-dropdown.open .chevron{transform:rotate(180deg)}
.v2.lang-ar .dropdown-panel{left:auto;right:0}
.v2 .nav-mobile-group{display:flex;align-items:stretch}
.v2 .nav-mobile-group>a{flex:1}
.v2 .nav-mobile-dd-toggle{background:none;border:none;border-bottom:1px solid var(--c-border);cursor:pointer;padding:11px 14px;color:var(--c-body);display:flex;align-items:center}
.v2 .nav-mobile-dd-toggle .chevron{width:12px;height:12px;transition:transform .2s var(--ease)}
.v2 .nav-mobile-dd-toggle.open .chevron{transform:rotate(180deg)}
.v2 .dropdown-panel a{display:block;padding:9px 12px;border-radius:var(--r-sm);font-size:.85rem}
.v2 .dropdown-panel a:hover{background:var(--c-teal-xlt);color:var(--c-teal)}
.v2 .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:4px}
.v2 .nav-toggle span{display:block;width:22px;height:2px;background:var(--c-head);border-radius:2px}
.v2 .nav-mobile-panel{display:none;flex-direction:column;gap:2px;padding:10px 0 18px}
.v2 .nav-mobile-panel a{padding:11px 4px;font-size:.9375rem;font-weight:600;border-bottom:1px solid var(--c-border)}
.v2.nav-open .nav-mobile-panel{display:flex}

/* BREADCRUMB */
.v2 .breadcrumb-bar{background:var(--c-ground);border-bottom:1px solid var(--c-border);padding:14px 0}
.v2 .breadcrumb{font-size:.8125rem;color:var(--c-muted);display:flex;gap:6px;flex-wrap:wrap}
.v2 .breadcrumb a{color:var(--c-teal);font-weight:600}
.v2 .breadcrumb a:hover{text-decoration:underline}
.v2 .breadcrumb span[aria-current]{color:var(--c-body);font-weight:600}

/* PAGE HERO (inner pages) */
.v2 .page-hero{padding:64px 0 60px;background:linear-gradient(160deg,var(--c-teal-xlt) 0%,var(--c-white) 60%)}
.v2 .page-hero .eyebrow{margin-bottom:14px}
.v2 .page-hero p{font-size:1.0625rem;max-width:680px;margin-top:14px}
.v2 .hero-cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:28px}
.v2 .hero-stats{display:flex;gap:32px;flex-wrap:wrap;margin-top:32px}
.v2 .hero-stats .stat-num{font-size:1.75rem}

/* HOME HERO — full-bleed background video */
.v2 .hero{padding:80px 0 72px;background:linear-gradient(160deg,var(--c-teal-xlt) 0%,var(--c-white) 55%);position:relative;overflow:hidden}
.v2 .hero::before{content:'';position:absolute;right:-80px;top:-80px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(83,169,220,.08) 0%,transparent 65%);pointer-events:none}
.v2 .hero::after{content:'';position:absolute;left:-60px;bottom:-60px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(180,83,9,.06) 0%,transparent 65%);pointer-events:none}
.v2 .hero-inner{display:grid;grid-template-columns:1fr 480px;gap:64px;align-items:center;position:relative;z-index:1}
.v2 .hero-kicker{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.v2 .hero-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--c-teal-mid);flex-shrink:0}
.v2 .hero-kicker span{font-size:.8125rem;font-weight:700;color:var(--c-teal);letter-spacing:.05em;text-transform:uppercase}
.v2 .hero h1{margin-bottom:20px}
.v2 .hero h1 em{font-style:normal;color:var(--c-teal)}
.v2 .hero-lead{font-size:1.0625rem;color:var(--c-body);max-width:480px;margin-bottom:32px}
.v2 .hero-trust{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.v2 .hero-trust span{font-size:.8125rem;color:var(--c-muted);font-weight:500}
.v2 .trust-badge{background:var(--c-ground);border:1px solid var(--c-border);border-radius:var(--r-pill);padding:5px 14px;font-size:.75rem;font-weight:700;color:var(--c-body)}

/* Right-column visual: the animated sample-report card (no video — see hero-note
   in the markup for why: kept simple and reliable rather than fighting video
   decode/crop issues across browsers). */
.v2 .hero-visual{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-xl);padding:40px;min-height:380px;display:flex;flex-direction:column;box-shadow:var(--sh-lg)}
.v2 .hero-note{background:rgba(255,255,255,.08);border-radius:var(--r-md);padding:14px 16px;display:flex;align-items:center;gap:10px}
.v2 .hero-note-ico{font-size:1.25rem}
.v2 .hero-note div{color:#fff;font-size:.8125rem;font-weight:700}

/* HERO HIGHLIGHTS CAROUSEL — real facts pulled from the explainer video's
   script, rebuilt as native content (not a screenshot/video) so it matches
   the design system and never fights codec/autoplay/cropping issues. */
.v2 .highlights-carousel{flex:1;display:flex;flex-direction:column;min-height:0}
.v2 .hl-viewport{overflow:hidden;flex:1}
.v2 .hl-track{display:flex;height:100%;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.v2 .hl-slide{flex:0 0 100%;display:flex;flex-direction:column;justify-content:center}
.v2 .hl-ico{width:64px;height:64px;border-radius:50%;background:var(--c-teal);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:22px;flex-shrink:0;box-shadow:0 8px 18px rgba(27,122,179,.28)}
.v2 .hl-ico svg{width:30px;height:30px}
.v2 .hl-ico.hl-ico-gold{background:var(--c-gold);box-shadow:0 8px 18px rgba(180,83,9,.28)}
.v2 .hl-slide h3{color:var(--c-teal);font-size:1.3125rem;margin-bottom:12px;letter-spacing:-.015em}
.v2 .hl-slide p{color:var(--c-body);font-size:.9375rem;line-height:1.65}
.v2 .hl-slide ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.v2 .hl-slide ul li{color:var(--c-body);font-size:.9rem;line-height:1.5;display:flex;align-items:flex-start;gap:9px}
.v2 .hl-slide ul li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--c-teal-mid);margin-top:7px;flex-shrink:0}
.v2 .hl-dots{display:flex;gap:8px;justify-content:center;margin-top:24px}
.v2 .hl-dot{width:8px;height:8px;border-radius:50%;background:var(--c-border);border:none;padding:0;cursor:pointer;transition:var(--ease)}
.v2 .hl-dot.active{background:var(--c-teal-mid);width:24px;border-radius:var(--r-pill)}

/* Trio layout — recreates the video's "3 Key Performance Aspects" row exactly:
   three circular icon badges with a label under each. */
.v2 .hl-trio{display:flex;justify-content:space-between;gap:14px;margin-top:6px}
.v2 .hl-trio-item{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;min-width:0}
.v2 .hl-trio-ico{width:58px;height:58px;border-radius:50%;background:var(--c-teal);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:12px;box-shadow:0 6px 14px rgba(27,122,179,.28)}
.v2 .hl-trio-ico svg{width:26px;height:26px}
.v2 .hl-trio-item h4{font-size:.8125rem;font-weight:800;color:var(--c-head);margin-bottom:4px}
.v2 .hl-trio-item p{font-size:.75rem;color:var(--c-muted);line-height:1.4}

/* Slide 1 — centered icon + heading + quote, matching the video's opening card */
.v2 .hl-slide.hl-center{align-items:center;text-align:center}
.v2 .hl-slide.hl-center .hl-ico{margin-left:auto;margin-right:auto}
.v2 .hl-quote{position:relative;font-size:1rem;color:var(--c-body);line-height:1.7;max-width:400px;margin:0 auto}
.v2 .hl-quote::before{content:'\201C';color:var(--c-teal-lt);font-size:3rem;font-weight:900;display:block;line-height:.4;margin-bottom:8px}

/* Slide 2 — bullet list on the left, abstract network illustration on the right */
.v2 .hl-duo{display:flex;align-items:center;gap:20px;margin-top:6px}
.v2 .hl-duo-copy{flex:1;min-width:0}
.v2 .hl-network{width:130px;height:130px;flex-shrink:0;color:var(--c-teal)}

/* Slide 4 — audience segments as a 2×2 grid of the same icon tiles the other
   slides use (was a plain typographic stack with per-line colors; client asked
   for icon consistency with the other slides, Round 8). */
.v2 .hl-quad{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;width:100%}
.v2 .hl-quad .hl-pair-item{padding:16px 10px}

/* Slide 5 — two icon+label columns plus a closing recommendation note */
.v2 .hl-pair{display:flex;gap:16px;margin-top:8px}
.v2 .hl-pair-item{flex:1;text-align:center;background:var(--c-ground);border-radius:var(--r-md);padding:20px 10px}
.v2 .hl-pair-ico{width:46px;height:46px;border-radius:50%;background:var(--c-teal);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.v2 .hl-pair-ico svg{width:22px;height:22px}
.v2 .hl-pair-item h4{font-size:.8125rem;font-weight:800;color:var(--c-head)}
.v2 .hl-note-line{margin-top:16px;text-align:center;font-size:.8125rem;color:var(--c-teal);font-weight:700}

/* AI DASHBOARD MOCKUP CARD (reused inside a light .feature-media slot) */
.v2 .dashboard-mockup{background:none;padding:0;display:flex;align-items:center;justify-content:center}
.v2 .vis-card.vis-card-dark{width:100%;max-width:380px;background:linear-gradient(145deg,var(--c-teal) 0%,var(--c-teal-dp) 100%);border-radius:var(--r-xl);padding:28px 26px;box-shadow:var(--sh-lg);border:none}
.v2 .vis-pct{font-weight:700}

/* LIVE METRICS (Psychometric Analysis) — radial engagement gauge + stat chips,
   same vis-card-dark shell as the CIAO report card for a consistent report look. */
.v2 .radial-row{display:flex;align-items:center;gap:24px;margin-top:16px}
.v2 .radial-col{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}
.v2 .radial-gauge{position:relative;width:110px;height:110px}
.v2 .radial-col .radial-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.v2 .radial-track{fill:none;stroke:rgba(255,255,255,.18);stroke-width:10}
.v2 .radial-fill{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round;stroke-dasharray:314.16;stroke-dashoffset:314.16;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.3,1)}
.v2 .radial-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.v2 .radial-num{font-size:1.375rem;font-weight:900;color:#fff;line-height:1}
.v2 .radial-caption{font-size:.6875rem;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.04em;text-align:center}
.v2 .metric-chip-col{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}
.v2 .metric-chip{background:rgba(255,255,255,.1);border-radius:var(--r-sm);padding:9px 14px}
.v2 .metric-chip .chip-num{display:block;font-size:1.0625rem;font-weight:800;color:#fff;line-height:1.2}
.v2 .metric-chip label{display:block;font-size:.6875rem;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
@media(prefers-reduced-motion:reduce){.v2 .radial-fill{transition:none}}
.v2 .vis-card{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-md);padding:18px 20px;backdrop-filter:blur(4px)}
.v2 .vis-card-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.v2 .vis-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.v2 .vis-avatar svg{width:18px;height:18px;color:#fff}
.v2 .vis-avatar.scanning{position:relative}
.v2 .vis-avatar.scanning::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);animation:ai-pulse 2.4s ease-out infinite}
@media(prefers-reduced-motion:reduce){.v2 .vis-avatar.scanning::after{animation:none;display:none}}
.v2 .vis-name{font-size:.875rem;font-weight:700;color:#fff}
.v2 .vis-role{font-size:.75rem;color:rgba(255,255,255,.6)}
.v2 .vis-bar-row{display:flex;flex-direction:column;gap:7px}
.v2 .vis-bar{height:7px;background:rgba(255,255,255,.15);border-radius:var(--r-pill);overflow:hidden}
.v2 .vis-bar-fill{height:100%;width:0;border-radius:var(--r-pill);background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.4));transition:width 1s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){.v2 .vis-bar-fill{transition:none}}
.v2 .vis-label{display:flex;justify-content:space-between;font-size:.7rem;color:rgba(255,255,255,.6)}

/* STATS BAND (real, client-corrected figures only) */
.v2 .stats-band{background:var(--c-teal);padding:48px 0}
.v2 .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.v2 .stat-item{text-align:center;padding:20px 16px;position:relative}
.v2 .stat-item+.stat-item::before{content:'';position:absolute;left:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.2)}
.v2 .stat-num{font-size:2.375rem;font-weight:900;color:#fff;letter-spacing:-.045em;line-height:1}
.v2 .stat-unit{font-size:1.25rem}
.v2 .stat-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.6);margin-top:6px}

/* ASSESSMENT / FEATURE CARDS */
.v2 .assess-section{background:var(--c-ground)}
.v2 .section-header{text-align:center;max-width:640px;margin:0 auto 52px}
.v2 .section-header p{color:var(--c-body);margin-top:12px;font-size:1.0625rem}
.v2 .assess-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.v2 .assess-card{background:var(--c-white);border-radius:var(--r-lg);padding:32px 28px;box-shadow:var(--sh-sm);transition:var(--ease);border:2px solid transparent}
.v2 .assess-card:hover{box-shadow:var(--sh-md);border-color:var(--c-teal-lt);transform:translateY(-4px)}
.v2 .assess-ico{width:52px;height:52px;border-radius:var(--r-md);background:var(--c-teal-xlt);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:18px}
.v2 .assess-tag{display:inline-block;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--c-teal-dp);background:var(--c-teal-lt);padding:3px 10px;border-radius:var(--r-pill);margin-bottom:10px}
.v2 .assess-card p{font-size:.9rem;color:var(--c-muted);margin-top:6px}

/* HUB LINK CARDS (Our Assessments -> Highschool / Professional) */
.v2 .hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.v2 .hub-card{background:#fff;border-radius:var(--r-lg);padding:36px 32px;box-shadow:var(--sh-sm);border:2px solid var(--c-border);transition:var(--ease);display:flex;flex-direction:column;gap:14px}
.v2 .hub-card:hover{border-color:var(--c-teal);box-shadow:var(--sh-md);transform:translateY(-4px)}
.v2 .hub-card .assess-ico{width:60px;height:60px;font-size:1.75rem}
.v2 .hub-card .hub-link{font-weight:700;color:var(--c-teal);display:inline-flex;align-items:center;gap:6px;margin-top:auto}

/* WHY / TWO COLUMN */
.v2 .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.v2 .why-left h2{margin-bottom:16px}
.v2 .why-left p{font-size:1.0625rem;color:var(--c-body);margin-bottom:28px}
.v2 .why-list{display:flex;flex-direction:column;gap:18px}
.v2 .why-item{display:flex;align-items:flex-start;gap:14px}
.v2 .why-ico{width:40px;height:40px;border-radius:var(--r-sm);background:var(--c-teal-lt);display:flex;align-items:center;justify-content:center;font-size:1.125rem;flex-shrink:0;margin-top:2px}
.v2 .why-body h3{font-size:.9375rem;margin-bottom:3px}
.v2 .why-body p{font-size:.875rem;color:var(--c-muted)}

/* ALTERNATING FEATURE ROWS (Products / Dashboard pages) */
.v2 .feature-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.v2 .feature-row+.feature-row{margin-top:72px}
.v2 .feature-row.reverse .feature-media{order:2}
.v2 .feature-media{background:var(--c-teal-xlt);border-radius:var(--r-lg);min-height:280px;display:flex;align-items:center;justify-content:center;font-size:4rem;color:var(--c-teal)}

/* Real admin dashboard preview (dashboard.html) — genuine product screens,
   candidate names blurred at the source (baked into the video, not CSS). */
.v2 .dashboard-preview{margin-bottom:60px}
.v2 .dash-viewport{overflow:hidden;border-radius:var(--r-lg);box-shadow:var(--sh-lg);background:#0d2038}
.v2 .dash-track{display:flex;transition:transform .5s var(--ease)}
.v2 .dash-slide{flex:0 0 100%;min-width:0}
.v2 .dash-slide img{width:100%;display:block}
.v2 .dash-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
.v2 .dash-arrow{background:var(--c-white);border:1px solid var(--c-border);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--c-body);font-size:.9rem;transition:var(--ease)}
.v2 .dash-arrow:hover{background:var(--c-teal);border-color:var(--c-teal);color:#fff}
.v2 .dash-dots{display:flex;gap:8px}
.v2 .dash-dot{width:8px;height:8px;border-radius:50%;border:none;background:var(--c-border);cursor:pointer;padding:0;transition:var(--ease)}
.v2 .dash-dot.active{background:var(--c-teal);transform:scale(1.25)}
.v2 .trend-bars{display:flex;align-items:flex-end;gap:12px;height:150px;padding:0 8px}
.v2 .trend-bar{flex:1;height:0;border-radius:6px 6px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.35) 100%);transition:height 1s var(--ease)}
.v2 .dashboard-preview-tag{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:14px;font-size:.8125rem;color:var(--c-muted);font-weight:600}

/* DASHBOARD PAGE — 4 feature-graphic cards, same vis-card-dark shell,
   each with a small continuous or scroll-triggered motion tied to its topic. */
.v2 .feature-graphic{width:100%;max-width:380px;margin:0 auto}

/* 1. AI Capabilities — rotating scan ring + floating data tags */
.v2 .ai-scan-wrap{position:relative;height:170px;display:flex;align-items:center;justify-content:center}
.v2 .ai-scan-ring{width:120px;height:120px;transform-origin:60px 60px}
.v2 .ai-scan-sweep{stroke-dasharray:70 250;animation:ai-rotate 3.2s linear infinite;transform-origin:60px 60px}
@keyframes ai-rotate{to{transform:rotate(360deg)}}
.v2 .ai-scan-core{position:absolute;font-size:.8125rem;font-weight:900;color:#fff;letter-spacing:.03em;z-index:1}
.v2 .ai-scan-core::after{content:'';position:absolute;inset:-14px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);animation:ai-pulse 2.4s ease-out infinite}
@keyframes ai-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.v2 .ai-scan-core::after{animation:none;display:none}}
.v2 .ai-tag{position:absolute;background:rgba(255,255,255,.14);color:#fff;font-size:.7rem;font-weight:700;padding:5px 11px;border-radius:var(--r-pill);animation:ai-float 3.6s ease-in-out infinite;animation-delay:calc(var(--d) * .5s)}
.v2 .ai-tag:nth-child(3){top:6px;left:6px}
.v2 .ai-tag:nth-child(4){bottom:14px;left:0}
.v2 .ai-tag:nth-child(5){bottom:14px;right:0}
@keyframes ai-float{0%,100%{transform:translateY(0);opacity:.75}50%{transform:translateY(-6px);opacity:1}}
@media(prefers-reduced-motion:reduce){.v2 .ai-scan-sweep,.v2 .ai-tag{animation:none}}

/* 2. Leadership — self-drawing growth line + count-up stat */
.v2 .growth-chart{width:100%;height:90px;margin:10px 0 6px;overflow:visible}
.v2 .growth-line{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.3,1)}
.v2 .growth-dot{fill:var(--c-gold-lt);transform-origin:240px 14px;animation:growth-pulse 1.8s ease-in-out infinite}
@keyframes growth-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.6}}
@media(prefers-reduced-motion:reduce){.v2 .growth-dot{animation:none}}
.v2 .growth-stat{color:#fff;font-size:1.375rem;font-weight:900;text-align:center}
.v2 .growth-stat-label{color:rgba(255,255,255,.65);font-size:.75rem;text-align:center;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
@media(prefers-reduced-motion:reduce){.v2 .growth-line{transition:none}}

/* 3. Lead Teams — central node + staggered satellite team nodes */
.v2 .team-chart{position:relative;height:170px;display:flex;align-items:center;justify-content:center}
.v2 .team-lines{position:absolute;inset:0}
.v2 .team-lines line{stroke:rgba(255,255,255,.25);stroke-width:1.5}
.v2 .team-lead{position:absolute;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--c-teal);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.75rem;box-shadow:0 6px 14px rgba(0,0,0,.2),0 0 0 0 rgba(255,255,255,.5);z-index:1;animation:lead-pulse 2.4s ease-out infinite}
@keyframes lead-pulse{0%{box-shadow:0 6px 14px rgba(0,0,0,.2),0 0 0 0 rgba(255,255,255,.45)}100%{box-shadow:0 6px 14px rgba(0,0,0,.2),0 0 0 12px rgba(255,255,255,0)}}
@media(prefers-reduced-motion:reduce){.v2 .team-lead{animation:none}}
.v2 .team-node{position:absolute;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--c-teal);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;z-index:1}
.v2 .team-node svg{width:16px;height:16px}
.v2 .team-node.n1{top:6px;left:36%}
.v2 .team-node.n2{top:30%;right:4px}
.v2 .team-node.n3{bottom:6px;right:14%}
.v2 .team-node.n4{bottom:6px;left:14%}
.v2 .team-node.n5{top:30%;left:4px}

/* 4. Track ROI — current vs required bar comparison */
.v2 .roi-bars{display:flex;justify-content:space-between;align-items:flex-end;height:150px;gap:10px;padding:0 4px}
.v2 .roi-bar-pair{display:flex;align-items:flex-end;gap:4px;height:120px;flex:1}
.v2 .roi-bar{width:14px;border-radius:5px 5px 0 0;height:0;transition:height 1s cubic-bezier(.2,.7,.3,1);position:relative;overflow:hidden}
.v2 .roi-bar.required::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 100%);animation:roi-shimmer 2.6s ease-in-out infinite;animation-delay:1s}
@keyframes roi-shimmer{0%{transform:translateY(100%)}100%{transform:translateY(-100%)}}
@media(prefers-reduced-motion:reduce){.v2 .roi-bar.required::after{animation:none}}
.v2 .roi-bar.current{background:rgba(255,255,255,.35)}
.v2 .roi-bar.required{background:#fff}
.v2 .roi-bar-label{text-align:center;font-size:.65rem;color:rgba(255,255,255,.7);margin-top:8px;text-transform:uppercase;letter-spacing:.02em}
.v2 .roi-legend{display:flex;gap:18px;justify-content:center;margin-top:14px}
.v2 .roi-legend span{display:flex;align-items:center;gap:6px;font-size:.75rem;color:rgba(255,255,255,.75)}
.v2 .roi-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.v2 .roi-legend .lg-current{background:rgba(255,255,255,.35)}
.v2 .roi-legend .lg-required{background:#fff}

/* CONVERGE — several inputs flowing into one unified output. Used wherever
   the copy talks about combining separate things into a single result. */
.v2 .converge-wrap{position:relative;height:200px;display:flex;align-items:center;justify-content:center}
.v2 .converge-lines{position:absolute;inset:0}
.v2 .converge-lines line{stroke:rgba(255,255,255,.35);stroke-width:1.5;stroke-dasharray:5 4;animation:converge-flow 1.8s linear infinite}
@keyframes converge-flow{to{stroke-dashoffset:-18}}
.v2 .converge-node{position:absolute;width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--c-teal);font-size:.6875rem;font-weight:800;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;padding:6px;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.v2 .converge-center{position:absolute;width:78px;height:78px;border-radius:50%;background:#fff;color:var(--c-teal);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.75rem;text-align:center;box-shadow:0 8px 18px rgba(0,0,0,.22);z-index:2;line-height:1.15;padding:6px}
@media(prefers-reduced-motion:reduce){.v2 .converge-lines line{animation:none}}

/* CHAIN — a sequence of connected steps with a light pulse traveling along
   the connectors, for copy describing an ordered process or track. */
.v2 .chain-row{display:flex;align-items:center;justify-content:center;margin:8px 0 18px}
.v2 .chain-link{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.8125rem;flex-shrink:0}
.v2 .chain-connector{width:40px;height:2px;background:rgba(255,255,255,.3);position:relative;overflow:hidden;flex-shrink:0}
.v2 .chain-connector::after{content:'';position:absolute;top:0;left:-40%;width:40%;height:100%;background:#fff;animation:chain-flow 2s linear infinite}
.v2 .chain-row.light .chain-link{background:var(--c-teal-lt);border-color:var(--c-teal);color:var(--c-teal)}
.v2 .chain-row.light .chain-connector{background:var(--c-border)}
.v2 .chain-row.light .chain-connector::after{background:var(--c-teal-mid)}
@keyframes chain-flow{to{left:140%}}
.v2 .chain-labels{display:flex;justify-content:center;gap:0;text-align:center}
.v2 .chain-labels span{font-size:.7rem;color:rgba(255,255,255,.75);font-weight:600}
@media(prefers-reduced-motion:reduce){.v2 .chain-connector::after{animation:none;left:0;width:100%}}

/* BRANCH — one source fanning out to several destinations (e.g. one student
   profile mapped to multiple recommended paths). Paths reuse .growth-line's
   self-draw JS by sharing that class. The svg uses a 0-100 x viewBox with
   preserveAspectRatio="none" so 1 unit == 1% of the wrapper's actual width —
   node positions below use the same % values via calc() so the circles and
   the line endpoints stay pinned together at any card width, instead of
   drifting apart the way a default-scaled fixed viewBox would. */
.v2 .branch-wrap{position:relative;height:150px}
.v2 .branch-node{position:absolute;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--c-teal);font-size:.65rem;font-weight:800;display:flex;align-items:center;justify-content:center;z-index:1;box-shadow:0 0 0 0 rgba(255,255,255,.5);animation:branch-pulse 2.6s ease-out infinite}
.v2 .branch-node.source{top:50%;left:calc(12% - 18px);transform:translateY(-50%);width:36px;height:36px;animation:lead-pulse 2.4s ease-out infinite}
.v2 .branch-node:nth-child(3){animation-delay:.3s}
.v2 .branch-node:nth-child(4){animation-delay:.6s}
.v2 .branch-node:nth-child(5){animation-delay:.9s}
@keyframes branch-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@media(prefers-reduced-motion:reduce){.v2 .branch-node{animation:none}}
.v2 .feature-copy h3{font-size:1.375rem;margin-bottom:12px}
.v2 .feature-copy p{font-size:1rem;color:var(--c-body)}

/* NUMBERED STEPS (How it works: Invite / Assess / Analyse) */
.v2 .steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:step}
.v2 .step-item{background:#fff;border-radius:var(--r-lg);padding:30px 26px;box-shadow:var(--sh-sm);position:relative}
.v2 .step-num{width:40px;height:40px;border-radius:50%;background:var(--c-teal);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:16px}

/* TESTIMONIALS */
.v2 .testimonials-section{background:var(--c-ground);overflow:hidden}
.v2 .testi-viewport{overflow:hidden;position:relative}
.v2 .testi-track{display:flex;transition:transform .5s var(--ease)}
.v2 .testi-slide{flex:0 0 100%;padding:4px}
.v2 .testi-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:36px 40px;max-width:760px;margin:0 auto;text-align:center}
.v2 .testi-quote{font-size:1.125rem;color:var(--c-head);font-weight:500;line-height:1.65;margin-bottom:20px}
.v2 .testi-quote::before{content:'“';color:var(--c-teal);font-size:1.5rem}
.v2 .testi-quote::after{content:'”';color:var(--c-teal);font-size:1.5rem}
.v2 .testi-meta{display:flex;flex-direction:column;align-items:center;gap:2px}
.v2 .testi-name{font-weight:700;color:var(--c-teal)}
.v2 .testi-role{font-size:.8125rem;color:var(--c-muted)}
.v2 .testi-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:28px}
.v2 .testi-arrow{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--c-border);box-shadow:var(--sh-sm);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center}
.v2 .testi-arrow:hover{background:var(--c-teal);color:#fff;border-color:var(--c-teal)}
.v2 .testi-dots{display:flex;gap:8px}
.v2 .testi-dot{width:8px;height:8px;border-radius:50%;background:var(--c-border);cursor:pointer;border:none;padding:0}
.v2 .testi-dot.active{background:var(--c-teal-mid);width:22px;border-radius:var(--r-pill)}

/* FAQ */
.v2 .faq-section{max-width:800px;margin:0 auto;padding-left:40px;padding-right:40px}
.v2 .faq-item{border-bottom:1px solid var(--c-border)}
.v2 .faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:20px 4px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:1rem;font-weight:700;color:var(--c-head)}
.v2.lang-ar .faq-q{text-align:right}
.v2 .faq-icon{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--c-teal-lt);color:var(--c-teal);display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:transform var(--ease)}
.v2 .faq-item.open .faq-icon{transform:rotate(45deg)}
.v2 .faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.v2 .faq-a p{padding:0 4px 20px;color:var(--c-body);font-size:.9375rem}

/* NEWS */
.v2 .article-body p{font-size:1.0625rem;margin-bottom:22px}
.v2 .related-news-section{padding-top:0}
.v2 .news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.v2 .news-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:28px;display:flex;flex-direction:column;gap:10px;transition:var(--ease)}
.v2 .news-card:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.v2 .news-card .news-img{width:100%;height:160px;object-fit:cover;border-radius:var(--r-md);background:var(--c-teal-xlt)}
.v2 .news-date{font-size:.75rem;font-weight:700;color:var(--c-gold);text-transform:uppercase;letter-spacing:.05em}
.v2 .news-card h3{font-size:1.0625rem}
.v2 .news-card h3 a{color:var(--c-teal-mid);text-decoration:none}
.v2 .news-card h3 a:hover{color:var(--c-teal-dp)}
.v2 .news-card p{font-size:.875rem;color:var(--c-muted)}
.v2 .news-link{font-size:.8125rem;font-weight:700;color:var(--c-teal);margin-top:auto}

/* OFFICE / CONTACT GRID */
.v2 .office-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.v2 .office-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:28px}
.v2 .office-card h3{color:var(--c-teal)}
.v2 .office-card p{font-size:.875rem;margin-top:6px}
.v2 .office-map{width:100%;height:200px;border:0;border-radius:var(--r-md);margin-top:16px;display:block}

/* PARTNER SELECT */
.v2 .partner-select{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:32px;max-width:600px;margin:0 auto}
.v2 .partner-select select{width:100%;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--c-border);font-size:.9375rem;margin-top:10px}
.v2 .partner-office{margin:2px 0 18px;padding:14px 16px;background:var(--c-teal-xlt);border:1px solid var(--c-teal-lt);border-radius:var(--r-sm);font-size:.875rem;line-height:1.7}
.v2 .partner-office h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--c-teal-dp);margin-bottom:6px}
.v2 .partner-office a{color:var(--c-teal);text-decoration:underline}

/* LEGAL (Privacy Policy / Terms) — long-form verbatim legal text, English only per source */
.v2 .legal-content{max-width:800px;margin:0 auto}
.v2 .legal-content h2{margin-bottom:8px}
.v2 .legal-content .legal-updated{color:var(--c-muted);font-size:.875rem;margin-bottom:32px}
.v2 .legal-content h4{color:var(--c-head);font-size:1.0625rem;margin-top:32px;margin-bottom:10px}
.v2 .legal-content p{color:var(--c-body);font-size:.9375rem;margin-bottom:16px}
.v2 .legal-content a{color:var(--c-teal);text-decoration:underline}

/* FORM */
.v2 .form-card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:36px;max-width:640px;margin:0 auto}
.v2 .form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.v2 .form-row label{font-size:.8125rem;font-weight:700;color:var(--c-body)}
.v2 .form-row input,.v2 .form-row textarea,.v2 .form-row select{padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--c-border);font-size:.9375rem;font-family:inherit}
.v2 .form-success{margin-top:16px;padding:12px 16px;background:var(--c-teal-xlt);border:1px solid var(--c-teal-lt);border-radius:var(--r-sm);color:var(--c-teal-dp);font-size:.875rem}

/* CTA */
.v2 .cta-section{background:linear-gradient(135deg,var(--c-teal) 0%,var(--c-teal-dp) 100%);padding:80px 0}
/* Teal button on the teal band needs a white ring to stay visible */
.v2 .cta-section .btn-teal{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 4px 16px rgba(0,0,0,.18)}
.v2 .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.v2 .cta-text h2{color:#fff;margin-bottom:10px}
.v2 .cta-text p{color:rgba(255,255,255,.7);max-width:460px;font-size:1.0625rem}
.v2 .cta-actions{display:flex;gap:14px;flex-shrink:0;flex-wrap:wrap}

/* FOOTER (reorganized per client request: About us / Privacy Policy / Terms and Conditions / Contact / Become a Partner sit bottom-left(EN)/bottom-right(AR), directly above "Powered by SD") */
.v2 footer{background:#0d2038;padding:56px 0 0}
.v2 .ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)}
.v2 .ft-brand{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.85);font-size:1.125rem;font-weight:800;margin-bottom:12px}
.v2 .ft-gem{width:26px;height:26px;border-radius:50% 6px 50% 6px;background:linear-gradient(135deg,var(--c-teal-mid),var(--c-teal));flex-shrink:0}
.v2 .ft-blurb{color:rgba(255,255,255,.45);font-size:.8125rem;max-width:320px;line-height:1.7}
.v2 .ft-col h4{color:rgba(255,255,255,.8);font-size:.8125rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.v2 .ft-col{display:flex;flex-direction:column}
.v2 .ft-links{display:flex;flex-direction:column;gap:10px}
.v2 .ft-links a{font-size:.8438rem;color:rgba(255,255,255,.5);transition:var(--ease)}
.v2 .ft-links a:hover{color:#fff}
.v2 .ft-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;flex-wrap:wrap}
.v2 .ft-copy{font-size:.75rem;color:rgba(255,255,255,.35)}
.v2 .ft-powered{font-size:.75rem;color:rgba(255,255,255,.35)}
.v2 .ft-powered strong{color:rgba(255,255,255,.55)}

/* DEMO BADGE */


@media(max-width:640px){}

/* RTL */
.v2.lang-ar{direction:rtl;text-align:right}
.v2.lang-ar .hero::before{right:auto;left:-80px}
.v2.lang-ar .hero::after{left:auto;right:-60px}
.v2.lang-ar .why-item{flex-direction:row-reverse}
.v2.lang-ar .cta-inner{flex-direction:row-reverse}
.v2.lang-ar .feature-row.reverse .feature-media{order:0}
.v2.lang-ar .breadcrumb{flex-direction:row-reverse;justify-content:flex-end}
.v2.lang-ar .ft-grid{direction:rtl}

/* LANG TOGGLE */
.v2 .ar-text{display:none}.v2 .ar-inline{display:none}
.v2 .en-text{display:block}.v2 .en-inline{display:inline}
.v2.lang-ar .en-text,.v2.lang-ar .en-inline{display:none}
.v2.lang-ar .ar-text{display:block}
.v2.lang-ar .ar-inline{display:inline}

/* SCROLL REVEAL — one consistent pattern reused everywhere, not scattered per-section effects */
.v2 .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s cubic-bezier(.2,.7,.3,1),transform .5s cubic-bezier(.2,.7,.3,1)}
.v2 .reveal.in-view{opacity:1;transform:translateY(0)}
.v2 .reveal-group .reveal:nth-child(2){transition-delay:.08s}
.v2 .reveal-group .reveal:nth-child(3){transition-delay:.16s}
.v2 .reveal-group .reveal:nth-child(4){transition-delay:.24s}
.v2 .reveal-group .reveal:nth-child(5){transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.v2 .reveal{opacity:1;transform:none;transition:none}}

/* AMBIENT MOTION (Round 8) — after a graphic's one-shot entrance finishes it
   hands over to a gentle endless loop, so no visual ever goes dead (client
   decision: "keep moving forever"). One shared system — two float amplitudes,
   one sheen, one breathe — with staggered delays, not a new effect per section.
   Everything below is disabled under prefers-reduced-motion. */
@keyframes idle-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes idle-float-sm{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes bar-sheen{0%{left:-45%}100%{left:145%}}
@keyframes soft-breathe{0%,100%{opacity:1}50%{opacity:.72}}
@keyframes line-glow{0%,100%{stroke-width:3}50%{stroke-width:4.2}}

/* Big visual cards drift slowly */
.v2 .hero-visual{animation:idle-float 6.5s ease-in-out 1.2s infinite}
.v2 .vis-card-dark{animation:idle-float 5.6s ease-in-out .6s infinite}
.v2 .feature-media>svg{animation:idle-float 5s ease-in-out infinite}

/* Icon badges bob subtly, staggered so grids ripple instead of marching in sync */
.v2 .hl-ico,.v2 .hl-trio-ico,.v2 .hl-pair-ico{animation:idle-float-sm 4.6s ease-in-out infinite}
.v2 .hl-trio-item:nth-child(2) .hl-trio-ico{animation-delay:.5s}
.v2 .hl-trio-item:nth-child(3) .hl-trio-ico{animation-delay:1s}
.v2 .assess-ico,.v2 .why-ico,.v2 .step-num{animation:idle-float-sm 4.2s ease-in-out infinite}
.v2 .assess-card:nth-child(2) .assess-ico,.v2 .hub-card:nth-child(2) .assess-ico{animation-delay:.6s}
.v2 .assess-card:nth-child(3) .assess-ico{animation-delay:1.2s}
.v2 .why-item:nth-child(2) .why-ico{animation-delay:.5s}
.v2 .why-item:nth-child(3) .why-ico{animation-delay:1s}
.v2 .why-item:nth-child(4) .why-ico{animation-delay:1.5s}
.v2 .step-item:nth-child(2) .step-num{animation-delay:.7s}
.v2 .step-item:nth-child(3) .step-num{animation-delay:1.4s}

/* Diagram satellites float around their (already pulsing) centers */
.v2 .team-node,.v2 .converge-node{animation:idle-float-sm 4s ease-in-out infinite}
.v2 .team-node.n2,.v2 .converge-node:nth-of-type(2){animation-delay:.4s}
.v2 .team-node.n3,.v2 .converge-node:nth-of-type(3){animation-delay:.8s}
.v2 .team-node.n4{animation-delay:1.2s}
.v2 .team-node.n5{animation-delay:1.6s}

/* One-shot graphics get a persistent after-life: sheen on the CIAO bars,
   breathing on the radial gauge, glow on the drawn growth line, and the
   ROI shimmer extended to the "current" bars (the "required" bars already
   shimmer). Delays let each entrance transition finish first. */
.v2 .vis-bar-fill{position:relative;overflow:hidden}
.v2 .vis-bar-fill::after{content:'';position:absolute;top:0;bottom:0;left:-45%;width:45%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));animation:bar-sheen 3.2s ease-in-out 1.6s infinite}
.v2 .radial-fill{animation:soft-breathe 3.6s ease-in-out 1.8s infinite}
.v2 .growth-line{animation:line-glow 3s ease-in-out 2.4s infinite}
.v2 .roi-bar.current::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);animation:roi-shimmer 2.6s ease-in-out infinite;animation-delay:2.2s}

/* Elements still waiting on their scroll reveal hold their loops until the
   entrance has played — the handoff, not a competing transform. */
.v2 .reveal:not(.in-view){animation-play-state:paused}

@media(prefers-reduced-motion:reduce){
  .v2 .hero-visual,.v2 .vis-card-dark,.v2 .feature-media>svg,.v2 .hl-ico,.v2 .hl-trio-ico,.v2 .hl-pair-ico,.v2 .assess-ico,.v2 .why-ico,.v2 .step-num,.v2 .team-node,.v2 .converge-node,.v2 .radial-fill,.v2 .growth-line{animation:none}
  .v2 .vis-bar-fill::after,.v2 .roi-bar.current::after{animation:none;display:none}
}

/* Round 8 — Request Demo entries outside the desktop header keep the exact same
   teal-button look as the header CTA (client request: one button, one standard style). */
.v2 .nav-mobile-panel .nav-mobile-cta{display:inline-flex;align-self:flex-start;background:var(--c-teal);color:#fff;font-size:.9375rem;font-weight:700;padding:10px 20px;border-radius:var(--r-sm);border-bottom:none;margin:10px 4px 6px;box-shadow:0 2px 8px rgba(27,122,179,.35);transition:var(--ease)}
.v2 .nav-mobile-panel .nav-mobile-cta:hover{background:var(--c-teal-dp)}
.v2 .ft-links a.request-demo-trigger{display:inline-flex;align-self:flex-start;background:var(--c-teal);color:#fff;font-size:.8438rem;font-weight:700;padding:8px 16px;border-radius:var(--r-sm);margin-top:6px;transition:var(--ease)}
.v2 .ft-links a.request-demo-trigger:hover{background:var(--c-teal-dp);color:#fff}

/* FOCUS VISIBILITY */
.v2 a:focus-visible,.v2 button:focus-visible,.v2 input:focus-visible,.v2 textarea:focus-visible,.v2 select:focus-visible{outline:2px solid var(--c-teal);outline-offset:2px;border-radius:4px}

/* ICON SVGs inside badges — consistent sizing so custom icons replace emoji cleanly */
.v2 .assess-ico svg{width:26px;height:26px;color:var(--c-teal)}
.v2 .hub-card .assess-ico svg{width:30px;height:30px}
.v2 .why-ico svg{width:20px;height:20px;color:var(--c-teal)}
.v2 .feature-media>svg{width:88px;height:88px;color:var(--c-teal);opacity:.9}
.v2 .assess-card-5th .assess-ico svg,.v2 .assess-ico[style] svg{color:#fff}

/* FOOTER SOCIAL */
.v2 .ft-social{display:flex;gap:10px;margin-top:16px}
.v2 .ft-social a{width:32px;height:32px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);transition:var(--ease)}
.v2 .ft-social a:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.v2 .ft-social img{width:18px;height:18px;display:block}

/* REQUEST DEMO MODAL — mirrors the live app's Angular Material dialog,
   restyled in the teal/gold system. Injected once via script.js and reused
   by every .request-demo-trigger across pages. */
/* Note: --ease is "200ms cubic-bezier(...)" (duration+easing), so it must not fill the
   easing slot of a longhand shorthand — it would parse as a 200ms transition DELAY. */




















@media(max-width:640px){}

@media(max-width:960px){.v2 .hero-inner{grid-template-columns:1fr}.v2 .assess-grid{grid-template-columns:1fr 1fr}.v2 .why-grid{grid-template-columns:1fr}.v2 .cta-inner{flex-direction:column;text-align:center}.v2 .cta-actions{width:100%;justify-content:center}.v2 .feature-row{grid-template-columns:1fr}.v2 .feature-row.reverse .feature-media{order:0}.v2 .ft-grid{grid-template-columns:1fr 1fr}.v2 .hub-grid{grid-template-columns:1fr}.v2 .office-grid,.v2 .news-grid{grid-template-columns:1fr}.v2 .steps-row{grid-template-columns:1fr}}
@media(max-width:1260px){.v2 .nav-links{display:none}.v2 .nav-toggle{display:flex}}
@media(max-width:640px){.v2 .assess-grid{grid-template-columns:1fr}.v2 .stats-row{grid-template-columns:repeat(2,1fr)}.v2 .wrap{padding:0 20px}.v2 section{padding:56px 0}.v2 .ft-grid{grid-template-columns:1fr}.v2 .ft-bottom{flex-direction:column;align-items:flex-start}}


/* Phase-1 placeholder styling (stub pages until Phase 4) */
.v2 .v2-skeleton{max-width:720px;margin:96px auto;padding:40px;border:1px solid #E5E7EB;border-radius:24px;box-shadow:0 4px 20px rgba(0,0,0,.08);text-align:center}
.v2 .v2-skeleton h1{color:#1b7ab3;font-size:2rem;margin-bottom:12px}