/* SwimNexa Homepage V1 — standalone bilingual marketing frontend. */
:root {
  --ink: #082a3d;
  --ink-soft: #426073;
  --navy: #071d30;
  --navy-2: #082a40;
  --mint: #63f0d3;
  --aqua: #1bc3c3;
  --aqua-deep: #078e9d;
  --surface: #f7fafb;
  --white: #fff;
  --line: #e0eaee;
  --shadow: 0 20px 70px rgba(10, 44, 61, .075);
  --radius: 18px;
  --font: 'DM Sans', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  color-scheme: light;
}
[lang='ar'] { --font: 'Tajawal', 'DM Sans', Tahoma, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; min-width: 320px; font-family: var(--font); color: var(--ink); background: var(--white); font-size: 16px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #1cbac6; outline-offset: 4px; }
svg.icon { display: inline-block; width: 20px; height: 20px; stroke: currentColor; flex: 0 0 auto; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
.container { width: min(100% - 56px, 1200px); margin-inline: auto; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -100px; z-index: 5000; background: #fff; border: 2px solid #25c6c4; border-radius: 10px; padding: 12px 16px; }
.skip-link:focus { top: 10px; }

/* Header */
.site-header { position: absolute; inset-inline: 0; top: 0; z-index: 110; color: #edfaff; }
.header-grid { height: 88px; display: grid; grid-template-columns: 220px minmax(0,1fr) auto; align-items: center; gap: 25px; border-bottom: 1px solid rgba(224,248,252,.105); }
.brand { display: inline-flex; align-items: center; width: fit-content; min-width: 0; gap: 11px; text-align: start; direction: ltr; }
.brand-mark { display: block; border-radius: 14px; flex: 0 0 auto; }
.brand-wordmark { display: flex; flex-direction: column; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 25px; font-weight: 800; letter-spacing: -.075em; line-height: .95; white-space: nowrap; }
.brand-name { font-weight: 800; letter-spacing: -.075em; }
.brand-name em { font-style: normal; color: #75eddb; }
.brand-wordmark small { display: block; color: #a1cad2; margin-top: 8px; font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.main-nav { display: flex; justify-content: center; align-items: center; gap: clamp(12px, 1.9vw, 28px); min-width: 0; }
.main-nav a { position: relative; color: #c8d9e0; font-size: 13px; font-weight: 700; white-space: nowrap; transition: color .2s ease; }
.main-nav a:hover { color: #fff; }
.main-nav a::after { content: ''; position: absolute; inset-inline: 0; bottom: -11px; height: 2px; background: var(--mint); transform: scaleX(0); transition: transform .25s ease; }
.main-nav a:hover::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.locale-switch { direction: ltr; display: flex; align-items: center; gap: 7px; border: 1px solid rgba(245,255,255,.17); border-radius: 9px; padding: 6px 8px; color: #98b1c0; font-size: 12px; font-family: 'DM Sans', sans-serif; }
.locale-switch a { border-radius: 5px; padding: 1px 3px; font-weight: 700; }
.locale-switch a[aria-current='page'] { color: var(--mint); }
.locale-switch a:hover { color: #fff; }
.locale-slash { color: #46677a; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 10px; padding: 13px 18px; font-size: 13px; font-weight: 800; white-space: nowrap; text-align: center; line-height: 1.25; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button .icon { width: 17px; height: 17px; }
.button-primary { color: #062b36; background: linear-gradient(105deg,#75f2dd,#2bd1cb); box-shadow: 0 12px 28px rgba(37,217,205,.18); }
.button-primary:hover { background: linear-gradient(105deg,#99f6e7,#48ded7); box-shadow: 0 16px 34px rgba(37,217,205,.27); }
.button-outline { border: 1px solid rgba(226,255,255,.24); color: #effefe; background: rgba(255,255,255,.045); }
.button-outline:hover { border-color: rgba(226,255,255,.52); background: rgba(255,255,255,.085); }
.button-large { padding: 16px 21px; min-height: 52px; font-size: 14px; border-radius: 12px; }
.mobile-menu-trigger, .mobile-menu { display: none; }

/* Hero */
.hero { isolation: isolate; position: relative; padding: 158px 0 115px; min-height: 730px; background: linear-gradient(115deg,#05192b 0%,#07263b 54%,#0b3948 100%); color: #fff; overflow: hidden; }
.hero-glow { position: absolute; z-index: -1; pointer-events: none; filter: blur(2px); }
.glow-top { top: -360px; inset-inline-end: -130px; width: 920px; height: 800px; border-radius: 50%; background: radial-gradient(ellipse,rgba(23,129,150,.28),rgba(23,129,150,0) 66%); }
.glow-side { bottom: -280px; inset-inline-start: -270px; width: 750px; height: 700px; border-radius: 50%; background: radial-gradient(ellipse,rgba(23,188,167,.18),rgba(23,188,167,0) 66%); }
.hero-grid-lines { position: absolute; z-index: -1; inset: 0; opacity: .25; background-image: linear-gradient(rgba(99,218,223,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(99,218,223,.10) 1px,transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(140deg, transparent 10%,#000 90%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(26px, 5vw, 66px); align-items: center; }
.hero-copy { position: relative; z-index: 5; max-width: 610px; padding-block: 40px 64px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 750; letter-spacing: .025em; }
.eyebrow-hero { border: 1px solid rgba(92,228,215,.22); border-radius: 50px; padding: 10px 13px; background: rgba(60,218,215,.08); color: #bdf6ed; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #60edd6; box-shadow: 0 0 0 5px rgba(96,237,214,.10); }
.eyebrow-star { color: #49b6c2; }
.hero h1 { margin: 25px 0 20px; font-size: clamp(46px, 5.05vw, 73px); font-weight: 800; line-height: 1.09; letter-spacing: -.045em; }
[lang='ar'] .hero h1 { letter-spacing: -.028em; line-height: 1.24; }
.hero h1 span { color: #69ead4; background: linear-gradient(90deg,#9dfade,#2ad4cc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-sub { margin: 0; max-width: 535px; font-size: 16px; line-height: 1.92; color: #bbd3db; font-weight: 500; }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-mini-features { display: flex; gap: 17px; flex-wrap: wrap; margin-top: 30px; }
.hero-mini-features span { display: flex; align-items: center; gap: 5px; color: #d6edee; font-size: 11px; font-weight: 700; }
.hero-mini-features .icon { color: #5eecd5; width: 15px; height: 15px; }
.hero-disclosure { margin: 23px 0 0; color: #80adbd; font-size: 11px; line-height: 1.6; }
.hero-bottom-fade { position: absolute; bottom: 0; inset-inline: 0; height: 105px; pointer-events: none; background: linear-gradient(transparent,rgba(11,53,65,.28)); }

/* Hero dashboard: realistic but entirely synthetic demo data */
.hero-visual { position: relative; min-width: 0; padding: 32px 0 25px; }
.visual-aura { z-index: -1; position: absolute; inset: 10% 3% -6%; border-radius: 50%; background: radial-gradient(ellipse, rgba(60,231,217,.26), transparent 69%); filter: blur(26px); }
.dashboard-mockup { position: relative; display: flex; overflow: hidden; width: 100%; border: 1px solid rgba(217,252,252,.5); border-radius: 17px; background: #f9fcfd; box-shadow: 0 35px 95px rgba(0,0,0,.4),0 0 0 8px rgba(255,255,255,.045); transform: rotate(-1.1deg); }
[dir='rtl'] .dashboard-mockup { transform: rotate(1.1deg); }
.dash-sidebar { width: 48px; flex: 0 0 auto; background: #0b3449; display: flex; align-items: center; flex-direction: column; padding: 17px 7px; gap: 13px; }
.dash-sidebar > div { display: grid; place-items: center; width: 32px; height: 32px; color: #82b6c4; border-radius: 9px; }
.dash-sidebar .icon { width: 17px; height: 17px; }
.dash-sidebar .dash-sideactive { color: #073444; background: #73e9d8; }
.dash-sidebar .dash-sidenav-last { margin-top: auto; }
.dash-content { min-width: 0; flex: 1 1 auto; padding: 17px 18px 19px; color: #18364a; }
.dash-toprow { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dash-toprow > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.dash-toprow .dash-crumb { color: #728b9a; font-size: 10px; }
.dash-toprow strong { font-size: 17px; }
.dash-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 11px; background: #daf5f2; color: #116e75; font-size: 10px; font-family: 'DM Sans',sans-serif; font-weight: 800; }
.dash-divider { height: 1px; background: #e7eef1; margin-top: 13px; }
.dash-eyebrow-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 0; }
.dash-eyebrow-row span { font-size: 11px; font-weight: 800; color: #6a8391; }
.dash-eyebrow-row b { padding: 4px 7px; border-radius: 5px; color: #0d7984; background: #e1f6f4; font-size: 8px; font-family: 'DM Sans',sans-serif; white-space: nowrap; }
.dash-metric-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.dash-metric { position: relative; min-width: 0; border: 1px solid #e8eff2; border-radius: 10px; padding: 11px 9px; background: #fff; box-shadow: 0 2px 10px rgba(30,62,80,.025); }
.dash-metric > span { display: block; font-size: 10px; color: #7a929e; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-metric strong { display: block; padding-top: 4px; font-family: 'DM Sans',sans-serif; font-size: clamp(18px,2.4vw,29px); color: #103648; }
.dash-trend { position: absolute; bottom: 13px; inset-inline-end: 9px; font-size: 9px; color: #009c7d; background: #d6f8ec; padding: 3px 5px; border-radius: 4px; }
.dash-metric-icon { position: absolute; inset-inline-end: 8px; bottom: 11px; color: #a9cfce; }
.dash-metric-icon .icon { width: 14px; height: 14px; }
.dash-chart { border: 1px solid #e8eff2; border-radius: 10px; background: #fff; margin-top: 10px; padding: 12px 13px 9px; }
.dash-chart-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dash-chart-title b { font-size: 11px; }
.dash-chart-title span { font-size: 9px; color: #748b9a; white-space: nowrap; }
.dash-chart-title i { display: inline-block; height: 6px; width: 6px; border-radius: 50%; margin-inline-end: 5px; background: #19b2b4; }
.dash-line-chart { display: block; width: 100%; height: 115px; overflow: visible; margin-top: 13px; }
.dash-chart-days { display: flex; justify-content: space-between; gap: 5px; color: #9caebb; font-size: 9px; margin-top: 3px; }
.dash-bottom { border: 1px solid #e8eff2; border-radius: 10px; background: #fff; margin-top: 10px; padding: 11px 12px 7px; }
.dash-bottom-title { display: flex; justify-content: space-between; font-weight: 800; font-size: 11px; margin-bottom: 6px; }
.dash-bottom-title span { color: #899eaa; letter-spacing: 2px; }
.dash-lesson { display: flex; align-items: center; gap: 7px; min-height: 31px; border-top: 1px solid #f2f5f6; font-size: 10px; }
.dash-lesson i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #15afac; }
.dash-lesson span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-lesson small { font-family: 'DM Sans',sans-serif; font-size: 9px; color: #708b9d; }
.dash-lesson b { font-weight: 800; padding: 4px 6px; border-radius: 4px; background: #e4f7ee; color: #1b936b; white-space: nowrap; font-size: 9px; }
.dash-lesson:last-child b { background: #e5f3fb; color: #1986a1; }
.float-note { display: inline-flex; gap: 8px; align-items: center; z-index: 3; position: absolute; border: 1px solid #d8f1ee; border-radius: 13px; background: #fff; box-shadow: 0 14px 50px rgba(1,20,28,.2); color: #234b58; font-size: 11px; font-weight: 800; padding: 11px 14px; white-space: nowrap; }
.float-note .icon { width: 17px; height: 17px; color: #099d90; }
.float-note-top { top: 5px; inset-inline-end: -18px; transform: rotate(2deg); }
.float-note-bottom { bottom: 5px; inset-inline-start: -25px; transform: rotate(-2deg); }

/* Signal strip */
.signal-strip { background: #fff; border-bottom: 1px solid var(--line); }
.signal-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.signal-item { display: flex; align-items: center; gap: 15px; padding: 28px 26px; min-width: 0; }
.signal-item:not(:last-child) { border-inline-end: 1px solid var(--line); }
.signal-emblem { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: 14px; color: #087a84; background: #e6f7f6; }
.signal-emblem .icon { width: 22px; height: 22px; }
.signal-item h2 { margin: 0; font-size: 15px; line-height: 1.4; }
.signal-item p { margin: 4px 0 0; font-size: 12px; color: #668192; line-height: 1.6; }

/* Shared sections */
.section { padding: 110px 0; }
.section-heading { margin-bottom: 45px; }
.section-kicker { display: inline-flex; align-items: center; gap: 10px; color: #078c95; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.section-kicker i { display: inline-block; height: 7px; width: 7px; border-radius: 50%; background: #16b8bb; }
.section-heading h2, .faq-intro h2, .demo-copy h2 { max-width: 840px; margin: 15px 0 15px; font-weight: 800; font-size: clamp(32px, 3.55vw, 47px); line-height: 1.25; letter-spacing: -.036em; }
[lang='ar'] .section-heading h2, [lang='ar'] .faq-intro h2, [lang='ar'] .demo-copy h2 { letter-spacing: -.02em; line-height: 1.38; }
.section-heading p { color: #607c8b; max-width: 640px; font-size: 15px; margin: 0; line-height: 1.9; }
.narrow-center { display: flex; align-items: center; flex-direction: column; text-align: center; }
.narrow-center h2 { max-width: 770px; }
.narrow-center p { max-width: 700px; }

/* Problems */
.section-problems { background: #f9fbfc; }
.problem-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 19px; }
.problem-card { padding: 25px; background: #fff; border: 1px solid #e5edf1; border-radius: 18px; box-shadow: 0 14px 35px rgba(19,66,84,.035); transition: transform .2s ease, border-color .2s; }
.problem-card:hover { transform: translateY(-4px); border-color: #8ddbd8; }
.problem-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 27px; }
.problem-card-top > span { color: #b5c8ce; font-family: 'DM Sans',sans-serif; font-size: 12px; font-weight: 700; }
.problem-icon { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 14px; background: #e7f6f4; color: #077f8b; }
.problem-card:nth-child(2) .problem-icon { background: #edf3ff; color: #4779b2; }
.problem-card:nth-child(3) .problem-icon { background: #f9edec; color: #bf7d67; }
.problem-card h3 { margin: 0 0 11px; font-size: 19px; font-weight: 800; line-height: 1.4; }
.problem-card p { margin: 0; color: #6a8490; font-size: 14px; line-height: 1.85; }

/* Feature cards */
.section-features { background: #fff; }
.section-heading-split { display: grid; grid-template-columns: 1.25fr .75fr; align-items: end; gap: 70px; }
.section-heading-split h2 { max-width: 720px; }
.section-heading-split p { padding-bottom: 15px; }
.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.feature-card { padding: 28px 25px 22px; border: 1px solid #e5edef; border-radius: 20px; min-height: 257px; background: #fff; position: relative; overflow: hidden; transition: border-color .25s, box-shadow .25s, transform .25s; }
.feature-card:hover { border-color: #bbdedf; box-shadow: var(--shadow); transform: translateY(-4px); }
.feature-icon { display: grid; place-items: center; height: 50px; width: 50px; border-radius: 15px; margin-bottom: 25px; }
.feature-icon .icon { width: 25px; height: 25px; }
.color-mint { background: #e3f8f2; color: #0e957e; }
.color-blue { background: #e7f1fd; color: #337ab2; }
.color-peach { background: #fff0e4; color: #d18653; }
.color-violet { background: #f0ebfb; color: #8862b5; }
.feature-tag { position: absolute; top: 31px; inset-inline-end: 25px; color: #91abb3; font-family: 'DM Sans',sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.feature-card h3 { margin: 0 0 9px; font-size: 20px; line-height: 1.3; }
.feature-card p { margin: 0; max-width: 345px; color: #67818f; font-size: 14px; line-height: 1.85; }
.feature-line { position: absolute; inset-inline: 0; bottom: 0; height: 4px; transform: scaleX(0); transition: transform .25s; background: linear-gradient(90deg,#39c9c1,#6bead6); }
.feature-card:hover .feature-line { transform: scaleX(1); }

/* Workflow */
.workflow-section { color: #fff; background: radial-gradient(ellipse at 25% 0%,rgba(24,156,159,.27),transparent 41%),#08263a; overflow: hidden; }
.workflow-section .section-kicker { color: #85e8d7; }
.workflow-section .section-heading p { color: #adcbd3; }
.steps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 19px; position: relative; }
.steps-grid::before { content: ''; position: absolute; height: 1px; border-top: 1px dashed #3f6978; top: 19px; inset-inline-start: 15%; inset-inline-end: 15%; }
.step-card { position: relative; min-height: 203px; padding: 0 10px; }
.step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.step-number { font: 800 24px 'DM Sans',sans-serif; color: #7defd9; }
.step-node { position: relative; z-index: 1; height: 14px; width: 14px; background: #1bb5b9; border: 3px solid #08263a; box-shadow: 0 0 0 2px rgba(106,244,222,.5); border-radius: 50%; }
.step-card h3 { margin: 0 0 9px; font-size: 19px; }
.step-card p { margin: 0; color: #a6c3ce; line-height: 1.85; font-size: 14px; }

/* Interactive product tour */
.tour-section { background: #f8fbfc; }
.tour-shell { border: 1px solid #dce8ec; border-radius: 22px; background: #fff; box-shadow: 0 30px 90px rgba(19,64,81,.08); overflow: hidden; }
.tour-tabs { padding: 12px; display: flex; gap: 7px; border-bottom: 1px solid #e7eef1; background: #fff; }
.tour-tab { border: 0; border-radius: 11px; background: none; color: #708b9b; display: flex; gap: 9px; align-items: center; justify-content: center; padding: 13px 18px; font-size: 14px; font-weight: 800; flex: 1 1 0; transition: background .2s,color .2s; }
.tour-tab .icon { width: 18px; height: 18px; }
.tour-tab:hover { background: #eef8f7; color: #0a7f84; }
.tour-tab.is-active { color: #077b88; background: #e4f8f5; box-shadow: inset 0 0 0 1px #bdeae6; }
.tour-window { margin: 22px; border-radius: 14px; border: 1px solid #dfe8eb; overflow: hidden; background: #fff; }
.tour-browser-top { height: 40px; padding-inline: 13px; background: #f4f8fa; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #e5eef2; color: #9ab0bb; font-family: 'DM Sans',sans-serif; }
.browser-dots { direction: ltr; display: flex; gap: 5px; }
.browser-dots i { width: 8px; height: 8px; border-radius: 50%; background: #c3d1d8; }
.browser-dots i:first-child { background: #f29e97; }
.browser-dots i:nth-child(2) { background: #f4ca8a; }
.browser-dots i:nth-child(3) { background: #91d7c0; }
.tour-browser-address { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: center; font-size: 11px; }
.tour-demo-tag { color: #137b7d; font-size: 9px; white-space: nowrap; font-weight: 700; }
.tour-inner { display: flex; min-height: 430px; }
.tour-aside { width: 63px; flex: 0 0 auto; background: #092d41; display: flex; align-items: center; flex-direction: column; gap: 20px; padding: 20px 8px; color: #719fad; }
.tour-aside > div { width: 35px; height: 35px; border-radius: 10px; display: grid; place-items: center; }
.tour-aside > div.is-current { background: #23c9bf; color: #042f3f; }
.tour-aside .icon { height: 18px; width: 18px; }
.tour-screen-zone { min-width: 0; flex: 1; }
.tour-appbar { display: flex; align-items: center; gap: 16px; min-height: 61px; border-bottom: 1px solid #e9eff1; padding: 11px 22px; font-weight: 800; font-size: 13px; }
.tour-appbar > span { flex: 1; }
.tour-appbar > div { border: 1px solid #e1edf0; border-radius: 7px; padding: 8px 14px; display: flex; align-items: center; gap: 6px; color: #a1b2bc; font-weight: 500; font-size: 11px; }
.tour-appbar > div .icon { width: 13px; height: 13px; }
.tour-appbar > b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e2f6f3; color: #0a9094; font-size: 11px; font-family: 'DM Sans',sans-serif; }
.tour-panel { padding: 24px 26px 27px; animation: tourEnter .22s ease; }
@keyframes tourEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.tour-panel-title { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-bottom: 20px; }
.tour-panel h3 { font-size: 21px; margin: 0 0 5px; }
.tour-panel-title p { margin: 0; color: #7b94a1; font-size: 12px; }
.pill { padding: 6px 8px; border-radius: 6px; white-space: nowrap; font: 800 9px 'DM Sans',sans-serif; }
.pill.soft { background: #e7f8f3; color: #129a8a; }
.tour-metric-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.tour-metric { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 12px; border: 1px solid #e7edf1; padding: 18px 16px; border-radius: 11px; background: #fcfdfd; }
.tour-metric small { color: #7b97a1; font-size: 11px; }
.tour-metric strong { color: #113649; font: 800 29px 'DM Sans',sans-serif; }
.tour-metric strong.amount { font-size: clamp(15px,1.8vw,22px); }
.tour-metric em { position: absolute; inset-inline-end: 18px; bottom: 18px; color: #0eaa87; font-size: 16px; font-style: normal; }
.tour-activity, .finance-rows { border: 1px solid #e8f0f2; border-radius: 11px; margin-top: 14px; padding: 12px 17px; }
.tour-activity h4, .finance-rows h4 { margin: 3px 0 9px; font-size: 13px; }
.activity-row { display: flex; align-items: center; gap: 11px; min-height: 56px; border-top: 1px solid #edf2f5; }
.activity-icon { display: grid; place-items: center; height: 29px; width: 29px; border-radius: 8px; background: #eaf8f5; color: #0c9d95; }
.activity-icon .icon { width: 16px; height: 16px; }
.activity-row > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.activity-row b { font-size: 12px; }
.activity-row small { font-size: 10px; color: #8da1aa; }
.activity-check .icon { color: #1faf9e; width: 15px; height: 15px; }
.tour-table-container { border: 1px solid #e6eef1; border-radius: 10px; overflow: auto; }
.tour-table { border-collapse: collapse; width: 100%; min-width: 570px; font-size: 12px; text-align: start; }
.tour-table th { padding: 14px; background: #f5f9fa; color: #7b95a3; font-size: 10px; text-align: start; font-weight: 800; }
.tour-table td { padding: 15px 14px; border-top: 1px solid #edf2f3; white-space: nowrap; }
.tour-table td:first-child { display: flex; align-items: center; gap: 9px; font-weight: 800; }
.fake-avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; background: #dff2f4; color: #168d98; border-radius: 8px; }
.status-pill { display: inline-block; padding: 5px 9px; border-radius: 20px; font-size: 11px; font-weight: 800; }
.status-1 { background: #e4f8ef; color: #138b62; }
.status-2 { background: #fff3e4; color: #b4772e; }
.status-3 { background: #fff0f0; color: #ba5363; }
.tour-fine-print { color: #8c9fa6; font-size: 10px; margin-top: 15px; }
.calendar-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 11px; }
.calendar-day { min-height: 190px; min-width: 0; border: 1px solid #e5edf1; border-radius: 11px; background: #fcfefe; padding: 12px 9px; }
.calendar-day > strong { display: block; padding-bottom: 10px; color: #647f8c; font-size: 12px; border-bottom: 1px solid #eaf0f3; }
.calendar-event { display: flex; flex-direction: column; gap: 8px; border-radius: 9px; padding: 11px 7px; margin-top: 11px; background: #e5f7f4; color: #17807f; border-inline-start: 3px solid #28bfb7; }
.calendar-event b { font-size: 12px; overflow-wrap: anywhere; }
.calendar-event small { font-size: 10px; }
.calendar-event.event-purple { background: #f1ecf9; color: #8960b4; border-inline-start-color: #9971ca; }
.calendar-event-empty { display: block; margin: 47px 0; text-align: center; color: #b3c6ca; }
.finance-rows > div { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #edf3f5; padding: 17px 1px; font-size: 13px; }
.finance-rows > div span { display: flex; gap: 9px; align-items: center; }
.finance-rows > div .icon { color: #16949b; width: 18px; height: 18px; }
.finance-rows > div strong { color: #1d9e7d; font: 800 14px 'DM Sans',sans-serif; }
.finance-rows > div strong.refund-amount { color: #c26f62; }
.tour-caption { display: flex; align-items: center; gap: 7px; color: #8095a1; padding: 0 25px 19px; font-size: 11px; }
.tour-caption .icon { width: 15px; height: 15px; }

/* Roles */
.roles-section { background: #fff; }
.roles-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 17px; }
.role-card { position: relative; border-radius: 18px; padding: 27px 22px; border: 1px solid #e4eef0; background: #fff; box-shadow: 0 10px 32px rgba(7,65,82,.025); min-height: 224px; }
.role-card:nth-child(even) { background: #f7fbfc; }
.role-icon { display: grid; place-items: center; height: 47px; width: 47px; border: 1px solid #d2ece9; border-radius: 13px; color: #008e93; background: #e6f9f6; margin-bottom: 24px; }
.role-icon .icon { width: 22px; height: 22px; }
.role-card h3 { font-size: 17px; margin: 0 0 9px; }
.role-card p { margin: 0; color: #6e8692; font-size: 13px; line-height: 1.8; }

/* FAQ */
.faq-section { background: #f7fafb; }
.faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 75px; align-items: start; }
.faq-intro h2 { max-width: 430px; }
.faq-decor { height: 86px; width: 86px; margin-top: 55px; border-radius: 24px; background: #e5f6f2; color: #4ebfb8; display: grid; place-items: center; transform: rotate(-10deg); }
.faq-decor .icon { width: 38px; height: 38px; }
.faq-items { border-top: 1px solid #dae7eb; }
.faq-item { border-bottom: 1px solid #dae7eb; }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; padding: 22px 6px; font-size: 15px; font-weight: 800; line-height: 1.55; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { color: #598798; transition: transform .25s; }
.faq-item[open] summary .icon { transform: rotate(180deg); color: #088e94; }
.faq-item p { color: #647f8d; line-height: 1.9; font-size: 14px; margin: -5px 5px 23px; }

/* Demo CTA and form */
.demo-section { background: #082739; color: #f2fcfd; position: relative; overflow: hidden; }
.demo-section:before { content: ''; position: absolute; width: 800px; height: 800px; border-radius: 50%; top: -350px; inset-inline-start: -220px; background: radial-gradient(ellipse,rgba(55,218,192,.20),transparent 66%); pointer-events: none; }
.demo-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 75px; align-items: center; position: relative; z-index: 1; }
.demo-copy { max-width: 490px; }
.section-kicker.on-dark { color: #7af0d7; }
.demo-copy h2 { font-size: clamp(35px,4vw,53px); line-height: 1.28; }
.demo-copy p { font-size: 16px; color: #b3d0d6; line-height: 1.95; }
.demo-copy > small { color: #76a5ad; font-size: 12px; }
.demo-wave-lines { position: relative; height: 100px; overflow: hidden; margin: 38px 0; opacity: .85; }
.demo-wave-lines span { position: absolute; inset-inline: -60px; top: 17px; height: 60px; border: 2px solid #3aa5a2; border-radius: 50%; transform: rotate(-5deg); }
.demo-wave-lines span:nth-child(2) { top: 31px; border-color: #247e90; transform: rotate(3deg); }
.demo-wave-lines span:nth-child(3) { top: 45px; border-color: #206e81; transform: rotate(-2deg); }
.demo-form-card { padding: 29px; background: #fff; border-radius: 23px; color: #153e4b; box-shadow: 0 25px 75px rgba(0,0,0,.15); }
.demo-form-card h3 { margin: 0 0 18px; font-size: 21px; }
.preview-notice { display: flex; gap: 9px; background: #ecf9f8; border: 1px solid #cce8e6; color: #427a7b; font-size: 11px; line-height: 1.7; border-radius: 9px; padding: 10px 11px; margin-bottom: 21px; }
.preview-notice .icon { color: #18858e; width: 16px; height: 16px; margin-top: 2px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 18px; }
.demo-form-card label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: #365e6c; font-weight: 800; }
.demo-form-card input:not([type="checkbox"]), .demo-form-card select { min-width: 0; width: 100%; border: 1px solid #dae7ec; border-radius: 9px; outline: none; color: #143648; background: #fff; font-size: 13px; padding: 12px; height: 45px; }
.demo-form-card input:focus, .demo-form-card select:focus, .demo-form-card textarea:focus { border-color: #33bfb6; box-shadow: 0 0 0 3px rgba(33,187,186,.10); }
.demo-form-card input::placeholder, .demo-form-card textarea::placeholder { color: #a1b4be; }
.button-wide { width: 100%; margin-top: 2px; min-height: 49px; }
.form-feedback { color: #126b6e; border: 1px solid #d0e7e7; background: #f1faf8; line-height: 1.8; border-radius: 9px; padding: 12px 13px; margin-top: 14px; font-size: 13px; font-weight: 700; }
.form-feedback.is-error { color: #a8423f; border-color: #f0d8d8; background: #fff5f4; }

/* Footer */
.site-footer { background: #051b2b; color: #d6e8eb; padding: 69px 0 26px; }
.footer-main { display: grid; grid-template-columns: 1.7fr .7fr .9fr; gap: 65px; padding-bottom: 55px; }
.footer-brand .brand-wordmark { font-size: 28px; }
.footer-brand p { margin: 19px 0 0; max-width: 370px; line-height: 1.8; color: #8fb0bb; font-size: 14px; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer-col h3 { color: #efffff; font-size: 14px; margin: 0 0 6px; }
.footer-col a, .footer-col p { color: #91afba; font-size: 13px; margin: 0; line-height: 1.7; }
.footer-col a:hover { color: var(--mint); }
.footer-col a .icon { width: 13px; height: 13px; }
.footer-bottom { border-top: 1px solid #153b4a; padding-top: 25px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; color: #668b9a; font-size: 12px; }
.footer-langs { direction: ltr; display: flex; gap: 9px; }
.footer-langs a:hover { color: #68e8d7; }

/* Responsive */
@media (max-width: 1190px) {
  .header-grid { grid-template-columns: 198px 1fr auto; gap: 13px; }
  .main-nav { gap: 15px; }
  .header-actions { gap: 9px; }
  .header-cta { padding-inline: 12px; }
  .hero-grid { gap: 26px; }
  .hero h1 { font-size: clamp(44px,5vw,62px); }
  .float-note-top { inset-inline-end: -9px; }
  .float-note-bottom { inset-inline-start: -9px; }
}
@media (max-width: 980px) {
  .container { width: min(100% - 36px, 1200px); }
  .main-nav { display: none; }
  .header-grid { grid-template-columns: 1fr auto; }
  .mobile-menu-trigger { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid rgba(255,255,255,.24); border-radius: 11px; background: rgba(255,255,255,.04); color: #fff; }
  .mobile-menu-trigger .icon { width: 23px; height: 23px; }
  .mobile-menu-trigger .close-symbol { display: none; }
  .mobile-menu-trigger[aria-expanded='true'] .close-symbol { display: block; }
  .mobile-menu-trigger[aria-expanded='true'] .menu-symbol { display: none; }
  .mobile-menu:not([hidden]) { display: flex; position: absolute; inset-inline: 18px; top: 76px; padding: 12px; flex-direction: column; gap: 2px; background: #0d3647; border: 1px solid #366274; border-radius: 14px; box-shadow: 0 22px 55px rgba(0,0,0,.4); max-height: calc(100dvh - 95px); overflow-y: auto; }
  .mobile-menu a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 12px; border-radius: 9px; color: #e1f2f4; font-size: 15px; font-weight: 700; }
  .mobile-menu a:hover { background: #16475b; color: #fff; }
  .mobile-menu a .icon { width: 16px; height: 16px; }
  [dir='rtl'] .mobile-menu a .icon { transform: rotate(180deg); }
  .mobile-menu a.mobile-menu-cta { color: #123742; background: #69ead5; margin-top: 7px; }
  .hero { padding-top: 134px; min-height: auto; padding-bottom: 80px; }
  .hero-grid { grid-template-columns: 1fr; gap: 4px; }
  .hero-copy { max-width: 760px; padding: 16px 0 28px; }
  .hero h1 { font-size: clamp(46px, 7.2vw, 70px); }
  .hero-visual { width: min(100% - 32px, 700px); justify-self: center; margin-top: 18px; }
  .dashboard-mockup { transform: rotate(0deg) !important; }
  .signal-item { padding: 22px 13px; gap: 10px; }
  .section { padding: 80px 0; }
  .section-heading-split { gap: 30px; }
  .feature-grid { grid-template-columns: repeat(2,1fr); }
  .steps-grid { grid-template-columns: repeat(2,1fr); row-gap: 30px; }
  .steps-grid::before { display: none; }
  .roles-grid { grid-template-columns: repeat(2,1fr); }
  .demo-grid { gap: 40px; }
  .faq-layout { gap: 35px; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 77px; }
  .header-grid { height: 75px; }
  .brand-mark { width: 39px; height: 39px; }
  .brand-wordmark { font-size: 22px; }
  .brand-wordmark small { font-size: 7px; }
  .header-cta { display: none; }
  .hero { padding-top: 114px; }
  .hero-copy { text-align: start; }
  .hero h1 { font-size: clamp(39px, 10vw, 63px); }
  .hero-sub { font-size: 14px; line-height: 1.9; }
  .float-note-top { display: none; }
  .float-note-bottom { inset-inline-start: -12px; bottom: -4px; }
  .hero-visual { margin-top: 10px; width: 100%; }
  .signal-grid { grid-template-columns: 1fr; padding-block: 9px; }
  .signal-item { padding: 15px 2px; }
  .signal-item:not(:last-child) { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .section-heading-split { display: block; }
  .section-heading-split p { padding: 0; }
  .section-heading h2 { font-size: clamp(29px,6.5vw,39px); }
  .problem-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: auto; padding-bottom: 30px; }
  .steps-grid { gap: 24px; }
  .step-card { min-height: auto; padding-inline: 0; }
  .tour-window { margin: 12px; }
  .tour-inner { min-height: 370px; }
  .tour-aside { width: 45px; gap: 14px; padding-inline: 5px; }
  .tour-aside > div { width: 32px; }
  .tour-aside .icon { width: 16px; height: 16px; }
  .tour-appbar { padding: 8px 12px; min-height: 56px; }
  .tour-appbar > div { display: none; }
  .tour-panel { padding: 18px 13px; }
  .tour-panel h3 { font-size: 19px; }
  .tour-metric { padding: 13px 11px; }
  .tour-metric strong { font-size: 25px; }
  .tour-metric strong.amount { font-size: 15px; }
  .roles-grid { gap: 12px; }
  .role-card { min-height: 0; padding: 22px 18px; }
  .faq-layout, .demo-grid { grid-template-columns: 1fr; }
  .faq-decor { display: none; }
  .demo-form-card { padding: 22px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 35px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 490px) {
  .container { width: min(100% - 28px, 1200px); }
  .brand-mark { width: 36px; height: 36px; }
  .brand-wordmark { font-size: 20px; }
  .brand-wordmark small { letter-spacing: .1em; }
  .header-actions { gap: 8px; }
  .locale-switch { gap: 4px; font-size: 11px; padding: 6px 5px; }
  .mobile-menu-trigger { width: 40px; height: 40px; }
  .hero { padding-top: 104px; padding-bottom: 52px; }
  .hero h1 { margin-top: 20px; font-size: clamp(34px, 10.5vw, 45px); }
  [lang='ar'] .hero h1 { line-height: 1.38; }
  .eyebrow-hero { font-size: 10px; }
  .hero-actions { gap: 9px; margin-top: 24px; }
  .button-large { min-height: 45px; padding: 12px 13px; font-size: 12px; }
  .button-large .icon { width: 16px; height: 16px; }
  .hero-mini-features { gap: 10px 13px; margin-top: 22px; }
  .hero-mini-features span { font-size: 10px; }
  .hero-disclosure { font-size: 10px; }
  .hero-visual { padding: 20px 0 27px; }
  .dashboard-mockup { border-radius: 12px; }
  .dash-sidebar { width: 33px; padding: 9px 4px; gap: 7px; }
  .dash-sidebar img { height: 21px; width: 21px; }
  .dash-sidebar > div { width: 25px; height: 25px; }
  .dash-sidebar .icon { width: 13px; height: 13px; }
  .dash-content { padding: 9px 9px 10px; }
  .dash-toprow strong { font-size: 12px; }
  .dash-toprow .dash-crumb { font-size: 9px; }
  .dash-avatar { height: 25px; width: 25px; }
  .dash-divider { margin-top: 8px; }
  .dash-eyebrow-row { padding: 9px 0; }
  .dash-metric-grid { gap: 4px; }
  .dash-metric { padding: 8px 5px; }
  .dash-metric > span { font-size: 8px; }
  .dash-metric strong { font-size: 18px; }
  .dash-trend, .dash-metric-icon { display: none; }
  .dash-chart { margin-top: 6px; padding: 9px 8px 5px; }
  .dash-chart-title b { font-size: 9px; }
  .dash-chart-title span { font-size: 8px; }
  .dash-line-chart { height: 70px; margin-top: 9px; }
  .dash-chart-days { font-size: 7px; }
  .dash-bottom { padding: 8px; margin-top: 6px; }
  .dash-bottom-title { font-size: 10px; }
  .dash-lesson { font-size: 8px; min-height: 26px; }
  .dash-lesson b, .dash-lesson small { font-size: 8px; }
  .float-note { font-size: 10px; padding: 8px 10px; }
  .section { padding: 66px 0; }
  .section-heading { margin-bottom: 30px; }
  .section-heading h2 { font-size: 30px; line-height: 1.35; }
  .problem-card { padding: 22px; }
  .steps-grid { grid-template-columns: 1fr 1fr; gap: 21px 15px; }
  .step-card h3 { font-size: 16px; }
  .step-card p { font-size: 12px; }
  .step-top { margin-bottom: 16px; }
  .tour-tabs { padding: 7px; gap: 4px; }
  .tour-tab { flex-direction: column; gap: 4px; font-size: 10px; padding: 8px 2px; border-radius: 7px; }
  .tour-tab .icon { width: 16px; height: 16px; }
  .tour-browser-top { gap: 7px; padding: 7px; }
  .tour-demo-tag { display: none; }
  .tour-browser-address { font-size: 9px; }
  .tour-aside { display: none; }
  .tour-appbar { padding: 8px; min-height: 46px; }
  .tour-appbar > b { width: 27px; height: 27px; }
  .tour-panel { padding: 13px 9px; }
  .tour-panel-title { align-items: flex-start; gap: 5px; }
  .tour-panel-title p { font-size: 10px; line-height: 1.6; }
  .tour-panel-title .pill { font-size: 8px; padding: 4px; }
  .tour-metric-grid { gap: 5px; }
  .tour-metric { padding: 9px 7px; gap: 7px; }
  .tour-metric small { font-size: 9px; }
  .tour-metric strong { font-size: 20px; }
  .tour-metric strong.amount { font-size: 12px; word-break: break-word; }
  .tour-metric em { display: none; }
  .tour-activity { padding-inline: 10px; }
  .activity-row { gap: 7px; }
  .calendar-grid { gap: 3px; }
  .calendar-day { padding: 8px 3px; min-height: 164px; }
  .calendar-day > strong { font-size: 9px; overflow-wrap: anywhere; }
  .calendar-event { padding: 7px 3px; }
  .calendar-event b { font-size: 9px; }
  .calendar-event small { font-size: 8px; }
  .finance-rows { padding-inline: 10px; }
  .tour-caption { padding: 2px 15px 15px; font-size: 10px; }
  .roles-grid { grid-template-columns: 1fr; }
  .role-card { padding: 20px; }
  .role-icon { margin-bottom: 14px; }
  .faq-item summary { font-size: 14px; padding: 18px 5px; }
  .demo-form-card { padding: 18px; }
  .form-row { grid-template-columns: 1fr; margin-bottom: 14px; gap: 13px; }
  .footer-main { gap: 25px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Phase 2 — accessible, privacy-conscious lead capture */
.demo-form-card textarea { min-width:0; width:100%; min-height:96px; border:1px solid #dae7ec; border-radius:9px; outline:0; padding:12px; resize:vertical; color:#143648; background:#fff; font-size:13px; line-height:1.5; }
.demo-form-card .consent-field { display:flex; flex-direction:row; align-items:flex-start; gap:10px; margin: 4px 0 16px; font-size:12px; line-height:1.7; color:#466574; font-weight:600; }
.demo-form-card .consent-field input { appearance:auto; width:18px; height:18px; flex:0 0 18px; margin:2px 0 0; accent-color:#079ca0; }
.honeypot-field { position:absolute !important; left:-100000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.turnstile-slot { margin-bottom:14px; min-height:66px; }